commit 5294a72944569e8c92ba1b7350ce4d33ce25fc9d
Author: root <root@hub.scroll.pub>
Date: 2024-12-27 18:15:11 +0000
Subject: Initial commit
diff --git a/body.html b/body.html
new file mode 100644
index 0000000..4d16d84
--- /dev/null
+++ b/body.html
@@ -0,0 +1,51 @@
+<header>
+ <nav>
+ <div class="logo">TwitRewind</div>
+ </nav>
+</header>
+
+<main>
+ <section class="hero">
+ <h1>Your Twitter Wrapped 2024</h1>
+ <p>Discover your Twitter journey throughout the year</p>
+ <button id="connectBtn" class="cta-button">Connect Twitter Account</button>
+ </section>
+
+ <section id="stats" class="stats-container hidden">
+ <div class="stat-card engagement">
+ <h2>Engagement</h2>
+ <div class="stat-value" id="engagementValue">0</div>
+ <div class="stat-label">Total Interactions</div>
+ </div>
+
+ <div class="stat-card tweets">
+ <h2>Tweets</h2>
+ <div class="stat-value" id="tweetCount">0</div>
+ <div class="stat-label">Posts This Year</div>
+ </div>
+
+ <div class="stat-card top-tweet">
+ <h2>Top Tweet</h2>
+ <div id="topTweetContent" class="tweet-preview">
+ Connect to see your most popular tweet
+ </div>
+ </div>
+
+ <div class="stat-card active-hours">
+ <h2>Peak Hours</h2>
+ <div class="chart-container">
+ <canvas id="activityChart"></canvas>
+ </div>
+ </div>
+ </section>
+
+ <section class="loading hidden">
+ <div class="spinner"></div>
+ <p>Analyzing your Twitter data...</p>
+ </section>
+</main>
+
+<footer>
+ <p>Made with 💙 for Twitter users</p>
+ <p>Not affiliated with Twitter/X</p>
+</footer>
diff --git a/index.scroll b/index.scroll
new file mode 100644
index 0000000..29b6039
--- /dev/null
+++ b/index.scroll
@@ -0,0 +1,8 @@
+buildHtml
+baseUrl https://twitrewind.scroll.pub
+metaTags
+editButton /edit.html
+title Twitter Wrapped 2024 - Your Year on Twitter
+style.css
+body.html
+script.js
diff --git a/prompt.json b/prompt.json
new file mode 100644
index 0000000..8dee461
--- /dev/null
+++ b/prompt.json
@@ -0,0 +1,20 @@
+{
+ "id": "msg_01QwSwbNuqCGEGkgdd7FaTvB",
+ "type": "message",
+ "role": "assistant",
+ "model": "claude-3-5-sonnet-20241022",
+ "content": [
+ {
+ "type": "text",
+ "text": "I'll help create a Twitter Wrapped-style website. For the domain, I suggest:\n\n---domain---\ntwitrewind.scroll.pub\n\n---index.scroll---\nbuildHtml\nbaseUrl https://twitrewind.scroll.pub\nmetaTags\neditButton /edit.html\ntitle Twitter Wrapped 2024 - Your Year on Twitter\nstyle.css\nbody.html\nscript.js\n\n---body.html---\n<header>\n <nav>\n <div class=\"logo\">TwitRewind</div>\n </nav>\n</header>\n\n<main>\n <section class=\"hero\">\n <h1>Your Twitter Wrapped 2024</h1>\n <p>Discover your Twitter journey throughout the year</p>\n <button id=\"connectBtn\" class=\"cta-button\">Connect Twitter Account</button>\n </section>\n\n <section id=\"stats\" class=\"stats-container hidden\">\n <div class=\"stat-card engagement\">\n <h2>Engagement</h2>\n <div class=\"stat-value\" id=\"engagementValue\">0</div>\n <div class=\"stat-label\">Total Interactions</div>\n </div>\n\n <div class=\"stat-card tweets\">\n <h2>Tweets</h2>\n <div class=\"stat-value\" id=\"tweetCount\">0</div>\n <div class=\"stat-label\">Posts This Year</div>\n </div>\n\n <div class=\"stat-card top-tweet\">\n <h2>Top Tweet</h2>\n <div id=\"topTweetContent\" class=\"tweet-preview\">\n Connect to see your most popular tweet\n </div>\n </div>\n\n <div class=\"stat-card active-hours\">\n <h2>Peak Hours</h2>\n <div class=\"chart-container\">\n <canvas id=\"activityChart\"></canvas>\n </div>\n </div>\n </section>\n\n <section class=\"loading hidden\">\n <div class=\"spinner\"></div>\n <p>Analyzing your Twitter data...</p>\n </section>\n</main>\n\n<footer>\n <p>Made with 💙 for Twitter users</p>\n <p>Not affiliated with Twitter/X</p>\n</footer>\n\n---style.css---\n:root {\n --primary-color: #1DA1F2;\n --secondary-color: #14171A;\n --accent-color: #657786;\n --background-color: #15202B;\n --text-color: #FFFFFF;\n}\n\n* {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n}\n\nbody {\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;\n background: var(--background-color);\n color: var(--text-color);\n line-height: 1.6;\n}\n\nheader {\n padding: 1rem 2rem;\n background: rgba(29, 161, 242, 0.1);\n backdrop-filter: blur(10px);\n position: fixed;\n width: 100%;\n z-index: 100;\n}\n\n.logo {\n font-size: 1.5rem;\n font-weight: bold;\n color: var(--primary-color);\n}\n\nmain {\n padding-top: 80px;\n}\n\n.hero {\n min-height: 60vh;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n text-align: center;\n padding: 2rem;\n background: linear-gradient(135deg, var(--primary-color) 0%, #0d8ecf 100%);\n}\n\nh1 {\n font-size: 3.5rem;\n margin-bottom: 1rem;\n background: linear-gradient(to right, #fff, #e6e9ee);\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n}\n\n.cta-button {\n padding: 1rem 2rem;\n font-size: 1.2rem;\n background: white;\n color: var(--primary-color);\n border: none;\n border-radius: 30px;\n cursor: pointer;\n transition: transform 0.3s ease;\n margin-top: 2rem;\n}\n\n.cta-button:hover {\n transform: translateY(-3px);\n box-shadow: 0 5px 15px rgba(0,0,0,0.2);\n}\n\n.stats-container {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\n gap: 2rem;\n padding: 2rem;\n max-width: 1400px;\n margin: 0 auto;\n}\n\n.stat-card {\n background: rgba(255, 255, 255, 0.05);\n border-radius: 20px;\n padding: 2rem;\n backdrop-filter: blur(10px);\n transition: transform 0.3s ease;\n}\n\n.stat-card:hover {\n transform: translateY(-5px);\n}\n\n.stat-value {\n font-size: 3rem;\n font-weight: bold;\n margin: 1rem 0;\n color: var(--primary-color);\n}\n\n.hidden {\n display: none;\n}\n\n.spinner {\n width: 50px;\n height: 50px;\n border: 5px solid var(--accent-color);\n border-top-color: var(--primary-color);\n border-radius: 50%;\n animation: spin 1s linear infinite;\n}\n\n@keyframes spin {\n to { transform: rotate(360deg); }\n}\n\nfooter {\n text-align: center;\n padding: 2rem;\n background: rgba(255, 255, 255, 0.05);\n margin-top: 2rem;\n}\n\n@media (max-width: 768px) {\n h1 {\n font-size: 2.5rem;\n }\n \n .stats-container {\n grid-template-columns: 1fr;\n }\n \n .stat-card {\n margin: 1rem;\n }\n}\n\n---script.js---\ndocument.addEventListener('DOMContentLoaded', () => {\n const connectBtn = document.getElementById('connectBtn');\n const statsSection = document.getElementById('stats');\n const loadingSection = document.querySelector('.loading');\n\n connectBtn.addEventListener('click', async () => {\n // Simulate loading state\n connectBtn.disabled = true;\n loadingSection.classList.remove('hidden');\n \n // Simulate API call delay\n await new Promise(resolve => setTimeout(resolve, 2000));\n \n // Show stats with animation\n loadingSection.classList.add('hidden');\n statsSection.classList.remove('hidden');\n \n // Animate numbers\n animateValue('engagementValue', 0, 12547, 2000);\n animateValue('tweetCount', 0, 483, 2000);\n \n // Sample top tweet data\n document.getElementById('topTweetContent').innerHTML = \n \"Just achieved a major milestone in my career! Thank you everyone for your support! 🚀 #Achievement #Grateful\";\n });\n \n function animateValue(elementId, start, end, duration) {\n const element = document.getElementById(elementId);\n const range = end - start;\n const increment = end > start ? 1 : -1;\n const stepTime = Math.abs(Math.floor(duration / range));\n let current = start;\n \n const timer = setInterval(() => {\n current += increment;\n element.textContent = current.toLocaleString();\n if (current === end) {\n clearInterval(timer);\n }\n }, stepTime);\n }\n \n // Add scroll reveal animation\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\n document.querySelectorAll('.stat-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\n---end---\n\nThis implementation creates a beautiful, modern Twitter Wrapped experience with:\n\n1. Smooth animations and transitions\n2. Responsive design that works on all devices\n3. Clean, semantic HTML5 structure\n4. Modern glassmorphism design elements\n5. Interactive statistics cards\n6. Loading animations\n7. Scroll reveal effects\n8. Gradient text and backgrounds\n9. Hover effects and micro-interactions\n10. Accessibility-friendly structure\n\nThe site simulates the connection to Twitter's API and displays animated statistics. In a real implementation, you'd need to integrate with Twitter's API to fetch actual user data."
+ }
+ ],
+ "stop_reason": "end_turn",
+ "stop_sequence": null,
+ "usage": {
+ "input_tokens": 286,
+ "cache_creation_input_tokens": 0,
+ "cache_read_input_tokens": 0,
+ "output_tokens": 2317
+ }
+}
\ No newline at end of file
diff --git a/readme.scroll b/readme.scroll
new file mode 100644
index 0000000..fe50bc7
--- /dev/null
+++ b/readme.scroll
@@ -0,0 +1,2 @@
+# twitrewind.scroll.pub
+Website generated by Claude from prompt: make a website which can give me my twitter wrapped for the year 2024
\ No newline at end of file
diff --git a/script.js b/script.js
new file mode 100644
index 0000000..911fbce
--- /dev/null
+++ b/script.js
@@ -0,0 +1,59 @@
+document.addEventListener('DOMContentLoaded', () => {
+ const connectBtn = document.getElementById('connectBtn');
+ const statsSection = document.getElementById('stats');
+ const loadingSection = document.querySelector('.loading');
+
+ connectBtn.addEventListener('click', async () => {
+ // Simulate loading state
+ connectBtn.disabled = true;
+ loadingSection.classList.remove('hidden');
+
+ // Simulate API call delay
+ await new Promise(resolve => setTimeout(resolve, 2000));
+
+ // Show stats with animation
+ loadingSection.classList.add('hidden');
+ statsSection.classList.remove('hidden');
+
+ // Animate numbers
+ animateValue('engagementValue', 0, 12547, 2000);
+ animateValue('tweetCount', 0, 483, 2000);
+
+ // Sample top tweet data
+ document.getElementById('topTweetContent').innerHTML =
+ "Just achieved a major milestone in my career! Thank you everyone for your support! 🚀 #Achievement #Grateful";
+ });
+
+ function animateValue(elementId, start, end, duration) {
+ const element = document.getElementById(elementId);
+ const range = end - start;
+ const increment = end > start ? 1 : -1;
+ const stepTime = Math.abs(Math.floor(duration / range));
+ let current = start;
+
+ const timer = setInterval(() => {
+ current += increment;
+ element.textContent = current.toLocaleString();
+ if (current === end) {
+ clearInterval(timer);
+ }
+ }, stepTime);
+ }
+
+ // Add scroll reveal animation
+ const observer = new IntersectionObserver((entries) => {
+ entries.forEach(entry => {
+ if (entry.isIntersecting) {
+ entry.target.style.opacity = '1';
+ entry.target.style.transform = 'translateY(0)';
+ }
+ });
+ });
+
+ document.querySelectorAll('.stat-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);
+ });
+});
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..7de60f6
--- /dev/null
+++ b/style.css
@@ -0,0 +1,141 @@
+:root {
+ --primary-color: #1DA1F2;
+ --secondary-color: #14171A;
+ --accent-color: #657786;
+ --background-color: #15202B;
+ --text-color: #FFFFFF;
+}
+
+* {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+body {
+ font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
+ background: var(--background-color);
+ color: var(--text-color);
+ line-height: 1.6;
+}
+
+header {
+ padding: 1rem 2rem;
+ background: rgba(29, 161, 242, 0.1);
+ backdrop-filter: blur(10px);
+ position: fixed;
+ width: 100%;
+ z-index: 100;
+}
+
+.logo {
+ font-size: 1.5rem;
+ font-weight: bold;
+ color: var(--primary-color);
+}
+
+main {
+ padding-top: 80px;
+}
+
+.hero {
+ min-height: 60vh;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ text-align: center;
+ padding: 2rem;
+ background: linear-gradient(135deg, var(--primary-color) 0%, #0d8ecf 100%);
+}
+
+h1 {
+ font-size: 3.5rem;
+ margin-bottom: 1rem;
+ background: linear-gradient(to right, #fff, #e6e9ee);
+ -webkit-background-clip: text;
+ -webkit-text-fill-color: transparent;
+}
+
+.cta-button {
+ padding: 1rem 2rem;
+ font-size: 1.2rem;
+ background: white;
+ color: var(--primary-color);
+ border: none;
+ border-radius: 30px;
+ cursor: pointer;
+ transition: transform 0.3s ease;
+ margin-top: 2rem;
+}
+
+.cta-button:hover {
+ transform: translateY(-3px);
+ box-shadow: 0 5px 15px rgba(0,0,0,0.2);
+}
+
+.stats-container {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+ gap: 2rem;
+ padding: 2rem;
+ max-width: 1400px;
+ margin: 0 auto;
+}
+
+.stat-card {
+ background: rgba(255, 255, 255, 0.05);
+ border-radius: 20px;
+ padding: 2rem;
+ backdrop-filter: blur(10px);
+ transition: transform 0.3s ease;
+}
+
+.stat-card:hover {
+ transform: translateY(-5px);
+}
+
+.stat-value {
+ font-size: 3rem;
+ font-weight: bold;
+ margin: 1rem 0;
+ color: var(--primary-color);
+}
+
+.hidden {
+ display: none;
+}
+
+.spinner {
+ width: 50px;
+ height: 50px;
+ border: 5px solid var(--accent-color);
+ border-top-color: var(--primary-color);
+ border-radius: 50%;
+ animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+ to { transform: rotate(360deg); }
+}
+
+footer {
+ text-align: center;
+ padding: 2rem;
+ background: rgba(255, 255, 255, 0.05);
+ margin-top: 2rem;
+}
+
+@media (max-width: 768px) {
+ h1 {
+ font-size: 2.5rem;
+ }
+
+ .stats-container {
+ grid-template-columns: 1fr;
+ }
+
+ .stat-card {
+ margin: 1rem;
+ }
+}