feat: Services pages
This commit is contained in:
Fándly Gergő
parent
4f62f859f7
commit
d0fcc4392f
126
src/about.html
126
src/about.html
@ -1,43 +1,93 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html>
|
<html>
|
||||||
<head>
|
<head>
|
||||||
<title>Core Computing</title>
|
<title>Firma - Core Computing</title>
|
||||||
<meta charset="utf-8" />
|
<meta charset="utf-8" />
|
||||||
<script src="./index.js"></script>
|
<script src="./index.js"></script>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<app-header></app-header>
|
<app-header></app-header>
|
||||||
<div class="about_bg"></div>
|
<div class="about_bg"></div>
|
||||||
<div class="about_content">
|
<div class="about_content">
|
||||||
<p class="about_header">Ce facem</p>
|
<p class="about_header">Ce facem</p>
|
||||||
<div class="about_col2 about_col2__center">
|
<div class="about_col2 about_col2__center">
|
||||||
<div class="about_col2_col">
|
<div class="about_col2_col">
|
||||||
<p>Core Computing este o companie de IT înființată în 2020, care, până în prezent, a dezvoltat o echipa de specialiști cu o vastă experiență în domeniu. Prin tot ceea ce facem, ne asumăm rolul de a eficientiza munca partenerilor noștri prin dezvoltarea de soluții tehnice customizate după nevoile lor</p>
|
<p>
|
||||||
<p>Suntem mereu la curent cu cele mai noi tehnologii și ne adaptăm fiecărui proiect, respectând cerințele specifice. Dăm dovadă de eficiență și răspundem cu promptitudine cererilor tuturor clienților noștri.</p>
|
Core Computing este o companie de IT înființată în 2020, care, până
|
||||||
|
în prezent, a dezvoltat o echipa de specialiști cu o vastă
|
||||||
|
experiență în domeniu. Prin tot ceea ce facem, ne asumăm rolul de a
|
||||||
|
eficientiza munca partenerilor noștri prin dezvoltarea de soluții
|
||||||
|
tehnice customizate după nevoile lor
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
Suntem mereu la curent cu cele mai noi tehnologii și ne adaptăm
|
||||||
|
fiecărui proiect, respectând cerințele specifice. Dăm dovadă de
|
||||||
|
eficiență și răspundem cu promptitudine cererilor tuturor clienților
|
||||||
|
noștri.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class="about_col2_col">
|
||||||
|
<p>
|
||||||
|
Colaborăm cu companii mici, medii și mari, atât la nivel național
|
||||||
|
cât și global. În munca noastră de dezvoltare software, ne place să
|
||||||
|
facem lucrurile diferit. Nu folosim platforme predefinite sau
|
||||||
|
șabloane standard. Realizăm, de la zero, codul brut pentru toate
|
||||||
|
proiectele pe care le dezvoltăm. Astfel, obținem de fiecare dată
|
||||||
|
rezultate unice, personalizate pentru fiecare client.
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
Dăm dovadă de flexibilitate și ne adaptăm cu ușurință cerințelor,
|
||||||
|
oferind soluții de dezvoltare menite să ajute la o mai bună
|
||||||
|
organizare, dar și la creșterea afacerilor partenerilor noștri.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="about_col2_col">
|
<p class="about_header">Centrul de date</p>
|
||||||
<p>Colaborăm cu companii mici, medii și mari, atât la nivel național cât și global. În munca noastră de dezvoltare software, ne place să facem lucrurile diferit. Nu folosim platforme predefinite sau șabloane standard. Realizăm, de la zero, codul brut pentru toate proiectele pe care le dezvoltăm. Astfel, obținem de fiecare dată rezultate unice, personalizate pentru fiecare client.</p>
|
<div>
|
||||||
<p>Dăm dovadă de flexibilitate și ne adaptăm cu ușurință cerințelor, oferind soluții de dezvoltare menite să ajute la o mai bună organizare, dar și la creșterea afacerilor partenerilor noștri.</p>
|
<div class="about_col2 about_col2__imgtext">
|
||||||
|
<p class="about_col2_text">
|
||||||
|
Sistem Emerson SmartAisle Containment ce controleaza intregul
|
||||||
|
ansamblu CRAC in vederea securizarii SLA-ului garantat pe
|
||||||
|
temperatura. Procent de umiditate controlat si constant.
|
||||||
|
</p>
|
||||||
|
<img class="about_col2_img" src="../res/dc1.jpg" />
|
||||||
|
</div>
|
||||||
|
<div class="about_col2 about_col2__imgtext">
|
||||||
|
<img class="about_col2_img" src="../res/dc2.jpg" />
|
||||||
|
<p class="about_col2_text">
|
||||||
|
Sistem de detectie incendiu format din detectori adresabili (fum si
|
||||||
|
temperatura). Sistem VESDA de aspiratie pentru detectia timpurie a
|
||||||
|
fumului in camere de colocare si camera tehnica. Sistem de stingere
|
||||||
|
cu gaz inert (INERGEN). Acesta este un amestec de gaze naturale
|
||||||
|
prezente in mod obisnuit in atmosfera - astfel, gazul inergen nu
|
||||||
|
contribuie la fenomenul de incalzire globala si nu are impact asupra
|
||||||
|
stratului de ozon.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class="about_col2 about_col2__imgtext">
|
||||||
|
<p class="about_col2_text">
|
||||||
|
Sistemul de control access biometric (scanare amprenta faciala,
|
||||||
|
fingerprint, cod si card) asigura un nivel inalt de securitate.
|
||||||
|
Sistem de monitorizare video(camere IP 3mp) cu circuit intern ce
|
||||||
|
monitorizeaza interiorul si exteriorul, detectoare de miscare,
|
||||||
|
indicatoare de usi deschise, senzori de inundatie, sisteme de acces
|
||||||
|
cu cardul. In inspectiile de rutina, efectuate de agentii de
|
||||||
|
securitate, sunt incluse toate punctele de intrare/iesire ale
|
||||||
|
cladirii, precum si zonele interne securizate.
|
||||||
|
</p>
|
||||||
|
<img class="about_col2_img" src="../res/dc3.jpg" />
|
||||||
|
</div>
|
||||||
|
<div class="about_col2 about_col2__imgtext">
|
||||||
|
<img class="about_col2_img" src="../res/dc4.jpg" />
|
||||||
|
<p class="about_col2_text">
|
||||||
|
Protectie standard pentru fiecare rack: 16A, 32A, 63A, sau chiar mai
|
||||||
|
mult, daca este necesar. Alimentarea cu energie de 380VAC, 230VAC,
|
||||||
|
48VDC. Fiecare rack beneficiaza de doua circuite separate de curent.
|
||||||
|
Putere instalata de 1.25 MW. UPS si generatoare diesel pentru
|
||||||
|
backup.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<p class="about_header">Centrul de date</p>
|
</body>
|
||||||
<div>
|
</html>
|
||||||
<div class="about_col2 about_col2__imgtext">
|
|
||||||
<p class="about_col2_text">Sistem Emerson SmartAisle Containment ce controleaza intregul ansamblu CRAC in vederea securizarii SLA-ului garantat pe temperatura. Procent de umiditate controlat si constant.</p>
|
|
||||||
<img class="about_col2_img" src="../res/dc1.jpg" />
|
|
||||||
</div>
|
|
||||||
<div class="about_col2 about_col2__imgtext">
|
|
||||||
<img class="about_col2_img" src="../res/dc2.jpg" />
|
|
||||||
<p class="about_col2_text">Sistem de detectie incendiu format din detectori adresabili (fum si temperatura). Sistem VESDA de aspiratie pentru detectia timpurie a fumului in camere de colocare si camera tehnica. Sistem de stingere cu gaz inert (INERGEN). Acesta este un amestec de gaze naturale prezente in mod obisnuit in atmosfera - astfel, gazul inergen nu contribuie la fenomenul de incalzire globala si nu are impact asupra stratului de ozon.</p>
|
|
||||||
</div>
|
|
||||||
<div class="about_col2 about_col2__imgtext">
|
|
||||||
<p class="about_col2_text">Sistemul de control access biometric (scanare amprenta faciala, fingerprint, cod si card) asigura un nivel inalt de securitate. Sistem de monitorizare video(camere IP 3mp) cu circuit intern ce monitorizeaza interiorul si exteriorul, detectoare de miscare, indicatoare de usi deschise, senzori de inundatie, sisteme de acces cu cardul. In inspectiile de rutina, efectuate de agentii de securitate, sunt incluse toate punctele de intrare/iesire ale cladirii, precum si zonele interne securizate.</p>
|
|
||||||
<img class="about_col2_img" src="../res/dc3.jpg" />
|
|
||||||
</div>
|
|
||||||
<div class="about_col2 about_col2__imgtext">
|
|
||||||
<img class="about_col2_img" src="../res/dc4.jpg" />
|
|
||||||
<p class="about_col2_text">Protectie standard pentru fiecare rack: 16A, 32A, 63A, sau chiar mai mult, daca este necesar. Alimentarea cu energie de 380VAC, 230VAC, 48VDC. Fiecare rack beneficiaza de doua circuite separate de curent. Putere instalata de 1.25 MW. UPS si generatoare diesel pentru backup. </p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</body>
|
|
||||||
</head>
|
|
||||||
|
|||||||
@ -1,11 +1,11 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html>
|
<html>
|
||||||
<head>
|
<head>
|
||||||
<title>Core Computing</title>
|
<title>Core Computing</title>
|
||||||
<meta charset="utf-8" />
|
<meta charset="utf-8" />
|
||||||
<script src="./index.js"></script>
|
<script src="./index.js"></script>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<app-header />
|
<app-header />
|
||||||
</body>
|
</body>
|
||||||
</head>
|
</html>
|
||||||
|
|||||||
@ -1,25 +1,36 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html>
|
<html>
|
||||||
<head>
|
<head>
|
||||||
<title>Core Computing</title>
|
<title>Core Computing</title>
|
||||||
<meta charset="utf-8" />
|
<meta charset="utf-8" />
|
||||||
<script src="./index.js"></script>
|
<script src="./index.js"></script>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<app-header></app-header>
|
<app-header></app-header>
|
||||||
<div class="index_bg"></div>
|
<div class="index_bg"></div>
|
||||||
<div class="index_content">
|
<div class="index_content">
|
||||||
<div class="index_content_box">
|
<div class="index_content_box">
|
||||||
<p class="index_content_slogan">Mută-te în Cloud!</p>
|
<p class="index_content_slogan">Mută-te în Cloud!</p>
|
||||||
<p class="index_content_description">Core Computing îți oferă toate serviciile necesare pentru realizarea unei infrastructurii cloud-native.</p>
|
<p class="index_content_description">
|
||||||
</div>
|
Core Computing îți oferă toate serviciile necesare pentru realizarea
|
||||||
<div class="index_content_box">
|
unei infrastructurii cloud-native.
|
||||||
<div class="index_content_signupForm">
|
</p>
|
||||||
<p class="index_content_signupForm_title">Începe astăzi!</p>
|
</div>
|
||||||
<input id="su_email" type="email" class="index_content_signupForm_field" placeholder="Email" />
|
<div class="index_content_box">
|
||||||
<app-button onclick="alert('Sign up using: ' + document.getElementById('su_email').value)" data-text="Crează un cont"></app-button>
|
<div class="index_content_signupForm">
|
||||||
|
<p class="index_content_signupForm_title">Începe astăzi!</p>
|
||||||
|
<input
|
||||||
|
id="su_email"
|
||||||
|
type="email"
|
||||||
|
class="index_content_signupForm_field"
|
||||||
|
placeholder="Email"
|
||||||
|
/>
|
||||||
|
<app-button
|
||||||
|
onclick="alert('Sign up using: ' + document.getElementById('su_email').value)"
|
||||||
|
data-text="Crează un cont"
|
||||||
|
></app-button>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</body>
|
||||||
</body>
|
</html>
|
||||||
</head>
|
|
||||||
|
|||||||
@ -1,11 +1,11 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html>
|
<html>
|
||||||
<head>
|
<head>
|
||||||
<title>Core Computing</title>
|
<title>Core Computing</title>
|
||||||
<meta charset="utf-8" />
|
<meta charset="utf-8" />
|
||||||
<script src="./index.js"></script>
|
<script src="./index.js"></script>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<app-header />
|
<app-header />
|
||||||
</body>
|
</body>
|
||||||
</head>
|
</html>
|
||||||
|
|||||||
BIN
src/res/h_dedicated.png
Normal file
BIN
src/res/h_dedicated.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 18 KiB |
BIN
src/res/h_domain.png
Normal file
BIN
src/res/h_domain.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 22 KiB |
BIN
src/res/h_k8.png
Normal file
BIN
src/res/h_k8.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 21 KiB |
BIN
src/res/h_saas.png
Normal file
BIN
src/res/h_saas.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 20 KiB |
BIN
src/res/h_vps.png
Normal file
BIN
src/res/h_vps.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 38 KiB |
BIN
src/res/menu_dedicated.png
Normal file
BIN
src/res/menu_dedicated.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 18 KiB |
BIN
src/res/menu_domain.png
Normal file
BIN
src/res/menu_domain.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 30 KiB |
BIN
src/res/menu_k8.png
Normal file
BIN
src/res/menu_k8.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 21 KiB |
BIN
src/res/menu_saas.png
Normal file
BIN
src/res/menu_saas.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 23 KiB |
BIN
src/res/menu_vps.png
Normal file
BIN
src/res/menu_vps.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 48 KiB |
BIN
src/res/services/dedicated1.jpg
Normal file
BIN
src/res/services/dedicated1.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 241 KiB |
BIN
src/res/services/dedicated2.jpg
Normal file
BIN
src/res/services/dedicated2.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 150 KiB |
BIN
src/res/services/dedicated3.jpg
Normal file
BIN
src/res/services/dedicated3.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 182 KiB |
BIN
src/res/services/domain1.png
Normal file
BIN
src/res/services/domain1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 129 KiB |
BIN
src/res/services/domain2.png
Normal file
BIN
src/res/services/domain2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 37 KiB |
BIN
src/res/services/domain3.png
Normal file
BIN
src/res/services/domain3.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 20 KiB |
BIN
src/res/services/k81.jpg
Normal file
BIN
src/res/services/k81.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 155 KiB |
BIN
src/res/services/k82.png
Normal file
BIN
src/res/services/k82.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 74 KiB |
BIN
src/res/services/k83.png
Normal file
BIN
src/res/services/k83.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 114 KiB |
BIN
src/res/services/saas1.jpg
Normal file
BIN
src/res/services/saas1.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 90 KiB |
BIN
src/res/services/saas2.png
Normal file
BIN
src/res/services/saas2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 242 KiB |
BIN
src/res/services/saas3.jpg
Normal file
BIN
src/res/services/saas3.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 132 KiB |
BIN
src/res/services/vps1.png
Normal file
BIN
src/res/services/vps1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 33 KiB |
BIN
src/res/services/vps2.png
Normal file
BIN
src/res/services/vps2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 58 KiB |
BIN
src/res/services/vps3.jpg
Normal file
BIN
src/res/services/vps3.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 550 KiB |
BIN
src/res/services_header_bg.png
Normal file
BIN
src/res/services_header_bg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 76 KiB |
@ -1,27 +1,26 @@
|
|||||||
import styles from '!raw-loader!sass-loader!./styles/app-button.scss';
|
import styles from '!raw-loader!sass-loader!./styles/app-button.scss';
|
||||||
|
|
||||||
class AppButton extends HTMLElement {
|
class AppButton extends HTMLElement {
|
||||||
constructor () {
|
constructor() {
|
||||||
super();
|
super();
|
||||||
|
}
|
||||||
|
|
||||||
const root = this.attachShadow({mode: 'open'});
|
connectedCallback() {
|
||||||
|
const root = this.attachShadow({ mode: 'open' });
|
||||||
|
|
||||||
const style = document.createElement('style');
|
const style = document.createElement('style');
|
||||||
style.textContent = styles;
|
style.textContent = styles;
|
||||||
root.appendChild(style);
|
root.appendChild(style);
|
||||||
|
|
||||||
const button = document.createElement('div');
|
const button = document.createElement('div');
|
||||||
button.className='button';
|
button.className = 'button';
|
||||||
this.button = button
|
button.innerText = this.dataset.text;
|
||||||
|
|
||||||
root.appendChild(button);
|
root.appendChild(button);
|
||||||
}
|
}
|
||||||
|
|
||||||
connectedCallback() {
|
|
||||||
this.button.innerText = this.dataset.text;
|
|
||||||
}
|
|
||||||
|
|
||||||
static get observedAttributes() {
|
static get observedAttributes() {
|
||||||
return ['data-text', 'onclick'];
|
return ['data-text'];
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@ -1,12 +1,12 @@
|
|||||||
import styles from '!raw-loader!sass-loader!./styles/app-header.scss';
|
import styles from '!raw-loader!sass-loader!./styles/app-header.scss';
|
||||||
|
|
||||||
class AppHeader extends HTMLElement {
|
class AppHeader extends HTMLElement {
|
||||||
constructor(){
|
constructor() {
|
||||||
super();
|
super();
|
||||||
|
|
||||||
const root = this.attachShadow({mode: 'open'});
|
const root = this.attachShadow({ mode: 'open' });
|
||||||
|
|
||||||
const style =document.createElement('style');
|
const style = document.createElement('style');
|
||||||
style.textContent = styles;
|
style.textContent = styles;
|
||||||
root.appendChild(style);
|
root.appendChild(style);
|
||||||
|
|
||||||
@ -24,29 +24,29 @@ class AppHeader extends HTMLElement {
|
|||||||
|
|
||||||
this.getMenuItems().forEach(item => {
|
this.getMenuItems().forEach(item => {
|
||||||
const menuItem = document.createElement('div');
|
const menuItem = document.createElement('div');
|
||||||
menuItem.className='header_item';
|
menuItem.className = 'header_item';
|
||||||
menuItem.innerText=item.name;
|
menuItem.innerText = item.name;
|
||||||
menuItem.onclick=() => {
|
menuItem.onclick = () => {
|
||||||
window.location.href = item.to;
|
window.location.href = item.to;
|
||||||
};
|
};
|
||||||
|
|
||||||
if(window.location.pathname == item.to){
|
if (window.location.pathname.includes(item.to)) {
|
||||||
menuItem.classList.add('header_item_active');
|
menuItem.classList.add('header_item_active');
|
||||||
}
|
}
|
||||||
|
|
||||||
div.appendChild(menuItem);
|
div.appendChild(menuItem);
|
||||||
})
|
});
|
||||||
|
|
||||||
root.appendChild(div);
|
root.appendChild(div);
|
||||||
}
|
}
|
||||||
|
|
||||||
getMenuItems() {
|
getMenuItems() {
|
||||||
return [
|
return [
|
||||||
{name:'Firma', to: '/about'},
|
{ name: 'Firma', to: '/about' },
|
||||||
{name: 'Servicii', to: '/services'},
|
{ name: 'Servicii', to: '/services/' },
|
||||||
{name: 'Prețuri', to: '/prices'},
|
{ name: 'Prețuri', to: '/prices' },
|
||||||
{name: 'Contact', to: '/contact'}
|
{ name: 'Contact', to: '/contact' }
|
||||||
];
|
];
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
47
src/script/components/app-service-header.js
Normal file
47
src/script/components/app-service-header.js
Normal file
@ -0,0 +1,47 @@
|
|||||||
|
import styles from '!raw-loader!sass-loader!./styles/app-service-header.scss';
|
||||||
|
|
||||||
|
class AppServieHeader extends HTMLElement {
|
||||||
|
constructor() {
|
||||||
|
super();
|
||||||
|
}
|
||||||
|
|
||||||
|
connectedCallback() {
|
||||||
|
const root = this.attachShadow({ mode: 'open' });
|
||||||
|
|
||||||
|
const style = document.createElement('style');
|
||||||
|
style.textContent = styles;
|
||||||
|
root.appendChild(style);
|
||||||
|
|
||||||
|
const div = document.createElement('div');
|
||||||
|
div.className = 'header';
|
||||||
|
|
||||||
|
const info = document.createElement('div');
|
||||||
|
info.className = 'header_info';
|
||||||
|
|
||||||
|
const title = document.createElement('p');
|
||||||
|
title.className = 'header_info_title';
|
||||||
|
title.innerText = this.dataset.title;
|
||||||
|
info.appendChild(title);
|
||||||
|
|
||||||
|
const icon = document.createElement('img');
|
||||||
|
icon.className = 'header_info_icon';
|
||||||
|
icon.src = this.dataset.icon;
|
||||||
|
icon.alt = 'icon';
|
||||||
|
info.appendChild(icon);
|
||||||
|
|
||||||
|
const description = document.createElement('p');
|
||||||
|
description.className = 'header_description';
|
||||||
|
description.innerText = this.dataset.description;
|
||||||
|
div.appendChild(description);
|
||||||
|
|
||||||
|
div.appendChild(info);
|
||||||
|
|
||||||
|
root.appendChild(div);
|
||||||
|
}
|
||||||
|
|
||||||
|
static get observedAttributes() {
|
||||||
|
return ['data-title', 'data-icon', 'data-description'];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
customElements.define('app-service-header', AppServieHeader);
|
||||||
63
src/script/components/app-service-menu.js
Normal file
63
src/script/components/app-service-menu.js
Normal file
@ -0,0 +1,63 @@
|
|||||||
|
import styles from '!raw-loader!sass-loader!./styles/app-service-menu.scss';
|
||||||
|
|
||||||
|
class AppServiceMenu extends HTMLElement {
|
||||||
|
constructor() {
|
||||||
|
super();
|
||||||
|
|
||||||
|
const root = this.attachShadow({ mode: 'open' });
|
||||||
|
|
||||||
|
const style = document.createElement('style');
|
||||||
|
style.textContent = styles;
|
||||||
|
root.appendChild(style);
|
||||||
|
|
||||||
|
const div = document.createElement('div');
|
||||||
|
div.className = 'menu';
|
||||||
|
|
||||||
|
this.getMenuItems().forEach(item => {
|
||||||
|
const menuItem = document.createElement('div');
|
||||||
|
menuItem.className = 'menu_item';
|
||||||
|
menuItem.onclick = () => {
|
||||||
|
window.location.href = item.to;
|
||||||
|
};
|
||||||
|
|
||||||
|
const img = document.createElement('img');
|
||||||
|
img.className = 'menu_item_image';
|
||||||
|
img.src = item.img;
|
||||||
|
img.alt = item.name;
|
||||||
|
menuItem.appendChild(img);
|
||||||
|
|
||||||
|
const text = document.createElement('span');
|
||||||
|
text.className = 'menu_item_text';
|
||||||
|
text.innerText = item.name;
|
||||||
|
menuItem.appendChild(text);
|
||||||
|
|
||||||
|
div.appendChild(menuItem);
|
||||||
|
});
|
||||||
|
|
||||||
|
root.appendChild(div);
|
||||||
|
}
|
||||||
|
|
||||||
|
getMenuItems() {
|
||||||
|
return [
|
||||||
|
{
|
||||||
|
name: 'Servere virtuale',
|
||||||
|
to: '/services/vps',
|
||||||
|
img: '/res/menu_vps.png'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'Servere dedicate',
|
||||||
|
to: '/services/dedicated',
|
||||||
|
img: '/res/menu_dedicated.png'
|
||||||
|
},
|
||||||
|
{ name: 'Kubernetes', to: '/services/k8', img: '/res/menu_k8.png' },
|
||||||
|
{
|
||||||
|
name: 'Software as a Service',
|
||||||
|
to: '/services/saas',
|
||||||
|
img: '/res/menu_saas.png'
|
||||||
|
},
|
||||||
|
{ name: 'Domenii', to: '/services/domain', img: '/res/menu_domain.png' }
|
||||||
|
];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
customElements.define('app-service-menu', AppServiceMenu);
|
||||||
@ -1,5 +1,5 @@
|
|||||||
.button {
|
.button {
|
||||||
background-color: #0072BC;
|
background-color: #0072bc;
|
||||||
color: #ffffff;
|
color: #ffffff;
|
||||||
padding: 15px 45px;
|
padding: 15px 45px;
|
||||||
font-size: 24px;
|
font-size: 24px;
|
||||||
|
|||||||
@ -1,4 +1,4 @@
|
|||||||
.header{
|
.header {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
@ -26,7 +26,7 @@
|
|||||||
line-height: 35px;
|
line-height: 35px;
|
||||||
padding: 0 30px;
|
padding: 0 30px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
color: #0072BC;
|
color: #0072bc;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
display: flex;
|
display: flex;
|
||||||
@ -35,11 +35,11 @@
|
|||||||
padding-top: 5px;
|
padding-top: 5px;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
background-color: #0072BC10;
|
background-color: #0072bc10;
|
||||||
}
|
}
|
||||||
|
|
||||||
&_active {
|
&_active {
|
||||||
border-bottom: 5px solid #0072BC;
|
border-bottom: 5px solid #0072bc;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
37
src/script/components/styles/app-service-header.scss
Normal file
37
src/script/components/styles/app-service-header.scss
Normal file
@ -0,0 +1,37 @@
|
|||||||
|
.header {
|
||||||
|
background: url('../../../res/services_header_bg.png') center center;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-size: cover;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
padding: 20px 40px;
|
||||||
|
margin-bottom: 60px;
|
||||||
|
|
||||||
|
&_info {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: flex-end;
|
||||||
|
margin-left: 50px;
|
||||||
|
|
||||||
|
&_title {
|
||||||
|
font-size: 36px;
|
||||||
|
line-height: 48px;
|
||||||
|
margin-top: 0;
|
||||||
|
margin-bottom: 40px;
|
||||||
|
color: #ffffff;
|
||||||
|
width: 250px;
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
&_icon {
|
||||||
|
width: 150px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&_description {
|
||||||
|
font-size: 28px;
|
||||||
|
line-height: 37px;
|
||||||
|
color: #ffffff;
|
||||||
|
}
|
||||||
|
}
|
||||||
35
src/script/components/styles/app-service-menu.scss
Normal file
35
src/script/components/styles/app-service-menu.scss
Normal file
@ -0,0 +1,35 @@
|
|||||||
|
.menu {
|
||||||
|
position: fixed;
|
||||||
|
left: 0;
|
||||||
|
top: 60px;
|
||||||
|
bottom: 0;
|
||||||
|
width: 400px;
|
||||||
|
background-color: #ffffff;
|
||||||
|
padding: 20px 0;
|
||||||
|
box-shadow: 3px 0 3px #00000010;
|
||||||
|
z-index: 999;
|
||||||
|
|
||||||
|
&_item {
|
||||||
|
padding: 20px 10px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: flex-start;
|
||||||
|
cursor: pointer;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background-color: #0072bc10;
|
||||||
|
}
|
||||||
|
|
||||||
|
&_image {
|
||||||
|
width: 50px;
|
||||||
|
margin-right: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&_text {
|
||||||
|
font-size: 26px;
|
||||||
|
line-height: 35px;
|
||||||
|
color: #0072bc;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -1,10 +1,13 @@
|
|||||||
import "@webcomponents/webcomponentsjs";
|
import '@webcomponents/webcomponentsjs';
|
||||||
|
|
||||||
// load styles
|
// load styles
|
||||||
import '../style/main.scss';
|
import '../style/main.scss';
|
||||||
import '../style/index.scss';
|
import '../style/index.scss';
|
||||||
import '../style/about.scss';
|
import '../style/about.scss';
|
||||||
|
import '../style/services.scss';
|
||||||
|
|
||||||
// load components
|
// load components
|
||||||
import './components/app-header';
|
import './components/app-header';
|
||||||
import './components/app-button';
|
import './components/app-button';
|
||||||
|
import './components/app-service-menu';
|
||||||
|
import './components/app-service-header';
|
||||||
|
|||||||
@ -1,11 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html>
|
|
||||||
<head>
|
|
||||||
<title>Core Computing</title>
|
|
||||||
<meta charset="utf-8" />
|
|
||||||
<script src="./index.js"></script>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<app-header />
|
|
||||||
</body>
|
|
||||||
</head>
|
|
||||||
36
src/services/dedicated.html
Normal file
36
src/services/dedicated.html
Normal file
@ -0,0 +1,36 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<title>Servere dedicate - Servicii - Core Computing</title>
|
||||||
|
<meta charset="utf-8" />
|
||||||
|
<script src="../index.js"></script>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<app-header></app-header>
|
||||||
|
<app-service-menu></app-service-menu>
|
||||||
|
<div class="services_content">
|
||||||
|
<app-service-header
|
||||||
|
data-title="Servere dedicate"
|
||||||
|
data-icon="/res/h_dedicated.png"
|
||||||
|
data-description="Serverul dedicat reprezintă soluţia optimă pentru afacerile mici şi mijlocii, cum ar fi un magazin online sau un reseller cu un număr mediu sau mare de clienţi. Soluţiile noastre pentru servere dedicate cuprind atât configuraţii standard, cât şi configuraţii preferenţiale. Performanţa şi stabilitatea aplicaţiilor sunt asigurate de configuraţiile hardware premium."
|
||||||
|
></app-service-header>
|
||||||
|
<div class="services_images">
|
||||||
|
<img
|
||||||
|
class="services_images_image"
|
||||||
|
src="../res/services/dedicated1.jpg"
|
||||||
|
alt="dedicated"
|
||||||
|
/>
|
||||||
|
<img
|
||||||
|
class="services_images_image"
|
||||||
|
src="../res/services/dedicated2.jpg"
|
||||||
|
alt="dedicated"
|
||||||
|
/>
|
||||||
|
<img
|
||||||
|
class="services_images_image"
|
||||||
|
src="../res/services/dedicated3.jpg"
|
||||||
|
alt="dedicated"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
36
src/services/domain.html
Normal file
36
src/services/domain.html
Normal file
@ -0,0 +1,36 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<title>Domenii - Servicii - Core Computing</title>
|
||||||
|
<meta charset="utf-8" />
|
||||||
|
<script src="../index.js"></script>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<app-header></app-header>
|
||||||
|
<app-service-menu></app-service-menu>
|
||||||
|
<div class="services_content">
|
||||||
|
<app-service-header
|
||||||
|
data-title="Domenii"
|
||||||
|
data-icon="/res/h_domain.png"
|
||||||
|
data-description=".ro, .eu sau .com? .tech, .to, .fit sau .guide? La noi ai toate șansele să găsești un nume de domeniu internet disponibil și potrivit pentru proiectul tău."
|
||||||
|
></app-service-header>
|
||||||
|
<div class="services_images">
|
||||||
|
<img
|
||||||
|
class="services_images_image"
|
||||||
|
src="../res/services/domain1.png"
|
||||||
|
alt="domain"
|
||||||
|
/>
|
||||||
|
<img
|
||||||
|
class="services_images_image"
|
||||||
|
src="../res/services/domain2.png"
|
||||||
|
alt="domain"
|
||||||
|
/>
|
||||||
|
<img
|
||||||
|
class="services_images_image"
|
||||||
|
src="../res/services/domain3.png"
|
||||||
|
alt="domain"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
11
src/services/index.html
Normal file
11
src/services/index.html
Normal file
@ -0,0 +1,11 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<title>Services - redirect</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<script>
|
||||||
|
window.location.href = '/services/vps';
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
36
src/services/k8.html
Normal file
36
src/services/k8.html
Normal file
@ -0,0 +1,36 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<title>Kubernetes - Servicii - Core Computing</title>
|
||||||
|
<meta charset="utf-8" />
|
||||||
|
<script src="../index.js"></script>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<app-header></app-header>
|
||||||
|
<app-service-menu></app-service-menu>
|
||||||
|
<div class="services_content">
|
||||||
|
<app-service-header
|
||||||
|
data-title="Kubernetes"
|
||||||
|
data-icon="/res/h_k8.png"
|
||||||
|
data-description="Kubernetes este o tehnologie de ultimă generație, recent lansată de Google și adoptată cu entuziasm de majoritatea platformelor mari de hosting (Amazon Web Services, Microsoft Azure și Google Computer Cloud). Fiind scalabil, în perioadele de trafic redus (cum ar fi noaptea), costurile sunt și ele optimizate, fără a compromite însă target-ul de 100% redundanță."
|
||||||
|
></app-service-header>
|
||||||
|
<div class="services_images">
|
||||||
|
<img
|
||||||
|
class="services_images_image"
|
||||||
|
src="../res/services/k81.jpg"
|
||||||
|
alt="kubernetes"
|
||||||
|
/>
|
||||||
|
<img
|
||||||
|
class="services_images_image"
|
||||||
|
src="../res/services/k82.png"
|
||||||
|
alt="kubernetes"
|
||||||
|
/>
|
||||||
|
<img
|
||||||
|
class="services_images_image"
|
||||||
|
src="../res/services/k83.png"
|
||||||
|
alt="kubernetes"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
36
src/services/saas.html
Normal file
36
src/services/saas.html
Normal file
@ -0,0 +1,36 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<title>SaaS - Servicii - Core Computing</title>
|
||||||
|
<meta charset="utf-8" />
|
||||||
|
<script src="../index.js"></script>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<app-header></app-header>
|
||||||
|
<app-service-menu></app-service-menu>
|
||||||
|
<div class="services_content">
|
||||||
|
<app-service-header
|
||||||
|
data-title="SaaS"
|
||||||
|
data-icon="/res/h_saas.png"
|
||||||
|
data-description="Software-ul ca serviciu este un model de furnizare a software-ului bazat pe cloud, în care noi dezvoltăm și întreținem software-ul pentru aplicații cloud, oferăm actualizări de software automate și punem software-ul la dispoziția clienților cu plata în funcție de utilizare. Noi gestionăm toate componentele hardware, middleware, software-ul pentru aplicațiile și securitatea. Astfel, clienții SaaS pot reduce dramatic costurile; pot implementa, scala și moderniza soluțiile de afaceri mai repede decât dacă ar întreține sisteme și software local; și pot prezice costul total al proprietății cu o precizie mai mare."
|
||||||
|
></app-service-header>
|
||||||
|
<div class="services_images">
|
||||||
|
<img
|
||||||
|
class="services_images_image"
|
||||||
|
src="../res/services/saas1.jpg"
|
||||||
|
alt="saas"
|
||||||
|
/>
|
||||||
|
<img
|
||||||
|
class="services_images_image"
|
||||||
|
src="../res/services/saas2.png"
|
||||||
|
alt="saas"
|
||||||
|
/>
|
||||||
|
<img
|
||||||
|
class="services_images_image"
|
||||||
|
src="../res/services/saas3.jpg"
|
||||||
|
alt="saas"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
36
src/services/vps.html
Normal file
36
src/services/vps.html
Normal file
@ -0,0 +1,36 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<title>VPS - Servicii - Core Computing</title>
|
||||||
|
<meta charset="utf-8" />
|
||||||
|
<script src="../index.js"></script>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<app-header></app-header>
|
||||||
|
<app-service-menu></app-service-menu>
|
||||||
|
<div class="services_content">
|
||||||
|
<app-service-header
|
||||||
|
data-title="Servere virtuale"
|
||||||
|
data-icon="/res/h_vps.png"
|
||||||
|
data-description="VMware este cel mai raspandit mediu de virtualizare. Fiind sustinut de marii integratori de tehnologie, ca IBM si HP, VMware s-a lansat ca cea mai stabila solutie pentru sistemele Linux. Serverele virtuale sunt instalate pe o infrastructura de tip SAN (storage area network) si sunt echipate cu discuri SSD Enterprise. Astfel, la acest tip de serviciu garantam un SLA de 99,985%."
|
||||||
|
></app-service-header>
|
||||||
|
<div class="services_images">
|
||||||
|
<img
|
||||||
|
class="services_images_image"
|
||||||
|
src="../res/services/vps1.png"
|
||||||
|
alt="vps"
|
||||||
|
/>
|
||||||
|
<img
|
||||||
|
class="services_images_image"
|
||||||
|
src="../res/services/vps2.png"
|
||||||
|
alt="vps"
|
||||||
|
/>
|
||||||
|
<img
|
||||||
|
class="services_images_image"
|
||||||
|
src="../res/services/vps3.jpg"
|
||||||
|
alt="vps"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@ -38,7 +38,7 @@
|
|||||||
&__imgtext {
|
&__imgtext {
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
|
||||||
&:nth-child(2n){
|
&:nth-child(2n) {
|
||||||
justify-content: flex-end;
|
justify-content: flex-end;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -39,7 +39,7 @@
|
|||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
line-height: 48px;
|
line-height: 48px;
|
||||||
color: #ffffff;
|
color: #ffffff;
|
||||||
text-shadow: 0 0 10px #000000b2
|
text-shadow: 0 0 10px #000000b2;
|
||||||
}
|
}
|
||||||
|
|
||||||
&_signupForm {
|
&_signupForm {
|
||||||
@ -54,7 +54,7 @@
|
|||||||
line-height: 48px;
|
line-height: 48px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
margin-bottom: 40px;
|
margin-bottom: 40px;
|
||||||
color: #0072BC;
|
color: #0072bc;
|
||||||
}
|
}
|
||||||
|
|
||||||
&_field {
|
&_field {
|
||||||
|
|||||||
20
src/style/services.scss
Normal file
20
src/style/services.scss
Normal file
@ -0,0 +1,20 @@
|
|||||||
|
.services {
|
||||||
|
&_content {
|
||||||
|
margin-top: 60px;
|
||||||
|
margin-left: 400px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&_images {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: space-between;
|
||||||
|
padding: 0 30px;
|
||||||
|
|
||||||
|
&_image {
|
||||||
|
width: 30%;
|
||||||
|
height: 400px;
|
||||||
|
object-fit: contain;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue
Block a user