TimeCrystal-/index.html at main · Splendor1980/TimeCrystal- · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>TimeCrystal — Retium Prediction Market</title>
  <style>
    body {
      font-family: 'Segoe UI', sans-serif;
      background: #0a0a14;
      color: #e0e0ff;
      margin: 0;
      padding: 20px;
    }
    .header {
      text-align: center;
      padding: 30px;
      background: linear-gradient(90deg, #6b00ff, #00f0ff);
      border-radius: 16px;
      margin-bottom: 30px;
    }
    .crystal {
      background: #1a1a2e;
      border: 2px solid #6b00ff;
      border-radius: 16px;
      padding: 25px;
      margin-bottom: 25px;
    }
    .title {
      font-size: 1.6em;
      margin: 0 0 12px 0;
      color: #00f0ff;
    }
    .outcomes {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
      gap: 14px;
      margin-top: 15px;
    }
    .outcome {
      background: #16213e;
      padding: 16px;
      border-radius: 10px;
      cursor: pointer;
      transition: all 0.3s;
      font-size: 1.1em;
    }
    .outcome:hover {
      background: #6b00ff;
      transform: scale(1.05);
    }
    .status {
      font-size: 0.95em;
      color: #00ff9d;
      margin-top: 10px;
    }
    .emoji {
      font-size: 3em;
      text-align: center;
      margin: 15px 0;
      animation: pop 0.6s;
    }
    @keyframes pop {
      0% { transform: scale(0.2); }
      50% { transform: scale(1.3); }
      100% { transform: scale(1); }
    }
    .footer {
      text-align: center;
      margin-top: 50px;
      color: #777;
    }
  </style>
</head>
<body>

  <div class="header">
    <h1>⏳ TimeCrystal</h1>
    <p>Retium Prediction Markets • Fun Mode</p>
  </div>

  <h2 style="text-align:center; color:#aaa;">July 3, 2026</h2>

  <!-- Crystal 1 -->
  <div class="crystal">
    <div class="title">🔥 Word War — Word of the Day</div>
    <p><strong>Which word will win today?</strong></p>
    <div class="outcomes">
      <div class="outcome" onclick="celebrate(this)">PrimeMesh — 42%</div>
      <div class="outcome" onclick="celebrate(this)">TimeCrystal — 31%</div>
      <div class="outcome" onclick="celebrate(this)">RAI — 27%</div>
    </div>
    <p class="status">Volume: 1,240 RTM • Closes in 14 hours</p>
  </div>

  <!-- Crystal 2 -->
  <div class="crystal">
    <div class="title">🌐 Daily Mesh</div>
    <p><strong>Discord Activity Today</strong></p>
    <div class="outcomes">
      <div class="outcome" onclick="celebrate(this)">New users: 12–25</div>
      <div class="outcome" onclick="celebrate(this)">Messages: 1,200–1,800</div>
      <div class="outcome" onclick="celebrate(this)">@RetiumChain mentions: > 80</div>
    </div>
    <p class="status">Volume: 890 RTM • Closes in 14 hours</p>
  </div>

  <!-- Crystal 3 -->
  <div class="crystal">
    <div class="title">⚙️ Chain Reaction</div>
    <p><strong>Multidimensional Crystal</strong></p>
    <div class="outcomes">
      <div class="outcome" onclick="celebrate(this)">If @Mr.Fox > 50 mentions → Will there be a RAI message tomorrow?</div>
      <div class="outcome" onclick="celebrate(this)">If “Validator” > 20 times → How many reactions on first mention?</div>
    </div>
    <p class="status">Volume: 670 RTM • Closes in 14 hours</p>
  </div>

  <div class="footer">
    <p>TimeCrystal Demo • Powered by PrimeMesh + RAI</p>
    <p>Test mode — for fun only</p>
  </div>

  <script>
    function celebrate(el) {
      const emojis = ['🚀', '🔥', '✨', '💎', '🧠', '⚡'];
      const randomEmoji = emojis[Math.floor(Math.random() * emojis.length)];

      const emojiDiv = document.createElement('div');
      emojiDiv.className = 'emoji';
      emojiDiv.textContent = randomEmoji;
      el.parentElement.appendChild(emojiDiv);

      setTimeout(() => emojiDiv.remove(), 1500);

      // Simple alert for fun
      if (Math.random() > 0.7) {
        alert("Nice choice! 🎉 The community is watching...");
      }
    }
  </script>

</body>
</html>