Changes to calcmaster.scroll.pub

root

25 days ago

Initial commit

body.html

Changed around line 1
+ 
+   CalcMaster
+   
+     
+     
+   
+ 
+ 
+ 
+   
+     
+       
+         Start Date
+         
+       
+       
+         End Date
+         
+       
+       
+       
+     
+   
+ 
+   
+     
+       
+         Amount
+         
+       
+       
+         From
+         
+       
+       
+         To
+         
+       
+       
+       
+     
+   
+ 
+ 
+ 
+   Made with precision by CalcMaster
+ 

index.scroll

Changed around line 1
+ buildHtml
+ baseUrl https://calcmaster.scroll.pub
+ metaTags
+ editButton /edit.html
+ title CalcMaster - Advanced Date & Currency Calculator
+ style.css
+ body.html
+ script.js

prompt.json

Changed around line 1
+ {
+   "id": "msg_011usFsH1w5tzrfP2eMJ1mF3",
+   "type": "message",
+   "role": "assistant",
+   "model": "claude-3-5-sonnet-20241022",
+   "content": [
+     {
+       "type": "text",
+       "text": "I'll help create a sleek calculator website. For the domain, I suggest:\n\n---domain---\ncalcmaster.scroll.pub\n\n---index.scroll---\nbuildHtml\nbaseUrl https://calcmaster.scroll.pub\nmetaTags\neditButton /edit.html\ntitle CalcMaster - Advanced Date & Currency Calculator\nstyle.css\nbody.html\nscript.js\n\n---body.html---\n\n  CalcMaster\n  \n    \n    \n  \n\n\n\n  \n    \n      \n        Start Date\n        \n      
\n      \n        End Date\n        \n      
\n      \n      
\n    
\n  \n\n  \n    \n      \n        Amount\n        \n      
\n      \n        From\n        \n      
\n      \n        To\n        \n      
\n      \n      
\n    
\n  \n\n\n\n  Made with precision by CalcMaster
\n\n\n---style.css---\n:root {\n  --primary: #2d3436;\n  --secondary: #0984e3;\n  --accent: #00cec9;\n  --background: #1e272e;\n  --text: #dfe6e9;\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  background: var(--background);\n  color: var(--text);\n  min-height: 100vh;\n  display: flex;\n  flex-direction: column;\n}\n\nheader {\n  padding: 2rem;\n  text-align: center;\n  background: linear-gradient(135deg, var(--primary), var(--secondary));\n  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);\n}\n\nh1 {\n  font-size: 2.5rem;\n  margin-bottom: 1.5rem;\n  background: linear-gradient(45deg, var(--accent), var(--text));\n  -webkit-background-clip: text;\n  background-clip: text;\n  color: transparent;\n}\n\nnav {\n  display: flex;\n  justify-content: center;\n  gap: 1rem;\n}\n\n.tab-btn {\n  padding: 0.75rem 1.5rem;\n  border: none;\n  border-radius: 25px;\n  background: rgba(255, 255, 255, 0.1);\n  color: var(--text);\n  cursor: pointer;\n  transition: all 0.3s ease;\n}\n\n.tab-btn.active {\n  background: var(--accent);\n  color: var(--primary);\n}\n\nmain {\n  flex: 1;\n  padding: 2rem;\n  max-width: 600px;\n  margin: 0 auto;\n  width: 100%;\n}\n\n.calculator {\n  display: none;\n  animation: fadeIn 0.3s ease;\n}\n\n.calculator.active {\n  display: block;\n}\n\n.calc-container {\n  background: rgba(255, 255, 255, 0.05);\n  padding: 2rem;\n  border-radius: 15px;\n  backdrop-filter: blur(10px);\n  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);\n}\n\n.input-group {\n  margin-bottom: 1.5rem;\n}\n\nlabel {\n  display: block;\n  margin-bottom: 0.5rem;\n  color: var(--accent);\n}\n\ninput, select {\n  width: 100%;\n  padding: 0.75rem;\n  border: 2px solid rgba(255, 255, 255, 0.1);\n  border-radius: 8px;\n  background: rgba(255, 255, 255, 0.05);\n  color: var(--text);\n  font-size: 1rem;\n}\n\n.calc-btn {\n  width: 100%;\n  padding: 1rem;\n  border: none;\n  border-radius: 8px;\n  background: var(--secondary);\n  color: var(--text);\n  font-size: 1rem;\n  cursor: pointer;\n  transition: all 0.3s ease;\n}\n\n.calc-btn:hover {\n  background: var(--accent);\n  transform: translateY(-2px);\n}\n\n.result {\n  margin-top: 1.5rem;\n  padding: 1rem;\n  border-radius: 8px;\n  background: rgba(255, 255, 255, 0.05);\n  text-align: center;\n  font-size: 1.2rem;\n}\n\nfooter {\n  text-align: center;\n  padding: 1rem;\n  background: var(--primary);\n}\n\n@keyframes fadeIn {\n  from { opacity: 0; }\n  to { opacity: 1; }\n}\n\n@media (max-width: 600px) {\n  header {\n    padding: 1rem;\n  }\n  \n  h1 {\n    font-size: 2rem;\n  }\n  \n  main {\n    padding: 1rem;\n  }\n  \n  .calc-container {\n    padding: 1rem;\n  }\n}\n\n---script.js---\ndocument.addEventListener('DOMContentLoaded', () => {\n  // Tab switching\n  const tabs = document.querySelectorAll('.tab-btn');\n  const calculators = document.querySelectorAll('.calculator');\n\n  tabs.forEach(tab => {\n    tab.addEventListener('click', () => {\n      tabs.forEach(t => t.classList.remove('active'));\n      calculators.forEach(c => c.classList.remove('active'));\n      \n      tab.classList.add('active');\n      document.getElementById(tab.dataset.tab).classList.add('active');\n    });\n  });\n\n  // Date Calculator\n  const calculateDate = () => {\n    const startDate = new Date(document.getElementById('start-date').value);\n    const endDate = new Date(document.getElementById('end-date').value);\n    \n    if (isNaN(startDate.getTime()) || isNaN(endDate.getTime())) {\n      document.getElementById('date-result').textContent = 'Please select valid dates';\n      return;\n    }\n\n    const diffTime = Math.abs(endDate - startDate);\n    const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));\n    \n    document.getElementById('date-result').textContent = \n      `Difference: ${diffDays} day${diffDays !== 1 ? 's' : ''}`;\n  };\n\n  document.getElementById('calculate-date').addEventListener('click', calculateDate);\n\n  // Currency Calculator\n  const exchangeRates = {\n    USD: { EUR: 0.85, GBP: 0.73, JPY: 110.0 },\n    EUR: { USD: 1.18, GBP: 0.86, JPY: 129.5 },\n    GBP: { USD: 1.37, EUR: 1.16, JPY: 150.0 },\n    JPY: { USD: 0.0091, EUR: 0.0077, GBP: 0.0067 }\n  };\n\n  const calculateCurrency = () => {\n    const amount = parseFloat(document.getElementById('amount').value);\n    const fromCurrency = document.getElementById('from-currency').value;\n    const toCurrency = document.getElementById('to-currency').value;\n    \n    if (isNaN(amount)) {\n      document.getElementById('currency-result').textContent = 'Please enter a valid amount';\n      return;\n    }\n\n    let result;\n    if (fromCurrency === toCurrency) {\n      result = amount;\n    } else {\n      result = amount * exchangeRates[fromCurrency][toCurrency];\n    }\n\n    document.getElementById('currency-result').textContent = \n      `${amount} ${fromCurrency} = ${result.toFixed(2)} ${toCurrency}`;\n  };\n\n  document.getElementById('calculate-currency').addEventListener('click', calculateCurrency);\n});\n\n---end---\n\nThis implementation creates a modern, responsive calculator website with a beautiful UI featuring:\n\n1. Tab-based navigation between calculators\n2. Smooth animations and transitions\n3. Glass-morphism design elements\n4. Gradient effects\n5. Responsive layout\n6. Clear visual hierarchy\n7. Accessible form controls\n8. Error handling\n9. Interactive elements with hover effects\n10. Clean, professional design\n\nThe date calculator allows users to calculate the difference between two dates, while the currency converter provides conversion between major currencies (using static rates for demonstration - in a real implementation, you'd want to use an API for live rates).\n\nThe design uses a dark theme with accent colors and modern CSS features like custom properties, flexbox, and CSS animations. It's fully responsive and works well on both desktop and mobile devices."
+     }
+   ],
+   "stop_reason": "end_turn",
+   "stop_sequence": null,
+   "usage": {
+     "input_tokens": 299,
+     "cache_creation_input_tokens": 0,
+     "cache_read_input_tokens": 0,
+     "output_tokens": 2674
+   }
+ }

readme.scroll

Changed around line 1

+ # calcmaster.scroll.pub

+ Website generated by Claude from prompt: Create a website to make a great calculator which calculates dates and can convert currencies, use fancy css and make it look amazing and futuristic

script.js

Changed around line 1
+ document.addEventListener('DOMContentLoaded', () => {
+   // Tab switching
+   const tabs = document.querySelectorAll('.tab-btn');
+   const calculators = document.querySelectorAll('.calculator');
+ 
+   tabs.forEach(tab => {
+     tab.addEventListener('click', () => {
+       tabs.forEach(t => t.classList.remove('active'));
+       calculators.forEach(c => c.classList.remove('active'));
+ 
+       tab.classList.add('active');
+       document.getElementById(tab.dataset.tab).classList.add('active');
+     });
+   });
+ 
+   // Date Calculator
+   const calculateDate = () => {
+     const startDate = new Date(document.getElementById('start-date').value);
+     const endDate = new Date(document.getElementById('end-date').value);
+ 
+     if (isNaN(startDate.getTime()) || isNaN(endDate.getTime())) {
+       document.getElementById('date-result').textContent = 'Please select valid dates';
+       return;
+     }
+ 
+     const diffTime = Math.abs(endDate - startDate);
+     const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
+ 
+     document.getElementById('date-result').textContent =
+       `Difference: ${diffDays} day${diffDays !== 1 ? 's' : ''}`;
+   };
+ 
+   document.getElementById('calculate-date').addEventListener('click', calculateDate);
+ 
+   // Currency Calculator
+   const exchangeRates = {
+     USD: { EUR: 0.85, GBP: 0.73, JPY: 110.0 },
+     EUR: { USD: 1.18, GBP: 0.86, JPY: 129.5 },
+     GBP: { USD: 1.37, EUR: 1.16, JPY: 150.0 },
+     JPY: { USD: 0.0091, EUR: 0.0077, GBP: 0.0067 }
+   };
+ 
+   const calculateCurrency = () => {
+     const amount = parseFloat(document.getElementById('amount').value);
+     const fromCurrency = document.getElementById('from-currency').value;
+     const toCurrency = document.getElementById('to-currency').value;
+ 
+     if (isNaN(amount)) {
+       document.getElementById('currency-result').textContent = 'Please enter a valid amount';
+       return;
+     }
+ 
+     let result;
+     if (fromCurrency === toCurrency) {
+       result = amount;
+     } else {
+       result = amount * exchangeRates[fromCurrency][toCurrency];
+     }
+ 
+     document.getElementById('currency-result').textContent =
+       `${amount} ${fromCurrency} = ${result.toFixed(2)} ${toCurrency}`;
+   };
+ 
+   document.getElementById('calculate-currency').addEventListener('click', calculateCurrency);
+ });

style.css

Changed around line 1
+ :root {
+   --primary: #2d3436;
+   --secondary: #0984e3;
+   --accent: #00cec9;
+   --background: #1e272e;
+   --text: #dfe6e9;
+ }
+ 
+ * {
+   margin: 0;
+   padding: 0;
+   box-sizing: border-box;
+ }
+ 
+ body {
+   font-family: 'Segoe UI', system-ui, sans-serif;
+   background: var(--background);
+   color: var(--text);
+   min-height: 100vh;
+   display: flex;
+   flex-direction: column;
+ }
+ 
+ header {
+   padding: 2rem;
+   text-align: center;
+   background: linear-gradient(135deg, var(--primary), var(--secondary));
+   box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+ }
+ 
+ h1 {
+   font-size: 2.5rem;
+   margin-bottom: 1.5rem;
+   background: linear-gradient(45deg, var(--accent), var(--text));
+   -webkit-background-clip: text;
+   background-clip: text;
+   color: transparent;
+ }
+ 
+ nav {
+   display: flex;
+   justify-content: center;
+   gap: 1rem;
+ }
+ 
+ .tab-btn {
+   padding: 0.75rem 1.5rem;
+   border: none;
+   border-radius: 25px;
+   background: rgba(255, 255, 255, 0.1);
+   color: var(--text);
+   cursor: pointer;
+   transition: all 0.3s ease;
+ }
+ 
+ .tab-btn.active {
+   background: var(--accent);
+   color: var(--primary);
+ }
+ 
+ main {
+   flex: 1;
+   padding: 2rem;
+   max-width: 600px;
+   margin: 0 auto;
+   width: 100%;
+ }
+ 
+ .calculator {
+   display: none;
+   animation: fadeIn 0.3s ease;
+ }
+ 
+ .calculator.active {
+   display: block;
+ }
+ 
+ .calc-container {
+   background: rgba(255, 255, 255, 0.05);
+   padding: 2rem;
+   border-radius: 15px;
+   backdrop-filter: blur(10px);
+   box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
+ }
+ 
+ .input-group {
+   margin-bottom: 1.5rem;
+ }
+ 
+ label {
+   display: block;
+   margin-bottom: 0.5rem;
+   color: var(--accent);
+ }
+ 
+ input, select {
+   width: 100%;
+   padding: 0.75rem;
+   border: 2px solid rgba(255, 255, 255, 0.1);
+   border-radius: 8px;
+   background: rgba(255, 255, 255, 0.05);
+   color: var(--text);
+   font-size: 1rem;
+ }
+ 
+ .calc-btn {
+   width: 100%;
+   padding: 1rem;
+   border: none;
+   border-radius: 8px;
+   background: var(--secondary);
+   color: var(--text);
+   font-size: 1rem;
+   cursor: pointer;
+   transition: all 0.3s ease;
+ }
+ 
+ .calc-btn:hover {
+   background: var(--accent);
+   transform: translateY(-2px);
+ }
+ 
+ .result {
+   margin-top: 1.5rem;
+   padding: 1rem;
+   border-radius: 8px;
+   background: rgba(255, 255, 255, 0.05);
+   text-align: center;
+   font-size: 1.2rem;
+ }
+ 
+ footer {
+   text-align: center;
+   padding: 1rem;
+   background: var(--primary);
+ }
+ 
+ @keyframes fadeIn {
+   from { opacity: 0; }
+   to { opacity: 1; }
+ }
+ 
+ @media (max-width: 600px) {
+   header {
+     padding: 1rem;
+   }
+ 
+   h1 {
+     font-size: 2rem;
+   }
+ 
+   main {
+     padding: 1rem;
+   }
+ 
+   .calc-container {
+     padding: 1rem;
+   }
+ }