fix stuff + add stuff
This commit is contained in:
ashley
parent
d4d3193cc4
commit
6f25a15f9b
@ -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>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user