gergof/PIU_proiect
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

feat: Index and About pages

Browse Source
This commit is contained in:
Fándly Gergő
2021-01-05 19:25:31 +02:00
parent 6362a7fde9
commit 4f62f859f7
23 changed files with 1028 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
src/about.html Normal file
View File

@ -0,0 +1,43 @@
<!DOCTYPE html>
<html>
<head>
<title>Core Computing</title>
<meta charset="utf-8" />
<script src="./index.js"></script>
</head>
<body>
<app-header></app-header>
<div class="about_bg"></div>
<div class="about_content">
<p class="about_header">Ce facem</p>
<div class="about_col2 about_col2__center">
<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>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>
<p class="about_header">Centrul de date</p>
<div>
<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>

11
src/contact.html Normal file
View File

@ -0,0 +1,11 @@
<!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/index.html
View File

@ -1,15 +1,25 @@
<!DOCTYPE html>
<html>
<head>
<title>Index</title>
<meta charset="utf-8" />
<script src="./index.js"></script>
</head>
<body>
<p>Test</p>
<p id="test"></p>
<script>
ui.doTest();
</script>
</body>
</html>
<head>
<title>Core Computing</title>
<meta charset="utf-8" />
<script src="./index.js"></script>
</head>
<body>
<app-header></app-header>
<div class="index_bg"></div>
<div class="index_content">
<div class="index_content_box">
<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>
</div>
<div class="index_content_box">
<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>
</body>
</head>

11
src/prices.html Normal file
View File

@ -0,0 +1,11 @@
<!DOCTYPE html>
<html>
<head>
<title>Core Computing</title>
<meta charset="utf-8" />
<script src="./index.js"></script>
</head>
<body>
<app-header />
</body>
</head>

BIN
src/res/about_bg.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 95 KiB

BIN
src/res/cover.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 466 KiB

BIN
src/res/dc1.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 567 KiB

BIN
src/res/dc2.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 7.4 KiB

BIN
src/res/dc3.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 146 KiB

BIN
src/res/dc4.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 26 KiB

BIN
src/res/logo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 848 KiB

28
src/script/components/app-button.js Normal file
View File

@ -0,0 +1,28 @@
import styles from '!raw-loader!sass-loader!./styles/app-button.scss';
class AppButton extends HTMLElement {
constructor () {
super();
const root = this.attachShadow({mode: 'open'});
const style = document.createElement('style');
style.textContent = styles;
root.appendChild(style);
const button = document.createElement('div');
button.className='button';
this.button = button
root.appendChild(button);
}
connectedCallback() {
this.button.innerText = this.dataset.text;
}
static get observedAttributes() {
return ['data-text', 'onclick'];
}
}
customElements.define('app-button', AppButton);

53
src/script/components/app-header.js Normal file
View File

@ -0,0 +1,53 @@
import styles from '!raw-loader!sass-loader!./styles/app-header.scss';
class AppHeader 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 = 'header';
const logo = document.createElement('img');
logo.src = '/res/logo.png';
logo.alt = 'logo';
logo.className = 'header_icon';
logo.onclick = () => {
window.location = '/';
};
div.appendChild(logo);
this.getMenuItems().forEach(item => {
const menuItem = document.createElement('div');
menuItem.className='header_item';
menuItem.innerText=item.name;
menuItem.onclick=() => {
window.location.href = item.to;
};
if(window.location.pathname == item.to){
menuItem.classList.add('header_item_active');
}
div.appendChild(menuItem);
})
root.appendChild(div);
}
getMenuItems() {
return [
{name:'Firma', to: '/about'},
{name: 'Servicii', to: '/services'},
{name: 'Prețuri', to: '/prices'},
{name: 'Contact', to: '/contact'}
];
}
}
customElements.define('app-header', AppHeader);

16
src/script/components/styles/app-button.scss Normal file
View File

@ -0,0 +1,16 @@
.button {
background-color: #0072BC;
color: #ffffff;
padding: 15px 45px;
font-size: 24px;
line-height: 32px;
text-align: center;
cursor: pointer;
border-radius: 8px;
margin: auto;
width: fit-content;
&:hover {
opacity: 0.7;
}
}

45
src/script/components/styles/app-header.scss Normal file
View File

@ -0,0 +1,45 @@
.header{
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-start;
padding: 0 20px;
height: 60px;
background-color: #ffffff;
box-shadow: 0 5px 5px #00000010;
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 1000;
&_icon {
height: 80%;
margin-right: 30px;
cursor: pointer;
}
&_item {
box-sizing: border-box;
font-size: 26px;
font-weight: bold;
line-height: 35px;
padding: 0 30px;
text-align: center;
color: #0072BC;
cursor: pointer;
height: 100%;
display: flex;
align-items: center;
border-bottom: 5px solid transparent;
padding-top: 5px;
&:hover {
background-color: #0072BC10;
}
&_active {
border-bottom: 5px solid #0072BC;
}
}
}

13
src/script/index.js
View File

@ -1,3 +1,10 @@
export const doTest = () => {
document.getElementById('test').innerHTML = 'test';
};
import "@webcomponents/webcomponentsjs";
// load styles
import '../style/main.scss';
import '../style/index.scss';
import '../style/about.scss';
// load components
import './components/app-header';
import './components/app-button';

11
src/services.html Normal file
View File

@ -0,0 +1,11 @@
<!DOCTYPE html>
<html>
<head>
<title>Core Computing</title>
<meta charset="utf-8" />
<script src="./index.js"></script>
</head>
<body>
<app-header />
</body>
</head>

63
src/style/about.scss Normal file
View File

@ -0,0 +1,63 @@
.about {
&_bg {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('../res/about_bg.jpg') center center;
background-repeat: no-repeat;
background-size: cover;
}
&_content {
position: relative;
margin-top: 60px;
padding-top: 40px;
width: 60%;
margin: auto;
}
&_header {
font-size: 48px;
font-weight: bold;
line-height: 64px;
margin-top: 60px;
margin-bottom: 30px;
color: #015082;
}
&_col2 {
display: flex;
justify-content: flex-start;
&__center {
justify-content: space-between;
}
&__imgtext {
align-items: center;
&:nth-child(2n){
justify-content: flex-end;
}
}
&_col {
width: 40%;
font-size: 24px;
line-height: 36px;
}
&_text {
width: 60%;
font-size: 24px;
line-height: 36px;
}
&_img {
width: 300px;
margin: 0 10px;
}
}
}

72
src/style/index.scss Normal file
View File

@ -0,0 +1,72 @@
.index {
&_bg {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('../res/cover.jpg') center center;
background-repeat: no-repeat;
background-size: cover;
}
&_content {
position: relative;
display: flex;
flex-direction: row;
justify-content: space-between;
width: 100%;
padding: 0 70px;
margin-top: 60px;
&_box {
max-width: 35%;
}
&_slogan {
font-size: 100px;
font-weight: bold;
line-height: 133px;
color: #ffffff;
text-shadow: 5px 5px 16px #ffffff7f;
margin-top: 60px;
margin-bottom: 80px;
}
&_description {
font-size: 36px;
font-weight: bold;
line-height: 48px;
color: #ffffff;
text-shadow: 0 0 10px #000000b2
}
&_signupForm {
background: #ffffffd0;
padding: 20px;
border-radius: 16px;
margin-top: 200px;
width: 450px;
&_title {
font-size: 32px;
line-height: 48px;
text-align: center;
margin-bottom: 40px;
color: #0072BC;
}
&_field {
width: 100%;
border-radius: 8px;
border: 1px solid #707070;
padding: 10px 15px;
font-size: 24px;
line-height: 32px;
color: #707070;
margin-bottom: 20px;
}
}
}
}

8
src/style/main.scss Normal file
View File

@ -0,0 +1,8 @@
* {
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
}