jenk/build-your-own-x
1
1
Fork 0
mirror of https://github.com/codecrafters-io/build-your-own-x synced 2026-07-02 16:59:25 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Rename README.md to S.v saver vard

Browse source 
<!doctype html>
<html lang="hi">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Satbeer — S.V Sarver Vard</title>
  <style>
    :root{
      --bg:#0f1724;
      --card:#0b1220;
      --accent:#7dd3fc;
      --muted:#94a3b8;
    }
    *{box-sizing:border-box}
    body{
      margin:0;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans", "Helvetica Neue", Arial;
      background: linear-gradient(180deg, #071021 0%, #0f1a2a 100%);
      color: #e6f0ff;
      min-height:100vh;
      display:flex;
      align-items:center;
      justify-content:center;
      padding:24px;
    }
    .card{
      width:100%;
      max-width:720px;
      background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
      border-radius:16px;
      padding:28px;
      box-shadow: 0 10px 30px rgba(2,6,23,0.6);
      border: 1px solid rgba(255,255,255,0.04);
    }
    header{
      display:flex;
      gap:16px;
      align-items:center;
    }
    .avatar{
      width:84px;height:84px;border-radius:12px;
      background: linear-gradient(135deg, #065f46, #0891b2);
      display:flex;align-items:center;justify-content:center;
      font-weight:700;font-size:32px;color:white;
      flex-shrink:0;
      box-shadow: 0 6px 18px rgba(3,7,18,0.6);
    }
    h1{
      margin:0;font-size:32px;letter-spacing:0.6px;
    }
    p.subtitle{
      margin:4px 0 0 0;color:var(--muted);
      font-size:14px;
    }
    .controls{
      margin-top:20px;display:flex;gap:10px;flex-wrap:wrap;
    }
    button{
      background:transparent;border:1px solid rgba(255,255,255,0.08);
      padding:10px 14px;border-radius:10px;color:inherit;
      cursor:pointer;font-weight:600;
      transition:all .18s ease;
      backdrop-filter: blur(6px);
    }
    button.primary{
      background:linear-gradient(90deg,#0891b2,#06b6d4);
      color:#041322;border:0;
      box-shadow: 0 8px 20px rgba(3,7,18,0.5);
    }
    button:hover{transform:translateY(-3px)}
    .meta{
      margin-top:18px;color:var(--muted);font-size:13px;
    }

    /* responsive adjustments */
    @media (max-width:420px){
      header{gap:12px}
      .avatar{width:64px;height:64px;font-size:26px}
      h1{font-size:24px}
    }
  </style>
</head>
<body>
  <div class="card" role="main">
    <header>
      <div class="avatar" id="avatar">S</div>
      <div>
        <h1 id="mainName">Satbeer</h1>
        <p class="subtitle" id="subName">S.V Sarver Vard</p>
      </div>
    </header>

    <div class="controls">
      <button class="primary" id="editBtn">नाम बदलो / Edit Name</button>
      <button id="copyBtn">Copy Name</button>
      <button id="downloadBtn">Download as TXT</button>
    </div>

    <p class="meta">
      यह छोटा पेज मोबाइल-फ़्रेंडली है — "Edit Name" से नाम बदल सकते हो, "Copy Name" से clipboard में चले जाएगा, और "Download as TXT" से नाम की फ़ाइल बनाकर डाउनलोड कर लो।
    </p>
  </div>

  <script>
    const mainName = document.getElementById('mainName');
    const subName = document.getElementById('subName');
    const avatar = document.getElementById('avatar');
    const editBtn = document.getElementById('editBtn');
    const copyBtn = document.getElementById('copyBtn');
    const downloadBtn = document.getElementById('downloadBtn');

    function updateAvatarLetter(){
      const txt = mainName.textContent.trim();
      avatar.textContent = txt ? txt[0].toUpperCase() : 'S';
    }
    updateAvatarLetter();

    editBtn.addEventListener('click', () => {
      const newMain = prompt('मुख्य नाम डालो (example: Satbeer):', mainName.textContent) || mainName.textContent;
      const newSub  = prompt('छोटा टेक्स्ट डालो (example: S.V Sarver Vard):', subName.textContent) || subName.textContent;
      mainName.textContent = newMain.trim();
      subName.textContent = newSub.trim();
      updateAvatarLetter();
    });

    copyBtn.addEventListener('click', async () => {
      const text = mainName.textContent + ' — ' + subName.textContent;
      try{
        await navigator.clipboard.writeText(text);
        alert('नाम clipboard में copy हुआ:\n' + text);
      }catch(e){
        // fallback
        const ta = document.createElement('textarea');
        ta.value = text; document.body.appendChild(ta);
        ta.select(); document.execCommand('copy'); ta.remove();
        alert('Copied (fallback): ' + text);
      }
    });

    downloadBtn.addEventListener('click', () => {
      const text = mainName.textContent + ' - ' + subName.textContent;
      const blob = new Blob([text], {type:'text/plain;charset=utf-8'});
      const url = URL.createObjectURL(blob);
      const a = document.createElement('a');
      a.href = url; a.download = (mainName.textContent || 'name') + '.txt';
      document.body.appendChild(a); a.click(); a.remove(); URL.revokeObjectURL(url);
    });
  </script>
</body>
</html>
This commit is contained in:
shivamprajapatishivam702-hash 2025-09-30 07:08:26 +05:30 committed by GitHub
parent 51198a9f9c
commit 38bfe2e29f
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1 changed files with 0 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files