Initial commit
This commit is contained in:
286
web_files/index.html
Normal file
286
web_files/index.html
Normal file
@@ -0,0 +1,286 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>CANNIBAL GIRLS // ARCHIVE</title>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=VT323&family=Space+Mono:ital,wght@0,400;0,700;1,400&family=Courier+Prime:wght@400;700&display=swap" rel="stylesheet">
|
||||
<link rel="stylesheet" href="style.css">
|
||||
</head>
|
||||
<body>
|
||||
<!-- CRT SCANLINE OVERLAY -->
|
||||
<div class="scanlines"></div>
|
||||
|
||||
<!-- NOISE TEXTURE OVERLAY -->
|
||||
<div class="noise-overlay"></div>
|
||||
|
||||
<!-- VIGNETTE -->
|
||||
<div class="vignette"></div>
|
||||
|
||||
<!-- LOADING SCREEN -->
|
||||
<section id="loading-screen" class="loading-screen">
|
||||
<div class="loading-content">
|
||||
<div class="loading-header">
|
||||
<div class="status-line">
|
||||
<span class="status-indicator"></span>
|
||||
<span class="status-text">SYSTEM ONLINE</span>
|
||||
</div>
|
||||
<div class="datetime" id="loading-datetime"></div>
|
||||
</div>
|
||||
|
||||
<div class="loading-center">
|
||||
<h1 class="loading-title" id="loading-title">CANNIBAL GIRLS</h1>
|
||||
<div class="loading-separator">
|
||||
<span class="sep-line"></span>
|
||||
<span class="sep-diamond">▼</span>
|
||||
<span class="sep-line"></span>
|
||||
</div>
|
||||
<p class="loading-subtitle" id="loading-subtitle">ARCHIVE TERMINAL v2.4.1</p>
|
||||
|
||||
<button id="load-files-btn" class="load-btn">
|
||||
<span class="btn-bracket">[</span>
|
||||
<span class="btn-text">LOAD FILES</span>
|
||||
<span class="btn-bracket">]</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="loading-footer">
|
||||
<div class="footer-top">
|
||||
<span class="footer-label">PRODUCER:</span>
|
||||
<span class="footer-value">t.me/forgecadrape</span>
|
||||
</div>
|
||||
<div class="footer-bottom">
|
||||
<span class="footer-label">SESSION:</span>
|
||||
<span class="footer-value session-id">056834db96cedde6012da9d5402c683c0eb260ed866da145a8f86e7f329bf77222</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- LOADING PHASE OVERLAY -->
|
||||
<section id="loading-phase" class="loading-phase hidden">
|
||||
<div class="phase-content">
|
||||
<div class="phase-header">
|
||||
<span class="phase-icon">▶</span>
|
||||
<span class="phase-title">INITIALIZING ARCHIVE PROTOCOL</span>
|
||||
</div>
|
||||
<div class="phase-terminal">
|
||||
<div class="terminal-output" id="terminal-output"></div>
|
||||
<div class="terminal-cursor">_</div>
|
||||
</div>
|
||||
<div class="phase-progress">
|
||||
<div class="progress-label">
|
||||
<span id="progress-text">MOUNTING VOLUMES...</span>
|
||||
<span id="progress-percent">0%</span>
|
||||
</div>
|
||||
<div class="progress-bar">
|
||||
<div class="progress-fill" id="progress-fill"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ARCHIVE BROWSER -->
|
||||
<main id="archive-browser" class="archive-browser hidden">
|
||||
<!-- TOP BAR -->
|
||||
<header class="archive-header">
|
||||
<div class="header-left">
|
||||
<h1 class="archive-title">CANNIBAL_GIRLS</h1>
|
||||
<span class="header-separator">//</span>
|
||||
<span class="header-subtitle">ARCHIVE_BROWSER</span>
|
||||
</div>
|
||||
<div class="header-right">
|
||||
<div class="header-stats">
|
||||
<span class="stat-item">
|
||||
<span class="stat-label">FILES:</span>
|
||||
<span class="stat-value" id="file-count">0</span>
|
||||
</span>
|
||||
<span class="stat-item">
|
||||
<span class="stat-label">SIZE:</span>
|
||||
<span class="stat-value" id="total-size">0 GB</span>
|
||||
</span>
|
||||
</div>
|
||||
<div class="header-time" id="header-time"></div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- MAIN CONTENT AREA -->
|
||||
<div class="archive-body">
|
||||
<!-- SIDEBAR -->
|
||||
<aside class="archive-sidebar">
|
||||
<div class="sidebar-section">
|
||||
<h3 class="sidebar-title">CATALOG</h3>
|
||||
<ul class="sidebar-menu" id="sidebar-menu">
|
||||
<li class="sidebar-item active" data-filter="all">
|
||||
<span class="item-icon">■</span>
|
||||
<span class="item-label">ALL_FILES</span>
|
||||
<span class="item-count" id="count-all">0</span>
|
||||
</li>
|
||||
<li class="sidebar-item" data-filter="video">
|
||||
<span class="item-icon">▶</span>
|
||||
<span class="item-label">VIDEO</span>
|
||||
<span class="item-count" id="count-video">0</span>
|
||||
</li>
|
||||
<li class="sidebar-item" data-filter="image">
|
||||
<span class="item-icon">■</span>
|
||||
<span class="item-label">IMAGES</span>
|
||||
<span class="item-count" id="count-image">0</span>
|
||||
</li>
|
||||
<li class="sidebar-item" data-filter="audio">
|
||||
<span class="item-icon">♬</span>
|
||||
<span class="item-label">AUDIO</span>
|
||||
<span class="item-count" id="count-audio">0</span>
|
||||
</li>
|
||||
<li class="sidebar-item" data-filter="document">
|
||||
<span class="item-icon">☰</span>
|
||||
<span class="item-label">DOCS</span>
|
||||
<span class="item-count" id="count-document">0</span>
|
||||
</li>
|
||||
<li class="sidebar-item" data-filter="archive">
|
||||
<span class="item-icon">■</span>
|
||||
<span class="item-label">ARCHIVES</span>
|
||||
<span class="item-count" id="count-archive">0</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="sidebar-section">
|
||||
<h3 class="sidebar-title">SYSTEM</h3>
|
||||
<div class="system-info">
|
||||
<div class="sys-row">
|
||||
<span class="sys-label">STATUS:</span>
|
||||
<span class="sys-value status-ok">ONLINE</span>
|
||||
</div>
|
||||
<div class="sys-row">
|
||||
<span class="sys-label">UPTIME:</span>
|
||||
<span class="sys-value" id="uptime">00:00:00</span>
|
||||
</div>
|
||||
<div class="sys-row">
|
||||
<span class="sys-label">VERSION:</span>
|
||||
<span class="sys-value">2.4.1-b</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<!-- FILE LIST AREA -->
|
||||
<div class="archive-content">
|
||||
<!-- TOOLBAR -->
|
||||
<div class="content-toolbar">
|
||||
<div class="toolbar-left">
|
||||
<div class="view-switcher">
|
||||
<button class="view-btn active" data-view="list" title="List View">
|
||||
<span class="view-icon">☰</span>
|
||||
<span class="view-label">LIST</span>
|
||||
</button>
|
||||
<button class="view-btn" data-view="grid" title="Grid View">
|
||||
<span class="view-icon">■■</span>
|
||||
<span class="view-label">GRID</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="sort-controls">
|
||||
<span class="sort-label">SORT:</span>
|
||||
<select id="sort-select" class="sort-select">
|
||||
<option value="name-asc">NAME [A-Z]</option>
|
||||
<option value="name-desc">NAME [Z-A]</option>
|
||||
<option value="date-desc">DATE [NEWEST]</option>
|
||||
<option value="date-asc">DATE [OLDEST]</option>
|
||||
<option value="size-desc">SIZE [LARGEST]</option>
|
||||
<option value="size-asc">SIZE [SMALLEST]</option>
|
||||
<option value="type">TYPE</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="toolbar-right">
|
||||
<div class="search-box">
|
||||
<span class="search-icon">⚲</span>
|
||||
<input type="text" id="search-input" class="search-input" placeholder="SEARCH FILES...">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- FILE LIST -->
|
||||
<div class="file-list-container">
|
||||
<div class="file-list-header" id="file-list-header">
|
||||
<span class="col-name">NAME</span>
|
||||
<span class="col-type">TYPE</span>
|
||||
<span class="col-size">SIZE</span>
|
||||
<span class="col-date">DATE</span>
|
||||
</div>
|
||||
<div class="file-list" id="file-list"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- PREVIEW PANE -->
|
||||
<aside class="archive-preview" id="preview-pane">
|
||||
<div class="preview-header">
|
||||
<span class="preview-title">PREVIEW</span>
|
||||
<button class="preview-close" id="preview-close">✕</button>
|
||||
</div>
|
||||
<div class="preview-content" id="preview-content">
|
||||
<div class="preview-placeholder">
|
||||
<span class="placeholder-icon">■</span>
|
||||
<span class="placeholder-text">SELECT A FILE TO PREVIEW</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="preview-meta" id="preview-meta">
|
||||
<div class="meta-row">
|
||||
<span class="meta-label">FILENAME:</span>
|
||||
<span class="meta-value" id="meta-filename">---</span>
|
||||
</div>
|
||||
<div class="meta-row">
|
||||
<span class="meta-label">TYPE:</span>
|
||||
<span class="meta-value" id="meta-type">---</span>
|
||||
</div>
|
||||
<div class="meta-row">
|
||||
<span class="meta-label">SIZE:</span>
|
||||
<span class="meta-value" id="meta-size">---</span>
|
||||
</div>
|
||||
<div class="meta-row">
|
||||
<span class="meta-label">CREATED:</span>
|
||||
<span class="meta-value" id="meta-created">---</span>
|
||||
</div>
|
||||
<div class="meta-row">
|
||||
<span class="meta-label">MODIFIED:</span>
|
||||
<span class="meta-value" id="meta-modified">---</span>
|
||||
</div>
|
||||
<div class="meta-row">
|
||||
<span class="meta-label">CHECKSUM:</span>
|
||||
<span class="meta-value checksum" id="meta-checksum">---</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="preview-actions">
|
||||
<button class="action-btn" id="action-download">
|
||||
<span class="action-icon">▼</span>
|
||||
DOWNLOAD
|
||||
</button>
|
||||
<button class="action-btn" id="action-copy">
|
||||
<span class="action-icon">⚬</span>
|
||||
COPY HASH
|
||||
</button>
|
||||
</div>
|
||||
</aside>
|
||||
</div>
|
||||
|
||||
<!-- FOOTER -->
|
||||
<footer class="archive-footer">
|
||||
<div class="footer-left">
|
||||
<span class="footer-item">PROD: t.me/forgecadrape</span>
|
||||
</div>
|
||||
<div class="footer-center">
|
||||
<span class="footer-item" id="footer-status">READY</span>
|
||||
</div>
|
||||
<div class="footer-right">
|
||||
<span class="footer-item session-truncated">SESSION: 056834db96ce...f77222</span>
|
||||
</div>
|
||||
</footer>
|
||||
</main>
|
||||
|
||||
<!-- AUDIO ELEMENT -->
|
||||
<audio id="bg-audio" preload="auto"></audio>
|
||||
|
||||
<script src="index.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user