Hugging Face's logo

Spaces:
Uschi1000
/
nodesim
Running

App Files Community
Uschi1000 commited on
Commit
c3efa93
·
verified ·
1 Parent(s): b263fbd

die nft karten kann man nicht schließen weil kein button zum schließen da st

Browse files
Files changed (2) hide show
  1. README.md +8 -4
  2. index.html +967 -18
README.md CHANGED
@@ -1,10 +1,14 @@
1
  ---
2
- title: Nodesim Nft Gallery Fixer
3
- emoji: 📉
4
- colorFrom: indigo
5
  colorTo: purple
 
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
 
 
1
  ---
2
+ title: NODeSIM NFT Gallery Fixer 🚀
3
+ colorFrom: red
 
4
  colorTo: purple
5
+ emoji: 🐳
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite-v3
10
  ---
11
 
12
+ # Welcome to your new DeepSite project!
13
+ This project was created with [DeepSite](https://deepsite.hf.co).
14
+
index.html CHANGED
@@ -1,19 +1,968 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
19
  </html>
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="de">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>NODeSIM - App Prototyp & Pitch Deck</title>
7
+ <!-- Tailwind CSS CDN -->
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <!-- Chart.js CDN for interactive charts -->
10
+ <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
11
+ <!-- Phosphor Icons for a futuristic look -->
12
+ <script src="https://unpkg.com/@phosphor-icons/web@2.1.1/dist/p.js"></script>
13
+ <!-- Google Fonts for a futuristic look -->
14
+ <link href="https://fonts.googleapis.com/css2?family=VT323&family=Inter:wght@400;600;800&display=swap" rel="stylesheet">
15
+
16
+ <style>
17
+ /* Global Styles */
18
+ :root {
19
+ --neon-green: #39FF14;
20
+ --dark-bg: #0C0C0C;
21
+ --dark-card: #181818;
22
+ --glass-bg: rgba(24, 24, 24, 0.7);
23
+ }
24
+ body {
25
+ background-color: var(--dark-bg);
26
+ color: #F0F0F0;
27
+ font-family: 'Inter', sans-serif;
28
+ display: flex;
29
+ justify-content: center;
30
+ align-items: center;
31
+ min-height: 100vh;
32
+ }
33
+
34
+ /* Smartphone Container Simulation */
35
+ .smartphone-container {
36
+ width: 375px; /* Mobile width */
37
+ height: 667px; /* Mobile height */
38
+ background-color: var(--dark-bg);
39
+ box-shadow: 0 0 60px rgba(57, 255, 20, 0.5), 0 0 20px rgba(0, 0, 0, 0.8) inset;
40
+ border: 10px solid #000;
41
+ border-radius: 40px;
42
+ overflow: hidden;
43
+ position: relative;
44
+ transition: transform 0.6s ease-in-out, width 0.6s ease-in-out, height 0.6s ease-in-out;
45
+ transform-origin: center center;
46
+ }
47
+
48
+ /* Landscape Mode Simulation for Fullscreen Image */
49
+ .smartphone-container.landscape-mode {
50
+ width: 667px; /* Swap width/height */
51
+ height: 375px;
52
+ transform: rotate(90deg) translate(146px, -146px); /* Rotate 90deg and translate to stay centered */
53
+ box-shadow: 0 0 80px rgba(57, 255, 20, 0.7), 0 0 30px rgba(0, 0, 0, 0.9) inset;
54
+ }
55
+
56
+ /* Glassmorphism Effect */
57
+ .glass-card {
58
+ background-color: var(--glass-bg);
59
+ backdrop-filter: blur(8px);
60
+ border: 1px solid rgba(57, 255, 20, 0.3);
61
+ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.08);
62
+ }
63
+
64
+ /* Neon Green Accents */
65
+ .text-neon { color: var(--neon-green); }
66
+ .border-neon { border-color: var(--neon-green); }
67
+ .bg-neon { background-color: var(--neon-green); }
68
+ .shadow-neon { box-shadow: 0 0 15px rgba(57, 255, 20, 0.8); }
69
+
70
+ /* Main Screen Layout */
71
+ .app-screen {
72
+ height: calc(100% - 104px); /* Full height minus nav bar and top bar */
73
+ overflow-y: auto;
74
+ padding: 1rem;
75
+ display: none;
76
+ scrollbar-width: none; /* Firefox */
77
+ }
78
+ .app-screen::-webkit-scrollbar {
79
+ display: none; /* Chrome, Safari, Opera */
80
+ }
81
+
82
+ /* Pitch Deck Sidebar */
83
+ #pitch-deck-menu {
84
+ position: absolute;
85
+ top: 0;
86
+ left: 0;
87
+ width: 80%;
88
+ height: 100%;
89
+ background-color: var(--dark-bg);
90
+ transform: translateX(-100%);
91
+ transition: transform 0.3s ease-in-out;
92
+ z-index: 50;
93
+ padding: 1rem;
94
+ border-right: 1px solid var(--neon-green);
95
+ }
96
+ #pitch-deck-menu.open {
97
+ transform: translateX(0);
98
+ }
99
+
100
+ /* Nav Bar Styling */
101
+ .nav-button.active {
102
+ color: var(--neon-green);
103
+ transform: translateY(-2px);
104
+ text-shadow: 0 0 8px rgba(57, 255, 20, 0.8);
105
+ }
106
+
107
+ /* Modal Styling */
108
+ .modal {
109
+ position: fixed;
110
+ top: 0;
111
+ left: 0;
112
+ width: 100%;
113
+ height: 100%;
114
+ background-color: rgba(0, 0, 0, 0.95);
115
+ z-index: 100;
116
+ display: none;
117
+ justify-content: center;
118
+ align-items: center;
119
+ padding: 1rem;
120
+ }
121
+
122
+ /* Fullscreen Image Modal */
123
+ #fullscreen-image-modal {
124
+ position: absolute;
125
+ top: 0;
126
+ left: 0;
127
+ width: 100%;
128
+ height: 100%;
129
+ background-color: var(--dark-bg);
130
+ z-index: 60; /* Above regular screens but below nav bar (for the phone simulation) */
131
+ display: none;
132
+ }
133
+
134
+ /* Custom animation for buttons */
135
+ .btn-futuristic {
136
+ transition: all 0.2s;
137
+ }
138
+ .btn-futuristic:hover {
139
+ box-shadow: 0 0 10px rgba(57, 255, 20, 0.6);
140
+ transform: translateY(-1px);
141
+ }
142
+ </style>
143
+ </head>
144
+ <body class="p-4 md:p-8">
145
+
146
+ <div id="smartphone-container" class="smartphone-container">
147
+
148
+ <!-- Top Status Bar & Menu -->
149
+ <div class="h-10 px-4 flex items-center justify-between bg-black/50 border-b border-neon">
150
+ <button id="menu-btn" class="text-neon p-1 hover:text-white transition">
151
+ <ph-list-bold size="24" weight="bold"></ph-list-bold>
152
+ </button>
153
+ <span class="text-xs text-white">14:30</span>
154
+ <span class="text-neon text-xs flex items-center"><ph-wifi-high-bold size="18"></ph-wifi-high-bold> noDeSIM</span>
155
+ </div>
156
+
157
+ <!-- Pitch Deck / Sidebar Menu -->
158
+ <div id="pitch-deck-menu" class="overflow-y-auto">
159
+ <h2 class="text-xl text-neon mb-4 border-b border-neon pb-2">NODeSIM Pitch Deck</h2>
160
+ <div id="pitch-deck-content" class="space-y-4">
161
+ <!-- Pitch Deck Content rendered here by JS -->
162
+ </div>
163
+ <button id="close-menu-btn" class="mt-8 px-4 py-2 bg-neon text-black rounded-xl font-bold w-full btn-futuristic">SCHLIESSEN</button>
164
+ </div>
165
+
166
+ <!-- FULLSCREEN IMAGE MODAL (for the utility chart on NFT screen) -->
167
+ <div id="fullscreen-image-modal" class="hidden justify-center items-center">
168
+ <button id="close-image-modal-btn" class="absolute top-2 right-4 text-neon text-3xl font-bold z-10 p-2 glass-card rounded-full hover:shadow-neon transition duration-300">
169
+ <ph-x-bold size="24"></ph-x-bold>
170
+ </button>
171
+ <img id="fullscreen-image" src="" alt="NODeSIM Utility Chart" class="max-w-full max-h-full object-contain">
172
+ </div>
173
+
174
+ <!-- APP SCREENS -->
175
+
176
+ <!-- 1. Home Screen -->
177
+ <div id="home-screen" class="app-screen block space-y-4">
178
+ <h1 class="text-3xl font-extrabold text-neon pt-2 mb-4">Dashboard</h1>
179
+
180
+ <!-- Balance Card -->
181
+ <div class="glass-card p-4 rounded-xl shadow-neon/30">
182
+ <div class="flex justify-between items-center">
183
+ <p class="text-lg text-white/70">SIMCoin Balance</p>
184
+ <ph-wallet-bold size="28" class="text-neon"></ph-wallet-bold>
185
+ </div>
186
+ <p class="text-4xl font-mono text-neon mt-1">1,250.84 <span class="text-xl">SIMC</span></p>
187
+ <p class="text-sm text-white/50">~ $ 125.08 USD</p>
188
+ </div>
189
+
190
+ <!-- eSIM-NFT Utility Clarity -->
191
+ <div class="glass-card p-4 rounded-xl border-l-4 border-neon shadow-neon/30">
192
+ <p class="text-lg font-bold text-neon mb-2 flex items-center">
193
+ <ph-globe-stand-bold size="24" class="mr-2"></ph-globe-stand-bold> Ihr NFT: Schlüssel zum dezentralen Netz
194
+ </p>
195
+ <p class="text-sm text-white/80">
196
+ Ihr eSIM-NFT ist Ihr Eigentumsnachweis für dezentrale Konnektivität. Monetarisieren Sie Ihr Smartphone, indem Sie als "letzte Meile" für nahegelegene IoT-Geräte fungieren und dafür SIMCoins verdienen. Dieses Projekt wird durch den Launch von nur 10.000 NFTs finanziert – ein exklusiver Start in einem Markt von 6 Milliarden Nutzern.
197
+ </p>
198
+ </div>
199
+
200
+ <!-- Interactive Chart -->
201
+ <div class="glass-card p-4 rounded-xl h-48 shadow-neon/30">
202
+ <p class="text-sm font-semibold text-white/70 mb-2">Earnings & Data Usage (Letzte 7 Tage)</p>
203
+ <canvas id="simcoin-chart"></canvas>
204
+ </div>
205
+
206
+ <!-- Quick Access -->
207
+ <div class="grid grid-cols-4 gap-3 pt-2">
208
+ <button data-screen="wallet" class="quick-action-btn bg-black/50 text-white p-3 rounded-xl flex flex-col items-center btn-futuristic border border-neon/50 hover:bg-neon/10">
209
+ <ph-currency-eth-bold size="28" class="text-neon"></ph-currency-eth-bold>
210
+ <span class="text-xs mt-1">Wallet</span>
211
+ </button>
212
+ <button data-screen="nfts" class="quick-action-btn bg-black/50 text-white p-3 rounded-xl flex flex-col items-center btn-futuristic border border-neon/50 hover:bg-neon/10">
213
+ <ph-cards-bold size="28" class="text-neon"></ph-cards-bold>
214
+ <span class="text-xs mt-1">eSIM-NFTs</span>
215
+ </button>
216
+ <button data-screen="dao" class="quick-action-btn bg-black/50 text-white p-3 rounded-xl flex flex-col items-center btn-futuristic border border-neon/50 hover:bg-neon/10">
217
+ <ph-seal-check-bold size="28" class="text-neon"></ph-seal-check-bold>
218
+ <span class="text-xs mt-1">DAO Voting</span>
219
+ </button>
220
+ <button data-screen="connectivity" class="quick-action-btn bg-black/50 text-white p-3 rounded-xl flex flex-col items-center btn-futuristic border border-neon/50 hover:bg-neon/10">
221
+ <ph-link-bold size="28" class="text-neon"></ph-link-bold>
222
+ <span class="text-xs mt-1">Connectivity</span>
223
+ </button>
224
+ </div>
225
+ </div>
226
+
227
+ <!-- 2. Wallet Screen -->
228
+ <div id="wallet-screen" class="app-screen space-y-4">
229
+ <h1 class="text-3xl font-extrabold text-neon pt-2 mb-4">SIMCoin Wallet</h1>
230
+
231
+ <!-- Main Balance -->
232
+ <div class="glass-card p-4 rounded-xl text-center shadow-neon/30">
233
+ <p class="text-lg text-white/70">Aktuelles Guthaben</p>
234
+ <p class="text-5xl font-mono text-neon mt-1 font-bold">1,250.84</p>
235
+ <span class="text-xl text-white">SIMC</span>
236
+ </div>
237
+
238
+ <!-- Actions -->
239
+ <div class="grid grid-cols-3 gap-3">
240
+ <button class="bg-neon text-black p-3 rounded-xl flex flex-col items-center font-bold text-sm btn-futuristic">
241
+ <ph-arrow-square-out-bold size="24"></ph-arrow-square-out-bold> Senden
242
+ </button>
243
+ <button class="bg-black/50 text-neon p-3 rounded-xl flex flex-col items-center font-bold text-sm btn-futuristic border border-neon/50 hover:bg-neon/10">
244
+ <ph-arrow-square-in-bold size="24"></ph-arrow-square-in-bold> Empfangen
245
+ </button>
246
+ <button class="bg-black/50 text-neon p-3 rounded-xl flex flex-col items-center font-bold text-sm btn-futuristic border border-neon/50 hover:bg-neon/10">
247
+ <ph-link-simple-bold size="24"></ph-link-simple-bold> Redeem
248
+ </button>
249
+ </div>
250
+
251
+ <!-- Transaction History -->
252
+ <h2 class="text-xl text-neon border-b border-neon/50 pb-1 mt-6">Transaktionen</h2>
253
+ <div class="space-y-2 text-sm">
254
+ <!-- Mock Transactions -->
255
+ <div class="glass-card p-3 rounded-lg flex justify-between items-center">
256
+ <span class="text-white/80">Netzwerk Belohnung</span>
257
+ <span class="text-neon font-mono">+ 50.00 SIMC</span>
258
+ </div>
259
+ <div class="glass-card p-3 rounded-lg flex justify-between items-center">
260
+ <span class="text-white/80">Data-Abo gekauft</span>
261
+ <span class="text-red-500 font-mono">- 300.00 SIMC</span>
262
+ </div>
263
+ <div class="glass-card p-3 rounded-lg flex justify-between items-center">
264
+ <span class="text-white/80">Überweisung an NodeRunner</span>
265
+ <span class="text-red-500 font-mono">- 10.00 SIMC</span>
266
+ </div>
267
+ <div class="glass-card p-3 rounded-lg flex justify-between items-center">
268
+ <span class="text-white/80">Netzwerk Belohnung</span>
269
+ <span class="text-neon font-mono">+ 12.84 SIMC</span>
270
+ </div>
271
+ </div>
272
+ </div>
273
+
274
+ <!-- 3. NFTs Screen -->
275
+ <div id="nfts-screen" class="app-screen space-y-4">
276
+ <h1 class="text-3xl font-extrabold text-neon pt-2 mb-4">Meine eSIM-NFTs</h1>
277
+
278
+ <!-- NFT Collection Grid -->
279
+ <div id="nft-gallery" class="grid grid-cols-2 gap-4">
280
+ <!-- NFT Cards rendered here by JS -->
281
+ </div>
282
+
283
+ <button class="bg-neon text-black p-3 rounded-xl font-bold w-full btn-futuristic">
284
+ <ph-plus-circle-bold size="20" class="inline-block mr-1"></ph-plus-circle-bold> NEUES NFT MINTEN
285
+ </button>
286
+
287
+ <!-- Interactive Utility Chart Image (Mock Image) -->
288
+ <h2 class="text-xl text-neon border-b border-neon/50 pb-1 mt-6">NFT Utility Schema</h2>
289
+ <div class="glass-card p-2 rounded-xl cursor-pointer hover:shadow-neon/50 transition duration-300" id="utility-chart-preview">
290
+ <!-- Image Placeholder URL is used here -->
291
+ <img src="https://placehold.co/600x400/0C0C0C/39FF14?text=NODeSIM+Utility+Chart"
292
+ alt="Klicken zum Vergrößern"
293
+ data-full-src="https://placehold.co/900x600/0C0C0C/39FF14?text=NODeSIM+Utility+Chart+Vollbild"
294
+ class="w-full h-auto rounded-lg object-cover">
295
+ <p class="text-xs text-white/50 text-center mt-1">Klicken für Querformat-Ansicht / Detaillierte Utility</p>
296
+ </div>
297
+ </div>
298
+
299
+ <!-- 4. DAO Screen -->
300
+ <div id="dao-screen" class="app-screen space-y-4">
301
+ <h1 class="text-3xl font-extrabold text-neon pt-2 mb-4">DAO Governance</h1>
302
+ <p class="text-sm text-white/70">Nehmen Sie an Entscheidungen über die NODeSIM-Netzwerkentwicklung teil. Ihre eSIM-NFTs geben Ihnen Stimmrechte.</p>
303
+
304
+ <!-- Active Proposals -->
305
+ <h2 class="text-xl text-neon border-b border-neon/50 pb-1 mt-6">Aktive Vorschläge</h2>
306
+ <div class="space-y-3">
307
+ <div class="glass-card p-3 rounded-xl border-l-4 border-neon">
308
+ <p class="font-bold">PIP-005: Erhöhung der SIMCoin-Belohnung</p>
309
+ <div class="flex justify-between text-xs mt-1 text-white/70">
310
+ <span>Status: <span class="text-neon">Abstimmung läuft</span></span>
311
+ <span>Stimmen: 85% JA</span>
312
+ </div>
313
+ <button class="mt-2 w-full text-center text-sm py-1 bg-neon/10 text-neon rounded btn-futuristic hover:bg-neon/20">Abstimmen</button>
314
+ </div>
315
+ <div class="glass-card p-3 rounded-xl border-l-4 border-gray-500">
316
+ <p class="font-bold">PIP-006: Neue Layer-2-Integration</p>
317
+ <div class="flex justify-between text-xs mt-1 text-white/70">
318
+ <span>Status: <span class="text-gray-400">Diskussion</span></span>
319
+ <span>Stimmen: N/A</span>
320
+ </div>
321
+ <button class="mt-2 w-full text-center text-sm py-1 bg-white/10 text-white/50 rounded cursor-not-allowed">Details Ansehen</button>
322
+ </div>
323
+ </div>
324
+
325
+ <!-- Passed Proposals -->
326
+ <h2 class="text-xl text-neon border-b border-neon/50 pb-1 mt-6">Abgeschlossen</h2>
327
+ <div class="space-y-3">
328
+ <div class="glass-card p-3 rounded-xl border-l-4 border-green-500">
329
+ <p class="font-bold">PIP-004: Mobile Roaming-Partnerschaft</p>
330
+ <div class="flex justify-between text-xs mt-1 text-white/70">
331
+ <span>Status: <span class="text-green-500">Angenommen</span></span>
332
+ <span>Stimmen: 92% JA</span>
333
+ </div>
334
+ </div>
335
+ </div>
336
+ </div>
337
+
338
+ <!-- 5. Settings Screen -->
339
+ <div id="settings-screen" class="app-screen space-y-4">
340
+ <h1 class="text-3xl font-extrabold text-neon pt-2 mb-4">Einstellungen & Info</h1>
341
+
342
+ <!-- Account Section -->
343
+ <div class="glass-card p-4 rounded-xl space-y-2">
344
+ <h2 class="text-lg font-bold text-neon mb-2">Mein Konto</h2>
345
+ <p class="text-sm text-white/80">Wallet Adresse: 0x39F...F14</p>
346
+ <button class="text-sm text-neon underline hover:text-white transition">Konto verwalten</button>
347
+ </div>
348
+
349
+ <!-- Social Media & Links -->
350
+ <div class="glass-card p-4 rounded-xl space-y-2">
351
+ <h2 class="text-lg font-bold text-neon mb-2">Links & Community</h2>
352
+ <a href="https://de.linkedin.com/company/nodesim" target="_blank" class="flex items-center text-white/80 hover:text-neon transition text-sm">
353
+ <ph-linkedin-logo-bold size="20" class="mr-2 text-neon"></ph-linkedin-logo-bold> NODeSIM auf LinkedIn
354
+ </a>
355
+ <a href="https://x.com/NodesimApp" target="_blank" class="flex items-center text-white/80 hover:text-neon transition text-sm">
356
+ <ph-x-logo-bold size="20" class="mr-2 text-neon"></ph-x-logo-bold> NodesimApp (X/Twitter)
357
+ </a>
358
+ <a href="https://og.rarible.com/NODeSIM" target="_blank" class="flex items-center text-white/80 hover:text-neon transition text-sm">
359
+ <ph-storefront-bold size="20" class="mr-2 text-neon"></ph-storefront-bold> Rarible NFT Collection
360
+ </a>
361
+ <a href="https://nodesim.app" target="_blank" class="flex items-center text-white/80 hover:text-neon transition text-sm">
362
+ <ph-globe-bold size="20" class="mr-2 text-neon"></ph-globe-bold> Offizielle Website (UC)
363
+ </a>
364
+ <a href="https://x.com/i/status/1726728649280487909" target="_blank" class="flex items-center text-white/80 hover:text-neon transition text-sm">
365
+ <ph-video-bold size="20" class="mr-2 text-neon"></ph-video-bold> Video-Trailer (X)
366
+ </a>
367
+ </div>
368
+
369
+ <button class="bg-black/50 text-white/70 p-3 rounded-xl font-bold w-full btn-futuristic border border-neon/50 hover:bg-neon/10">
370
+ <ph-sign-out-bold size="20" class="inline-block mr-1"></ph-sign-out-bold> Ausloggen
371
+ </button>
372
+ </div>
373
+
374
+ <!-- 6. Connectivity Screen (NEU) -->
375
+ <div id="connectivity-screen" class="app-screen space-y-4">
376
+ <h1 class="text-3xl font-extrabold text-neon pt-2 mb-4">Konnektivitätsstatus</h1>
377
+ <p class="text-sm text-white/70">Echtzeit-Analyse Ihrer dezentralen Netzwerkverbindung.</p>
378
+
379
+ <div class="glass-card p-4 rounded-xl mt-6 space-y-4">
380
+ <div class="flex justify-between items-center">
381
+ <span class="text-white/80">Netzwerk-Status:</span>
382
+ <span class="text-neon font-bold flex items-center"><ph-check-circle-bold size="20" class="mr-1"></ph-check-circle-bold> Verbunden</span>
383
+ </div>
384
+ <div class="flex justify-between items-center">
385
+ <span class="text-white/80">Aktives Protokoll:</span>
386
+ <span class="text-white font-mono">PoD v1.2</span>
387
+ </div>
388
+ <div class="flex justify-between items-center">
389
+ <span class="text-white/80">Signalstärke:</span>
390
+ <span class="text-white font-bold">-75 dBm (Exzellent)</span>
391
+ </div>
392
+ <div class="flex justify-between items-center">
393
+ <span class="text-white/80">Latenz:</span>
394
+ <span class="text-white font-bold">25 ms</span>
395
+ </div>
396
+ <div class="flex justify-between items-center">
397
+ <span class="text-white/80">Verbundene Peers:</span>
398
+ <span class="text-white font-bold">128</span>
399
+ </div>
400
+ </div>
401
+
402
+ <div class="glass-card p-4 rounded-xl mt-4">
403
+ <h2 class="text-lg font-bold text-neon mb-2">Globale Abdeckung</h2>
404
+ <p class="text-sm text-white/80">Dank des dezentralen Netzwerks haben Sie potenziell in über 150 Ländern Zugang zu Konnektivitätspunkten.</p>
405
+ </div>
406
+ </div>
407
+ <!-- NFT DETAIL POP-UP MODAL -->
408
+ <div id="nft-detail-modal" class="modal fixed inset-0 flex-col">
409
+ <div class="glass-card p-6 rounded-xl w-11/12 max-w-md mx-auto relative">
410
+ <button id="close-nft-modal-btn" class="absolute top-3 right-3 text-neon hover:text-white transition">
411
+ <ph-x-circle-bold size="28"></ph-x-circle-bold>
412
+ </button>
413
+ <h2 id="nft-modal-title" class="text-2xl font-bold text-neon border-b border-neon/50 pb-2 mb-4"></h2>
414
+
415
+ <p id="nft-modal-eSim" class="text-lg font-mono text-white/80 mb-3"></p>
416
+
417
+ <div id="nft-modal-chart-container" class="h-32 mb-4">
418
+ <canvas id="nft-modal-chart"></canvas>
419
+ </div>
420
+
421
+ <div class="space-y-3">
422
+ <h3 class="text-xl font-semibold text-white">Einzigartigkeit:</h3>
423
+ <p id="nft-modal-description" class="text-sm text-white/70"></p>
424
+ <ul id="nft-modal-features" class="list-disc list-inside text-sm text-white/80 ml-2 space-y-1">
425
+ <!-- Features rendered here -->
426
+ </ul>
427
+ </div>
428
+ <button class="mt-4 w-full py-3 bg-neon text-black font-bold rounded-xl btn-futuristic hover:shadow-neon">
429
+ <ph-x-bold size="20" class="inline-block mr-1"></ph-x-bold> SCHLIESSEN
430
+ </button>
431
+ </div>
432
+ </div>
433
+ <!-- Bottom Navigation Bar -->
434
+ <nav class="h-16 flex justify-around items-center bg-black/80 border-t border-neon/50 backdrop-blur-sm">
435
+ <button data-screen="home" class="nav-button active flex flex-col items-center text-white/70 hover:text-neon transition text-xs">
436
+ <ph-house-bold size="24"></ph-house-bold> Home
437
+ </button>
438
+ <button data-screen="wallet" class="nav-button flex flex-col items-center text-white/70 hover:text-neon transition text-xs">
439
+ <ph-wallet-bold size="24"></ph-wallet-bold> Wallet
440
+ </button>
441
+ <button data-screen="nfts" class="nav-button flex flex-col items-center text-white/70 hover:text-neon transition text-xs">
442
+ <ph-cards-bold size="24"></ph-cards-bold> NFTs
443
+ </button>
444
+ <button data-screen="dao" class="nav-button flex flex-col items-center text-white/70 hover:text-neon transition text-xs">
445
+ <ph-seal-check-bold size="24"></ph-seal-check-bold> DAO
446
+ </button>
447
+ <button data-screen="settings" class="nav-button flex flex-col items-center text-white/70 hover:text-neon transition text-xs">
448
+ <ph-gear-six-bold size="24"></ph-gear-six-bold> Settings
449
+ </button>
450
+ </nav>
451
+
452
+ </div>
453
+
454
+ <script type="module">
455
+ // Global variables for Firebase Compliance (Required but not used for MOCK DATA)
456
+ const appId = typeof __app_id !== 'undefined' ? __app_id : 'default-app-id';
457
+ const firebaseConfig = typeof __firebase_config !== 'undefined' ? JSON.parse(__firebase_config) : {};
458
+
459
+ // Mock Data for the Prototyp / Pitch Deck
460
+ const mockData = {
461
+ SIMCoinBalance: 1250.84,
462
+ pitchDeck: [
463
+ {
464
+ title: "1. Finanzierung durch exklusiven NFT-Launch",
465
+ content: "Die Finanzierung des Projekts erfolgt durch den Verkauf der ersten Kollektion von **10.000 eSIM-NFTs**, die voraussichtlich über **1.600 ETH** generieren werden. Im Vergleich zu 6 Milliarden Smartphone-Nutzern weltweit ist dies ein extrem exklusiver Start, der das enorme Skalierungspotenzial aufzeigt. Die NFTs sind der Schlüssel zur Teilnahme und Monetarisierung im Netzwerk.",
466
+ icon: "rocket-launch-bold"
467
+ },
468
+ {
469
+ title: "2. Technologischer Vorreiter: eSIM & Blockchain",
470
+ content: "NODeSIM kombiniert eSIM-Technologie mit einem dezentralen Netzwerk (Proof-of-Diversity/PoD-Konsens). Dies gewährleistet höchste Sicherheit, Zensurresistenz und schafft ein Self-Sustainable, **Future-Proof** mobiles Ökosystem.",
471
+ icon: "cpu-bold"
472
+ },
473
+ {
474
+ title: "3. Dezentrale Monetarisierung",
475
+ content: "Nutzer verdienen **SIMCoins** durch die Bereitstellung von Netzwerkressourcen (z.B. IoT-Zugang). SIMCoins können gegen mobile Credits eingetauscht oder gehandelt werden. Sie sind aktiv Teil des Telekommunikations-Netzwerks.",
476
+ icon: "currency-circle-dollar-bold"
477
+ },
478
+ {
479
+ title: "4. Community-Governance (DAO)",
480
+ content: "Jeder eSIM-NFT-Besitzer erhält Stimmrechte in der **DAO**. Entscheidungen über Netzwerkausbau, Gebühren und Tokenomics werden dezentral und transparent von der Community getroffen. Dies fördert eine gerechte und diverse Teilnahme.",
481
+ icon: "users-three-bold"
482
+ },
483
+ {
484
+ title: "5. Multiple-Income-Streams",
485
+ content: "NODeSIM generiert Einnahmen durch diverse Kanäle: Initialer NFT-Verkauf (Primary Sale), Gebühren auf NFT-Zweitverkäufe (Royalty), Transaktionsgebühren im SIMCoin-Netzwerk und zukünftige Partnerschaften mit IoT- und Mobilfunkunternehmen.",
486
+ icon: "chart-line-up-bold"
487
+ },
488
+ {
489
+ title: "6. Real-World-Problem & Win-Win-Lösung",
490
+ content: "Wir lösen das Problem überhöhter Roaming-Gebühren und der zentralisierten Kontrolle über mobile Daten. **Vorteil für Nutzer**: Globale, günstige Konnektivität und Monetarisierung der eigenen Ressourcen. **Vorteil für das Ökosystem**: Ein stabiles, resilientes und schnell wachsendes dezentrales IoT-Netzwerk.",
491
+ icon: "check-circle-bold"
492
+ }
493
+ ],
494
+ NFTs: [
495
+ {
496
+ name: "Common",
497
+ eSimId: "eSIM C-Class",
498
+ rarity: "Common",
499
+ image: "https://placehold.co/150x150/A0A0A0/0C0C0C?text=COMMON",
500
+ description: "Der Standard-NFT für den Einstieg in das NODeSIM-Ökosystem. Bietet grundlegenden Netzwerkzugang und Belohnungen.",
501
+ chart: {
502
+ labels: ['DAO Power', 'SIMC Boost', 'Treasure Hunt'],
503
+ data: [25, 42, 20],
504
+ label: 'Common Utility Index'
505
+ },
506
+ features: [
507
+ "Inklusive Mobilfunknummer",
508
+ "SIMCoins in Credits umwandelbar",
509
+ "DAO-Stimmrecht (1x Stärke)",
510
+ "SIMCoin-Booster (1.5x)",
511
+ "Schatzsuche (2x Multiplikator)",
512
+ "Zugang zum privaten Discord"
513
+ ]
514
+ },
515
+ {
516
+ name: "Uncommon",
517
+ eSimId: "eSIM UC-Class",
518
+ rarity: "Uncommon",
519
+ image: "https://placehold.co/150x150/66C2A5/0C0C0C?text=UNCOMMON",
520
+ description: "Ein seltenerer NFT mit verbesserten Belohnungen für engagierte Netzwerkteilnehmer.",
521
+ chart: {
522
+ labels: ['DAO Power', 'SIMC Boost', 'Treasure Hunt'],
523
+ data: [25, 57, 40],
524
+ label: 'Uncommon Utility Index'
525
+ },
526
+ features: [
527
+ "Inklusive Mobilfunknummer",
528
+ "SIMCoins in Credits umwandelbar",
529
+ "DAO-Stimmrecht (1x Stärke)",
530
+ "SIMCoin-Booster (2x)",
531
+ "Schatzsuche (4x Multiplikator)",
532
+ "Zugang zum privaten Discord"
533
+ ]
534
+ },
535
+ {
536
+ name: "Rare",
537
+ eSimId: "eSIM R-Class",
538
+ rarity: "Rare",
539
+ image: "https://placehold.co/150x150/8DA0CB/0C0C0C?text=RARE",
540
+ description: "Dieser NFT bietet erhöhte Stimmkraft und Zugang zu exklusiven Events für Community-orientierte Nutzer.",
541
+ chart: {
542
+ labels: ['DAO Power', 'SIMC Boost', 'Treasure Hunt'],
543
+ data: [50, 64, 45],
544
+ label: 'Rare Utility Index'
545
+ },
546
+ features: [
547
+ "Inklusive Mobilfunknummer",
548
+ "SIMCoins in Credits umwandelbar",
549
+ "DAO-Stimmrecht (2x Stärke)",
550
+ "SIMCoin-Booster (2.25x)",
551
+ "Schatzsuche (4.5x Multiplikator)",
552
+ "Zugang zum privaten Discord",
553
+ "Exklusiver Zugang zu Events"
554
+ ]
555
+ },
556
+ {
557
+ name: "Epic",
558
+ eSimId: "eSIM E-Class",
559
+ rarity: "Epic",
560
+ image: "https://placehold.co/150x150/E78AC3/0C0C0C?text=EPIC",
561
+ description: "Ein leistungsstarker NFT für Power-User mit signifikant verbesserten Boostern und Multiplikatoren.",
562
+ chart: {
563
+ labels: ['DAO Power', 'SIMC Boost', 'Treasure Hunt'],
564
+ data: [50, 71, 50],
565
+ label: 'Epic Utility Index'
566
+ },
567
+ features: [
568
+ "Inklusive Mobilfunknummer",
569
+ "SIMCoins in Credits umwandelbar",
570
+ "DAO-Stimmrecht (2x Stärke)",
571
+ "SIMCoin-Booster (2.5x)",
572
+ "Schatzsuche (5x Multiplikator)",
573
+ "Zugang zum privaten Discord",
574
+ "Exklusiver Zugang zu Events"
575
+ ]
576
+ },
577
+ {
578
+ name: "Legendary",
579
+ eSimId: "eSIM L-Class",
580
+ rarity: "Legendary",
581
+ image: "https://placehold.co/150x150/FFD92F/0C0C0C?text=LEGEND",
582
+ description: "Verleiht hohe Stimmkraft in der DAO und exzellente Netzwerk-Belohnungen für treue Unterstützer.",
583
+ chart: {
584
+ labels: ['DAO Power', 'SIMC Boost', 'Treasure Hunt'],
585
+ data: [75, 78, 55],
586
+ label: 'Legendary Utility Index'
587
+ },
588
+ features: [
589
+ "Inklusive Mobilfunknummer",
590
+ "SIMCoins in Credits umwandelbar",
591
+ "DAO-Stimmrecht (3x Stärke)",
592
+ "SIMCoin-Booster (2.75x)",
593
+ "Schatzsuche (5.5x Multiplikator)",
594
+ "Zugang zum privaten Discord",
595
+ "Exklusiver Zugang zu Events"
596
+ ]
597
+ },
598
+ {
599
+ name: "Mythic",
600
+ eSimId: "eSIM M-Class",
601
+ rarity: "Mythic",
602
+ image: "https://placehold.co/150x150/E5C494/0C0C0C?text=MYTHIC",
603
+ description: "Ein mythischer NFT, der lebenslang kostenlose mobile Credits und starken Einfluss auf das Netzwerk gewährt.",
604
+ chart: {
605
+ labels: ['DAO Power', 'SIMC Boost', 'Treasure Hunt'],
606
+ data: [75, 85, 80],
607
+ label: 'Mythic Utility Index'
608
+ },
609
+ features: [
610
+ "Inklusive Mobilfunknummer",
611
+ "SIMCoins in Credits umwandelbar",
612
+ "DAO-Stimmrecht (3x Stärke)",
613
+ "SIMCoin-Booster (3x)",
614
+ "Schatzsuche (8x Multiplikator)",
615
+ "Zugang zum privaten Discord",
616
+ "Exklusiver Zugang zu Events",
617
+ "Lebenslang kostenlose Credits"
618
+ ]
619
+ },
620
+ {
621
+ name: "Ultra",
622
+ eSimId: "eSIM U-Class",
623
+ rarity: "Ultra",
624
+ image: "https://placehold.co/150x150/FC8D62/0C0C0C?text=ULTRA",
625
+ description: "Repräsentiert die höchste Stufe der Beteiligung mit maximaler Stimmkraft und Belohnungen.",
626
+ chart: {
627
+ labels: ['DAO Power', 'SIMC Boost', 'Treasure Hunt'],
628
+ data: [100, 100, 100],
629
+ label: 'Ultra Utility Index'
630
+ },
631
+ features: [
632
+ "Inklusive Mobilfunknummer",
633
+ "SIMCoins in Credits umwandelbar",
634
+ "DAO-Stimmrecht (4x Stärke)",
635
+ "SIMCoin-Booster (3.5x)",
636
+ "Schatzsuche (10x Multiplikator)",
637
+ "Zugang zum privaten Discord",
638
+ "Exklusiver Zugang zu Events",
639
+ "Lebenslang kostenlose Credits"
640
+ ]
641
+ },
642
+ {
643
+ name: "Ultra Rare",
644
+ eSimId: "eSIM UR-Class",
645
+ rarity: "Ultra Rare",
646
+ image: "https://placehold.co/150x150/A6D854/0C0C0C?text=ULTRA+RARE",
647
+ description: "Identisch zum Ultra NFT, aber mit extrem limitierter Auflage, was ihn zu einem begehrten Sammlerstück macht.",
648
+ chart: {
649
+ labels: ['DAO Power', 'SIMC Boost', 'Treasure Hunt'],
650
+ data: [100, 100, 100],
651
+ label: 'Ultra Rare Utility Index'
652
+ },
653
+ features: [
654
+ "Inklusive Mobilfunknummer",
655
+ "SIMCoins in Credits umwandelbar",
656
+ "DAO-Stimmrecht (4x Stärke)",
657
+ "SIMCoin-Booster (3.5x)",
658
+ "Schatzsuche (10x Multiplikator)",
659
+ "Zugang zum privaten Discord",
660
+ "Exklusiver Zugang zu Events",
661
+ "Lebenslang kostenlose Credits"
662
+ ]
663
+ }
664
+ ]
665
+ };
666
+
667
+ // --- Firebase/Auth Setup (For Compliance) ---
668
+ // This is necessary for the Canvas environment but is not used to fetch mock data.
669
+ import { initializeApp } from "https://www.gstatic.com/firebasejs/11.6.1/firebase-app.js";
670
+ import { getAuth, signInAnonymously, signInWithCustomToken } from "https://www.gstatic.com/firebasejs/11.6.1/firebase-auth.js";
671
+ import { getFirestore } from "https://www.gstatic.com/firebasejs/11.6.1/firebase-firestore.js";
672
+
673
+ const app = Object.keys(firebaseConfig).length > 0 ? initializeApp(firebaseConfig) : null;
674
+ const db = app ? getFirestore(app) : null;
675
+ const auth = app ? getAuth(app) : null;
676
+
677
+ if (auth) {
678
+ const initialAuthToken = typeof __initial_auth_token !== 'undefined' ? __initial_auth_token : null;
679
+ if (initialAuthToken) {
680
+ signInWithCustomToken(auth, initialAuthToken).catch(console.error);
681
+ } else {
682
+ signInAnonymously(auth).catch(console.error);
683
+ }
684
+ }
685
+ // ---------------------------------------------
686
+
687
+
688
+ let simcoinChartInstance = null;
689
+ let nftChartInstance = null;
690
+
691
+ /**
692
+ * Hauptfunktion zum Wechseln des Bildschirms
693
+ * @param {string} screenId - ID des anzuzeigenden Bildschirms (z.B. 'home', 'nfts')
694
+ */
695
+ function showScreen(screenId) {
696
+ const screens = document.querySelectorAll('.app-screen');
697
+ screens.forEach(screen => {
698
+ screen.style.display = 'none';
699
+ });
700
+ document.getElementById(`${screenId}-screen`).style.display = 'block';
701
+
702
+ // Nav Bar Button Status aktualisieren
703
+ document.querySelectorAll('.nav-button').forEach(btn => {
704
+ btn.classList.remove('active');
705
+ if (btn.getAttribute('data-screen') === screenId) {
706
+ btn.classList.add('active');
707
+ }
708
+ });
709
+
710
+ // Spezielle Initialisierung für den Home Screen Chart
711
+ if (screenId === 'home') {
712
+ if (!simcoinChartInstance) {
713
+ initializeHomeChart();
714
+ }
715
+ }
716
+
717
+ // Sicherstellen, dass das Pitch Deck geschlossen ist
718
+ document.getElementById('pitch-deck-menu').classList.remove('open');
719
+ }
720
+
721
+ /** Initialisiert das Chart.js-Diagramm auf dem Home Screen. */
722
+ function initializeHomeChart() {
723
+ const ctx = document.getElementById('simcoin-chart').getContext('2d');
724
+
725
+ simcoinChartInstance = new Chart(ctx, {
726
+ type: 'line',
727
+ data: {
728
+ labels: ['Mo', 'Di', 'Mi', 'Do', 'Fr', 'Sa', 'So'],
729
+ datasets: [
730
+ {
731
+ label: 'SIMC Verdient',
732
+ data: [50, 75, 60, 90, 80, 110, 100],
733
+ borderColor: 'var(--neon-green)',
734
+ backgroundColor: 'rgba(57, 255, 20, 0.1)',
735
+ borderWidth: 2,
736
+ tension: 0.4,
737
+ fill: true,
738
+ pointBackgroundColor: 'var(--neon-green)'
739
+ },
740
+ {
741
+ label: 'Datenverbrauch (GB)',
742
+ data: [1.2, 0.9, 1.5, 1.1, 1.3, 0.8, 1.0],
743
+ borderColor: '#00FFFF',
744
+ backgroundColor: 'rgba(0, 255, 255, 0.1)',
745
+ borderWidth: 2,
746
+ tension: 0.4,
747
+ fill: false,
748
+ yAxisID: 'y1',
749
+ pointBackgroundColor: '#00FFFF'
750
+ }
751
+ ]
752
+ },
753
+ options: {
754
+ responsive: true,
755
+ maintainAspectRatio: false,
756
+ scales: {
757
+ y: {
758
+ beginAtZero: true,
759
+ title: { display: false, text: 'SIMC' },
760
+ ticks: { color: 'var(--neon-green)' },
761
+ grid: { color: 'rgba(57, 255, 20, 0.1)' }
762
+ },
763
+ y1: {
764
+ position: 'right',
765
+ title: { display: false, text: 'GB' },
766
+ ticks: { color: '#00FFFF' },
767
+ grid: { drawOnChartArea: false } // Nur Gitterlinien von Y-Achse
768
+ },
769
+ x: {
770
+ ticks: { color: 'white' },
771
+ grid: { color: 'rgba(57, 255, 20, 0.1)' }
772
+ }
773
+ },
774
+ plugins: {
775
+ legend: {
776
+ display: true,
777
+ labels: { color: 'white', boxWidth: 10 }
778
+ },
779
+ tooltip: {
780
+ backgroundColor: 'rgba(0, 0, 0, 0.8)',
781
+ titleColor: 'var(--neon-green)',
782
+ bodyColor: 'white',
783
+ borderColor: 'var(--neon-green)',
784
+ borderWidth: 1
785
+ }
786
+ }
787
+ }
788
+ });
789
+ }
790
+
791
+ /** Rendert die NFT-Karten und fügt Event-Listener hinzu. */
792
+ function renderNfts() {
793
+ const gallery = document.getElementById('nft-gallery');
794
+ gallery.innerHTML = ''; // Vorherige Karten entfernen
795
+
796
+ mockData.NFTs.forEach((nft, index) => {
797
+ const card = document.createElement('div');
798
+ card.className = 'glass-card p-3 rounded-xl flex flex-col items-center text-center cursor-pointer border-l-4 border-neon/70 hover:shadow-neon/50 transition duration-300';
799
+ card.innerHTML = `
800
+ <img src="${nft.image}" alt="${nft.name}" class="w-20 h-20 rounded-lg mb-2 object-cover border border-neon">
801
+ <p class="text-lg font-bold text-neon">${nft.name}</p>
802
+ <p class="text-sm text-white/70">${nft.rarity}</p>
803
+ <p class="text-xs font-mono text-white/50 mt-1">${nft.eSimId}</p>
804
+ `;
805
+
806
+ // Klick-Handler zum Öffnen des Modals
807
+ card.addEventListener('click', () => showNftDetailModal(index));
808
+ gallery.appendChild(card);
809
+ });
810
+ }
811
+
812
+ /** Zeigt das NFT-Detail-Modal an. */
813
+ function showNftDetailModal(index) {
814
+ const nft = mockData.NFTs[index];
815
+ document.getElementById('nft-modal-title').textContent = nft.name;
816
+ document.getElementById('nft-modal-eSim').textContent = `eSIM ID: ${nft.eSimId}`;
817
+ document.getElementById('nft-modal-description').textContent = nft.description;
818
+
819
+ // Features rendern
820
+ const featuresList = document.getElementById('nft-modal-features');
821
+ featuresList.innerHTML = nft.features.map(f => `<li class="text-white/80"><ph-check-square-bold size="16" class="inline-block text-neon mr-1"></ph-check-square-bold> ${f}</li>`).join('');
822
+
823
+ // Altes Chart zerstören, falls vorhanden
824
+ if (nftChartInstance) {
825
+ nftChartInstance.destroy();
826
+ }
827
+
828
+ // Neues Chart erstellen
829
+ const ctx = document.getElementById('nft-modal-chart').getContext('2d');
830
+ nftChartInstance = new Chart(ctx, {
831
+ type: 'radar',
832
+ data: {
833
+ labels: nft.chart.labels,
834
+ datasets: [{
835
+ label: nft.chart.label,
836
+ data: nft.chart.data,
837
+ backgroundColor: 'rgba(57, 255, 20, 0.2)',
838
+ borderColor: 'var(--neon-green)',
839
+ pointBackgroundColor: 'var(--neon-green)',
840
+ pointBorderColor: '#fff',
841
+ pointHoverBackgroundColor: '#fff',
842
+ pointHoverBorderColor: 'var(--neon-green)'
843
+ }]
844
+ },
845
+ options: {
846
+ responsive: true,
847
+ maintainAspectRatio: false,
848
+ scales: {
849
+ r: {
850
+ angleLines: { color: 'rgba(57, 255, 20, 0.3)' },
851
+ grid: { color: 'rgba(57, 255, 20, 0.3)' },
852
+ pointLabels: { color: 'white' },
853
+ ticks: { display: false, backdropColor: 'var(--glass-bg)' },
854
+ suggestedMin: 0,
855
+ suggestedMax: 100
856
+ }
857
+ },
858
+ plugins: {
859
+ legend: { display: false }
860
+ }
861
+ }
862
+ });
863
+
864
+ document.getElementById('nft-detail-modal').style.display = 'flex';
865
+ }
866
+
867
+ /** Rendert den Pitch Deck Inhalt. */
868
+ function renderPitchDeck() {
869
+ const contentDiv = document.getElementById('pitch-deck-content');
870
+ contentDiv.innerHTML = mockData.pitchDeck.map(item => `
871
+ <div class="glass-card p-3 rounded-xl border-l-4 border-neon/70">
872
+ <h3 class="text-md font-bold text-neon flex items-center mb-1">
873
+ <ph-${item.icon} size="20" class="mr-2"></ph-${item.icon}> ${item.title}
874
+ </h3>
875
+ <p class="text-xs text-white/80">${item.content}</p>
876
+ </div>
877
+ `).join('');
878
+ }
879
+
880
+ // --- Event Listener Setup ---
881
+ document.addEventListener('DOMContentLoaded', () => {
882
+ // Initialer Startbildschirm
883
+ showScreen('home');
884
+ renderNfts();
885
+ renderPitchDeck();
886
+
887
+ // Navigations-Buttons
888
+ document.querySelectorAll('.nav-button').forEach(button => {
889
+ button.addEventListener('click', (e) => {
890
+ const screen = e.currentTarget.getAttribute('data-screen');
891
+ showScreen(screen);
892
+ });
893
+ });
894
+
895
+ // Quick-Action-Buttons auf Home-Screen
896
+ document.querySelectorAll('.quick-action-btn').forEach(button => {
897
+ button.addEventListener('click', (e) => {
898
+ const screen = e.currentTarget.getAttribute('data-screen');
899
+ showScreen(screen);
900
+ });
901
+ });
902
+
903
+ // Pitch Deck Menu Toggle
904
+ const menuBtn = document.getElementById('menu-btn');
905
+ const closeMenuBtn = document.getElementById('close-menu-btn');
906
+ const pitchDeckMenu = document.getElementById('pitch-deck-menu');
907
+
908
+ menuBtn.addEventListener('click', () => {
909
+ pitchDeckMenu.classList.toggle('open');
910
+ });
911
+ closeMenuBtn.addEventListener('click', () => {
912
+ pitchDeckMenu.classList.remove('open');
913
+ });
914
+
915
+ // NFT Modal Close
916
+ document.getElementById('close-nft-modal-btn').addEventListener('click', () => {
917
+ document.getElementById('nft-detail-modal').style.display = 'none';
918
+ });
919
+
920
+
921
+ // --- Fullscreen Image / Rotation Logic ---
922
+ const smartphoneContainer = document.getElementById('smartphone-container');
923
+ const utilityChartPreview = document.getElementById('utility-chart-preview');
924
+ const fullscreenImageModal = document.getElementById('fullscreen-image-modal');
925
+ const fullscreenImage = document.getElementById('fullscreen-image');
926
+ const closeImageModalBtn = document.getElementById('close-image-modal-btn');
927
+
928
+ utilityChartPreview.addEventListener('click', () => {
929
+ const imgSrc = utilityChartPreview.querySelector('img').getAttribute('data-full-src');
930
+ fullscreenImage.src = imgSrc;
931
+
932
+ // 1. Smartphone-Container in den Landscape-Modus versetzen
933
+ smartphoneContainer.classList.add('landscape-mode');
934
+
935
+ // 2. Fullscreen Modal anzeigen
936
+ fullscreenImageModal.style.display = 'flex';
937
+
938
+ // 3. Andere App-Screens ausblenden, um den Fokus auf das Bild zu legen
939
+ document.querySelectorAll('.app-screen').forEach(screen => screen.style.display = 'none');
940
+
941
+ // 4. Nav Bar ausblenden, um das immersive Erlebnis zu simulieren
942
+ document.querySelector('nav').style.display = 'none';
943
+ document.querySelector('.h-10').style.display = 'none'; // Top bar ausblenden
944
+ });
945
+
946
+ closeImageModalBtn.addEventListener('click', () => {
947
+ // 1. Fullscreen Modal ausblenden
948
+ fullscreenImageModal.style.display = 'none';
949
+
950
+ // 2. Smartphone-Container in den Portrait-Modus zurückversetzen
951
+ smartphoneContainer.classList.remove('landscape-mode');
952
+
953
+ // 3. Nav Bar und Top Bar wieder einblenden
954
+ document.querySelector('nav').style.display = 'flex';
955
+ document.querySelector('.h-10').style.display = 'flex';
956
+
957
+ // 4. Zurück zum NFT-Screen navigieren
958
+ showScreen('nfts');
959
+ });
960
+ });
961
+
962
+ </script>
963
+ </body>
964
  </html>
965
+
966
+
967
+
968
+