314 lines
17 KiB
HTML
314 lines
17 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>JAESWIFT // ADMIN</title>
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;400;500;600;700&family=Orbitron:wght@400;500;600;700;800;900&family=Share+Tech+Mono&display=swap" rel="stylesheet">
|
|
<link rel="stylesheet" href="css/admin.css">
|
|
</head>
|
|
<body>
|
|
|
|
<!-- Login Screen -->
|
|
<div class="admin-login" id="loginScreen">
|
|
<div class="login-box">
|
|
<div class="login-header">
|
|
<div class="login-icon">⬡</div>
|
|
<h1 class="login-title">JAESWIFT</h1>
|
|
<span class="login-subtitle">ADMIN // CONTROL PANEL</span>
|
|
</div>
|
|
<form class="login-form" id="loginForm">
|
|
<div class="login-field">
|
|
<label class="login-label">OPERATOR ID</label>
|
|
<input type="text" id="loginUser" class="login-input" autocomplete="username" placeholder="username" required>
|
|
</div>
|
|
<div class="login-field">
|
|
<label class="login-label">ACCESS KEY</label>
|
|
<input type="password" id="loginPass" class="login-input" autocomplete="current-password" placeholder="••••••••" required>
|
|
</div>
|
|
<div class="login-error" id="loginError"></div>
|
|
<button type="submit" class="login-btn">AUTHENTICATE →</button>
|
|
</form>
|
|
<div class="login-footer">
|
|
<span class="login-status">SECURE CHANNEL // AES-256</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Admin Dashboard -->
|
|
<div class="admin-app" id="adminApp" style="display:none;">
|
|
|
|
<!-- Top Bar -->
|
|
<header class="admin-topbar">
|
|
<div class="topbar-left">
|
|
<span class="topbar-logo">⬡ JAESWIFT</span>
|
|
<span class="topbar-divider">//</span>
|
|
<span class="topbar-section" id="topbarSection">DASHBOARD</span>
|
|
</div>
|
|
<div class="topbar-right">
|
|
<span class="topbar-user" id="topbarUser">jae</span>
|
|
<button class="topbar-btn" onclick="AdminApp.logout()">LOGOUT</button>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- Sidebar -->
|
|
<nav class="admin-sidebar">
|
|
<a href="#" class="sidebar-link active" data-section="dashboard" onclick="AdminApp.showSection('dashboard')">
|
|
<span class="sidebar-icon">◈</span> DASHBOARD
|
|
</a>
|
|
<a href="#" class="sidebar-link" data-section="posts" onclick="AdminApp.showSection('posts')">
|
|
<span class="sidebar-icon">▤</span> POSTS
|
|
</a>
|
|
<a href="#" class="sidebar-link" data-section="editor" onclick="AdminApp.showSection('editor')">
|
|
<span class="sidebar-icon">✎</span> NEW POST
|
|
</a>
|
|
<a href="#" class="sidebar-link" data-section="tracks" onclick="AdminApp.showSection('tracks')">
|
|
<span class="sidebar-icon">♫</span> TRACKS
|
|
</a>
|
|
<a href="#" class="sidebar-link" data-section="settings" onclick="AdminApp.showSection('settings')">
|
|
<span class="sidebar-icon">⚙</span> SETTINGS
|
|
</a>
|
|
<div class="sidebar-footer">
|
|
<a href="/" class="sidebar-link">
|
|
<span class="sidebar-icon">←</span> VIEW SITE
|
|
</a>
|
|
</div>
|
|
</nav>
|
|
|
|
<!-- Main Content -->
|
|
<main class="admin-main">
|
|
|
|
<!-- Dashboard Section -->
|
|
<section class="admin-section" id="section-dashboard">
|
|
<h2 class="section-heading">SYSTEM OVERVIEW</h2>
|
|
<div class="dash-grid">
|
|
<div class="dash-card">
|
|
<span class="dash-card-label">TOTAL POSTS</span>
|
|
<span class="dash-card-value" id="dashPosts">--</span>
|
|
</div>
|
|
<div class="dash-card">
|
|
<span class="dash-card-label">TOTAL WORDS</span>
|
|
<span class="dash-card-value" id="dashWords">--</span>
|
|
</div>
|
|
<div class="dash-card">
|
|
<span class="dash-card-label">TRACKS</span>
|
|
<span class="dash-card-value" id="dashTracks">--</span>
|
|
</div>
|
|
<div class="dash-card">
|
|
<span class="dash-card-label">SERVER CPU</span>
|
|
<span class="dash-card-value" id="dashCPU">--%</span>
|
|
</div>
|
|
<div class="dash-card">
|
|
<span class="dash-card-label">MEMORY</span>
|
|
<span class="dash-card-value" id="dashMem">--%</span>
|
|
</div>
|
|
<div class="dash-card">
|
|
<span class="dash-card-label">DISK</span>
|
|
<span class="dash-card-value" id="dashDisk">--%</span>
|
|
</div>
|
|
</div>
|
|
<h3 class="section-subheading">SERVICES STATUS</h3>
|
|
<div class="services-grid" id="dashServices">Loading...</div>
|
|
<h3 class="section-subheading">RECENT THREATS (CVE)</h3>
|
|
<div class="threats-list" id="dashThreats">Loading...</div>
|
|
</section>
|
|
|
|
<!-- Posts Section -->
|
|
<section class="admin-section" id="section-posts" style="display:none;">
|
|
<div class="section-heading-row">
|
|
<h2 class="section-heading">BLOG POSTS</h2>
|
|
<button class="action-btn" onclick="AdminApp.showSection('editor')">+ NEW POST</button>
|
|
</div>
|
|
<div class="posts-table-wrap">
|
|
<table class="posts-table">
|
|
<thead>
|
|
<tr>
|
|
<th>DATE</th>
|
|
<th>TITLE</th>
|
|
<th>TAGS</th>
|
|
<th>WORDS</th>
|
|
<th>THREAT</th>
|
|
<th>ACTIONS</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="postsTableBody"></tbody>
|
|
</table>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Editor Section -->
|
|
<section class="admin-section" id="section-editor" style="display:none;">
|
|
<h2 class="section-heading" id="editorHeading">NEW TRANSMISSION</h2>
|
|
<form class="editor-form" id="editorForm">
|
|
<input type="hidden" id="editSlugOriginal">
|
|
|
|
<div class="editor-row">
|
|
<div class="editor-field full">
|
|
<label class="editor-label">TITLE</label>
|
|
<input type="text" id="edTitle" class="editor-input" placeholder="Post title..." required>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="editor-row">
|
|
<div class="editor-field">
|
|
<label class="editor-label">SLUG</label>
|
|
<input type="text" id="edSlug" class="editor-input" placeholder="auto-generated">
|
|
</div>
|
|
<div class="editor-field">
|
|
<label class="editor-label">DATE</label>
|
|
<input type="date" id="edDate" class="editor-input">
|
|
</div>
|
|
<div class="editor-field">
|
|
<label class="editor-label">TIME</label>
|
|
<input type="time" id="edTime" class="editor-input" value="00:00">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="editor-row">
|
|
<div class="editor-field">
|
|
<label class="editor-label">TAGS (comma-separated)</label>
|
|
<input type="text" id="edTags" class="editor-input" placeholder="security, infrastructure">
|
|
</div>
|
|
<div class="editor-field">
|
|
<label class="editor-label">EXCERPT</label>
|
|
<input type="text" id="edExcerpt" class="editor-input" placeholder="Short description...">
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Cyberpunk Health Stats -->
|
|
<div class="editor-hud-section">
|
|
<h3 class="editor-hud-title">◈ OPERATOR STATUS</h3>
|
|
<div class="editor-hud-grid">
|
|
<div class="hud-field">
|
|
<label class="editor-label">MOOD</label>
|
|
<select id="edMood" class="editor-input editor-select">
|
|
<option value="focused">Focused</option>
|
|
<option value="creative">Creative</option>
|
|
<option value="productive">Productive</option>
|
|
<option value="tired">Tired</option>
|
|
<option value="wired">Wired</option>
|
|
<option value="chaotic">Chaotic</option>
|
|
<option value="locked-in">Locked In</option>
|
|
<option value="zen">Zen</option>
|
|
</select>
|
|
</div>
|
|
<div class="hud-field">
|
|
<label class="editor-label">ENERGY (1-5)</label>
|
|
<input type="range" id="edEnergy" class="editor-range" min="1" max="5" value="3">
|
|
<span class="range-val" id="edEnergyVal">3</span>
|
|
</div>
|
|
<div class="hud-field">
|
|
<label class="editor-label">MOTIVATION (1-5)</label>
|
|
<input type="range" id="edMotivation" class="editor-range" min="1" max="5" value="3">
|
|
<span class="range-val" id="edMotivationVal">3</span>
|
|
</div>
|
|
<div class="hud-field">
|
|
<label class="editor-label">FOCUS (1-5)</label>
|
|
<input type="range" id="edFocus" class="editor-range" min="1" max="5" value="3">
|
|
<span class="range-val" id="edFocusVal">3</span>
|
|
</div>
|
|
<div class="hud-field">
|
|
<label class="editor-label">DIFFICULTY (1-5)</label>
|
|
<input type="range" id="edDifficulty" class="editor-range" min="1" max="5" value="3">
|
|
<span class="range-val" id="edDifficultyVal">3</span>
|
|
</div>
|
|
<div class="hud-field">
|
|
<label class="editor-label">COFFEE ☕</label>
|
|
<input type="number" id="edCoffee" class="editor-input editor-small" min="0" max="10" value="2">
|
|
</div>
|
|
<div class="hud-field">
|
|
<label class="editor-label">BPM ♥</label>
|
|
<input type="number" id="edBPM" class="editor-input editor-small" min="40" max="200" value="72">
|
|
</div>
|
|
<div class="hud-field">
|
|
<label class="editor-label">THREAT LEVEL</label>
|
|
<select id="edThreat" class="editor-input editor-select">
|
|
<option value="low">LOW</option>
|
|
<option value="medium">MEDIUM</option>
|
|
<option value="high">HIGH</option>
|
|
<option value="critical">CRITICAL</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<!-- Content Editor -->
|
|
<div class="editor-field full">
|
|
<label class="editor-label">CONTENT (Markdown)</label>
|
|
<div class="editor-toolbar">
|
|
<button type="button" class="tb-btn" onclick="AdminApp.insertMD('**','**')" title="Bold"><b>B</b></button>
|
|
<button type="button" class="tb-btn" onclick="AdminApp.insertMD('*','*')" title="Italic"><i>I</i></button>
|
|
<button type="button" class="tb-btn" onclick="AdminApp.insertMD('`','`')" title="Code"></></button>
|
|
<button type="button" class="tb-btn" onclick="AdminApp.insertMD('\n```\n','\n```\n')" title="Code Block">[ ]</button>
|
|
<button type="button" class="tb-btn" onclick="AdminApp.insertMD('## ','')" title="Heading">H2</button>
|
|
<button type="button" class="tb-btn" onclick="AdminApp.insertMD('### ','')" title="Heading">H3</button>
|
|
<button type="button" class="tb-btn" onclick="AdminApp.insertMD('[','](url)')" title="Link">🔗</button>
|
|
<button type="button" class="tb-btn" onclick="AdminApp.insertMD('---\n','')" title="Divider">—</button>
|
|
<span class="tb-wordcount" id="edWordCount">0 words</span>
|
|
</div>
|
|
<textarea id="edContent" class="editor-textarea" rows="20" placeholder="Write your transmission in markdown..."></textarea>
|
|
</div>
|
|
|
|
<!-- Preview -->
|
|
<div class="editor-field full">
|
|
<label class="editor-label">PREVIEW</label>
|
|
<div class="editor-preview" id="edPreview"></div>
|
|
</div>
|
|
|
|
<div class="editor-actions">
|
|
<button type="submit" class="action-btn">TRANSMIT POST →</button>
|
|
<button type="button" class="action-btn secondary" onclick="AdminApp.clearEditor()">CLEAR</button>
|
|
</div>
|
|
</form>
|
|
</section>
|
|
|
|
<!-- Tracks Section -->
|
|
<section class="admin-section" id="section-tracks" style="display:none;">
|
|
<div class="section-heading-row">
|
|
<h2 class="section-heading">TRACK LIBRARY</h2>
|
|
<button class="action-btn" onclick="AdminApp.showAddTrack()">+ ADD TRACK</button>
|
|
</div>
|
|
<div class="track-add-form" id="trackAddForm" style="display:none;">
|
|
<input type="text" id="trackArtist" class="editor-input" placeholder="Artist">
|
|
<input type="text" id="trackTitle" class="editor-input" placeholder="Track">
|
|
<input type="text" id="trackAlbum" class="editor-input" placeholder="Album">
|
|
<button class="action-btn" onclick="AdminApp.addTrack()">ADD</button>
|
|
</div>
|
|
<div class="tracks-list" id="tracksList"></div>
|
|
</section>
|
|
|
|
<!-- Settings Section -->
|
|
<section class="admin-section" id="section-settings" style="display:none;">
|
|
<h2 class="section-heading">CONFIGURATION</h2>
|
|
<form class="settings-form" id="settingsForm">
|
|
<div class="settings-group">
|
|
<h3 class="settings-group-title">WIDGET TOGGLES</h3>
|
|
<label class="toggle-row">
|
|
<input type="checkbox" id="setWeather" checked>
|
|
<span class="toggle-label">Weather Widget</span>
|
|
</label>
|
|
<label class="toggle-row">
|
|
<input type="checkbox" id="setNowPlaying" checked>
|
|
<span class="toggle-label">Now Playing Widget</span>
|
|
</label>
|
|
<label class="toggle-row">
|
|
<input type="checkbox" id="setThreats" checked>
|
|
<span class="toggle-label">CVE Threat Feed</span>
|
|
</label>
|
|
<label class="toggle-row">
|
|
<input type="checkbox" id="setTerminal" checked>
|
|
<span class="toggle-label">Terminal Emulator</span>
|
|
</label>
|
|
</div>
|
|
<button type="submit" class="action-btn">SAVE SETTINGS</button>
|
|
</form>
|
|
</section>
|
|
|
|
</main>
|
|
</div>
|
|
|
|
<script src="js/admin.js"></script>
|
|
</body>
|
|
</html>
|