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