Initial commit: migrate existing website files

This commit is contained in:
2026-05-30 06:34:19 +00:00
commit 595297ce79
83 changed files with 3491 additions and 0 deletions
+6
View File
@@ -0,0 +1,6 @@
.DS_Store
Thumbs.db
*.log
*.tmp
/node_modules/
.env
+8
View File
@@ -0,0 +1,8 @@
{
"names": {
"_": "b1b4258a36b34761ee4b06c3803b9678978063f0b52b1a00ea321cbcc0ef6f19",
"jenna": "375fd2b41652a738528b4eb5969d28aced8ad13569550f43b4596bfca7e7f1a2",
"Francis": "fa6c9e1b9978ac1e9a925314757e5117feb3ecd8a59747ac0740cab80ff963c6",
"joe": "f379b6ffe43fbd9acfe108e3112d14627c66a798910be92b4a2e1e0c6764235a"
}
}
+143
View File
@@ -0,0 +1,143 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- facebook open graph tags -->
<meta property="og:type" content="website" />
<meta property="og:url" content="https://veryfinefriends.com/about" />
<meta property="og:title" content="Very Fine Friends Podcast: About the Friends" />
<meta property="og:site_name" content="Very Fine Friends Podcast" data-next-head="">
<meta property="og:description" content="Friends." />
<meta property="og:image" content="https://veryfinefriends.com/assets/logo-2.png?auto=format" />
<meta property="og:image:width" content="512" data-next-head="">
<meta property="og:image:height" content="512" data-next-head="">
<meta property="og:image:secure_url" content="https://veryfinefriends.com/assets/logo-2.png?auto=format" data-next-head="">
<!-- twitter card tags additive with the og: tags -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:domain" value="veryfinefriends.com" />
<meta name="twitter:title" value="Very Fine Friends Podcast: About the Friends" />
<meta name="twitter:description" value="Friends." />
<meta name="twitter:image" content="https://veryfinefriends.com/assets/logo-2.png" />
<meta name="twitter:url" value="http://veryfinefriends.com/about" />
<title>Very Fine Friends Podcast</title>
<link rel="stylesheet" href="../styles.css" type="text/css" />
<link rel="icon" href="../assets/favicon.ico" type="image/x-icon">
</head>
<body>
<header>
<nav class="nav-container">
<a href="../"><div class="nav-brand" data-page="home">VERY FINE FRIENDS</div></a>
<ul class="nav-menu">
<a href="../inventions"><li class="nav-item" data-page="invention">Invention of the Week</li></a>
<a href="../secretwords"><li class="nav-item" data-page="secretwords">Secret Words</li></a>
<a href="../otherstuff"><li class="nav-item" data-page="otherstuff">Other Stuff</li></a>
<a href="../about"><li class="nav-item" data-page="about">About</li></a>
</ul>
<div class="hamburger">
<span></span>
<span></span>
<span></span>
</div>
</nav>
</header>
<main>
<!-- ABOUT PAGE -->
<section id="about" class="page-section">
<div class="content-page">
<h1>About Us</h1>
<p style="text-align: center;">We are friends.</p>
<div class="host-info">
<h3>Jenna</h3>
<p>Jenna likes to keep her purse open, has never said the phrase "bonus improv" the same way twice, and loves Santa Claus.</p>
</div>
<div class="host-info">
<h3>Francis</h3>
<p>Francis is a sweat suit expert, has been wronged many times, and has anxiety about the Amazon rainforest.</p>
</div>
<div class="host-info">
<h3>Joe</h3>
<p>Joe is a master user of the improv suggestion mobile app. He would've also been named Joe if Francis was around at his birth.</p>
</div>
<div class="host-info">
<h3>Francis's ice</h3>
<p>Usually makes an appearance at the end of the Invention of the Week segment.</p>
</div>
</br>
<h1>Other Friends</h1>
<div class="host-info">
<h3>Krissy</h3>
<p style="text-align: center;"><a href="https://play.fountain.fm/app/episode/9jpqYcpL4jjW4qNMAgiY" target="_blank">Episode 15</a></p>
</div>
<div class="host-info">
<h3>Blake</h3>
<p style="text-align: center;"><a href="https://play.fountain.fm/app/episode/XZoH7flV1V6Sv7QjZr3n" target="_blank">Episode 9</a></p>
</div>
</div>
</br>
<h1>Contact the Friends</h1>
<div class="contact-info">
<h3 style="color: #003454; margin-bottom: 1rem;">Do you have a BIG QUESTION?</h3>
<p style="text-align: center;"><strong>Email:</strong> <a href="mailto:veryfinefriends@gmail.com">veryfinefriends@gmail.com</a></p>
</div>
<div class="socials">
<div class="social-links">
<a href="https://www.tiktok.com/@veryfinefriends" class="platform-button" target="_blank">
<img src="../assets/tiktok.png" alt="TikTok" class="socials-icon">
</a>
<a href="https://www.instagram.com/veryfinefriends/" class="platform-button" target="_blank">
<img src="../assets/instagram.png" alt="Instagram" class="socials-icon">
</a>
<a href="https://x.com/veryfinefriends" class="platform-button" target="_blank">
<img src="../assets/x.png" alt="X aka Twitter" class="socials-icon">
</a>
<a href="https://www.youtube.com/@veryfinefriends" class="platform-button" target="_blank">
<img src="../assets/youtube.png" alt="YouTube" class="socials-icon">
</a>
<a href="https://primal.net/p/npub1kx6ztz3kkdrkrmjtqmpcqwuk0ztcqclsk5435q82xgwtes80duvsnywfjr" class="platform-button" target="_blank">
<img src="../assets/primal.png" alt="Nostr via Primal" class="socials-icon">
</a>
<a href="https://jumble.social/users/npub1kx6ztz3kkdrkrmjtqmpcqwuk0ztcqclsk5435q82xgwtes80duvsnywfjr" class="platform-button" target="_blank">
<img src="../assets/jumble.png" alt="Nostr via Jumble" class="socials-icon">
</a>
</div>
</div>
</section>
</main>
<div class="bottom-banner">~ V.F.F.~</div>
<script src="../main.js"></script>
</body>
</html>
Binary file not shown.

After

Width:  |  Height:  |  Size: 90 KiB

BIN
View File
Binary file not shown.

After

Width:  |  Height:  |  Size: 23 KiB

BIN
View File
Binary file not shown.

After

Width:  |  Height:  |  Size: 291 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 377 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 348 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 13 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 49 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.1 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 124 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 274 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 133 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 294 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 89 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 180 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 200 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 247 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 276 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 202 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 131 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 145 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 351 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 341 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 326 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 945 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 226 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.1 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 134 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 232 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 226 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 239 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 23 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 222 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 376 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 174 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 184 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 200 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 123 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 185 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 83 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 132 KiB

BIN
View File
Binary file not shown.

After

Width:  |  Height:  |  Size: 221 KiB

BIN
View File
Binary file not shown.

After

Width:  |  Height:  |  Size: 122 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 139 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 129 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 220 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 185 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 132 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 276 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 142 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 164 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 279 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 259 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 283 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 287 KiB

BIN
View File
Binary file not shown.

After

Width:  |  Height:  |  Size: 19 KiB

BIN
View File
Binary file not shown.

After

Width:  |  Height:  |  Size: 418 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 92 KiB

BIN
View File
Binary file not shown.

After

Width:  |  Height:  |  Size: 13 KiB

BIN
View File
Binary file not shown.

After

Width:  |  Height:  |  Size: 1.9 MiB

+5
View File
@@ -0,0 +1,5 @@
<svg xmlns="http://www.w3.org/2000/svg"
aria-label="Pocket Casts" role="img"
viewBox="0 0 512 512"><path
d="m0 0H512V512H0"
fill="#f43e37"/><path fill="#fff" d="m256 329a73 73 0 1173-73h42A115 115 0 10256 371v29A144 144 0 11400 256h48A192 192 0 10256 448"/></svg>

After

Width:  |  Height:  |  Size: 263 B

BIN
View File
Binary file not shown.

After

Width:  |  Height:  |  Size: 95 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 941 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 92 KiB

BIN
View File
Binary file not shown.

After

Width:  |  Height:  |  Size: 14 KiB

BIN
View File
Binary file not shown.

After

Width:  |  Height:  |  Size: 28 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 9.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 12 KiB

+102
View File
@@ -0,0 +1,102 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- facebook open graph tags -->
<meta property="og:type" content="website" />
<meta property="og:url" content="https://veryfinefriends.com/contact" />
<meta property="og:title" content="Very Fine Friends Podcast: Contact Us" />
<meta property="og:site_name" content="Very Fine Friends Podcast" data-next-head="">
<meta property="og:description" content="Contact the Friends." />
<meta property="og:image" content="https://veryfinefriends.com/assets/logo-2.png?auto=format" />
<meta property="og:image:width" content="512" data-next-head="">
<meta property="og:image:height" content="512" data-next-head="">
<meta property="og:image:secure_url" content="https://veryfinefriends.com/assets/logo-2.png?auto=format" data-next-head="">
<!-- twitter card tags additive with the og: tags -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:domain" value="veryfinefriends.com" />
<meta name="twitter:title" value="Very Fine Friends Podcast: Contact Us" />
<meta name="twitter:description" value="Contact the Friends." />
<meta name="twitter:image" content="https://veryfinefriends.com/assets/logo-2.png" />
<meta name="twitter:url" value="http://veryfinefriends.com/contact" />
<title>Very Fine Friends Podcast</title>
<link rel="stylesheet" href="../styles.css" type="text/css" />
<link rel="icon" href="../assets/favicon.ico" type="image/x-icon">
</head>
<body>
<header>
<nav class="nav-container">
<a href="../"><div class="nav-brand" data-page="home">VERY FINE FRIENDS</div></a>
<ul class="nav-menu">
<a href="../inventions"><li class="nav-item" data-page="invention">Invention of the Week</li></a>
<a href="../secretwords"><li class="nav-item" data-page="secretwords">Secret Words</li></a>
<a href="../otherstuff"><li class="nav-item" data-page="otherstuff">Other Stuff</li></a>
<a href="../about"><li class="nav-item" data-page="about">About</li></a>
<a href="../contact"><li class="nav-item" data-page="contact">Contact Us</li></a>
</ul>
<div class="hamburger">
<span></span>
<span></span>
<span></span>
</div>
</nav>
</header>
<main>
<!-- CONTACT PAGE -->
<section id="contact" class="page-section">
<h1>Contact Us</h1>
<div class="contact-info">
<h3 style="color: #003454; margin-bottom: 1rem;">Do you have a BIG QUESTION?</h3>
<p><strong>Email:</strong> <a href="mailto:veryfinefriends@gmail.com">veryfinefriends@gmail.com</a></p>
</div>
<div class="socials">
<h3 style="color: #003454; margin-bottom: 1rem; text-align: center;">Follow Us</h3>
<div class="social-links">
<a href="https://www.tiktok.com/@veryfinefriends" class="platform-button" target="_blank">
<img src="../assets/tiktok.png" alt="TikTok" class="socials-icon">
</a>
<a href="https://www.instagram.com/veryfinefriends/" class="platform-button" target="_blank">
<img src="../assets/instagram.png" alt="Instagram" class="socials-icon">
</a>
<a href="https://x.com/veryfinefriends" class="platform-button" target="_blank">
<img src="../assets/x.png" alt="X aka Twitter" class="socials-icon">
</a>
<a href="https://www.youtube.com/@veryfinefriends" class="platform-button" target="_blank">
<img src="../assets/youtube.png" alt="YouTube" class="socials-icon">
</a>
<a href="https://primal.net/p/npub1kx6ztz3kkdrkrmjtqmpcqwuk0ztcqclsk5435q82xgwtes80duvsnywfjr" class="platform-button" target="_blank">
<img src="../assets/primal.png" alt="Nostr via Primal" class="socials-icon">
</a>
<a href="https://jumble.social/users/npub1kx6ztz3kkdrkrmjtqmpcqwuk0ztcqclsk5435q82xgwtes80duvsnywfjr" class="platform-button" target="_blank">
<img src="../assets/jumble.png" alt="Nostr via Jumble" class="socials-icon">
</a>
</div>
</div>
</section>
</main>
<div class="bottom-banner">~ V.F.F.~</div>
<script src="../main.js"></script>
</body>
</html>
BIN
View File
Binary file not shown.

After

Width:  |  Height:  |  Size: 3.2 KiB

Symlink
+1
View File
@@ -0,0 +1 @@
./howdoyouspeakatnight
+1
View File
@@ -0,0 +1 @@
./howdoyouspeakatnight
+623
View File
@@ -0,0 +1,623 @@
<!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>
+176
View File
@@ -0,0 +1,176 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- facebook open graph tags -->
<meta property="og:type" content="website" />
<meta property="og:url" content="https://friendslikeuspod.com/" />
<meta property="og:title" content="Friends Like Us Podcast" />
<meta property="og:site_name" content="Friends Like Us Podcast" data-next-head="">
<meta property="og:description" content="A podcast where friends talk about stuff." />
<meta property="og:image" content="https://friendslikeuspod.com/assets/logo-2.png?auto=format" />
<meta property="og:image:width" content="512" data-next-head="">
<meta property="og:image:height" content="512" data-next-head="">
<meta property="og:image:secure_url" content="https://friendslikeuspod.com/assets/logo-2.png?auto=format" data-next-head="">
<!-- twitter card tags additive with the og: tags -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:domain" value="friendslikeuspod.com" />
<meta name="twitter:title" value="Friends Like Us Podcast" />
<meta name="twitter:description" value="A podcast where friends talk about stuff." />
<meta name="twitter:image" content="https://friendslikeuspod.com/assets/logo-2.png" />
<meta name="twitter:url" value="http://friendslikeuspod.com/" />
<title>Friends Like Us Podcast</title>
<link rel="stylesheet" href="./styles.css" type="text/css" />
<link rel="icon" href="./assets/favicon.ico" type="image/x-icon">
</head>
<body>
<header>
<nav class="nav-container">
<a href="./"><div class="nav-brand" data-page="home">FRIENDS LIKE US</div></a>
<ul class="nav-menu">
<a href="./inventions"><li class="nav-item" data-page="invention">Invention of the Week</li></a>
<a href="./secretwords"><li class="nav-item" data-page="secretwords">Secret Words</li></a>
<a href="./about"><li class="nav-item" data-page="about">About</li></a>
<a href="./contact"><li class="nav-item" data-page="contact">Contact Us</li></a>
</ul>
<div class="hamburger">
<span></span>
<span></span>
<span></span>
</div>
</nav>
</header>
<main>
<!-- HOME PAGE -->
<section id="home" class="page-section">
<div class="hero">
<div class="logo-container">
<img src="./assets/logo.png" alt="Friends Like Us Podcast Logo" class="logo-image">
</div>
<p class="description">a podcast where friends talk about stuff</p>
</div>
<div class="podcast-container">
<div class="platform-links">
<a href="https://play.fountain.fm/app/show/xyb7C8KsLZG8pZBM3rKM" class="platform-button" target="_blank">
<img src="./assets/fountain.png" alt="Fountain" class="platform-icon">
<span class="platform-name">Fountain</span>
</a>
<a href="https://open.spotify.com/show/0AuFS98vS3Ca89hARQ1ekD" class="platform-button" target="_blank">
<img src="./assets/spotify.png" alt="Spotify" class="platform-icon">
<span class="platform-name">Spotify</span>
</a>
<a href="https://podcasts.apple.com/us/podcast/friends-like-us/id1831854806" class="platform-button" target="_blank">
<img src="./assets/apple.png" alt="Apple Podcasts" class="platform-icon">
<span class="platform-name">Apple Podcasts</span>
</a>
<a href="https://music.youtube.com/channel/UCPKBkBl_ddSRorIgGBZoH-w" class="platform-button" target="_blank">
<img src="./assets/youtubemusic.png" alt="YouTube" class="platform-icon">
<span class="platform-name">YouTube</span>
</a>
<a href="https://pocketcasts.com/podcasts/47fb7410-5656-013e-81d5-0afff9dbf725" class="platform-button" target="_blank">
<img src="./assets/pocketcasts.svg" alt="Pocket Casts" class="platform-icon">
<span class="platform-name">Pocket Casts</span>
</a>
<a href="https://antennapod.org/deeplink/subscribe/?url=%68%74%74ps%3A%2F%2Ffeeds.fountain.fm%2F0C2UWIDdXfJErVe3LPOB&title=Friends+Like+Us" class="platform-button" target="_blank">
<img src="./assets/antennapod.png" alt="AntennaPod" class="platform-icon">
<span class="platform-name">AntennaPod</span>
</a>
</div>
<div class="rss-feed">
RSS feed: <a href="https://feeds.fountain.fm/0C2UWIDdXfJErVe3LPOB" class="rss-link" target="_blank">https://feeds.fountain.fm/0C2UWIDdXfJErVe3LPOB</a>
</div>
</div>
</br>
<div class="socials">
<h3 style="color: #003454; margin-bottom: 1rem; text-align: center;">Follow Us</h3>
<div class="social-links">
<a href="https://www.tiktok.com/@flupodofficial" class="platform-button" target="_blank">
<img src="./assets/tiktok.png" alt="TikTok" class="socials-icon">
</a>
<a href="https://www.instagram.com/flupodofficial/" class="platform-button" target="_blank">
<img src="./assets/instagram.png" alt="Instagram" class="socials-icon">
</a>
<a href="https://x.com/FLUPodOfficial" class="platform-button" target="_blank">
<img src="./assets/x.png" alt="X aka Twitter" class="socials-icon">
</a>
<a href="https://www.youtube.com/@FLUpodOfficial" class="platform-button" target="_blank">
<img src="./assets/youtube.png" alt="YouTube" class="socials-icon">
</a>
<a href="https://primal.net/p/npub1kx6ztz3kkdrkrmjtqmpcqwuk0ztcqclsk5435q82xgwtes80duvsnywfjr" class="platform-button" target="_blank">
<img src="./assets/primal.png" alt="Nostr via Primal" class="socials-icon">
</a>
<a href="https://jumble.social/users/npub1kx6ztz3kkdrkrmjtqmpcqwuk0ztcqclsk5435q82xgwtes80duvsnywfjr" class="platform-button" target="_blank">
<img src="./assets/jumble.png" alt="Nostr via Jumble" class="socials-icon">
</a>
</div>
</div>
</br>
<div class="iframespotify-wrapper">
<h3>Latest Episode</h3>
<iframe data-testid="embed-iframe"
style="border-radius: inherit"
src="https://open.spotify.com/embed/show/0AuFS98vS3Ca89hARQ1ekD?utm_source=generator&t=0"
width="100%"
height="400px"
frameBorder="0"
allowfullscreen=""
allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture"
loading="lazy">
</iframe>
</div>
</br>
</section>
</main>
<div class="bottom-banner">~ F.L.U.~</div>
<script src="./main.js"></script>
</body>
</html>
+177
View File
@@ -0,0 +1,177 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- facebook open graph tags -->
<meta property="og:type" content="website" />
<meta property="og:url" content="https://veryfinefriends.com/" />
<meta property="og:title" content="Very Fine Friends Podcast" />
<meta property="og:site_name" content="Very Fine Friends Podcast" data-next-head="">
<meta property="og:description" content="A podcast where friends talk about stuff." />
<meta property="og:image" content="https://veryfinefriends.com/assets/logo-2.png?auto=format" />
<meta property="og:image:width" content="512" data-next-head="">
<meta property="og:image:height" content="512" data-next-head="">
<meta property="og:image:secure_url" content="https://veryfinefriends.com/assets/logo-2.png?auto=format" data-next-head="">
<!-- twitter card tags additive with the og: tags -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:domain" value="veryfinefriends.com" />
<meta name="twitter:title" value="Very Fine Friends Podcast" />
<meta name="twitter:description" value="A podcast where friends talk about stuff." />
<meta name="twitter:image" content="https://veryfinefriends.com/assets/logo-2.png" />
<meta name="twitter:url" value="http://veryfinefriends.com/" />
<title>Very Fine Friends Podcast</title>
<link rel="stylesheet" href="./styles.css" type="text/css" />
<link rel="icon" href="./assets/favicon.ico" type="image/x-icon">
</head>
<body>
<header>
<nav class="nav-container">
<a href="./"><div class="nav-brand" data-page="home">VERY FINE FRIENDS</div></a>
<ul class="nav-menu">
<a href="./inventions"><li class="nav-item" data-page="invention">Invention of the Week</li></a>
<a href="./secretwords"><li class="nav-item" data-page="secretwords">Secret Words</li></a>
<a href="./otherstuff"><li class="nav-item" data-page="otherstuff">Other Stuff</li></a>
<a href="./about"><li class="nav-item" data-page="about">About</li></a>
</ul>
<div class="hamburger">
<span></span>
<span></span>
<span></span>
</div>
</nav>
</header>
<main>
<!-- HOME PAGE -->
<section id="home" class="page-section">
<div class="hero">
<div class="logo-container">
<img src="./assets/logo.png" alt="Very Fine Friends Podcast Logo" class="logo-image">
</div>
<p class="description">a podcast where friends talk about stuff</p>
</div>
<div class="podcast-container">
<div class="platform-links">
<a href="https://play.fountain.fm/app/show/xyb7C8KsLZG8pZBM3rKM" class="platform-button" target="_blank">
<img src="./assets/fountain.png" alt="Fountain" class="platform-icon">
<span class="platform-name">Fountain</span>
</a>
<a href="https://open.spotify.com/show/0AuFS98vS3Ca89hARQ1ekD" class="platform-button" target="_blank">
<img src="./assets/spotify.png" alt="Spotify" class="platform-icon">
<span class="platform-name">Spotify</span>
</a>
<a href="https://podcasts.apple.com/us/podcast/friends-like-us/id1831854806" class="platform-button" target="_blank">
<img src="./assets/apple.png" alt="Apple Podcasts" class="platform-icon">
<span class="platform-name">Apple Podcasts</span>
</a>
<a href="https://music.youtube.com/channel/UCPKBkBl_ddSRorIgGBZoH-w" class="platform-button" target="_blank">
<img src="./assets/youtubemusic.png" alt="YouTube" class="platform-icon">
<span class="platform-name">YouTube</span>
</a>
<a href="https://pocketcasts.com/podcasts/47fb7410-5656-013e-81d5-0afff9dbf725" class="platform-button" target="_blank">
<img src="./assets/pocketcasts.svg" alt="Pocket Casts" class="platform-icon">
<span class="platform-name">Pocket Casts</span>
</a>
<a href="https://antennapod.org/deeplink/subscribe/?url=%68%74%74ps%3A%2F%2Ffeeds.fountain.fm%2F0C2UWIDdXfJErVe3LPOB&title=Friends+Like+Us" class="platform-button" target="_blank">
<img src="./assets/antennapod.png" alt="AntennaPod" class="platform-icon">
<span class="platform-name">AntennaPod</span>
</a>
</div>
<div class="rss-feed">
RSS feed: <a href="https://feeds.fountain.fm/0C2UWIDdXfJErVe3LPOB" class="rss-link" target="_blank">https://feeds.fountain.fm/0C2UWIDdXfJErVe3LPOB</a>
</div>
</div>
</br>
<div class="socials">
<div class="social-links">
<a href="https://www.tiktok.com/@veryfinefriends" class="platform-button" target="_blank">
<img src="./assets/tiktok.png" alt="TikTok" class="socials-icon">
</a>
<a href="https://www.instagram.com/veryfinefriends/" class="platform-button" target="_blank">
<img src="./assets/instagram.png" alt="Instagram" class="socials-icon">
</a>
<a href="https://x.com/veryfinefriends" class="platform-button" target="_blank">
<img src="./assets/x.png" alt="X aka Twitter" class="socials-icon">
</a>
<a href="https://www.youtube.com/@veryfinefriends" class="platform-button" target="_blank">
<img src="./assets/youtube.png" alt="YouTube" class="socials-icon">
</a>
<a href="https://primal.net/p/npub1kx6ztz3kkdrkrmjtqmpcqwuk0ztcqclsk5435q82xgwtes80duvsnywfjr" class="platform-button" target="_blank">
<img src="./assets/primal.png" alt="Nostr via Primal" class="socials-icon">
</a>
<a href="https://jumble.social/users/npub1kx6ztz3kkdrkrmjtqmpcqwuk0ztcqclsk5435q82xgwtes80duvsnywfjr" class="platform-button" target="_blank">
<img src="./assets/jumble.png" alt="Nostr via Jumble" class="socials-icon">
</a>
</div>
</div>
</br>
</br>
<h3 style="color: #003454; margin-bottom: 1rem; text-align: center;">Latest Episode</h3>
<div class="iframespotify-wrapper">
<iframe
style="border-radius: inherit; width: 100%; height: 352px;"
src="https://open.spotify.com/embed/show/0AuFS98vS3Ca89hARQ1ekD?utm_source=generator&t=0"
frameBorder="0"
allowfullscreen=""
allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture"
loading="lazy">
</iframe>
</div>
<script async src="https://open.spotify.com/embed-podcast/js/embed-podcast-player.js"></script>
</section>
</main>
<div class="bottom-banner">~ V.F.F.~</div>
<script src="./main.js"></script>
</body>
</html>
+479
View File
@@ -0,0 +1,479 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- facebook open graph tags -->
<meta property="og:type" content="website" />
<meta property="og:url" content="https://veryfinefriends.com/inventions" />
<meta property="og:title" content="Very Fine Friends Podcast: Invention of the Week" />
<meta property="og:site_name" content="Very Fine Friends Podcast" data-next-head="">
<meta property="og:description" content="Francis's inventions." />
<meta property="og:image" content="https://veryfinefriends.com/assets/logo-2.png?auto=format" />
<meta property="og:image:width" content="512" data-next-head="">
<meta property="og:image:height" content="512" data-next-head="">
<meta property="og:image:secure_url" content="https://veryfinefriends.com/assets/logo-2.png?auto=format" data-next-head="">
<!-- twitter card tags additive with the og: tags -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:domain" value="veryfinefriends.com" />
<meta name="twitter:title" value="Very Fine Friends Podcast: Invention of the Week" />
<meta name="twitter:description" value="Francis's inventions." />
<meta name="twitter:image" content="https://veryfinefriends.com/assets/logo-2.png" />
<meta name="twitter:url" value="http://veryfinefriends.com/inventions" />
<title>Very Fine Friends Podcast</title>
<link rel="stylesheet" href="../styles.css" type="text/css" />
<link rel="icon" href="../assets/favicon.ico" type="image/x-icon">
</head>
<body>
<header>
<nav class="nav-container">
<a href="../"><div class="nav-brand" data-page="home">VERY FINE FRIENDS</div></a>
<ul class="nav-menu">
<a href="../inventions"><li class="nav-item" data-page="invention">Invention of the Week</li></a>
<a href="../secretwords"><li class="nav-item" data-page="secretwords">Secret Words</li></a>
<a href="../otherstuff"><li class="nav-item" data-page="otherstuff">Other Stuff</li></a>
<a href="../about"><li class="nav-item" data-page="about">About</li></a>
</ul>
<div class="hamburger">
<span></span>
<span></span>
<span></span>
</div>
</nav>
</header>
<main>
<!-- INVENTION PAGE -->
<section id="invention" class="page-section">
<div class="content-page">
<h1>Invention of the Week</h1>
<p style="text-align: center;">Every week our resident inventor Francis pitches to Jenna what he's cooked up in the lab (and by lab we mean his head).</p>
</br>
<img class="fit-picture" src="../assets/iotw_043.jpeg">
<a href="https://play.fountain.fm/app/episode/WMCCgCFIk1ovDTL7Qxj5" target="_blank">
<p style="text-align:center;">Episode 43</a> : Face-On</p>
<p style="text-align:center; line-height:0; font-size: small; font-style: italic;">New Face</p>
<p style="text-align:center; line-height:0; font-size: small; font-style: italic;">On Face</p>
<p style="text-align:center; line-height:0; font-size: small; font-style: italic;">Laffy Taffy Nipples</p>
<p style="text-align:center; line-height:0; font-size: small; font-style: italic;">Face Your Face</p>
<p style="text-align:center; line-height:0; font-size: small; font-style: italic;">Face 2: The Facening</p>
<p style="text-align:center; line-height:0; font-size: small; font-style: italic;">Going through a Face</p>
<p style="text-align:center; line-height:0; font-size: small; font-style: italic;">Second Skin</p>
<p style="text-align:center; line-height:0; font-size: small; font-style: italic;">About Face</p>
</br>
<img class="fit-picture" src="../assets/iotw_042.jpeg">
<a href="https://play.fountain.fm/app/episode/G1gmG00k0uWgADxyLmqM" target="_blank">
<p style="text-align:center;">Episode 42</a> : Minutes to Ours</p>
<p style="text-align:center; line-height:0; font-size: small; font-style: italic;">Bag of Beans</p>
<p style="text-align:center; line-height:0; font-size: small; font-style: italic;">Smooth Trade</p>
<p style="text-align:center; line-height:0; font-size: small; font-style: italic;">Stuff Swap</p>
<p style="text-align:center; line-height:0; font-size: small; font-style: italic;">What's Yours is Mine</p>
<p style="text-align:center; line-height:0; font-size: small; font-style: italic;">Ours</p>
<p style="text-align:center; line-height:0; font-size: small; font-style: italic;">The Power of Ours</p>
<p style="text-align:center; line-height:0; font-size: small; font-style: italic;">Ours Power</p>
</br>
<img class="fit-picture" src="../assets/iotw_041.jpeg">
<a href="https://play.fountain.fm/app/episode/2pnWoFsciUVbipm6RE8E" target="_blank">
<p style="text-align:center;">Episode 41</a> : Wart Are You Up To</p>
<p style="text-align:center; line-height:0; font-size: small; font-style: italic;">Notpples</p>
<p style="text-align:center; line-height:0; font-size: small; font-style: italic;">Secret Sizzlers</p>
<p style="text-align:center; line-height:0; font-size: small; font-style: italic;">Beyond Breasts</p>
<p style="text-align:center; line-height:0; font-size: small; font-style: italic;">Auto Body</p>
<p style="text-align:center; line-height:0; font-size: small; font-style: italic;">Girl Look at that Fake Body</p>
<p style="text-align:center; line-height:0; font-size: small; font-style: italic;">Skintag You're It</p>
<p style="text-align:center; line-height:0; font-size: small; font-style: italic;">Musical Skin Tags</p>
<p style="text-align:center; line-height:0; font-size: small; font-style: italic;">Meester Potato Head</p>
</br>
<img class="fit-picture" src="../assets/iotw_040.jpeg">
<a href="https://play.fountain.fm/app/episode/f8dvjG2RLKPBrqH4m3EL" target="_blank">
<p style="text-align:center;">Episode 40</a> : Clothes for Business</p>
<p style="text-align:center; line-height:0; font-size: small; font-style: italic;">No-Pack Rat</p>
<p style="text-align:center; line-height:0; font-size: small; font-style: italic;">Check Checked</p>
<p style="text-align:center; line-height:0; font-size: small; font-style: italic;">Checked Mate</p>
<p style="text-align:center; line-height:0; font-size: small; font-style: italic;">Fold</p>
<p style="text-align:center; line-height:0; font-size: small; font-style: italic;">Laundry</p>
<p style="text-align:center; line-height:0; font-size: small; font-style: italic;">Launder</p>
<p style="text-align:center; line-height:0; font-size: small; font-style: italic;">Threads Now</p>
<p style="text-align:center; line-height:0; font-size: small; font-style: italic;">Instant Threads</p>
<p style="text-align:center; line-height:0; font-size: small; font-style: italic;">Threadlocks</p>
<p style="text-align:center; line-height:0; font-size: small; font-style: italic;">Fresh Fit</p>
<p style="text-align:center; line-height:0; font-size: small; font-style: italic;">Traveloffity</p>
<p style="text-align:center; line-height:0; font-size: small; font-style: italic;">Wear, You Down</p>
</br>
<img class="fit-picture" src="../assets/iotw_039.jpeg">
<a href="https://play.fountain.fm/app/episode/Y6ZeTLBQyyk5qmYleFE9" target="_blank">
<p style="text-align:center;">Episode 39</a> : Ex-Wrecker</p>
<p style="text-align:center; line-height:0; font-size: small; font-style: italic;">Height-Ya</p>
<p style="text-align:center; line-height:0; font-size: small; font-style: italic;">Better Natties</p>
<p style="text-align:center; line-height:0; font-size: small; font-style: italic;">Nat Even Close</p>
<p style="text-align:center; line-height:0; font-size: small; font-style: italic;">Nat Even Thinking About You Anymore</p>
<p style="text-align:center; line-height:0; font-size: small; font-style: italic;">Upgrade</p>
<p style="text-align:center; line-height:0; font-size: small; font-style: italic;">Triple Ex</p>
<p style="text-align:center; line-height:0; font-size: small; font-style: italic;">Wreck the Ex</p>
</br>
<img class="fit-picture" src="../assets/iotw_038.jpeg">
<a href="https://play.fountain.fm/app/episode/LsSUbaWo2kdKzaBHB0E0" target="_blank">
<p style="text-align:center;">Episode 38</a> : Cloud Car</p>
<p style="text-align:center; line-height:0; font-size: small; font-style: italic;">Skyline</p>
<p style="text-align:center; line-height:0; font-size: small; font-style: italic;">Fast and Up</p>
<p style="text-align:center; line-height:0; font-size: small; font-style: italic;">Sky High</p>
<p style="text-align:center; line-height:0; font-size: small; font-style: italic;">Sky Racer</p>
<p style="text-align:center; line-height:0; font-size: small; font-style: italic;">Sky Swamp</p>
</br>
<img class="fit-picture" src="../assets/iotw_037.jpeg">
<a href="https://play.fountain.fm/app/episode/MJcwsV7YcxMJViyIskv0" target="_blank">
<p style="text-align:center;">Episode 37</a> : Frigid Bitch</p>
<p style="text-align:center; line-height:0; font-size: small; font-style: italic;">Hot Thief</p>
<p style="text-align:center; line-height:0; font-size: small; font-style: italic;">Wallaby Cool</p>
<p style="text-align:center; line-height:0; font-size: small; font-style: italic;">Side Balks</p>
<p style="text-align:center; line-height:0; font-size: small; font-style: italic;">Frigid Pharoah</p>
<p style="text-align:center; line-height:0; font-size: small; font-style: italic;">Too Cool to be Hot</p>
<p style="text-align:center; line-height:0; font-size: small; font-style: italic;">Hot and Happy</p>
</br>
<img class="fit-picture" src="../assets/iotw_036.jpeg">
<a href="https://play.fountain.fm/app/episode/ecnZ4Qx9XcCznolpFIZc" target="_blank">
<p style="text-align:center;">Episode 36</a> : Sunnyside Up</p>
<p style="text-align:center; line-height:0; font-size: small; font-style: italic;">Egg-Content</p>
<p style="text-align:center; line-height:0; font-size: small; font-style: italic;">How Do You Like Your Eggs?</p>
<p style="text-align:center; line-height:0; font-size: small; font-style: italic;">Where in the World is Eggs San Diego?</p>
<p style="text-align:center; line-height:0; font-size: small; font-style: italic;">Where in the World is Eggs Seattle?</p>
<p style="text-align:center; line-height:0; font-size: small; font-style: italic;">Upward Egg</p>
<p style="text-align:center; line-height:0; font-size: small; font-style: italic;">Fallopian Rooftop</p>
<p style="text-align:center; line-height:0; font-size: small; font-style: italic;">Fallopian Tube Top</p>
</br>
<img class="fit-picture" src="../assets/iotw_035.jpeg">
<a href="https://play.fountain.fm/app/episode/buanHwp5tik9XPmdIW0y" target="_blank">
<p style="text-align:center;">Episode 35</a> : Cage Your Rage</p>
<p style="text-align:center; line-height:0; font-size: small; font-style: italic;">Rage Cage</p>
<p style="text-align:center; line-height:0; font-size: small; font-style: italic;">Rage Bedroom</p>
<p style="text-align:center; line-height:0; font-size: small; font-style: italic;">Flighth</p>
<p style="text-align:center; line-height:0; font-size: small; font-style: italic;">Cortisoul</p>
<p style="text-align:center; line-height:0; font-size: small; font-style: italic;">Courtisolve</p>
<p style="text-align:center; line-height:0; font-size: small; font-style: italic;">Adrenalink</p>
<p style="text-align:center; line-height:0; font-size: small; font-style: italic;">Epinefriend</p>
<p style="text-align:center; line-height:0; font-size: small; font-style: italic;">Adrenrelax</p>
</br>
<img class="fit-picture" src="../assets/iotw_034.jpeg">
<a href="https://play.fountain.fm/app/episode/wsUOLeuNPl72qt0df4ru" target="_blank">
<p style="text-align:center;">Episode 34</a> : No-Contact Lense</p>
<p style="text-align:center; line-height:0; font-size: small; font-style: italic;">Safe-C</p>
<p style="text-align:center; line-height:0; font-size: small; font-style: italic;">She-Spy</p>
<p style="text-align:center; line-height:0; font-size: small; font-style: italic;">EHC (Empty Handed Predator)</p>
<p style="text-align:center; line-height:0; font-size: small; font-style: italic;">Jooby Jogger</p>
</br>
<img class="fit-picture" src="../assets/iotw_033.jpeg">
<a href="https://play.fountain.fm/app/episode/rkeOQYkEf7PL2EWBzwr2" target="_blank">
<p style="text-align:center;">Episode 33</a> : It's Moi</p>
<p style="text-align:center; line-height:0; font-size: small; font-style: italic;">France Now</p>
<p style="text-align:center; line-height:0; font-size: small; font-style: italic;">France Kiss</p>
<p style="text-align:center; line-height:0; font-size: small; font-style: italic;">Hit or Kiss</p>
<p style="text-align:center; line-height:0; font-size: small; font-style: italic;">Mystery Mouth</p>
<p style="text-align:center; line-height:0; font-size: small; font-style: italic;">Soops Mucho</p>
<p style="text-align:center; line-height:0; font-size: small; font-style: italic;">Super Smooch</p>
</br>
<img class="fit-picture" src="../assets/iotw_032.jpeg">
<a href="https://play.fountain.fm/app/episode/YcI63mVa2csNJ4HoEQDS" target="_blank">
<p style="text-align:center;">Episode 32</a> : Metal Meal</p>
<p style="text-align:center; line-height:0; font-size: small; font-style: italic;">State of Plate</p>
<p style="text-align:center; line-height:0; font-size: small; font-style: italic;">Plate State</p>
<p style="text-align:center; line-height:0; font-size: small; font-style: italic;">Taste Not Waste</p>
</br>
<img class="fit-picture" src="../assets/iotw_031.jpeg">
<a href="https://play.fountain.fm/app/episode/K41ncDI0AVUjYG7FfqAh" target="_blank">
<p style="text-align:center;">Episode 31</a> : You Can Handle the Tooth</p>
<p style="text-align:center; line-height:0; font-size: small; font-style: italic;">Bristley Bear</p>
<p style="text-align:center; line-height:0; font-size: small; font-style: italic;">Paste Pump</p>
<p style="text-align:center; line-height:0; font-size: small; font-style: italic;">Tooth Tubes</p>
<p style="text-align:center; line-height:0; font-size: small; font-style: italic;">Jooby's Tooth Tubies</p>
</br>
<img class="fit-picture" src="../assets/iotw_030.jpeg">
<a href="https://play.fountain.fm/app/episode/cgmXAVU83pM6ThXs2hOl" target="_blank">
<p style="text-align:center;">Episode 30</a> : Warm Welcome</p>
<p style="text-align:center; line-height:0; font-size: small; font-style: italic;">Cool Welcome</p>
<p style="text-align:center; line-height:0; font-size: small; font-style: italic;">Welcome Comfort</p>
</br>
<img class="fit-picture" src="../assets/iotw_029.jpeg">
<a href="https://play.fountain.fm/app/episode/3eP1atZdMQfr70uEzqRt" target="_blank">
<p style="text-align:center;">Episode 29</a> : Sleeper Beeper</p>
<p style="text-align:center; line-height:0; font-size: small; font-style: italic;">Sleepaway</p>
<p style="text-align:center; line-height:0; font-size: small; font-style: italic;">Sleepnot</p>
<p style="text-align:center; line-height:0; font-size: small; font-style: italic;">Wake Up, Idiot</p>
<p style="text-align:center; line-height:0; font-size: small; font-style: italic;">Snaaze</p>
<p style="text-align:center; line-height:0; font-size: small; font-style: italic;">Reeeh</p>
</br>
<img class="fit-picture" src="../assets/iotw_028.jpeg">
<a href="https://play.fountain.fm/app/episode/63vGVWPY5u3T0H6QmmsE" target="_blank">
<p style="text-align:center;">Episode 28</a> : Superway</p>
<p style="text-align:center; line-height:0; font-size: small; font-style: italic;">Superbus</p>
<p style="text-align:center; line-height:0; font-size: small; font-style: italic;">Weeeeeeeeee</p>
<p style="text-align:center; line-height:0; font-size: small; font-style: italic;">Ussssssssss</p>
</br>
<img class="fit-picture" src="../assets/iotw_027.jpeg">
<a href="https://play.fountain.fm/app/episode/RcP3Tv3UY6eGIcehcFGy" target="_blank">
<p style="text-align:center;">Episode 27</a> : All UV Can Eat</p>
<p style="text-align:center; line-height:0; font-size: small; font-style: italic;">Clean Fanny</p>
<p style="text-align:center; line-height:0; font-size: small; font-style: italic;">Life Bidet</p>
<p style="text-align:center; line-height:0; font-size: small; font-style: italic;">Pocket Full of Sunshine</p>
</br>
<img class="fit-picture" src="../assets/iotw_026.jpeg">
<a href="https://play.fountain.fm/app/episode/lF9mccAxiant7zd6NJnB" target="_blank">
<p style="text-align:center;">Episode 26</a> : Taco Teats</p>
<p style="text-align:center; line-height:0; font-size: small; font-style: italic;">Rain Teat Snow or Hail</p>
<p style="text-align:center; line-height:0; font-size: small; font-style: italic;">Saucy Udders</p>
</br>
<img class="fit-picture" src="../assets/iotw_025.jpeg">
<a href="https://play.fountain.fm/app/episode/d3JKw2y78ddTpCGU1w2f" target="_blank">
<p style="text-align:center;">Episode 25</a> : Wife Alert</p>
<p style="text-align:center; line-height:0; font-size: small; font-style: italic;">Caught You</p>
<p style="text-align:center; line-height:0; font-size: small; font-style: italic;">Fake Trust</p>
<p style="text-align:center; line-height:0; font-size: small; font-style: italic;">Love Prison</p>
<p style="text-align:center; line-height:0; font-size: small; font-style: italic;">You'll Be Mine Forever Whether You Like It or Not</p>
<p style="text-align:center; line-height:0; font-size: small; font-style: italic;">Jeff's Folly</p>
<p style="text-align:center; line-height:0; font-size: small; font-style: italic;">The Gunderson Account</p>
</br>
<img class="fit-picture" src="../assets/iotw_024.jpeg">
<a href="https://play.fountain.fm/app/episode/pEAKKoeTpDTd3R57OFIT" target="_blank">
<p style="text-align:center;">Episode 24</a> : Sleep Cycle</p>
</br>
<img class="fit-picture" src="../assets/iotw_023.jpeg">
<a href="https://play.fountain.fm/app/episode/0eEZw6qYXMW4EksdJrH3" target="_blank">
<p style="text-align:center;">Episode 23</a> : Date Rate</p>
<p style="text-align:center; line-height:0; font-size: small; font-style: italic;">They Love</p>
<p style="text-align:center; line-height:0; font-size: small; font-style: italic;">Bottomless Pit</p>
<p style="text-align:center; line-height:0; font-size: small; font-style: italic;">doyouwanttodiealone.com</p>
<p style="text-align:center; line-height:0; font-size: small; font-style: italic;">Picky Pals</p>
<p style="text-align:center; line-height:0; font-size: small; font-style: italic;">Five Star Love</p>
<p style="text-align:center; line-height:0; font-size: small; font-style: italic;">Rate Your Mate</p>
</br>
<img class="fit-picture" src="../assets/iotw_022.jpeg">
<a href="https://play.fountain.fm/app/episode/prAI0nMxHSuhEeXMQNYK" target="_blank">
<p style="text-align:center;">Episode 22</a> : giftsfrommomanddata.com</p>
<p style="text-align:center; line-height:0; font-size: small; font-style: italic;">Mom and Data</p>
</br>
<img class="fit-picture" src="../assets/iotw_021.jpeg">
<a href="https://play.fountain.fm/app/episode/LHUTEuSWl2cZzOOT1j3N" target="_blank">
<p style="text-align:center;">Episode 21</a> : Bag It Up</p>
<p style="text-align:center; line-height:0; font-size: small; font-style: italic;">Yes Yum No Tum</p>
<p style="text-align:center; line-height:0; font-size: small; font-style: italic;">Forever on the Lips, Never on the Hips</p>
<p style="text-align:center; line-height:0; font-size: small; font-style: italic;">Taurus System</p>
</br>
<img class="fit-picture" src="../assets/iotw_020.jpeg">
<a href="https://play.fountain.fm/app/episode/QVgByFTGVh8b4d8Pbj2i" target="_blank">
<p style="text-align:center;">Episode 20</a> : Voice Me</p>
<p style="text-align:center; line-height:0; font-size: small; font-style: italic;">Voicemail Modulator</p>
<p style="text-align:center; line-height:0; font-size: small; font-style: italic;">Holdin' Message</p>
<p style="text-align:center; line-height:0; font-size: small; font-style: italic;">Slide Into My VMs</p>
</br>
<img class="fit-picture" src="../assets/iotw_019.jpeg">
<a href="https://play.fountain.fm/app/episode/Dgm1gu227IuSu8jvtUtc" target="_blank">
<p style="text-align:center;">Episode 19</a> : Right Distance Relationship</p>
<p style="text-align:center; line-height:0; font-size: small; font-style: italic;">Cuddlebot</p>
<p style="text-align:center; line-height:0; font-size: small; font-style: italic;">Hydraulic Kiss</p>
<p style="text-align:center; line-height:0; font-size: small; font-style: italic;">Feel It</p>
<p style="text-align:center; line-height:0; font-size: small; font-style: italic;">Far and Wide</p>
<p style="text-align:center; line-height:0; font-size: small; font-style: italic;">It's You</p>
</br>
<img class="fit-picture" src="../assets/iotw_018.jpeg">
<a href="https://play.fountain.fm/app/episode/iKXltqJDreJKBmOtqQTN" target="_blank">
<p style="text-align:center;">Episode 18</a> : Draculater</p>
<p style="text-align:center; line-height:0; font-size: small; font-style: italic;">Vamp-Bye-Er</p>
<p style="text-align:center; line-height:0; font-size: small; font-style: italic;">Steak Stake</p>
<p style="text-align:center; line-height:0; font-size: small; font-style: italic;">Dracu-la-la</p>
</br>
<img class="fit-picture" src="../assets/iotw_017.jpeg">
<a href="https://play.fountain.fm/app/episode/7EYp7U311evjS5TQ1TDV" target="_blank">
<p style="text-align:center;">Episode 17</a> : Gotcha Back</p>
<p style="text-align:center; line-height:0; font-size: small; font-style: italic;">Hip-ee</p>
<p style="text-align:center; line-height:0; font-size: small; font-style: italic;">Hip Baby</p>
<p style="text-align:center; line-height:0; font-size: small; font-style: italic;">You're Hips</p>
<p style="text-align:center; line-height:0; font-size: small; font-style: italic;">Hip To Be There</p>
<p style="text-align:center; line-height:0; font-size: small; font-style: italic;">Hips Do Fly</p>
<p style="text-align:center; line-height:0; font-size: small; font-style: italic;">Hips Don't Fly</p>
<p style="text-align:center; line-height:0; font-size: small; font-style: italic;">No Chip Hips</p>
<p style="text-align:center; line-height:0; font-size: small; font-style: italic;">Your Hips Don't Life Alert</p>
<p style="text-align:center; line-height:0; font-size: small; font-style: italic;">Hang in There (new name from <a href="https://play.fountain.fm/app/episode/YcI63mVa2csNJ4HoEQDS" target="_blank">Episode 32)</a></p>
</br>
<img class="fit-picture" src="../assets/iotw_016.jpeg">
<a href="https://play.fountain.fm/app/episode/YYTsrwV8WQn2Szpd61dZ" target="_blank">
<p style="text-align:center;">Episode 16</a> : Bib-Babe</p>
<p style="text-align:center; line-height:0; font-size: small; font-style: italic;">Bud Bib</p>
<p style="text-align:center; line-height:0; font-size: small; font-style: italic;">Buddy B</p>
<p style="text-align:center; line-height:0; font-size: small; font-style: italic;">B-Bud</p>
<p style="text-align:center; line-height:0; font-size: small; font-style: italic;">Catch-Fall</p>
</br>
<img class="fit-picture" src="../assets/iotw_015.png">
<a href="https://play.fountain.fm/app/episode/9jpqYcpL4jjW4qNMAgiY" target="_blank">
<p style="text-align:center;">Episode 15</a> : Gettin' Handsy</p>
<p style="text-align:center; line-height:0; font-size: small; font-style: italic;">My Hands Are Down Here</p>
<p style="text-align:center; line-height:0; font-size: small; font-style: italic;">Hands Across America</p>
</br>
<img class="fit-picture" src="../assets/iotw_014.jpeg">
<a href="https://play.fountain.fm/app/episode/cODjmhi2X5jKsQ9d6apo" target="_blank">
<p style="text-align:center;">Episode 14</a> : Divorce the Night Away <span style="font-size: small;">(It's Not Raining Men)</span></p>
<p style="text-align:center; line-height:0; font-size: small; font-style: italic;">Guy Gone</p>
<p style="text-align:center; line-height:0; font-size: small; font-style: italic;">Release the Squibs</p>
<p style="text-align:center; line-height:0; font-size: small; font-style: italic;">Ex-Men</p>
</br>
<img class="fit-picture" src="../assets/iotw_013.jpeg">
<a href="https://play.fountain.fm/app/episode/ICMIhVubeU29ALU6m9NK" target="_blank">
<p style="text-align:center;">Episode 13</a> : Shoot, You're Shot!</p>
<p style="text-align:center; line-height:0; font-size: small; font-style: italic;">Have a Ball</p>
</br>
<img class="fit-picture" src="../assets/iotw_012.jpeg">
<a href="https://play.fountain.fm/app/episode/wTIkCvuU0insK0hwn7CN" target="_blank">
<p style="text-align:center;">Episode 12</a> : Earth Catheter</p>
<p style="text-align:center; line-height:0; font-size: small; font-style: italic;">Pipe Dreams</p>
<p style="text-align:center; line-height:0; font-size: small; font-style: italic;">Pipe</p>
<p style="text-align:center; line-height:0; font-size: small; font-style: italic;">Pipe Out</p>
</br>
<img class="fit-picture" src="../assets/iotw_011_a.jpeg">
</br>
<img class="fit-picture" src="../assets/iotw_011_b.jpeg">
<a href="https://play.fountain.fm/app/episode/4F9Qz1druXyifJbRrDGe" target="_blank">
<p style="text-align:center;">Episode 11</a> : Helium Suit</p>
<p style="text-align:center; line-height:0; font-size: small; font-style: italic;">Step Up</p>
<p style="text-align:center; line-height:0; font-size: small; font-style: italic;">Gelium Suit</p>
</br>
<img class="fit-picture" src="../assets/iotw_010.jpeg">
<a href="https://play.fountain.fm/app/episode/NqvQESIxIEQqR4vqsCEa" target="_blank">
<p style="text-align:center;">Episode 10</a> : Pal Around</p>
<p style="text-align:center; line-height:0; font-size: small; font-style: italic;">Homie-o</p>
<p style="text-align:center; line-height:0; font-size: small; font-style: italic;">Homeo & Juliet</p>
<p style="text-align:center; line-height:0; font-size: small; font-style: italic;">Homeostasis</p>
<p style="text-align:center; line-height:0; font-size: small; font-style: italic;">Homies</p>
<p style="text-align:center; line-height:0; font-size: small; font-style: italic;">Homi-In</p>
<p style="text-align:center; line-height:0; font-size: small; font-style: italic;">Homie Closer</p>
<p style="text-align:center; line-height:0; font-size: small; font-style: italic;">Homing in on Your Homies</p>
<p style="text-align:center; line-height:0; font-size: small; font-style: italic;">Bud Laser</p>
<p style="text-align:center; line-height:0; font-size: small; font-style: italic;">Bud Day</p>
</br>
<img class="fit-picture" src="../assets/iotw_009.jpeg">
</br>
<img class="fit-picture fit-guest-picture" src="../assets/iotw_009_blake.jpeg">
<a href="https://play.fountain.fm/app/episode/XZoH7flV1V6Sv7QjZr3n" target="_blank">
<p style="text-align:center;">Episode 9</a> : Guahhnnnn!!</p>
<p style="text-align:center; line-height:0; font-size: small; font-style: italic;">Gone Gun</p>
<p style="text-align:center; line-height:0; font-size: small; font-style: italic;">Gahhnnn?</p>
</br>
<img class="fit-picture" src="../assets/iotw_008.jpeg">
<a href="https://play.fountain.fm/app/episode/apeNIjGFKxlZHNwauN1m" target="_blank">
<p style="text-align:center;">Episode 8</a> : Loose Tubes</p>
<p style="text-align:center; line-height:0; font-size: small; font-style: italic;">Manytube</p>
<p style="text-align:center; line-height:0; font-size: small; font-style: italic;">Polytube</p>
<p style="text-align:center; line-height:0; font-size: small; font-style: italic;">Polydrink</p>
<p style="text-align:center; line-height:0; font-size: small; font-style: italic;">DrinkTube</p>
<p style="text-align:center; line-height:0; font-size: small; font-style: italic;">Don't Tie Your Tubes</p>
<p style="text-align:center; line-height:0; font-size: small; font-style: italic;">Garage Drink</p>
<p style="text-align:center; line-height:0; font-size: small; font-style: italic;">3-Car Beverage</p>
<p style="text-align:center; line-height:0; font-size: small; font-style: italic;">Tubulips</p>
<p style="text-align:center; line-height:0; font-size: small; font-style: italic;">Garage Milk</p>
<p style="text-align:center; line-height:0; font-size: small; font-style: italic;">Camelmouth</p>
<p style="text-align:center; line-height:0; font-size: small; font-style: italic;">Drinks-a-Lot</p>
<p style="text-align:center; line-height:0; font-size: small; font-style: italic;">Omnitubes</p>
</br>
<img class="fit-picture" src="../assets/iotw_007.jpeg">
<a href="https://play.fountain.fm/app/episode/3IgotqQQ5dM2FcKKbj8S" target="_blank">
<p style="text-align:center">Episode 7</a> : Meessor Hands</p>
</br>
<img class="fit-picture" src="../assets/iotw_006.jpeg">
<a href="https://play.fountain.fm/app/episode/lF9lCyorQ1SgYicFM8g0" target="_blank">
<p style="text-align:center">Episode 6</a> : Truth Lens</p>
</br>
<img class="fit-picture" src="../assets/iotw_005.jpeg">
<a href="https://play.fountain.fm/app/episode/804KutPk7uQdIyfL9Qpt" target="_blank">
<p style="text-align:center">Episode 5</a> : Shark Toes</p>
<p style="text-align:center; line-height:0; font-size: small; font-style: italic;">The Tent Toe</p>
<p style="text-align:center; line-height:0; font-size: small; font-style: italic;">Cozy Toesies</p>
<p style="text-align:center; line-height:0; font-size: small; font-style: italic;">Foot Shark</p>
<p style="text-align:center; line-height:0; font-size: small; font-style: italic;">Toe Yarmulkes</p>
</br>
<img class="fit-picture" src="../assets/iotw_004.jpeg">
<a href="https://play.fountain.fm/app/episode/zhwKST6P638b7wOk7wB2" target="_blank">
<p style="text-align:center">Episode 4</a> : Achondom</p>
<p style="text-align:center; line-height:0; font-size: small; font-style: italic;">Safe Sneeze</p>
</br>
<img class="fit-picture" src="../assets/iotw_003.jpeg">
<a href="https://play.fountain.fm/app/episode/imxLcXG7Ny4PAsY4CNTZ" target="_blank">
<p style="text-align:center">Episode 3</a> : Big Ball</p>
<p style="text-align:center; line-height:0; font-size: small; font-style: italic;">Ball Bike</p>
<p style="text-align:center; line-height:0; font-size: small; font-style: italic;">Pedal Metal</p>
<p style="text-align:center; line-height:0; font-size: small; font-style: italic;">Hitch a Ride</p>
<p style="text-align:center; line-height:0; font-size: small; font-style: italic;">Have a Ball</p>
<p style="text-align:center; line-height:0; font-size: small; font-style: italic;">Take Me and Leave Me</p>
</br>
<img class="fit-picture" src="../assets/iotw_002.jpeg">
<a href="https://play.fountain.fm/app/episode/ktMuRNTRctPtLQEVCY83" target="_blank">
<p style="text-align:center">Episode 2</a> : Hear Me Roar</p>
<p style="text-align:center; line-height:0; font-size: small; font-style: italic;">How Do You Speak at Night</p>
<p style="text-align:center; line-height:0; font-size: small; font-style: italic;">How Do you Sleep at Night</p>
</br>
<img class="fit-picture" src="../assets/iotw_001.jpeg">
<a href="https://play.fountain.fm/app/episode/OVc4VCWMn3h1He1aHyFP" target="_blank">
<p style="text-align:center">Episode 1</a> : Car Shade Sun Safe</p>
</div>
</section>
</main>
<div class="bottom-banner">~ V.F.F.~</div>
<script src="../main.js"></script>
</body>
</html>
+57
View File
@@ -0,0 +1,57 @@
// 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) {
// 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');
});
+25
View File
@@ -0,0 +1,25 @@
from flask import Flask, request, jsonify, abort
app = Flask(__name__)
# Example: Load from file, database, etc. Here, using a hardcoded dict.
names = {
"jenna": "b1b4258a36b34761ee4b06c3803b9678978063f0b52b1a00ea321cbcc0ef6f19",
"daann": "261028e6ca5448334bc3882a4a18080da0aa0d9c9a860ca18c933c74981dcda0"
}
@app.route('/.well-known/nostr.json')
def nostr_json():
username = request.args.get('name')
if not username:
# Optionally, return an empty mapping or 400
return jsonify({"names": {}})
if username in names:
return jsonify({"names": {username: names[username]}})
else:
# If user is not found, return empty or 404
return jsonify({"names": {}})
# Or: abort(404)
if __name__ == '__main__':
app.run(host="0.0.0.0", port=8000)
+108
View File
@@ -0,0 +1,108 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- facebook open graph tags -->
<meta property="og:type" content="website" />
<meta property="og:url" content="https://veryfinefriends.com/otherstuff" />
<meta property="og:title" content="Very Fine Friends Podcast: Other Stuff" />
<meta property="og:site_name" content="Very Fine Friends Podcast" data-next-head="">
<meta property="og:description" content="The friends' other stuff." />
<meta property="og:image" content="https://veryfinefriends.com/assets/logo-2.png?auto=format" />
<meta property="og:image:width" content="512" data-next-head="">
<meta property="og:image:height" content="512" data-next-head="">
<meta property="og:image:secure_url" content="https://veryfinefriends.com/assets/logo-2.png?auto=format" data-next-head="">
<!-- twitter card tags additive with the og: tags -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:domain" value="veryfinefriends.com" />
<meta name="twitter:title" value="Very Fine Friends Podcast: Other Stuff" />
<meta name="twitter:description" value="The friends' other stuff." />
<meta name="twitter:image" content="https://veryfinefriends.com/assets/logo-2.png" />
<meta name="twitter:url" value="http://veryfinefriends.com/otherstuff" />
<title>Very Fine Friends Podcast</title>
<link rel="stylesheet" href="../styles.css" type="text/css" />
<link rel="icon" href="../assets/favicon.ico" type="image/x-icon">
</head>
<body>
<header>
<nav class="nav-container">
<a href="../"><div class="nav-brand" data-page="home">VERY FINE FRIENDS</div></a>
<ul class="nav-menu">
<a href="../inventions"><li class="nav-item" data-page="invention">Invention of the Week</li></a>
<a href="../secretwords"><li class="nav-item" data-page="secretwords">Secret Words</li></a>
<a href="../otherstuff"><li class="nav-item" data-page="otherstuff">Other Stuff</li></a>
<a href="../about"><li class="nav-item" data-page="about">About</li></a>
</ul>
<div class="hamburger">
<span></span>
<span></span>
<span></span>
</div>
</nav>
</header>
<main>
<!-- OTHER STUFF PAGE -->
<section id="otherstuff" class="page-section">
<div class="content-page">
<h1>Other Stuff</h1>
<p style="text-align: center;">This is where we put stuff when we don't know where else to put it.</p>
</br>
<h3 style="text-align: center;">Francis's (Reenacted) Legal Win</h3>
<a href="https://play.fountain.fm/app/episode/ICMIhVubeU29ALU6m9NK" target="_blank">
<p style="text-align:center;">Episode 13</a></p>
<img class="fit-picture" src="../assets/going_to_jail.png">
</br>
</br>
</br>
<h3 style="text-align: center;">Pamphlet: A Cleveland in my Stead</h3>
<a href="https://play.fountain.fm/app/episode/wTIkCvuU0insK0hwn7CN" target="_blank">
<p style="text-align:center;">Episode 12</a></p>
<img class="fit-picture" src="../assets/cleveland_1.png">
</br>
<img class="fit-picture" src="../assets/cleveland_2.png">
</br>
</br>
</br>
<h3 style="text-align: center;">"All in a Day's Work" Sandwich</h3>
<a href="https://play.fountain.fm/app/episode/lF9lCyorQ1SgYicFM8g0" target="_blank">
<p style="text-align:center;">Episode 6</a></p>
<img class="fit-picture" src="../assets/sandwich.png">
</br>
</br>
</br>
<h3 style="text-align: center;">Which One of Us is Gonna Be Bald?</h3>
<a href="https://play.fountain.fm/app/episode/lF9lCyorQ1SgYicFM8g0" target="_blank">
<p style="text-align:center;">Episode 6</a></p>
<img class="fit-picture" src="../assets/baldy.jpeg">
</br>
</br>
</br>
</div>
</section>
</main>
<div class="bottom-banner">~ V.F.F.~</div>
<script src="../main.js"></script>
</body>
</html>
+949
View File
@@ -0,0 +1,949 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- facebook open graph tags -->
<meta property="og:type" content="website" />
<meta property="og:url" content="https://veryfinefriends.com/secretwords" />
<meta property="og:title" content="Very Fine Friends Podcast: Secret Words" />
<meta property="og:site_name" content="Very Fine Friends Podcast" data-next-head="">
<meta property="og:description" content="Scoreboard of secret words points." />
<meta property="og:image" content="https://veryfinefriends.com/assets/logo-2.png?auto=format" />
<meta property="og:image:width" content="512" data-next-head="">
<meta property="og:image:height" content="512" data-next-head="">
<meta property="og:image:secure_url" content="https://veryfinefriends.com/assets/logo-2.png?auto=format" data-next-head="">
<!-- twitter card tags additive with the og: tags -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:domain" value="veryfinefriends.com" />
<meta name="twitter:title" value="Very Fine Friends Podcast: Secret Words" />
<meta name="twitter:description" value="Scoreboard of secret words points." />
<meta name="twitter:image" content="https://veryfinefriends.com/assets/logo-2.png" />
<meta name="twitter:url" value="http://veryfinefriends.com/secretwords" />
<title>Very Fine Friends Podcast</title>
<link rel="stylesheet" href="../styles.css" type="text/css" />
<link rel="icon" href="../assets/favicon.ico" type="image/x-icon">
</head>
<body>
<header>
<nav class="nav-container">
<a href="../"><div class="nav-brand" data-page="home">VERY FINE FRIENDS</div></a>
<ul class="nav-menu">
<a href="../inventions"><li class="nav-item" data-page="invention">Invention of the Week</li></a>
<a href="../secretwords"><li class="nav-item" data-page="secretwords">Secret Words</li></a>
<a href="../otherstuff"><li class="nav-item" data-page="otherstuff">Other Stuff</li></a>
<a href="../about"><li class="nav-item" data-page="about">About</li></a>
</ul>
<div class="hamburger">
<span></span>
<span></span>
<span></span>
</div>
</nav>
</header>
<main>
<!-- SECRET WORDS PAGE -->
<section id="secretwords" class="page-section">
<div class="content-page">
<h1>Secret Words</h1>
<p style="text-align: center;">Points tracker, so the ultimate winner can be decided right before we die.</p>
<table>
<colgroup>
<col class="col1" />
<col class="col2" />
<col class="col3" />
<col class="col4" />
<col class="col5" />
<col class="col6" />
<col class="col7" />
<col class="col8" />
<col class="col9" />
<col class="col10" />
<col class="col11" />
<col class="col12" />
<col class="col13" />
</colgroup>
<!-- First row: 5 columns merged + 5 columns merged -->
<tr>
<th colspan="1"></th>
<th colspan="6" class="merged-header header-friends desktop-row">Jenna</th>
<th colspan="2" class="merged-header header-friends mobile-row">Jenna</th>
<th colspan="6" class="merged-header header-friends desktop-row">Francis</th>
<th colspan="2" class="merged-header header-friends mobile-row">Francis</th>
</tr>
<tr>
<th></th>
<th class="text-header-cell">Word</th>
<th class="desktop-row">S</th>
<th class="desktop-row">G</th>
<th class="desktop-row">O</th>
<th class="desktop-row">D</th>
<th style="font-weight:bolder">T</th>
<th style="font-weight:bolder">T</th>
<th class="desktop-row">D</th>
<th class="desktop-row">O</th>
<th class="desktop-row">G</th>
<th class="desktop-row">S</th>
<th class="text-header-cell">Word</th>
</tr>
<!-- Last row: Only columns 7 and 8, bolded -->
<tr style="height: 40px" >
<td style="font-weight: 800;">TOTAL</td>
<td></td>
<td class="last-row positive desktop-row"; style="border-right-color:transparent";>41</td>
<td class="last-row positive desktop-row"; style="border-right-color:transparent";>14&#189;</td>
<td class="last-row positive desktop-row"; style="border-right-color:transparent";>9</td>
<td class="last-row positive desktop-row">8</td>
<td class="last-row-totals positive">72&#189;</td>
<td class="last-row-totals positive">66</td>
<td class="last-row positive desktop-row"; style="border-right-color:transparent";>7</td>
<td class="last-row positive desktop-row"; style="border-right-color:transparent";>7</td>
<td class="last-row positive desktop-row"; style="border-right-color:transparent";>12</td>
<td class="last-row positive desktop-row">40</td>
<td></td>
</tr>
<!-- Episode 43 -->
<tr>
<td class="episode-cell"><a href="https://play.fountain.fm/app/episode/WMCCgCFIk1ovDTL7Qxj5" target="_blank">E43</a></td>
<td class="text-cell">theatrics</br>(shrinkage)</td>
<td class="positive desktop-row">1</td>
<td class="zero desktop-row">0</td>
<td class="zero desktop-row">0</td>
<td class="positive desktop-row">1</td>
<td class="bold positive">2</td>
<td class="bold positive">1</td>
<td class="zero desktop-row">0</td>
<td class="zero desktop-row">0</td>
<td class="zero desktop-row">0</td>
<td class="positive desktop-row">1</td>
<td class="text-cell">maturity</br>(laughable)</td>
</tr>
<!-- Episode 42 -->
<tr>
<td class="episode-cell"><a href="https://play.fountain.fm/app/episode/G1gmG00k0uWgADxyLmqM" target="_blank">E42</a></td>
<td class="text-cell">fiberglass</br>(stamina)</td>
<td class="positive desktop-row">1</td>
<td class="positive desktop-row">2</td>
<td class="positive desktop-row">4</td>
<td class="zero desktop-row">0</td>
<td class="bold positive">7</td>
<td class="bold positive">1</td>
<td class="zero desktop-row">0</td>
<td class="zero desktop-row">0</td>
<td class="zero desktop-row">0</td>
<td class="positive desktop-row">1</td>
<td class="text-cell">tenacious</br>(personnel)</td>
</tr>
<!-- Episode 41 -->
<tr>
<td class="episode-cell"><a href="https://play.fountain.fm/app/episode/2pnWoFsciUVbipm6RE8E" target="_blank">E41</a></td>
<td class="text-cell">primordial</br>(humanitarian)</td>
<td class="positive desktop-row">1</td>
<td class="zero desktop-row">0</td>
<td class="zero desktop-row">0</td>
<td class="zero desktop-row">0</td>
<td class="bold positive">1</td>
<td class="bold positive">4</td>
<td class="positive desktop-row">1</td>
<td class="zero desktop-row">0</td>
<td class="positive desktop-row">2</td>
<td class="positive desktop-row">1</td>
<td class="text-cell">proprietor</br>(thyroid)</td>
</tr>
<!-- Episode 40 -->
<tr>
<td class="episode-cell"><a href="https://play.fountain.fm/app/episode/f8dvjG2RLKPBrqH4m3EL" target="_blank">E40</a></td>
<td class="text-cell">filibuster</br>(panty)</td>
<td class="positive desktop-row">1</td>
<td class="zero desktop-row">0</td>
<td class="zero desktop-row">0</td>
<td class="positive desktop-row">1</td>
<td class="bold positive">2</td>
<td class="bold positive">1</td>
<td class="zero desktop-row">0</td>
<td class="zero desktop-row">0</td>
<td class="zero desktop-row">0</td>
<td class="positive desktop-row">1</td>
<td class="text-cell">butts</br>(mosquitos)</td>
</tr>
<!-- Episode 39 -->
<tr>
<td class="episode-cell"><a href="https://play.fountain.fm/app/episode/Y6ZeTLBQyyk5qmYleFE9" target="_blank">E39</a></td>
<td class="text-cell">paperweight</br>(molest)</td>
<td class="positive desktop-row">1</td>
<td class="zero desktop-row">0</td>
<td class="zero desktop-row">0</td>
<td class="zero desktop-row">0</td>
<td class="bold positive">1</td>
<td class="bold positive">1</td>
<td class="zero desktop-row">0</td>
<td class="zero desktop-row">0</td>
<td class="zero desktop-row">0</td>
<td class="positive desktop-row">1</td>
<td class="text-cell">yearning</br>(cognac)</td>
</tr>
<!-- Episode 38 -->
<tr>
<td class="episode-cell"><a href="https://play.fountain.fm/app/episode/LsSUbaWo2kdKzaBHB0E0" target="_blank">E38</a></td>
<td class="text-cell">cloistered</br>(accordance)</td>
<td class="positive desktop-row">1</td>
<td class="zero desktop-row">0</td>
<td class="zero desktop-row">0</td>
<td class="zero desktop-row">0</td>
<td class="bold positive">1</td>
<td class="bold positive">4</td>
<td class="positive desktop-row">1</td>
<td class="zero desktop-row">0</td>
<td class="positive desktop-row">2</td>
<td class="positive desktop-row">1</td>
<td class="text-cell">masterpiece</br>(antagonistic)</td>
</tr>
<!-- Episode 37 -->
<tr>
<td class="episode-cell"><a href="https://play.fountain.fm/app/episode/MJcwsV7YcxMJViyIskv0" target="_blank">E37</a></td>
<td class="text-cell">marathon</br>(stalking)</td>
<td class="positive desktop-row">1</td>
<td class="positive desktop-row">2</td>
<td class="zero desktop-row">0</td>
<td class="zero desktop-row">0</td>
<td class="bold positive">3</td>
<td class="bold positive">1</td>
<td class="zero desktop-row">0</td>
<td class="zero desktop-row">0</td>
<td class="zero desktop-row">0</td>
<td class="positive desktop-row">1</td>
<td class="text-cell">destitute</br>(anarchy)</td>
</tr>
<!-- Episode 36 -->
<tr>
<td class="episode-cell"><a href="https://play.fountain.fm/app/episode/ecnZ4Qx9XcCznolpFIZc" target="_blank">E36</a></td>
<td class="text-cell">semantics</br>(evasions)</td>
<td class="positive desktop-row">1</td>
<td class="zero desktop-row">0</td>
<td class="zero desktop-row">0</td>
<td class="zero desktop-row">0</td>
<td class="bold positive">1</td>
<td class="bold positive">4</td>
<td class="positive desktop-row">1</td>
<td class="zero desktop-row">0</td>
<td class="positive desktop-row">2</td>
<td class="positive desktop-row">1</td>
<td class="text-cell">talisman</br>(jackasses)</td>
</tr>
<!-- Episode 35 -->
<tr>
<td class="episode-cell"><a href="https://play.fountain.fm/app/episode/buanHwp5tik9XPmdIW0y" target="_blank">E35</a></td>
<td class="text-cell">sideburns</br>(infighting)</td>
<td class="positive desktop-row">1</td>
<td class="zero desktop-row">0</td>
<td class="positive desktop-row">3</td>
<td class="zero desktop-row">0</td>
<td class="bold positive">4</td>
<td class="bold positive">1</td>
<td class="zero desktop-row">0</td>
<td class="zero desktop-row">0</td>
<td class="zero desktop-row">0</td>
<td class="positive desktop-row">1</td>
<td class="text-cell">middleman</br>(commercialism)</td>
</tr>
<!-- Episode 34 -->
<tr>
<td class="episode-cell"><a href="https://play.fountain.fm/app/episode/wsUOLeuNPl72qt0df4ru" target="_blank">E34</a></td>
<td class="text-cell">outstanding</br>(baste)</td>
<td class="positive desktop-row">1</td>
<td class="zero desktop-row">0</td>
<td class="zero desktop-row">0</td>
<td class="zero desktop-row">0</td>
<td class="bold positive">1</td>
<td class="bold positive">1</td>
<td class="zero desktop-row">0</td>
<td class="zero desktop-row">0</td>
<td class="zero desktop-row">0</td>
<td class="positive desktop-row">1</td>
<td class="text-cell">addled</br>(seg)</td>
</tr>
<!-- Episode 33 -->
<tr>
<td class="episode-cell"><a href="https://play.fountain.fm/app/episode/rkeOQYkEf7PL2EWBzwr2" target="_blank">E33</a></td>
<td class="text-cell">newsstands</br>(chronology)</td>
<td class="positive desktop-row">1</td>
<td class="zero desktop-row">0</td>
<td class="zero desktop-row">0</td>
<td class="positive desktop-row">1</td>
<td class="bold positive">2</td>
<td class="bold zero">0</td>
<td class="zero desktop-row">0</td>
<td class="zero desktop-row">0</td>
<td class="zero desktop-row">0</td>
<td class="zero desktop-row">0</td>
<td class="text-cell">seaboard</br>(extradited)</td>
</tr>
<!-- Episode 32 -->
<tr>
<td class="episode-cell"><a href="https://play.fountain.fm/app/episode/YcI63mVa2csNJ4HoEQDS" target="_blank">E32</a></td>
<td class="text-cell">cattle</br>(deceptions)</td>
<td class="positive desktop-row">1</td>
<td class="positive desktop-row">2</td>
<td class="positive desktop-row">1</td>
<td class="positive desktop-row">1</td>
<td class="bold positive">5</td>
<td class="bold positive">1</td>
<td class="zero desktop-row">0</td>
<td class="zero desktop-row">0</td>
<td class="zero desktop-row">0</td>
<td class="positive desktop-row">1</td>
<td class="text-cell">hostage</br>(pyramids)</td>
</tr>
<!-- Episode 31 -->
<tr>
<td class="episode-cell"><a href="https://play.fountain.fm/app/episode/K41ncDI0AVUjYG7FfqAh" target="_blank">E31</a></td>
<td class="text-cell">generating</br>(firestorm)</td>
<td class="positive desktop-row">1</td>
<td class="zero desktop-row">0</td>
<td class="zero desktop-row">0</td>
<td class="positive desktop-row">1</td>
<td class="bold positive">2</td>
<td class="bold positive">1</td>
<td class="zero desktop-row">0</td>
<td class="zero desktop-row">0</td>
<td class="zero desktop-row">0</td>
<td class="positive desktop-row">1</td>
<td class="text-cell">anorexia</br>(inconsolable)</td>
</tr>
<!-- Episode 30 -->
<tr>
<td class="episode-cell"><a href="https://play.fountain.fm/app/episode/cgmXAVU83pM6ThXs2hOl" target="_blank">E30</a></td>
<td class="text-cell">schmooze</br>(railroads)</td>
<td class="positive desktop-row">1</td>
<td class="zero desktop-row">0</td>
<td class="zero desktop-row">0</td>
<td class="zero desktop-row">0</td>
<td class="bold positive">1</td>
<td class="bold positive">1</td>
<td class="zero desktop-row">0</td>
<td class="zero desktop-row">0</td>
<td class="zero desktop-row">0</td>
<td class="positive desktop-row">1</td>
<td class="text-cell">improvised</br>(yikes)</td>
</tr>
<!-- Episode 29 -->
<tr>
<td class="episode-cell"><a href="https://play.fountain.fm/app/episode/3eP1atZdMQfr70uEzqRt" target="_blank">E29</a></td>
<td class="text-cell">construed</br>(hierarchy)</td>
<td class="positive desktop-row">1</td>
<td class="zero desktop-row">0</td>
<td class="zero desktop-row">0</td>
<td class="zero desktop-row">0</td>
<td class="bold positive">1</td>
<td class="bold positive">1</td>
<td class="zero desktop-row">0</td>
<td class="zero desktop-row">0</td>
<td class="zero desktop-row">0</td>
<td class="positive desktop-row">1</td>
<td class="text-cell">materialistic</br>(rambunctious)</td>
</tr>
<!-- Episode 28 -->
<tr>
<td class="episode-cell"><a href="https://play.fountain.fm/app/episode/63vGVWPY5u3T0H6QmmsE" target="_blank">E28</a></td>
<td class="text-cell">consenting</br>(fourteen)</td>
<td class="positive desktop-row">1</td>
<td class="zero desktop-row">0</td>
<td class="zero desktop-row">0</td>
<td class="zero desktop-row">0</td>
<td class="bold positive">1</td>
<td class="bold positive">1</td>
<td class="zero desktop-row">0</td>
<td class="zero desktop-row">0</td>
<td class="zero desktop-row">0</td>
<td class="positive desktop-row">1</td>
<td class="text-cell">einstein</br>(masturbation)</td>
</tr>
<!-- Episode 27 -->
<tr>
<td class="episode-cell"><a href="https://play.fountain.fm/app/episode/RcP3Tv3UY6eGIcehcFGy" target="_blank">E27</a></td>
<td class="text-cell">blatantly</br>(crocodiles)</td>
<td class="positive desktop-row">1</td>
<td class="zero desktop-row">0</td>
<td class="zero desktop-row">0</td>
<td class="zero desktop-row">0</td>
<td class="bold positive">1</td>
<td class="bold positive">3</td>
<td class="positive desktop-row">1</td>
<td class="positive desktop-row">1</td>
<td class="zero desktop-row">0</td>
<td class="positive desktop-row">1</td>
<td class="text-cell">omelets</br>(orphaned)</td>
</tr>
<!-- Episode 26 -->
<tr>
<td class="episode-cell"><a href="https://play.fountain.fm/app/episode/lF9mccAxiant7zd6NJnB" target="_blank">E26</a></td>
<td class="text-cell">parental</br>(kindling)</td>
<td class="positive desktop-row">1</td>
<td class="positive desktop-row">2</td>
<td class="zero desktop-row">0</td>
<td class="positive desktop-row">1</td>
<td class="bold positive">4</td>
<td class="bold positive">3</td>
<td class="positive desktop-row">1</td>
<td class="positive desktop-row">1</td>
<td class="zero desktop-row">0</td>
<td class="positive desktop-row">1</td>
<td class="text-cell">overachiever</br>(expunged)</td>
</tr>
<!-- Episode 25 -->
<tr>
<td class="episode-cell"><a href="https://play.fountain.fm/app/episode/d3JKw2y78ddTpCGU1w2f" target="_blank">E25</a></td>
<td class="text-cell">artistry</br>(domesticity)</td>
<td class="positive desktop-row">1</td>
<td class="zero desktop-row">0</td>
<td class="zero desktop-row">0</td>
<td class="zero desktop-row">0</td>
<td class="bold positive">1</td>
<td class="bold zero">0</td>
<td class="zero desktop-row">0</td>
<td class="zero desktop-row">0</td>
<td class="zero desktop-row">0</td>
<td class="zero desktop-row">0</td>
<td class="text-cell">overestimate</br>(amendments)</td>
</tr>
<!-- Episode 24 -->
<tr>
<td class="episode-cell"><a href="https://play.fountain.fm/app/episode/pEAKKoeTpDTd3R57OFIT" target="_blank">E24</a></td>
<td class="text-cell">festivals</br>(agonized)</td>
<td class="positive desktop-row">1</td>
<td class="zero desktop-row">0</td>
<td class="zero desktop-row">0</td>
<td class="zero desktop-row">0</td>
<td class="bold positive">1</td>
<td class="bold positive">2</td>
<td class="positive desktop-row">1</td>
<td class="zero desktop-row">0</td>
<td class="zero desktop-row">0</td>
<td class="positive desktop-row">1</td>
<td class="text-cell">anecdotes</br>(bestseller)</td>
</tr>
<!-- Episode 23 -->
<tr>
<td class="episode-cell"><a href="https://play.fountain.fm/app/episode/0eEZw6qYXMW4EksdJrH3" target="_blank">E23</a></td>
<td class="text-cell">inheritance</br>(folklore)</td>
<td class="positive desktop-row">1</td>
<td class="positive desktop-row">2</td>
<td class="zero desktop-row">0</td>
<td class="positive desktop-row">1</td>
<td class="bold positive">4</td>
<td class="bold positive">1</td>
<td class="zero desktop-row">0</td>
<td class="zero desktop-row">0</td>
<td class="zero desktop-row">0</td>
<td class="positive desktop-row">1</td>
<td class="text-cell">crevasse</br>(libido)</td>
</tr>
<!-- Episode 22 -->
<tr>
<td class="episode-cell"><a href="https://play.fountain.fm/app/episode/prAI0nMxHSuhEeXMQNYK" target="_blank">E22</a></td>
<td class="text-cell">spectator</br>(withheld)</td>
<td class="positive desktop-row">1</td>
<td class="zero desktop-row">0</td>
<td class="zero desktop-row">0</td>
<td class="zero desktop-row">0</td>
<td class="bold positive">1</td>
<td class="bold positive">1</td>
<td class="zero desktop-row">0</td>
<td class="zero desktop-row">0</td>
<td class="zero desktop-row">0</td>
<td class="positive desktop-row">1</td>
<td class="text-cell">bloodline</br>(trance)</td>
</tr>
<!-- Episode 21 -->
<tr>
<td class="episode-cell"><a href="https://play.fountain.fm/app/episode/LHUTEuSWl2cZzOOT1j3N" target="_blank">E21</a></td>
<td class="text-cell">commuted</br>(fielding)</td>
<td class="positive desktop-row">1</td>
<td class="zero desktop-row">0</td>
<td class="zero desktop-row">0</td>
<td class="zero desktop-row">0</td>
<td class="bold positive">1</td>
<td class="bold positive">1</td>
<td class="zero desktop-row">0</td>
<td class="zero desktop-row">0</td>
<td class="zero desktop-row">0</td>
<td class="positive desktop-row">1</td>
<td class="text-cell">decompose</br>(footprints)</td>
</tr>
<!-- Episode 20 -->
<tr>
<td class="episode-cell"><a href="https://play.fountain.fm/app/episode/QVgByFTGVh8b4d8Pbj2i" target="_blank">E20</a></td>
<td class="text-cell">withering</br>(fascination)</td>
<td class="positive desktop-row">1</td>
<td class="zero desktop-row">0</td>
<td class="zero desktop-row">0</td>
<td class="zero desktop-row">0</td>
<td class="bold positive">1</td>
<td class="bold positive">4</td>
<td class="positive desktop-row">1</td>
<td class="zero desktop-row">0</td>
<td class="positive desktop-row">2</td>
<td class="positive desktop-row">1</td>
<td class="text-cell">indeterminate</br>(abundantly)</td>
</tr>
<!-- Episode 19 -->
<tr>
<td class="episode-cell"><a href="https://play.fountain.fm/app/episode/Dgm1gu227IuSu8jvtUtc" target="_blank">E19</a></td>
<td class="text-cell">brittle</br>(newcomers)</td>
<td class="positive desktop-row">1</td>
<td class="zero desktop-row">0</td>
<td class="zero desktop-row">0</td>
<td class="zero desktop-row">0</td>
<td class="bold positive">1</td>
<td class="bold positive">1</td>
<td class="zero desktop-row">0</td>
<td class="zero desktop-row">0</td>
<td class="zero desktop-row">0</td>
<td class="positive desktop-row">1</td>
<td class="text-cell">slaying</br>(giveaway)</td>
</tr>
<!-- Episode 18 -->
<tr>
<td class="episode-cell"><a href="https://play.fountain.fm/app/episode/iKXltqJDreJKBmOtqQTN" target="_blank">E18</a></td>
<td class="text-cell">carcass</br>(antibodies)</td>
<td class="positive desktop-row">1</td>
<td class="positive desktop-row">2</td>
<td class="zero desktop-row">0</td>
<td class="positive desktop-row">1</td>
<td class="bold positive">4</td>
<td class="bold positive">2</td>
<td class="zero desktop-row">0</td>
<td class="positive desktop-row">1</td>
<td class="zero desktop-row">0</td>
<td class="positive desktop-row">1</td>
<td class="text-cell">coiled</br>(opportunities)</td>
</tr>
<!-- Episode 17 -->
<tr>
<td class="episode-cell"><a href="https://play.fountain.fm/app/episode/YYTsrwV8WQn2Szpd61dZ" target="_blank">E17</a></td>
<td class="text-cell">procrastination</br>(synapses)</td>
<td class="positive desktop-row">1</td>
<td class="zero desktop-row">0</td>
<td class="zero desktop-row">0</td>
<td class="zero desktop-row">0</td>
<td class="bold positive">1</td>
<td class="bold positive">1</td>
<td class="zero desktop-row">0</td>
<td class="zero desktop-row">0</td>
<td class="zero desktop-row">0</td>
<td class="positive desktop-row">1</td>
<td class="text-cell">purification</br>(cancellations)</td>
</tr>
<!-- Episode 16 -->
<tr>
<td class="episode-cell"><a href="https://play.fountain.fm/app/episode/YYTsrwV8WQn2Szpd61dZ" target="_blank">E16</a></td>
<td class="text-cell">sociology</td>
<td class="positive desktop-row">1</td>
<td class="positive desktop-row">2</td>
<td class="zero desktop-row">0</td>
<td class="zero desktop-row">-</td>
<td class="bold positive">3</td>
<td class="bold positive">2</td>
<td class="zero desktop-row">-</td>
<td class="positive desktop-row">1</td>
<td class="zero desktop-row">0</td>
<td class="positive desktop-row">1</td>
<td class="text-cell">electrodes</td>
</tr>
<!-- Episode 15 -->
<tr>
<td class="episode-cell"><a href="https://play.fountain.fm/app/episode/9jpqYcpL4jjW4qNMAgiY" target="_blank">E15</a></td>
<td class="text-cell">decapitated</td>
<td class="positive desktop-row">1</td>
<td class="zero desktop-row">0</td>
<td class="zero desktop-row">0</td>
<td class="zero desktop-row">-</td>
<td class="bold positive">1</td>
<td class="bold positive">3</td>
<td class="zero desktop-row">-</td>
<td class="zero desktop-row">0</td>
<td class="positive desktop-row">2</td>
<td class="positive desktop-row">1</td>
<td class="text-cell">sovereign</td>
</tr>
<!-- Episode 14 -->
<tr>
<td class="episode-cell"><a href="https://play.fountain.fm/app/episode/cODjmhi2X5jKsQ9d6apo" target="_blank">E14</a></td>
<td class="text-cell">stockings</td>
<td class="positive desktop-row">1</td>
<td class="zero desktop-row">0</td>
<td class="zero desktop-row">0</td>
<td class="zero desktop-row">-</td>
<td class="bold positive">1</td>
<td class="bold positive">1</td>
<td class="zero desktop-row">-</td>
<td class="zero desktop-row">0</td>
<td class="zero desktop-row">0</td>
<td class="positive desktop-row">1</td>
<td class="text-cell">conquering</td>
</tr>
<!-- Episode 13 -->
<tr>
<td class="episode-cell"><a href="https://play.fountain.fm/app/episode/ICMIhVubeU29ALU6m9NK" target="_blank">E13</a></td>
<td class="text-cell">vertebrae</td>
<td class="positive desktop-row">1</td>
<td class="zero desktop-row">0</td>
<td class="zero desktop-row">0</td>
<td class="zero desktop-row">-</td>
<td class="bold positive">1</td>
<td class="bold positive">1</td>
<td class="zero desktop-row">-</td>
<td class="zero desktop-row">0</td>
<td class="zero desktop-row">0</td>
<td class="positive desktop-row">1</td>
<td class="text-cell">memorabilia</td>
</tr>
<!-- Episode 12 -->
<tr>
<td class="episode-cell"><a href="https://play.fountain.fm/app/episode/wTIkCvuU0insK0hwn7CN" target="_blank">E12</a></td>
<td class="text-cell">separation</td>
<td class="zero desktop-row">0</td>
<td class="positive desktop-row">&#189;</td>
<td class="zero desktop-row">0</td>
<td class="zero desktop-row">-</td>
<td class="bold positive">&#189;</td>
<td class="bold positive">1</td>
<td class="zero desktop-row">-</td>
<td class="zero desktop-row">0</td>
<td class="zero desktop-row">0</td>
<td class="positive desktop-row">1</td>
<td class="text-cell">flavor</td>
</tr>
<!-- Episode 11 -->
<tr>
<td class="episode-cell"><a href="https://play.fountain.fm/app/episode/4F9Qz1druXyifJbRrDGe" target="_blank">E11</a></td>
<td class="text-cell">whiny</td>
<td class="positive desktop-row">1</td>
<td class="zero desktop-row">0</td>
<td class="zero desktop-row">0</td>
<td class="zero desktop-row">-</td>
<td class="bold positive">1</td>
<td class="bold positive">1</td>
<td class="zero desktop-row">-</td>
<td class="zero desktop-row">0</td>
<td class="zero desktop-row">0</td>
<td class="positive desktop-row">1</td>
<td class="text-cell">neighborhoods</td>
</tr>
<!-- Episode 10 -->
<tr>
<td class="episode-cell"><a href="https://play.fountain.fm/app/episode/NqvQESIxIEQqR4vqsCEa" target="_blank">E10</a></td>
<td class="text-cell">entity</td>
<td class="positive desktop-row">1</td>
<td class="zero desktop-row">0</td>
<td class="zero desktop-row">0</td>
<td class="zero desktop-row">-</td>
<td class="bold positive">1</td>
<td class="bold positive">3</td>
<td class="zero desktop-row">-</td>
<td class="positive desktop-row">2</td>
<td class="zero desktop-row">0</td>
<td class="positive desktop-row">1</td>
<td class="text-cell">earlobe</td>
</tr>
<!-- Episode 9 -->
<tr>
<td class="episode-cell"><a href="https://play.fountain.fm/app/episode/XZoH7flV1V6Sv7QjZr3n" target="_blank">E09</a></td>
<td class="text-cell">hydrogen</td>
<td class="positive desktop-row">1</td>
<td class="zero desktop-row">0</td>
<td class="zero desktop-row">0</td>
<td class="zero desktop-row">-</td>
<td class="bold positive">1</td>
<td class="bold positive">1</td>
<td class="zero desktop-row">-</td>
<td class="zero desktop-row">0</td>
<td class="zero desktop-row">0</td>
<td class="positive desktop-row">1</td>
<td class="text-cell">harass</td>
</tr>
<!-- Episode 8 -->
<tr>
<td class="episode-cell"><a href="https://play.fountain.fm/app/episode/apeNIjGFKxlZHNwauN1m" target="_blank">E08</a></td>
<td class="text-cell">trimmings</td>
<td class="positive desktop-row">1</td>
<td class="zero desktop-row">0</td>
<td class="zero desktop-row">0</td>
<td class="zero desktop-row">-</td>
<td class="bold positive">1</td>
<td class="bold positive">1</td>
<td class="zero desktop-row">-</td>
<td class="zero desktop-row">0</td>
<td class="zero desktop-row">0</td>
<td class="positive desktop-row">1</td>
<td class="text-cell">licks</td>
</tr>
<!-- Episode 7 -->
<tr>
<td class="episode-cell"><a href="https://play.fountain.fm/app/episode/3IgotqQQ5dM2FcKKbj8S" target="_blank">E07</a></td>
<td class="text-cell">vouching</td>
<td class="positive desktop-row">1</td>
<td class="zero desktop-row">0</td>
<td class="zero desktop-row">0</td>
<td class="zero desktop-row">-</td>
<td class="bold positive">1</td>
<td class="bold positive">1</td>
<td class="zero desktop-row">-</td>
<td class="zero desktop-row">0</td>
<td class="zero desktop-row">0</td>
<td class="positive desktop-row">1</td>
<td class="text-cell">legwork</td>
</tr>
<!-- Episode 6 -->
<tr>
<td class="episode-cell"><a href="https://play.fountain.fm/app/episode/lF9lCyorQ1SgYicFM8g0" target="_blank">E06</a></td>
<td class="text-cell">confluence</td>
<td class="positive desktop-row">1</td>
<td class="zero desktop-row">0</td>
<td class="zero desktop-row">0</td>
<td class="zero desktop-row">-</td>
<td class="bold positive">1</td>
<td class="bold positive">2</td>
<td class="zero desktop-row">-</td>
<td class="zero desktop-row">0</td>
<td class="positive desktop-row">2</td>
<td class="zero desktop-row">0</td>
<td class="text-cell">stiletto</td>
</tr>
<!-- Episode 5 -->
<tr>
<td class="episode-cell"><a href="https://play.fountain.fm/app/episode/804KutPk7uQdIyfL9Qpt" target="_blank">E05</a></td>
<td class="text-cell">workstation</td>
<td class="positive desktop-row">1</td>
<td class="zero desktop-row">0</td>
<td class="zero desktop-row">0</td>
<td class="zero desktop-row">-</td>
<td class="bold positive">1</td>
<td class="bold positive">2</td>
<td class="zero desktop-row">-</td>
<td class="positive desktop-row">1</td>
<td class="zero desktop-row">0</td>
<td class="positive desktop-row">1</td>
<td class="text-cell">demeaning</td>
</tr>
<!-- Episode 4 -->
<tr>
<td class="episode-cell"><a href="https://play.fountain.fm/app/episode/zhwKST6P638b7wOk7wB2" target="_blank">E04</a></td>
<td class="text-cell">flotation</td>
<td class="positive desktop-row">1</td>
<td class="zero desktop-row">0</td>
<td class="positive desktop-row">1</td>
<td class="zero desktop-row">-</td>
<td class="bold positive">2</td>
<td class="bold positive">1</td>
<td class="zero desktop-row">-</td>
<td class="zero desktop-row">0</td>
<td class="zero desktop-row">0</td>
<td class="positive desktop-row">1</td>
<td class="text-cell">reunions</td>
</tr>
<!-- Episode 3 -->
<tr>
<td class="episode-cell"><a href="https://play.fountain.fm/app/episode/imxLcXG7Ny4PAsY4CNTZ" target="_blank">E03</a></td>
<td class="text-cell">eerie</td>
<td class="zero desktop-row">0</td>
<td class="zero desktop-row">0</td>
<td class="zero desktop-row">0</td>
<td class="zero desktop-row">-</td>
<td class="bold zero">0</td>
<td class="bold positive">1</td>
<td class="zero desktop-row">-</td>
<td class="zero desktop-row">0</td>
<td class="zero desktop-row">0</td>
<td class="positive desktop-row">1</td>
<td class="text-cell">fingerprints</td>
</tr>
<!-- Episode 2 -->
<tr>
<td class="episode-cell"><a href="https://play.fountain.fm/app/episode/ktMuRNTRctPtLQEVCY83" target="_blank">E02</a></td>
<td class="text-cell">honed</td>
<td class="positive desktop-row">1</td>
<td class="zero desktop-row">0</td>
<td class="zero desktop-row">0</td>
<td class="zero desktop-row">-</td>
<td class="bold positive">1</td>
<td class="bold positive">1</td>
<td class="zero desktop-row">-</td>
<td class="zero desktop-row">0</td>
<td class="zero desktop-row">0</td>
<td class="positive desktop-row">1</td>
<td class="text-cell">kidnappers</td>
</tr>
<!-- Episode 1 -->
<tr>
<td class="episode-cell"><a href="https://play.fountain.fm/app/episode/OVc4VCWMn3h1He1aHyFP" target="_blank">E01</a></td>
<td class="text-cell">massaged</td>
<td class="positive desktop-row">1</td>
<td class="zero desktop-row">0</td>
<td class="zero desktop-row">0</td>
<td class="zero desktop-row">-</td>
<td class="bold positive">1</td>
<td class="bold positive">1</td>
<td class="zero desktop-row">-</td>
<td class="zero desktop-row">0</td>
<td class="zero desktop-row">0</td>
<td class="positive desktop-row">1</td>
<td class="text-cell">shrinkage</td>
</tr>
<tr style="height: 60px;">
<td></td>
<td></td>
<td class="desktop-row"></td>
<td class="desktop-row"></td>
<td class="desktop-row"></td>
<td class="desktop-row"></td>
<td></td>
<td></td>
<td class="desktop-row"></td>
<td class="desktop-row"></td>
<td class="desktop-row"></td>
<td class="desktop-row"></td>
<td></td>
</tr>
<tr>
<th></th>
<th class="merged-header desktop-row" colspan="12" style="background-color: var(--spotify-color); color: whitesmoke;">Other Friends</th>
<th class="merged-header mobile-row" colspan="4" style="background-color: var(--spotify-color); color: whitesmoke;">Other Friends</th>
</tr>
<tr>
<td></td>
<td class="text-header-cell desktop-row" colspan="6"><b>Friend</b></td>
<td class="text-header-cell mobile-row" colspan="2"><b>Friend</b></td>
<td style="font-weight:bolder">T</td>
<td class="desktop-row"><b>D</b></td>
<td class="desktop-row"><b>O</b></td>
<td class="desktop-row"><b>G</b></td>
<td class="desktop-row"><b>S</b></td>
<td class="text-header-cell"><b>Word</b></td>
</tr>
<!-- Episode 15 -->
<tr>
<td class="episode-cell"><a href="https://play.fountain.fm/app/episode/9jpqYcpL4jjW4qNMAgiY" target="_blank">E15</a></td>
<td class="merged-header desktop-row" colspan="6">Krissy</a></td>
<td class="merged-header mobile-row" colspan="2">Krissy</a></td>
<td class="bold positive">3</td>
<td class="zero desktop-row">-</td>
<td class="zero desktop-row">0</td>
<td class="positive desktop-row">2</td>
<td class="positive desktop-row">1</td>
<td class="text-cell">cumulative</td>
</tr>
<!-- Episode 9 -->
<tr>
<td class="episode-cell"><a href="https://play.fountain.fm/app/episode/XZoH7flV1V6Sv7QjZr3n" target="_blank">E09</a></td>
<td class="merged-header desktop-row" colspan="6">Blake</a></td>
<td class="merged-header mobile-row" colspan="2">Blake</a></td>
<td class="bold positive">1</td>
<td class="zero desktop-row">-</td>
<td class="zero desktop-row">0</td>
<td class="zero desktop-row">0</td>
<td class="positive desktop-row">1</td>
<td class="text-cell">urine</td>
</tr>
</table>
</br>
</br>
<p style="font-size: smaller; font-weight: 700;">Key:</p>
<ul style="margin-left: 20px;">
<li style="font-size: smaller;">S(aid) = Said their word</li>
<li style="font-size: smaller;">G(ot'em) = Correctly identified other's word <span style="color: red;">(worth two points)</span></li>
<li style="font-size: smaller;">O(ther) = Number of times other one said their word</li>
<li style="font-size: smaller;">D(ecoy) = Other one guessed the decoy word as secret word or correctly identified it as the decoy word</li>
<li style="font-size: smaller;">T(otal) = Total points in the episode</li>
</ul>
<br>
<p style="font-size: smaller; text-align: center; color: darkblue;">Helpful tip: on mobile, rotate to landscape to see all the columns.</p>
</section>
</main>
<script src="../main.js"></script>
<footer>
<div class="bottom-banner">~ V.F.F.~</div>
</footer>
</body>
</html>
+631
View File
@@ -0,0 +1,631 @@
/* CSS Reset */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: inherit;
}
/* CSS Custom Properties */
:root {
--primary-color: #003454;
--primary-hover: #004a66;
--background-color: #e3c5c5;
--text-color: #333;
--white-overlay: rgba(255, 255, 255, 0.9);
--white-semi: rgba(255, 255, 255, 0.3);
--spotify-color: #4A817B;
--border-radius: 6px;
--transition: 0.3s ease;
--shadow-light: 0 2px 5px rgba(0, 0, 0, 0.1);
--shadow-medium: 0 10px 30px rgba(0, 0, 0, 0.2);
--shadow-heavy: 0 10px 30px rgba(0, 0, 0, 0.3);
--max-width: 800px;
--container-width: 1200px;
}
/* Base Styles */
body {
display: grid;
grid-template-rows: auto 1fr auto;
min-height: 100vh;
background-color: var(--background-color);
color: var(--text-color);
font-family: Arial, sans-serif;
line-height: 1.6;
margin: 0;
padding: 0;
}
/* Header */
header {
background-color: var(--white-overlay);
padding: 1rem 1rem;
position: sticky;
top: 0;
box-shadow: var(--shadow-light);
max-height: fit-content;
}
.nav-container {
display: flex;
justify-content: space-between;
align-items: center;
max-width: var(--container-width);
margin: 0 auto;
}
.nav-brand {
font-size: 1.5rem;
font-weight: bold;
color: var(--primary-color);
cursor: pointer;
transition: color var(--transition);
}
.nav-brand:hover {
color: var(--primary-hover);
text-decoration: none;
}
.nav-menu {
display: flex;
list-style: none;
gap: 1rem;
}
.nav-item {
cursor: pointer;
padding: 0.5rem 0.5rem;
border-radius: var(--border-radius);
transition: background-color var(--transition);
}
.nav-item:hover {
background-color: rgba(0, 52, 84, 0.1);
text-decoration: none;
}
.hamburger {
display: none;
flex-direction: column;
cursor: pointer;
padding: 1px;
}
.hamburger span {
width: 25px;
height: 3px;
background-color: var(--text-color);
margin: 3px 0;
transition: var(--transition);
}
.footer {
flex-shrink: 0; /* Prevents footer from shrinking */
margin-top: auto; /* Pushes footer to bottom */
}
.bottom-banner {
text-align: center;
padding: 10px;
font-size: 14px;
font-family: "Courier", "Courier New", "Lucida Console", "Liberation Mono", monospace;
color: white;
background-image: linear-gradient(to right, #4A817B, #003454)
}
/* Main Content */
.page-section {
display: block;
padding: 2rem;
max-width: var(--max-width);
margin: 0 auto;
flex: 1 0 auto;
width: 100%;
}
.content-page {
display: flex;
flex-direction: column;
max-width: var(--max-width);
margin: 0 auto;
}
/* Hero Section */
.hero {
text-align: center;
padding: 3rem 0;
}
.logo-container {
margin-bottom: 2rem;
}
.logo-image {
max-width: 300px;
height: auto;
border-radius: var(--border-radius);
box-shadow: var(--shadow-medium);
}
.description {
font-size: 1.5rem;
color: var(--primary-color);
margin-bottom: 0;
}
/* Interactive Elements */
.back-button {
background-color: var(--primary-color);
color: white;
border: none;
padding: 0.5rem 1rem;
border-radius: var(--border-radius);
cursor: pointer;
margin-bottom: 2rem;
font-size: 1rem;
transition: background-color var(--transition);
}
.back-button:hover {
background-color: var(--primary-hover);
}
.platform-button {
display: flex;
flex-direction: column;
align-items: center;
padding: 15px;
background: #f8f8f8;
border: 2px solid transparent;
border-radius: var(--border-radius);
text-decoration: none;
transition: all var(--transition);
cursor: pointer;
}
.platform-button:hover {
background: #fff;
border-color: #667eea;
transform: translateY(-3px);
box-shadow: 0 10px 20px rgba(102, 126, 234, 0.2);
}
/* Typography */
h1 {
color: var(--primary-color);
margin-bottom: 1.5rem;
font-size: 2.5rem;
text-align: center;
}
h3 {
color: var(--primary-color);
margin-bottom: 1rem;
text-align: center;
}
p {
margin-bottom: 1rem;
font-size: 1.1rem;
}
a {
color: var(--primary-color);
text-decoration: none;
}
a:hover {
text-decoration: none;
}
/* Content Cards */
.host-info,
.contact-info,
.socials {
margin: 2rem 0;
padding: 1.5rem;
background-color: var(--white-semi);
border-radius: var(--border-radius);
box-shadow: var(--shadow-heavy);
}
.socials {
align-items: center;
margin: 0 auto;
}
.podcast-container {
background: rgba(255, 255, 255, 0.95);
border-radius: var(--border-radius);
padding: 30px;
max-width: 768px;
width: 100%;
box-shadow: var(--shadow-heavy);
align-items: center;
margin: 0 auto;
}
/* Grid Layouts */
.platform-links {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(60px, 1fr));
gap: 10px;
margin-bottom: 30px;
}
.social-links {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(40px, 1fr));
gap: 10px;
}
/* Media Elements */
.episodes-embed-container {
width: 100%;
margin: 0 auto;
max-width: var(--max-width);
position: relative;
border-radius: var(--border-radius);
overflow: hidden;
contain: layout style;
will-change: transform;
}
.episodes-embed-container iframe {
width: 100%;
max-height: 400px;
border: none;
border-radius: var(--border-radius);
display: block;
transform: translateZ(0);
backface-visibility: hidden;
}
.iframespotify-wrapper {
position: relative;
width: 100%;
padding-bottom: 70%; /* Adjust ratio based on content */
border-radius: var(--border-radius);
}
.iframespotify-wrapper iframe {
position: absolute;
left: 0;
width: 100% !important;
height: 100% !important;
border-radius: var(--border-radius);
}
.iframespotify-wrapper h3 {
color: #ffffff;
text-align: center;
margin: 0;
padding: 1rem;
background-color: var(--spotify-color);
border-radius: var(--border-radius);
font-size: 1.4rem;
font-weight: 900;
}
/* Icons */
.platform-icon {
width: 64px;
height: 64px;
margin-bottom: 18px;
display: block;
border-radius: var(--border-radius);
}
.socials-icon {
height: 36px;
display: block;
border-radius: var(--border-radius);
}
/* Text Styling */
.platform-name,
.rss-feed {
font-size: 14px;
color: var(--text-color);
text-align: center;
}
.platform-name {
font-weight: 500;
}
.rss-feed {
margin-top: 10px;
}
.rss-link {
color: #667eea;
word-break: break-all;
text-decoration: none;
}
.rss-link:hover {
text-decoration: underline;
}
/* Images */
.fit-picture {
max-height: 480px;
max-width: 720px;
display: block;
margin: auto;
border: 5px solid var(--primary-hover);
border-radius: var(--border-radius);
}
.fit-guest-picture {
max-width: 360px;
border: 3px solid var(--spotify-color)
}
/* Tables */
table {
table-layout: fixed;
border-collapse: collapse;
margin: 20px auto;
font-family: Arial, sans-serif;
font-size: 0.9rem;
}
th, td {
border: 1px transparent;
padding: 4px;
text-align: center;
}
col.col1 { width: 100px; }
col.col2 { width: 110px; }
col.col3 { width: 40px; }
col.col4 { width: 40px; }
col.col5 { width: 40px; }
col.col6 { width: 40px; }
col.col7 { width: 50px; }
col.col8 { width: 50px; }
col.col9 { width: 40px; }
col.col10 { width: 40px; }
col.col11 { width: 40px; }
col.col12 { width: 40px; }
col.col13 { width: 110px; }
.header,
.bold {
font-weight: bold;
border: 1.5px solid darkgreen;
}
.merged-header {
background-color: #f0f0f0;
border: 1.0px solid var(--primary-color);
}
.header-friends {
column-span: 5;
}
.positive {
background-color: #d4f6d4;
}
.negative {
background-color: #c46c6c;
}
.zero {
background-color: lightgray;
}
.text-header-cell,
.episode-cell {
text-align: center;
color: var(--primary-color);
}
.text-cell {
text-align: center;
background-color: var(--primary-color);
color: lightgray;
border: 1.5px solid green;
}
.last-row {
font-weight: bold;
border: 1.5px solid darkgreen;
}
.last-row-totals {
font-weight: bold;
border: 5px solid darkgreen;
}
.desktop-row {
display: table-cell;
}
.mobile-row {
display: none;
}
/* Media Queries */
@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: var(--transition);
box-shadow: 0 10px 27px rgba(0, 0, 0, 0.05);
padding: 1rem;
z-index: 1000;
}
.nav-menu.active {
left: 0;
}
.nav-item {
margin: 0.25rem;
padding: 0.25rem;
}
.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;
}
.page-section {
padding: 1rem;
}
.hero {
padding: 2rem 0;
}
.logo-image {
max-width: 250px;
}
.description {
font-size: 1.2rem;
}
table {
font-size: small;
}
/*
th[colspan="5"], th[colspan="10"] {
display: none;
}
th[colspan="4"] {
display: table-cell;
}
th[colspan="2"], td[colspan="2"] {
display: table-cell;
}
td[colspan="9"], td[colspan="5"] {
display: none;
}
td[colspan="4"] {
display: table-cell;
}
*/
.header-friends {
column-span: 2;
}
.desktop-row {
display: none;
}
.mobile-row {
display: table-cell;
}
col.col1 { width: 20%; }
col.col2 { width: 30%; }
col.col3 { width: 10%; }
col.col4 { width: 10%; }
col.col5 { width: 30%; }
h1 {
font-size: 2rem;
}
.iframespotify-wrapper h3 {
font-size: 1.2rem;
padding: 0.8rem;
}
.platform-links,
.social-links {
grid-template-columns: repeat(3, 1fr);
}
.fit-picture {
max-width: 100%;
height: auto;
}
.fit-guest-picture {
max-width: 75%;
height: auto;
}
}
@media (max-width: 480px) {
table {
font-size: 0.75rem;
}
.logo-image {
max-width: 200px;
}
.description {
font-size: 1rem;
}
h1 {
font-size: 1.8rem;
}
.iframespotify-wrapper h3 {
font-size: 1.2rem;
padding: 0.8rem;
}
.platform-links {
grid-template-columns: repeat(2, 1fr);
}
.social-links {
grid-template-columns: repeat(3, 1fr);
}
.fit-picture {
max-width: 100%;
height: auto;
}
.fit-guest-picture {
max-width: 75%;
height: auto;
}
}