Sakurai/poke
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
poke/html/studio-landing.ejs
ashley d4d3193cc4 Update html/studio-landing.ejs
2025-10-11 12:09:16 +02:00

217 lines
8.4 KiB
Plaintext
Raw Blame History

<!--
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="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>
<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>
Reference in New Issue View Git Blame Copy Permalink