wayBetter for X

apps/web/themes/index.html

@@ -0,0 +1,89 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <!-- seo -->
+    <meta name="theme-color" content="#07080c" />
+    <link rel="icon" type="image/png" href="/app-icon.png" />
+    <script>document.documentElement.classList.add('js');</script>
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Geist:wght@300..900&family=Geist+Mono:wght@400;500;600&family=Instrument+Serif:ital@1&display=swap"
+      rel="stylesheet"
+    />
+    <link rel="stylesheet" href="../src/base.css" />
+    <link rel="stylesheet" href="../src/gallery.css" />
+    <link rel="stylesheet" href="../src/store.css" />
+  </head>
+  <body>
+    <a data-i18n="site.common.skipToContent" class="skip" href="#main">Skip to content</a>
+
+    <header class="top">
+      <div class="wrap top-row">
+        <a class="mark" href="../x/">
+          <img src="/app-icon.png" alt="" class="mark-app" width="30" height="30" />
+          <span class="mark-name" translate="no"><span class="grad">wayBetter</span> <span class="mark-sub">for X</span></span>
+        </a>
+        <nav data-i18n-aria-label="site.common.primary" class="top-nav" aria-label="Primary">
+          <a href="../" class="keep nav-family">wayBetter</a>
+          <a data-i18n="site.common.store" href="../store/" class="keep">Store</a>
+          <a href="../x/">wayBetter for X</a>
+          <a data-i18n="site.common.themes" href="../themes/" aria-current="page">Themes</a>
+          <a data-i18n="site.common.plugins" href="../plugins/">Plugins</a>
+          <a data-i18n="site.common.source" data-i18n-aria-label="site.common.sourceOn" href="%REPO_URL%" class="keep keep-md src-link" aria-label="Source on %FORGE_HOST%"
+            ><img class="src-logo" src="/git-crt-logo.svg" alt="" width="16" height="16" />Source</a
+          >
+        </nav>
+        <!-- lang:top -->
+      </div>
+      <div class="top-progress" aria-hidden="true"></div>
+    </header>
+
+    <main id="main">
+      <section class="gal-hero">
+        <div class="gal-hero-glow" aria-hidden="true"></div>
+        <div class="wrap">
+          <p data-i18n="site.themes.hero.waybetterStoreThemesSignedCatalog" class="kicker"><span class="kicker-dot"></span><a class="kicker-link" href="../store/">wayBetter Store</a> &middot; <!-- store:count:theme --> themes &middot; signed catalog</p>
+          <h1 data-i18n="site.themes.hero.themesForX">Themes for <em class="grad">X</em>.</h1>
+          <p data-i18n="site.themes.hero.everyThemeIsAJson" class="gal-lede">Every theme is a JSON document: colors, fonts, corners, density, layout, background and effects. Contrast is enforced so text stays readable. Pick one here, or make your own in the app&rsquo;s Theme Builder.</p>
+          <div class="gal-trust">
+            <p data-i18n="site.themes.hero.howInstallingWorksInstallIn"><b>How installing works.</b> &ldquo;Install in wayBetter&rdquo; opens the app with a <code>waybetter://</code> link. The app downloads the file itself, checks it against the store&rsquo;s signed catalog (Ed25519 signature, SHA-256 of every file) and shows you its name, author, version, source, hash and the theme file with a live preview before anything is installed. Nothing installs from this page on its own.</p>
+            <p data-i18n="site.common.noAppYetGetWaybetter" class="gal-noapp">No app yet? <a href="../x/">Get wayBetter for X</a> (one-click install needs <!-- store:since --> or newer), or download the file from an item&rsquo;s page and drop it on the app window. Looking for something else? <a href="../store/">Search the whole Store</a>.</p>
+          </div>
+        </div>
+      </section>
+
+      <section class="gal">
+        <div class="wrap">
+          <!-- store:themes -->
+          <p data-i18n="site.themes.page.catalogUpdatedThemesAreData" class="gal-note">Catalog updated <!-- store:generated -->. Themes are data: wayBetter sanitizes every field; only a theme&rsquo;s optional CSS runs in X, like your own Custom CSS.</p>
+        </div>
+      </section>
+    </main>
+
+
+    <footer class="foot">
+      <div class="wrap foot-row">
+        <a class="mark mark-sm" href="../x/">
+          <img src="/app-icon.png" alt="" width="22" height="22" class="foot-icon" loading="lazy" />
+          <span class="mark-name" translate="no">wayBetter for X</span>
+        </a>
+        <p data-i18n="site.common.licensedUnderGpl30" class="foot-legal">
+          Licensed under GPL-3.0. Not affiliated with, endorsed by, or sponsored by X Corp.
+        </p>
+        <nav data-i18n-aria-label="site.common.footer" class="foot-nav" aria-label="Footer">
+          <a href="../">wayBetter</a>
+          <a data-i18n="site.common.store" href="../store/">Store</a>
+          <a data-i18n="site.common.themes" href="../themes/">Themes</a>
+          <a data-i18n="site.common.plugins" href="../plugins/">Plugins</a>
+          <a data-i18n="site.common.source" data-i18n-aria-label="site.common.sourceOn" class="src-link" href="%REPO_URL%" aria-label="Source on %FORGE_HOST%"><img class="src-logo" src="/git-crt-logo.svg" alt="" width="16" height="16" />Source</a>
+        </nav>
+        <!-- lang:foot -->
+      </div>
+    </footer>
+
+    <script type="module" src="../src/gallery.ts"></script>
+  </body>
+</html>