Changes to investwise.scroll.pub

root

26 days ago

Initial commit

body.html

Changed around line 1
+ 
+   
+     InvestWise
+     
+       Calculator
+       Analysis
+       Trends
+     
+   
+ 
+ 
+ 
+   
+     Make Smarter Investment Decisions
+     Compare historical performance and future potential of Cryptocurrency vs Gold
+   
+ 
+   
+     Investment Calculator
+     
+       
+         Investment Amount ($)
+         
+       
+       
+         Time Horizon (Years)
+         
+         5 years
+       
+       
+         Risk Tolerance
+         
+       
+     
+     
+       
+         Cryptocurrency
+         
+       
+       
+         Gold
+         
+       
+     
+   
+ 
+   
+     Market Analysis
+     
+       
+     
+     
+       
+         Volatility
+         
+       
+       
+         Growth Potential
+         
+       
+       
+         Risk Level
+         
+       
+     
+   
+ 
+   
+     Current Trends
+     
+       
+         Crypto Market Sentiment
+         
+       
+       
+         Gold Market Sentiment
+         
+       
+     
+   
+ 
+ 
+ 
+   
+     InvestWise - Making Investment Decisions Simpler
+     
+       Privacy Policy
+       Terms of Use
+       Contact
+     
+   
+ 

index.scroll

Changed around line 1
+ buildHtml
+ baseUrl https://investwise.scroll.pub
+ metaTags
+ editButton /edit.html
+ title InvestWise - Smart Crypto vs Gold Investment Decisions
+ style.css
+ body.html
+ script.js

readme.scroll

Changed around line 1

+ # investwise.scroll.pub

+ Website generated by Claude from prompt: I want a website that will help me decide if I should invest in crypto or gold over the next 5 years. Look at historical macro correlations and other market factors. Be creative!

script.js

Changed around line 1
+ document.addEventListener('DOMContentLoaded', () => {
+   // Initialize chart
+   const ctx = document.getElementById('comparison-chart').getContext('2d');
+   let chart = createComparisonChart(ctx);
+ 
+   // Setup event listeners
+   setupCalculator();
+   updateIndicators();
+ 
+   // Update displays initially
+   updateResults();
+ });
+ 
+ function createComparisonChart(ctx) {
+   const months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
+   const cryptoData = generateRandomData(12, 30000, 60000);
+   const goldData = generateRandomData(12, 1500, 2000);
+ 
+   return new Chart(ctx, {
+     type: 'line',
+     data: {
+       labels: months,
+       datasets: [{
+         label: 'Cryptocurrency (BTC)',
+         data: cryptoData,
+         borderColor: '#f4b942',
+         tension: 0.4
+       }, {
+         label: 'Gold (per oz)',
+         data: goldData,
+         borderColor: '#2a3b4c',
+         tension: 0.4
+       }]
+     },
+     options: {
+       responsive: true,
+       maintainAspectRatio: false
+     }
+   });
+ }
+ 
+ function generateRandomData(points, min, max) {
+   return Array.from({length: points}, () =>
+     Math.floor(Math.random() * (max - min + 1)) + min
+   );
+ }
+ 
+ function setupCalculator() {
+   const timeHorizon = document.getElementById('time-horizon');
+   const yearsDisplay = document.getElementById('years-display');
+ 
+   timeHorizon.addEventListener('input', (e) => {
+     yearsDisplay.textContent = `${e.target.value} years`;
+     updateResults();
+   });
+ 
+   document.getElementById('investment-amount').addEventListener('input', updateResults);
+   document.getElementById('risk-tolerance').addEventListener('change', updateResults);
+ }
+ 
+ function updateResults() {
+   const amount = parseFloat(document.getElementById('investment-amount').value);
+   const years = parseInt(document.getElementById('time-horizon').value);
+   const risk = document.getElementById('risk-tolerance').value;
+ 
+   const cryptoResult = calculatePrediction(amount, years, risk, 'crypto');
+   const goldResult = calculatePrediction(amount, years, risk, 'gold');
+ 
+   document.querySelector('#crypto-result .prediction').textContent =
+     `Predicted Value: $${cryptoResult.toLocaleString()}`;
+   document.querySelector('#gold-result .prediction').textContent =
+     `Predicted Value: $${goldResult.toLocaleString()}`;
+ }
+ 
+ function calculatePrediction(amount, years, risk, type) {
+   const rateMap = {
+     crypto: {
+       low: 0.15,
+       medium: 0.25,
+       high: 0.40
+     },
+     gold: {
+       low: 0.05,
+       medium: 0.08,
+       high: 0.12
+     }
+   };
+ 
+   const rate = rateMap[type][risk];
+   return Math.round(amount * Math.pow(1 + rate, years));
+ }
+ 
+ function updateIndicators() {
+   const indicators = {
+     volatility: {
+       crypto: 0.85,
+       gold: 0.35
+     },
+     growth: {
+       crypto: 0.75,
+       gold: 0.45
+     },
+     risk: {
+       crypto: 0.90,
+       gold: 0.30
+     }
+   };
+ 
+   Object.keys(indicators).forEach(type => {
+     updateIndicator(`${type}-indicator`, indicators[type]);
+   });
+ }
+ 
+ function updateIndicator(elementId, values) {
+   const element = document.getElementById(elementId);
+   const maxHeight = 100;
+ 
+   const cryptoHeight = values.crypto * maxHeight;
+   const goldHeight = values.gold * maxHeight;
+ 
+   element.innerHTML = `
+     
+     
+   `;
+ }
+ 
+ // Add smooth scrolling for navigation links
+ 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: #2a3b4c;
+   --secondary-color: #f4b942;
+   --text-color: #333;
+   --background-light: #f5f7fa;
+   --card-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+   --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);
+   background: var(--background-light);
+ }
+ 
+ header {
+   background: var(--primary-color);
+   padding: 1rem;
+   position: fixed;
+   width: 100%;
+   top: 0;
+   z-index: 1000;
+ }
+ 
+ nav {
+   max-width: 1200px;
+   margin: 0 auto;
+   display: flex;
+   justify-content: space-between;
+   align-items: center;
+ }
+ 
+ .logo {
+   color: white;
+   font-size: 1.5rem;
+   font-weight: bold;
+   text-transform: uppercase;
+ }
+ 
+ .nav-links a {
+   color: white;
+   text-decoration: none;
+   margin-left: 2rem;
+   transition: var(--transition);
+ }
+ 
+ .nav-links a:hover {
+   color: var(--secondary-color);
+ }
+ 
+ main {
+   margin-top: 4rem;
+   padding: 2rem;
+ }
+ 
+ .hero {
+   text-align: center;
+   padding: 4rem 0;
+   background: linear-gradient(135deg, var(--primary-color), #1a2632);
+   color: white;
+   border-radius: 1rem;
+   margin-bottom: 3rem;
+ }
+ 
+ .hero h1 {
+   font-size: 3rem;
+   margin-bottom: 1rem;
+   animation: fadeIn 1s ease-out;
+ }
+ 
+ .calculator-section,
+ .analysis-section,
+ .trends-section {
+   max-width: 1200px;
+   margin: 0 auto 3rem;
+   padding: 2rem;
+   background: white;
+   border-radius: 1rem;
+   box-shadow: var(--card-shadow);
+ }
+ 
+ .calculator-grid {
+   display: grid;
+   grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+   gap: 2rem;
+   margin: 2rem 0;
+ }
+ 
+ .input-group {
+   display: flex;
+   flex-direction: column;
+ }
+ 
+ input, select {
+   padding: 0.8rem;
+   border: 2px solid #ddd;
+   border-radius: 0.5rem;
+   font-size: 1rem;
+   transition: var(--transition);
+ }
+ 
+ input:focus, select:focus {
+   border-color: var(--secondary-color);
+   outline: none;
+ }
+ 
+ .results-container {
+   display: grid;
+   grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+   gap: 2rem;
+   margin-top: 2rem;
+ }
+ 
+ .result-card {
+   padding: 1.5rem;
+   background: var(--background-light);
+   border-radius: 0.5rem;
+   text-align: center;
+   transition: var(--transition);
+ }
+ 
+ .result-card:hover {
+   transform: translateY(-5px);
+ }
+ 
+ .chart-container {
+   height: 400px;
+   margin: 2rem 0;
+ }
+ 
+ .analysis-grid {
+   display: grid;
+   grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+   gap: 2rem;
+ }
+ 
+ .analysis-card {
+   padding: 1.5rem;
+   background: var(--background-light);
+   border-radius: 0.5rem;
+   text-align: center;
+ }
+ 
+ .trends-grid {
+   display: grid;
+   grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+   gap: 2rem;
+ }
+ 
+ .trend-card {
+   padding: 2rem;
+   background: white;
+   border-radius: 0.5rem;
+   box-shadow: var(--card-shadow);
+ }
+ 
+ footer {
+   background: var(--primary-color);
+   color: white;
+   padding: 2rem;
+   margin-top: 4rem;
+ }
+ 
+ .footer-content {
+   max-width: 1200px;
+   margin: 0 auto;
+   display: flex;
+   justify-content: space-between;
+   align-items: center;
+ }
+ 
+ .footer-links a {
+   color: white;
+   text-decoration: none;
+   margin-left: 1rem;
+ }
+ 
+ @keyframes fadeIn {
+   from { opacity: 0; transform: translateY(20px); }
+   to { opacity: 1; transform: translateY(0); }
+ }
+ 
+ @media (max-width: 768px) {
+   .nav-links {
+     display: none;
+   }
+ 
+   .hero h1 {
+     font-size: 2rem;
+   }
+ 
+   .footer-content {
+     flex-direction: column;
+     text-align: center;
+   }
+ 
+   .footer-links {
+     margin-top: 1rem;
+   }
+ 
+   .footer-links a {
+     display: block;
+     margin: 0.5rem 0;
+   }
+ }