commit a9b61b02ea097b067694ebd659f10314d69ef86c
Author: root <root@hub.scroll.pub>
Date: 2024-12-27 22:56:01 +0000
Subject: Initial commit
diff --git a/body.html b/body.html
new file mode 100644
index 0000000..ca003d2
--- /dev/null
+++ b/body.html
@@ -0,0 +1,107 @@
+<header>
+ <nav class="main-nav">
+ <div class="logo">FinStatGuide</div>
+ <button class="menu-toggle" aria-label="Toggle menu">
+ <span></span><span></span><span></span>
+ </button>
+ <ul class="nav-links">
+ <li><a href="#intro">Introduction</a></li>
+ <li><a href="#balance-sheet">Balance Sheet</a></li>
+ <li><a href="#income">Income Statement</a></li>
+ <li><a href="#cashflow">Cash Flow</a></li>
+ <li><a href="#ratios">Key Ratios</a></li>
+ </ul>
+ </nav>
+</header>
+
+<main>
+ <section class="hero">
+ <h1>Master Financial Statement Analysis</h1>
+ <p>Learn to read and analyze financial statements like a professional</p>
+ </section>
+
+ <section id="intro" class="content-section">
+ <h2>Introduction to Financial Statements</h2>
+ <div class="card">
+ <p>Financial statements tell the story of a company's financial health. The three main statements are:</p>
+ <ul>
+ <li>Balance Sheet</li>
+ <li>Income Statement</li>
+ <li>Cash Flow Statement</li>
+ </ul>
+ </div>
+ </section>
+
+ <section id="balance-sheet" class="content-section">
+ <h2>Balance Sheet Analysis</h2>
+ <div class="card">
+ <h3>Assets = Liabilities + Equity</h3>
+ <div class="interactive-element">
+ <div class="balance-sheet-demo">
+ <div class="assets">
+ <h4>Assets</h4>
+ <ul>
+ <li>Current Assets</li>
+ <li>Fixed Assets</li>
+ <li>Other Assets</li>
+ </ul>
+ </div>
+ <div class="liabilities-equity">
+ <h4>Liabilities & Equity</h4>
+ <ul>
+ <li>Current Liabilities</li>
+ <li>Long-term Liabilities</li>
+ <li>Shareholders' Equity</li>
+ </ul>
+ </div>
+ </div>
+ </div>
+ </div>
+ </section>
+
+ <section id="income" class="content-section">
+ <h2>Income Statement Analysis</h2>
+ <div class="card">
+ <div class="formula">
+ <p>Net Income = Revenue - Expenses</p>
+ </div>
+ <div class="steps">
+ <div class="step">1. Revenue</div>
+ <div class="step">2. Cost of Goods Sold</div>
+ <div class="step">3. Gross Profit</div>
+ <div class="step">4. Operating Expenses</div>
+ <div class="step">5. Net Income</div>
+ </div>
+ </div>
+ </section>
+
+ <section id="ratios" class="content-section">
+ <h2>Key Financial Ratios</h2>
+ <div class="ratio-grid">
+ <div class="ratio-card">
+ <h3>Liquidity Ratios</h3>
+ <p>Current Ratio = Current Assets ÷ Current Liabilities</p>
+ </div>
+ <div class="ratio-card">
+ <h3>Profitability Ratios</h3>
+ <p>Profit Margin = Net Income ÷ Revenue</p>
+ </div>
+ <div class="ratio-card">
+ <h3>Efficiency Ratios</h3>
+ <p>Asset Turnover = Revenue ÷ Average Total Assets</p>
+ </div>
+ </div>
+ </section>
+</main>
+
+<footer>
+ <div class="footer-content">
+ <div class="footer-nav">
+ <a href="#intro">Home</a>
+ <a href="#balance-sheet">Balance Sheet</a>
+ <a href="#income">Income Statement</a>
+ <a href="#ratios">Ratios</a>
+ </div>
+ <p>Created with passion by FinStatGuide</p>
+ </div>
+</footer>
diff --git a/index.scroll b/index.scroll
new file mode 100644
index 0000000..912a651
--- /dev/null
+++ b/index.scroll
@@ -0,0 +1,11 @@
+buildHtml
+baseUrl https://finstatguide.scroll.pub
+metaTags
+ title "Financial Statement Analysis Guide | Learn the Basics"
+ description "Learn how to analyze financial statements with our comprehensive guide. Master the basics of balance sheets, income statements, and cash flow analysis."
+ keywords "financial statement analysis, financial ratios, balance sheet, income statement, cash flow statement"
+editButton /edit.html
+title Financial Statement Analysis Guide
+style.css
+body.html
+script.js
diff --git a/prompt.json b/prompt.json
new file mode 100644
index 0000000..724c72e
--- /dev/null
+++ b/prompt.json
@@ -0,0 +1,20 @@
+{
+ "id": "msg_01LtfvS9FFnFEwbau1EvHLtS",
+ "type": "message",
+ "role": "assistant",
+ "model": "claude-3-5-sonnet-20241022",
+ "content": [
+ {
+ "type": "text",
+ "text": "Let me create this financial education website.\n\n---domain---\nfinstatguide.scroll.pub\n\n---index.scroll---\nbuildHtml\nbaseUrl https://finstatguide.scroll.pub\nmetaTags\n title \"Financial Statement Analysis Guide | Learn the Basics\"\n description \"Learn how to analyze financial statements with our comprehensive guide. Master the basics of balance sheets, income statements, and cash flow analysis.\"\n keywords \"financial statement analysis, financial ratios, balance sheet, income statement, cash flow statement\"\neditButton /edit.html\ntitle Financial Statement Analysis Guide\nstyle.css\nbody.html\nscript.js\n\n---body.html---\n<header>\n <nav class=\"main-nav\">\n <div class=\"logo\">FinStatGuide</div>\n <button class=\"menu-toggle\" aria-label=\"Toggle menu\">\n <span></span><span></span><span></span>\n </button>\n <ul class=\"nav-links\">\n <li><a href=\"#intro\">Introduction</a></li>\n <li><a href=\"#balance-sheet\">Balance Sheet</a></li>\n <li><a href=\"#income\">Income Statement</a></li>\n <li><a href=\"#cashflow\">Cash Flow</a></li>\n <li><a href=\"#ratios\">Key Ratios</a></li>\n </ul>\n </nav>\n</header>\n\n<main>\n <section class=\"hero\">\n <h1>Master Financial Statement Analysis</h1>\n <p>Learn to read and analyze financial statements like a professional</p>\n </section>\n\n <section id=\"intro\" class=\"content-section\">\n <h2>Introduction to Financial Statements</h2>\n <div class=\"card\">\n <p>Financial statements tell the story of a company's financial health. The three main statements are:</p>\n <ul>\n <li>Balance Sheet</li>\n <li>Income Statement</li>\n <li>Cash Flow Statement</li>\n </ul>\n </div>\n </section>\n\n <section id=\"balance-sheet\" class=\"content-section\">\n <h2>Balance Sheet Analysis</h2>\n <div class=\"card\">\n <h3>Assets = Liabilities + Equity</h3>\n <div class=\"interactive-element\">\n <div class=\"balance-sheet-demo\">\n <div class=\"assets\">\n <h4>Assets</h4>\n <ul>\n <li>Current Assets</li>\n <li>Fixed Assets</li>\n <li>Other Assets</li>\n </ul>\n </div>\n <div class=\"liabilities-equity\">\n <h4>Liabilities & Equity</h4>\n <ul>\n <li>Current Liabilities</li>\n <li>Long-term Liabilities</li>\n <li>Shareholders' Equity</li>\n </ul>\n </div>\n </div>\n </div>\n </div>\n </section>\n\n <section id=\"income\" class=\"content-section\">\n <h2>Income Statement Analysis</h2>\n <div class=\"card\">\n <div class=\"formula\">\n <p>Net Income = Revenue - Expenses</p>\n </div>\n <div class=\"steps\">\n <div class=\"step\">1. Revenue</div>\n <div class=\"step\">2. Cost of Goods Sold</div>\n <div class=\"step\">3. Gross Profit</div>\n <div class=\"step\">4. Operating Expenses</div>\n <div class=\"step\">5. Net Income</div>\n </div>\n </div>\n </section>\n\n <section id=\"ratios\" class=\"content-section\">\n <h2>Key Financial Ratios</h2>\n <div class=\"ratio-grid\">\n <div class=\"ratio-card\">\n <h3>Liquidity Ratios</h3>\n <p>Current Ratio = Current Assets ÷ Current Liabilities</p>\n </div>\n <div class=\"ratio-card\">\n <h3>Profitability Ratios</h3>\n <p>Profit Margin = Net Income ÷ Revenue</p>\n </div>\n <div class=\"ratio-card\">\n <h3>Efficiency Ratios</h3>\n <p>Asset Turnover = Revenue ÷ Average Total Assets</p>\n </div>\n </div>\n </section>\n</main>\n\n<footer>\n <div class=\"footer-content\">\n <div class=\"footer-nav\">\n <a href=\"#intro\">Home</a>\n <a href=\"#balance-sheet\">Balance Sheet</a>\n <a href=\"#income\">Income Statement</a>\n <a href=\"#ratios\">Ratios</a>\n </div>\n <p>Created with passion by FinStatGuide</p>\n </div>\n</footer>\n\n---style.css---\n:root {\n --primary-color: #2c3e50;\n --secondary-color: #3498db;\n --accent-color: #e74c3c;\n --background-color: #f9fafb;\n --text-color: #2c3e50;\n --card-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);\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 background-color: var(--background-color);\n}\n\n/* Header & Navigation */\n.main-nav {\n background-color: var(--primary-color);\n padding: 1rem;\n position: fixed;\n width: 100%;\n top: 0;\n z-index: 1000;\n display: flex;\n justify-content: space-between;\n align-items: center;\n}\n\n.logo {\n color: white;\n font-size: 1.5rem;\n font-weight: bold;\n}\n\n.nav-links {\n display: flex;\n list-style: none;\n gap: 2rem;\n}\n\n.nav-links a {\n color: white;\n text-decoration: none;\n transition: color 0.3s ease;\n}\n\n.nav-links a:hover {\n color: var(--secondary-color);\n}\n\n.menu-toggle {\n display: none;\n}\n\n/* Hero Section */\n.hero {\n height: 100vh;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n text-align: center;\n background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));\n color: white;\n padding: 2rem;\n}\n\n.hero h1 {\n font-size: 3.5rem;\n margin-bottom: 1rem;\n animation: fadeIn 1s ease-out;\n}\n\n.hero p {\n font-size: 1.5rem;\n opacity: 0.9;\n}\n\n/* Content Sections */\n.content-section {\n padding: 5rem 2rem;\n max-width: 1200px;\n margin: 0 auto;\n}\n\n.card {\n background: white;\n padding: 2rem;\n border-radius: 8px;\n box-shadow: var(--card-shadow);\n transition: transform 0.3s ease;\n}\n\n.card:hover {\n transform: translateY(-5px);\n}\n\n/* Balance Sheet Demo */\n.balance-sheet-demo {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 2rem;\n margin-top: 2rem;\n}\n\n/* Ratio Grid */\n.ratio-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\n gap: 2rem;\n margin-top: 2rem;\n}\n\n.ratio-card {\n background: white;\n padding: 1.5rem;\n border-radius: 8px;\n box-shadow: var(--card-shadow);\n}\n\n/* Footer */\nfooter {\n background-color: var(--primary-color);\n color: white;\n padding: 2rem;\n margin-top: 4rem;\n}\n\n.footer-content {\n max-width: 1200px;\n margin: 0 auto;\n text-align: center;\n}\n\n.footer-nav {\n margin-bottom: 1rem;\n}\n\n.footer-nav a {\n color: white;\n text-decoration: none;\n margin: 0 1rem;\n}\n\n/* Animations */\n@keyframes fadeIn {\n from { opacity: 0; transform: translateY(20px); }\n to { opacity: 1; transform: translateY(0); }\n}\n\n/* Mobile Responsiveness */\n@media (max-width: 768px) {\n .menu-toggle {\n display: block;\n background: none;\n border: none;\n cursor: pointer;\n }\n\n .menu-toggle span {\n display: block;\n width: 25px;\n height: 3px;\n background-color: white;\n margin: 5px 0;\n transition: 0.3s;\n }\n\n .nav-links {\n display: none;\n position: absolute;\n top: 100%;\n left: 0;\n width: 100%;\n background-color: var(--primary-color);\n flex-direction: column;\n padding: 1rem;\n }\n\n .nav-links.active {\n display: flex;\n }\n\n .hero h1 {\n font-size: 2.5rem;\n }\n\n .balance-sheet-demo {\n grid-template-columns: 1fr;\n }\n}\n\n---script.js---\ndocument.addEventListener('DOMContentLoaded', function() {\n // Mobile menu toggle\n const menuToggle = document.querySelector('.menu-toggle');\n const navLinks = document.querySelector('.nav-links');\n\n menuToggle.addEventListener('click', () => {\n navLinks.classList.toggle('active');\n menuToggle.classList.toggle('active');\n });\n\n // Smooth scrolling 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 const headerOffset = 80;\n const elementPosition = target.offsetTop;\n const offsetPosition = elementPosition - headerOffset;\n\n window.scrollTo({\n top: offsetPosition,\n behavior: 'smooth'\n });\n\n // Close mobile menu if open\n if (navLinks.classList.contains('active')) {\n navLinks.classList.remove('active');\n menuToggle.classList.remove('active');\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 }, {\n threshold: 0.1\n });\n\n // Observe all content sections\n document.querySelectorAll('.content-section').forEach(section => {\n section.style.opacity = 0;\n section.style.transform = 'translateY(20px)';\n section.style.transition = 'opacity 0.6s ease-out, transform 0.6s ease-out';\n observer.observe(section);\n });\n});\n\n---end---\n\nThis website features:\n1. Clean, modern design with smooth animations\n2. Fully responsive layout\n3. Interactive navigation with smooth scrolling\n4. Beautiful gradient hero section\n5. Card-based content layout with hover effects\n6. Intersection Observer for scroll animations\n7. Mobile-friendly navigation menu\n8. Semantic HTML structure\n9. Accessible design elements\n10. Performance-optimized CSS animations\n11. Clear visual hierarchy\n12. Professional color scheme\n13. Clean typography\n14. Interactive elements\n15. Proper spacing and whitespace management\n\nThe domain name \"finstatguide\" is:\n- Short and memorable\n- Descriptive of the content\n- Easy to spell\n- Combines \"financial statements\" and \"guide\"\n- Professional sounding"
+ }
+ ],
+ "stop_reason": "end_turn",
+ "stop_sequence": null,
+ "usage": {
+ "input_tokens": 280,
+ "cache_creation_input_tokens": 0,
+ "cache_read_input_tokens": 0,
+ "output_tokens": 3167
+ }
+}
\ No newline at end of file
diff --git a/readme.scroll b/readme.scroll
new file mode 100644
index 0000000..983352f
--- /dev/null
+++ b/readme.scroll
@@ -0,0 +1,2 @@
+# finstatguide.scroll.pub
+Website generated by Claude from prompt: create a tutorial on how to analyze financial statements basics
\ No newline at end of file
diff --git a/script.js b/script.js
new file mode 100644
index 0000000..44942f4
--- /dev/null
+++ b/script.js
@@ -0,0 +1,52 @@
+document.addEventListener('DOMContentLoaded', function() {
+ // Mobile menu toggle
+ const menuToggle = document.querySelector('.menu-toggle');
+ const navLinks = document.querySelector('.nav-links');
+
+ menuToggle.addEventListener('click', () => {
+ navLinks.classList.toggle('active');
+ menuToggle.classList.toggle('active');
+ });
+
+ // Smooth scrolling for navigation links
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
+ anchor.addEventListener('click', function(e) {
+ e.preventDefault();
+ const target = document.querySelector(this.getAttribute('href'));
+ const headerOffset = 80;
+ const elementPosition = target.offsetTop;
+ const offsetPosition = elementPosition - headerOffset;
+
+ window.scrollTo({
+ top: offsetPosition,
+ behavior: 'smooth'
+ });
+
+ // Close mobile menu if open
+ if (navLinks.classList.contains('active')) {
+ navLinks.classList.remove('active');
+ menuToggle.classList.remove('active');
+ }
+ });
+ });
+
+ // 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
+ });
+
+ // Observe all content sections
+ document.querySelectorAll('.content-section').forEach(section => {
+ section.style.opacity = 0;
+ section.style.transform = 'translateY(20px)';
+ section.style.transition = 'opacity 0.6s ease-out, transform 0.6s ease-out';
+ observer.observe(section);
+ });
+});
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..8b6ba49
--- /dev/null
+++ b/style.css
@@ -0,0 +1,198 @@
+:root {
+ --primary-color: #2c3e50;
+ --secondary-color: #3498db;
+ --accent-color: #e74c3c;
+ --background-color: #f9fafb;
+ --text-color: #2c3e50;
+ --card-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+}
+
+* {
+ 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);
+ background-color: var(--background-color);
+}
+
+/* Header & Navigation */
+.main-nav {
+ background-color: var(--primary-color);
+ padding: 1rem;
+ position: fixed;
+ width: 100%;
+ top: 0;
+ z-index: 1000;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+}
+
+.logo {
+ color: white;
+ font-size: 1.5rem;
+ font-weight: bold;
+}
+
+.nav-links {
+ display: flex;
+ list-style: none;
+ gap: 2rem;
+}
+
+.nav-links a {
+ color: white;
+ text-decoration: none;
+ transition: color 0.3s ease;
+}
+
+.nav-links a:hover {
+ color: var(--secondary-color);
+}
+
+.menu-toggle {
+ display: none;
+}
+
+/* Hero Section */
+.hero {
+ height: 100vh;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ text-align: center;
+ background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
+ color: white;
+ padding: 2rem;
+}
+
+.hero h1 {
+ font-size: 3.5rem;
+ margin-bottom: 1rem;
+ animation: fadeIn 1s ease-out;
+}
+
+.hero p {
+ font-size: 1.5rem;
+ opacity: 0.9;
+}
+
+/* Content Sections */
+.content-section {
+ padding: 5rem 2rem;
+ max-width: 1200px;
+ margin: 0 auto;
+}
+
+.card {
+ background: white;
+ padding: 2rem;
+ border-radius: 8px;
+ box-shadow: var(--card-shadow);
+ transition: transform 0.3s ease;
+}
+
+.card:hover {
+ transform: translateY(-5px);
+}
+
+/* Balance Sheet Demo */
+.balance-sheet-demo {
+ display: grid;
+ grid-template-columns: 1fr 1fr;
+ gap: 2rem;
+ margin-top: 2rem;
+}
+
+/* Ratio Grid */
+.ratio-grid {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+ gap: 2rem;
+ margin-top: 2rem;
+}
+
+.ratio-card {
+ background: white;
+ padding: 1.5rem;
+ border-radius: 8px;
+ box-shadow: var(--card-shadow);
+}
+
+/* Footer */
+footer {
+ background-color: var(--primary-color);
+ color: white;
+ padding: 2rem;
+ margin-top: 4rem;
+}
+
+.footer-content {
+ max-width: 1200px;
+ margin: 0 auto;
+ text-align: center;
+}
+
+.footer-nav {
+ margin-bottom: 1rem;
+}
+
+.footer-nav a {
+ color: white;
+ text-decoration: none;
+ margin: 0 1rem;
+}
+
+/* Animations */
+@keyframes fadeIn {
+ from { opacity: 0; transform: translateY(20px); }
+ to { opacity: 1; transform: translateY(0); }
+}
+
+/* Mobile Responsiveness */
+@media (max-width: 768px) {
+ .menu-toggle {
+ display: block;
+ background: none;
+ border: none;
+ cursor: pointer;
+ }
+
+ .menu-toggle span {
+ display: block;
+ width: 25px;
+ height: 3px;
+ background-color: white;
+ margin: 5px 0;
+ transition: 0.3s;
+ }
+
+ .nav-links {
+ display: none;
+ position: absolute;
+ top: 100%;
+ left: 0;
+ width: 100%;
+ background-color: var(--primary-color);
+ flex-direction: column;
+ padding: 1rem;
+ }
+
+ .nav-links.active {
+ display: flex;
+ }
+
+ .hero h1 {
+ font-size: 2.5rem;
+ }
+
+ .balance-sheet-demo {
+ grid-template-columns: 1fr;
+ }
+}