index.html

<style>
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Inter',system-ui,sans-serif}
.page{min-height:100vh;background:#0d0d0f;color:#fff;padding:0}
.bg{position:relative;min-height:100vh;overflow:hidden}
.bg::before{content:'';position:absolute;top:-200px;left:50%;transform:translateX(-50%);width:800px;height:500px;background:radial-gradient(ellipse,rgba(255,166,50,.13) 0%,transparent 70%);pointer-events:none;z-index:0}
.bg::after{content:'';position:absolute;bottom:-100px;right:-100px;width:400px;height:400px;background:radial-gradient(ellipse,rgba(255,100,20,.07) 0%,transparent 70%);pointer-events:none;z-index:0}
.container{max-width:680px;margin:0 auto;padding:2.5rem 1.25rem;position:relative;z-index:1}
.nav{display:flex;align-items:center;justify-content:space-between;margin-bottom:3rem}
.brand{display:flex;align-items:center;gap:10px}
.brand-icon{width:32px;height:32px;background:linear-gradient(135deg,#ff6a00,#ffa632);border-radius:8px;display:flex;align-items:center;justify-content:center}
.brand-icon svg{width:18px;height:18px;fill:#fff}
.brand-name{font-size:15px;font-weight:600;color:#fff;letter-spacing:-.01em}
.brand-name span{color:#ffa632}
.nav-badge{font-size:11px;padding:3px 10px;border-radius:20px;background:rgba(255,166,50,.12);color:#ffa632;border:1px solid rgba(255,166,50,.2);font-weight:500}
.hero{text-align:center;margin-bottom:2.5rem}
.hero-tag{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:#ffa632;background:rgba(255,166,50,.1);border:1px solid rgba(255,166,50,.2);padding:4px 12px;border-radius:20px;margin-bottom:1.25rem;font-weight:500}
.hero-tag-dot{width:6px;height:6px;border-radius:50%;background:#ffa632;animation:blink 2s infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.3}}
h1{font-size:36px;font-weight:700;line-height:1.15;margin-bottom:.75rem;letter-spacing:-.02em}
h1 span{background:linear-gradient(90deg,#ff6a00,#ffa632,#ffcc80);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.hero-sub{font-size:15px;color:rgba(255,255,255,.5);line-height:1.6;max-width:420px;margin:0 auto}
.glass{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:16px;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}
.tabs{display:flex;gap:4px;padding:4px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.07);border-radius:12px;margin-bottom:1.5rem}
.tab{flex:1;padding:9px 8px;border-radius:9px;border:none;background:transparent;color:rgba(255,255,255,.45);font-size:13px;font-weight:500;cursor:pointer;transition:all .2s;font-family:inherit;display:flex;align-items:center;justify-content:center;gap:6px}
.tab svg{width:14px;height:14px;flex-shrink:0}
.tab.active{background:rgba(255,166,50,.15);color:#ffa632;border:1px solid rgba(255,166,50,.25)}
.tab:hover:not(.active){color:rgba(255,255,255,.7);background:rgba(255,255,255,.05)}
.card{padding:1.5rem;margin-bottom:1rem}
.field-label{font-size:12px;color:rgba(255,255,255,.4);font-weight:500;letter-spacing:.05em;text-transform:uppercase;margin-bottom:.5rem}
.domain-row{display:flex;align-items:stretch;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:10px;overflow:hidden;transition:border-color .2s}
.domain-row:focus-within{border-color:rgba(255,166,50,.5);box-shadow:0 0 0 3px rgba(255,166,50,.08)}
.domain-row input{flex:1;background:transparent;border:none;outline:none;font-size:15px;padding:13px 14px;color:#fff;font-family:inherit}
.domain-row input::placeholder{color:rgba(255,255,255,.2)}
.domain-suffix{display:flex;align-items:center;padding:0 14px;font-size:14px;color:rgba(255,255,255,.35);border-left:1px solid rgba(255,255,255,.08);white-space:nowrap;font-family:'Courier New',monospace}
.domain-select{background:rgba(255,255,255,.06);border:none;outline:none;color:rgba(255,255,255,.6);font-size:13px;padding:0 10px 0 8px;font-family:inherit;cursor:pointer;border-left:1px solid rgba(255,255,255,.08);appearance:none;min-width:130px;height:100%}
.domain-select option{background:#1a1a1f;color:#fff}
.preview-row{margin-top:.75rem;min-height:32px;display:flex;align-items:center;gap:8px}
.status-pill{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:20px;font-size:12px;font-weight:500}
.status-pill.ok{background:rgba(52,199,89,.12);color:#34c759;border:1px solid rgba(52,199,89,.2)}
.status-pill.taken{background:rgba(255,59,48,.12);color:#ff3b30;border:1px solid rgba(255,59,48,.2)}
.status-pill.warn{background:rgba(255,166,50,.12);color:#ffa632;border:1px solid rgba(255,166,50,.2)}
.status-pill.checking{background:rgba(255,255,255,.06);color:rgba(255,255,255,.4);border:1px solid rgba(255,255,255,.08)}
.sdot{width:5px;height:5px;border-radius:50%;flex-shrink:0}
.sdot.ok{background:#34c759}
.sdot.taken{background:#ff3b30}
.sdot.warn{background:#ffa632}
.sdot.spin{background:rgba(255,255,255,.4);animation:blink 1s infinite}
.preview-url{font-family:'Courier New',monospace;font-size:13px;color:rgba(255,255,255,.4)}
.preview-url.active{color:rgba(255,255,255,.7)}
.mc-fields{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px}
.mc-field input{width:100%;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:8px;padding:10px 12px;color:#fff;font-size:14px;font-family:inherit;outline:none;transition:border-color .2s}
.mc-field input:focus{border-color:rgba(255,166,50,.4)}
.mc-field input::placeholder{color:rgba(255,255,255,.2)}
.mc-field label{font-size:11px;color:rgba(255,255,255,.35);display:block;margin-bottom:4px;font-weight:500;text-transform:uppercase;letter-spacing:.04em}
.claim-btn{width:100%;margin-top:1rem;padding:14px;border-radius:10px;border:none;font-size:15px;font-weight:600;cursor:pointer;font-family:inherit;transition:all .2s;letter-spacing:-.01em;background:linear-gradient(135deg,#ff6a00,#ffa632);color:#fff;position:relative;overflow:hidden}
.claim-btn::after{content:'';position:absolute;inset:0;background:linear-gradient(rgba(255,255,255,.1),transparent);opacity:0;transition:opacity .2s}
.claim-btn:hover::after{opacity:1}
.claim-btn:disabled{opacity:.35;cursor:not-allowed}
.claim-btn:not(:disabled):active{transform:scale(0.99)}
.claim-btn.loading{opacity:.7;pointer-events:none}
.success-box{margin-top:1rem;padding:1.25rem;border-radius:10px;background:rgba(52,199,89,.07);border:1px solid rgba(52,199,89,.2);display:none}
.success-box.show{display:block}
.success-label{font-size:11px;color:#34c759;font-weight:600;letter-spacing:.06em;text-transform:uppercase;margin-bottom:.5rem}
.success-url-row{display:flex;align-items:center;justify-content:space-between;gap:8px}
.success-url{font-family:'Courier New',monospace;font-size:14px;color:#fff;word-break:break-all}
.copy-btn{padding:5px 12px;border-radius:6px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.06);color:rgba(255,255,255,.6);font-size:12px;cursor:pointer;font-family:inherit;white-space:nowrap;transition:all .15s}
.copy-btn:hover{color:#fff;border-color:rgba(255,255,255,.25)}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:.75rem}
.chip{font-size:12px;padding:4px 12px;border-radius:20px;border:1px solid rgba(255,166,50,.2);background:rgba(255,166,50,.06);color:#ffa632;cursor:pointer;font-family:'Courier New',monospace;transition:all .15s}
.chip:hover{background:rgba(255,166,50,.12);border-color:rgba(255,166,50,.35)}
.chips-label{font-size:12px;color:rgba(255,255,255,.3);margin-bottom:.3rem}
.divider{height:1px;background:rgba(255,255,255,.06);margin:1.25rem 0}
.recent-label{font-size:12px;color:rgba(255,255,255,.3);font-weight:500;letter-spacing:.05em;text-transform:uppercase;margin-bottom:.75rem}
.recent-items{display:flex;flex-direction:column;gap:6px}
.recent-item{display:flex;align-items:center;justify-content:space-between;padding:9px 12px;border-radius:8px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.05)}
.recent-item-name{font-family:'Courier New',monospace;font-size:13px;color:rgba(255,255,255,.7)}
.recent-item-meta{display:flex;align-items:center;gap:8px}
.recent-item-type{font-size:11px;padding:2px 7px;border-radius:4px;font-weight:500}
.recent-item-type.web{background:rgba(255,166,50,.1);color:#ffa632}
.recent-item-type.mc{background:rgba(100,200,100,.1);color:#64c864}
.recent-item-time{font-size:11px;color:rgba(255,255,255,.25)}
.features{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:1.25rem}
.feat{padding:.75rem;border-radius:10px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);text-align:center}
.feat-icon{width:28px;height:28px;border-radius:8px;margin:0 auto .4rem;display:flex;align-items:center;justify-content:center}
.feat-icon svg{width:16px;height:16px}
.feat-title{font-size:12px;font-weight:600;color:rgba(255,255,255,.7);margin-bottom:2px}
.feat-sub{font-size:11px;color:rgba(255,255,255,.3)}
.error-txt{font-size:12px;color:#ff3b30;margin-top:6px;min-height:16px}
.panel{display:none}.panel.active{display:block}
</style>

<div class="page">
<div class="bg">
<div class="container">
  <nav class="nav">
    <div class="brand">
      <img src="https://serververs.com/assets/images/3-bg-removed.ico" width="50" height="50" alt="Logo">
    </div>
    <div class="nav-badge">Claim for Free</div>
  </nav>

  <div class="hero">
    <div class="hero-tag">
      <div class="hero-tag-dot"></div>
      Instant DNS, Zero Setup Needed
    </div>
    <h1>Your domain.<br><span>Your rules.</span></h1>
    <p class="hero-sub">Claim a free subdomain or Minecraft SRV record and have it pointed to your server in seconds.</p>
  </div>

  <div class="tabs" id="tabs">
    <button class="tab active" data-tab="web" onclick="switchTab('web')">
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><path d="M2 12h20M12 2a15 15 0 010 20M12 2a15 15 0 000 20"/></svg>
      Web Host
    </button>
    <button class="tab" data-tab="mc" onclick="switchTab('mc')">
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="2" y="3" width="20" height="14" rx="2"/><path d="M8 21h8M12 17v4"/></svg>
      Minecraft
    </button>
  </div>

  <div class="glass card" id="mainCard">
    <div class="panel active" id="panel-web">
      <div class="field-label">choose your subdomain</div>
      <div class="domain-row" id="webRow">
        <input id="webInput" type="text" placeholder="your-project" autocomplete="off" spellcheck="false" maxlength="30"/>
        <select class="domain-select" id="domainSelect" onchange="onInput()">
          <option value="srvx.dev">.srvx.dev</option>
        </select>
      </div>
      <div class="error-txt" id="webError"></div>
      <div class="preview-row" id="webPreview" style="display:none">
        <div class="status-pill checking" id="webPill"><div class="sdot spin" id="webDot"></div><span id="webStatus">Checking…</span></div>
        <div class="preview-url" id="webUrl"></div>
      </div>
      <div id="sugWrap" style="display:none;margin-top:.75rem">
        <div class="chips-label">Try Instead</div>
        <div class="chips" id="sugChips"></div>
      </div>
    </div>

    <div class="panel" id="panel-mc">
      <div class="field-label">minecraft server subdomain</div>
      <div class="domain-row" id="mcRow">
        <input id="mcInput" type="text" placeholder="mc-yourserver" autocomplete="off" spellcheck="false" maxlength="30"/>
        <div class="domain-suffix">.srvx.dev</div>
      </div>
      <div class="error-txt" id="mcError"></div>
      <div class="mc-fields">
        <div class="mc-field">
          <label>target host</label>
          <input id="mcHost" type="text" placeholder="play.yourserver.com"/>
        </div>
        <div class="mc-field">
          <label>port</label>
          <input id="mcPort" type="number" placeholder="25565" value="25565"/>
        </div>
        <div class="mc-field">
          <label>priority</label>
          <input id="mcPrio" type="number" placeholder="0" value="0"/>
        </div>
        <div class="mc-field">
          <label>weight</label>
          <input id="mcWeight" type="number" placeholder="5" value="5"/>
        </div>
      </div>
      <div class="preview-row" id="mcPreview" style="display:none">
        <div class="status-pill checking" id="mcPill"><div class="sdot spin" id="mcDot"></div><span id="mcStatus">Checking…</span></div>
        <div class="preview-url" id="mcUrl"></div>
      </div>
    </div>

    <button class="claim-btn" id="claimBtn" disabled onclick="doClaim()">
      <span id="claimTxt">Claim</span>
    </button>

    <div class="success-box" id="successBox">
      <div class="success-label">Record is Live</div>
      <div class="success-url-row">
        <div class="success-url" id="successUrl"></div>
        <button class="copy-btn" id="copyBtn" onclick="doCopy()">Copy</button>
      </div>
    </div>
  </div>

  <div class="glass card">
    <div class="features">
      <div class="feat">
        <div class="feat-icon" style="background:rgba(255,166,50,.12)">
          <svg viewBox="0 0 24 24" fill="none" stroke="#ffa632" stroke-width="2"><path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z"/></svg>
        </div>
        <div class="feat-title">Instant Deployment</div>
        <div class="feat-sub">Live in &lt;30s</div>
      </div>
      <div class="feat">
        <div class="feat-icon" style="background:rgba(100,200,255,.1)">
          <svg viewBox="0 0 24 24" fill="none" stroke="#64c8ff" stroke-width="2"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>
        </div>
        <div class="feat-title">Protected</div>
        <div class="feat-sub">DDoS + SSL free</div>
      </div>
      <div class="feat">
        <div class="feat-icon" style="background:rgba(100,200,100,.1)">
          <svg viewBox="0 0 24 24" fill="none" stroke="#64c864" stroke-width="2"><rect x="2" y="3" width="20" height="14" rx="2"/><path d="M8 21h8M12 17v4"/></svg>
        </div>
        <div class="feat-title">Host in Seconds</div>
        <div class="feat-sub">Host your Website without owning a Domain.</div>
      </div>
    </div>
  </div>

  <div class="glass card">
    <div class="recent-label">Recently Claimed</div>
    <div class="recent-items" id="recentItems"></div>
  </div>
</div>
</div>
</div>

<script>
const RESERVED=new Set(['admin','api','mail','ftp','root','server','www','ns','cdn','dev','app','docs','status','billing','login','logout','signup','register','account','support','home']);
const PROFANITY=new Set(['fuck','shit','ass','dick','cock','cunt','bitch','bastard','porn','sex']);
const TAKEN=new Set(['demo','test','example','playground','myapp','devtest','minecraft','mc','play','survival','creative']);
const RECENT=[
  {name:'akari',domain:'srvx.dev',type:'web',time:'1m ago'},
  {name:'mcpe',domain:'srvx.dev',type:'mc',time:'4m ago'},
  {name:'hypixelii',domain:'serververs.com',type:'web',time:'9m ago'},
  {name:'pixelcraft',domain:'srvx.dev',type:'mc',time:'22m ago'},
  {name:'vercelo',domain:'srv.cx',type:'web',time:'35m ago'},
];
let tab='web',checkTimer=null,currentName='',isOk=false;

function renderRecent(){
  document.getElementById('recentItems').innerHTML=RECENT.slice(0,5).map(r=>`
    <div class="recent-item">
      <span class="recent-item-name">${r.name}.${r.domain}</span>
      <div class="recent-item-meta">
        <span class="recent-item-type ${r.type}">${r.type==='mc'?'SRV':'CNAME'}</span>
        <span class="recent-item-time">${r.time}</span>
      </div>
    </div>`).join('');
}
renderRecent();

function switchTab(t){
  tab=t;
  document.querySelectorAll('.tab').forEach(el=>el.classList.toggle('active',el.dataset.tab===t));
  document.querySelectorAll('.panel').forEach(el=>el.classList.toggle('active',el.id==='panel-'+t));
  resetState();
}

function resetState(){
  isOk=false;
  currentName='';
  document.getElementById('claimBtn').disabled=true;
  document.getElementById('claimTxt').textContent='Claim';
  document.getElementById('successBox').classList.remove('show');
  document.getElementById('sugWrap').style.display='none';
  ['web','mc'].forEach(p=>{
    const el=document.getElementById(p+'Preview');
    if(el) el.style.display='none';
    const err=document.getElementById(p+'Error');
    if(err) err.textContent='';
  });
}

function validate(name){
  if(!name) return null;
  if(name.length<3) return'Too short (min 3 chars)';
  if(name.length>30) return'Too long (max 30 chars)';
  if(!/^[a-z0-9][a-z0-9-]*[a-z0-9]$/.test(name)&&name.length>1) return'Lowercase letters, numbers, hyphens only. Must start/end with alphanumeric.';
  if(!/^[a-z0-9-]+$/.test(name)) return'Invalid characters';
  if(name.includes('--')) return'No consecutive hyphens';
  for(const w of PROFANITY) if(name.includes(w)) return'Name not allowed';
  if(RESERVED.has(name)) return`"${name}" is reserved`;
  return'';
}

function setStatus(prefix,type,text){
  const pill=document.getElementById(prefix+'Pill');
  const dot=document.getElementById(prefix+'Dot');
  const stat=document.getElementById(prefix+'Status');
  pill.className='status-pill '+type;
  dot.className='sdot '+(type==='checking'?'spin':type);
  stat.textContent=text;
}

function getSugs(name){
  return[`${name}-app`,`${name}-dev`,`${name}-1`,`my-${name}`].filter(s=>!TAKEN.has(s)&&s.length<=30).slice(0,4);
}

function onInput(){
  const raw=(tab==='web'?document.getElementById('webInput'):document.getElementById('mcInput')).value.toLowerCase().replace(/[^a-z0-9-]/g,'');
  const inputEl=tab==='web'?document.getElementById('webInput'):document.getElementById('mcInput');
  if(raw!==inputEl.value) inputEl.value=raw;
  currentName=raw;
  isOk=false;
  document.getElementById('claimBtn').disabled=true;
  document.getElementById('successBox').classList.remove('show');
  document.getElementById('sugWrap').style.display='none';
  const errEl=document.getElementById(tab+'Error');
  errEl.textContent='';
  const prev=document.getElementById(tab+'Preview');
  if(!raw){prev.style.display='none';document.getElementById('claimTxt').textContent='Claim';return;}
  const v=validate(raw);
  if(v===null){prev.style.display='none';return;}
  if(v){errEl.textContent=v;prev.style.display='none';return;}
  const domain=tab==='web'?document.getElementById('domainSelect').value:'srvx.dev';
  prev.style.display='flex';
  document.getElementById(tab+'Url').textContent=raw+'.'+domain;
  setStatus(tab,'checking','Checking availability…');
  clearTimeout(checkTimer);
  checkTimer=setTimeout(async()=>{
    const domain=tab==='web'?document.getElementById('domainSelect').value:'srvx.dev';
    try{
      const res=await fetch(`/api/check?name=${raw}&type=${tab}&domain=${domain}`);
      const data=await res.json();
      if(data.available){
        setStatus(tab,'ok','Available');
        isOk=true;
        document.getElementById('claimBtn').disabled=false;
        document.getElementById('claimTxt').textContent=tab==='mc'?'Create SRV record':'Claim';
      } else {
        setStatus(tab,'taken',data.reason||'Already taken');
        isOk=false;
        document.getElementById('claimBtn').disabled=true;
        document.getElementById('claimTxt').textContent='Name unavailable';
        if(tab==='web'){
          const sugs=getSugs(raw);
          if(sugs.length){
            document.getElementById('sugChips').innerHTML=sugs.map(s=>`<span class="chip" onclick="useSug('${s}')">${s}</span>`).join('');
            document.getElementById('sugWrap').style.display='block';
          }
        }
      }
    } catch(e){
      setStatus(tab,'warn','Check failed');
    }
  },550);
}

window.useSug=function(n){
  document.getElementById('webInput').value=n;
  onInput();
};

document.getElementById('webInput').addEventListener('input',onInput);
document.getElementById('mcInput').addEventListener('input',onInput);

async function doClaim(){
  if(!isOk||!currentName) return;
  const btn=document.getElementById('claimBtn');
  btn.classList.add('loading');
  document.getElementById('claimTxt').textContent=tab==='mc'?'Creating SRV record…':'Creating DNS record…';
  const domain=tab==='web'?document.getElementById('domainSelect').value:'srvx.dev';
  let payload={name:currentName,type:tab,domain};
  if(tab==='mc'){
    payload.mcHost=document.getElementById('mcHost').value||'localhost';
    payload.mcPort=parseInt(document.getElementById('mcPort').value)||25565;
    payload.mcPriority=parseInt(document.getElementById('mcPrio').value)||0;
    payload.mcWeight=parseInt(document.getElementById('mcWeight').value)||5;
  }
  try{
    const res=await fetch('/api/claim',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify(payload)});
    const data=await res.json();
    btn.classList.remove('loading');
    if(data.success){
      btn.disabled=true;
      document.getElementById('claimTxt').textContent='Claimed!';
      document.getElementById('successUrl').textContent=data.url||data.domain;
      document.getElementById('successBox').classList.add('show');
      setStatus(tab,'ok','Active');
      RECENT.unshift({name:currentName,domain,type:tab,time:'just now'});
      renderRecent();
    } else {
      btn.disabled=false;
      btn.classList.remove('loading');
      document.getElementById(tab+'Error').textContent=data.error||'Claim failed';
      document.getElementById('claimTxt').textContent='Try again';
    }
  } catch(e){
    btn.classList.remove('loading');
    btn.disabled=false;
    document.getElementById(tab+'Error').textContent='Network error, try again';
    document.getElementById('claimTxt').textContent='Try again';
  }
}

function doCopy(){
  const url=document.getElementById('successUrl').textContent;
  navigator.clipboard.writeText(url).catch(()=>{});
  document.getElementById('copyBtn').textContent='Copied!';
  setTimeout(()=>document.getElementById('copyBtn').textContent='Copy',2000);
}
</script>