From c60e7d4e1c2257dd7b547706d1ee38fd416003a8 Mon Sep 17 00:00:00 2001
From: ashley <iamashley@duck.com>
Date: Tue, 2 Sep 2025 22:44:22 +0200
Subject: [PATCH] Add html/studio-landing.ejs

---
 html/studio-landing.ejs | 242 ++++++++++++++++++++++++++++++++++++++++
 1 file changed, 242 insertions(+)
 create mode 100644 html/studio-landing.ejs
diff --git a/html/studio-landing.ejs b/html/studio-landing.ejs
new file mode 100644
index 00000000..194823ef
--- /dev/null
+++ b/html/studio-landing.ejs
@@ -0,0 +1,242 @@
+<!--
+
+    This Source Code Form is subject to the terms of the GNU General Public License:
+
+    Copyright (C) 2021-2025 Poke (https://codeberg.org/ashley/poke)
+    
+    This program is free software: you can redistribute it and/or modify
+    it under the terms of the GNU General Public License as published by
+    the Free Software Foundation, either version 3 of the License, or
+    (at your option) any later version.
+
+    This program is distributed in the hope that it will be useful,
+    but WITHOUT ANY WARRANTY; without even the implied warranty of
+    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+    GNU General Public License for more details.
+
+    You should have received a copy of the GNU General Public License
+    along with this program. If not, see https://www.gnu.org/licenses/.
+--->
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>Poke Studio </title>
+  <meta name="theme-color" content="#111111" />
+   <meta content="website" property="og:type">
+    <meta content="PokeStudio" property="og:title">
+    <meta content="Choose any insturment u want! all of the data is on ur computer and we dont track anything!" property="twitter:description">
+       <meta content="https://cdn.glitch.me/d68d17bb-f2c0-4bc3-993f-50902734f652/aa70111e-5bcd-4379-8b23-332a33012b78.image.png?v=1701898829884" property="og:image"  />
+  <meta content="summary_large_image" name="twitter:card">
+   <style>
+ 
+
+    :root{
+      --bg:#0d0f12;--bg-soft:#141820;--fg:#f3f5f7;--muted:#9aa4b2;
+      --brand:#7a5cff;--accent:#00d3a7;--danger:#ff5577;
+      --key-outline:#1a2030;--radius:16px;
+      --shadow:0 14px 36px rgba(0,0,0,.42),0 2px 12px rgba(0,0,0,.26);
+      --glass:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.02));
+    }
+    .light{
+      --bg:#f7f8fb;--bg-soft:#ffffff;--fg:#0e1116;--muted:#4a5568;
+      --brand:#6a5cff;--accent:#00b394;--key-outline:#cfd8e3;
+      --shadow:0 12px 30px rgba(0,0,0,.12),0 2px 10px rgba(0,0,0,.08);
+      --glass:linear-gradient(180deg,rgba(255,255,255,.7),rgba(255,255,255,.6));
+    }
+
+    *{box-sizing:border-box}
+    html,body{height:100%}
+    body{
+      margin:0;
+      overflow:hidden;
+      background:
+        radial-gradient(1400px 700px at 15% -10%, rgba(122,92,255,.18), transparent 60%),
+        radial-gradient(1200px 700px at 100% 0%, rgba(0,211,167,.12), transparent 45%),
+        linear-gradient(180deg,var(--bg),var(--bg-soft));
+      color:var(--fg);
+      font:14px/1.45 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,"Noto Sans",Arial,"Apple Color Emoji","Segoe UI Emoji";
+      display:grid;grid-template-rows:auto 1fr auto;gap:18px;
+    }
+
+    /* Compact header */
+    header{
+      padding:10px 16px 0;
+      display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center;
+    }
+    .brand{display:flex;align-items:center;gap:10px}
+    .logo{width:28px;height:28px;border-radius:10px;background:conic-gradient(from 220deg,var(--brand),var(--accent),var(--brand));box-shadow:0 6px 18px rgba(122,92,255,.28);border:1px solid var(--key-outline)}
+    h1{margin:0;font-size:18px;letter-spacing:.2px}
+    .header-actions{display:flex;gap:8px}
+    button{
+      cursor:pointer;border:none;color:#fff;background:linear-gradient(180deg,var(--brand),#4a3aff);
+      padding:8px 12px;border-radius:12px;font-weight:700;letter-spacing:.2px;box-shadow:var(--shadow)
+    }
+    button.secondary{background:var(--bg-soft);color:var(--fg);border:1px solid var(--key-outline);box-shadow:none}
+    button:active{transform:translateY(1px)}
+    button:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
+
+    /* Hero */
+    .hero{
+      padding:10px 16px 0;
+      display:grid;gap:14px
+    }
+    .tag{
+      display:inline-flex;align-items:center;gap:8px;
+      padding:6px 10px;border-radius:999px;border:1px solid var(--key-outline);
+      background:var(--bg-soft);color:var(--muted);font-weight:600;width:max-content
+    }
+    .hero h2{margin:4px 0 0;font-size:28px;letter-spacing:.2px}
+    .sub{color:var(--muted);max-width:70ch}
+
+    /* Grid of apps */
+    .grid{
+      padding:0 16px 16px;
+      display:grid;gap:12px;grid-template-columns:repeat(12,1fr)
+    }
+    .card{
+      position:relative;overflow:hidden;min-width:0;
+      background:var(--bg-soft);border:1px solid var(--key-outline);border-radius:18px;box-shadow:var(--shadow)
+    }
+    .card::after{
+      content:"";position:absolute;inset:0;pointer-events:none;
+      background:
+        radial-gradient(600px 200px at 10% 0%, rgba(255,255,255,.06), transparent 60%),
+        radial-gradient(500px 160px at 90% 0%, rgba(122,92,255,.12), transparent 50%);
+      mix-blend-mode:overlay
+    }
+    .tile{
+      display:grid;grid-template-columns:84px 1fr auto;gap:14px;align-items:center;padding:14px
+    }
+    .icon{
+      width:64px;height:64px;border-radius:16px;border:1px solid var(--key-outline);display:grid;place-items:center;
+      background:linear-gradient(180deg,#111723,#0f131b)
+    }
+    .tile h3{margin:0 0 2px 0;font-size:18px}
+    .tile p{margin:0;color:var(--muted)}
+    .actions{display:flex;gap:8px}
+    .ghost{background:transparent;color:var(--fg);border:1px solid var(--key-outline)}
+    .tile:hover{transform:translateY(-1px)}
+    .clickall{position:absolute;inset:0}
+    .grid-col-4{grid-column:span 4}
+    .grid-col-12{grid-column:span 12}
+
+    /* Footer */
+    .footer{
+      padding:0 16px 16px;display:grid;grid-template-columns:1fr auto;align-items:center
+    }
+    .chip{padding:8px 12px;border:1px solid var(--key-outline);background:var(--bg-soft);border-radius:999px;color:var(--muted)}
+
+    @media (max-width:1000px){
+      .grid{grid-template-columns:repeat(6,1fr)}
+      .grid-col-4{grid-column:span 6}
+    }
+  </style>
+</head>
+<body>
+  <header>
+    <div class="brand">
+      <div class="logo"></div>
+      <h1>Poke Studio</h1>
+    </div>
+    <div class="header-actions">
+     </div>
+  </header>
+
+  <section class="hero">
+    <span class="tag">Browser Instruments</span>
+    <h2>BE CREATIVE AND PRIVATE :D</h2>
+    <p class="sub">Choose any insturment u want! all of the data is on ur computer and we dont track anything!</p>
+  </section>
+
+  <section class="grid">
+
+    <!-- Piano -->
+    <div class="card grid-col-4">
+      <a class="clickall" href="/studio/piano" aria-label="Open Poke Piano"></a>
+      <div class="tile">
+        <div class="icon" aria-hidden="true">
+          <!-- piano icon -->
+          <svg width="40" height="40" viewBox="0 0 24 24" fill="none">
+            <rect x="3" y="5" width="18" height="14" rx="3" stroke="#7a5cff"/>
+            <rect x="5" y="7" width="3" height="10" fill="#7a5cff"/>
+            <rect x="9" y="7" width="3" height="10" fill="#00d3a7"/>
+            <rect x="13" y="7" width="3" height="10" fill="#7a5cff"/>
+            <rect x="17" y="7" width="2" height="10" fill="#00d3a7"/>
+          </svg>
+        </div>
+        <div>
+          <h3>Poke Piano</h3>
+          <p>Synth piano!</p>
+        </div>
+        <div class="actions">
+          <a href="/studio/piano"><button>Open</button></a>
+          <a href="/studio/piano" target="_blank" rel="noopener"><button class="ghost secondary">New Tab</button></a>
+        </div>
+      </div>
+    </div>
+
+    <!-- Drums -->
+    <div class="card grid-col-4">
+      <a class="clickall" href="/studio/drums" aria-label="Open Poke Drums"></a>
+      <div class="tile">
+        <div class="icon" aria-hidden="true">
+          <!-- drum icon -->
+          <svg width="40" height="40" viewBox="0 0 24 24" fill="none">
+            <ellipse cx="12" cy="7" rx="8" ry="3" stroke="#00d3a7"/>
+            <path d="M4 7v7c0 1.7 3.6 3 8 3s8-1.3 8-3V7" stroke="#7a5cff"/>
+            <path d="M4 10c0 1.7 3.6 3 8 3s8-1.3 8-3" stroke="#00d3a7"/>
+          </svg>
+        </div>
+        <div>
+          <h3>Poke Drums</h3>
+          <p>8-voice drum synth with 16/32-step sequencer!</p>
+        </div>
+        <div class="actions">
+          <a href="/studio/drums"><button>Open</button></a>
+          <a href="/sudio/drums" target="_blank" rel="noopener"><button class="ghost secondary">New Tab</button></a>
+        </div>
+      </div>
+    </div>
+
+    <!-- Strings -->
+    <div class="card grid-col-4">
+      <a class="clickall" href="/studio/strings" aria-label="Open Poke Strings"></a>
+      <div class="tile">
+        <div class="icon" aria-hidden="true">
+          <!-- strings icon -->
+          <svg width="40" height="40" viewBox="0 0 24 24" fill="none">
+            <rect x="5" y="4" width="14" height="16" rx="2" stroke="#7a5cff"/>
+            <path d="M8 4v16M12 4v16M16 4v16" stroke="#00d3a7"/>
+          </svg>
+        </div>
+        <div>
+          <h3>Poke Strings</h3>
+          <p>Guitar, Ukulele, Violin!</p>
+        </div>
+        <div class="actions">
+          <a href="/studio/strings"><button>Open</button></a>
+          <a href="/studio/strings" target="_blank" rel="noopener"><button class="ghost secondary">New Tab</button></a>
+        </div>
+      </div>
+    </div>
+
+     <div class="card grid-col-12" style="padding:14px;">
+      <div style="display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between">
+        <div style="display:grid;gap:6px;min-width:240px">
+          <strong>Tips</strong>
+          <span class="sub">Use a modern browser with hardware acceleration for best performance. Recording uses MediaRecorder.</span>
+        </div>
+
+      </div>
+    </div>
+  </section>
+
+  <section style=" visibility: hidden;" class="footer">
+    <div class="chip">Poke Studio </div>
+    <div class="chip" id="status">Ready</div>
+  </section>
+
+ </body>
+</html>
