345 lines
13 KiB
HTML
345 lines
13 KiB
HTML
<!DOCTYPE html>
|
||
<html>
|
||
|
||
<head>
|
||
<title>Lower Decks PADD</title>
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
|
||
<meta name="format-detection" content="telephone=no">
|
||
<meta name="format-detection" content="date=no">
|
||
<link rel="stylesheet" type="text/css" href="assets/lower-decks-padd.css">
|
||
</head>
|
||
|
||
<body>
|
||
<audio id="audio1" src="assets/beep1.mp3" preload="auto"></audio>
|
||
<audio id="audio2" src="assets/beep2.mp3" preload="auto"></audio>
|
||
<audio id="audio3" src="assets/beep3.mp3" preload="auto"></audio>
|
||
<audio id="audio4" src="assets/beep4.mp3" preload="auto"></audio>
|
||
<div class="wrap-all">
|
||
<div class="wrap">
|
||
<div class="left-frame-top">
|
||
<!--
|
||
*** LCARS PANEL BUTTON ***
|
||
Replace the hashtag '#' with a real URL (or not) in the following <button> tag. If you do not want a sound effect for this link, replace the <button> element with the following <div> + <a> elements:
|
||
|
||
<div class="panel-1">
|
||
<a href="#">LCARS</a>
|
||
</div>
|
||
-->
|
||
<button onclick="playSoundAndRedirect('audio2', '#')" class="panel-1-button">LCARS</button>
|
||
<div class="panel-2">02<span class="hop">-262000</span></div>
|
||
</div>
|
||
<div class="right-frame-top">
|
||
<div class="banner">LCARS 57436.2</div>
|
||
<div class="data-cascade-button-group">
|
||
<div class="data-wrapper">
|
||
<div class="data-column">
|
||
<div class="dc-row-1 font-arctic-ice">47</div>
|
||
<div class="dc-row-2">31</div>
|
||
<div class="dc-row-3">28</div>
|
||
<div class="dc-row-4">94</div>
|
||
</div>
|
||
<div class="data-column">
|
||
<div class="dc-row-1">329</div>
|
||
<div class="dc-row-2 font-night-rain">128</div>
|
||
<div class="dc-row-3">605</div>
|
||
<div class="dc-row-4">704</div>
|
||
</div>
|
||
<div class="data-column">
|
||
<div class="dc-row-1 font-night-rain">39725514862</div>
|
||
<div class="dc-row-2 font-arctic-ice">51320259663</div>
|
||
<div class="dc-row-3 font-alpha-blue">21857221984</div>
|
||
<div class="dc-row-4">40372566301</div>
|
||
</div>
|
||
<div class="data-column">
|
||
<div class="dc-row-1 font-arctic-ice">56</div>
|
||
<div class="dc-row-2 font-night-rain">04</div>
|
||
<div class="dc-row-3 font-night-rain">40</div>
|
||
<div class="dc-row-4 font-night-rain">35</div>
|
||
</div>
|
||
<div class="data-column">
|
||
<div class="dc-row-1 font-arctic-ice">614</div>
|
||
<div class="dc-row-2 font-arctic-ice">883</div>
|
||
<div class="dc-row-3 font-alpha-blue">109</div>
|
||
<div class="dc-row-4">297</div>
|
||
</div>
|
||
<div class="data-column">
|
||
<div class="dc-row-1 darkspace darkfont">000</div>
|
||
<div class="dc-row-2 darkspace font-alpha-blue">13</div>
|
||
<div class="dc-row-3 darkspace font-arctic-ice">05</div>
|
||
<div class="dc-row-4 darkspace font-night-rain">25</div>
|
||
</div>
|
||
<div class="data-column">
|
||
<div class="dc-row-1">48</div>
|
||
<div class="dc-row-2 font-night-rain">07</div>
|
||
<div class="dc-row-3">38</div>
|
||
<div class="dc-row-4">62</div>
|
||
</div>
|
||
<div class="data-column">
|
||
<div class="dc-row-1">416</div>
|
||
<div class="dc-row-2 font-night-rain">001</div>
|
||
<div class="dc-row-3">888</div>
|
||
<div class="dc-row-4">442</div>
|
||
</div>
|
||
<div class="data-column">
|
||
<div class="dc-row-1 font-night-rain">86225514862</div>
|
||
<div class="dc-row-2 font-arctic-ice">31042009183</div>
|
||
<div class="dc-row-3 font-alpha-blue">74882306985</div>
|
||
<div class="dc-row-4">54048523421</div>
|
||
</div>
|
||
<div class="data-column">
|
||
<div class="dc-row-1 font-alpha-blue">10</div>
|
||
<div class="dc-row-2">80</div>
|
||
<div class="dc-row-3 font-night-rain">31</div>
|
||
<div class="dc-row-4 font-alpha-blue">85</div>
|
||
</div>
|
||
<div class="data-column">
|
||
<div class="dc-row-1 font-alpha-blue">87</div>
|
||
<div class="dc-row-2">71</div>
|
||
<div class="dc-row-3 font-night-rain">40</div>
|
||
<div class="dc-row-4 font-night-rain">26</div>
|
||
</div>
|
||
<div class="data-column">
|
||
<div class="dc-row-1">98</div>
|
||
<div class="dc-row-2">63</div>
|
||
<div class="dc-row-3 font-night-rain">52</div>
|
||
<div class="dc-row-4 font-alpha-blue">71</div>
|
||
</div>
|
||
<div class="data-column">
|
||
<div class="dc-row-1">118</div>
|
||
<div class="dc-row-2">270</div>
|
||
<div class="dc-row-3">395</div>
|
||
<div class="dc-row-4">260</div>
|
||
</div>
|
||
<div class="data-column">
|
||
<div class="dc-row-1">8675309</div>
|
||
<div class="dc-row-2 font-night-rain">7952705</div>
|
||
<div class="dc-row-3">9282721</div>
|
||
<div class="dc-row-4">4981518</div>
|
||
</div>
|
||
<div class="data-column">
|
||
<div class="dc-row-1 darkspace darkfont">000</div>
|
||
<div class="dc-row-2 darkspace font-alpha-blue">99</div>
|
||
<div class="dc-row-3 darkspace font-arctic-ice">10</div>
|
||
<div class="dc-row-4 darkspace font-night-rain">84</div>
|
||
</div>
|
||
<div class="data-column">
|
||
<div class="dc-row-1">65821407321</div>
|
||
<div class="dc-row-2 font-alpha-blue">54018820533</div>
|
||
<div class="dc-row-3 font-night-rain">27174523016</div>
|
||
<div class="dc-row-4">38954062564</div>
|
||
</div>
|
||
<div class="data-column">
|
||
<div class="dc-row-1 font-arctic-ice">999</div>
|
||
<div class="dc-row-2 font-arctic-ice">202</div>
|
||
<div class="dc-row-3 font-alpha-blue">574</div>
|
||
<div class="dc-row-4">293</div>
|
||
</div>
|
||
<div class="data-column">
|
||
<div class="dc-row-1">3872</div>
|
||
<div class="dc-row-2 font-night-rain">1105</div>
|
||
<div class="dc-row-3">1106</div>
|
||
<div class="dc-row-4 font-alpha-blue">7411</div>
|
||
</div>
|
||
</div>
|
||
<nav>
|
||
<!--
|
||
*** MAIN NAVIGATION BUTTONS ***
|
||
Replace the hashtag '#' with a real URL (or not).
|
||
If you don't want sound effects, replace the <button> element with a basic <a> tag shown here in this comment:
|
||
<a href="#">01</a>
|
||
<a href="#">02</a>
|
||
<a href="#">03</a>
|
||
<a href="#">04</a>
|
||
-->
|
||
<button onclick="playSoundAndRedirect('audio2', '#')">01</button>
|
||
<button onclick="playSoundAndRedirect('audio2', '#')">02</button>
|
||
<button onclick="playSoundAndRedirect('audio2', '#')">03</button>
|
||
<button onclick="playSoundAndRedirect('audio2', '#')">04</button>
|
||
</nav>
|
||
</div>
|
||
<div class="bar-panel first-bar-panel">
|
||
<div class="bar-1"> </div>
|
||
<div class="bar-2"> </div>
|
||
<div class="bar-3"> </div>
|
||
<div class="bar-4"> </div>
|
||
<div class="bar-5"> </div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="divider">
|
||
<div class="block-left"> </div>
|
||
<div class="block-right">
|
||
<div class="block-row">
|
||
<div class="bar-11"> </div>
|
||
<div class="bar-12"> </div>
|
||
<div class="bar-13"> </div>
|
||
<div class="bar-14">
|
||
<div class="blockhead"> </div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="wrap">
|
||
<div class="left-frame">
|
||
<!--
|
||
** SCROLL TO TOP OF PAGE BUTTON **
|
||
This button is initially hidden, and is styled like a panel in the sidebar. It appears at the bottom of the page after vertical scrolling. If you don't want the sound effect, replace with this:
|
||
<button onclick="topFunction()" id="topBtn"><span class="hop">screen</span> top</button>
|
||
-->
|
||
<button onclick="topFunction(); playSoundAndRedirect('audio4', '#')" id="topBtn"><span
|
||
class="hop">screen</span> top</button>
|
||
<div>
|
||
<div class="panel-3">03<span class="hop">-111968</span></div>
|
||
<div class="panel-4">04<span class="hop">-041969</span></div>
|
||
<div class="panel-5">05<span class="hop">-1701D</span></div>
|
||
<div class="panel-6">06<span class="hop">-071984</span></div>
|
||
</div>
|
||
<div>
|
||
<div class="panel-7">07<span class="hop">-081940</span></div>
|
||
</div>
|
||
</div>
|
||
<div class="right-frame">
|
||
<div class="bar-panel">
|
||
<div class="bar-6"> </div>
|
||
<div class="bar-7"> </div>
|
||
<div class="bar-8"> </div>
|
||
<div class="bar-9"> </div>
|
||
<div class="bar-10"> </div>
|
||
</div>
|
||
<main>
|
||
<div class="lcars-message-stack"
|
||
style="display: flex; flex-direction: column; gap: 0.5rem; width: 100%; padding: 1rem;">
|
||
|
||
<!-- CRITICAL -->
|
||
<div class="lcars-message critical pulse-rate-high" data-count="1">
|
||
<div style="display: flex; align-items: center;">
|
||
<div class="data-bullet bullet-sunset-red" style="margin-right: 0.75rem;"></div>
|
||
<div class="lcars-text-bar background-sunset-red">
|
||
<span class="font-sunset-red">CRITICAL: Core logic node recursion detected! ACK
|
||
required!</span>
|
||
</div>
|
||
<span class="counter font-sunset-red" style="margin-left: 0.5rem;">×1</span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ALERT -->
|
||
<div class="lcars-message alert pulse" data-count="1">
|
||
<div style="display: flex; align-items: center;">
|
||
<div class="data-bullet bullet-radioactive" style="margin-right: 0.75rem;"></div>
|
||
<div class="lcars-text-bar background-radioactive">
|
||
<span class="font-radioactive">ALERT: Warp coil 7C emitting sparks</span>
|
||
</div>
|
||
<span class="counter font-radioactive" style="margin-left: 0.5rem;">×1</span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- WARNING -->
|
||
<div class="lcars-message warning blink" data-count="1">
|
||
<div style="display: flex; align-items: center;">
|
||
<div class="data-bullet bullet-arctic-ice" style="margin-right: 0.75rem;"></div>
|
||
<div class="lcars-text-bar background-arctic-ice">
|
||
<span class="font-arctic-ice">WARNING: Deck 4 humidity spike detected</span>
|
||
</div>
|
||
<span class="counter font-arctic-ice" style="margin-left: 0.5rem;">×1</span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- NOTICE -->
|
||
<div class="lcars-message notice blink-slow" data-count="1">
|
||
<div style="display: flex; align-items: center;">
|
||
<div class="data-bullet bullet-beta-blue" style="margin-right: 0.75rem;"></div>
|
||
<div class="lcars-text-bar background-beta-blue">
|
||
<span class="font-beta-blue">NOTICE: Deck 8 greenhouse light cycling</span>
|
||
</div>
|
||
<span class="counter font-beta-blue" style="margin-left: 0.5rem;">×1</span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- INFO -->
|
||
<div class="lcars-message info smoke-glass" data-count="1">
|
||
<div style="display: flex; align-items: center;">
|
||
<div class="data-bullet bullet-alpha-blue" style="margin-right: 0.75rem;"></div>
|
||
<div class="lcars-text-bar background-alpha-blue">
|
||
<span class="font-alpha-blue">INFO: Crewman Mariner spilled coffee</span>
|
||
</div>
|
||
<span class="counter font-alpha-blue" style="margin-left: 0.5rem;">×1</span>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<script>
|
||
const stack = document.querySelector('.lcars-message-stack');
|
||
|
||
// Function to add a new message
|
||
function addMessage(level, text) {
|
||
const existing = [...stack.children].find(msg =>
|
||
msg.classList.contains(level) && msg.querySelector('span').innerText === text
|
||
);
|
||
|
||
if (existing) {
|
||
// Increment stack counter
|
||
let countSpan = existing.querySelector('.counter');
|
||
let count = parseInt(existing.dataset.count) + 1;
|
||
existing.dataset.count = count;
|
||
countSpan.innerText = `×${count}`;
|
||
|
||
// Animate a tiny shake to highlight repeat
|
||
existing.style.transform = "translateX(10px)";
|
||
setTimeout(() => existing.style.transform = "translateX(0)", 150);
|
||
} else {
|
||
const div = document.createElement('div');
|
||
div.className = `lcars-message ${level}`;
|
||
div.dataset.count = "1";
|
||
|
||
div.innerHTML = `
|
||
<div style="display: flex; align-items: center;">
|
||
<div class="data-bullet bullet-${level}" style="margin-right: 0.75rem;"></div>
|
||
<div class="lcars-text-bar background-${level}">
|
||
<span class="font-${level}">${text}</span>
|
||
</div>
|
||
<span class="counter font-${level}" style="margin-left: 0.5rem;">×1</span>
|
||
</div>
|
||
`;
|
||
stack.prepend(div); // CRITICAL messages appear on top
|
||
if (level === "critical") {
|
||
div.scrollIntoView({ behavior: "smooth" });
|
||
}
|
||
|
||
// Auto-fade INFO / NOTICE
|
||
if (level === "info" || level === "notice") {
|
||
setTimeout(() => {
|
||
div.style.transition = "opacity 2s";
|
||
div.style.opacity = 0;
|
||
setTimeout(() => div.remove(), 2000);
|
||
}, 5000);
|
||
}
|
||
}
|
||
}
|
||
|
||
// Demo: add repeated messages over time
|
||
setTimeout(() => addMessage('critical', 'Core logic node recursion detected! ACK required!'), 2000);
|
||
setTimeout(() => addMessage('alert', 'Warp coil 7C emitting sparks'), 3500);
|
||
setTimeout(() => addMessage('info', 'Crewman Mariner spilled coffee'), 5000);
|
||
|
||
</script>
|
||
|
||
</main>
|
||
<footer>
|
||
<!-- Your copyright information is only a suggestion and you can choose to delete it. -->
|
||
Content Copyright © 2025 ld.hedeler.com <br>
|
||
|
||
<!-- The following attribution must not be removed: -->
|
||
LCARS Inspired Website Template by <a href="https://www.thelcars.com">www.TheLCARS.com</a>.
|
||
</footer>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<script type="text/javascript" src="assets/lcars.js"></script>
|
||
<div class="headtrim"> </div>
|
||
<div class="baseboard"> </div>
|
||
</body>
|
||
|
||
</html> |