Webleb - Code-Snippets - HTML5-Spielanfrage: Ragdoll Hit × FNF-Vorlage

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width,initial-scale=1" />
  <title>Request: Ragdoll Hit × FNF — Professional Request</title>
  <style>
    :root{
      --bg:#0f1724;
      --card:#0b1220;
      --accent:#6ee7b7;
      --muted:#9aa8bf;
      --glass: rgba(255,255,255,0.03);
      --radius:12px;
      font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
      color-scheme: dark;
    }
    *{box-sizing:border-box}
    body{
      margin:0;
      background:linear-gradient(180deg,#071025 0%, #071827 60%);
      color: #e6eef8;
      min-height:100vh;
      display:flex;
      align-items:center;
      justify-content:center;
      padding:32px;
      -webkit-font-smoothing:antialiased;
    }
    .container{
      width:100%;
      max-width:900px;
      background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
      border-radius:var(--radius);
      padding:28px;
      box-shadow: 0 10px 30px rgba(3,8,20,0.6);
      border: 1px solid rgba(255,255,255,0.03);
    }
    header{
      display:flex;
      gap:16px;
      align-items:center;
      margin-bottom:18px;
    }
    .logo{
      width:64px;
      height:64px;
      border-radius:12px;
      background:linear-gradient(135deg, rgba(110,231,183,0.12), rgba(110,231,183,0.06));
      display:flex;
      align-items:center;
      justify-content:center;
      font-weight:700;
      color:var(--accent);
      font-size:20px;
      border:1px solid rgba(110,231,183,0.08);
    }
    h1{
      margin:0;
      font-size:20px;
      letter-spacing:0.2px;
    }
    p.lead{
      margin:6px 0 0 0;
      color:var(--muted);
      font-size:13px;
    }

.card{
      background:var(--card);
      border-radius:10px;
      padding:18px;
      margin-top:18px;
      display:grid;
      grid-template-columns: 1fr 330px;
      gap:18px;
    }
    @media (max-width:880px){
      .card{grid-template-columns:1fr; padding:14px}
    }

.request{
      color:#dbeafe;
      font-size:15px;
      line-height:1.5;
    }
    .meta{
      display:flex;
      flex-direction:column;
      gap:10px;
    }
    .box{
      background:var(--glass);
      border-radius:8px;
      padding:12px;
      border:1px solid rgba(255,255,255,0.02);
      font-size:13px;
      color:var(--muted);
    }
    .btn{
      display:inline-block;
      text-decoration:none;
      background:linear-gradient(90deg,var(--accent), #4fd1c5);
      color:#022020;
      padding:10px 14px;
      border-radius:8px;
      font-weight:600;
      text-align:center;
      box-shadow: 0 6px 18px rgba(46,64,83,0.25);
    }
    .small{
      font-size:12px;
      color:var(--muted);
    }
    footer{
      margin-top:16px;
      display:flex;
      justify-content:space-between;
      align-items:center;
      gap:12px;
      flex-wrap:wrap;
    }
    .tags{display:flex; gap:8px; flex-wrap:wrap}
    .tag{
      font-size:12px;
      padding:6px 8px;
      border-radius:999px;
      background:rgba(255,255,255,0.02);
      color:var(--muted);
      border:1px solid rgba(255,255,255,0.02);
    }
    .note{
      font-size:12px;
      color:var(--muted);
    }
  </style>
</head>
<body>
  <main class="container" role="main" aria-labelledby="title">
    <header>
      <div class="logo" aria-hidden="true">RH</div>
      <div>
        <h1 id="title">Polite Request: "Ragdoll Hit × FNF" — Professional Version</h1>
        <p class="lead">A clean, shareable request you can post to forums, Discord channels, or developer communities.</p>
      </div>
    </header>

<section class="card" aria-label="Request details">
      <div>
        <div class="request">
          <strong>Request summary</strong>
          <p style="margin-top:8px;">
            Hello — I'm looking for a polished HTML5/JavaScript rhythm-action game inspired by Ragdoll Hit and Friday Night Funkin' with:
          </p>
          <ul style="margin-top:8px">
            <li>Responsive HTML/CSS/JS structure you can run in a browser</li>
            <li>Clean, modular code (separate files or clear modules)</li>
            <li>Polished UI and UX: menus, difficulty options, and accessibility basics</li>
            <li>Frame‑based or audio-synced input handling for rhythm mechanics</li>
            <li>Polished animations and sound integration (placeholders okay)</li>
            <li>A professional README with setup and contributor guidelines</li>
          </ul>

<p style="margin-top:10px">
            Please keep assets licensed for reuse (or use placeholders) and document how to integrate custom songs and skins.
          </p>
        </div>

<footer>
          <div class="tags">
            <span class="tag">HTML5</span>
            <span class="tag">JavaScript</span>
            <span class="tag">Game Dev</span>
            <span class="tag">FNF</span>
            <span class="tag">Ragdoll</span>
          </div>

<div class="note">
            Tip: include expected timeline, payment/credit details, and preferred tech stack when posting this request.
          </div>
        </footer>
      </div>

<aside class="meta" aria-label="Suggested message and copy">
        <div class="box" role="region" aria-label="Suggested message">
          <strong>Suggested short message (copy & paste):</strong>
          <p style="margin-top:8px; color:#dbeafe;">
            Someone please make a professional, polished HTML5 rhythm-action game combining Ragdoll Hit mechanics with Friday Night Funkin' style presentation. Should include responsive UI, modular code, audio sync for inputs, animation placeholders, and a README for contributors. Open to collaboration or commissions.
          </p>
        </div>

<div class="box" role="region" aria-label="What to include when posting">
          <strong>What to include when you post:</strong>
          <ol style="margin-top:8px; color:var(--muted)">
            <li>Target platforms (desktop/mobile/both)</li>
            <li>License & payment/credit expectations</li>
            <li>Example songs/tempo range you'd like supported</li>
            <li>Any preferred frameworks (vanilla JS, Phaser, Godot export, etc.)</li>
          </ol>
        </div>

<div style="display:flex; gap:8px; justify-content:flex-end; align-items:center;">
          <a class="btn" href="#" onclick="navigator.clipboard && navigator.clipboard.writeText(document.querySelector('.box p').innerText).then(()=>alert('Copied!')).catch(()=>alert('Could not copy'))">Copy message</a>
        </div>
      </aside>
    </section>
  </main>
</body>
</html>

Validating your code, please wait...

HTML

CSS

<p style="margin-top:10px">
            Please keep assets licensed for reuse (or use placeholders) and document how to integrate custom songs and skins.
          </p>
        </div>

<div class="note">
            Tip: include expected timeline, payment/credit details, and preferred tech stack when posting this request.
          </div>
        </footer>
      </div>