Issues:
1<!DOCTYPE html>
2<html>
3<head>
4 <meta charset="UTF-8">
5 <title>Pieces of 10^8 - A Monkey Island Themed Bitcoin Ticker</title>
6 <style>
7 @font-face {
8 font-family: 'MonkeyIsland';
9 src: url('MonkeyIsland-1991-refined.woff2') format('woff2'),
10 url('MonkeyIsland-1991-refined.woff') format('woff');
11 font-weight: normal;
12 font-style: normal;
13 }
14
15 body {
16 margin: 0;
17 padding: 0;
18 background-color: black;
19 font-family: 'MonkeyIsland', sans-serif;
20 }
21
22 .header {
23 position: fixed;
24 top: 0;
25 left: 0;
26 width: 100%;
27 background-color: black;
28 text-align: center;
29 z-index: 9999;
30 }
31
32 .header h1 {
33 color: white;
34 padding: 20px;
35 margin: 0;
36 font-size: 32px; /* Adjust the font size as desired */
37 }
38 </style>
39</head>
40<body>
41 <div class="header">
42 <h1>Pieces of 10^8</h1>
43 </div>
44</body>
45<head>
46
<title>Pieces of 10^8 - A Monkey Island Themed Bitcoin Ticker</title>
47
<style>
48 body {
49 background-color: black;
50 color: white;
51 font-size: 24px;
52 text-align: center;
53 padding: 0;
54 margin: 0;
55 display: flex;
56 flex-direction: column;
57 justify-content: center;
58 align-items: center;
59 height: 100vh;
60 font-family: "MonkeyIsland-1991-refined", sans-serif;
61 }
62
63 @font-face {
64 font-family: "MonkeyIsland-1991-refined";
65 src: url("MonkeyIsland-1991-refined.woff2") format("woff2"),
66 url("MonkeyIsland-1991-refined.woff") format("woff");
67 font-weight: normal;
68 font-style: normal;
69 }
70
71 #videoContainer {
72 max-width: 600px;
73 margin-bottom: 10px;
74 }
75
76 #videoContainer video {
77 width: 100%;
78 height: auto;
79 }
80
81 #textSequence {
82 max-width: 600px;
83 margin: 0 auto;
84 height: 200px; /* Set a fixed height for the text container */
85 overflow: auto; /* Add scrollbars if text overflows the container */
86 }
87 </style>
88<
/head>
89<body>
90 <div id="videoContainer">
91 <video src="tiny.mp4" autoplay muted loop></video>
92 </div>
93 <div id="textSequence"></div>
94
95 <script>
96 var textSequence = [
97 { text: "", color: "white", duration: 1 },
98 { text: "At least I learned something from all of this...", color: "white", duration: 6 },
99 { text: "", color: "white", duration: 0.2 },
100 { text: "What's that?", color: "purple", duration: 2 },
101 { text: "", color: "white", duration: 0.2 },
102 { text: "Never pay more than *BTC* sats for a computer game.", color: "white", duration: 6 },
103 { text: "", color: "white", duration: 0.2 },
104 { text: "A what?", color: "purple", duration: 2 },
105 { text: "", color: "white", duration: 0.2 },
106 { text: "I'm not sure. I don't know why I said that.", color: "white", duration: 6 },
107 { text: "", color: "white", duration: 1 }
108 ];
109
110 var currentIndex = 0;
111
112 function displayNextText() {
113 var currentText = textSequence[currentIndex].text;
114 var currentColor = textSequence[currentIndex].color;
115 var currentDuration = textSequence[currentIndex].duration;
116
117 // Dynamically replace *BTC* with the Bitcoin price in USD
118if (currentText.includes("*BTC*")) {
119 getBitcoinPrice().then(function (price) {
120 if (price !== null) {
121 // Convert $20 USD to Satoshis
122 var satoshiValue = (20 / price) * 100000000; // Assuming the price is in USD
123
124 // Replace "*BTC*" with the Satoshis value
125 currentText = currentText.replace("*BTC*", satoshiValue.toFixed(0));
126 }
127 displayText(currentText, currentColor, currentDuration);
128 });
129} else {
130 displayText(currentText, currentColor, currentDuration);
131}
132 currentIndex = (currentIndex + 1) % textSequence.length;
133 }
134
135async function getBitcoinPrice() {
136 try {
137 var response = await fetch('https://api.coingecko.com/api/v3/simple/price?ids=bitcoin&vs_currencies=usd');
138 var data = await response.json();
139 var price = data.bitcoin.usd;
140 return price;
141 } catch (error) {
142 console.log(error);
143 return null;
144 }
145}
146
147function displayText(text, color, duration) {
148 var textContainer = document.getElementById("textSequence");
149 textContainer.innerHTML = text;
150 textContainer.style.color = color;
151 setTimeout(clearText, duration * 1000);
152}
153
154function clearText() {
155 var textContainer = document.getElementById("textSequence");
156 textContainer.innerHTML = "";
157 setTimeout(displayNextText, 500);
158}
159
160displayNextText(); // Start displaying the text sequence
161setInterval(getBitcoinPrice, 20000); // Update Bitcoin price every 20 seconds
162 </script>
163<div id="footer" style="background-color: black; color: white; padding: 8px; text-align: center; position: fixed; left: 0; bottom: 0; width: 100%; font-family: Arial, sans-serif; font-size: 11px;">
164 <div style="display: flex; justify-content: center; align-items: center;">
165 <a href="/" style="text-decoration: none; color: blue; margin-right: 20px; font-size: 11px;">SATS</a>
166 <img src="pieces.png" alt="Pieces" style="width: 21px;">
167 <a href="/btc" style="text-decoration: none; color: blue; margin-left: 20px; font-size: 11px;">BTC</a>
168 </div>
169 <p>Donate Segwit: bc1qndaqnyxlx7xvaqhz4h5w6wqdg24snsrqllguw6</p>
170 <p>Donate Lightning: lnurl1dp68gurn8ghj7ampd3kx2ar0veekzar0wd5xjtnrdakj7tnhv4kxctttdehhwm30d3h82unvwqhkc6t5v4exzmrvd968getjxvus8zpxl0</p>
171</div>
172</body>
173</html>