<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Inter', sans-serif;
display: flex;
flex-direction: column;
min-height: 100vh;
transition: background 0.3s;
}
/* Header Styles */
header {
position: sticky;
top: 0;
width: 100%;
background: rgba(20, 22, 25, 0.95);
backdrop-filter: blur(10px);
padding: 15px 0;
box-shadow: 0 2px 10px rgba(0,0,0,0.3);
z-index: 1000;
}
nav {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
display: flex;
justify-content: space-between;
align-items: center;
}
.logo {
font-size: 1.5em;
font-weight: bold;
color: white;
}
.nav-links {
display: flex;
gap: 30px;
list-style: none;
}
.nav-links a {
color: white;
text-decoration: none;
font-size: 1.1em;
transition: 0.3s;
padding: 8px 16px;
border-radius: 5px;
cursor: pointer;
}
.nav-links a:hover {
background: rgba(255,255,255,0.1);
transform: translateY(-2px);
}
.page-overlay {
position: fixed;
left: 0;
top: 0;
right: 0;
bottom: 0;
background: rgba(0,0,0,0.85);
display: flex;
justify-content: center;
align-items: center;
z-index: 10000;
animation: fadeIn 0.2s;
}
.page-modal {
background: #1a1d22;
padding: 30px;
border-radius: 10px;
width: 90%;
max-width: 1000px;
height: 90vh;
position: relative;
display: flex;
flex-direction: column;
}
.page-modal iframe {
width: 100%;
flex: 1;
border: none;
border-radius: 8px;
background: white;
}
.page-close {
position: absolute;
right: 15px;
top: 15px;
background: red;
color: white;
border: none;
font-size: 1.2em;
width: 35px;
height: 35px;
border-radius: 5px;
cursor: pointer;
transition: 0.3s;
z-index: 1;
}
.page-close:hover {
background: #cc0000;
}
/* Main Content */
main {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
padding: 40px 20px 20px;
}
h1 {
color: white;
text-align: center;
margin-bottom: 40px;
font-size: 2.5em;
}
#container {
width: 100%;
max-width: 900px;
display: flex;
flex-direction: column;
gap: 20px;
}
.section {
border-radius: 8px;
padding: 30px;
text-align: center;
cursor: pointer;
transition: 0.3s;
box-shadow: 0 3px 10px rgba(0,0,0,0.4);
}
.section:hover {
transform: translateY(-5px);
box-shadow: 0 6px 20px rgba(0,0,0,0.5);
}
.section img {
width: 150px;
height: 150px;
border-radius: 6px;
object-fit: cover;
margin-bottom: 15px;
}
.section-title {
font-size: 1.6em;
margin: 10px 0;
font-weight: bold;
}
.desc {
opacity: 0.8;
font-size: 1em;
line-height: 1.4em;
}
/* Overlay styles */
.overlay {
position: fixed;
left:0; top:0; right:0; bottom:0;
background: rgba(0,0,0,0.85);
display: flex;
justify-content:center;
align-items:center;
z-index: 9999;
animation: fadeIn 0.2s;
}
@keyframes fadeIn { from {opacity:0;} to {opacity:1;} }
.modal {
background: #1a1d22;
padding: 30px;
border-radius: 10px;
width: 90%;
max-width: 600px;
max-height: 80vh;
overflow-y: auto;
position: relative;
}
.modal img {
width: 200px;
height: 200px;
object-fit: cover;
border-radius: 6px;
display: block;
margin: 0 auto 20px;
}
.modal-title {
text-align: center;
font-size: 2em;
color: white;
margin-bottom: 15px;
}
.modal-text {
font-size: 1.2em;
color: #ccc;
line-height: 1.7em;
white-space: pre-wrap;
}
.modal-text::first-letter {
font-size: 3em;
float: left;
margin-right: 6px;
font-weight: bold;
line-height: 0.9;
}
.audio-btn {
background: #6b8cae;
color:white;
border:none;
padding: 10px 20px;
border-radius:6px;
cursor:pointer;
margin: 10px auto;
display:block;
transition: 0.3s;
}
.audio-btn:hover {
background: #7a9cc0;
}
.close-btn {
position:absolute;
right:15px;
top:15px;
background:red;
color:white;
border:none;
font-size:1.2em;
width:35px;
height:35px;
border-radius:5px;
cursor:pointer;
transition: 0.3s;
}
.close-btn:hover {
background: #cc0000;
}
/* Mobile Responsive */
@media (max-width: 768px) {
.nav-links {
gap: 15px;
}
.nav-links a {
font-size: 0.9em;
padding: 6px 10px;
}
.logo {
font-size: 1.2em;
}
h1 {
font-size: 1.8em;
}
}
</style>
</head>
<body>
<header>
<nav>
<div class="logo">Larrys Site</div>
<ul class="nav-links">
<li><a onclick="showOverlayIframe('bio.html')">Bio</a></li>
<li><a onclick="showOverlayIframe('contact.html')">Contact</a></li>
<li><a onclick="showOverlayIframe('purchase.html')">Purchase</a></li>
<li><a onclick="showOverlayIframe('donate.html')">Donate</a></li>
</ul>
</nav>
</header>
<main>
<h1>Larrys Stories</h1>
<div id="container"></div>
</main>
<script>
let styles = [
{ name:'Classic Dark', background:'#2b2d31', card:'#3d4147', text:'#d4d4d4', wire:false, neon:false, line:false },
{ name:'Neon', background:'#050505', card:'#0b0014', text:'#fff', wire:false, neon:true, line:false },
{ name:'Wireframe Neon', background:'#050505', card:'transparent', text:'#fff', wire:true, neon:true, line:false },
{ name:'Neon Line', background:'#050505', card:'transparent', text:'#fff', wire:false, neon:true, line:true },
{ name:'Line Bottom', background:'#35373b', card:'transparent', text:'#c9c9c9', wire:false, neon:false, line:true },
{ name:'Rounded Wireframe', background:'#2e3035', card:'#2e3035', text:'#b8b8b8', wire:true, neon:false, line:false },
{ name:'Wireframe', background:'#2e3035', card:'#2e3035', text:'#b8b8b8', wire:true, neon:false, line:false },
{ name:'Invisible Block', background:'#35373b', card:'transparent', text:'#c9c9c9', wire:false, neon:false, line:false }
];
let currentStyle = 0;
let currentAudio = null;
let speaking = false;
fetch("sections.json?t=" + Date.now())
.then(r=>r.json())
.then(json => {
currentStyle = json.style || 0;
render(json.sections);
})
.catch(() => {
// Demo data if sections.json not found
const demoSections = [
{
title: "Demo Section 1",
description: "This is a demo section. Replace with your sections.json file.",
image: "https://via.placeholder.com/150",
color: "#6b8cae"
},
{
title: "Demo Section 2",
description: "Another demo section showing the layout and functionality.",
image: "https://via.placeholder.com/150",
color: "#ae6b8c"
}
];
render(demoSections);
});
function render(sections) {
let theme = styles[currentStyle];
document.body.style.background = theme.background;
document.body.style.color = theme.text;
const container = document.getElementById("container");
container.innerHTML = "";
sections.forEach(sec => {
const div = document.createElement("div");
div.className = "section";
div.style.background = theme.card;
div.style.color = theme.text;
if (theme.wire) div.style.border = `2px solid ${sec.color}`;
if (theme.neon) div.style.boxShadow = "0 0 12px " + sec.color;
if (theme.line) div.style.borderBottom = "4px solid " + sec.color;
div.onclick = () => showOverlay(sec);
div.innerHTML = `
${sec.image ? `<img src="${sec.image}">` : ''}
<div class="section-title">${sec.title}</div>
<div class="desc">${sec.description.substring(0,80)}...</div>
`;
container.append(div);
});
}
function showOverlay(section) {
const overlay = document.createElement("div");
overlay.className = "overlay";
const modal = document.createElement("div");
modal.className = "modal";
modal.innerHTML = `
<button class="close-btn">✕</button>
${section.image ? `<img src="${section.image}">` : ''}
<div class="modal-title">${section.title}</div>
<button class="audio-btn">${section.audio ? "🔊 Play Audio" : "📖 Read Aloud"}</button>
<div class="modal-text">${section.description}</div>
`;
overlay.append(modal);
document.body.append(overlay);
modal.querySelector(".close-btn").onclick = () => {
stopAudio();
overlay.remove();
};
modal.querySelector(".audio-btn").onclick = () => playAudio(section, modal.querySelector(".audio-btn"));
}
function stopAudio() {
if (currentAudio) {
currentAudio.pause();
currentAudio = null;
}
if (speaking) {
speechSynthesis.cancel();
speaking = false;
}
}
function playAudio(section, btn) {
if (currentAudio) {
currentAudio.pause();
currentAudio = null;
btn.textContent = section.audio ? "🔊 Play Audio" : "📖 Read Aloud";
return;
}
if (speaking) {
speechSynthesis.cancel();
speaking = false;
btn.textContent = "📖 Read Aloud";
return;
}
if (section.audio) {
currentAudio = new Audio(section.audio);
btn.textContent = "⏸ Stop Audio";
currentAudio.onended = () => {
currentAudio = null;
btn.textContent = "🔊 Play Audio";
};
currentAudio.play();
} else {
const utter = new SpeechSynthesisUtterance(section.description);
speaking = true;
btn.textContent = "⏸ Stop Reading";
utter.onend = () => {
speaking = false;
btn.textContent = "📖 Read Aloud";
};
speechSynthesis.speak(utter);
}
}
function showOverlayIframe(url) {
const overlay = document.createElement("div");
overlay.className = "page-overlay";
const modal = document.createElement("div");
modal.className = "page-modal";
modal.innerHTML = `
<button class="page-close">✕</button>
<iframe src="${url}"></iframe>
`;
overlay.append(modal);
document.body.append(overlay);
modal.querySelector(".page-close").onclick = () => overlay.remove();
overlay.onclick = (e) => {
if (e.target === overlay) overlay.remove();
};
}
</script>
</body>
</html>