624 lines
17 KiB
HTML
624 lines
17 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Friends Like Us Podcast</title>
|
|
<style>
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
body {
|
|
background-color: #e3c5c5;
|
|
color: #333;
|
|
font-family: Arial, sans-serif;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
/* Header Styles */
|
|
header {
|
|
background-color: rgba(255, 255, 255, 0.9);
|
|
padding: 1rem 2rem;
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 1000;
|
|
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.nav-container {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.nav-brand {
|
|
font-size: 1.5rem;
|
|
font-weight: bold;
|
|
color: #003454;
|
|
cursor: pointer;
|
|
transition: color 0.3s ease;
|
|
}
|
|
|
|
.nav-brand:hover {
|
|
color: #004a66;
|
|
}
|
|
|
|
.nav-menu {
|
|
display: flex;
|
|
list-style: none;
|
|
gap: 2rem;
|
|
}
|
|
|
|
.nav-item {
|
|
cursor: pointer;
|
|
padding: 0.5rem 1rem;
|
|
border-radius: 5px;
|
|
transition: background-color 0.3s ease;
|
|
}
|
|
|
|
.nav-item:hover {
|
|
background-color: rgba(0, 52, 84, 0.1);
|
|
}
|
|
|
|
.hamburger {
|
|
display: none;
|
|
flex-direction: column;
|
|
cursor: pointer;
|
|
padding: 5px;
|
|
}
|
|
|
|
.hamburger span {
|
|
width: 25px;
|
|
height: 3px;
|
|
background-color: #333;
|
|
margin: 3px 0;
|
|
transition: 0.3s;
|
|
}
|
|
|
|
/* Mobile Styles */
|
|
@media (max-width: 768px) {
|
|
.nav-menu {
|
|
position: fixed;
|
|
left: -100%;
|
|
top: 70px;
|
|
flex-direction: column;
|
|
background-color: rgba(255, 255, 255, 0.95);
|
|
width: 100%;
|
|
text-align: center;
|
|
transition: 0.3s;
|
|
box-shadow: 0 10px 27px rgba(0, 0, 0, 0.05);
|
|
padding: 1rem 0;
|
|
}
|
|
|
|
.nav-menu.active {
|
|
left: 0;
|
|
}
|
|
|
|
.nav-item {
|
|
margin: 0.25rem 0;
|
|
padding: 0.75rem 1rem;
|
|
}
|
|
|
|
.hamburger {
|
|
display: flex;
|
|
}
|
|
|
|
.hamburger.active span:nth-child(2) {
|
|
opacity: 0;
|
|
}
|
|
|
|
.hamburger.active span:nth-child(1) {
|
|
transform: translateY(8px) rotate(45deg);
|
|
}
|
|
|
|
.hamburger.active span:nth-child(3) {
|
|
transform: translateY(-8px) rotate(-45deg);
|
|
}
|
|
|
|
header {
|
|
padding: 1rem;
|
|
}
|
|
}
|
|
|
|
/* Main Content Styles */
|
|
.page-section {
|
|
display: none;
|
|
padding: 2rem;
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.page-section.active {
|
|
display: block;
|
|
}
|
|
|
|
/* Hero Section */
|
|
.hero {
|
|
text-align: center;
|
|
padding: 3rem 0;
|
|
}
|
|
|
|
.heroinvention {
|
|
text-align: center;
|
|
padding: 2rem 0;
|
|
}
|
|
|
|
.logo-container {
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
.logo-image {
|
|
max-width: 300px;
|
|
height: auto;
|
|
border-radius: 15px;
|
|
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
|
|
}
|
|
|
|
.description {
|
|
font-size: 1.5rem;
|
|
color: #003454;
|
|
font-style: italic;
|
|
margin-bottom: 0rem;
|
|
}
|
|
|
|
.descriptioninvention {
|
|
font-size: 1.5rem;
|
|
color: #003454;
|
|
margin-bottom: 0rem;
|
|
}
|
|
|
|
/* Episodes Embed */
|
|
.episodes-embed-container {
|
|
width: 100%;
|
|
margin: 0rem auto;
|
|
max-width: 1000px;
|
|
position: relative;
|
|
border-radius: 0px;
|
|
overflow: hidden;
|
|
box-shadow: 0 0px 0px rgba(0, 0, 0, 0.3);
|
|
contain: layout style;
|
|
will-change: transform;
|
|
}
|
|
|
|
.episodes-embed-container iframe {
|
|
width: 100%;
|
|
height: 800px;
|
|
border: none;
|
|
display: block;
|
|
transform: translateZ(0);
|
|
backface-visibility: hidden;
|
|
}
|
|
|
|
/* Content Pages */
|
|
.content-page {
|
|
max-width: 800px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.back-button {
|
|
background-color: #003454;
|
|
color: white;
|
|
border: none;
|
|
padding: 0.5rem 1rem;
|
|
border-radius: 5px;
|
|
cursor: pointer;
|
|
margin-bottom: 2rem;
|
|
font-size: 1rem;
|
|
transition: background-color 0.3s ease;
|
|
}
|
|
|
|
.back-button:hover {
|
|
background-color: #004a66;
|
|
}
|
|
|
|
h1 {
|
|
color: #003454;
|
|
margin-bottom: 1.5rem;
|
|
font-size: 2.5rem;
|
|
}
|
|
|
|
h3 {
|
|
color: #003454;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
p {
|
|
margin-bottom: 1rem;
|
|
font-size: 1.1rem;
|
|
}
|
|
|
|
.host-info, .contact-info, .inventionclass {
|
|
margin: 2rem 0;
|
|
padding: 1.5rem;
|
|
background-color: rgba(255, 255, 255, 0.3);
|
|
border-radius: 10px;
|
|
}
|
|
|
|
a {
|
|
color: #003454;
|
|
text-decoration: none;
|
|
}
|
|
|
|
a:hover {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
/* Responsive Design */
|
|
@media (max-width: 768px) {
|
|
.page-section {
|
|
padding: 1rem;
|
|
}
|
|
|
|
.hero {
|
|
padding: 2rem 0;
|
|
}
|
|
|
|
.logo-image {
|
|
max-width: 250px;
|
|
}
|
|
|
|
.description {
|
|
font-size: 1.2rem;
|
|
}
|
|
|
|
h1 {
|
|
font-size: 2rem;
|
|
}
|
|
|
|
.episodes-embed-container iframe {
|
|
margin: 0rem;
|
|
height: 600px;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 480px) {
|
|
.logo-image {
|
|
max-width: 200px;
|
|
}
|
|
|
|
.description {
|
|
font-size: 1rem;
|
|
}
|
|
|
|
h1 {
|
|
font-size: 1.8rem;
|
|
}
|
|
|
|
.episodes-embed-container {
|
|
height: 600px;
|
|
border-radius: 0px;
|
|
}
|
|
|
|
.episodes-embed-container iframe {
|
|
height: 600px;
|
|
}
|
|
}
|
|
|
|
.multi-iframe-container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 2rem;
|
|
max-width: 800px;
|
|
margin: 0 auto;
|
|
padding: 1rem;
|
|
}
|
|
|
|
.iframe-wrapper {
|
|
background-color: #1a1a1a;
|
|
border-radius: 12px;
|
|
overflow: hidden;
|
|
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
|
|
contain: layout style;
|
|
will-change: transform;
|
|
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
|
}
|
|
|
|
.iframespotify-wrapper {
|
|
background-color: #1a1a1a;
|
|
border-radius: 12px;
|
|
overflow: hidden;
|
|
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
|
|
contain: layout style;
|
|
will-change: transform;
|
|
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
|
}
|
|
|
|
.iframe-wrapper:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4);
|
|
}
|
|
|
|
.iframespotify-wrapper:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4);
|
|
}
|
|
|
|
.iframe-wrapper h3 {
|
|
color: #ffffff;
|
|
text-align: center;
|
|
margin: 0;
|
|
padding: 1rem;
|
|
background: linear-gradient(135deg, #023555 0%, #50847B 100%);
|
|
font-size: 1.1rem;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.iframespotify-wrapper h3 {
|
|
color: #ffffff;
|
|
text-align: center;
|
|
margin: 0;
|
|
padding: 1rem;
|
|
background: linear-gradient(135deg, #18D65F 0%, #EFF0F1 100%);
|
|
font-size: 1.1rem;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.iframe-wrapper iframe {
|
|
width: 100%;
|
|
height: 600px;
|
|
border: none;
|
|
display: block;
|
|
transform: translateZ(0);
|
|
backface-visibility: hidden;
|
|
}
|
|
|
|
.iframespotify-wrapper iframe {
|
|
width: 100%;
|
|
height: 1000px;
|
|
border: none;
|
|
display: block;
|
|
transform: translateZ(0);
|
|
backface-visibility: hidden;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.multi-iframe-container {
|
|
padding: 0.5rem;
|
|
gap: 1.5rem;
|
|
}
|
|
|
|
.iframe-wrapper {
|
|
border-radius: 8px;
|
|
}
|
|
|
|
.iframespotify-wrapper {
|
|
border-radius: 8px;
|
|
}
|
|
|
|
.iframe-wrapper iframe {
|
|
height: 350px;
|
|
}
|
|
|
|
.iframespotify-wrapper iframe {
|
|
height: 350px;
|
|
}
|
|
|
|
.iframe-wrapper h3 {
|
|
font-size: 1rem;
|
|
padding: 0.8rem;
|
|
}
|
|
|
|
.iframespotify-wrapper h3 {
|
|
font-size: 1rem;
|
|
padding: 0.8rem;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 480px) {
|
|
.multi-iframe-container {
|
|
gap: 1rem;
|
|
}
|
|
|
|
.iframe-wrapper iframe {
|
|
height: 300px;
|
|
}
|
|
|
|
.iframe-wrapper h3 {
|
|
font-size: 0.9rem;
|
|
padding: 0.6rem;
|
|
}
|
|
|
|
.iframespotify-wrapper h3 {
|
|
font-size: 0.9rem;
|
|
padding: 0.6rem;
|
|
}
|
|
}
|
|
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<header>
|
|
<nav class="nav-container">
|
|
<div class="nav-brand" data-page="home">FRIENDS LIKE US</div>
|
|
<ul class="nav-menu">
|
|
<li class="nav-item" data-page="invention">Invention of the Week</li>
|
|
<li class="nav-item" data-page="about">About</li>
|
|
<li class="nav-item" data-page="contact">Contact Us</li>
|
|
</ul>
|
|
<div class="hamburger">
|
|
<span></span>
|
|
<span></span>
|
|
<span></span>
|
|
</div>
|
|
</nav>
|
|
</header>
|
|
|
|
<main>
|
|
<!-- HOW DO YOU SPEAK -->
|
|
<section id="home" class="page-section active">
|
|
<div class="heroinvention">
|
|
<p class="descriptioninvention">Invention: <b>How Do You Speak at Night</b></p>
|
|
</br>
|
|
</br>
|
|
<p>aka Hear Me Roar</p>
|
|
<p>aka How Do You Sleep at Night</p>
|
|
<p>patent pending (? actually not sure about that) by Francis</p>
|
|
</div>
|
|
|
|
|
|
|
|
<div class="multi-iframe-container">
|
|
|
|
<div class="iframe-wrapper">
|
|
<h3>Episode 2 - Mission Impossible: Ghost Toe-tocal</h3>
|
|
<iframe src="https://fountain.fm/episode/ktMuRNTRctPtLQEVCY83"
|
|
frameborder="0"
|
|
width="100%"
|
|
height="400"
|
|
loading="lazy"
|
|
allow="autoplay; encrypted-media"
|
|
sandbox="allow-scripts allow-same-origin allow-popups allow-forms"
|
|
referrerpolicy="no-referrer-when-downgrade">
|
|
</iframe>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
</section>
|
|
|
|
<!-- INVENTION PAGE -->
|
|
<section id="invention" class="page-section">
|
|
<div class="content-page">
|
|
<button class="back-button" data-page="home">← Back to Home</button>
|
|
<h1>Invention of the Week</h1>
|
|
<p>Every week we reveal an invention that's changed the world, sparked curiosity, or just made us laugh. From the practical to the peculiar, join us as we explore the stories behind humanity's most creative moments.</p>
|
|
|
|
<div class="inventionclass">
|
|
<h3 style="color: #003454; margin-bottom: 1rem;">This Week's Feature</h3>
|
|
<p>Discover how a simple idea transformed into something that touches millions of lives every day. Each invention has a story, and we're here to tell it.</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ABOUT PAGE -->
|
|
<section id="about" class="page-section">
|
|
<div class="content-page">
|
|
<button class="back-button" data-page="home">← Back to Home</button>
|
|
<h1>About Us</h1>
|
|
<p>We are friends.</p>
|
|
|
|
<div class="host-info">
|
|
<h3>Jenna</h3>
|
|
<p>Jenna says hello.</p>
|
|
</div>
|
|
|
|
<div class="host-info">
|
|
<h3>Francis</h3>
|
|
<p>Francis says hi.</p>
|
|
</div>
|
|
|
|
<div class="host-info">
|
|
<h3>Joe</h3>
|
|
<p>Joe just listens.</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- CONTACT PAGE -->
|
|
<section id="contact" class="page-section">
|
|
<div class="content-page">
|
|
<button class="back-button" data-page="home">← Back to Home</button>
|
|
<h1>Contact Us</h1>
|
|
<p>We'd love to hear from you! Whether you have questions, topic suggestions, inventions to share, or just want to say hello, don't hesitate to reach out.</p>
|
|
|
|
<div class="contact-info">
|
|
<h3 style="color: #003454; margin-bottom: 1rem;">Get in Touch</h3>
|
|
<p><strong>Email:</strong> <a href="mailto:friendslikeusofficial@gmail.com">friendslikeusofficial@gmail.com</a></p>
|
|
</div>
|
|
|
|
<div class="contact-info">
|
|
<h3 style="color: #003454; margin-bottom: 1rem;">Follow Us</h3>
|
|
<p><a href="https://www.instagram.com/flupodofficial/" target="_blank" rel="noopener noreferrer">Instagram</a></p>
|
|
<p><a href="https://www.tiktok.com/@flupod3" target="_blank" rel="noopener noreferrer">TikTok</a></p>
|
|
<p><a href="https://x.com/FLUPodOfficial" target="_blank" rel="noopener noreferrer">X</a></p>
|
|
<p><a href="https://primal.net/p/npub1kx6ztz3kkdrkrmjtqmpcqwuk0ztcqclsk5435q82xgwtes80duvsnywfjr" target="_blank" rel="noopener noreferrer">Nostr</a></p>
|
|
</div>
|
|
|
|
<div class="contact-info">
|
|
<h3 style="color: #003454; margin-bottom: 1rem;">Suggestions Welcome</h3>
|
|
<p>Have an invention you'd like us to feature? A topic you're curious about? We love hearing your ideas and incorporating them into future episodes!</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
|
|
<script>
|
|
// Navigation functionality
|
|
const hamburger = document.querySelector('.hamburger');
|
|
const navMenu = document.querySelector('.nav-menu');
|
|
const navItems = document.querySelectorAll('.nav-item');
|
|
const navBrand = document.querySelector('.nav-brand');
|
|
const backButtons = document.querySelectorAll('.back-button');
|
|
const pageSections = document.querySelectorAll('.page-section');
|
|
|
|
// Hamburger menu toggle
|
|
hamburger.addEventListener('click', () => {
|
|
hamburger.classList.toggle('active');
|
|
navMenu.classList.toggle('active');
|
|
});
|
|
|
|
// Function to show specific page
|
|
function showPage(pageId) {
|
|
// Hide all sections
|
|
pageSections.forEach(section => {
|
|
section.classList.remove('active');
|
|
});
|
|
|
|
// Show target section
|
|
const targetSection = document.getElementById(pageId);
|
|
if (targetSection) {
|
|
targetSection.classList.add('active');
|
|
}
|
|
|
|
// Close mobile menu if open
|
|
hamburger.classList.remove('active');
|
|
navMenu.classList.remove('active');
|
|
}
|
|
|
|
// Brand (logo) click handler for home page
|
|
navBrand.addEventListener('click', (e) => {
|
|
const pageId = navBrand.getAttribute('data-page');
|
|
showPage(pageId);
|
|
});
|
|
|
|
// Navigation item click handlers
|
|
navItems.forEach(item => {
|
|
item.addEventListener('click', (e) => {
|
|
const pageId = item.getAttribute('data-page');
|
|
showPage(pageId);
|
|
});
|
|
});
|
|
|
|
// Back button click handlers
|
|
backButtons.forEach(button => {
|
|
button.addEventListener('click', (e) => {
|
|
const pageId = button.getAttribute('data-page');
|
|
showPage(pageId);
|
|
});
|
|
});
|
|
|
|
// Close mobile menu when clicking outside
|
|
document.addEventListener('click', (e) => {
|
|
// Don't close menu if clicking inside an iframe or its container
|
|
if (e.target.closest('.episodes-embed-container') ||
|
|
e.target.tagName === 'IFRAME' ||
|
|
hamburger.contains(e.target) ||
|
|
navMenu.contains(e.target)) {
|
|
return;
|
|
}
|
|
hamburger.classList.remove('active');
|
|
navMenu.classList.remove('active');
|
|
});
|
|
|
|
|
|
</script>
|
|
</body>
|
|
</html>
|