Restyle to a clean, flat look and rename brand to SCOPENET

- Brand is now SCOPENET everywhere (defaults, UI, installer, docs)
- Launcher: solid backgrounds (no animated orbs/grain), flat Play button
  without gradient/shine/glow, quieter rail with a simple active
  indicator, smaller type scale, Inter as default font, glass off by
  default, restyled sliders
- Panel: same flat treatment; live preview mirrors the new launcher
- New flat scope-reticle logo and app icons
- Calmer default palette
- Fix: lock the shared cargo cache in the Docker build (amd64/arm64 raced)
- Fix: Windows-only clippy lint in sys.rs

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_011ARcGWxLx21FwXJ3yfGriS
This commit is contained in:
Claude committed 2026-09-28 05:30:19 +00:00
1 parent 214aa6ad19
commit 1b1bb984bc
69 files changed
+378 -426

No files matched your search

+1 -1
View File
@@ -4,7 +4,7 @@
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="color-scheme" content="dark" />
<title>ScopeNet Launcher</title>
<title>SCOPENET Launcher</title>
</head>
<body>
<div id="app"></div>
+1 -1
View File
@@ -1,6 +1,6 @@
[package]
name = "scopenet-launcher"
description = "ScopeNet Minecraft launcher"
description = "SCOPENET Minecraft launcher"
version.workspace = true
edition.workspace = true
Binary file not shown.

Before

Width:  |  Height:  |  Size: 15 KiB

After

Width:  |  Height:  |  Size: 7.8 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 35 KiB

After

Width:  |  Height:  |  Size: 16 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.3 KiB

After

Width:  |  Height:  |  Size: 1.5 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 6.1 KiB

After

Width:  |  Height:  |  Size: 3.7 KiB

Binary file not shown.
Binary file not shown.

Before

Width:  |  Height:  |  Size: 51 KiB

After

Width:  |  Height:  |  Size: 29 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 102 KiB

After

Width:  |  Height:  |  Size: 34 KiB

+1 -1
View File
@@ -1 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024"><defs><linearGradient id="g" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="#8b6cff"/><stop offset="1" stop-color="#22d3ee"/></linearGradient><radialGradient id="glow" cx="0.5" cy="0.45" r="0.6"><stop offset="0" stop-color="#8b6cff" stop-opacity="0.35"/><stop offset="1" stop-color="#8b6cff" stop-opacity="0"/></radialGradient></defs><rect x="32" y="32" width="960" height="960" rx="224" fill="#0b0d17"/><rect x="32" y="32" width="960" height="960" rx="224" fill="url(#glow)"/><path d="M512 176 804 344v336L512 848 220 680V344z" fill="none" stroke="url(#g)" stroke-width="72" stroke-linejoin="round"/><path d="M512 176v168M804 344 660 428M220 344l144 84M512 848V680" stroke="url(#g)" stroke-width="40" stroke-linecap="round" opacity="0.45"/><circle cx="512" cy="512" r="112" fill="url(#g)"/></svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024"><rect x="48" y="48" width="928" height="928" rx="208" fill="#16181e"/><circle cx="512" cy="512" r="236" fill="none" stroke="#ecedf1" stroke-width="64"/><circle cx="512" cy="512" r="72" fill="#6d6af5"/><path d="M512 196v120M512 708v120M196 512h120M708 512h120" stroke="#ecedf1" stroke-width="64" stroke-linecap="round"/></svg>

Before

Width:  |  Height:  |  Size: 872 B

After

Width:  |  Height:  |  Size: 390 B

+1 -1
View File
@@ -79,7 +79,7 @@ async fn fetch_manifest(state: &AppState, panel: &str) -> anyhow::Result<Launche
if !resp.status().is_success() {
anyhow::bail!("{panel} returned {}", resp.status());
}
let m: LauncherManifest = resp.json().await.map_err(|_| anyhow::anyhow!("{panel} doesn't look like a ScopeNet panel"))?;
let m: LauncherManifest = resp.json().await.map_err(|_| anyhow::anyhow!("{panel} doesn't look like a SCOPENET panel"))?;
Ok(m)
}
+1 -1
View File
@@ -1,4 +1,4 @@
//! ScopeNet launcher (Tauri shell). The heavy lifting lives in
//! SCOPENET launcher (Tauri shell). The heavy lifting lives in
//! `scopenet-core`; this crate wires it to the UI.
mod accounts;
+3 -3
View File
@@ -1,6 +1,6 @@
{
"$schema": "https://schema.tauri.app/config/2",
"productName": "ScopeNet Launcher",
"productName": "SCOPENET Launcher",
"version": "0.1.0",
"identifier": "net.scopenet.launcher",
"build": {
@@ -14,7 +14,7 @@
"windows": [
{
"label": "main",
"title": "ScopeNet Launcher",
"title": "SCOPENET Launcher",
"width": 1120,
"height": 700,
"minWidth": 960,
@@ -33,7 +33,7 @@
"bundle": {
"active": true,
"targets": ["nsis"],
"publisher": "ScopeNet",
"publisher": "SCOPENET",
"category": "Game",
"shortDescription": "Minecraft launcher",
"longDescription": "A fast, customisable Minecraft launcher connected to your community's admin panel.",
+2 -2
View File
@@ -68,6 +68,6 @@
main { flex: 1; min-width: 0; min-height: 0; position: relative; }
.center { flex: 1; display: grid; place-items: center; color: var(--accent); }
.msg { padding: 2rem; max-width: 28rem; display: flex; flex-direction: column; gap: 0.8rem; color: var(--text); }
.update { position: fixed; top: 3.2rem; left: 50%; transform: translateX(-50%); z-index: 40; display: flex; align-items: center; gap: 0.7rem; padding: 0.45rem 0.5rem 0.45rem 1rem; font-size: 0.87rem; border-radius: 99rem; animation: fade-up 0.3s var(--ease); box-shadow: 0 1rem 2.5rem -1rem rgba(0, 0, 0, 0.6); }
.update :global(svg:first-child) { color: var(--accent-2); }
.update { position: fixed; top: 3.2rem; left: 50%; transform: translateX(-50%); z-index: 40; display: flex; align-items: center; gap: 0.7rem; padding: 0.45rem 0.5rem 0.45rem 1rem; font-size: 0.87rem; border-radius: var(--radius); background: var(--surface); animation: fade 0.2s ease; }
.update :global(svg:first-child) { color: var(--accent); }
</style>
+31 -29
View File
@@ -1,23 +1,23 @@
/* Sizes are in rem so the "UI scale" setting scales everything (1rem = 15px at 100%). */
:root {
--accent: #7c5cff;
--accent-2: #22d3ee;
--bg: #0b0d17;
--surface: #141828;
--text: #eef0ff;
--muted: #8b90b3;
--success: #34d399;
--danger: #f43f5e;
--warn: #fbbf24;
--radius: 14px;
--radius-sm: 9px;
--font: 'Outfit Variable', system-ui, sans-serif;
--accent: #6d6af5;
--accent-2: #8b88f8;
--bg: #0d0e12;
--surface: #16181e;
--text: #ecedf1;
--muted: #8b8f9a;
--success: #3fb97c;
--danger: #e5484d;
--warn: #e2a336;
--radius: 10px;
--radius-sm: 7px;
--font: 'Inter Variable', system-ui, sans-serif;
--mono: 'JetBrains Mono Variable', ui-monospace, monospace;
--line: color-mix(in srgb, var(--text) 8%, transparent);
--line-strong: color-mix(in srgb, var(--text) 14%, transparent);
--panel: color-mix(in srgb, var(--surface) 62%, transparent);
--line: color-mix(in srgb, var(--text) 7%, transparent);
--line-strong: color-mix(in srgb, var(--text) 12%, transparent);
--panel: color-mix(in srgb, var(--surface) 78%, transparent);
--panel-solid: var(--surface);
--blur: blur(18px) saturate(1.3);
--blur: blur(14px);
--ease: cubic-bezier(0.2, 0.8, 0.2, 1);
font-size: 15px;
color-scheme: dark;
@@ -82,23 +82,22 @@ button {
align-items: center;
justify-content: center;
gap: 0.5rem;
font-weight: 560;
font-size: 0.93rem;
transition: background 0.15s, border-color 0.15s, transform 0.1s var(--ease), opacity 0.15s, box-shadow 0.2s;
font-weight: 520;
font-size: 0.9rem;
transition: background 0.15s, border-color 0.15s, opacity 0.15s;
white-space: nowrap;
}
button:hover { background: color-mix(in srgb, var(--text) 11%, transparent); }
button:active { transform: scale(0.98); }
button:active { background: color-mix(in srgb, var(--text) 14%, transparent); }
button:disabled { opacity: 0.45; cursor: not-allowed; transform: none; }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
button.primary {
background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 60%, var(--accent-2)));
background: var(--accent);
border-color: transparent;
color: white;
box-shadow: 0 0.5rem 1.6rem -0.6rem var(--accent);
}
button.primary:hover { filter: brightness(1.1); }
button.primary:hover { background: color-mix(in srgb, var(--accent) 88%, white); }
button.ghost { background: transparent; border-color: transparent; color: color-mix(in srgb, var(--text) 75%, transparent); }
button.ghost:hover { background: color-mix(in srgb, var(--text) 7%, transparent); color: var(--text); }
button.danger { color: color-mix(in srgb, var(--danger) 70%, white); background: color-mix(in srgb, var(--danger) 12%, transparent); border-color: color-mix(in srgb, var(--danger) 30%, transparent); }
@@ -122,7 +121,10 @@ input:focus, select:focus, textarea:focus { outline: none; border-color: var(--a
input::placeholder, textarea::placeholder { color: color-mix(in srgb, var(--muted) 80%, transparent); }
select { appearance: none; padding-right: 2.2rem; background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: calc(100% - 1.15rem) 55%, calc(100% - 0.8rem) 55%; background-size: 0.33rem 0.33rem; background-repeat: no-repeat; }
select option { background: var(--surface); }
input[type='range'] { padding: 0; border: none; background: transparent; accent-color: var(--accent); }
input[type='range'] { -webkit-appearance: none; appearance: none; padding: 0; height: 1.2rem; border: none; background: transparent; cursor: pointer; }
input[type='range']::-webkit-slider-runnable-track { height: 0.25rem; border-radius: 99rem; background: color-mix(in srgb, var(--text) 12%, transparent); }
input[type='range']::-webkit-slider-thumb { -webkit-appearance: none; width: 0.95rem; height: 0.95rem; margin-top: -0.35rem; border-radius: 50%; background: var(--text); border: 3px solid var(--accent); }
input[type='range']:hover, input[type='range']:focus { background: transparent; }
input[type='checkbox'] { width: auto; accent-color: var(--accent); }
textarea { resize: vertical; min-height: 5rem; line-height: 1.5; }
@@ -130,15 +132,15 @@ label.field { display: flex; flex-direction: column; gap: 0.45rem; font-size: 0.
.help { font-size: 0.8rem; color: var(--muted); font-weight: 400; line-height: 1.45; }
.chip {
display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.78rem; font-weight: 620;
padding: 0.28rem 0.7rem; border-radius: 99rem; background: color-mix(in srgb, var(--text) 10%, transparent);
border: 1px solid color-mix(in srgb, var(--text) 12%, transparent); backdrop-filter: var(--blur); white-space: nowrap;
display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.76rem; font-weight: 520;
padding: 0.22rem 0.6rem; border-radius: 0.35rem; background: color-mix(in srgb, var(--text) 7%, transparent);
color: color-mix(in srgb, var(--text) 80%, transparent); white-space: nowrap;
}
.chip.accent { background: color-mix(in srgb, var(--accent) 22%, transparent); border-color: color-mix(in srgb, var(--accent) 40%, transparent); }
.chip.accent { background: color-mix(in srgb, var(--accent) 16%, transparent); }
.segmented { display: inline-flex; padding: 0.2rem; gap: 0.15rem; border-radius: var(--radius-sm); background: color-mix(in srgb, var(--bg) 70%, transparent); border: 1px solid var(--line-strong); }
.segmented button { border: none; background: transparent; padding: 0.45rem 0.9rem; font-size: 0.87rem; color: var(--muted); border-radius: calc(var(--radius-sm) - 2px); }
.segmented button.active { background: color-mix(in srgb, var(--text) 12%, transparent); color: var(--text); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25); }
.segmented button.active { background: color-mix(in srgb, var(--text) 10%, transparent); color: var(--text); }
.col > .segmented { align-self: flex-start; }
.row { display: flex; align-items: center; gap: 0.75rem; }
+13 -27
View File
@@ -1,5 +1,5 @@
<script lang="ts">
// Full-window backdrop: instance banner → admin background → animated gradient.
// Full-window backdrop: instance banner → admin image/video → plain colour.
import { abs, app, selectedInstance } from '../lib/store.svelte';
const b = $derived(app.manifest?.branding);
@@ -7,44 +7,30 @@
const image = $derived(abs(inst?.banner_url) ?? (b?.background.kind === 'image' ? abs(b.background.url) : null));
const video = $derived(!inst?.banner_url && b?.background.kind === 'video' && app.settings?.background_video !== false && !app.running ? abs(b.background.url) : null);
const blur = $derived(b?.background.blur ?? 0);
const dim = $derived((b?.background.dim ?? 45) / 100);
const dim = $derived((b?.background.dim ?? 55) / 100);
let hidden = $state(false);
</script>
<svelte:document onvisibilitychange={() => (hidden = document.hidden)} />
<div class="bg" aria-hidden="true">
{#key image ?? video ?? 'gradient'}
<div class="layer">
{#if video && !hidden}
<video src={video} autoplay muted loop playsinline style:filter="blur({blur}px)"></video>
{:else if image}
<div class="img" style:background-image="url(&quot;{image}&quot;)" style:filter="blur({blur}px)"></div>
{:else}
<div class="gradient"><span class="o1"></span><span class="o2"></span><span class="o3"></span></div>
{/if}
</div>
{/key}
<div class="shade" style:--dim={dim}></div>
<div class="grain"></div>
{#if video && !hidden}
{#key video}<video src={video} autoplay muted loop playsinline style:filter="blur({blur}px)"></video>{/key}
<div class="shade" style:--dim={dim}></div>
{:else if image}
{#key image}<div class="img" style:background-image="url(&quot;{image}&quot;)" style:filter="blur({blur}px)"></div>{/key}
<div class="shade" style:--dim={dim}></div>
{/if}
</div>
<style>
.bg { position: fixed; inset: 0; z-index: 0; overflow: hidden; background: var(--bg); }
.layer { position: absolute; inset: 0; animation: fade 0.6s ease; }
video, .img { position: absolute; inset: -2rem; width: calc(100% + 4rem); height: calc(100% + 4rem); object-fit: cover; background-size: cover; background-position: center; }
.gradient { position: absolute; inset: 0; }
.gradient span { position: absolute; border-radius: 50%; filter: blur(5rem); opacity: 0.55; will-change: transform; }
.o1 { width: 55vw; height: 55vw; right: -12vw; top: -22vw; background: var(--accent); animation: drift 22s ease-in-out infinite alternate; }
.o2 { width: 45vw; height: 45vw; left: -10vw; bottom: -25vw; background: var(--accent-2); opacity: 0.3 !important; animation: drift 28s ease-in-out infinite alternate-reverse; }
.o3 { width: 30vw; height: 30vw; left: 35vw; top: 30vh; background: color-mix(in srgb, var(--accent) 50%, var(--accent-2)); opacity: 0.18 !important; animation: drift 34s ease-in-out infinite alternate; }
@keyframes drift { to { transform: translate(-6vw, 5vh) scale(1.15); } }
video, .img { position: absolute; inset: -1.5rem; width: calc(100% + 3rem); height: calc(100% + 3rem); object-fit: cover; background-size: cover; background-position: center; animation: fade 0.4s ease; }
/* Keep text readable: darken, strongest on the left where the title sits. */
.shade {
position: absolute; inset: 0;
background:
linear-gradient(90deg, color-mix(in srgb, var(--bg) calc(var(--dim) * 100% + 30%), transparent) 0%, color-mix(in srgb, var(--bg) calc(var(--dim) * 100%), transparent) 45%, transparent 80%),
linear-gradient(0deg, color-mix(in srgb, var(--bg) 85%, transparent) 0%, transparent 45%),
color-mix(in srgb, var(--bg) calc(var(--dim) * 60%), transparent);
linear-gradient(90deg, var(--bg) 0%, color-mix(in srgb, var(--bg) calc(var(--dim) * 100%), transparent) 55%, color-mix(in srgb, var(--bg) calc(var(--dim) * 70%), transparent) 100%),
linear-gradient(0deg, var(--bg) 0%, transparent 40%);
}
.grain { position: absolute; inset: 0; opacity: 0.035; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
</style>
+1 -1
View File
@@ -38,7 +38,7 @@
</div>
<style>
.console { position: absolute; left: 1rem; right: 1rem; bottom: 1rem; height: 42%; display: flex; flex-direction: column; z-index: 25; background: color-mix(in srgb, var(--bg) 97%, transparent); box-shadow: 0 -1rem 3rem -1rem rgba(0, 0, 0, 0.6); animation: fade-up 0.25s var(--ease); overflow: hidden; }
.console { position: absolute; left: 1rem; right: 1rem; bottom: 1rem; height: 42%; display: flex; flex-direction: column; z-index: 25; background: var(--bg); border-color: var(--line-strong); animation: fade 0.15s ease; overflow: hidden; }
header { display: flex; align-items: center; gap: 0.6rem; padding: 0.5rem 0.6rem 0.5rem 1rem; border-bottom: 1px solid var(--line); font-size: 0.88rem; }
.search { display: flex; align-items: center; gap: 0.3rem; color: var(--muted); }
.search input { width: 10rem; padding: 0.3rem 0.5rem; font-size: 0.8rem; }
+3 -3
View File
@@ -21,10 +21,10 @@
{/if}
<style>
.backdrop { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: 1.5rem; background: color-mix(in srgb, var(--bg) 60%, transparent); backdrop-filter: blur(6px); animation: fade 0.15s ease; }
.modal { width: 100%; max-height: calc(100vh - 4rem); overflow: auto; background: color-mix(in srgb, var(--surface) 92%, transparent); box-shadow: 0 2rem 5rem -1rem rgba(0, 0, 0, 0.7); animation: pop 0.22s var(--ease); }
.backdrop { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: 1.5rem; background: color-mix(in srgb, var(--bg) 70%, transparent); animation: fade 0.12s ease; }
.modal { width: 100%; max-height: calc(100vh - 4rem); overflow: auto; background: var(--surface); border-color: var(--line-strong); box-shadow: 0 1rem 3rem -1rem rgba(0, 0, 0, 0.5); animation: pop 0.15s ease; }
header { display: flex; align-items: center; justify-content: space-between; padding: 1.1rem 1.25rem 0; }
.body { padding: 1rem 1.25rem 1.25rem; display: flex; flex-direction: column; gap: 0.9rem; }
footer { display: flex; justify-content: flex-end; gap: 0.6rem; padding: 0.9rem 1.25rem; border-top: 1px solid var(--line); }
@keyframes pop { from { opacity: 0; transform: translateY(0.8rem) scale(0.97); } }
@keyframes pop { from { opacity: 0; transform: translateY(0.3rem); } }
</style>
+11 -11
View File
@@ -1,5 +1,5 @@
<script lang="ts">
import { Newspaper, Pin, ArrowUpRight } from '@lucide/svelte';
import { Pin, ArrowUpRight } from '@lucide/svelte';
import { abs } from '../lib/store.svelte';
import { niceDate } from '../lib/format';
import { openUrl } from '../lib/tauri';
@@ -10,10 +10,10 @@
</script>
<section class="news">
<h4 class="head"><Newspaper size={14} /> Latest news</h4>
<h4 class="head">News</h4>
<div class="list">
{#each sorted as n, i (n.id)}
<article class="card glass" style:animation-delay="{i * 60}ms" class:link={!!n.link}>
{#each sorted as n (n.id)}
<article class="card glass" class:link={!!n.link}>
{#if n.image_url}<img src={abs(n.image_url)} alt="" loading="lazy" />{/if}
<div class="body">
<div class="meta">
@@ -35,16 +35,16 @@
<style>
.news { display: flex; flex-direction: column; min-height: 0; gap: 0.7rem; }
.head { display: flex; align-items: center; gap: 0.45rem; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--muted); font-weight: 750; padding-left: 0.2rem; }
.list { display: flex; flex-direction: column; gap: 0.7rem; overflow-y: auto; padding-right: 0.3rem; min-height: 0; mask-image: linear-gradient(180deg, black 85%, transparent); padding-bottom: 2rem; }
.card { overflow: hidden; flex-shrink: 0; animation: fade-up 0.35s var(--ease) both; transition: border-color 0.2s, transform 0.2s var(--ease); }
.head { display: flex; align-items: center; gap: 0.45rem; font-size: 0.75rem; color: var(--muted); font-weight: 560; padding-left: 0.1rem; }
.list { display: flex; flex-direction: column; gap: 0.7rem; overflow-y: auto; padding-right: 0.3rem; min-height: 0; padding-bottom: 1rem; }
.card { overflow: hidden; flex-shrink: 0; background: var(--surface); transition: border-color 0.15s; }
.card:hover { border-color: var(--line-strong); }
.card img { width: 100%; aspect-ratio: 16 / 7; object-fit: cover; display: block; }
.body { padding: 0.85rem 1rem 0.9rem; display: flex; flex-direction: column; gap: 0.35rem; }
.meta { display: flex; align-items: center; gap: 0.4rem; color: var(--accent); }
.tag { font-size: 0.66rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.1em; color: var(--accent); }
h3 { font-size: 1rem; font-weight: 680; line-height: 1.3; }
p { font-size: 0.84rem; line-height: 1.5; color: color-mix(in srgb, var(--text) 68%, transparent); display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.meta { display: flex; align-items: center; gap: 0.4rem; color: var(--muted); }
.tag { font-size: 0.72rem; font-weight: 560; color: var(--accent); }
h3 { font-size: 0.95rem; font-weight: 600; line-height: 1.35; }
p { font-size: 0.83rem; line-height: 1.55; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.more { align-self: flex-start; padding-left: 0; color: var(--accent); margin-top: 0.1rem; }
.more:hover { background: transparent; color: var(--text); }
</style>
+20 -25
View File
@@ -40,13 +40,13 @@
{:else if running}
<button class="play running" onclick={kill} title="Force-close Minecraft">
<span class="pulse"></span>
<span class="lbl">PLAYING</span>
<span class="lbl">Playing</span>
<span class="stop"><Square size={13} fill="currentColor" /> Stop</span>
</button>
{:else}
<button class="play" onclick={() => play(inst.id)} disabled={otherRunning || noAccount} title={noAccount ? 'Sign in first' : otherRunning ? 'Another instance is running' : 'Ctrl + Enter'}>
<Play size={22} fill="currentColor" />
<span class="lbl">PLAY</span>
<Play size={18} fill="currentColor" />
<span class="lbl">Play</span>
</button>
{/if}
{#if mine && l.state === 'error'}
@@ -59,33 +59,28 @@
</div>
<style>
.wrap { display: flex; flex-direction: column; align-items: flex-start; gap: 0.7rem; }
.wrap { display: flex; flex-direction: column; align-items: flex-start; gap: 0.6rem; }
.play {
position: relative; overflow: hidden; height: 4.2rem; min-width: 19rem; padding: 0 2.6rem; border: none; border-radius: var(--radius);
background: linear-gradient(120deg, var(--accent), var(--accent-2)); color: white; font-size: 1.35rem; font-weight: 800; letter-spacing: 0.12em;
box-shadow: 0 1rem 2.6rem -0.9rem var(--accent), inset 0 1px 0 rgba(255, 255, 255, 0.25); gap: 0.8rem;
transition: transform 0.2s var(--ease), box-shadow 0.25s, filter 0.2s;
height: 3.3rem; min-width: 14rem; padding: 0 2rem; border: none; border-radius: var(--radius);
background: var(--accent); color: white; font-size: 1.05rem; font-weight: 600; letter-spacing: 0.02em; gap: 0.65rem;
}
.play::before { content: ''; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, 0.28) 50%, transparent 70%); transform: translateX(-100%); transition: transform 0.7s var(--ease); }
.play:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 1.4rem 3rem -0.9rem var(--accent), inset 0 1px 0 rgba(255, 255, 255, 0.3); filter: brightness(1.05); }
.play:hover:not(:disabled)::before { transform: translateX(100%); }
.play:active:not(:disabled) { transform: translateY(0) scale(0.985); }
.play:disabled { filter: grayscale(0.7) brightness(0.7); }
.play:hover:not(:disabled) { background: color-mix(in srgb, var(--accent) 88%, white); }
.play:active:not(:disabled) { background: color-mix(in srgb, var(--accent) 85%, black); }
.play:disabled { background: color-mix(in srgb, var(--text) 10%, transparent); color: var(--muted); }
.lbl { position: relative; }
.running { background: linear-gradient(120deg, color-mix(in srgb, var(--success) 70%, var(--bg)), color-mix(in srgb, var(--success) 45%, var(--accent-2))); box-shadow: 0 1rem 2.6rem -1rem var(--success); padding: 0 1.6rem 0 2rem; }
.pulse { width: 0.7rem; height: 0.7rem; border-radius: 50%; background: white; box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7); animation: ping 1.6s infinite; }
@keyframes ping { 70% { box-shadow: 0 0 0 0.7rem rgba(255, 255, 255, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); } }
.stop { font-size: 0.78rem; letter-spacing: 0.04em; font-weight: 650; display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.35rem 0.7rem; border-radius: 99rem; background: rgba(0, 0, 0, 0.2); opacity: 0.85; }
.running:hover .stop { background: rgba(0, 0, 0, 0.35); opacity: 1; }
.progress { width: 28rem; max-width: 100%; padding: 0.95rem 1.1rem 0.85rem; display: flex; flex-direction: column; gap: 0.6rem; animation: fade-up 0.25s var(--ease); }
.running { background: color-mix(in srgb, var(--success) 16%, var(--surface)); color: var(--text); border: 1px solid color-mix(in srgb, var(--success) 35%, transparent); padding: 0 0.6rem 0 1.4rem; }
.running:hover:not(:disabled) { background: color-mix(in srgb, var(--success) 22%, var(--surface)); }
.pulse { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--success); }
.stop { font-size: 0.8rem; font-weight: 520; letter-spacing: 0; display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.4rem 0.7rem; border-radius: var(--radius-sm); background: color-mix(in srgb, var(--text) 8%, transparent); color: color-mix(in srgb, var(--text) 80%, transparent); margin-left: 0.6rem; }
.progress { width: 26rem; max-width: 100%; padding: 0.85rem 1rem 0.8rem; display: flex; flex-direction: column; gap: 0.55rem; background: var(--surface); }
.top { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.stage { display: flex; align-items: center; gap: 0.5rem; font-weight: 620; font-size: 0.95rem; }
.bar { height: 0.5rem; border-radius: 99rem; background: color-mix(in srgb, var(--text) 10%, transparent); overflow: hidden; position: relative; }
.bar span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--accent), var(--accent-2)); transition: width 0.2s linear; box-shadow: 0 0 1rem var(--accent); }
.bar.indeterminate span { width: 35% !important; animation: slide 1.2s ease-in-out infinite; }
@keyframes slide { from { transform: translateX(-100%); } to { transform: translateX(300%); } }
.stage { display: flex; align-items: center; gap: 0.5rem; font-weight: 560; font-size: 0.9rem; }
.bar { height: 0.3rem; border-radius: 99rem; background: color-mix(in srgb, var(--text) 9%, transparent); overflow: hidden; position: relative; }
.bar span { display: block; height: 100%; border-radius: inherit; background: var(--accent); transition: width 0.2s linear; }
.bar.indeterminate span { width: 30% !important; animation: slide 1.3s ease-in-out infinite; }
@keyframes slide { from { transform: translateX(-100%); } to { transform: translateX(340%); } }
.meta { display: flex; justify-content: space-between; gap: 1rem; font-variant-numeric: tabular-nums; }
.error { display: flex; align-items: center; gap: 0.7rem; padding: 0.7rem 0.9rem; max-width: 34rem; font-size: 0.87rem; border-color: color-mix(in srgb, var(--danger) 35%, transparent); background: color-mix(in srgb, var(--danger) 14%, var(--panel)); line-height: 1.4; }
.error { display: flex; align-items: center; gap: 0.7rem; padding: 0.65rem 0.8rem; max-width: 34rem; font-size: 0.85rem; background: color-mix(in srgb, var(--danger) 10%, var(--surface)); border-color: color-mix(in srgb, var(--danger) 30%, transparent); line-height: 1.4; }
.error :global(svg) { color: var(--danger); flex-shrink: 0; }
.error span { flex: 1; }
</style>
+15 -14
View File
@@ -59,30 +59,31 @@
</nav>
<style>
.rail { width: 4.8rem; margin: 0 0 0.8rem 0.8rem; display: flex; flex-direction: column; align-items: center; padding: 0.8rem 0; gap: 0.5rem; border-radius: calc(var(--radius) + 4px); position: relative; z-index: 20; flex-shrink: 0; }
.rail { width: 4.4rem; display: flex; flex-direction: column; align-items: center; padding: 0.6rem 0 0.8rem; gap: 0.5rem; border: none; border-right: 1px solid var(--line); border-radius: 0; background: color-mix(in srgb, var(--surface) 70%, transparent); position: relative; z-index: 20; flex-shrink: 0; }
.list { display: flex; flex-direction: column; gap: 0.6rem; align-items: center; overflow-y: auto; overflow-x: visible; flex: 1; width: 100%; padding: 0.2rem 0; scrollbar-width: none; }
.inst {
width: 3.1rem; height: 3.1rem; padding: 0; border-radius: var(--radius); position: relative; flex-shrink: 0; overflow: visible;
background: color-mix(in srgb, var(--surface) 80%, var(--text) 6%); border-color: var(--line); font-weight: 750; font-size: 0.95rem;
transition: transform 0.2s var(--ease), box-shadow 0.2s, border-radius 0.2s;
width: 2.9rem; height: 2.9rem; padding: 0; border-radius: var(--radius); position: relative; flex-shrink: 0; overflow: visible;
background: color-mix(in srgb, var(--text) 6%, transparent); border-color: transparent; font-weight: 600; font-size: 0.85rem;
color: color-mix(in srgb, var(--text) 75%, transparent);
}
.inst img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.inst:hover { transform: translateY(-1px); border-radius: calc(var(--radius) * 0.75); }
.inst.active { background: linear-gradient(135deg, var(--accent), var(--accent-2)); border-color: transparent; box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent), 0 0.5rem 1.5rem -0.5rem var(--accent); color: white; }
.inst.running::after { content: ''; position: absolute; right: -0.2rem; bottom: -0.2rem; width: 0.8rem; height: 0.8rem; border-radius: 50%; background: var(--success); border: 2px solid var(--surface); box-shadow: 0 0 0.6rem var(--success); }
.tip { position: fixed; left: 6.4rem; transform: translateY(0); font-style: normal; font-size: 0.82rem; font-weight: 600; white-space: nowrap; padding: 0.35rem 0.7rem; border-radius: 0.5rem; background: var(--surface); border: 1px solid var(--line-strong); opacity: 0; pointer-events: none; transition: opacity 0.15s; box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.4); z-index: 50; color: var(--text); }
.inst:hover { background: color-mix(in srgb, var(--text) 10%, transparent); color: var(--text); }
.inst.active { background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--text); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 55%, transparent); }
.inst.active::before { content: ''; position: absolute; left: -0.75rem; top: 0.7rem; bottom: 0.7rem; width: 3px; border-radius: 0 3px 3px 0; background: var(--accent); }
.inst.running::after { content: ''; position: absolute; right: -0.2rem; bottom: -0.2rem; width: 0.8rem; height: 0.8rem; border-radius: 50%; background: var(--success); border: 2px solid var(--bg); }
.tip { position: fixed; left: 5rem; transform: translateY(0); font-style: normal; font-size: 0.82rem; font-weight: 600; white-space: nowrap; padding: 0.35rem 0.7rem; border-radius: 0.5rem; background: var(--surface); border: 1px solid var(--line-strong); opacity: 0; pointer-events: none; transition: opacity 0.15s; z-index: 50; color: var(--text); }
.inst:hover .tip { opacity: 1; }
.bottom { display: flex; flex-direction: column; align-items: center; gap: 0.35rem; }
.big { width: 2.8rem; height: 2.8rem; position: relative; }
.big.on { color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); }
.dot { position: absolute; top: 0.55rem; right: 0.55rem; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--accent-2); box-shadow: 0 0 0.5rem var(--accent-2); }
.big { width: 2.6rem; height: 2.6rem; position: relative; }
.big.on { color: var(--text); background: color-mix(in srgb, var(--text) 9%, transparent); }
.dot { position: absolute; top: 0.55rem; right: 0.55rem; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--accent); }
.account { position: relative; margin-top: 0.3rem; }
.me { padding: 0.15rem; border-radius: 30%; background: transparent; border-color: transparent; }
.me:hover { border-color: var(--accent); background: transparent; }
.menu { position: absolute; left: calc(100% + 0.9rem); bottom: 0; width: 17rem; padding: 0.6rem; display: flex; flex-direction: column; gap: 0.25rem; background: color-mix(in srgb, var(--surface) 99%, var(--text) 1%); backdrop-filter: none; box-shadow: 0 1.5rem 4rem -1rem rgba(0, 0, 0, 0.7); animation: fade-up 0.18s var(--ease); z-index: 60; }
.me:hover { border-color: var(--line-strong); background: transparent; }
.menu { position: absolute; left: calc(100% + 0.9rem); bottom: 0; width: 17rem; padding: 0.6rem; display: flex; flex-direction: column; gap: 0.25rem; background: var(--surface); backdrop-filter: none; border: 1px solid var(--line-strong); box-shadow: 0 0.8rem 2rem -1rem rgba(0, 0, 0, 0.6); animation: fade 0.12s ease; z-index: 60; }
.head { padding: 0.2rem 0.5rem 0.4rem; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700; }
.acc { display: flex; align-items: center; gap: 0.2rem; border-radius: var(--radius-sm); }
.acc.current { background: color-mix(in srgb, var(--accent) 12%, transparent); }
.acc.current { background: color-mix(in srgb, var(--text) 6%, transparent); }
.pick { flex: 1; justify-content: flex-start; background: transparent; border-color: transparent; padding: 0.45rem 0.5rem; gap: 0.65rem; min-width: 0; }
.pick :global(svg) { color: var(--accent); }
.who { display: flex; flex-direction: column; align-items: flex-start; flex: 1; min-width: 0; }
+10 -11
View File
@@ -61,26 +61,25 @@
</div>
<style>
.server { display: flex; align-items: center; gap: 0.85rem; padding: 0.7rem 1rem 0.7rem 0.7rem; min-width: 20rem; max-width: 30rem; }
.fav { width: 2.6rem; height: 2.6rem; border-radius: calc(var(--radius-sm) - 2px); image-rendering: pixelated; flex-shrink: 0; }
.server { display: flex; align-items: center; gap: 0.75rem; padding: 0.5rem 0.9rem 0.5rem 0.5rem; min-width: 18rem; max-width: 28rem; height: 2.75rem; background: var(--surface); }
.fav { width: 1.8rem; height: 1.8rem; border-radius: calc(var(--radius-sm) - 2px); image-rendering: pixelated; flex-shrink: 0; }
.ph { background: color-mix(in srgb, var(--text) 8%, transparent); }
.ph.on { background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 60%, transparent), color-mix(in srgb, var(--accent-2) 60%, transparent)); }
.info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.2rem; }
.ph.on { background: color-mix(in srgb, var(--accent) 30%, transparent); }
.info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.05rem; }
.name { gap: 0.5rem; }
.name strong { font-size: 0.92rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.state { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); display: inline-flex; align-items: center; gap: 0.3rem; }
.name strong { font-size: 0.85rem; font-weight: 560; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.state { font-size: 0.72rem; font-weight: 520; color: var(--muted); display: inline-flex; align-items: center; gap: 0.3rem; }
.state::before { content: ''; width: 0.45rem; height: 0.45rem; border-radius: 50%; background: currentColor; }
.state.online { color: var(--success); }
.state.online::before { box-shadow: 0 0 0.5rem var(--success); }
.state.off { color: var(--danger); }
.motd { font-size: 0.8rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: color-mix(in srgb, var(--text) 75%, transparent); }
.state.off { color: var(--danger); }
.motd { font-size: 0.75rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: color-mix(in srgb, var(--text) 75%, transparent); }
.motd .b { font-weight: 700; }
.motd .i { font-style: italic; }
.addr { all: unset; cursor: pointer; font-size: 0.8rem; color: var(--muted); display: inline-flex; align-items: center; gap: 0.35rem; font-family: var(--mono); }
.addr:hover { color: var(--text); }
.stats { display: flex; flex-direction: column; align-items: flex-end; gap: 0.2rem; font-size: 0.8rem; font-variant-numeric: tabular-nums; }
.stats { display: flex; flex-direction: column; align-items: flex-end; gap: 0.05rem; font-size: 0.78rem; font-variant-numeric: tabular-nums; }
.players { display: inline-flex; align-items: center; gap: 0.3rem; }
.players :global(svg) { color: var(--success); }
.players :global(svg) { color: var(--muted); }
.ping { display: inline-flex; align-items: center; gap: 0.35rem; color: var(--muted); font-size: 0.72rem; }
.sig { display: inline-flex; align-items: flex-end; gap: 0.1rem; height: 0.7rem; }
.sig i { width: 0.18rem; background: color-mix(in srgb, var(--text) 20%, transparent); border-radius: 1px; }
+4 -4
View File
@@ -147,12 +147,12 @@
.inp { position: relative; }
.inp .ic { position: absolute; left: 0.8rem; top: 50%; transform: translateY(-50%); color: var(--muted); display: flex; }
.inp input { padding-left: 2.4rem; }
.big { padding: 0.85rem; font-size: 1rem; }
.ms { background: #2f2f2f; box-shadow: none; }
.ms:hover { background: #3a3a3a; }
.big { padding: 0.75rem; font-size: 0.95rem; }
.ms { background: color-mix(in srgb, var(--text) 8%, transparent); border: 1px solid var(--line-strong); color: var(--text); }
.ms:hover { background: color-mix(in srgb, var(--text) 12%, transparent); }
.switch { align-self: center; color: var(--muted); }
.code { display: flex; flex-direction: column; align-items: center; gap: 0.8rem; text-align: center; padding: 0.5rem 0; }
.usercode { font-family: var(--mono); font-size: 1.7rem; letter-spacing: 0.15em; padding: 0.7rem 1.4rem; font-weight: 700; border-color: color-mix(in srgb, var(--accent) 50%, transparent); background: color-mix(in srgb, var(--accent) 12%, transparent); }
.usercode { font-family: var(--mono); font-size: 1.5rem; letter-spacing: 0.12em; padding: 0.6rem 1.2rem; font-weight: 600; }
.wait { gap: 0.4rem; }
.error { font-size: 0.87rem; padding: 0.7rem 0.9rem; border-radius: var(--radius-sm); color: color-mix(in srgb, var(--danger) 60%, white); background: color-mix(in srgb, var(--danger) 12%, transparent); border: 1px solid color-mix(in srgb, var(--danger) 30%, transparent); }
.notice { display: flex; gap: 0.8rem; align-items: flex-start; padding: 1rem; border-radius: var(--radius-sm); background: color-mix(in srgb, var(--success) 12%, transparent); }
+3 -2
View File
@@ -25,9 +25,10 @@
<style>
header { height: 2.6rem; display: flex; align-items: center; justify-content: space-between; padding-left: 1rem; position: relative; z-index: 30; flex-shrink: 0; }
.brand { display: flex; align-items: center; gap: 0.6rem; font-weight: 650; font-size: 0.9rem; pointer-events: none; }
.brand { display: flex; align-items: center; gap: 0.6rem; font-weight: 650; font-size: 0.82rem; letter-spacing: 0.08em; pointer-events: none; }
.brand img { height: 1.3rem; border-radius: 0.3rem; }
.mark { width: 0.95rem; height: 0.95rem; border-radius: 0.3rem; background: linear-gradient(135deg, var(--accent), var(--accent-2)); box-shadow: 0 0 0.8rem var(--accent); }
.mark { width: 0.85rem; height: 0.85rem; border-radius: 50%; border: 2px solid var(--accent); position: relative; }
.mark::after { content: ''; position: absolute; inset: 0.17rem; border-radius: 50%; background: var(--accent); }
.offline { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.72rem; color: var(--warn); background: color-mix(in srgb, var(--warn) 14%, transparent); padding: 0.15rem 0.5rem; border-radius: 99rem; pointer-events: auto; }
.controls { display: flex; height: 100%; }
.ctl { height: 100%; width: 3rem; border: none; border-radius: 0; background: transparent; color: color-mix(in srgb, var(--text) 70%, transparent); padding: 0; }
+1 -1
View File
@@ -14,7 +14,7 @@
<style>
.toasts { position: fixed; bottom: 1.25rem; right: 1.25rem; z-index: 100; display: flex; flex-direction: column; gap: 0.6rem; max-width: 26rem; }
.toast { display: flex; gap: 0.6rem; align-items: flex-start; padding: 0.75rem 1rem; font-size: 0.88rem; line-height: 1.4; background: color-mix(in srgb, var(--surface) 90%, transparent); box-shadow: 0 1rem 3rem -1rem rgba(0, 0, 0, 0.6); animation: fade-up 0.25s var(--ease); }
.toast { display: flex; gap: 0.6rem; align-items: flex-start; padding: 0.75rem 1rem; font-size: 0.88rem; line-height: 1.4; background: var(--surface); border-color: var(--line-strong); box-shadow: 0 0.6rem 1.5rem -0.8rem rgba(0, 0, 0, 0.5); animation: fade 0.15s ease; }
.toast :global(svg) { flex-shrink: 0; margin-top: 0.1rem; }
.ok :global(svg) { color: var(--success); }
.error :global(svg) { color: var(--danger); }
+9 -9
View File
@@ -39,16 +39,16 @@ const manifest: Manifest = {
user: null,
auth: { panel_accounts: true, registration: 'approval', microsoft: true, microsoft_client_id: 'demo', offline_local: true },
branding: {
name: 'ScopeNet',
name: 'SCOPENET',
tagline: 'Your worlds, one click away.',
logo_url: null,
icon_url: null,
background: { kind: 'gradient', url: null, blur: 0, dim: 45 },
colors: { accent: '#7c5cff', accent_2: '#22d3ee', background: '#0b0d17', surface: '#141828', text: '#eef0ff', muted: '#8b90b3', success: '#34d399', danger: '#f43f5e' },
font: 'Outfit',
radius: 14,
glass: true,
version_label: 'ScopeNet',
background: { kind: 'gradient', url: null, blur: 0, dim: 55 },
colors: { accent: '#6d6af5', accent_2: '#8b88f8', background: '#0d0e12', surface: '#16181e', text: '#ecedf1', muted: '#8b8f9a', success: '#3fb97c', danger: '#e5484d' },
font: 'Inter',
radius: 10,
glass: false,
version_label: 'SCOPENET',
news: [
{ id: '1', title: 'Season 4 is live!', body: 'A brand new world with custom terrain, player shops and weekly events. Join now and claim your spot before the land rush.', image_url: null, link: 'https://example.com', date: '2026-09-26', pinned: true, tag: 'Update' },
{ id: '2', title: 'Build contest: Autumn Castles', body: 'Submit your best castle build on the Creative server by October 10th. Top three win VIP for a month.', image_url: null, link: null, date: '2026-09-21', pinned: false, tag: 'Event' },
@@ -63,7 +63,7 @@ const manifest: Manifest = {
custom_css: '',
},
instances: [
{ id: 'survival-smp', name: 'Survival SMP', description: 'Our main survival world — season 4. Claims, shops & weekend events.', icon_url: null, banner_url: null, mc_version: '1.21.1', loader: 'fabric', loader_version: '0.16.9', revision: 3, server: { name: 'ScopeNet SMP', address: 'play.scopenet.gg', port: 25565, auto_join: true, inject: true }, memory: { min_mb: 2048, max_mb: 6144 }, jvm_args: '', featured: true, source_label: 'Modrinth · Fabulously Optimized 6.2', file_count: 48, total_size: 184_000_000 },
{ id: 'survival-smp', name: 'Survival SMP', description: 'Our main survival world — season 4. Claims, shops & weekend events.', icon_url: null, banner_url: null, mc_version: '1.21.1', loader: 'fabric', loader_version: '0.16.9', revision: 3, server: { name: 'SCOPENET SMP', address: 'play.scopenet.gg', port: 25565, auto_join: true, inject: true }, memory: { min_mb: 2048, max_mb: 6144 }, jvm_args: '', featured: true, source_label: 'Modrinth · Fabulously Optimized 6.2', file_count: 48, total_size: 184_000_000 },
{ id: 'creative', name: 'Creative Build', description: 'Plots, WorldEdit and weekly build contests.', icon_url: null, banner_url: null, mc_version: '1.20.1', loader: 'vanilla', loader_version: null, revision: 1, server: { name: 'Creative', address: 'creative.scopenet.gg', port: 25565, auto_join: false, inject: true }, memory: { min_mb: 1024, max_mb: 4096 }, jvm_args: '', featured: false, source_label: 'Minecraft 1.20.1', file_count: 0, total_size: 0 },
{ id: 'modded', name: 'Create: Above & Beyond', description: 'Factory building with Create and friends.', icon_url: null, banner_url: null, mc_version: '1.20.1', loader: 'forge', loader_version: '1.20.1-47.3.0', revision: 2, server: null, memory: { min_mb: 4096, max_mb: 8192 }, jvm_args: '', featured: false, source_label: 'CurseForge · Create: Above & Beyond 1.4', file_count: 212, total_size: 612_000_000 },
],
@@ -152,7 +152,7 @@ export async function mockInvoke(cmd: string, args: Record<string, any>): Promis
return null;
case 'ping_server':
await sleep(200);
return { online: true, version: 'Paper 1.21.1', players_online: 42, players_max: 100, sample: ['Notch', 'jeb_', 'Dinnerbone'], motd: '§b§lScopeNet §r§7» §fSeason 4 is live!', favicon: null, latency_ms: 23 };
return { online: true, version: 'Paper 1.21.1', players_online: 42, players_max: 100, sample: ['Notch', 'jeb_', 'Dinnerbone'], motd: '§b§lSCOPENET §r§7» §fSeason 4 is live!', favicon: null, latency_ms: 23 };
case 'instance_local':
return { installed: args.instanceId !== 'modded', revision: 3, size: 1_240_000_000 };
case 'storage_info':
+12 -12
View File
@@ -62,20 +62,20 @@
</div>
<style>
.home { position: relative; height: 100%; display: grid; grid-template-columns: 1fr minmax(17rem, 23rem); grid-template-rows: 1fr auto; gap: 1.5rem 2rem; padding: 1.5rem 1.8rem 1.8rem 2.2rem; }
.hero { grid-column: 1; grid-row: 1; align-self: center; display: flex; flex-direction: column; gap: 0.9rem; animation: fade-up 0.45s var(--ease); max-width: 40rem; }
.greet { font-size: 0.95rem; }
.greet strong { color: var(--text); font-weight: 600; }
.home { position: relative; height: 100%; display: grid; grid-template-columns: 1fr minmax(17rem, 22rem); grid-template-rows: 1fr auto; gap: 1.5rem 2.5rem; padding: 2rem 2rem 2rem 2.5rem; }
.hero { grid-column: 1; grid-row: 1; align-self: end; display: flex; flex-direction: column; gap: 0.75rem; animation: fade 0.3s ease; max-width: 38rem; padding-bottom: 0.5rem; }
.greet { font-size: 0.88rem; }
.greet strong { color: var(--text); font-weight: 560; }
.chips { display: flex; gap: 0.45rem; flex-wrap: wrap; }
h1 { font-size: clamp(2.8rem, 6.2vw, 4.8rem); line-height: 0.98; font-weight: 800; letter-spacing: -0.035em; text-shadow: 0 0.2rem 2rem color-mix(in srgb, var(--bg) 60%, transparent); }
.desc { font-size: 1.05rem; line-height: 1.55; color: color-mix(in srgb, var(--text) 72%, transparent); max-width: 32rem; }
.actions { grid-column: 1; grid-row: 2; display: flex; flex-direction: column; gap: 0.9rem; animation: fade-up 0.5s var(--ease) 0.05s both; }
h1 { font-size: clamp(2.2rem, 4.4vw, 3.2rem); line-height: 1.05; font-weight: 700; letter-spacing: -0.025em; }
.desc { font-size: 0.95rem; line-height: 1.6; color: var(--muted); max-width: 32rem; }
.actions { grid-column: 1; grid-row: 2; display: flex; flex-direction: column; gap: 0.8rem; animation: fade 0.3s ease both; }
.tools { flex-wrap: wrap; gap: 0.6rem; }
.tool { width: 3.1rem; height: 3.1rem; padding: 0; border-radius: var(--radius); color: color-mix(in srgb, var(--text) 80%, transparent); }
.tool.on { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 40%, transparent); }
.side { grid-column: 2; grid-row: 1 / 3; display: flex; flex-direction: column; justify-content: space-between; gap: 1rem; min-height: 0; animation: fade-up 0.5s var(--ease) 0.1s both; }
.tool { width: 2.75rem; height: 2.75rem; padding: 0; border-radius: var(--radius); color: color-mix(in srgb, var(--text) 75%, transparent); background: var(--surface); }
.tool.on { color: var(--text); border-color: var(--line-strong); background: color-mix(in srgb, var(--text) 8%, var(--surface)); }
.side { grid-column: 2; grid-row: 1 / 3; display: flex; flex-direction: column; justify-content: space-between; gap: 1rem; min-height: 0; animation: fade 0.3s ease both; }
.links { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.link { padding: 0.55rem 0.8rem; font-size: 0.84rem; border-radius: var(--radius-sm); flex: 1 1 auto; }
.link:hover { border-color: var(--line-strong); background: color-mix(in srgb, var(--surface) 80%, transparent); }
.link { padding: 0.5rem 0.75rem; font-size: 0.82rem; border-radius: var(--radius-sm); flex: 1 1 auto; background: var(--surface); color: color-mix(in srgb, var(--text) 80%, transparent); }
.link:hover { border-color: var(--line-strong); color: var(--text); }
@media (max-width: 1060px) { .home { grid-template-columns: 1fr 16rem; } .link span { display: none; } }
</style>
+8 -10
View File
@@ -7,7 +7,7 @@
<div class="login">
<section class="brand">
{#if b?.logo_url}<img src={abs(b.logo_url)} alt="" class="logo" />{:else}<div class="mark"></div>{/if}
{#if b?.logo_url}<img src={abs(b.logo_url)} alt="" class="logo" />{/if}
<h1>{b?.name}</h1>
<p>{b?.tagline}</p>
</section>
@@ -19,15 +19,13 @@
</div>
<style>
.login { height: 100%; display: grid; grid-template-columns: 1fr 25rem; align-items: center; gap: 3rem; padding: 2rem 4rem 3rem; }
.brand { display: flex; flex-direction: column; gap: 1rem; animation: fade-up 0.5s var(--ease); }
.logo { width: 5rem; height: 5rem; object-fit: contain; }
.mark { width: 4.2rem; height: 4.2rem; border-radius: calc(var(--radius) + 6px); background: linear-gradient(135deg, var(--accent), var(--accent-2)); box-shadow: 0 1rem 3rem -1rem var(--accent); position: relative; }
.mark::after { content: ''; position: absolute; inset: 1.1rem; border-radius: 50%; border: 0.35rem solid rgba(255, 255, 255, 0.9); }
h1 { font-size: clamp(3rem, 6vw, 4.6rem); font-weight: 800; letter-spacing: -0.04em; line-height: 1; }
.brand p { font-size: 1.15rem; color: color-mix(in srgb, var(--text) 70%, transparent); max-width: 26rem; line-height: 1.5; }
.card { padding: 1.8rem; display: flex; flex-direction: column; gap: 0.4rem; box-shadow: 0 2rem 5rem -2rem rgba(0, 0, 0, 0.6); animation: fade-up 0.5s var(--ease) 0.08s both; }
.card h2 { font-size: 1.4rem; }
.login { height: 100%; display: grid; grid-template-columns: 1fr 23rem; align-items: center; gap: 4rem; padding: 2rem 4.5rem 3rem; }
.brand { display: flex; flex-direction: column; gap: 0.8rem; animation: fade 0.3s ease; }
.logo { width: 3.5rem; height: 3.5rem; object-fit: contain; margin-bottom: 0.5rem; }
h1 { font-size: clamp(2.4rem, 4.5vw, 3.4rem); font-weight: 700; letter-spacing: 0.02em; line-height: 1.05; }
.brand p { font-size: 1rem; color: var(--muted); max-width: 26rem; line-height: 1.55; }
.card { padding: 1.6rem; display: flex; flex-direction: column; gap: 0.35rem; background: var(--surface); animation: fade 0.3s ease both; }
.card h2 { font-size: 1.2rem; font-weight: 600; }
.card > :global(.signin) { margin-top: 0.8rem; }
@media (max-width: 900px) { .login { grid-template-columns: 1fr; padding: 2rem; } .brand { display: none; } }
</style>
+22 -22
View File
@@ -343,7 +343,7 @@
<div class="card glass col about">
<div class="row">
<div class="mark"></div>
<div><strong class="big">{b?.name ?? 'ScopeNet'} Launcher</strong><p class="muted small">Version {app.boot?.app.version} · {app.boot?.app.os} {app.boot?.app.arch}</p></div>
<div><strong class="big">{b?.name ?? 'SCOPENET'} Launcher</strong><p class="muted small">Version {app.boot?.app.version} · {app.boot?.app.os} {app.boot?.app.arch}</p></div>
</div>
{#if app.update}
<div class="update">
@@ -365,27 +365,27 @@
</div>
<style>
.settings { height: 100%; display: flex; gap: 1rem; padding: 0 1rem 0.8rem 1rem; min-height: 0; }
.tabs { width: 14.5rem; flex-shrink: 0; padding: 1.1rem 0.7rem; display: flex; flex-direction: column; gap: 0.2rem; border-radius: calc(var(--radius) + 4px); }
.tabs h2 { font-size: 1.15rem; padding: 0 0.7rem 0.8rem; }
.tab { justify-content: flex-start; gap: 0.75rem; background: transparent; border-color: transparent; color: color-mix(in srgb, var(--text) 72%, transparent); padding: 0.62rem 0.75rem; font-weight: 520; position: relative; }
.settings { height: 100%; display: flex; min-height: 0; }
.tabs { width: 13.5rem; flex-shrink: 0; padding: 1.2rem 0.6rem; display: flex; flex-direction: column; gap: 0.1rem; border: none; border-right: 1px solid var(--line); border-radius: 0; background: transparent; }
.tabs h2 { font-size: 0.8rem; font-weight: 560; color: var(--muted); padding: 0 0.75rem 0.7rem; }
.tab { justify-content: flex-start; gap: 0.7rem; background: transparent; border-color: transparent; color: var(--muted); padding: 0.55rem 0.75rem; font-weight: 500; position: relative; }
.tab:hover { color: var(--text); }
.tab.active { background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--text); }
.tab.active :global(svg) { color: var(--accent); }
.dot { width: 0.45rem; height: 0.45rem; border-radius: 50%; background: var(--accent-2); margin-left: auto; box-shadow: 0 0 0.5rem var(--accent-2); }
.content { flex: 1; overflow-y: auto; min-width: 0; padding: 0.4rem 0.6rem 2rem 0.6rem; }
.pane { max-width: 44rem; display: flex; flex-direction: column; gap: 1rem; animation: fade-up 0.3s var(--ease); }
h1 { font-size: 1.8rem; font-weight: 750; margin-top: 0.4rem; }
.lead { color: var(--muted); margin-top: -0.6rem; line-height: 1.5; }
.card { padding: 1.1rem 1.2rem; }
.tab.active { background: color-mix(in srgb, var(--text) 7%, transparent); color: var(--text); }
.tab.active :global(svg) { color: var(--text); }
.dot { width: 0.45rem; height: 0.45rem; border-radius: 50%; background: var(--accent); margin-left: auto; }
.content { flex: 1; overflow-y: auto; min-width: 0; padding: 1.2rem 2rem 2.5rem; }
.pane { max-width: 42rem; display: flex; flex-direction: column; gap: 0.9rem; animation: fade 0.2s ease; }
h1 { font-size: 1.4rem; font-weight: 600; }
.lead { color: var(--muted); margin-top: -0.5rem; line-height: 1.5; font-size: 0.9rem; margin-bottom: 0.3rem; }
.card { padding: 1rem 1.1rem; background: var(--surface); }
.card.col { gap: 1rem; }
.list { display: flex; flex-direction: column; gap: 0.4rem; padding: 0.6rem; }
.acc { display: flex; align-items: center; gap: 0.8rem; padding: 0.6rem 0.7rem; border-radius: var(--radius-sm); }
.acc.current { background: color-mix(in srgb, var(--accent) 10%, transparent); }
.acc.current { background: color-mix(in srgb, var(--text) 5%, transparent); }
.who { flex: 1; display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
.active-badge { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.78rem; font-weight: 650; color: var(--accent); padding: 0.3rem 0.6rem; }
.add { border-style: dashed; background: transparent; margin: 0.2rem; }
.val { color: var(--accent); font-variant-numeric: tabular-nums; }
.val { color: var(--text); font-weight: 560; font-variant-numeric: tabular-nums; }
.scale { display: flex; justify-content: space-between; }
.warn { color: var(--warn); }
.link-btn { align-self: flex-start; }
@@ -397,32 +397,32 @@
.presets { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.6rem; }
.preset { flex-direction: column; align-items: flex-start; gap: 0.3rem; padding: 0.9rem; white-space: normal; text-align: left; background: color-mix(in srgb, var(--bg) 50%, transparent); }
.preset :global(svg) { color: var(--muted); margin-bottom: 0.2rem; }
.preset.active { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); }
.preset.active { border-color: color-mix(in srgb, var(--accent) 60%, transparent); background: color-mix(in srgb, var(--accent) 8%, transparent); }
.preset.active :global(svg) { color: var(--accent); }
.binds { display: grid; grid-template-columns: 1fr 1fr; gap: 0.8rem; transition: opacity 0.2s; }
.binds.disabled { opacity: 0.55; }
.group { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); margin-bottom: 0.5rem; }
.group { font-size: 0.8rem; font-weight: 560; color: var(--muted); margin-bottom: 0.4rem; }
.bind { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; padding: 0.3rem 0; font-size: 0.88rem; }
.key { min-width: 7.5rem; padding: 0.4rem 0.7rem; font-size: 0.82rem; font-family: var(--mono); font-weight: 600; background: color-mix(in srgb, var(--bg) 60%, transparent); }
.key.changed { border-color: color-mix(in srgb, var(--accent) 45%, transparent); }
.key.conflict { border-color: color-mix(in srgb, var(--warn) 60%, transparent); color: var(--warn); }
.key.capturing { border-color: var(--accent); color: var(--accent); animation: glow 1s ease-in-out infinite alternate; font-family: var(--font); }
@keyframes glow { to { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 30%, transparent); } }
.key.capturing { border-color: var(--accent); color: var(--accent); font-family: var(--font); }
kbd { font-family: var(--mono); font-size: 0.72rem; padding: 0.1rem 0.35rem; border-radius: 0.3rem; border: 1px solid var(--line-strong); background: color-mix(in srgb, var(--text) 6%, transparent); }
.swatches { display: flex; gap: 0.55rem; flex-wrap: wrap; }
.swatch { width: 2.3rem; height: 2.3rem; border-radius: 50%; padding: 0; border: 2px solid transparent; color: white; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.15); }
.swatch.on { border-color: var(--text); }
.picker { background: conic-gradient(red, yellow, lime, cyan, blue, magenta, red); position: relative; overflow: hidden; cursor: pointer; display: block; }
.picker input { opacity: 0; width: 100%; height: 100%; cursor: pointer; }
.big { font-size: 1.3rem; }
.big { font-size: 1.15rem; font-weight: 600; }
.usage { display: flex; height: 0.8rem; border-radius: 99rem; overflow: hidden; gap: 2px; background: color-mix(in srgb, var(--text) 8%, transparent); }
.usage span { min-width: 2px; }
.u1 { background: var(--accent); }
.u2 { background: var(--accent-2); }
.u2 { background: color-mix(in srgb, var(--accent) 50%, var(--text)); }
.u3 { background: var(--success); }
.legend { display: flex; gap: 1.2rem; color: var(--muted); }
.legend i { display: inline-block; width: 0.6rem; height: 0.6rem; border-radius: 0.2rem; margin-right: 0.3rem; vertical-align: -0.05rem; }
.about .mark { width: 3.2rem; height: 3.2rem; border-radius: var(--radius); background: linear-gradient(135deg, var(--accent), var(--accent-2)); flex-shrink: 0; }
.about .mark { width: 2.8rem; height: 2.8rem; border-radius: 50%; border: 3px solid var(--accent); flex-shrink: 0; position: relative; }
.about .mark::after { content: ''; position: absolute; inset: 0.55rem; border-radius: 50%; background: var(--accent); }
.update { display: flex; align-items: center; gap: 0.9rem; padding: 0.9rem 1rem; border-radius: var(--radius-sm); background: color-mix(in srgb, var(--accent) 12%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent); }
.update :global(svg) { color: var(--accent); }
.notes { margin: 0; white-space: pre-wrap; font-family: var(--font); font-size: 0.84rem; color: var(--muted); max-height: 12rem; overflow: auto; }
+3 -3
View File
@@ -36,9 +36,9 @@
<style>
.center { height: 100%; display: grid; place-items: center; padding: 2rem; }
.card { width: 100%; max-width: 28rem; padding: 2.2rem; display: flex; flex-direction: column; gap: 1rem; animation: fade-up 0.4s var(--ease); box-shadow: 0 2rem 5rem -2rem rgba(0, 0, 0, 0.7); }
.icon { width: 3.4rem; height: 3.4rem; border-radius: var(--radius); display: grid; place-items: center; background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: white; box-shadow: 0 0.8rem 2rem -0.8rem var(--accent); }
h1 { font-size: 1.6rem; }
.card { width: 100%; max-width: 27rem; padding: 2rem; display: flex; flex-direction: column; gap: 0.9rem; background: var(--surface); animation: fade 0.3s ease; }
.icon { width: 2.8rem; height: 2.8rem; border-radius: var(--radius); display: grid; place-items: center; background: color-mix(in srgb, var(--accent) 15%, transparent); color: var(--accent); }
h1 { font-size: 1.35rem; font-weight: 600; }
p { line-height: 1.5; font-size: 0.93rem; }
.big { padding: 0.85rem; font-size: 1rem; }
.error { font-size: 0.87rem; padding: 0.7rem 0.9rem; border-radius: var(--radius-sm); color: color-mix(in srgb, var(--danger) 60%, white); background: color-mix(in srgb, var(--danger) 12%, transparent); }