578 lines
31 KiB
HTML
578 lines
31 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 // SYSTEMS ONLINE</title>
|
|
<link rel="stylesheet" href="/css/style.css">
|
|
<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=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">
|
|
</head>
|
|
<body>
|
|
<!-- Scanline overlay -->
|
|
<div class="scanline-overlay"></div>
|
|
|
|
<!-- Grid background -->
|
|
<div class="grid-bg"></div>
|
|
|
|
<!-- Particle canvas -->
|
|
<canvas id="particles"></canvas>
|
|
|
|
<!-- Navigation -->
|
|
<nav class="nav-main" id="navbar">
|
|
<div class="nav-container">
|
|
<a href="#" class="nav-logo">
|
|
<span class="logo-bracket">[</span>
|
|
<span class="logo-text">JAE<span class="logo-accent">SWIFT</span></span>
|
|
<span class="logo-bracket">]</span>
|
|
<span class="logo-status">● ONLINE</span>
|
|
</a>
|
|
<button class="nav-toggle" id="navToggle" aria-label="Toggle navigation">
|
|
<span></span><span></span><span></span>
|
|
</button>
|
|
<ul class="nav-menu" id="navMenu">
|
|
<!-- Loaded dynamically from /api/navigation -->
|
|
</ul>
|
|
<div class="nav-status">
|
|
<span class="nav-time" id="navTime">00:00:00</span>
|
|
<span class="nav-signal">▮▮▮▮▯</span>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
<!-- Status Bar -->
|
|
<div class="hud-bottom-bar">
|
|
<div class="hud-bottom-left">
|
|
<span class="hud-id">JAE-001X</span>
|
|
<span class="hud-dot-online">● ONLINE</span>
|
|
</div>
|
|
<div class="hud-bottom-stats">
|
|
<div class="hud-bstat">
|
|
<span class="hud-bstat-label">STATUS</span>
|
|
<span class="hud-bstat-value hud-online">● OPERATIONAL</span>
|
|
</div>
|
|
<div class="hud-bstat">
|
|
<span class="hud-bstat-label">UPTIME</span>
|
|
<span class="hud-bstat-value" id="uptime">0d 00h 00m</span>
|
|
</div>
|
|
<div class="hud-bstat">
|
|
<span class="hud-bstat-label">COORDS</span>
|
|
<span class="hud-bstat-value">53.48°N // 2.24°W</span>
|
|
</div>
|
|
</div>
|
|
<div class="hud-bottom-right">
|
|
<span class="hud-scan-label">SCANNING...</span>
|
|
<div class="hud-scan-bar"><div class="hud-scan-fill" id="scanFill"></div></div>
|
|
<span class="hud-scan-pct" id="scanPct">0%</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Hero Section -->
|
|
<section class="hero" id="home">
|
|
<div class="hero-hud-grid">
|
|
|
|
<!-- Left Column: Map + Identity -->
|
|
<div class="hud-col-left">
|
|
<div class="panel map-panel">
|
|
<div class="panel-header">
|
|
<span class="panel-title">OPERATOR LOCATION</span>
|
|
<span class="panel-icon">↗</span>
|
|
</div>
|
|
<div class="map-content">
|
|
<svg viewBox="0 0 250 400" class="uk-map-svg">
|
|
<defs>
|
|
<pattern id="mapGrid" width="20" height="20" patternUnits="userSpaceOnUse">
|
|
<path d="M 20 0 L 0 0 0 20" fill="none" stroke="rgba(255,255,255,0.02)" stroke-width="0.5"/>
|
|
</pattern>
|
|
<filter id="glow"><feGaussianBlur stdDeviation="3" result="b"/><feMerge><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge></filter>
|
|
<radialGradient id="dotGlow" cx="50%" cy="50%" r="50%">
|
|
<stop offset="0%" stop-color="#00cc33" stop-opacity="0.5"/>
|
|
<stop offset="100%" stop-color="#00cc33" stop-opacity="0"/>
|
|
</radialGradient>
|
|
</defs>
|
|
<rect width="250" height="400" fill="url(#mapGrid)"/>
|
|
<!-- UK mainland outline -->
|
|
<polygon points="80,12 95,8 120,5 140,8 155,18 152,35 148,55 142,72 138,88 135,100 142,108 150,118 155,135 158,155 162,175 168,195 172,215 170,235 168,255 172,272 168,280 155,288 142,292 130,296 115,302 100,308 85,315 72,318 65,310 75,295 82,280 88,268 85,255 72,248 62,238 55,222 52,205 55,192 60,182 68,175 78,168 82,155 80,140 75,125 70,112 62,100 55,82 52,65 58,45 68,30" fill="rgba(0,204,51,0.02)" stroke="#00cc33" stroke-width="1.2" stroke-opacity="0.4" stroke-linejoin="round"/>
|
|
<!-- Northern Ireland (simplified) -->
|
|
<polygon points="42,105 55,98 62,102 58,115 48,118 38,112" fill="rgba(0,204,51,0.015)" stroke="#00cc33" stroke-width="0.8" stroke-opacity="0.3" stroke-linejoin="round"/>
|
|
<!-- Crosshair lines at Manchester -->
|
|
<line x1="0" y1="172" x2="250" y2="172" stroke="#00cc33" stroke-width="0.3" stroke-opacity="0.25" stroke-dasharray="4,4"/>
|
|
<line x1="90" y1="0" x2="90" y2="400" stroke="#00cc33" stroke-width="0.3" stroke-opacity="0.25" stroke-dasharray="4,4"/>
|
|
<!-- Manchester glow -->
|
|
<circle cx="90" cy="172" r="25" fill="url(#dotGlow)"/>
|
|
<!-- Manchester dot -->
|
|
<circle cx="90" cy="172" r="3" fill="#00cc33" filter="url(#glow)"/>
|
|
<!-- Pulse rings -->
|
|
<circle cx="90" cy="172" r="8" fill="none" stroke="#00cc33" stroke-width="0.8" class="pulse-ring pulse-ring-1"/>
|
|
<circle cx="90" cy="172" r="16" fill="none" stroke="#00cc33" stroke-width="0.5" class="pulse-ring pulse-ring-2"/>
|
|
<circle cx="90" cy="172" r="24" fill="none" stroke="#00cc33" stroke-width="0.3" class="pulse-ring pulse-ring-3"/>
|
|
<!-- Manchester label -->
|
|
<text x="108" y="168" fill="#00cc33" font-size="8" font-family="'JetBrains Mono',monospace" letter-spacing="1">MANCHESTER</text>
|
|
<text x="108" y="180" fill="rgba(0,204,51,0.3)" font-size="6" font-family="'JetBrains Mono',monospace">53.48°N 2.24°W</text>
|
|
<!-- Scan sweep -->
|
|
<line x1="0" y1="0" x2="250" y2="0" stroke="#00cc33" stroke-width="1" stroke-opacity="0.4" class="map-scan-line"/>
|
|
</svg>
|
|
<div class="map-data-overlay">
|
|
<div class="map-coord-block">
|
|
<span class="coord-label">LAT</span>
|
|
<span class="coord-value">+53.48°</span>
|
|
</div>
|
|
<div class="map-coord-block">
|
|
<span class="coord-label">LONG</span>
|
|
<span class="coord-value">-2.24°</span>
|
|
</div>
|
|
<div class="map-coord-block">
|
|
<span class="coord-label">ALT</span>
|
|
<span class="coord-value">78m (ASL)</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Weather Panel -->
|
|
<div class="panel hud-data-panel">
|
|
<div class="panel-header">
|
|
<span class="panel-title">WEATHER</span>
|
|
<span class="panel-status-dot status-green">● LIVE</span>
|
|
</div>
|
|
<div class="panel-content weather-display">
|
|
<div class="weather-main">
|
|
<span class="weather-temp" id="weatherTemp">--°C</span>
|
|
<span class="weather-cond" id="weatherCond">LOADING...</span>
|
|
</div>
|
|
<div class="weather-details">
|
|
<span class="weather-detail" id="weatherFeels">FEELS --°C</span>
|
|
<span class="weather-detail" id="weatherWind">-- KPH</span>
|
|
<span class="weather-detail" id="weatherHumidity">--% RH</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Middle Column: AI Chat Terminal -->
|
|
<div class="hud-col-center">
|
|
<div class="panel chat-terminal">
|
|
<div class="panel-header chat-header">
|
|
<span class="panel-title">JAE-AI <span class="chat-model">// VENICE-UNCENSORED</span></span>
|
|
<span class="panel-status-dot status-green chat-status" id="chatStatus">● ONLINE</span>
|
|
</div>
|
|
<div class="chat-messages" id="chatMessages">
|
|
<div class="chat-welcome">
|
|
<div class="chat-logo-text">
|
|
<span class="glitch" data-text="JAESWIFT">JAESWIFT</span>
|
|
</div>
|
|
<div class="chat-welcome-sub">SYSTEM IDENTIFICATION // AI TERMINAL</div>
|
|
<div class="chat-welcome-hint">Type a message to interact with JAE-AI</div>
|
|
</div>
|
|
</div>
|
|
<div class="chat-input-area">
|
|
<span class="chat-prompt-icon">>_</span>
|
|
<input type="text" class="chat-input" id="chatInput" placeholder="ENTER TRANSMISSION..." autocomplete="off" spellcheck="false">
|
|
<button class="chat-send" id="chatSend" title="Send">
|
|
<span class="chat-send-icon">▶</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Right Column: Data Panels -->
|
|
<div class="hud-col-right">
|
|
<!-- Server Metrics -->
|
|
<div class="panel hud-data-panel">
|
|
<div class="panel-header">
|
|
<span class="panel-title">SERVER METRICS</span>
|
|
<span class="panel-pct" id="serverHealth">98%</span>
|
|
</div>
|
|
<div class="panel-content hud-metrics">
|
|
<div class="metric-row">
|
|
<span class="metric-label">CPU LOAD</span>
|
|
<div class="metric-bar"><div class="metric-fill" id="cpuBar"></div></div>
|
|
<span class="metric-val" id="cpuVal">23%</span>
|
|
</div>
|
|
<div class="metric-row">
|
|
<span class="metric-label">MEMORY</span>
|
|
<div class="metric-bar"><div class="metric-fill" id="memBar"></div></div>
|
|
<span class="metric-val" id="memVal">67%</span>
|
|
</div>
|
|
<div class="metric-row">
|
|
<span class="metric-label">DISK I/O</span>
|
|
<div class="metric-bar"><div class="metric-fill" id="diskBar"></div></div>
|
|
<span class="metric-val" id="diskVal">45%</span>
|
|
</div>
|
|
<div class="metric-row">
|
|
<span class="metric-label">BANDWIDTH</span>
|
|
<div class="metric-bar"><div class="metric-fill" id="bwBar"></div></div>
|
|
<span class="metric-val" id="bwVal">78%</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Battery / Power -->
|
|
<div class="panel hud-data-panel hud-row-panels">
|
|
<div class="hud-mini-panel">
|
|
<div class="panel-header">
|
|
<span class="panel-title">POWER</span>
|
|
<span class="panel-status-dot status-green">● ON MAINS</span>
|
|
</div>
|
|
<div class="panel-content power-display">
|
|
<div class="power-big" id="powerPct">98<span class="power-unit">%</span></div>
|
|
</div>
|
|
</div>
|
|
<div class="hud-mini-panel">
|
|
<div class="panel-header">
|
|
<span class="panel-title">CONTAINERS</span>
|
|
<span class="panel-icon">↗</span>
|
|
</div>
|
|
<div class="panel-content containers-display">
|
|
<div class="container-count"><span id="containerUp">8</span> / <span class="container-total">8</span></div>
|
|
<div class="container-bar"><div class="container-fill" id="containerBar"></div></div>
|
|
<span class="container-label">ALL RUNNING</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Now Playing -->
|
|
<div class="panel hud-data-panel">
|
|
<div class="panel-header">
|
|
<span class="panel-title">NOW PLAYING</span>
|
|
<span class="panel-status-dot" id="npStatus">● STREAMING</span>
|
|
</div>
|
|
<div class="panel-content np-display">
|
|
<div class="np-track" id="npTrack">---</div>
|
|
<div class="np-artist" id="npArtist">---</div>
|
|
<div class="np-album" id="npAlbum">---</div>
|
|
<div class="np-visualiser">
|
|
<span class="np-bar"></span><span class="np-bar"></span><span class="np-bar"></span>
|
|
<span class="np-bar"></span><span class="np-bar"></span><span class="np-bar"></span>
|
|
<span class="np-bar"></span><span class="np-bar"></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<!-- Network Graph -->
|
|
<div class="panel hud-data-panel">
|
|
<div class="panel-header">
|
|
<span class="panel-title">NETWORK TRAFFIC</span>
|
|
<span class="panel-icon">↗</span>
|
|
</div>
|
|
<div class="panel-content graph-container">
|
|
<canvas id="networkGraph"></canvas>
|
|
<div class="graph-stats">
|
|
<div class="graph-stat">
|
|
<span class="graph-stat-label">DOWNLOAD</span>
|
|
<span class="graph-stat-value" id="dlSpeed">1.6 Gbps</span>
|
|
</div>
|
|
<div class="graph-stat">
|
|
<span class="graph-stat-label">UPLOAD</span>
|
|
<span class="graph-stat-value" id="ulSpeed">1.2 Gbps</span>
|
|
</div>
|
|
<div class="graph-stat">
|
|
<span class="graph-stat-label">PACKETS</span>
|
|
<span class="graph-stat-value" id="packetCount">12 / 1.012</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
</div>
|
|
<div class="scan-line"></div>
|
|
</section>
|
|
|
|
<!-- About Section -->
|
|
<section class="section" id="about">
|
|
<div class="section-container">
|
|
<div class="section-header">
|
|
<span class="section-tag">01</span>
|
|
<h2 class="section-title">ABOUT<span class="accent">_</span>ME</h2>
|
|
<div class="section-line"></div>
|
|
</div>
|
|
<div class="panels-grid">
|
|
<div class="panel panel-main" data-animate>
|
|
<div class="panel-header">
|
|
<span class="panel-title">OPERATOR PROFILE</span>
|
|
<span class="panel-icon">↗</span>
|
|
</div>
|
|
<div class="panel-content">
|
|
<p>Developer, tinkerer, and digital architect. I build things that live on the internet — from self-hosted infrastructure to custom web applications.</p>
|
|
<p>Passionate about open source, cybersecurity, and making technology work the way it should.</p>
|
|
<div class="panel-data">
|
|
<div class="data-row">
|
|
<span class="data-key">CODENAME</span>
|
|
<span class="data-val">JAE</span>
|
|
</div>
|
|
<div class="data-row">
|
|
<span class="data-key">DOMAIN</span>
|
|
<span class="data-val">JAESWIFT.XYZ</span>
|
|
</div>
|
|
<div class="data-row">
|
|
<span class="data-key">CLEARANCE</span>
|
|
<span class="data-val">ADMIN</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="panel" data-animate>
|
|
<div class="panel-header">
|
|
<span class="panel-title">SKILL MATRIX</span>
|
|
<span class="panel-icon">↗</span>
|
|
</div>
|
|
<div class="panel-content">
|
|
<div class="skill-bar">
|
|
<span class="skill-name">LINUX / SYSADMIN</span>
|
|
<div class="bar-track"><div class="bar-fill" data-width="92"></div></div>
|
|
<span class="skill-pct">92%</span>
|
|
</div>
|
|
<div class="skill-bar">
|
|
<span class="skill-name">WEB DEVELOPMENT</span>
|
|
<div class="bar-track"><div class="bar-fill" data-width="85"></div></div>
|
|
<span class="skill-pct">85%</span>
|
|
</div>
|
|
<div class="skill-bar">
|
|
<span class="skill-name">PYTHON</span>
|
|
<div class="bar-track"><div class="bar-fill" data-width="88"></div></div>
|
|
<span class="skill-pct">88%</span>
|
|
</div>
|
|
<div class="skill-bar">
|
|
<span class="skill-name">DOCKER / INFRA</span>
|
|
<div class="bar-track"><div class="bar-fill" data-width="80"></div></div>
|
|
<span class="skill-pct">80%</span>
|
|
</div>
|
|
<div class="skill-bar">
|
|
<span class="skill-name">CYBERSECURITY</span>
|
|
<div class="bar-track"><div class="bar-fill" data-width="75"></div></div>
|
|
<span class="skill-pct">75%</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Blog Section -->
|
|
<section class="section" id="blog">
|
|
<div class="section-container">
|
|
<div class="section-header">
|
|
<span class="section-tag">02</span>
|
|
<h2 class="section-title">BLOG<span class="accent">_</span>FEED</h2>
|
|
<div class="section-line"></div>
|
|
</div>
|
|
<div class="blog-grid" id="blogGrid">
|
|
<!-- Posts loaded dynamically from API -->
|
|
<div class="blog-loading-placeholder">
|
|
<span class="loading-spinner"></span>
|
|
<span>LOADING TRANSMISSIONS...</span>
|
|
</div>
|
|
</div>
|
|
<div class="blog-view-all" style="text-align:center; margin-top:2rem;">
|
|
<a href="/blog" class="blog-view-all-link" style="font-family:'JetBrains Mono',monospace; font-size:0.8rem; color:#00cc33; letter-spacing:2px; text-decoration:none; border:1px solid rgba(0,204,51,0.15); padding:0.6rem 2rem; transition:all 0.3s;">VIEW ALL TRANSMISSIONS →</a>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Development Section -->
|
|
<section class="section" id="development">
|
|
<div class="section-container">
|
|
<div class="section-header">
|
|
<span class="section-tag">03</span>
|
|
<h2 class="section-title">DEV<span class="accent">_</span>OPS</h2>
|
|
<div class="section-line"></div>
|
|
</div>
|
|
<div class="dev-grid">
|
|
<div class="dev-card" data-animate>
|
|
<div class="dev-card-top">
|
|
<span class="dev-icon">⬡</span>
|
|
<span class="dev-status">● ACTIVE</span>
|
|
</div>
|
|
<h3 class="dev-title">Agent Zero</h3>
|
|
<p class="dev-desc">Custom AI agent framework deployment with autonomous task execution capabilities.</p>
|
|
<div class="dev-tech">
|
|
<span class="tech-tag">Python</span>
|
|
<span class="tech-tag">Docker</span>
|
|
<span class="tech-tag">LLM</span>
|
|
</div>
|
|
<div class="dev-links">
|
|
<a href="https://git.jaeswift.xyz/jae" class="dev-link">REPO →</a>
|
|
</div>
|
|
</div>
|
|
<div class="dev-card" data-animate>
|
|
<div class="dev-card-top">
|
|
<span class="dev-icon">◈</span>
|
|
<span class="dev-status">● ACTIVE</span>
|
|
</div>
|
|
<h3 class="dev-title">Infrastructure Stack</h3>
|
|
<p class="dev-desc">Self-hosted services including Gitea, monitoring, reverse proxies, and automated deployments.</p>
|
|
<div class="dev-tech">
|
|
<span class="tech-tag">Linux</span>
|
|
<span class="tech-tag">Nginx</span>
|
|
<span class="tech-tag">Docker</span>
|
|
</div>
|
|
<div class="dev-links">
|
|
<a href="#" class="dev-link">DETAILS →</a>
|
|
</div>
|
|
</div>
|
|
<div class="dev-card" data-animate>
|
|
<div class="dev-card-top">
|
|
<span class="dev-icon">◉</span>
|
|
<span class="dev-status status-dev">◌ IN DEV</span>
|
|
</div>
|
|
<h3 class="dev-title">JAESWIFT.XYZ</h3>
|
|
<p class="dev-desc">This website — a sci-fi dashboard-inspired personal hub with custom animations and HUD elements.</p>
|
|
<div class="dev-tech">
|
|
<span class="tech-tag">HTML</span>
|
|
<span class="tech-tag">CSS</span>
|
|
<span class="tech-tag">JavaScript</span>
|
|
</div>
|
|
<div class="dev-links">
|
|
<a href="https://git.jaeswift.xyz/jae/jaeswift-website" class="dev-link">REPO →</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Links Section -->
|
|
<section class="section" id="links">
|
|
<div class="section-container">
|
|
<div class="section-header">
|
|
<span class="section-tag">04</span>
|
|
<h2 class="section-title">EXT<span class="accent">_</span>LINKS</h2>
|
|
<div class="section-line"></div>
|
|
</div>
|
|
<div class="links-grid">
|
|
<a href="https://git.jaeswift.xyz/jae" target="_blank" class="link-card" data-animate>
|
|
<div class="link-icon">⟐</div>
|
|
<div class="link-info">
|
|
<span class="link-name">GITEA</span>
|
|
<span class="link-url">git.jaeswift.xyz</span>
|
|
</div>
|
|
<span class="link-arrow">→</span>
|
|
</a>
|
|
<a href="https://gitlab.com/jaeswift" target="_blank" class="link-card" data-animate>
|
|
<div class="link-icon">◈</div>
|
|
<div class="link-info">
|
|
<span class="link-name">GITLAB</span>
|
|
<span class="link-url">gitlab.com/jaeswift</span>
|
|
</div>
|
|
<span class="link-arrow">→</span>
|
|
</a>
|
|
<a href="https://reddit.com/u/jaeswift" target="_blank" class="link-card" data-animate>
|
|
<div class="link-icon">◎</div>
|
|
<div class="link-info">
|
|
<span class="link-name">REDDIT</span>
|
|
<span class="link-url">reddit.com/u/jaeswift</span>
|
|
</div>
|
|
<span class="link-arrow">→</span>
|
|
</a>
|
|
<a href="mailto:jae@jaeswift.xyz" class="link-card" data-animate>
|
|
<div class="link-icon">✉</div>
|
|
<div class="link-info">
|
|
<span class="link-name">EMAIL</span>
|
|
<span class="link-url">jae@jaeswift.xyz</span>
|
|
</div>
|
|
<span class="link-arrow">→</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Contact Section -->
|
|
<section class="section" id="contact">
|
|
<div class="section-container">
|
|
<div class="section-header">
|
|
<span class="section-tag">05</span>
|
|
<h2 class="section-title">COMMS<span class="accent">_</span>LINK</h2>
|
|
<div class="section-line"></div>
|
|
</div>
|
|
<div class="contact-grid">
|
|
<div class="panel contact-panel" data-animate>
|
|
<div class="panel-header">
|
|
<span class="panel-title">TRANSMIT MESSAGE</span>
|
|
<span class="panel-icon">◇</span>
|
|
</div>
|
|
<form class="contact-form" id="contactForm">
|
|
<div class="form-group">
|
|
<label class="form-label">CALLSIGN</label>
|
|
<input type="text" class="form-input" id="contactName" placeholder="Enter your name..." required>
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="form-label">FREQUENCY</label>
|
|
<input type="email" class="form-input" id="contactEmail" placeholder="your@email.com" required>
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="form-label">SUBJECT</label>
|
|
<input type="text" class="form-input" id="contactSubject" placeholder="Transmission subject...">
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="form-label">MESSAGE PAYLOAD</label>
|
|
<textarea class="form-input form-textarea" id="contactMessage" placeholder="Enter your message..." rows="5" required></textarea>
|
|
</div>
|
|
<button type="submit" class="form-submit">
|
|
<span class="submit-text">TRANSMIT</span>
|
|
<span class="submit-icon">▶</span>
|
|
</button>
|
|
</form>
|
|
</div>
|
|
<div class="contact-info" data-animate>
|
|
<div class="panel">
|
|
<div class="panel-header">
|
|
<span class="panel-title">SIGNAL INFO</span>
|
|
<span class="panel-icon">↗</span>
|
|
</div>
|
|
<div class="panel-content">
|
|
<div class="info-block">
|
|
<span class="info-label">PRIMARY CHANNEL</span>
|
|
<span class="info-value">jae@jaeswift.xyz</span>
|
|
</div>
|
|
<div class="info-block">
|
|
<span class="info-label">RESPONSE TIME</span>
|
|
<span class="info-value">~24 HOURS</span>
|
|
</div>
|
|
<div class="info-block">
|
|
<span class="info-label">ENCRYPTION</span>
|
|
<span class="info-value">PGP AVAILABLE</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="panel terminal-panel">
|
|
<div class="panel-header">
|
|
<span class="panel-title">TERMINAL</span>
|
|
<span class="panel-icon">_</span>
|
|
</div>
|
|
<div class="terminal-content" id="terminal">
|
|
<div class="term-line"><span class="term-prompt">jae@swift:~$</span> <span class="term-cmd">whoami</span></div>
|
|
<div class="term-line term-output">jae</div>
|
|
<div class="term-line"><span class="term-prompt">jae@swift:~$</span> <span class="term-cmd">cat /etc/motd</span></div>
|
|
<div class="term-line term-output">Welcome to jaeswift.xyz</div>
|
|
<div class="term-line term-output">All systems operational.</div>
|
|
<div class="term-line"><span class="term-prompt">jae@swift:~$</span> <span class="term-cursor">█</span></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Footer -->
|
|
<footer class="footer">
|
|
<div class="footer-container">
|
|
<div class="footer-left">
|
|
<span class="footer-logo">[JAE<span class="accent">SWIFT</span>]</span>
|
|
<span class="footer-copy">© 2026 // ALL SYSTEMS NOMINAL</span>
|
|
</div>
|
|
<div class="footer-right">
|
|
<span class="footer-coords">LAT: +51.5° // LONG: -0.1°</span>
|
|
<span class="footer-signal" id="footerSignal">SIGNAL: ████████░░ 80%</span>
|
|
</div>
|
|
</div>
|
|
<div class="footer-bar"></div>
|
|
</footer>
|
|
|
|
<script src="/js/main.js"></script>
|
|
<script src="/js/nav.js"></script>
|
|
<script src="/js/chat.js"></script>
|
|
</body>
|
|
</html>
|