From 225aa4c1638ff9a7d80f48509b5ea4f26eac546b Mon Sep 17 00:00:00 2001
From: frubcoin <160479988+frubcoin@users.noreply.github.com>
Date: Thu, 23 May 2024 22:06:56 -0700
Subject: [PATCH] Add files via upload

---
 prices.html | 426 ++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 426 insertions(+)
 create mode 100644 prices.html
diff --git a/prices.html b/prices.html
new file mode 100644
index 0000000..f6d7544
--- /dev/null
+++ b/prices.html
@@ -0,0 +1,426 @@
+<html><head><base href="https://websim.ai/creative way of visualizing the eth live and historical price using a free public api use vanta.js add a dropdown with multiple vanta.js backgrounds"><style>
+body {
+  margin: 0;
+  overflow: hidden;
+  font-family: 'Helvetica', Arial, sans-serif;
+}
+
+#background-canvas {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100vw; 
+  height: 100vh;
+  z-index: 0;
+}
+
+#data-window {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  background: rgba(0, 0, 0, 0.7);
+  border-radius: 15px;
+  padding: 20px;
+  width: 400px;
+  z-index: 2;
+  text-align: center;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.08);
+  backdrop-filter: blur(10px);
+  -webkit-backdrop-filter: blur(10px);
+  transition: background 0.3s ease;
+  color: #fff;
+}
+
+#data-window.light-mode {
+  background: rgba(255, 255, 255, 0.7);
+  color: #000;
+}
+
+h2 {
+  margin: 0 0 10px;
+  font-weight: 600;
+  text-transform: uppercase;
+  transition: color 0.3s ease;
+}
+
+.price-container {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin: 0 0 10px;
+  cursor: pointer;
+  padding: 10px;
+  border-radius: 5px;
+  transition: background-color 0.3s ease;
+}
+
+.price-container:hover {
+  background-color: rgba(255, 255, 255, 0.1);
+}
+
+.price-container.selected {
+  background-color: rgba(255, 255, 255, 0.2);
+}
+
+.live-ping {
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  background-color: #4CAF50;
+  margin-right: 10px;
+  animation: ping 1s ease-in-out infinite;
+  display: none;
+}
+
+@keyframes ping {
+  0% {
+    transform: scale(1);
+    opacity: 1;
+  }
+  100% {
+    transform: scale(2);
+    opacity: 0;
+  }
+}
+
+.price-ticker {
+  margin-left: 10px;
+  font-size: 1.2em;
+}
+
+.up {
+  color: #4CAF50;
+}
+
+.down {
+  color: #FF5722;
+}
+
+h1 {
+  margin: 0;
+  font-weight: 600;
+  transition: color 0.3s ease;
+  font-size: 1.5em;
+}
+
+#price-history {
+  font-size: 1.1em;
+  max-height: 200px;
+  overflow-y: auto;
+  display: flex;
+  flex-direction: column-reverse;
+  transition: color 0.3s ease;
+}
+
+.history-item {
+  margin-bottom: 10px;
+  padding: 5px 0;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+  transition: border-color 0.3s ease;
+}
+
+.light-mode .history-item {
+  border-color: rgba(0, 0, 0, 0.1);
+}
+
+#background-select {
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  z-index: 2;
+  padding: 10px;
+  font-size: 14px;
+  border-radius: 5px;
+  background: rgba(255, 255, 255, 0.8);
+  color: #333;
+  border: none;
+  outline: none;
+  cursor: pointer;
+}
+
+#dark-mode-toggle {
+  position: absolute;
+  top: 10px;
+  left: 10px;
+  z-index: 2;
+  padding: 10px;
+  font-size: 14px;
+  border-radius: 5px;
+  background: rgba(255, 255, 255, 0.8);
+  color: #333;
+  border: none;
+  outline: none;
+  cursor: pointer;
+}
+
+/* Custom scrollbar */
+::-webkit-scrollbar {
+  width: 6px;
+}
+
+::-webkit-scrollbar-track {
+  background: rgba(0, 0, 0, 0.1); 
+}
+ 
+::-webkit-scrollbar-thumb {
+  background: rgba(255, 255, 255, 0.2); 
+  border-radius: 10px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: rgba(255, 255, 255, 0.4); 
+}
+
+</style>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r134/three.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.waves.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.dots.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.birds.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.clouds.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.cells.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.globe.min.js"></script>
+</head>
+<body>
+<div id="background-canvas"></div>
+<div id="data-window">
+  <h2>Crypto Prices</h2>  
+  <div class="price-container selected" id="eth-container">
+    <div class="live-ping" id="eth-ping"></div>
+    <h1 id="eth-price">ETH: Loading...</h1>
+    <span class="price-ticker" id="eth-ticker"></span>
+  </div>
+  <div class="price-container" id="btc-container">
+    <div class="live-ping" id="btc-ping"></div>
+    <h1 id="btc-price">BTC: Loading...</h1>
+    <span class="price-ticker" id="btc-ticker"></span>
+  </div>
+  <div class="price-container" id="sol-container">
+    <div class="live-ping" id="sol-ping"></div>
+    <h1 id="sol-price">SOL: Loading...</h1>
+    <span class="price-ticker" id="sol-ticker"></span>
+  </div>
+  <div id="price-history"></div>
+</div>
+<select id="background-select">
+  <option value="clouds" selected>Clouds</option>
+  <option value="waves">Waves</option>
+  <option value="dots">Dots</option>
+  <option value="birds">Birds</option>
+  <option value="cells">Cells</option>
+  <option value="globe">Globe</option>
+</select>
+<button id="dark-mode-toggle">Light Mode</button>
+<script>
+const API_URL = "https://min-api.cryptocompare.com/data/pricemulti?fsyms=ETH,BTC,SOL&tsyms=USD";
+const HISTORY_API_URL = "https://min-api.cryptocompare.com/data/v2/histominute?fsym=ETH&tsym=USD&limit=10";
+
+const ethPriceElement = document.getElementById("eth-price");
+const btcPriceElement = document.getElementById("btc-price");
+const solPriceElement = document.getElementById("sol-price");
+const historyElement = document.getElementById("price-history");
+const backgroundSelect = document.getElementById("background-select"); 
+const darkModeToggle = document.getElementById("dark-mode-toggle");
+const dataWindow = document.getElementById("data-window");
+const ethPing = document.getElementById("eth-ping");
+const btcPing = document.getElementById("btc-ping");
+const solPing = document.getElementById("sol-ping");
+const ethTicker = document.getElementById("eth-ticker");
+const btcTicker = document.getElementById("btc-ticker");
+const solTicker = document.getElementById("sol-ticker");
+const ethContainer = document.getElementById("eth-container");
+const btcContainer = document.getElementById("btc-container");
+const solContainer = document.getElementById("sol-container");
+
+let vantaEffect;
+let prevPrices = {
+  ETH: null,
+  BTC: null,
+  SOL: null
+};
+let selectedCoin = 'ETH';
+
+async function fetchPrices() {
+  const response = await fetch(API_URL);
+  const data = await response.json();
+  return data;
+}
+
+async function fetchHistory(coin) {
+  const response = await fetch(`https://min-api.cryptocompare.com/data/v2/histominute?fsym=${coin}&tsym=USD&limit=10`);
+  const data = await response.json();
+  return data.Data.Data;
+}
+
+function updatePrices(prices) {
+  ethPriceElement.innerText = `ETH: $${prices.ETH.USD.toFixed(2)}`;
+  btcPriceElement.innerText = `BTC: $${prices.BTC.USD.toFixed(2)}`;
+  solPriceElement.innerText = `SOL: $${prices.SOL.USD.toFixed(2)}`;
+
+  ethPing.style.display = 'block';
+  btcPing.style.display = 'block';
+  solPing.style.display = 'block';
+
+  ['ETH', 'BTC', 'SOL'].forEach(coin => {
+    const price = prices[coin].USD;
+    const prevPrice = prevPrices[coin];
+    const ticker = document.getElementById(`${coin.toLowerCase()}-ticker`);
+
+    if (prevPrice !== null) {
+      if (price > prevPrice) {
+        ticker.innerText = '▲';
+        ticker.className = 'price-ticker up';
+      } else if (price < prevPrice) {
+        ticker.innerText = '▼';
+        ticker.className = 'price-ticker down';
+      } else {
+        ticker.innerText = '';
+        ticker.className = 'price-ticker';
+      }
+    }
+
+    prevPrices[coin] = price;
+  });
+}
+
+function updateHistory(history) {
+  historyElement.innerHTML = history.map(item => {
+    const date = new Date(item.time * 1000);
+    return `<div class="history-item">${date.toLocaleTimeString()}: $${item.close.toFixed(2)}</div>`;
+  }).join("");
+}
+
+function setBackground(type) {
+  if(vantaEffect) vantaEffect.destroy();
+
+  const options = {
+    el: "#background-canvas",
+    mouseControls: true,
+    touchControls: true,
+    gyroControls: false,
+    minHeight: 200.00,
+    minWidth: 200.00,
+  };
+
+  switch(type) {
+    case "waves":
+      vantaEffect = VANTA.WAVES({
+        ...options,
+        scale: 1.00,
+        scaleMobile: 1.00,
+        color: 0x3fc7ff,
+        shininess: 50.00,
+        waveHeight: 15.00,
+        waveSpeed: 0.70,
+        zoom: 0.8
+      });
+      break;
+    case "dots":
+      vantaEffect = VANTA.DOTS({
+        ...options,
+        color: 0x6ac6ff,
+        color2: 0xff3f81,
+        backgroundColor: 0x23153c,
+        spacing: 23.00,
+        size: 2.70 
+      });
+      break;
+    case "birds":
+      vantaEffect = VANTA.BIRDS({
+        ...options,
+        backgroundColor: 0x0f1623,
+        color1: 0xff3f81,
+        color2: 0x6ac6ff,
+        colorMode: "lerp",
+        quantity: 3.00
+      });
+      break;
+    case "clouds":
+      vantaEffect = VANTA.CLOUDS({
+        ...options,
+        backgroundColor: 0x0e1c2d,
+        skyColor: 0x246e9c,
+        cloudColor: 0xffffff,
+        cloudShadowColor: 0x2a628f,
+        sunGradient: true,
+        sunPosition: 0.2,
+        speed: 0.8
+      });
+      break;
+    case "cells":
+      vantaEffect = VANTA.CELLS({
+        ...options,
+        color1: 0x5c00ff,
+        color2: 0xf9ff00,
+        size: 1.4,
+        speed: 1.7
+      });
+      break; 
+    case "globe":
+      vantaEffect = VANTA.GLOBE({
+        ...options,
+        backgroundColor: 0x020d18,
+        color: 0x4158d0,
+        color2: 0xc850c0,
+        size: 0.9,
+        distance: 250
+      });
+      break;
+  }
+}
+
+function toggleDarkMode() {
+  dataWindow.classList.toggle('light-mode');
+  if(dataWindow.classList.contains('light-mode')) {
+    darkModeToggle.innerText = 'Dark Mode';
+  } else {
+    darkModeToggle.innerText = 'Light Mode';
+  }
+}
+
+function handleCoinClick(coin) {
+  return async function() {
+    selectedCoin = coin;
+    ethContainer.classList.remove('selected');
+    btcContainer.classList.remove('selected');
+    solContainer.classList.remove('selected');
+    document.getElementById(`${coin.toLowerCase()}-container`).classList.add('selected');
+    const history = await fetchHistory(coin);
+    updateHistory(history.reverse());
+  }
+}
+
+async function init() {
+  const prices = await fetchPrices();
+  const history = await fetchHistory(selectedCoin);
+  
+  updatePrices(prices);
+  updateHistory(history.reverse());
+
+  setBackground(backgroundSelect.value);
+
+  backgroundSelect.addEventListener("change", (e) => {
+    setBackground(e.target.value);
+  });
+
+  darkModeToggle.addEventListener('click', toggleDarkMode);
+
+  ethContainer.addEventListener('click', handleCoinClick('ETH'));
+  btcContainer.addEventListener('click', handleCoinClick('BTC'));
+  solContainer.addEventListener('click', handleCoinClick('SOL'));
+
+  setInterval(async () => {
+    const prices = await fetchPrices();
+    updatePrices(prices);
+  }, 10000);
+
+  setInterval(async () => {
+    const history = await fetchHistory(selectedCoin);  
+    updateHistory(history.reverse());
+  }, 60000);
+}
+
+init();
+</script>
+</body>
+</html>
\ No newline at end of file
