Demande de jeu HTML5 : Modèle Ragdoll Hit × FNF

1,106 iroger7

Ouvrir dans l'éditeur Publiez votre code

Demande de jeu HTML5 : Modèle Ragdoll Hit × FNF

Recommandé

30 April 2024

Modèle de notation des étoiles animées

14 June 2024

Effet de carte Flips 3D

25 January 2026

Modèle HTML de joueur de jeu Ruffle Flash

HTML

<!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>

CSS