Embed

<!DOCTYPE html>
<html lang="pt-BR">
<head>
  <meta charset="UTF-8"/>
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>RIABOX — Dashboard</title>

  <link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&family=Inter:wght@300;400;600;800&display=swap" rel="stylesheet"/>

  <style>
    :root{
      --black:#000; --white:#fff; --muted:#b8b8b8;
      --card:#0b0b0d; --stroke:#2a2a2a;
      --pink:#ff1f8f; --pink-glow:rgba(255,31,143,.55);
      --accent:#ff7abf; --blue:#00d4ff; --green:#00ff88;
    }
    *{box-sizing:border-box}
    html,body{margin:0;padding:0;background:#000;color:var(--white);font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;min-height:100vh;overflow-x:hidden}
    body::before{
      content:"";position:fixed;inset:0;background:
        radial-gradient(circle at 20% 80%,var(--pink-glow) 0%,transparent 50%),
        radial-gradient(circle at 80% 20%,rgba(0,212,255,.25) 0%,transparent 50%);
      z-index:-1;animation:pulse 4s ease-in-out infinite alternate
    }
    @keyframes pulse{0%{opacity:.3}100%{opacity:.7}}

    /* Shell */
    .wrap{max-width:900px;margin:0 auto;padding:24px;display:grid;place-items:center;text-align:center;gap:14px}
    .card{
      width:100%;background:rgba(26,26,26,.85);backdrop-filter:blur(8px);
      border:1px solid rgba(255,31,143,.35);border-radius:16px;padding:24px
    }

    /* Headings */
    .title{
      font-family:'Orbitron',monospace;font-size:2.2rem;font-weight:900;margin:0;
      background:linear-gradient(135deg,var(--pink),var(--blue));
      -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
      text-shadow:0 0 26px var(--pink-glow)
    }
    .tagline{
      margin-top:6px;display:inline-block;padding:6px 12px;border-radius:9999px;
      border:1px solid var(--stroke);background:#121216;font-family:'Orbitron',monospace;font-size:.85rem;color:#e9e9e9
    }
    .welcome{margin:12px 0 0;color:#e8e8ea;font-size:1.05rem}
    .hint{color:#9ee8ff;font-family:'Orbitron',monospace;font-size:.8rem;margin-top:6px}

    /* Progress (gamificado sutil) */
    .progress{--pct:0;height:14px;border:2px solid var(--blue);border-radius:10px;position:relative;margin:12px auto 0;max-width:360px;
      box-shadow:0 0 12px rgba(0,212,255,.3);
      background:linear-gradient(90deg,rgba(0,0,0,.6),rgba(0,0,0,.6)) padding-box,
                 repeating-linear-gradient(90deg,rgba(255,255,255,.06) 0 10px,transparent 10px 20px) border-box}
    .fill{position:absolute;inset:0;width:calc(var(--pct)*1%);background:linear-gradient(90deg,#0f0,#3bffad,#0f0);
      box-shadow:inset 0 0 10px rgba(0,255,136,.5)}

    /* Grid options */
    .grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:16px}
    @media (max-width:740px){ .grid{grid-template-columns:1fr} .title{font-size:1.8rem} }

    .opt{
      display:block;text-decoration:none;color:inherit;text-align:left;
      background:#0f0f12;border:1px solid var(--stroke);border-radius:14px;padding:16px;
      transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease
    }
    .opt:hover{transform:translateY(-2px);border-color:rgba(255,31,143,.6);box-shadow:0 12px 24px rgba(255,31,143,.15)}
    .opt:active{transform:translateY(0)}
    .badge{display:inline-block;margin-bottom:8px;padding:4px 8px;border-radius:9999px;font-size:.75rem;font-family:'Orbitron',monospace;
      border:1px solid rgba(0,255,136,.45);background:rgba(0,255,136,.12);color:#8bffcf}
    .opt h4{margin:0 0 6px;font-family:'Orbitron',monospace;font-size:1.05rem;letter-spacing:.3px}
    .opt p{margin:0;color:#d8d8d8}
    .go{margin-top:10px;display:inline-flex;align-items:center;gap:8px;color:#9ee8ff;font-family:'Orbitron',monospace;font-size:.85rem}
    .go::after{content:'→'}

    /* Keytips */
    .keys{display:flex;gap:8px;justify-content:center;margin-top:12px;color:#c9c9cf}
    .key{border:1px solid var(--stroke);background:#151519;padding:4px 8px;border-radius:6px;font-family:'Orbitron',monospace;font-size:.75rem}
  </style>
</head>
<body>
  <main class="wrap">
    <section class="card" aria-labelledby="t1">
      <h1 id="t1" class="title">RIABOX</h1>
      <div class="tagline">Release In A Box</div>

      <div class="welcome" id="welcomeTxt">Bem-vindo(a)!</div>
      <div class="hint">Selecione um módulo para começar.</div>

      
      <div class="progress" id="progress" style="--pct:0"><div class="fill"></div></div>

      <div class="grid" role="list">
        <a class="opt" role="listitem" id="optPlanner"
           href="https://arcadiastudio.com.br/riabox/music-release-planner" rel="noopener noreferrer">
          <span class="badge">PRONTO</span>
          <h4>Music Release Planner</h4>
          <p>Monte sua timeline do D-30 ao D+7 com boas práticas.</p>
          <div class="go">Abrir</div>
        </a>

        <a class="opt" role="listitem" id="optMediaKit"
           href="https://arcadiastudio.com.br/riabox/media-kit-generator" rel="noopener noreferrer">
          <span class="badge">PRONTO</span>
          <h4>Media Kit Generator</h4>
          <p>Crie seu press kit moderno (bio, conquistas, links, 9:16).</p>
          <div class="go">Abrir</div>
        </a>
      </div>

      <div class="keys">
        <div class="key">1</div> Music Release Planner
        <div class="key">2</div> Media Kit Generator
      </div>
    </section>
  </main>

  <script>
    // Personalização de boas-vindas por query string (?name=, ?u=)
    (function(){
      const qs = new URLSearchParams(location.search);
      const name = qs.get('name') || qs.get('u') || qs.get('user') || '';
      const hour = new Date().getHours();
      const greet = hour<12 ? 'Bom dia' : (hour<18 ? 'Boa tarde' : 'Boa noite');
      const el = document.getElementById('welcomeTxt');
      el.textContent = name ? `${greet}, ${name}!` : `${greet}!`;
    })();

    // Pequena gamificação visual: “XP” sobe quando o usuário foca/seleciona uma opção
    const bar = document.getElementById('progress');
    const setXP = (pct)=>{ bar.style.setProperty('--pct', pct); };

    const optPlanner = document.getElementById('optPlanner');
    const optMedia   = document.getElementById('optMediaKit');

    ['mouseenter','focus'].forEach(ev=>{
      optPlanner.addEventListener(ev, ()=>setXP(50));
      optMedia.addEventListener(ev,   ()=>setXP(100));
    });
    ['mouseleave','blur'].forEach(ev=>{
      optPlanner.addEventListener(ev, ()=>setXP(0));
      optMedia.addEventListener(ev,   ()=>setXP(0));
    });

    // Atalhos de teclado: 1 e 2 abrem os módulos
    window.addEventListener('keydown', (e)=>{
      if(e.key==='1'){ optPlanner.click(); }
      if(e.key==='2'){ optMedia.click(); }
    }, {passive:true});
  </script>
</body>
</html>