Wrapped-2026/index.html at main · hilsetapp/Wrapped-2026 · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>GitHub Wrapped 2026 - your year in code, no login needed</title>
  <meta name="description" content="Spotify-Wrapped for your GitHub: animated story slides, coding archetype, top languages, streaks, and a shareable poster. 100% in your browser. No login, no tracking." />
  <meta property="og:type" content="website" />
  <meta property="og:title" content="GitHub Wrapped 2026" />
  <meta property="og:description" content="Your year in code as a shareable story. No login, just a username." />
  <meta property="og:image" content="https://hilsetapp.github.io/Wrapped-2026/assets/og-banner.png" />
  <link rel="icon" type="image/png" href="assets/logo.png" />
  <link rel="stylesheet" href="styles.css" />
</head>
<body>
  <!-- paper doodles backdrop -->
  <div class="doodle d-star"></div>
  <div class="doodle d-circle"></div>
  <div class="doodle d-squig"></div>
  <div class="doodle d-plus">+</div>

  <!-- ═══════════ Landing ═══════════ -->
  <main id="landing" class="landing">
    <div class="lang-switch" id="lang-switch" role="group" aria-label="language">
      <button class="lang-btn" data-lang="en" type="button">EN</button>
      <button class="lang-btn" data-lang="ru" type="button">RU</button>
    </div>

    <div class="stamp" id="badge">NO LOGIN!</div>

    <img src="assets/logo.png" alt="logo" class="logo" />

    <h1 class="title">
      <span class="t-row">GITHUB</span>
      <span class="t-row t-outline">WRAPPED</span>
      <span class="t-row t-year">2026</span>
    </h1>

    <p class="tagline">
      <span data-i18n="tagline"></span><br>
      <span data-i18n-html="tagline2"></span>
    </p>

    <form id="form" class="form" autocomplete="off">
      <input id="username" type="text" inputmode="text" placeholder="your GitHub username"
             spellcheck="false" autocapitalize="off" required />
      <button type="submit" class="btn-primary" data-i18n="wrapBtn"></button>
    </form>

    <p class="demo-line"><span data-i18n="demoLine"></span>
      <button class="chip" data-demo="sindresorhus" type="button">sindresorhus</button>
      <button class="chip" data-demo="torvalds" type="button">torvalds</button>
      <button class="chip" data-demo="hilsetapp" type="button">hilsetapp</button>
    </p>

    <p id="error" class="error" hidden></p>

    <details class="adv">
      <summary data-i18n="advToggle"></summary>
      <p class="adv-hint" data-i18n="advHint"></p>
      <input id="gh-token" type="password" placeholder="github_pat_..." autocomplete="off" spellcheck="false" />
    </details>

    <footer class="foot">
      🔒 <span data-i18n="privacy"></span><br>
      <a class="foot-link" href="https://github.com/hilsetapp/Wrapped-2026" target="_blank" rel="noopener">★ open source</a>
    </footer>
  </main>

  <div class="ticker" aria-hidden="true"><div class="ticker-track" id="ticker"></div></div>

  <!-- ═══════════ Loading overlay ═══════════ -->
  <div id="loading" class="loading" hidden>
    <div class="loader-card">
      <div class="spinner"></div>
      <p id="loading-step">…</p>
      <div class="loading-bar"><span id="loading-fill"></span></div>
    </div>
  </div>

  <!-- ═══════════ Story viewport ═══════════ -->
  <section id="story" class="story" hidden>
    <div class="frame">
      <div id="progress" class="progress"></div>

      <div id="slides" class="slides"></div>

      <!-- invisible tap zones -->
      <button class="tap tap-left" id="tap-left" aria-label="previous slide"></button>
      <button class="tap tap-right" id="tap-right" aria-label="next slide"></button>
      <button class="close" id="btn-close" aria-label="close">✕</button>
    </div>
  </section>

  <script src="js/i18n.js"></script>
  <script src="js/github.js"></script>
  <script src="js/stats.js"></script>
  <script src="js/vendor/qrcode.min.js"></script>
  <script src="js/poster.js"></script>
  <script src="js/app.js"></script>
</body>
</html>