feat: Prices page
This commit is contained in:
parent
d0fcc4392f
commit
cf75e7da68
@ -1,11 +1,23 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html>
|
<html>
|
||||||
<head>
|
<head>
|
||||||
<title>Core Computing</title>
|
<title>Prețuri - 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>
|
||||||
|
<div class="prices_content">
|
||||||
|
<p class="prices_header">Servere virtuale</p>
|
||||||
|
<app-price-table data-content="/prices/vps.json"></app-price-table>
|
||||||
|
<p class="prices_header">Servere dedicate</p>
|
||||||
|
<app-price-table data-content="/prices/vps.json"></app-price-table>
|
||||||
|
<p class="prices_header">Kubernetes</p>
|
||||||
|
<app-price-table data-content="/prices/vps.json"></app-price-table>
|
||||||
|
<p class="prices_header">Software as a Service</p>
|
||||||
|
<app-price-table data-content="/prices/vps.json"></app-price-table>
|
||||||
|
<p class="prices_header">Domenii</p>
|
||||||
|
<app-price-table data-content="/prices/vps.json"></app-price-table>
|
||||||
|
</div>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
11
src/prices/vps.json
Normal file
11
src/prices/vps.json
Normal file
@ -0,0 +1,11 @@
|
|||||||
|
{
|
||||||
|
"columns": ["vCPU", "Memorie", "Transfer de date", "SSD", "preț/oră"],
|
||||||
|
"units": ["", "MB", "GB", "GB", "ron"],
|
||||||
|
"data": [
|
||||||
|
[1, 512, 512, 20, 0.03],
|
||||||
|
[1, 1024, 512, 20, 0.04],
|
||||||
|
[2, 1024, 1024, 40, 0.08],
|
||||||
|
[4, 4096, 4096, 100, 1.5],
|
||||||
|
[8, 8192, 8192, 512, 6]
|
||||||
|
]
|
||||||
|
}
|
60
src/script/components/app-price-table.js
Normal file
60
src/script/components/app-price-table.js
Normal file
@ -0,0 +1,60 @@
|
|||||||
|
import styles from '!raw-loader!sass-loader!./styles/app-price-table.scss';
|
||||||
|
|
||||||
|
class AppPriceTable extends HTMLElement {
|
||||||
|
constructor() {
|
||||||
|
super();
|
||||||
|
}
|
||||||
|
|
||||||
|
connectedCallback() {
|
||||||
|
fetch(this.dataset.content)
|
||||||
|
.then(response => response.json())
|
||||||
|
.then(data => {
|
||||||
|
const root = this.attachShadow({ mode: 'open' });
|
||||||
|
|
||||||
|
const style = document.createElement('style');
|
||||||
|
style.textContent = styles;
|
||||||
|
root.appendChild(style);
|
||||||
|
|
||||||
|
const table = document.createElement('table');
|
||||||
|
table.className = 'table';
|
||||||
|
table.cellSpacing = 0;
|
||||||
|
|
||||||
|
const thead = document.createElement('thead');
|
||||||
|
|
||||||
|
const theadRow = document.createElement('tr');
|
||||||
|
|
||||||
|
data.columns.forEach(column => {
|
||||||
|
const col = document.createElement('th');
|
||||||
|
col.innerText = column;
|
||||||
|
theadRow.appendChild(col);
|
||||||
|
});
|
||||||
|
|
||||||
|
thead.appendChild(theadRow);
|
||||||
|
table.appendChild(thead);
|
||||||
|
|
||||||
|
const tbody = document.createElement('tbody');
|
||||||
|
|
||||||
|
data.data.forEach(item => {
|
||||||
|
const row = document.createElement('tr');
|
||||||
|
|
||||||
|
item.forEach((field, i) => {
|
||||||
|
const cell = document.createElement('td');
|
||||||
|
cell.innerText = field + ' ' + data.units[i];
|
||||||
|
row.appendChild(cell);
|
||||||
|
});
|
||||||
|
|
||||||
|
tbody.appendChild(row);
|
||||||
|
});
|
||||||
|
|
||||||
|
table.appendChild(tbody);
|
||||||
|
|
||||||
|
root.appendChild(table);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
static get observedAttributes() {
|
||||||
|
return ['data-content'];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
customElements.define('app-price-table', AppPriceTable);
|
28
src/script/components/styles/app-price-table.scss
Normal file
28
src/script/components/styles/app-price-table.scss
Normal file
@ -0,0 +1,28 @@
|
|||||||
|
.table {
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
& > thead {
|
||||||
|
& > tr {
|
||||||
|
& > th {
|
||||||
|
padding: 15px 0;
|
||||||
|
border-bottom: 2px solid #015082;
|
||||||
|
font-size: 20px;
|
||||||
|
line-height: 27px;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #0072bc;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
& > tbody {
|
||||||
|
& > tr {
|
||||||
|
& > td {
|
||||||
|
padding: 15px 0;
|
||||||
|
border-bottom: 1px solid #0072bc;
|
||||||
|
font-size: 20px;
|
||||||
|
line-height: 27px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
@ -5,9 +5,11 @@ import '../style/main.scss';
|
|||||||
import '../style/index.scss';
|
import '../style/index.scss';
|
||||||
import '../style/about.scss';
|
import '../style/about.scss';
|
||||||
import '../style/services.scss';
|
import '../style/services.scss';
|
||||||
|
import '../style/prices.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-menu';
|
||||||
import './components/app-service-header';
|
import './components/app-service-header';
|
||||||
|
import './components/app-price-table';
|
||||||
|
15
src/style/prices.scss
Normal file
15
src/style/prices.scss
Normal file
@ -0,0 +1,15 @@
|
|||||||
|
.prices {
|
||||||
|
&_content {
|
||||||
|
margin-top: 70px;
|
||||||
|
padding: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&_header {
|
||||||
|
font-size: 36px;
|
||||||
|
line-height: 48px;
|
||||||
|
font-weight: bold;
|
||||||
|
margin-left: 30px;
|
||||||
|
margin-top: 60px;
|
||||||
|
margin-bottom: 15px;
|
||||||
|
}
|
||||||
|
}
|
Loading…
Reference in New Issue
Block a user