78 lines
2.9 KiB
HTML
78 lines
2.9 KiB
HTML
{% extends "base.html" %}
|
|
{% block body %}
|
|
<div class="hero" style="padding-bottom:20px">
|
|
<h1>Dedicated <span class="glow">IPs</span>.</h1>
|
|
<p class="lede">One clean IP, yours alone. Static datacenter or premium residential-ISP. Provisioned automatically from a global pool.</p>
|
|
</div>
|
|
|
|
<div class="dash-grid">
|
|
<div class="card">
|
|
<h3>Configure your IP</h3>
|
|
<form method="post" action="/dedicated/buy" onsubmit="document.getElementById('loc_name').value=document.getElementById('loc').selectedOptions[0].textContent">
|
|
<label>Type</label>
|
|
<div class="grid" style="grid-template-columns:1fr 1fr">
|
|
{% for pid, p in products.items() %}
|
|
<label class="switch" style="cursor:pointer">
|
|
<input type="radio" name="product" value="{{ pid }}" {% if loop.first %}checked{% endif %} style="width:auto">
|
|
<span>{{ p.name }}</span>
|
|
</label>
|
|
{% endfor %}
|
|
</div>
|
|
|
|
<label>Duration</label>
|
|
<div class="grid" style="grid-template-columns:1fr 1fr 1fr">
|
|
{% for days in [30, 60, 90] %}
|
|
<label class="switch" style="cursor:pointer">
|
|
<input type="radio" name="days" value="{{ days }}" {% if days == 30 %}checked{% endif %} style="width:auto">
|
|
<span>{{ days }}d</span>
|
|
</label>
|
|
{% endfor %}
|
|
</div>
|
|
|
|
<label>Location</label>
|
|
<select id="loc" name="location_id"></select>
|
|
<input type="hidden" name="location_name" id="loc_name" value="">
|
|
|
|
<input type="submit" value="Order dedicated IP">
|
|
</form>
|
|
</div>
|
|
|
|
<div>
|
|
<div class="card">
|
|
<h3>Pricing</h3>
|
|
{% for pid, p in products.items() %}
|
|
<p class="muted" style="margin:0 0 6px"><strong style="color:var(--text)">{{ p.name }}</strong> — {{ p.desc }}</p>
|
|
{% for days, (_, sats) in p.plans.items() %}
|
|
<div class="copy" style="margin-bottom:4px">
|
|
<span class="mono" style="flex:1">{{ days }} days</span>
|
|
<span class="mono" style="color:var(--neon)">{{ sats }} sats</span>
|
|
</div>
|
|
{% endfor %}
|
|
<hr style="border-color:var(--border);margin:12px 0">
|
|
{% endfor %}
|
|
<p class="muted" style="font-size:12px">IPs provision automatically after payment (usually minutes). You get the host:port + credentials in your dashboard once live.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
const locs = {
|
|
3: {{ dc_locs | tojson }},
|
|
9: {{ isp_locs | tojson }}
|
|
};
|
|
function updateLocs() {
|
|
const pid = document.querySelector('input[name=product]:checked').value;
|
|
const sel = document.getElementById('loc');
|
|
sel.innerHTML = '';
|
|
(locs[pid] || []).forEach(([id, name, stock]) => {
|
|
const o = document.createElement('option');
|
|
o.value = id; o.textContent = name + (stock ? '' : ' — out of stock');
|
|
if (!stock) o.disabled = true;
|
|
sel.appendChild(o);
|
|
});
|
|
}
|
|
document.querySelectorAll('input[name=product]').forEach(r => r.onchange = updateLocs);
|
|
updateLocs();
|
|
</script>
|
|
{% endblock %}
|