<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
:root {
--fg1: #aab3c0;
--fg2: #6e6e87;
--mg: #40404f;
--bg1: #2a2a33;
--bg2: #25252d;
--acc: #6087ae;
}
a, h1, h2, h3, code, p, ul, ol, li, blockquote {
color: var(--fg1);
}
blockquote {
font-style: italic;
margin: 0;
padding: 1rem;
background-color: var(--mg);
}
pre {
margin: 0;
padding: 1rem;
}
code {
color: var(--acc);
white-space: pre-wrap;
}
.checklist {
list-style-type: none;
padding-left: 0;
margin-left: 0;
}
body, html {
margin: 0;
padding: 0;
font-family: Arial, Helvetica, sans-serif;
background: var(--bg2);
}
* {
box-sizing: border-box;
}
.progress-bar {
position: sticky;
top: 0;
background: var(--bg1);
border-bottom: none;
z-index: 1000;
}
.progress-container {
width: 100%;
height: 0.5rem;
background: var(--bg1);
position: relative;
}
img {
max-width: 33vw;
height: auto;
}
.progress-fill {
height: 100%;
background: var(--acc);
width: 0%;
transition: width .25s ease;
}
.progress-text {
position: absolute;
left: 2rem;
right: 2rem;
top: 1rem;
display: flex;
justify-content: space-between;
font-weight: bold;
font-weight: 400;
font-size: 0.8rem;
color: var(--acc);
}
.content {
padding: 2rem;
}
.slide {
display: none;
background: var(--bg1);
padding: 1rem;
box-shadow: none;
min-height:90vh;
}
.slide h1 {
margin-top: 0;
}
</style><script>document.addEventListener("DOMContentLoaded", () => {
const sections = [...document.querySelectorAll(".section")];
const presentation = [];
sections.forEach((section, sectionNumber) => {
const slides = [...section.querySelectorAll(":scope > .slide")];
slides.forEach((slide, slideNumber) => {
presentation.push({
element: slide,
sectionTitle: section.dataset.title,
slideTitle: slide.dataset.title,
sectionNumber,
slideNumber,
});
});
});
let current = 0;
function updateProgress() {
const progress = ((current + 1) / presentation.length) * 100;
document.querySelector(".progress-bar").innerHTML = `
<div class="progress-container">
<div class="progress-fill" style="width:${progress}%"></div>
<div class="progress-text">
<div class="progress-section">
${presentation[current].sectionTitle}
</div>
<div class="progress-slide">
${presentation[current].slideTitle}
${current + 1}/${presentation.length}
</div>
</div>
</div>
`;
}
function showSlide(index) {
index = Math.max(0, Math.min(index, presentation.length - 1));
presentation.forEach((item) => {
item.element.style.display = "none";
});
presentation[index].element.style.display = "block";
current = index;
updateProgress();
}
document.addEventListener("keydown", (e) => {
if (e.key === "ArrowRight") {
showSlide(current + 1);
}
if (e.key === "ArrowLeft") {
showSlide(current - 1);
}
});
showSlide(0);
});
</script><title>Presentation name</title>
</head><body><div class="progress-bar"></div><div class="content">
<div class="section" data-title="Presentation name">
<div class="slide" data-title="Introduction"><p></p><p>This is an introduction. The first section header will define the name of the</p><p>html page itself.</p><p></p>
</div>
</div>
<div class="section" data-title="First section (but technically the second)">
<div class="slide" data-title="First slide of first section"><p></p><h2>Header for the first slide</h2><p></p><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer vitae justo sed erat volutpat facilisis.</p><p></p><ul>
<li>Key point A</li>
<li>Key point B</li>
<li>Key point C</li></ul><p></p>
</div>
<div class="slide" data-title="Second slide of first section"><p></p><h2>Header for the second slide</h2><h3>Subheader for the second slide</h3><p></p><p>Some random placeholder text.</p><p></p><ol>
<li>First item</li>
<li>Second item</li>
<li>Third item</li></ol><p></p>
</div>
<div class="slide" data-title="Third slide of first section"><p></p><blockquote>"This is a sample quote...?"</blockquote><p></p><ol class="checklist"><li><input type="checkbox" disabled> check item A</li><li><input type="checkbox" disabled> check item B</li><li><input type="checkbox" checked disabled> check item C</li></ol><p></p><p>Additional placeholder paragraph.</p><p></p>
</div>
</div>
<div class="section" data-title="Second section">
<div class="slide" data-title="First slide of second section"><p></p><p>This section introduces another topic with generic placeholder content.</p><p></p>
</div>
<div class="slide" data-title="Second slide of second section"><p></p><ul>
<li>Example bullet one</li>
<li>Example bullet two</li>
<li>Example bullet three</li></ul><p></p><a href="www.google.com" target="_blank">google</a><p></p>
</div>
<div class="slide" data-title="Third slide of second section"><p></p><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec non augue ut nisi faucibus cursus.</p><p></p>
</div>
<div class="slide" data-title="Fourth slide - Rust code"><p></p><p>Here is some rust code</p><p></p><pre><code lang="rust">
struct Product {
name: String,
price: f64,
}
fn main() {
let products = vec![
Product { name: String::from("Laptop"), price: 999.99 },
Product { name: String::from("Mouse"), price: 25.50 },
];
for p in products {
println!("Product: {} | Price: ${:.2}", p.name, p.price);
}
}</code></pre><p></p>
</div>
<div class="slide" data-title="Fifth slide - Bash code"><p></p><p>And here is some bash code?</p><p></p><pre><code lang="bash">
#!/bin/bash
echo "Enter your name:"
read USER_NAME
echo "Hello, $USER_NAME! Counting to 5..."
for i in {1..5}
do
echo "Count: $i"
sleep 0.2
done
echo "Done."</code></pre><p></p>
</div>
</div>
<div class="section" data-title="Summary">
<div class="slide" data-title="Summary"><p></p><h2>This is the end</h2><h3>The last slide</h3><p></p><p>This final slide wraps up the example presentation with placeholder text and a brief conclusion.</p>
</div>
</div></div>
</body>
</html>