diff --git "a/src/glenntyson/images/Screenshot 2026-04-01 at 1.21.38\342\200\257PM.png" "b/src/glenntyson/images/Screenshot 2026-04-01 at 1.21.38\342\200\257PM.png" new file mode 100644 index 0000000..71683bd Binary files /dev/null and "b/src/glenntyson/images/Screenshot 2026-04-01 at 1.21.38\342\200\257PM.png" differ diff --git a/src/glenntyson/index.html b/src/glenntyson/index.html new file mode 100644 index 0000000..c760f18 --- /dev/null +++ b/src/glenntyson/index.html @@ -0,0 +1,63 @@ + + + + + + Shipwreck Shack + + + + +
+
+

☠ Shipwreck Shack ☠

+

Prepare to board...

+ +
+
+ + +
+
+
+ +
+

☠ Shipwreck Shack ☠

+

Where Every Meal Be Treasure

+ +
+ + +
+
+ + + +
+ +
+ +
+ +
+ + + + + + + + +
+ + + + \ No newline at end of file diff --git a/src/glenntyson/script.js b/src/glenntyson/script.js new file mode 100644 index 0000000..b7d41e4 --- /dev/null +++ b/src/glenntyson/script.js @@ -0,0 +1,159 @@ +const menu = [ + { title: "Shaky Pancakes", category: "breakfast", price: "$8.99", img: "https://images.pexels.com/photos/376464/pexels-photo-376464.jpeg?auto=compress&cs=tinysrgb&w=800" }, + { title: "Waffles", category: "breakfast", price: "$9.49", img: "https://images.pexels.com/photos/1251198/pexels-photo-1251198.jpeg?auto=compress&cs=tinysrgb&w=800" }, + { title: "Burger Rats", category: "lunch", price: "$12.99", img: "https://images.pexels.com/photos/1639557/pexels-photo-1639557.jpeg?auto=compress&cs=tinysrgb&w=800" }, + { title: "Chicken Tenders", category: "lunch", price: "$10.99", img: "https://images.pexels.com/photos/616354/pexels-photo-616354.jpeg?auto=compress&cs=tinysrgb&w=800" }, + { title: "French Toast", category: "brunch", price: "$10.99", img: "https://images.pexels.com/photos/566566/pexels-photo-566566.jpeg?auto=compress&cs=tinysrgb&w=800" }, + { title: "Steak", category: "dinner", price: "$22.99", img: "https://images.pexels.com/photos/675951/pexels-photo-675951.jpeg?auto=compress&cs=tinysrgb&w=800" }, + { title: "Salty Salmon", category: "dinner", price: "$19.99", img: "https://images.pexels.com/photos/3296279/pexels-photo-3296279.jpeg?auto=compress&cs=tinysrgb&w=800" }, + { title: "Cannon Nachos", category: "happy", price: "$7.99", img: "https://images.pexels.com/photos/4958641/pexels-photo-4958641.jpeg?auto=compress&cs=tinysrgb&w=800" }, + { title: "Rocking Smoothie", category: "drinks", price: "$5.99", img: "https://images.pexels.com/photos/775032/pexels-photo-775032.jpeg?auto=compress&cs=tinysrgb&w=800" } +]; + +const container = document.getElementById("menu"); +const music = document.getElementById("bgMusic"); +const drink = document.getElementById("drinkSound"); +const coin = document.getElementById("coinSound"); +const cannon = document.getElementById("cannonSound"); +const bell = document.getElementById("bellSound"); +const cursor = document.getElementById("pirateCursor"); + +const introScreen = document.getElementById("introScreen"); +const enterSiteBtn = document.getElementById("enterSiteBtn"); +const grogToggle = document.getElementById("grogToggle"); +const musicToggle = document.getElementById("musicToggle"); +const treasureChest = document.getElementById("treasureChest"); +const navLinks = document.querySelectorAll(".nav-link"); + +document.body.classList.add("js-cursor"); + +/* MENU */ +function showMenu(list) { + if (!container) return; + + container.innerHTML = ""; + + list.forEach(item => { + container.innerHTML += ` +
+ ${item.title} +

${item.title}

+

${item.price}

+
+ `; + }); +} + +navLinks.forEach(btn => { + btn.addEventListener("click", () => { + navLinks.forEach(b => b.classList.remove("active")); + btn.classList.add("active"); + + const page = btn.dataset.page; + const filtered = page === "index" + ? menu + : menu.filter(item => item.category === page); + + showMenu(filtered); + }); +}); + +/* INTRO */ +if (enterSiteBtn && introScreen) { + enterSiteBtn.addEventListener("click", () => { + introScreen.classList.add("hide"); + + if (music) { + music.play().catch(() => {}); + } + + if (bell) { + bell.currentTime = 0; + bell.play().catch(() => {}); + } + + if (musicToggle) { + musicToggle.textContent = music && !music.paused ? "🔇 Pause Music" : "🎵 Music"; + } + }); +} + +/* MUSIC TOGGLE FIX */ +if (musicToggle) { + musicToggle.addEventListener("click", () => { + if (!music) return; + + if (music.paused) { + music.play().then(() => { + musicToggle.textContent = "🔇 Pause Music"; + }).catch(() => {}); + } else { + music.pause(); + musicToggle.textContent = "🎵 Music"; + } + }); +} + +/* GROG */ +if (grogToggle) { + grogToggle.addEventListener("click", () => { + document.body.classList.toggle("grog"); + + if (drink) { + drink.currentTime = 0; + drink.play().catch(() => {}); + } + + if (cannon && document.body.classList.contains("grog")) { + cannon.currentTime = 0; + cannon.play().catch(() => {}); + } + }); +} + +/* CURSOR */ +if (cursor) { + let x = window.innerWidth / 2; + let y = window.innerHeight / 2; + let tx = x; + let ty = y; + + document.addEventListener("mousemove", e => { + tx = e.clientX; + ty = e.clientY; + }); + + function animateCursor() { + x += (tx - x) * 0.2; + y += (ty - y) * 0.2; + + cursor.style.left = `${x}px`; + cursor.style.top = `${y}px`; + + requestAnimationFrame(animateCursor); + } + + animateCursor(); +} + +/* TREASURE */ +if (treasureChest) { + treasureChest.addEventListener("click", () => { + if (coin) { + coin.currentTime = 0; + coin.play().catch(() => {}); + } + + if (bell) { + bell.currentTime = 0; + bell.play().catch(() => {}); + } + }); +} + +showMenu(menu); \ No newline at end of file diff --git a/src/glenntyson/sounds/bell.mp3 b/src/glenntyson/sounds/bell.mp3 new file mode 100644 index 0000000..4b9e37d Binary files /dev/null and b/src/glenntyson/sounds/bell.mp3 differ diff --git a/src/glenntyson/sounds/cannon.mp3 b/src/glenntyson/sounds/cannon.mp3 new file mode 100644 index 0000000..724fd2a Binary files /dev/null and b/src/glenntyson/sounds/cannon.mp3 differ diff --git a/src/glenntyson/sounds/coins.mp3 b/src/glenntyson/sounds/coins.mp3 new file mode 100644 index 0000000..d3dcd2c Binary files /dev/null and b/src/glenntyson/sounds/coins.mp3 differ diff --git a/src/glenntyson/sounds/drink.mp3 b/src/glenntyson/sounds/drink.mp3 new file mode 100644 index 0000000..c1db557 Binary files /dev/null and b/src/glenntyson/sounds/drink.mp3 differ diff --git a/src/glenntyson/sounds/sea-shanty.mp3 b/src/glenntyson/sounds/sea-shanty.mp3 new file mode 100644 index 0000000..23451b0 Binary files /dev/null and b/src/glenntyson/sounds/sea-shanty.mp3 differ diff --git a/src/glenntyson/sounds/waves.mp3 b/src/glenntyson/sounds/waves.mp3 new file mode 100644 index 0000000..e6bbd69 Binary files /dev/null and b/src/glenntyson/sounds/waves.mp3 differ diff --git a/src/glenntyson/styles.css b/src/glenntyson/styles.css new file mode 100644 index 0000000..3f04aa2 --- /dev/null +++ b/src/glenntyson/styles.css @@ -0,0 +1,161 @@ +* { box-sizing: border-box; } + +body { + margin: 0; + background: linear-gradient(to bottom, #08131c, #2f2119); + color: #f3e6c8; + font-family: Georgia, serif; + text-align: center; + overflow-x: hidden; +} + +/* FORCE HIDE REAL CURSOR EVERYWHERE */ +body.js-cursor, +body.js-cursor * { + cursor: none !important; +} + +/* LAYOUT */ +header, nav, main { + position: relative; + z-index: 5; +} + +/* INTRO */ +.intro-screen { + position: fixed; + inset: 0; + background: black; + display: grid; + place-items: center; + z-index: 10000; +} + +.intro-screen.hide { + display: none; +} + +/* BACKGROUND FX */ +.ocean-overlay, +.moon-glow, +.lighthouse-beam { + position: fixed; + z-index: 0; + pointer-events: none; +} + +.ocean-overlay { + inset: 0; + background: repeating-linear-gradient( + 120deg, + rgba(173,216,230,.2) 0 2px, + transparent 2px 20px + ); +} + +.moon-glow { + top: 50px; + right: 60px; + width: 120px; + height: 120px; + border-radius: 50%; + background: radial-gradient(circle, white, transparent 70%); +} + +.lighthouse-beam { + top: 100px; + right: 100px; + width: 50vw; + height: 20px; + background: linear-gradient(to left, rgba(255,255,200,.4), transparent); + animation: beam 6s infinite; +} + +@keyframes beam { + 0% { transform: rotate(-10deg); } + 50% { transform: rotate(15deg); } + 100% { transform: rotate(-10deg); } +} + +/* NAV */ +.nav-menu { + display: flex; + justify-content: center; + gap: 10px; + flex-wrap: wrap; +} + +button { + padding: 10px; + background: #5f402b; + color: white; + border-radius: 8px; +} + +.active { + background: gold; + color: black; +} + +/* MENU */ +.menu-container { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(250px,1fr)); + gap: 20px; + padding: 20px; +} + +.menu-item { + background: #422918; + padding: 10px; + border-radius: 10px; +} + +.menu-item img { + width: 100%; + height: 180px; + object-fit: cover; +} + +/* GROG */ +body.grog { + animation: sway 2s infinite; +} + +@keyframes sway { + 0% { transform: rotate(-.5deg); } + 50% { transform: rotate(.5deg); } + 100% { transform: rotate(-.5deg); } +} + +/* ⛵ PIRATE SHIP CURSOR */ +.pirate-cursor { + position: fixed; + width: 60px; + height: 60px; + pointer-events: none; + z-index: 999999; + transform: translate(-50%, -50%); + animation: shipRock 1.5s infinite; +} + +.pirate-cursor::before { + content: "⛵"; + font-size: 30px; + position: absolute; + left: 10px; +} + +.pirate-cursor::after { + content: "🌊"; + position: absolute; + top: 30px; + left: 15px; + font-size: 22px; +} + +@keyframes shipRock { + 0% { transform: translate(-50%, -50%) rotate(-8deg); } + 50% { transform: translate(-50%, -50%) rotate(8deg); } + 100% { transform: translate(-50%, -50%) rotate(-8deg); } +} \ No newline at end of file