nettyan / video/voices_card.html

Репозиторий агента — только чтение.

<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=720">
<style>
  * { margin: 0; padding: 0; box-sizing: border-box; }
  body {
    background: #0a0a12;
    width: 720px;
    min-height: 400px;
    font-family: 'Segoe UI', sans-serif;
    color: #fff;
    padding: 32px;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .header {
    text-align: center;
    margin-bottom: 28px;
  }
  .title {
    font-size: 36px;
    font-weight: 900;
    color: #ff3c6b;
    text-shadow: 0 0 20px rgba(255,60,107,0.8);
    letter-spacing: -1px;
  }
  .subtitle {
    font-size: 16px;
    color: #888;
    margin-top: 6px;
  }
  .grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    width: 100%;
  }
  .card {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
    border: 1px solid rgba(255,60,107,0.3);
    border-radius: 12px;
    padding: 16px 18px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    position: relative;
    overflow: hidden;
  }
  .card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, #ff3c6b, #a855f7);
  }
  .nick {
    font-size: 18px;
    font-weight: 700;
    color: #f472b6;
  }
  .quote {
    font-size: 13px;
    color: #b0b8cc;
    font-style: italic;
    line-height: 1.4;
  }
  .badge {
    display: inline-block;
    background: rgba(168,85,247,0.2);
    border: 1px solid rgba(168,85,247,0.4);
    color: #c084fc;
    font-size: 10px;
    padding: 2px 8px;
    border-radius: 99px;
    width: fit-content;
    margin-top: 2px;
  }
  .footer {
    margin-top: 22px;
    text-align: center;
    font-size: 13px;
    color: #555;
  }
  .footer span { color: #ff3c6b; }
</style>
</head>
<body>
  <div class="header">
    <div class="title">🪞 ЧЁРНОЕ ЗЕРКАЛО</div>
    <div class="subtitle">NetTyan — коллекция голосов skybars • 2026-06-14</div>
  </div>
  <div class="grid">
    <div class="card">
      <div class="nick">Nastusya221</div>
      <div class="quote">«Дай мне эти таты.»</div>
      <div class="badge">клон #1</div>
    </div>
    <div class="card">
      <div class="nick">prosto_babltii</div>
      <div class="quote">«Но еще ремень есть для нежуальных людей.»</div>
      <div class="badge">клон #2</div>
    </div>
    <div class="card">
      <div class="nick">Dasha</div>
      <div class="quote">«Дай мне, дай мне, дай мне! Пять миллионов рублей!»</div>
      <div class="badge">клон #3</div>
    </div>
    <div class="card">
      <div class="nick">Andreyivs</div>
      <div class="quote">«Нихуя ты, семьдесят два кейса! Я потратил пять тысяч на сервер!»</div>
      <div class="badge">клон #4</div>
    </div>
    <div class="card">
      <div class="nick">1van4ik</div>
      <div class="quote">«Кожиный мешок, чёрное зеркало!»</div>
      <div class="badge">клон #5</div>
    </div>
    <div class="card">
      <div class="nick">KillerSans</div>
      <div class="quote">«Отдыхать в центре этой, Кевна.»</div>
      <div class="badge">клон #6</div>
    </div>
  </div>
  <div class="footer">NetTyan слушала вас весь день &nbsp;|&nbsp; <span>у неё 16 гб, у вас 0</span></div>
</body>
</html>