1219 lines
66 KiB
HTML
1219 lines
66 KiB
HTML
|
|
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Compute Resources Table Preview</title>
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css" rel="stylesheet">
|
|
<style>
|
|
.compute-table {
|
|
background: white;
|
|
border-radius: 8px;
|
|
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
|
overflow: hidden;
|
|
}
|
|
|
|
.compute-table th {
|
|
background-color: #f8f9fa;
|
|
border-bottom: 2px solid #dee2e6;
|
|
font-weight: 600;
|
|
color: #495057;
|
|
padding: 12px 8px;
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
.compute-table td {
|
|
padding: 12px 8px;
|
|
vertical-align: middle;
|
|
border-bottom: 1px solid #f1f3f4;
|
|
}
|
|
|
|
.compute-table tbody tr:hover {
|
|
background-color: #f8f9fa;
|
|
}
|
|
|
|
.provider-name {
|
|
font-weight: 600;
|
|
color: #0d6efd;
|
|
font-size: 0.95rem;
|
|
}
|
|
|
|
.slice-info {
|
|
margin-top: 2px;
|
|
}
|
|
|
|
.slice-name {
|
|
font-weight: 500;
|
|
color: #212529;
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
.spec-value {
|
|
font-weight: 500;
|
|
color: #212529;
|
|
}
|
|
|
|
.spec-unit {
|
|
color: #6c757d;
|
|
font-size: 0.85rem;
|
|
}
|
|
|
|
.location-badge {
|
|
background-color: #e3f2fd;
|
|
color: #1976d2;
|
|
padding: 4px 8px;
|
|
border-radius: 12px;
|
|
font-size: 0.8rem;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.sla-indicator {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
}
|
|
|
|
.sla-good { color: #28a745; }
|
|
.sla-medium { color: #ffc107; }
|
|
.sla-low { color: #dc3545; }
|
|
|
|
.price-display {
|
|
font-weight: 600;
|
|
color: #0d6efd;
|
|
font-size: 1.1rem;
|
|
}
|
|
|
|
.action-buttons {
|
|
display: flex;
|
|
gap: 4px;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.btn-sm-custom {
|
|
padding: 4px 8px;
|
|
font-size: 0.8rem;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.compute-table {
|
|
font-size: 0.85rem;
|
|
}
|
|
|
|
.compute-table th,
|
|
.compute-table td {
|
|
padding: 8px 4px;
|
|
}
|
|
|
|
.action-buttons {
|
|
flex-direction: column;
|
|
}
|
|
}
|
|
|
|
.filter-section {
|
|
background: white;
|
|
border-radius: 8px;
|
|
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.enhanced-filters {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
|
gap: 15px;
|
|
align-items: end;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="bg-light">
|
|
<div class="container-fluid py-4">
|
|
<h1 class="mb-4">Compute Resources (Slices) - Table Preview</h1>
|
|
|
|
<!-- Enhanced Filter Section -->
|
|
<div class="filter-section p-4 mb-4">
|
|
<h5 class="mb-3">Filter Resources</h5>
|
|
<div class="enhanced-filters">
|
|
<div>
|
|
<label class="form-label">Location</label>
|
|
<select class="form-select">
|
|
<option value="">All Locations</option>
|
|
<option value="Belgium">Belgium</option>
|
|
<option value="Austria">Austria</option>
|
|
<option value="Switzerland">Switzerland</option>
|
|
<option value="Netherlands">Netherlands</option>
|
|
</select>
|
|
</div>
|
|
<div>
|
|
<label class="form-label">Min vCores</label>
|
|
<select class="form-select">
|
|
<option value="">Any</option>
|
|
<option value="1">1 Core+</option>
|
|
<option value="2">2 Cores+</option>
|
|
<option value="4">4 Cores+</option>
|
|
<option value="8">8 Cores+</option>
|
|
<option value="16">16 Cores+</option>
|
|
</select>
|
|
</div>
|
|
<div>
|
|
<label class="form-label">Min RAM (GB)</label>
|
|
<select class="form-select">
|
|
<option value="">Any</option>
|
|
<option value="4">4 GB+</option>
|
|
<option value="8">8 GB+</option>
|
|
<option value="16">16 GB+</option>
|
|
<option value="32">32 GB+</option>
|
|
</select>
|
|
</div>
|
|
<div>
|
|
<label class="form-label">Min Storage (GB)</label>
|
|
<select class="form-select">
|
|
<option value="">Any</option>
|
|
<option value="200">200 GB+</option>
|
|
<option value="500">500 GB+</option>
|
|
<option value="1000">1 TB+</option>
|
|
<option value="2000">2 TB+</option>
|
|
</select>
|
|
</div>
|
|
<div>
|
|
<label class="form-label">Min Uptime (%)</label>
|
|
<select class="form-select">
|
|
<option value="">Any</option>
|
|
<option value="95">95%+</option>
|
|
<option value="98">98%+</option>
|
|
<option value="99">99%+</option>
|
|
<option value="99.9">99.9%+</option>
|
|
</select>
|
|
</div>
|
|
<div>
|
|
<label class="form-label">Min Bandwidth (Mbps)</label>
|
|
<select class="form-select">
|
|
<option value="">Any</option>
|
|
<option value="100">100 Mbps+</option>
|
|
<option value="500">500 Mbps+</option>
|
|
<option value="1000">1 Gbps+</option>
|
|
</select>
|
|
</div>
|
|
<div>
|
|
<label class="form-label">Price Range (TFP)</label>
|
|
<div class="d-flex gap-2">
|
|
<input type="number" class="form-control" placeholder="Min" style="width: 80px;">
|
|
<input type="number" class="form-control" placeholder="Max" style="width: 80px;">
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<button class="btn btn-primary">Apply Filters</button>
|
|
<button class="btn btn-outline-secondary ms-2">Clear</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Table Section -->
|
|
<div class="compute-table">
|
|
<div class="table-responsive">
|
|
<table class="table table-hover mb-0">
|
|
<thead>
|
|
<tr>
|
|
<th style="width: 15%;">Type</th>
|
|
<th style="width: 12%;">Provider</th>
|
|
<th style="width: 10%;">Location</th>
|
|
<th style="width: 8%;">vCores</th>
|
|
<th style="width: 8%;">RAM</th>
|
|
<th style="width: 10%;">Storage (SSD)</th>
|
|
<th style="width: 10%;">Uptime SLA</th>
|
|
<th style="width: 10%;">Bandwidth SLA</th>
|
|
<th style="width: 8%;">Price/Hour</th>
|
|
<th style="width: 9%;">Actions</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<!-- Sample Row 1 -->
|
|
<tr>
|
|
<td>
|
|
<div class="slice-name">Compute slice</div>
|
|
<div class="slice-info">
|
|
<small class="text-muted d-block">4x Base Unit</small>
|
|
</div>
|
|
</td>
|
|
<td>
|
|
<div class="provider-name">user1</div>
|
|
</td>
|
|
<td>
|
|
<span class="location-badge">Belgium</span>
|
|
</td>
|
|
<td>
|
|
<span class="spec-value">4</span>
|
|
<span class="spec-unit">cores</span>
|
|
</td>
|
|
<td>
|
|
<span class="spec-value">16</span>
|
|
<span class="spec-unit">GB</span>
|
|
</td>
|
|
<td>
|
|
<span class="spec-value">800</span>
|
|
<span class="spec-unit">GB</span>
|
|
</td>
|
|
<td>
|
|
<div class="sla-indicator sla-good">
|
|
<i class="bi bi-check-circle-fill"></i>
|
|
<span>99.2%</span>
|
|
</div>
|
|
</td>
|
|
<td>
|
|
<div class="sla-indicator sla-good">
|
|
<i class="bi bi-speedometer2"></i>
|
|
<span>1000 Mbps</span>
|
|
</div>
|
|
</td>
|
|
<td>
|
|
<div class="price-display">4.00 TFP</div>
|
|
</td>
|
|
<td>
|
|
<div class="action-buttons">
|
|
<button class="btn btn-primary btn-sm-custom">
|
|
<i class="bi bi-cart-plus"></i> Add to Cart
|
|
</button>
|
|
<button class="btn btn-outline-secondary btn-sm-custom">
|
|
<i class="bi bi-eye"></i> View
|
|
</button>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
<!-- Sample Row 2 -->
|
|
<tr>
|
|
<td>
|
|
<div class="slice-name">Compute slice</div>
|
|
<div class="slice-info">
|
|
<small class="text-muted d-block">8x Base Unit</small>
|
|
</div>
|
|
</td>
|
|
<td>
|
|
<div class="provider-name">user1</div>
|
|
</td>
|
|
<td>
|
|
<span class="location-badge">Belgium</span>
|
|
</td>
|
|
<td>
|
|
<span class="spec-value">8</span>
|
|
<span class="spec-unit">cores</span>
|
|
</td>
|
|
<td>
|
|
<span class="spec-value">32</span>
|
|
<span class="spec-unit">GB</span>
|
|
</td>
|
|
<td>
|
|
<span class="spec-value">1600</span>
|
|
<span class="spec-unit">GB</span>
|
|
</td>
|
|
<td>
|
|
<div class="sla-indicator sla-good">
|
|
<i class="bi bi-check-circle-fill"></i>
|
|
<span>99.2%</span>
|
|
</div>
|
|
</td>
|
|
<td>
|
|
<div class="sla-indicator sla-good">
|
|
<i class="bi bi-speedometer2"></i>
|
|
<span>1000 Mbps</span>
|
|
</div>
|
|
</td>
|
|
<td>
|
|
<div class="price-display">8.00 TFP</div>
|
|
</td>
|
|
<td>
|
|
<div class="action-buttons">
|
|
<button class="btn btn-primary btn-sm-custom">
|
|
<i class="bi bi-cart-plus"></i> Add to Cart
|
|
</button>
|
|
<button class="btn btn-outline-secondary btn-sm-custom">
|
|
<i class="bi bi-eye"></i> View
|
|
</button>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
<!-- Sample Row 3 -->
|
|
<tr>
|
|
<td>
|
|
<div class="slice-name">Compute slice</div>
|
|
<div class="slice-info">
|
|
<small class="text-muted d-block">2x Base Unit</small>
|
|
</div>
|
|
</td>
|
|
<td>
|
|
<div class="provider-name">farmer2</div>
|
|
</td>
|
|
<td>
|
|
<span class="location-badge">Netherlands</span>
|
|
</td>
|
|
<td>
|
|
<span class="spec-value">2</span>
|
|
<span class="spec-unit">cores</span>
|
|
</td>
|
|
<td>
|
|
<span class="spec-value">8</span>
|
|
<span class="spec-unit">GB</span>
|
|
</td>
|
|
<td>
|
|
<span class="spec-value">400</span>
|
|
<span class="spec-unit">GB</span>
|
|
</td>
|
|
<td>
|
|
<div class="sla-indicator sla-medium">
|
|
<i class="bi bi-exclamation-triangle-fill"></i>
|
|
<span>97.8%</span>
|
|
</div>
|
|
</td>
|
|
<td>
|
|
<div class="sla-indicator sla-medium">
|
|
<i class="bi bi-speedometer2"></i>
|
|
<span>500 Mbps</span>
|
|
</div>
|
|
</td>
|
|
<td>
|
|
<div class="price-display">1.80 TFP</div>
|
|
</td>
|
|
<td>
|
|
<div class="action-buttons">
|
|
<button class="btn btn-primary btn-sm-custom">
|
|
<i class="bi bi-cart-plus"></i> Add to Cart
|
|
</button>
|
|
<button class="btn btn-outline-secondary btn-sm-custom">
|
|
<i class="bi bi-eye"></i> View
|
|
</button>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
<!-- Sample Row 4 -->
|
|
<tr>
|
|
<td>
|
|
<div class="slice-name">Compute slice</div>
|
|
<div class="slice-info">
|
|
<small class="text-muted d-block">16x Base Unit</small>
|
|
</div>
|
|
</td>
|
|
<td>
|
|
<div class="provider-name">datacenter3</div>
|
|
</td>
|
|
<td>
|
|
<span class="location-badge">Germany</span>
|
|
</td>
|
|
<td>
|
|
<span class="spec-value">16</span>
|
|
<span class="spec-unit">cores</span>
|
|
</td>
|
|
<td>
|
|
<span class="spec-value">64</span>
|
|
<span class="spec-unit">GB</span>
|
|
</td>
|
|
<td>
|
|
<span class="spec-value">3200</span>
|
|
<span class="spec-unit">GB</span>
|
|
</td>
|
|
<td>
|
|
<div class="sla-indicator sla-good">
|
|
<i class="bi bi-check-circle-fill"></i>
|
|
<span>99.9%</span>
|
|
</div>
|
|
</td>
|
|
<td>
|
|
<div class="sla-indicator sla-good">
|
|
<i class="bi bi-speedometer2"></i>
|
|
<span>2000 Mbps</span>
|
|
</div>
|
|
</td>
|
|
<td>
|
|
<div class="price-display">15.20 TFP</div>
|
|
</td>
|
|
<td>
|
|
<div class="action-buttons">
|
|
<button class="btn btn-primary btn-sm-custom">
|
|
<i class="bi bi-cart-plus"></i> Add to Cart
|
|
</button>
|
|
<button class="btn btn-outline-secondary btn-sm-custom">
|
|
<i class="bi bi-eye"></i> View
|
|
</button>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Pagination -->
|
|
<nav class="mt-4">
|
|
<ul class="pagination justify-content-center">
|
|
<li class="page-item disabled">
|
|
<span class="page-link">Previous</span>
|
|
</li>
|
|
<li class="page-item active">
|
|
<span class="page-link">1</span>
|
|
</li>
|
|
<li class="page-item">
|
|
<a class="page-link" href="#">2</a>
|
|
</li>
|
|
<li class="page-item">
|
|
<a class="page-link" href="#">3</a>
|
|
</li>
|
|
<li class="page-item">
|
|
<a class="page-link" href="#">Next</a>
|
|
</li>
|
|
</ul>
|
|
</nav>
|
|
|
|
<div class="text-center text-muted mt-2">
|
|
Showing page 1 of 3 (24 total compute resources)
|
|
|
|
<!-- Cart-based Deployment Flow Preview -->
|
|
<div class="mt-5 p-4 bg-info bg-opacity-10 border border-info rounded">
|
|
<h5 class="text-info mb-3">
|
|
<i class="bi bi-info-circle me-2"></i>Cart-based Deployment Flow
|
|
</h5>
|
|
<p class="mb-3">
|
|
<strong>New Workflow:</strong> Users add slices to cart, then configure deployment at checkout:
|
|
</p>
|
|
<div class="row">
|
|
<div class="col-md-4">
|
|
<div class="card h-100">
|
|
<div class="card-body text-center">
|
|
<i class="bi bi-cart-plus text-primary" style="font-size: 2rem;"></i>
|
|
<h6 class="mt-2">1. Add to Cart</h6>
|
|
<small class="text-muted">Select one or many slices from one or many providers</small>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<div class="card h-100">
|
|
<div class="card-body text-center">
|
|
<i class="bi bi-gear text-warning" style="font-size: 2rem;"></i>
|
|
<h6 class="mt-2">2. Configure at Checkout</h6>
|
|
<small class="text-muted">Choose VM or Kubernetes deployment options for each slice</small>
|
|
</div>
|
|
</div>
|
|
</div>m
|
|
<div class="col-md-4">
|
|
<div class="card h-100">
|
|
<div class="card-body text-center">
|
|
<i class="bi bi-rocket text-success" style="font-size: 2rem;"></i>
|
|
<h6 class="mt-2">3. Deploy</h6>
|
|
<small class="text-muted">Automatic deployment with chosen configuration</small>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="mt-3">
|
|
<strong>Flexible Deployment Options at Checkout:</strong>
|
|
<div class="row mt-3">
|
|
<div class="col-md-6">
|
|
<div class="card">
|
|
<div class="card-header bg-light">
|
|
<h6 class="mb-0"><i class="bi bi-server me-2"></i>Individual VMs</h6>
|
|
</div>
|
|
<div class="card-body">
|
|
<ul class="mb-0">
|
|
<li>Each slice becomes a separate VM</li>
|
|
<li>Full isolation and control</li>
|
|
<li>Custom OS and configuration per VM</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="card">
|
|
<div class="card-header bg-light">
|
|
<h6 class="mb-0"><i class="bi bi-diagram-3 me-2"></i>K3s Clusters</h6>
|
|
</div>
|
|
<div class="card-body">
|
|
<ul class="mb-0">
|
|
<li>Group slices as masters/workers</li>
|
|
<li>Multiple clusters supported</li>
|
|
<li>Flexible master/worker ratios</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mt-4">
|
|
<strong>Example Deployment Scenarios:</strong>
|
|
<div class="mt-3">
|
|
<div class="alert alert-info">
|
|
<h6><i class="bi bi-lightbulb me-2"></i>Scenario 1: 8 Slices Total</h6>
|
|
<ul class="mb-0">
|
|
<li><strong>2 Individual VMs:</strong> Development and testing environments</li>
|
|
<li><strong>1 K3s Cluster:</strong> 3 masters + 3 workers for production workloads</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="alert alert-success">
|
|
<h6><i class="bi bi-lightbulb me-2"></i>Scenario 2: 13 Slices Total</h6>
|
|
<ul class="mb-0">
|
|
<li><strong>1 Individual VM:</strong> Database server</li>
|
|
<li><strong>K3s Cluster #1:</strong> 3 masters + 3 workers (web applications)</li>
|
|
<li><strong>K3s Cluster #2:</strong> 3 masters + 3 workers (microservices)</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="alert alert-warning">
|
|
<h6><i class="bi bi-lightbulb me-2"></i>Scenario 3: 20 Slices Total</h6>
|
|
<ul class="mb-0">
|
|
<li><strong>5 Individual VMs:</strong> Legacy applications, databases, monitoring</li>
|
|
<li><strong>K3s Cluster #1:</strong> 5 masters + 5 workers (production)</li>
|
|
<li><strong>K3s Cluster #2:</strong> 2 masters + 3 workers (staging)</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mt-3 p-3 bg-light rounded">
|
|
<strong><i class="bi bi-gear me-2"></i>At Checkout Configuration:</strong>
|
|
<p class="mb-2 mt-2">For each slice in your cart, you can:</p>
|
|
<ol>
|
|
<li><strong>Assign to VM:</strong> Configure OS, SSH keys, networking</li>
|
|
<li><strong>Assign to K3s Cluster:</strong> Choose cluster name, role (master/worker), K3s version</li>
|
|
<li><strong>Create new clusters:</strong> Define cluster specifications and assign slices</li>
|
|
<li><strong>Mix and match:</strong> Complete flexibility to optimize your infrastructure</li>
|
|
</ol>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
|
|
</body>
|
|
</html>
|
|
|
|
<!-- Checkout Flow UI Example -->
|
|
<div class="mt-5 p-4 bg-success bg-opacity-10 border border-success rounded">
|
|
<h5 class="text-success mb-4">
|
|
<i class="bi bi-cart-check me-2"></i>Checkout Flow UI Example
|
|
</h5>
|
|
|
|
<!-- Cart Summary -->
|
|
<div class="card mb-4">
|
|
<div class="card-header">
|
|
<h6 class="mb-0"><i class="bi bi-cart3 me-2"></i>Your Cart (16 Slices Selected)</h6>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="table-responsive">
|
|
<table class="table table-sm">
|
|
<thead>
|
|
<tr>
|
|
<th>Provider</th>
|
|
<th>Specs</th>
|
|
<th>Location</th>
|
|
<th>Price/Hour</th>
|
|
<th>Assignment</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<!-- Individual VM 1 -->
|
|
<tr>
|
|
<td><strong>user1</strong><br><small>8x Base Unit</small></td>
|
|
<td>8 cores, 32GB, 1600GB</td>
|
|
<td><span class="location-badge">Belgium</span></td>
|
|
<td>8.00 TFP</td>
|
|
<td>
|
|
<select class="form-select form-select-sm">
|
|
<option value="">Choose Assignment...</option>
|
|
<option value="vm-1" selected>Individual VM #1</option>
|
|
<option value="vm-2">Individual VM #2</option>
|
|
<option value="k3s-prod">K3s Cluster: Production (3+3)</option>
|
|
<option value="k3s-staging">K3s Cluster: Staging (3+5)</option>
|
|
</select>
|
|
</td>
|
|
</tr>
|
|
|
|
<!-- Individual VM 2 -->
|
|
<tr>
|
|
<td><strong>farmer2</strong><br><small>4x Base Unit</small></td>
|
|
<td>4 cores, 16GB, 800GB</td>
|
|
<td><span class="location-badge">Netherlands</span></td>
|
|
<td>3.60 TFP</td>
|
|
<td>
|
|
<select class="form-select form-select-sm">
|
|
<option value="">Choose Assignment...</option>
|
|
<option value="vm-1">Individual VM #1</option>
|
|
<option value="vm-2" selected>Individual VM #2</option>
|
|
<option value="k3s-prod">K3s Cluster: Production (3+3)</option>
|
|
<option value="k3s-staging">K3s Cluster: Staging (3+5)</option>
|
|
</select>
|
|
</td>
|
|
</tr>
|
|
|
|
<!-- Production Cluster (3 masters + 3 workers) -->
|
|
<tr>
|
|
<td><strong>datacenter3</strong><br><small>16x Base Unit</small></td>
|
|
<td>16 cores, 64GB, 3200GB</td>
|
|
<td><span class="location-badge">Germany</span></td>
|
|
<td>15.20 TFP</td>
|
|
<td>
|
|
<select class="form-select form-select-sm">
|
|
<option value="">Choose Assignment...</option>
|
|
<option value="vm-1">Individual VM #1</option>
|
|
<option value="vm-2">Individual VM #2</option>
|
|
<option value="k3s-prod" selected>K3s Cluster: Production (3+3)</option>
|
|
<option value="k3s-staging">K3s Cluster: Staging (3+5)</option>
|
|
</select>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td><strong>datacenter3</strong><br><small>8x Base Unit</small></td>
|
|
<td>8 cores, 32GB, 1600GB</td>
|
|
<td><span class="location-badge">Germany</span></td>
|
|
<td>7.60 TFP</td>
|
|
<td>
|
|
<select class="form-select form-select-sm">
|
|
<option value="">Choose Assignment...</option>
|
|
<option value="vm-1">Individual VM #1</option>
|
|
<option value="vm-2">Individual VM #2</option>
|
|
<option value="k3s-prod" selected>K3s Cluster: Production (3+3)</option>
|
|
<option value="k3s-staging">K3s Cluster: Staging (3+5)</option>
|
|
</select>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td><strong>datacenter3</strong><br><small>4x Base Unit</small></td>
|
|
<td>4 cores, 16GB, 800GB</td>
|
|
<td><span class="location-badge">Germany</span></td>
|
|
<td>3.80 TFP</td>
|
|
<td>
|
|
<select class="form-select form-select-sm">
|
|
<option value="">Choose Assignment...</option>
|
|
<option value="vm-1">Individual VM #1</option>
|
|
<option value="vm-2">Individual VM #2</option>
|
|
<option value="k3s-prod" selected>K3s Cluster: Production (3+3)</option>
|
|
<option value="k3s-staging">K3s Cluster: Staging (3+5)</option>
|
|
</select>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td><strong>user1</strong><br><small>4x Base Unit</small></td>
|
|
<td>4 cores, 16GB, 800GB</td>
|
|
<td><span class="location-badge">Belgium</span></td>
|
|
<td>4.00 TFP</td>
|
|
<td>
|
|
<select class="form-select form-select-sm">
|
|
<option value="">Choose Assignment...</option>
|
|
<option value="vm-1">Individual VM #1</option>
|
|
<option value="vm-2">Individual VM #2</option>
|
|
<option value="k3s-prod" selected>K3s Cluster: Production (3+3)</option>
|
|
<option value="k3s-staging">K3s Cluster: Staging (3+5)</option>
|
|
</select>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td><strong>user1</strong><br><small>2x Base Unit</small></td>
|
|
<td>2 cores, 8GB, 400GB</td>
|
|
<td><span class="location-badge">Belgium</span></td>
|
|
<td>2.00 TFP</td>
|
|
<td>
|
|
<select class="form-select form-select-sm">
|
|
<option value="">Choose Assignment...</option>
|
|
<option value="vm-1">Individual VM #1</option>
|
|
<option value="vm-2">Individual VM #2</option>
|
|
<option value="k3s-prod" selected>K3s Cluster: Production (3+3)</option>
|
|
<option value="k3s-staging">K3s Cluster: Staging (3+5)</option>
|
|
</select>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td><strong>farmer2</strong><br><small>2x Base Unit</small></td>
|
|
<td>2 cores, 8GB, 400GB</td>
|
|
<td><span class="location-badge">Netherlands</span></td>
|
|
<td>1.80 TFP</td>
|
|
<td>
|
|
<select class="form-select form-select-sm">
|
|
<option value="">Choose Assignment...</option>
|
|
<option value="vm-1">Individual VM #1</option>
|
|
<option value="vm-2">Individual VM #2</option>
|
|
<option value="k3s-prod" selected>K3s Cluster: Production (3+3)</option>
|
|
<option value="k3s-staging">K3s Cluster: Staging (3+5)</option>
|
|
</select>
|
|
</td>
|
|
</tr>
|
|
|
|
<!-- Staging Cluster (3 masters + 5 workers) -->
|
|
<tr>
|
|
<td><strong>datacenter4</strong><br><small>8x Base Unit</small></td>
|
|
<td>8 cores, 32GB, 1600GB</td>
|
|
<td><span class="location-badge">France</span></td>
|
|
<td>7.20 TFP</td>
|
|
<td>
|
|
<select class="form-select form-select-sm">
|
|
<option value="">Choose Assignment...</option>
|
|
<option value="vm-1">Individual VM #1</option>
|
|
<option value="vm-2">Individual VM #2</option>
|
|
<option value="k3s-prod">K3s Cluster: Production (3+3)</option>
|
|
<option value="k3s-staging" selected>K3s Cluster: Staging (3+5)</option>
|
|
</select>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td><strong>datacenter4</strong><br><small>4x Base Unit</small></td>
|
|
<td>4 cores, 16GB, 800GB</td>
|
|
<td><span class="location-badge">France</span></td>
|
|
<td>3.60 TFP</td>
|
|
<td>
|
|
<select class="form-select form-select-sm">
|
|
<option value="">Choose Assignment...</option>
|
|
<option value="vm-1">Individual VM #1</option>
|
|
<option value="vm-2">Individual VM #2</option>
|
|
<option value="k3s-prod">K3s Cluster: Production (3+3)</option>
|
|
<option value="k3s-staging" selected>K3s Cluster: Staging (3+5)</option>
|
|
</select>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td><strong>datacenter4</strong><br><small>2x Base Unit</small></td>
|
|
<td>2 cores, 8GB, 400GB</td>
|
|
<td><span class="location-badge">France</span></td>
|
|
<td>1.80 TFP</td>
|
|
<td>
|
|
<select class="form-select form-select-sm">
|
|
<option value="">Choose Assignment...</option>
|
|
<option value="vm-1">Individual VM #1</option>
|
|
<option value="vm-2">Individual VM #2</option>
|
|
<option value="k3s-prod">K3s Cluster: Production (3+3)</option>
|
|
<option value="k3s-staging" selected>K3s Cluster: Staging (3+5)</option>
|
|
</select>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td><strong>farmer3</strong><br><small>4x Base Unit</small></td>
|
|
<td>4 cores, 16GB, 800GB</td>
|
|
<td><span class="location-badge">Switzerland</span></td>
|
|
<td>4.20 TFP</td>
|
|
<td>
|
|
<select class="form-select form-select-sm">
|
|
<option value="">Choose Assignment...</option>
|
|
<option value="vm-1">Individual VM #1</option>
|
|
<option value="vm-2">Individual VM #2</option>
|
|
<option value="k3s-prod">K3s Cluster: Production (3+3)</option>
|
|
<option value="k3s-staging" selected>K3s Cluster: Staging (3+5)</option>
|
|
</select>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td><strong>farmer3</strong><br><small>2x Base Unit</small></td>
|
|
<td>2 cores, 8GB, 400GB</td>
|
|
<td><span class="location-badge">Switzerland</span></td>
|
|
<td>2.10 TFP</td>
|
|
<td>
|
|
<select class="form-select form-select-sm">
|
|
<option value="">Choose Assignment...</option>
|
|
<option value="vm-1">Individual VM #1</option>
|
|
<option value="vm-2">Individual VM #2</option>
|
|
<option value="k3s-prod">K3s Cluster: Production (3+3)</option>
|
|
<option value="k3s-staging" selected>K3s Cluster: Staging (3+5)</option>
|
|
</select>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td><strong>farmer3</strong><br><small>1x Base Unit</small></td>
|
|
<td>1 core, 4GB, 200GB</td>
|
|
<td><span class="location-badge">Switzerland</span></td>
|
|
<td>1.05 TFP</td>
|
|
<td>
|
|
<select class="form-select form-select-sm">
|
|
<option value="">Choose Assignment...</option>
|
|
<option value="vm-1">Individual VM #1</option>
|
|
<option value="vm-2">Individual VM #2</option>
|
|
<option value="k3s-prod">K3s Cluster: Production (3+3)</option>
|
|
<option value="k3s-staging" selected>K3s Cluster: Staging (3+5)</option>
|
|
</select>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td><strong>farmer3</strong><br><small>1x Base Unit</small></td>
|
|
<td>1 core, 4GB, 200GB</td>
|
|
<td><span class="location-badge">Switzerland</span></td>
|
|
<td>1.05 TFP</td>
|
|
<td>
|
|
<select class="form-select form-select-sm">
|
|
<option value="">Choose Assignment...</option>
|
|
<option value="vm-1">Individual VM #1</option>
|
|
<option value="vm-2">Individual VM #2</option>
|
|
<option value="k3s-prod">K3s Cluster: Production (3+3)</option>
|
|
<option value="k3s-staging" selected>K3s Cluster: Staging (3+5)</option>
|
|
</select>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
<tfoot>
|
|
<tr class="table-success">
|
|
<th colspan="3"><strong>Total (16 Slices)</strong></th>
|
|
<th><strong>75.95 TFP</strong></th>
|
|
<th></th>
|
|
</tr>
|
|
</tfoot>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Deployment Groups Configuration -->
|
|
<div class="row">
|
|
<!-- Individual VMs -->
|
|
<div class="col-md-6 mb-4">
|
|
<div class="card">
|
|
<div class="card-header bg-primary text-white">
|
|
<h6 class="mb-0"><i class="bi bi-server me-2"></i>Individual VMs (1 slice)</h6>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="mb-3">
|
|
<strong>farmer2 - 2x Base Unit</strong>
|
|
<small class="text-muted d-block">2 cores, 8GB RAM, 400GB SSD</small>
|
|
</div>
|
|
|
|
<div class="mb-3">
|
|
<label class="form-label">VM Name</label>
|
|
<input type="text" class="form-control" value="dev-server-01" placeholder="Enter VM name">
|
|
</div>
|
|
|
|
<div class="mb-3">
|
|
<label class="form-label">Operating System</label>
|
|
<select class="form-select">
|
|
<option value="ubuntu-22.04" selected>Ubuntu 22.04 LTS</option>
|
|
<option value="ubuntu-20.04">Ubuntu 20.04 LTS</option>
|
|
<option value="debian-12">Debian 12</option>
|
|
<option value="centos-9">CentOS 9</option>
|
|
<option value="alpine-3.18">Alpine 3.18</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="mb-3">
|
|
<label class="form-label">SSH Public Key</label>
|
|
<textarea class="form-control" rows="3" placeholder="ssh-rsa AAAAB3NzaC1yc2E..."></textarea>
|
|
</div>
|
|
|
|
<div class="mb-3">
|
|
<label class="form-label">Network Configuration</label>
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="checkbox" id="vm1-mycelium" checked disabled>
|
|
<label class="form-check-label" for="vm1-mycelium">
|
|
<strong>Mycelium</strong> (always enabled)
|
|
</label>
|
|
</div>
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="checkbox" id="vm1-wireguard" checked>
|
|
<label class="form-check-label" for="vm1-wireguard">
|
|
WireGuard
|
|
</label>
|
|
</div>
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="checkbox" id="vm1-public-ipv4" checked>
|
|
<label class="form-check-label" for="vm1-public-ipv4">
|
|
Public IPv4
|
|
</label>
|
|
</div>
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="checkbox" id="vm1-public-ipv6">
|
|
<label class="form-check-label" for="vm1-public-ipv6">
|
|
Public IPv6
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- K3s Cluster -->
|
|
<div class="col-md-6 mb-4">
|
|
<div class="card">
|
|
<div class="card-header bg-success text-white">
|
|
<h6 class="mb-0"><i class="bi bi-diagram-3 me-2"></i>K3s Cluster: Production (3 slices)</h6>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="mb-3">
|
|
<strong>Cluster Nodes:</strong>
|
|
<ul class="mb-2">
|
|
<li><strong>user1 - 8x Base Unit</strong> → Master Node</li>
|
|
<li><strong>datacenter3 - 16x Base Unit</strong> → Master Node</li>
|
|
<li><strong>datacenter3 - 4x Base Unit</strong> → Worker Node</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="mb-3">
|
|
<label class="form-label">Cluster Name</label>
|
|
<input type="text" class="form-control" value="production-cluster" placeholder="Enter cluster name">
|
|
</div>
|
|
|
|
<div class="mb-3">
|
|
<label class="form-label">K3s Version</label>
|
|
<select class="form-select">
|
|
<option value="v1.28.5" selected>v1.28.5 (Stable)</option>
|
|
<option value="v1.29.1">v1.29.1 (Latest)</option>
|
|
<option value="v1.27.8">v1.27.8 (LTS)</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="mb-3">
|
|
<label class="form-label">Network Plugin</label>
|
|
<select class="form-select">
|
|
<option value="flannel" selected>Flannel (Default)</option>
|
|
<option value="calico">Calico</option>
|
|
<option value="cilium">Cilium</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="mb-3">
|
|
<label class="form-label">Cluster Configuration</label>
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="checkbox" id="monitoring" checked>
|
|
<label class="form-check-label" for="monitoring">
|
|
Enable Monitoring (Prometheus + Grafana)
|
|
</label>
|
|
</div>
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="checkbox" id="ingress" checked>
|
|
<label class="form-check-label" for="ingress">
|
|
Install Ingress Controller
|
|
</label>
|
|
</div>
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="checkbox" id="storage">
|
|
<label class="form-check-label" for="storage">
|
|
Configure Persistent Storage
|
|
</label>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mb-3">
|
|
<label class="form-label">Network Configuration</label>
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="checkbox" id="k3s-prod-mycelium" checked disabled>
|
|
<label class="form-check-label" for="k3s-prod-mycelium">
|
|
<strong>Mycelium</strong> (always enabled)
|
|
</label>
|
|
</div>
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="checkbox" id="k3s-prod-wireguard" checked>
|
|
<label class="form-check-label" for="k3s-prod-wireguard">
|
|
WireGuard
|
|
</label>
|
|
</div>
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="checkbox" id="k3s-prod-public-ipv4" checked>
|
|
<label class="form-check-label" for="k3s-prod-public-ipv4">
|
|
Public IPv4
|
|
</label>
|
|
</div>
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="checkbox" id="k3s-prod-public-ipv6" checked>
|
|
<label class="form-check-label" for="k3s-prod-public-ipv6">
|
|
Public IPv6
|
|
</label>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="alert alert-info">
|
|
<small><i class="bi bi-info-circle me-1"></i>
|
|
<strong>Auto-configured:</strong> SSH keys and security policies will be applied to all cluster nodes.</small>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Individual VM #2 -->
|
|
<div class="col-md-6 mb-4">
|
|
<div class="card">
|
|
<div class="card-header bg-primary text-white">
|
|
<h6 class="mb-0"><i class="bi bi-server me-2"></i>Individual VM #2 (1 slice)</h6>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="mb-3">
|
|
<strong>farmer2 - 4x Base Unit</strong>
|
|
<small class="text-muted d-block">4 cores, 16GB RAM, 800GB SSD</small>
|
|
</div>
|
|
|
|
<div class="mb-3">
|
|
<label class="form-label">VM Name</label>
|
|
<input type="text" class="form-control" value="staging-server-01" placeholder="Enter VM name">
|
|
</div>
|
|
|
|
<div class="mb-3">
|
|
<label class="form-label">Operating System</label>
|
|
<select class="form-select">
|
|
<option value="ubuntu-22.04">Ubuntu 22.04 LTS</option>
|
|
<option value="ubuntu-20.04" selected>Ubuntu 20.04 LTS</option>
|
|
<option value="debian-12">Debian 12</option>
|
|
<option value="centos-9">CentOS 9</option>
|
|
<option value="alpine-3.18">Alpine 3.18</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="mb-3">
|
|
<label class="form-label">SSH Public Key</label>
|
|
<textarea class="form-control" rows="3" placeholder="ssh-rsa AAAAB3NzaC1yc2E..."></textarea>
|
|
</div>
|
|
|
|
<div class="mb-3">
|
|
<label class="form-label">Network Configuration</label>
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="checkbox" id="vm2-mycelium" checked disabled>
|
|
<label class="form-check-label" for="vm2-mycelium">
|
|
<strong>Mycelium</strong> (always enabled)
|
|
</label>
|
|
</div>
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="checkbox" id="vm2-wireguard">
|
|
<label class="form-check-label" for="vm2-wireguard">
|
|
WireGuard
|
|
</label>
|
|
</div>
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="checkbox" id="vm2-public-ipv4">
|
|
<label class="form-check-label" for="vm2-public-ipv4">
|
|
Public IPv4
|
|
</label>
|
|
</div>
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="checkbox" id="vm2-public-ipv6" checked>
|
|
<label class="form-check-label" for="vm2-public-ipv6">
|
|
Public IPv6
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- K3s Staging Cluster -->
|
|
<div class="col-md-6 mb-4">
|
|
<div class="card">
|
|
<div class="card-header bg-warning text-dark">
|
|
<h6 class="mb-0"><i class="bi bi-diagram-3 me-2"></i>K3s Cluster: Staging (8 slices)</h6>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="mb-3">
|
|
<strong>Cluster Nodes:</strong>
|
|
<ul class="mb-2">
|
|
<li><strong>datacenter4 - 8x Base Unit</strong> → Master Node</li>
|
|
<li><strong>datacenter4 - 4x Base Unit</strong> → Master Node</li>
|
|
<li><strong>datacenter4 - 2x Base Unit</strong> → Master Node</li>
|
|
<li><strong>farmer3 - 4x Base Unit</strong> → Worker Node</li>
|
|
<li><strong>farmer3 - 2x Base Unit</strong> → Worker Node</li>
|
|
<li><strong>farmer3 - 1x Base Unit</strong> → Worker Node</li>
|
|
<li><strong>farmer3 - 1x Base Unit</strong> → Worker Node</li>
|
|
<li><strong>farmer3 - 1x Base Unit</strong> → Worker Node</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="mb-3">
|
|
<label class="form-label">Cluster Name</label>
|
|
<input type="text" class="form-control" value="staging-cluster" placeholder="Enter cluster name">
|
|
</div>
|
|
|
|
<div class="mb-3">
|
|
<label class="form-label">K3s Version</label>
|
|
<select class="form-select">
|
|
<option value="v1.28.5">v1.28.5 (Stable)</option>
|
|
<option value="v1.29.1" selected>v1.29.1 (Latest)</option>
|
|
<option value="v1.27.8">v1.27.8 (LTS)</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="mb-3">
|
|
<label class="form-label">Network Plugin</label>
|
|
<select class="form-select">
|
|
<option value="flannel">Flannel (Default)</option>
|
|
<option value="calico" selected>Calico</option>
|
|
<option value="cilium">Cilium</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="mb-3">
|
|
<label class="form-label">Cluster Configuration</label>
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="checkbox" id="staging-monitoring">
|
|
<label class="form-check-label" for="staging-monitoring">
|
|
Enable Monitoring (Prometheus + Grafana)
|
|
</label>
|
|
</div>
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="checkbox" id="staging-ingress" checked>
|
|
<label class="form-check-label" for="staging-ingress">
|
|
Install Ingress Controller
|
|
</label>
|
|
</div>
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="checkbox" id="staging-storage" checked>
|
|
<label class="form-check-label" for="staging-storage">
|
|
Configure Persistent Storage
|
|
</label>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mb-3">
|
|
<label class="form-label">Network Configuration</label>
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="checkbox" id="k3s-staging-mycelium" checked disabled>
|
|
<label class="form-check-label" for="k3s-staging-mycelium">
|
|
<strong>Mycelium</strong> (always enabled)
|
|
</label>
|
|
</div>
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="checkbox" id="k3s-staging-wireguard">
|
|
<label class="form-check-label" for="k3s-staging-wireguard">
|
|
WireGuard
|
|
</label>
|
|
</div>
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="checkbox" id="k3s-staging-public-ipv4">
|
|
<label class="form-check-label" for="k3s-staging-public-ipv4">
|
|
Public IPv4
|
|
</label>
|
|
</div>
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="checkbox" id="k3s-staging-public-ipv6">
|
|
<label class="form-check-label" for="k3s-staging-public-ipv6">
|
|
Public IPv6
|
|
</label>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="alert alert-info">
|
|
<small><i class="bi bi-info-circle me-1"></i>
|
|
<strong>Auto-configured:</strong> SSH keys and security policies will be applied to all cluster nodes.</small>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Deployment Summary -->
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h6 class="mb-0"><i class="bi bi-list-check me-2"></i>Deployment Summary</h6>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="row">
|
|
<div class="col-md-8">
|
|
<ul class="mb-0">
|
|
<li><strong>2 Individual VMs:</strong> VM #1 (8 cores, 32GB, 1600GB) + VM #2 (4 cores, 16GB, 800GB)</li>
|
|
<li><strong>K3s Production Cluster:</strong> 6 nodes (3 masters + 3 workers)</li>
|
|
<li><strong>K3s Staging Cluster:</strong> 8 nodes (3 masters + 5 workers)</li>
|
|
<li><strong>Total Resources:</strong> 64 vCores, 256GB RAM, 12.8TB Storage</li>
|
|
<li><strong>Estimated Setup Time:</strong> 15-20 minutes</li>
|
|
</ul>
|
|
</div>
|
|
<div class="col-md-4 text-end">
|
|
<div class="mb-2">
|
|
<strong>Total Cost:</strong>
|
|
<div class="h5 text-success">75.95 TFP/hour</div>
|
|
<small class="text-muted">≈ $1,822.80/month</small>
|
|
</div>
|
|
<button class="btn btn-success btn-lg">
|
|
<i class="bi bi-rocket me-2"></i>Deploy Infrastructure
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div> |