mirror of
https://github.com/YusufB5/ASCILINE.git
synced 2026-06-17 22:35:13 +02:00
93 lines
No EOL
4.6 KiB
HTML
93 lines
No EOL
4.6 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" style="display: flex; align-items: center; justify-content: center; gap: 20px; padding: 10px 0; border-top: 1px solid #333; margin-top: 10px; width: 100%;">
|
|
<!-- Play/Pause -->
|
|
<div class="ctrl-group" style="flex: 0 0 auto;">
|
|
<button id="play-pause-btn" style="background: none; border: none; color: var(--accent-color, #00ff41); font-family: monospace; font-size: 16px; cursor: pointer;">❚❚</button>
|
|
</div>
|
|
<!-- Seek Bar -->
|
|
<div class="ctrl-group seek-group" style="flex: 1; max-width: 500px; display: flex; align-items: center;">
|
|
<span id="time-current" style="margin-right: 10px; font-size: 12px; color: #888; flex-shrink: 0; width: 35px; text-align: right;">00:00</span>
|
|
<input id="seek-slider" type="range" min="0" max="100" step="0.1" value="0" style="flex: 1; cursor: pointer; accent-color: var(--accent-color, #00ff41);">
|
|
<span id="time-total" style="margin-left: 10px; font-size: 12px; color: #888; flex-shrink: 0; width: 35px;">00:00</span>
|
|
</div>
|
|
<!-- Volume Control -->
|
|
<div class="ctrl-group" style="display: flex; align-items: center; flex: 0 0 auto;">
|
|
<span class="ctrl-icon" style="margin-right: 5px; color: #888;">VOL_</span>
|
|
<input id="volume-slider" type="range" min="0" max="1" step="0.05" value="1" style="cursor: pointer; width: 60px; accent-color: var(--accent-color, #00ff41);">
|
|
</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> |