commit 4994ead15f9c315cf904b565d0ec102295a086be
Author: root <root@hub.scroll.pub>
Date: 2025-01-15 09:49:48 +0000
Subject: Initial commit
diff --git a/index.scroll b/index.scroll
new file mode 100644
index 0000000..c4832fc
--- /dev/null
+++ b/index.scroll
@@ -0,0 +1,93 @@
+buildHtml
+baseUrl https://flux.scroll.pub
+metaTags
+editButton /edit.html
+title Flux: Navigating Life's Transformations
+style.css
+header
+ class hero
+ div
+ class logo
+ span Flux
+ nav
+ class main-nav
+ a Home
+ href #
+ a Stories
+ href #featured-stories
+ a About
+ href #about
+ a Community
+ href #community
+main
+ section
+ class hero-content
+ h1 Navigating Life's Transformations
+ p Your guide through life's most significant transitions
+ button Listen Now
+ class cta-button
+ section
+ id about
+ class about-section
+ h2 About Flux
+ p Flux is more than just a podcast—it's a journey through the myriad ways people transform their lives. We believe that change is the only constant, and embracing it is the key to personal growth and fulfilment.
+ div
+ class benefits-grid
+ div
+ class benefit-card
+ h3 Inspiring Stories
+ p Hear authentic narratives from people who've successfully navigated major life transitions
+ div
+ class benefit-card
+ h3 Practical Insights
+ p Gain strategies and tools for managing your own periods of change
+ div
+ class benefit-card
+ h3 Diverse Perspectives
+ p Explore various types of transitions across different life domains
+ div
+ class benefit-card
+ h3 Community Support
+ p Connect with others who are embracing life's changes
+ section
+ id featured-stories
+ class featured-section
+ h2 Featured Stories
+ div
+ class story-grid
+ article
+ class story-card
+ h3 Career Transitions
+ p From software engineering to cybersecurity: Real stories of professional evolution
+ article
+ class story-card
+ h3 Spiritual Journeys
+ p Discovering new paths and perspectives in life
+ article
+ class story-card
+ h3 Lifestyle Changes
+ p Adventures in transforming daily routines and habits
+ article
+ class story-card
+ h3 Personal Reinventions
+ p Breaking free from conventional paths
+ section
+ id community
+ class community-section
+ h2 Join the Flux Community
+ p Flux isn't just about listening to others' stories—it's about empowering you to write your own.
+ button Subscribe Now
+ class subscribe-button
+footer
+ div
+ class footer-content
+ nav
+ class footer-nav
+ a Listen
+ href #
+ a Stories
+ href #featured-stories
+ a Contact
+ href #
+ p Made with passion by the Flux team
+script.js
\ No newline at end of file
diff --git a/prompt.json b/prompt.json
new file mode 100644
index 0000000..3b00b38
--- /dev/null
+++ b/prompt.json
@@ -0,0 +1,20 @@
+{
+ "id": "msg_01GGBpVS31fTffvjYYXTx8GJ",
+ "type": "message",
+ "role": "assistant",
+ "model": "claude-3-5-sonnet-20241022",
+ "content": [
+ {
+ "type": "text",
+ "text": "For this podcast about life transitions and transformations, I suggest the domain \"flux.scroll.pub\". It's short, memorable, and directly matches the podcast name.\n\n---domain---\nflux.scroll.pub\n---index.scroll---\nbuildHtml\nbaseUrl https://flux.scroll.pub\nmetaTags\neditButton /edit.html\ntitle Flux: Navigating Life's Transformations\nstyle.css\nheader\n class hero\n div\n class logo\n span Flux\n nav\n class main-nav\n a Home\n href #\n a Stories\n href #featured-stories\n a About\n href #about\n a Community\n href #community\nmain\n section\n class hero-content\n h1 Navigating Life's Transformations\n p Your guide through life's most significant transitions\n button Listen Now\n class cta-button\n section\n id about\n class about-section\n h2 About Flux\n p Flux is more than just a podcast—it's a journey through the myriad ways people transform their lives. We believe that change is the only constant, and embracing it is the key to personal growth and fulfilment.\n div\n class benefits-grid\n div\n class benefit-card\n h3 Inspiring Stories\n p Hear authentic narratives from people who've successfully navigated major life transitions\n div\n class benefit-card\n h3 Practical Insights\n p Gain strategies and tools for managing your own periods of change\n div\n class benefit-card\n h3 Diverse Perspectives\n p Explore various types of transitions across different life domains\n div\n class benefit-card\n h3 Community Support\n p Connect with others who are embracing life's changes\n section\n id featured-stories\n class featured-section\n h2 Featured Stories\n div\n class story-grid\n article\n class story-card\n h3 Career Transitions\n p From software engineering to cybersecurity: Real stories of professional evolution\n article\n class story-card\n h3 Spiritual Journeys\n p Discovering new paths and perspectives in life\n article\n class story-card\n h3 Lifestyle Changes\n p Adventures in transforming daily routines and habits\n article\n class story-card\n h3 Personal Reinventions\n p Breaking free from conventional paths\n section\n id community\n class community-section\n h2 Join the Flux Community\n p Flux isn't just about listening to others' stories—it's about empowering you to write your own.\n button Subscribe Now\n class subscribe-button\nfooter\n div\n class footer-content\n nav\n class footer-nav\n a Listen\n href #\n a Stories\n href #featured-stories\n a Contact\n href #\n p Made with passion by the Flux team\nscript.js\n---style.css---\n:root {\n --primary-color: #6b48ff;\n --secondary-color: #1e1e2e;\n --accent-color: #ff6b6b;\n --text-color: #333;\n --light-bg: #f5f5f7;\n --transition: all 0.3s ease;\n}\n\n* {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n}\n\nbody {\n font-family: 'Segoe UI', system-ui, sans-serif;\n line-height: 1.6;\n color: var(--text-color);\n}\n\n.hero {\n background: linear-gradient(135deg, var(--secondary-color), var(--primary-color));\n color: white;\n padding: 1rem 2rem;\n position: fixed;\n width: 100%;\n top: 0;\n z-index: 1000;\n}\n\n.logo {\n font-size: 2rem;\n font-weight: bold;\n background: linear-gradient(45deg, #fff, #f0f0f0);\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n text-shadow: 0 2px 4px rgba(0,0,0,0.1);\n}\n\n.main-nav {\n display: flex;\n gap: 2rem;\n justify-content: flex-end;\n}\n\n.main-nav a {\n color: white;\n text-decoration: none;\n position: relative;\n padding: 0.5rem 0;\n}\n\n.main-nav a::after {\n content: '';\n position: absolute;\n width: 0;\n height: 2px;\n bottom: 0;\n left: 0;\n background-color: var(--accent-color);\n transition: var(--transition);\n}\n\n.main-nav a:hover::after {\n width: 100%;\n}\n\nmain {\n margin-top: 4rem;\n}\n\n.hero-content {\n text-align: center;\n padding: 6rem 2rem;\n background: linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.7)), url('data:image/svg+xml,<svg width=\"100\" height=\"100\" viewBox=\"0 0 100 100\" xmlns=\"http://www.w3.org/2000/svg\"><rect width=\"100\" height=\"100\" fill=\"%236b48ff\" opacity=\"0.1\"/></svg>');\n color: white;\n}\n\n.benefits-grid, .story-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\n gap: 2rem;\n padding: 2rem;\n}\n\n.benefit-card, .story-card {\n padding: 2rem;\n border-radius: 1rem;\n background: white;\n box-shadow: 0 4px 6px rgba(0,0,0,0.1);\n transition: var(--transition);\n}\n\n.benefit-card:hover, .story-card:hover {\n transform: translateY(-5px);\n box-shadow: 0 8px 12px rgba(0,0,0,0.15);\n}\n\n.cta-button, .subscribe-button {\n padding: 1rem 2rem;\n border: none;\n border-radius: 2rem;\n background: var(--accent-color);\n color: white;\n font-weight: bold;\n cursor: pointer;\n transition: var(--transition);\n}\n\n.cta-button:hover, .subscribe-button:hover {\n transform: scale(1.05);\n box-shadow: 0 4px 8px rgba(0,0,0,0.2);\n}\n\nsection {\n padding: 4rem 2rem;\n}\n\n.about-section {\n background: var(--light-bg);\n}\n\nfooter {\n background: var(--secondary-color);\n color: white;\n padding: 2rem;\n text-align: center;\n}\n\n@media (max-width: 768px) {\n .main-nav {\n flex-direction: column;\n align-items: center;\n gap: 1rem;\n }\n \n .benefits-grid, .story-grid {\n grid-template-columns: 1fr;\n }\n}\n---script.js---\ndocument.addEventListener('DOMContentLoaded', () => {\n // Smooth scroll for navigation links\n document.querySelectorAll('a[href^=\"#\"]').forEach(anchor => {\n anchor.addEventListener('click', function (e) {\n e.preventDefault();\n const target = document.querySelector(this.getAttribute('href'));\n if (target) {\n target.scrollIntoView({\n behavior: 'smooth',\n block: 'start'\n });\n }\n });\n });\n\n // Intersection Observer for fade-in animations\n const observer = new IntersectionObserver((entries) => {\n entries.forEach(entry => {\n if (entry.isIntersecting) {\n entry.target.style.opacity = '1';\n entry.target.style.transform = 'translateY(0)';\n }\n });\n }, { threshold: 0.1 });\n\n // Apply animations to cards\n document.querySelectorAll('.benefit-card, .story-card').forEach(card => {\n card.style.opacity = '0';\n card.style.transform = 'translateY(20px)';\n card.style.transition = 'opacity 0.5s ease, transform 0.5s ease';\n observer.observe(card);\n });\n\n // Mobile menu toggle\n const nav = document.querySelector('.main-nav');\n const header = document.querySelector('.hero');\n let lastScroll = 0;\n\n window.addEventListener('scroll', () => {\n const currentScroll = window.pageYOffset;\n if (currentScroll > lastScroll && currentScroll > 100) {\n header.style.transform = 'translateY(-100%)';\n } else {\n header.style.transform = 'translateY(0)';\n }\n lastScroll = currentScroll;\n });\n});\n---end---"
+ }
+ ],
+ "stop_reason": "end_turn",
+ "stop_sequence": null,
+ "usage": {
+ "input_tokens": 1286,
+ "cache_creation_input_tokens": 0,
+ "cache_read_input_tokens": 0,
+ "output_tokens": 2286
+ }
+}
\ No newline at end of file
diff --git a/readme.scroll b/readme.scroll
new file mode 100644
index 0000000..a4c8360
--- /dev/null
+++ b/readme.scroll
@@ -0,0 +1,3 @@
+# flux.scroll.pub
+
+website generated by Claude from prompt: # Flux: Navigating Life's Transformations Welcome to Flux, the podcast that explores the pivotal moments that reshape our lives. From career pivots to spiritual awakenings, from lifestyle changes to relationship evolutions, Flux is your guide through life's most significant transitions. ## About Flux Flux is more than just a podcast—it's a journey through the myriad ways people transform their lives. We believe that change is the only constant, and embracing it is the key to personal growth and fulfilment. Our show dives deep into real-life stories of individuals who have experienced profound shifts in their personal or professional lives. Whether it's a software engineer venturing into cybersecurity, a health care professional exploring a new field, or someone embracing a spiritual path, Flux brings you authentic narratives of transformation. ## What You'll Gain from Flux By tuning into Flux, you'll: - Hear inspiring stories from everyday people who've successfully navigated major life transitions - Gain practical insights and strategies for managing your own periods of change - Explore diverse types of transitions, from career shifts to personal reinventions - Discover the common threads that run through all successful transformations - Find encouragement and motivation to embrace the flux in your own life ## Featured Stories Each episode of Flux showcases a unique transition story, such as: - Career changes across diverse industries - Spiritual journeys and discoveries of faith - Lifestyle transformations, from solo adventures to committed partnerships - Personal reinventions that challenge societal norms ## Join the Flux Community Flux isn't just about listening to others' stories—it's about empowering you to write your own. Our community of listeners is united by a shared understanding that life is in constant flux, and that's where the greatest opportunities for growth lie. Subscribe to Flux today and start your journey towards embracing life's transitions. Whether you're standing at a crossroads or simply curious about the possibilities that change can bring, Flux is your companion in navigating the ever-changing currents of life. Remember, in a world of constant change, the only way to truly thrive is to become one with the flux.
\ No newline at end of file
diff --git a/script.js b/script.js
new file mode 100644
index 0000000..3c50be5
--- /dev/null
+++ b/script.js
@@ -0,0 +1,48 @@
+document.addEventListener('DOMContentLoaded', () => {
+ // Smooth scroll for navigation links
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
+ anchor.addEventListener('click', function (e) {
+ e.preventDefault();
+ const target = document.querySelector(this.getAttribute('href'));
+ if (target) {
+ target.scrollIntoView({
+ behavior: 'smooth',
+ block: 'start'
+ });
+ }
+ });
+ });
+
+ // Intersection Observer for fade-in animations
+ const observer = new IntersectionObserver((entries) => {
+ entries.forEach(entry => {
+ if (entry.isIntersecting) {
+ entry.target.style.opacity = '1';
+ entry.target.style.transform = 'translateY(0)';
+ }
+ });
+ }, { threshold: 0.1 });
+
+ // Apply animations to cards
+ document.querySelectorAll('.benefit-card, .story-card').forEach(card => {
+ card.style.opacity = '0';
+ card.style.transform = 'translateY(20px)';
+ card.style.transition = 'opacity 0.5s ease, transform 0.5s ease';
+ observer.observe(card);
+ });
+
+ // Mobile menu toggle
+ const nav = document.querySelector('.main-nav');
+ const header = document.querySelector('.hero');
+ let lastScroll = 0;
+
+ window.addEventListener('scroll', () => {
+ const currentScroll = window.pageYOffset;
+ if (currentScroll > lastScroll && currentScroll > 100) {
+ header.style.transform = 'translateY(-100%)';
+ } else {
+ header.style.transform = 'translateY(0)';
+ }
+ lastScroll = currentScroll;
+ });
+});
\ No newline at end of file
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..d574cf9
--- /dev/null
+++ b/style.css
@@ -0,0 +1,141 @@
+:root {
+ --primary-color: #6b48ff;
+ --secondary-color: #1e1e2e;
+ --accent-color: #ff6b6b;
+ --text-color: #333;
+ --light-bg: #f5f5f7;
+ --transition: all 0.3s ease;
+}
+
+* {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+body {
+ font-family: 'Segoe UI', system-ui, sans-serif;
+ line-height: 1.6;
+ color: var(--text-color);
+}
+
+.hero {
+ background: linear-gradient(135deg, var(--secondary-color), var(--primary-color));
+ color: white;
+ padding: 1rem 2rem;
+ position: fixed;
+ width: 100%;
+ top: 0;
+ z-index: 1000;
+}
+
+.logo {
+ font-size: 2rem;
+ font-weight: bold;
+ background: linear-gradient(45deg, #fff, #f0f0f0);
+ -webkit-background-clip: text;
+ -webkit-text-fill-color: transparent;
+ text-shadow: 0 2px 4px rgba(0,0,0,0.1);
+}
+
+.main-nav {
+ display: flex;
+ gap: 2rem;
+ justify-content: flex-end;
+}
+
+.main-nav a {
+ color: white;
+ text-decoration: none;
+ position: relative;
+ padding: 0.5rem 0;
+}
+
+.main-nav a::after {
+ content: '';
+ position: absolute;
+ width: 0;
+ height: 2px;
+ bottom: 0;
+ left: 0;
+ background-color: var(--accent-color);
+ transition: var(--transition);
+}
+
+.main-nav a:hover::after {
+ width: 100%;
+}
+
+main {
+ margin-top: 4rem;
+}
+
+.hero-content {
+ text-align: center;
+ padding: 6rem 2rem;
+ background: linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.7)), url('data:image/svg+xml,<svg width="100" height="100" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><rect width="100" height="100" fill="%236b48ff" opacity="0.1"/></svg>');
+ color: white;
+}
+
+.benefits-grid, .story-grid {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+ gap: 2rem;
+ padding: 2rem;
+}
+
+.benefit-card, .story-card {
+ padding: 2rem;
+ border-radius: 1rem;
+ background: white;
+ box-shadow: 0 4px 6px rgba(0,0,0,0.1);
+ transition: var(--transition);
+}
+
+.benefit-card:hover, .story-card:hover {
+ transform: translateY(-5px);
+ box-shadow: 0 8px 12px rgba(0,0,0,0.15);
+}
+
+.cta-button, .subscribe-button {
+ padding: 1rem 2rem;
+ border: none;
+ border-radius: 2rem;
+ background: var(--accent-color);
+ color: white;
+ font-weight: bold;
+ cursor: pointer;
+ transition: var(--transition);
+}
+
+.cta-button:hover, .subscribe-button:hover {
+ transform: scale(1.05);
+ box-shadow: 0 4px 8px rgba(0,0,0,0.2);
+}
+
+section {
+ padding: 4rem 2rem;
+}
+
+.about-section {
+ background: var(--light-bg);
+}
+
+footer {
+ background: var(--secondary-color);
+ color: white;
+ padding: 2rem;
+ text-align: center;
+}
+
+@media (max-width: 768px) {
+ .main-nav {
+ flex-direction: column;
+ align-items: center;
+ gap: 1rem;
+ }
+
+ .benefits-grid, .story-grid {
+ grid-template-columns: 1fr;
+ }
+}
\ No newline at end of file