Changes to cryptovision.scroll.pub

root

24 days ago

Initial commit

body.html

Changed around line 1
+ 
+   
+     CryptoVision
+     
+       Predictions
+       Wallet
+       Markets
+       
+     
+   
+ 
+ 
+ 
+   
+     Predict. Trade. Prosper.
+     AI-powered cryptocurrency predictions with integrated wallet management
+   
+ 
+   
+     Market Predictions
+     
+       
+         ₿
+         Bitcoin
+         $0
+         
+           
+         
+         Prediction: Loading...
+       
+       
+         Ξ
+         Ethereum
+         $0
+         
+           
+         
+         Prediction: Loading...
+       
+     
+   
+ 
+   
+     Your Wallet
+     
+       
+         Total Balance
+         Connect wallet to view
+       
+       
+         
+         
+         
+       
+       
+         Your Assets
+         
+           
+         
+       
+     
+   
+ 
+ 
+ 
+   
+     
+       CryptoVision
+       Making crypto predictions accessible and accurate
+     
+     
+       Quick Links
+       Predictions
+       Wallet
+       Markets
+     
+   
+ 

index.scroll

Changed around line 1
+ buildHtml
+ baseUrl https://cryptovision.scroll.pub
+ metaTags
+   title "CryptoVision - AI-Powered Crypto Predictions & Wallet"
+   description "Get accurate cryptocurrency price predictions powered by AI and manage your crypto wallet securely on CryptoVision"
+   keywords "crypto predictions, cryptocurrency wallet, bitcoin prediction, ethereum forecast, crypto AI"
+ editButton /edit.html
+ title CryptoVision - Smart Crypto Predictions
+ style.css
+ body.html
+ script.js

prompt.json

Changed around line 1
+ {
+   "id": "msg_01Gc2XDDJJoGWwQC8Zpz573V",
+   "type": "message",
+   "role": "assistant",
+   "model": "claude-3-5-sonnet-20241022",
+   "content": [
+     {
+       "type": "text",
+       "text": "I'll help create a crypto prediction website with wallet functionality.\n\nSuggested domain name: cryptovision.scroll.pub\n\n---domain---\ncryptovision.scroll.pub\n---index.scroll---\nbuildHtml\nbaseUrl https://cryptovision.scroll.pub\nmetaTags\n  title \"CryptoVision - AI-Powered Crypto Predictions & Wallet\"\n  description \"Get accurate cryptocurrency price predictions powered by AI and manage your crypto wallet securely on CryptoVision\"\n  keywords \"crypto predictions, cryptocurrency wallet, bitcoin prediction, ethereum forecast, crypto AI\"\neditButton /edit.html\ntitle CryptoVision - Smart Crypto Predictions\nstyle.css\nbody.html\nscript.js\n---body.html---\n\n  \n    CryptoVision
\n    \n      Predictions\n      Wallet\n      Markets\n      \n    
\n  \n\n\n\n  \n    Predict. Trade. Prosper.\n    AI-powered cryptocurrency predictions with integrated wallet management
\n  \n\n  \n    Market Predictions\n    \n      \n        ₿
\n        Bitcoin\n        $0
\n        \n          
\n        
\n        Prediction: Loading...
\n      
\n      \n        Ξ
\n        Ethereum\n        $0
\n        \n          
\n        
\n        Prediction: Loading...
\n      
\n    
\n  \n\n  \n    Your Wallet\n    \n      \n        Total Balance\n        Connect wallet to view
\n      
\n      \n        \n        \n        \n      
\n      \n        Your Assets\n        \n          \n        
\n      
\n    
\n  \n\n\n\n  \n    \n      CryptoVision\n      Making crypto predictions accessible and accurate
\n    
\n    \n      Quick Links\n      Predictions\n      Wallet\n      Markets\n    
\n  
\n\n---style.css---\n:root {\n  --primary-color: #6c5ce7;\n  --secondary-color: #a8a4e6;\n  --background-dark: #1a1a2e;\n  --text-light: #ffffff;\n  --text-dark: #16161a;\n  --accent-color: #00d2d3;\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(--background-dark);\n  color: var(--text-light);\n  line-height: 1.6;\n}\n\n.main-nav {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: 1rem 2rem;\n  background: rgba(26, 26, 46, 0.95);\n  backdrop-filter: blur(10px);\n  position: fixed;\n  width: 100%;\n  top: 0;\n  z-index: 1000;\n}\n\n.logo {\n  font-size: 1.5rem;\n  font-weight: bold;\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 {\n  display: flex;\n  gap: 2rem;\n  align-items: center;\n}\n\n.nav-links a {\n  color: var(--text-light);\n  text-decoration: none;\n  transition: color 0.3s ease;\n}\n\n.nav-links a:hover {\n  color: var(--accent-color);\n}\n\n.connect-wallet {\n  background: linear-gradient(45deg, var(--primary-color), var(--accent-color));\n  border: none;\n  padding: 0.5rem 1.5rem;\n  border-radius: 25px;\n  color: var(--text-light);\n  cursor: pointer;\n  transition: transform 0.3s ease;\n}\n\n.connect-wallet:hover {\n  transform: translateY(-2px);\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  padding: 2rem;\n  background: linear-gradient(rgba(26, 26, 46, 0.8), rgba(26, 26, 46, 0.9)),\n              url('data:image/svg+xml,');\n  background-size: cover;\n  background-position: center;\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.prediction-cards {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\n  gap: 2rem;\n  padding: 2rem;\n}\n\n.prediction-card {\n  background: rgba(255, 255, 255, 0.05);\n  border-radius: 15px;\n  padding: 2rem;\n  backdrop-filter: blur(10px);\n  transition: transform 0.3s ease;\n}\n\n.prediction-card:hover {\n  transform: translateY(-5px);\n}\n\n.crypto-icon {\n  font-size: 2rem;\n  margin-bottom: 1rem;\n}\n\n.prediction-meter {\n  height: 10px;\n  background: rgba(255, 255, 255, 0.1);\n  border-radius: 5px;\n  margin: 1rem 0;\n  overflow: hidden;\n}\n\n.meter-fill {\n  height: 100%;\n  background: linear-gradient(45deg, var(--primary-color), var(--accent-color));\n  width: 0;\n  transition: width 1s ease;\n}\n\n.wallet-container {\n  background: rgba(255, 255, 255, 0.05);\n  border-radius: 15px;\n  padding: 2rem;\n  margin: 2rem;\n}\n\n.wallet-actions {\n  display: flex;\n  gap: 1rem;\n  margin: 2rem 0;\n}\n\n.action-btn {\n  flex: 1;\n  padding: 1rem;\n  border: none;\n  border-radius: 10px;\n  background: var(--primary-color);\n  color: var(--text-light);\n  cursor: pointer;\n  transition: transform 0.3s ease;\n}\n\n.action-btn:hover {\n  transform: translateY(-2px);\n}\n\n@media (max-width: 768px) {\n  .nav-links {\n    display: none;\n  }\n  \n  .hero h1 {\n    font-size: 2.5rem;\n  }\n  \n  .prediction-cards {\n    grid-template-columns: 1fr;\n  }\n}\n---script.js---\ndocument.addEventListener('DOMContentLoaded', () => {\n    initializePredictions();\n    initializeWallet();\n});\n\nfunction initializePredictions() {\n    const cards = document.querySelectorAll('.prediction-card');\n    \n    cards.forEach(card => {\n        // Simulate real-time price updates\n        setInterval(() => {\n            updatePrice(card);\n            updatePrediction(card);\n        }, 3000);\n    });\n}\n\nfunction updatePrice(card) {\n    const priceElement = card.querySelector('.current-price');\n    const crypto = card.dataset.crypto;\n    \n    // Simulate price data\n    const basePrice = crypto === 'BTC' ? 45000 : 3000;\n    const randomChange = (Math.random() - 0.5) * 100;\n    const newPrice = basePrice + randomChange;\n    \n    priceElement.textContent = newPrice.toFixed(2);\n    animatePriceChange(priceElement, randomChange > 0);\n}\n\nfunction updatePrediction(card) {\n    const predictionElement = card.querySelector('.prediction-value');\n    const meterFill = card.querySelector('.meter-fill');\n    \n    // Simulate prediction algorithm\n    const sentiment = Math.random();\n    const width = sentiment * 100;\n    \n    meterFill.style.width = `${width}%`;\n    predictionElement.textContent = sentiment > 0.5 ? 'Bullish' : 'Bearish';\n    predictionElement.style.color = sentiment > 0.5 ? '#00ff00' : '#ff0000';\n}\n\nfunction animatePriceChange(element, isPositive) {\n    element.style.color = isPositive ? '#00ff00' : '#ff0000';\n    setTimeout(() => {\n        element.style.color = 'white';\n    }, 1000);\n}\n\nfunction initializeWallet() {\n    const connectButton = document.querySelector('.connect-wallet');\n    \n    connectButton.addEventListener('click', async () => {\n        if (typeof window.ethereum !== 'undefined') {\n            try {\n                await window.ethereum.request({ method: 'eth_requestAccounts' });\n                connectButton.textContent = 'Connected';\n                updateWalletUI();\n            } catch (error) {\n                console.error('User rejected connection');\n            }\n        } else {\n            alert('Please install MetaMask to use wallet features');\n        }\n    });\n}\n\nfunction updateWalletUI() {\n    const balanceElement = document.querySelector('.balance-amount');\n    balanceElement.textContent = 'Loading...';\n    \n    // Simulate wallet balance update\n    setTimeout(() => {\n        const randomBalance = (Math.random() * 10).toFixed(4);\n        balanceElement.textContent = `${randomBalance} ETH`;\n    }, 1000);\n}\n\n// Add smooth scrolling for navigation\ndocument.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---end---\n\nThis implementation features:\n\n1. A modern, gradient-rich design with glassmorphism effects\n2. Real-time price simulation for cryptocurrencies\n3. Interactive prediction meters with sentiment indicators\n4. Wallet connection functionality (compatible with MetaMask)\n5. Responsive design that works on all devices\n6. Smooth animations and transitions\n7. Accessibility features and semantic HTML\n8. Clean, modular JavaScript code\n9. Advanced CSS with variables, gradients, and transforms\n10. SEO-optimized meta tags\n\nThe website simulates cryptocurrency price predictions and includes wallet functionality. The design uses a dark theme with accent colors and modern UI elements. All animations are smooth and performant, and the code follows best practices for web development."
+     }
+   ],
+   "stop_reason": "end_turn",
+   "stop_sequence": null,
+   "usage": {
+     "input_tokens": 280,
+     "cache_creation_input_tokens": 0,
+     "cache_read_input_tokens": 0,
+     "output_tokens": 3568
+   }
+ }

readme.scroll

Changed around line 1

+ # cryptovision.scroll.pub

+ Website generated by Claude from prompt: Crypto Predecition website with wallet functional

script.js

Changed around line 1
+ document.addEventListener('DOMContentLoaded', () => {
+     initializePredictions();
+     initializeWallet();
+ });
+ 
+ function initializePredictions() {
+     const cards = document.querySelectorAll('.prediction-card');
+ 
+     cards.forEach(card => {
+         // Simulate real-time price updates
+         setInterval(() => {
+             updatePrice(card);
+             updatePrediction(card);
+         }, 3000);
+     });
+ }
+ 
+ function updatePrice(card) {
+     const priceElement = card.querySelector('.current-price');
+     const crypto = card.dataset.crypto;
+ 
+     // Simulate price data
+     const basePrice = crypto === 'BTC' ? 45000 : 3000;
+     const randomChange = (Math.random() - 0.5) * 100;
+     const newPrice = basePrice + randomChange;
+ 
+     priceElement.textContent = newPrice.toFixed(2);
+     animatePriceChange(priceElement, randomChange > 0);
+ }
+ 
+ function updatePrediction(card) {
+     const predictionElement = card.querySelector('.prediction-value');
+     const meterFill = card.querySelector('.meter-fill');
+ 
+     // Simulate prediction algorithm
+     const sentiment = Math.random();
+     const width = sentiment * 100;
+ 
+     meterFill.style.width = `${width}%`;
+     predictionElement.textContent = sentiment > 0.5 ? 'Bullish' : 'Bearish';
+     predictionElement.style.color = sentiment > 0.5 ? '#00ff00' : '#ff0000';
+ }
+ 
+ function animatePriceChange(element, isPositive) {
+     element.style.color = isPositive ? '#00ff00' : '#ff0000';
+     setTimeout(() => {
+         element.style.color = 'white';
+     }, 1000);
+ }
+ 
+ function initializeWallet() {
+     const connectButton = document.querySelector('.connect-wallet');
+ 
+     connectButton.addEventListener('click', async () => {
+         if (typeof window.ethereum !== 'undefined') {
+             try {
+                 await window.ethereum.request({ method: 'eth_requestAccounts' });
+                 connectButton.textContent = 'Connected';
+                 updateWalletUI();
+             } catch (error) {
+                 console.error('User rejected connection');
+             }
+         } else {
+             alert('Please install MetaMask to use wallet features');
+         }
+     });
+ }
+ 
+ function updateWalletUI() {
+     const balanceElement = document.querySelector('.balance-amount');
+     balanceElement.textContent = 'Loading...';
+ 
+     // Simulate wallet balance update
+     setTimeout(() => {
+         const randomBalance = (Math.random() * 10).toFixed(4);
+         balanceElement.textContent = `${randomBalance} ETH`;
+     }, 1000);
+ }
+ 
+ // Add smooth scrolling for navigation
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
+     anchor.addEventListener('click', function (e) {
+         e.preventDefault();
+         document.querySelector(this.getAttribute('href')).scrollIntoView({
+             behavior: 'smooth'
+         });
+     });
+ });

style.css

Changed around line 1
+ :root {
+   --primary-color: #6c5ce7;
+   --secondary-color: #a8a4e6;
+   --background-dark: #1a1a2e;
+   --text-light: #ffffff;
+   --text-dark: #16161a;
+   --accent-color: #00d2d3;
+ }
+ 
+ * {
+   margin: 0;
+   padding: 0;
+   box-sizing: border-box;
+ }
+ 
+ body {
+   font-family: 'Inter', sans-serif;
+   background: var(--background-dark);
+   color: var(--text-light);
+   line-height: 1.6;
+ }
+ 
+ .main-nav {
+   display: flex;
+   justify-content: space-between;
+   align-items: center;
+   padding: 1rem 2rem;
+   background: rgba(26, 26, 46, 0.95);
+   backdrop-filter: blur(10px);
+   position: fixed;
+   width: 100%;
+   top: 0;
+   z-index: 1000;
+ }
+ 
+ .logo {
+   font-size: 1.5rem;
+   font-weight: bold;
+   background: linear-gradient(45deg, var(--primary-color), var(--accent-color));
+   -webkit-background-clip: text;
+   -webkit-text-fill-color: transparent;
+ }
+ 
+ .nav-links {
+   display: flex;
+   gap: 2rem;
+   align-items: center;
+ }
+ 
+ .nav-links a {
+   color: var(--text-light);
+   text-decoration: none;
+   transition: color 0.3s ease;
+ }
+ 
+ .nav-links a:hover {
+   color: var(--accent-color);
+ }
+ 
+ .connect-wallet {
+   background: linear-gradient(45deg, var(--primary-color), var(--accent-color));
+   border: none;
+   padding: 0.5rem 1.5rem;
+   border-radius: 25px;
+   color: var(--text-light);
+   cursor: pointer;
+   transition: transform 0.3s ease;
+ }
+ 
+ .connect-wallet:hover {
+   transform: translateY(-2px);
+ }
+ 
+ .hero {
+   height: 100vh;
+   display: flex;
+   flex-direction: column;
+   justify-content: center;
+   align-items: center;
+   text-align: center;
+   padding: 2rem;
+   background: linear-gradient(rgba(26, 26, 46, 0.8), rgba(26, 26, 46, 0.9)),
+               url('data:image/svg+xml,');
+   background-size: cover;
+   background-position: center;
+ }
+ 
+ .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;
+ }
+ 
+ .prediction-cards {
+   display: grid;
+   grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+   gap: 2rem;
+   padding: 2rem;
+ }
+ 
+ .prediction-card {
+   background: rgba(255, 255, 255, 0.05);
+   border-radius: 15px;
+   padding: 2rem;
+   backdrop-filter: blur(10px);
+   transition: transform 0.3s ease;
+ }
+ 
+ .prediction-card:hover {
+   transform: translateY(-5px);
+ }
+ 
+ .crypto-icon {
+   font-size: 2rem;
+   margin-bottom: 1rem;
+ }
+ 
+ .prediction-meter {
+   height: 10px;
+   background: rgba(255, 255, 255, 0.1);
+   border-radius: 5px;
+   margin: 1rem 0;
+   overflow: hidden;
+ }
+ 
+ .meter-fill {
+   height: 100%;
+   background: linear-gradient(45deg, var(--primary-color), var(--accent-color));
+   width: 0;
+   transition: width 1s ease;
+ }
+ 
+ .wallet-container {
+   background: rgba(255, 255, 255, 0.05);
+   border-radius: 15px;
+   padding: 2rem;
+   margin: 2rem;
+ }
+ 
+ .wallet-actions {
+   display: flex;
+   gap: 1rem;
+   margin: 2rem 0;
+ }
+ 
+ .action-btn {
+   flex: 1;
+   padding: 1rem;
+   border: none;
+   border-radius: 10px;
+   background: var(--primary-color);
+   color: var(--text-light);
+   cursor: pointer;
+   transition: transform 0.3s ease;
+ }
+ 
+ .action-btn:hover {
+   transform: translateY(-2px);
+ }
+ 
+ @media (max-width: 768px) {
+   .nav-links {
+     display: none;
+   }
+ 
+   .hero h1 {
+     font-size: 2.5rem;
+   }
+ 
+   .prediction-cards {
+     grid-template-columns: 1fr;
+   }
+ }