From 6f25a15f9b5ce53f624a310334dee7aa250a2342 Mon Sep 17 00:00:00 2001
From: ashley <iamashley@duck.com>
Date: Sat, 11 Oct 2025 12:19:14 +0200
Subject: [PATCH] fix stuff + add stuff

---
 html/studio-landing.ejs | 264 ++++++++++++----------------------------
 1 file changed, 76 insertions(+), 188 deletions(-)
diff --git a/html/studio-landing.ejs b/html/studio-landing.ejs
index f77ebba9..de2ac3fe 100644
--- a/html/studio-landing.ejs
+++ b/html/studio-landing.ejs
@@ -17,200 +17,88 @@
     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>
+ <!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>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width,initial-scale=1">
+<title>Poke Studio</title>
+<meta name="theme-color" content="#111">
+<style>
+:root{
+  --bg:#0d0f12;--fg:#f3f5f7;--muted:#9aa4b2;
+  --brand:#7a5cff;--accent:#00d3a7;
+  --card:#141820;--radius:14px;
+}
+body{
+  margin:0;padding:0;
+  font-family:system-ui, sans-serif;
+  background:linear-gradient(180deg,var(--bg),#11151b);
+  color:var(--fg);display:flex;flex-direction:column;align-items:center;gap:20px;
+}
+header{
+  display:flex;align-items:center;gap:10px;margin-top:20px;
+}
+.logo{
+  width:32px;height:32px;border-radius:10px;
+  background:conic-gradient(from 220deg,var(--brand),var(--accent),var(--brand));
+}
+h1{font-size:1.4rem;margin:0}
+.grid{
+  display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
+  width:90%;max-width:900px;
+}
+.card{
+  background:var(--card);border-radius:var(--radius);
+  border:1px solid #1a2030;padding:16px;box-shadow:0 4px 12px rgba(0,0,0,.3);
+  display:flex;align-items:center;gap:14px;
+}
+.card svg{width:48px;height:48px}
+.card h3{margin:0;font-size:1.2rem}
+.card p{margin:4px 0 0;color:var(--muted)}
+.card a button{
+  margin-top:8px;padding:6px 10px;border:none;border-radius:8px;
+  font-weight:bold;cursor:pointer;background:var(--brand);color:white;
+}
+footer{margin:20px 0;color:var(--muted);font-size:.9rem}
+</style>
 </head>
 <body>
-  <header>
-    <div class="brand">
-      <div class="logo"></div>
-      <h1>Poke Studio</h1>
+<header>
+                <img src="/css/logo-poke.svg?v=5"/>
+  <h1>Poke Studio</h1>
+</header>
+
+<section class="grid">
+  <div class="card">
+    <svg 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>
+      <h3>Poke Piano</h3>
+      <p>Synth piano</p>
+      <a href="/studio/piano"><button>Open</button></a>
     </div>
-    <div class="header-actions">
-     </div>
-  </header>
- 
+  </div>
 
-  <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 class="card">
+    <svg 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>
+      <h3>Poke Drums</h3>
+      <p>8-voice drum synth</p>
+      <a href="/studio/drums"><button>Open</button></a>
     </div>
+  </div>
+</section>
 
-    <!-- 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>
-
-  
-     <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>
+<footer>Poke Studio — all local, private & free</footer>
+</body>
 </html>
