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* bucks for a bitcoin.", 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
118 if (currentText.includes("*BTC*")) {
119 getBitcoinPrice().then(function (price) {
120 if (price !== null) {
121 currentText = currentText.replace("*BTC*", price);
122 }
123 displayText(currentText, currentColor, currentDuration);
124 });
125 } else {
126 displayText(currentText, currentColor, currentDuration);
127 }
128
129 currentIndex = (currentIndex + 1) % textSequence.length;
130 }
131
132async function getBitcoinPrice() {
133 try {
134 var response = await fetch('https://api.coingecko.com/api/v3/simple/price?ids=bitcoin&vs_currencies=usd');
135 var data = await response.json();
136 var price = data.bitcoin.usd;
137 return price;
138 } catch (error) {
139 console.log(error);
140 return null;
141 }
142}
143
144function displayText(text, color, duration) {
145 var textContainer = document.getElementById("textSequence");
146 textContainer.innerHTML = text;
147 textContainer.style.color = color;
148 setTimeout(clearText, duration * 1000);
149}
150
151function clearText() {
152 var textContainer = document.getElementById("textSequence");
153 textContainer.innerHTML = "";
154 setTimeout(displayNextText, 500);
155}
156
157displayNextText(); // Start displaying the text sequence
158setInterval(getBitcoinPrice, 20000); // Update Bitcoin price every 20 seconds
159 </script>
160<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;">
161 <div style="display: flex; justify-content: center; align-items: center;">
162 <a href="/" style="text-decoration: none; color: blue; margin-right: 20px; font-size: 11px;">SATS</a>
163
<img src="pieces.png" alt="Pieces" style="width: 21px;">
164 <a href="/btc" style="text-decoration: none; color: blue; margin-left: 20px; font-size: 11px;">BTC</a>
165 </div>
166 <p>Donate Segwit: bc1qndaqnyxlx7xvaqhz4h5w6wqdg24snsrqllguw6</p>
167 <p>Donate Lightning: lnurl1dp68gurn8ghj7ampd3kx2ar0veekzar0wd5xjtnrdakj7tnhv4kxctttdehhwm30d3h82unvwqhkc6t5v4exzmrvd968getjxvus8zpxl0</p>
168</div>
169</body>
170</html>