commit 5ac9aeca5fa0d11172e5830bd49ad5603047b71f
Author: root <root@hub.scroll.pub>
Date: 2024-12-28 04:23:56 +0000
Subject: Initial commit
diff --git a/body.html b/body.html
new file mode 100644
index 0000000..aed012a
--- /dev/null
+++ b/body.html
@@ -0,0 +1,75 @@
+<header>
+ <nav class="navbar">
+ <div class="logo">MetaTrax</div>
+ <div class="nav-links">
+ <a href="#features">Features</a>
+ <a href="#dashboard">Dashboard</a>
+ <a href="#about">About</a>
+ </div>
+ </nav>
+</header>
+
+<main>
+ <section class="hero" id="hero">
+ <h1>Track Your Metaverse Journey</h1>
+ <p>Real-time movement tracking across virtual worlds</p>
+ <div class="cta-button">Start Tracking</div>
+ </section>
+
+ <section class="features" id="features">
+ <h2>Features</h2>
+ <div class="feature-grid">
+ <div class="feature-card">
+ <div class="feature-icon">📍</div>
+ <h3>Real-time Tracking</h3>
+ <p>Monitor your position across multiple metaverse platforms</p>
+ </div>
+ <div class="feature-card">
+ <div class="feature-icon">📊</div>
+ <h3>Analytics</h3>
+ <p>Detailed movement patterns and interaction data</p>
+ </div>
+ <div class="feature-card">
+ <div class="feature-icon">🔗</div>
+ <h3>Cross-platform</h3>
+ <p>Seamless integration with major metaverse worlds</p>
+ </div>
+ </div>
+ </section>
+
+ <section class="dashboard" id="dashboard">
+ <h2>Live Dashboard</h2>
+ <div class="dashboard-container">
+ <div class="tracking-map" id="trackingMap"></div>
+ <div class="stats-panel">
+ <div class="stat">
+ <h4>Current World</h4>
+ <p id="currentWorld">--</p>
+ </div>
+ <div class="stat">
+ <h4>Time Spent</h4>
+ <p id="timeSpent">00:00:00</p>
+ </div>
+ <div class="stat">
+ <h4>Distance</h4>
+ <p id="distance">0.0 km</p>
+ </div>
+ </div>
+ </div>
+ </section>
+</main>
+
+<footer>
+ <div class="footer-content">
+ <div class="footer-section">
+ <h4>MetaTrax</h4>
+ <p>Your journey through the metaverse, tracked and analyzed</p>
+ </div>
+ <div class="footer-section">
+ <h4>Links</h4>
+ <a href="#privacy">Privacy Policy</a>
+ <a href="#terms">Terms of Service</a>
+ <a href="#contact">Contact</a>
+ </div>
+ </div>
+</footer>
diff --git a/index.scroll b/index.scroll
new file mode 100644
index 0000000..9c8fed8
--- /dev/null
+++ b/index.scroll
@@ -0,0 +1,8 @@
+buildHtml
+baseUrl https://metatrax.scroll.pub
+metaTags
+editButton /edit.html
+title MetaTrax - Your Metaverse Movement Tracker
+style.css
+body.html
+script.js
diff --git a/prompt.json b/prompt.json
new file mode 100644
index 0000000..d1d1a99
--- /dev/null
+++ b/prompt.json
@@ -0,0 +1,20 @@
+{
+ "id": "msg_011DHwLwmTXV8Y1QjhKhwy2H",
+ "type": "message",
+ "role": "assistant",
+ "model": "claude-3-5-sonnet-20241022",
+ "content": [
+ {
+ "type": "text",
+ "text": "I'll create a futuristic metaverse tracking website. For the domain, I suggest:\n\n---domain---\nmetatrax.scroll.pub\n\n---index.scroll---\nbuildHtml\nbaseUrl https://metatrax.scroll.pub\nmetaTags\neditButton /edit.html\ntitle MetaTrax - Your Metaverse Movement Tracker\nstyle.css\nbody.html\nscript.js\n\n---body.html---\n<header>\n <nav class=\"navbar\">\n <div class=\"logo\">MetaTrax</div>\n <div class=\"nav-links\">\n <a href=\"#features\">Features</a>\n <a href=\"#dashboard\">Dashboard</a>\n <a href=\"#about\">About</a>\n </div>\n </nav>\n</header>\n\n<main>\n <section class=\"hero\" id=\"hero\">\n <h1>Track Your Metaverse Journey</h1>\n <p>Real-time movement tracking across virtual worlds</p>\n <div class=\"cta-button\">Start Tracking</div>\n </section>\n\n <section class=\"features\" id=\"features\">\n <h2>Features</h2>\n <div class=\"feature-grid\">\n <div class=\"feature-card\">\n <div class=\"feature-icon\">📍</div>\n <h3>Real-time Tracking</h3>\n <p>Monitor your position across multiple metaverse platforms</p>\n </div>\n <div class=\"feature-card\">\n <div class=\"feature-icon\">📊</div>\n <h3>Analytics</h3>\n <p>Detailed movement patterns and interaction data</p>\n </div>\n <div class=\"feature-card\">\n <div class=\"feature-icon\">🔗</div>\n <h3>Cross-platform</h3>\n <p>Seamless integration with major metaverse worlds</p>\n </div>\n </div>\n </section>\n\n <section class=\"dashboard\" id=\"dashboard\">\n <h2>Live Dashboard</h2>\n <div class=\"dashboard-container\">\n <div class=\"tracking-map\" id=\"trackingMap\"></div>\n <div class=\"stats-panel\">\n <div class=\"stat\">\n <h4>Current World</h4>\n <p id=\"currentWorld\">--</p>\n </div>\n <div class=\"stat\">\n <h4>Time Spent</h4>\n <p id=\"timeSpent\">00:00:00</p>\n </div>\n <div class=\"stat\">\n <h4>Distance</h4>\n <p id=\"distance\">0.0 km</p>\n </div>\n </div>\n </div>\n </section>\n</main>\n\n<footer>\n <div class=\"footer-content\">\n <div class=\"footer-section\">\n <h4>MetaTrax</h4>\n <p>Your journey through the metaverse, tracked and analyzed</p>\n </div>\n <div class=\"footer-section\">\n <h4>Links</h4>\n <a href=\"#privacy\">Privacy Policy</a>\n <a href=\"#terms\">Terms of Service</a>\n <a href=\"#contact\">Contact</a>\n </div>\n </div>\n</footer>\n\n---style.css---\n:root {\n --primary-color: #6c63ff;\n --secondary-color: #2c2c54;\n --accent-color: #ff6b6b;\n --bg-color: #1a1a2e;\n --text-color: #f7f7f7;\n}\n\n* {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n}\n\nbody {\n font-family: 'Inter', sans-serif;\n background: var(--bg-color);\n color: var(--text-color);\n line-height: 1.6;\n}\n\n.navbar {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 1.5rem 5%;\n position: fixed;\n width: 100%;\n top: 0;\n background: rgba(26, 26, 46, 0.95);\n backdrop-filter: blur(10px);\n z-index: 1000;\n}\n\n.logo {\n font-size: 1.8rem;\n font-weight: 700;\n background: linear-gradient(45deg, var(--primary-color), var(--accent-color));\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n}\n\n.nav-links a {\n color: var(--text-color);\n text-decoration: none;\n margin-left: 2rem;\n transition: color 0.3s ease;\n}\n\n.nav-links a:hover {\n color: var(--primary-color);\n}\n\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(rgba(26, 26, 46, 0.8), rgba(26, 26, 46, 0.9)),\n url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxyZWN0IHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9IiMxYTFhMmUiLz48Y2lyY2xlIGN4PSI1MCUiIGN5PSI1MCUiIHI9IjQwJSIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjNmM2M2ZmIiBzdHJva2Utd2lkdGg9IjIiLz48L3N2Zz4=');\n}\n\n.hero h1 {\n font-size: 4rem;\n margin-bottom: 1rem;\n background: linear-gradient(45deg, var(--primary-color), var(--accent-color));\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n}\n\n.cta-button {\n margin-top: 2rem;\n padding: 1rem 3rem;\n background: var(--primary-color);\n border-radius: 30px;\n cursor: pointer;\n transition: transform 0.3s ease, box-shadow 0.3s ease;\n}\n\n.cta-button:hover {\n transform: translateY(-3px);\n box-shadow: 0 10px 20px rgba(108, 99, 255, 0.2);\n}\n\n.feature-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\n gap: 2rem;\n padding: 5rem;\n}\n\n.feature-card {\n background: rgba(255, 255, 255, 0.05);\n padding: 2rem;\n border-radius: 15px;\n backdrop-filter: blur(10px);\n transition: transform 0.3s ease;\n}\n\n.feature-card:hover {\n transform: translateY(-10px);\n}\n\n.feature-icon {\n font-size: 2.5rem;\n margin-bottom: 1rem;\n}\n\n.dashboard-container {\n background: rgba(255, 255, 255, 0.05);\n border-radius: 15px;\n padding: 2rem;\n margin: 2rem 5%;\n}\n\n.tracking-map {\n height: 400px;\n background: rgba(44, 44, 84, 0.5);\n border-radius: 10px;\n margin-bottom: 2rem;\n}\n\n.stats-panel {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n gap: 1rem;\n}\n\n.stat {\n background: rgba(255, 255, 255, 0.05);\n padding: 1rem;\n border-radius: 10px;\n text-align: center;\n}\n\nfooter {\n background: var(--secondary-color);\n padding: 3rem 5%;\n margin-top: 4rem;\n}\n\n.footer-content {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\n gap: 2rem;\n}\n\n@media (max-width: 768px) {\n .navbar {\n flex-direction: column;\n padding: 1rem;\n }\n \n .nav-links {\n margin-top: 1rem;\n }\n \n .nav-links a {\n margin: 0 1rem;\n font-size: 0.9rem;\n }\n \n .hero h1 {\n font-size: 2.5rem;\n }\n \n .feature-grid {\n padding: 2rem;\n }\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 document.querySelector(this.getAttribute('href')).scrollIntoView({\n behavior: 'smooth'\n });\n });\n });\n\n // Simulated tracking data\n const worlds = ['Decentraland', 'The Sandbox', 'Cryptovoxels', 'Somnium Space'];\n let currentWorldIndex = 0;\n let seconds = 0;\n let distance = 0;\n\n // Update dashboard stats\n setInterval(() => {\n seconds++;\n distance += Math.random() * 0.1;\n \n document.getElementById('currentWorld').textContent = worlds[currentWorldIndex];\n document.getElementById('timeSpent').textContent = new Date(seconds * 1000).toISOString().substr(11, 8);\n document.getElementById('distance').textContent = distance.toFixed(1) + ' km';\n \n if (Math.random() < 0.1) {\n currentWorldIndex = (currentWorldIndex + 1) % worlds.length;\n }\n }, 1000);\n\n // Animation for tracking map\n const trackingMap = document.getElementById('trackingMap');\n let hue = 0;\n\n function animateMap() {\n hue = (hue + 1) % 360;\n trackingMap.style.boxShadow = `0 0 50px hsla(${hue}, 70%, 50%, 0.2)`;\n requestAnimationFrame(animateMap);\n }\n\n animateMap();\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\n document.querySelectorAll('.feature-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 sleek, modern website with smooth animations, reactive elements, and a simulated live tracking dashboard. The design uses a dark theme with vibrant accent colors and includes features like:\n\n1. Floating navigation bar with blur effect\n2. Animated hero section with gradient text\n3. Feature cards with hover effects\n4. Live tracking dashboard with simulated data\n5. Responsive design that works on all devices\n6. Smooth scroll behavior\n7. Intersection Observer for scroll animations\n8. Dynamic color animations\n9. Glass-morphism effects\n\nThe site follows accessibility guidelines with semantic HTML and appropriate contrast ratios, while maintaining a futuristic aesthetic suitable for a metaverse tracking application."
+ }
+ ],
+ "stop_reason": "end_turn",
+ "stop_sequence": null,
+ "usage": {
+ "input_tokens": 285,
+ "cache_creation_input_tokens": 0,
+ "cache_read_input_tokens": 0,
+ "output_tokens": 3157
+ }
+}
\ No newline at end of file
diff --git a/readme.scroll b/readme.scroll
new file mode 100644
index 0000000..7edfc0e
--- /dev/null
+++ b/readme.scroll
@@ -0,0 +1,2 @@
+# metatrax.scroll.pub
+Website generated by Claude from prompt: Th ultimate app that tracks you as you move through the metaverse
\ No newline at end of file
diff --git a/script.js b/script.js
new file mode 100644
index 0000000..de2bfae
--- /dev/null
+++ b/script.js
@@ -0,0 +1,60 @@
+document.addEventListener('DOMContentLoaded', () => {
+ // Smooth scroll for navigation links
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
+ anchor.addEventListener('click', function (e) {
+ e.preventDefault();
+ document.querySelector(this.getAttribute('href')).scrollIntoView({
+ behavior: 'smooth'
+ });
+ });
+ });
+
+ // Simulated tracking data
+ const worlds = ['Decentraland', 'The Sandbox', 'Cryptovoxels', 'Somnium Space'];
+ let currentWorldIndex = 0;
+ let seconds = 0;
+ let distance = 0;
+
+ // Update dashboard stats
+ setInterval(() => {
+ seconds++;
+ distance += Math.random() * 0.1;
+
+ document.getElementById('currentWorld').textContent = worlds[currentWorldIndex];
+ document.getElementById('timeSpent').textContent = new Date(seconds * 1000).toISOString().substr(11, 8);
+ document.getElementById('distance').textContent = distance.toFixed(1) + ' km';
+
+ if (Math.random() < 0.1) {
+ currentWorldIndex = (currentWorldIndex + 1) % worlds.length;
+ }
+ }, 1000);
+
+ // Animation for tracking map
+ const trackingMap = document.getElementById('trackingMap');
+ let hue = 0;
+
+ function animateMap() {
+ hue = (hue + 1) % 360;
+ trackingMap.style.boxShadow = `0 0 50px hsla(${hue}, 70%, 50%, 0.2)`;
+ requestAnimationFrame(animateMap);
+ }
+
+ animateMap();
+
+ // 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)';
+ }
+ });
+ });
+
+ document.querySelectorAll('.feature-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..c0f5751
--- /dev/null
+++ b/style.css
@@ -0,0 +1,172 @@
+:root {
+ --primary-color: #6c63ff;
+ --secondary-color: #2c2c54;
+ --accent-color: #ff6b6b;
+ --bg-color: #1a1a2e;
+ --text-color: #f7f7f7;
+}
+
+* {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+body {
+ font-family: 'Inter', sans-serif;
+ background: var(--bg-color);
+ color: var(--text-color);
+ line-height: 1.6;
+}
+
+.navbar {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ padding: 1.5rem 5%;
+ position: fixed;
+ width: 100%;
+ top: 0;
+ background: rgba(26, 26, 46, 0.95);
+ backdrop-filter: blur(10px);
+ z-index: 1000;
+}
+
+.logo {
+ font-size: 1.8rem;
+ font-weight: 700;
+ background: linear-gradient(45deg, var(--primary-color), var(--accent-color));
+ -webkit-background-clip: text;
+ -webkit-text-fill-color: transparent;
+}
+
+.nav-links a {
+ color: var(--text-color);
+ text-decoration: none;
+ margin-left: 2rem;
+ transition: color 0.3s ease;
+}
+
+.nav-links a:hover {
+ color: var(--primary-color);
+}
+
+.hero {
+ height: 100vh;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ text-align: center;
+ background: linear-gradient(rgba(26, 26, 46, 0.8), rgba(26, 26, 46, 0.9)),
+ url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxyZWN0IHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9IiMxYTFhMmUiLz48Y2lyY2xlIGN4PSI1MCUiIGN5PSI1MCUiIHI9IjQwJSIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjNmM2M2ZmIiBzdHJva2Utd2lkdGg9IjIiLz48L3N2Zz4=');
+}
+
+.hero h1 {
+ font-size: 4rem;
+ margin-bottom: 1rem;
+ background: linear-gradient(45deg, var(--primary-color), var(--accent-color));
+ -webkit-background-clip: text;
+ -webkit-text-fill-color: transparent;
+}
+
+.cta-button {
+ margin-top: 2rem;
+ padding: 1rem 3rem;
+ background: var(--primary-color);
+ border-radius: 30px;
+ cursor: pointer;
+ transition: transform 0.3s ease, box-shadow 0.3s ease;
+}
+
+.cta-button:hover {
+ transform: translateY(-3px);
+ box-shadow: 0 10px 20px rgba(108, 99, 255, 0.2);
+}
+
+.feature-grid {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+ gap: 2rem;
+ padding: 5rem;
+}
+
+.feature-card {
+ background: rgba(255, 255, 255, 0.05);
+ padding: 2rem;
+ border-radius: 15px;
+ backdrop-filter: blur(10px);
+ transition: transform 0.3s ease;
+}
+
+.feature-card:hover {
+ transform: translateY(-10px);
+}
+
+.feature-icon {
+ font-size: 2.5rem;
+ margin-bottom: 1rem;
+}
+
+.dashboard-container {
+ background: rgba(255, 255, 255, 0.05);
+ border-radius: 15px;
+ padding: 2rem;
+ margin: 2rem 5%;
+}
+
+.tracking-map {
+ height: 400px;
+ background: rgba(44, 44, 84, 0.5);
+ border-radius: 10px;
+ margin-bottom: 2rem;
+}
+
+.stats-panel {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+ gap: 1rem;
+}
+
+.stat {
+ background: rgba(255, 255, 255, 0.05);
+ padding: 1rem;
+ border-radius: 10px;
+ text-align: center;
+}
+
+footer {
+ background: var(--secondary-color);
+ padding: 3rem 5%;
+ margin-top: 4rem;
+}
+
+.footer-content {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+ gap: 2rem;
+}
+
+@media (max-width: 768px) {
+ .navbar {
+ flex-direction: column;
+ padding: 1rem;
+ }
+
+ .nav-links {
+ margin-top: 1rem;
+ }
+
+ .nav-links a {
+ margin: 0 1rem;
+ font-size: 0.9rem;
+ }
+
+ .hero h1 {
+ font-size: 2.5rem;
+ }
+
+ .feature-grid {
+ padding: 2rem;
+ }
+}