mirror of
https://github.com/YusufB5/ASCILINE.git
synced 2026-06-23 22:48:06 +02:00
a253c17507
Builds on the existing live seek/play/volume. Adds a polished, responsive control bar with play/pause, +/-10s skip, a played-progress fill, and a YouTube-style hover thumbnail preview on the seek bar. Thumbnails come from a small lazy /scrub endpoint that builds an in-memory sprite once per video with a single ffmpeg pass (no disk cache); easy to point at the static compiler's sprite instead.
96 lines
No EOL
4.2 KiB
HTML
96 lines
No EOL
4.2 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>ASCILINE - Dynamic Typography Engine</title>
|
|
|
|
<!-- Google Fonts -->
|
|
<link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;600&display=swap" rel="stylesheet">
|
|
|
|
<!-- Core Styles -->
|
|
<link rel="stylesheet" href="/static/style.css">
|
|
</head>
|
|
|
|
<body>
|
|
<!-- Header Section -->
|
|
<header class="blog-header">
|
|
<h1>ASCILINE</h1>
|
|
<p>Turning the web into a living, breathing typographic canvas.</p>
|
|
</header>
|
|
|
|
<!-- Main Content -->
|
|
<main class="blog-container">
|
|
<article class="blog-post">
|
|
<h2 class="post-title">The Web Was Never Meant to Be Static</h2>
|
|
<div class="post-meta">Manifesto // May 4, 2026 // ASCILINE Core Team</div>
|
|
|
|
<p class="post-content">
|
|
Every character on this page is potential energy. The web was built on text — HTML,
|
|
the very skeleton of every site you visit, is nothing but structured characters. Yet
|
|
somewhere along the way, we forgot that text itself can be the medium, not just the
|
|
message. ASCILINE exists to remind us: every glyph is a pixel waiting to move.
|
|
</p>
|
|
|
|
<!-- Video Wrapper -->
|
|
<div class="video-wrapper">
|
|
<div id="status" class="status">System Ready</div>
|
|
|
|
<!-- Main Player Container -->
|
|
<div id="player-container">
|
|
<!-- Text-based rendering (B&W Mode) -->
|
|
<pre id="ascii-player"></pre>
|
|
|
|
<!-- Canvas-based rendering (Color Modes) -->
|
|
<canvas id="ascii-canvas"></canvas>
|
|
|
|
<!-- Interaction Overlay -->
|
|
<div id="play-overlay">
|
|
<div class="play-btn"></div>
|
|
<span class="play-label">Initialize Uplink</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Player Controls Bar -->
|
|
<div class="player-controls">
|
|
<button id="play-pause-btn" class="ctrl-btn" title="Play / Pause (Space)">❚❚</button>
|
|
<button id="btn-back" class="ctrl-btn" title="Back 10s">«10</button>
|
|
<span id="time-current" class="ctrl-time">00:00</span>
|
|
<div class="seek-wrap">
|
|
<div class="seek-track"></div>
|
|
<div class="seek-played" id="seek-played"></div>
|
|
<input id="seek-slider" class="seek-slider" type="range" min="0" max="100" step="0.1" value="0" title="Seek">
|
|
<div class="seek-preview" id="seek-preview">
|
|
<div class="seek-preview-img" id="seek-preview-img"></div>
|
|
<div class="seek-preview-time" id="seek-preview-time">0:00</div>
|
|
</div>
|
|
</div>
|
|
<span id="time-total" class="ctrl-time">00:00</span>
|
|
<button id="btn-fwd" class="ctrl-btn" title="Forward 10s">10»</button>
|
|
<div class="ctrl-group">
|
|
<span class="ctrl-icon">VOL_</span>
|
|
<input id="volume-slider" type="range" min="0" max="1" step="0.05" value="1">
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Hidden Audio Element -->
|
|
<audio id="ascii-audio" preload="none"></audio>
|
|
</div>
|
|
|
|
<p class="post-content">
|
|
This is not a video player in the traditional sense. There is no <video> tag here,
|
|
no compressed binary stream decoded by your GPU. Instead, a WebSocket pushes raw
|
|
character data at 24+ frames per second, and your browser renders it as pure text —
|
|
the same primitive that built the entire internet. The web becomes dynamic not through
|
|
heavier payloads, but by rethinking what was already there.
|
|
</p>
|
|
</article>
|
|
</main>
|
|
|
|
<!-- Core Engine Logic -->
|
|
<script src="/static/codec.js"></script>
|
|
<script src="/static/app.js"></script>
|
|
</body>
|
|
|
|
</html> |