|
|
<!DOCTYPE html> |
|
|
<html lang="de"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>NODeSIM - App Prototyp & Pitch Deck</title> |
|
|
|
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script> |
|
|
|
|
|
<script src="https://unpkg.com/@phosphor-icons/web@2.1.1/dist/p.js"></script> |
|
|
|
|
|
<link href="https://fonts.googleapis.com/css2?family=VT323&family=Inter:wght@400;600;800&display=swap" rel="stylesheet"> |
|
|
|
|
|
<style> |
|
|
|
|
|
:root { |
|
|
--neon-green: #39FF14; |
|
|
--dark-bg: #0C0C0C; |
|
|
--dark-card: #181818; |
|
|
--glass-bg: rgba(24, 24, 24, 0.7); |
|
|
} |
|
|
body { |
|
|
background-color: var(--dark-bg); |
|
|
color: #F0F0F0; |
|
|
font-family: 'Inter', sans-serif; |
|
|
display: flex; |
|
|
justify-content: center; |
|
|
align-items: center; |
|
|
min-height: 100vh; |
|
|
} |
|
|
|
|
|
|
|
|
.smartphone-container { |
|
|
width: 375px; |
|
|
height: 667px; |
|
|
background-color: var(--dark-bg); |
|
|
box-shadow: 0 0 60px rgba(57, 255, 20, 0.5), 0 0 20px rgba(0, 0, 0, 0.8) inset; |
|
|
border: 10px solid #000; |
|
|
border-radius: 40px; |
|
|
overflow: hidden; |
|
|
position: relative; |
|
|
transition: transform 0.6s ease-in-out, width 0.6s ease-in-out, height 0.6s ease-in-out; |
|
|
transform-origin: center center; |
|
|
} |
|
|
|
|
|
|
|
|
.smartphone-container.landscape-mode { |
|
|
width: 667px; |
|
|
height: 375px; |
|
|
transform: rotate(90deg) translate(146px, -146px); |
|
|
box-shadow: 0 0 80px rgba(57, 255, 20, 0.7), 0 0 30px rgba(0, 0, 0, 0.9) inset; |
|
|
} |
|
|
|
|
|
|
|
|
.glass-card { |
|
|
background-color: var(--glass-bg); |
|
|
backdrop-filter: blur(8px); |
|
|
border: 1px solid rgba(57, 255, 20, 0.3); |
|
|
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.08); |
|
|
} |
|
|
|
|
|
|
|
|
.text-neon { color: var(--neon-green); } |
|
|
.border-neon { border-color: var(--neon-green); } |
|
|
.bg-neon { background-color: var(--neon-green); } |
|
|
.shadow-neon { box-shadow: 0 0 15px rgba(57, 255, 20, 0.8); } |
|
|
|
|
|
|
|
|
.app-screen { |
|
|
height: calc(100% - 104px); |
|
|
overflow-y: auto; |
|
|
padding: 1rem; |
|
|
display: none; |
|
|
scrollbar-width: none; |
|
|
} |
|
|
.app-screen::-webkit-scrollbar { |
|
|
display: none; |
|
|
} |
|
|
|
|
|
|
|
|
#pitch-deck-menu { |
|
|
position: absolute; |
|
|
top: 0; |
|
|
left: 0; |
|
|
width: 80%; |
|
|
height: 100%; |
|
|
background-color: var(--dark-bg); |
|
|
transform: translateX(-100%); |
|
|
transition: transform 0.3s ease-in-out; |
|
|
z-index: 50; |
|
|
padding: 1rem; |
|
|
border-right: 1px solid var(--neon-green); |
|
|
} |
|
|
#pitch-deck-menu.open { |
|
|
transform: translateX(0); |
|
|
} |
|
|
|
|
|
|
|
|
.nav-button.active { |
|
|
color: var(--neon-green); |
|
|
transform: translateY(-2px); |
|
|
text-shadow: 0 0 8px rgba(57, 255, 20, 0.8); |
|
|
} |
|
|
|
|
|
|
|
|
.modal { |
|
|
position: fixed; |
|
|
top: 0; |
|
|
left: 0; |
|
|
width: 100%; |
|
|
height: 100%; |
|
|
background-color: rgba(0, 0, 0, 0.95); |
|
|
z-index: 100; |
|
|
display: none; |
|
|
justify-content: center; |
|
|
align-items: center; |
|
|
padding: 1rem; |
|
|
} |
|
|
|
|
|
|
|
|
#fullscreen-image-modal { |
|
|
position: absolute; |
|
|
top: 0; |
|
|
left: 0; |
|
|
width: 100%; |
|
|
height: 100%; |
|
|
background-color: var(--dark-bg); |
|
|
z-index: 60; |
|
|
display: none; |
|
|
} |
|
|
|
|
|
|
|
|
.btn-futuristic { |
|
|
transition: all 0.2s; |
|
|
} |
|
|
.btn-futuristic:hover { |
|
|
box-shadow: 0 0 10px rgba(57, 255, 20, 0.6); |
|
|
transform: translateY(-1px); |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="p-4 md:p-8"> |
|
|
|
|
|
<div id="smartphone-container" class="smartphone-container"> |
|
|
|
|
|
|
|
|
<div class="h-10 px-4 flex items-center justify-between bg-black/50 border-b border-neon"> |
|
|
<button id="menu-btn" class="text-neon p-1 hover:text-white transition"> |
|
|
<ph-list-bold size="24" weight="bold"></ph-list-bold> |
|
|
</button> |
|
|
<span class="text-xs text-white">14:30</span> |
|
|
<span class="text-neon text-xs flex items-center"><ph-wifi-high-bold size="18"></ph-wifi-high-bold> noDeSIM</span> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="pitch-deck-menu" class="overflow-y-auto"> |
|
|
<h2 class="text-xl text-neon mb-4 border-b border-neon pb-2">NODeSIM Pitch Deck</h2> |
|
|
<div id="pitch-deck-content" class="space-y-4"> |
|
|
|
|
|
</div> |
|
|
<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> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="fullscreen-image-modal" class="hidden justify-center items-center"> |
|
|
<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"> |
|
|
<ph-x-bold size="24"></ph-x-bold> |
|
|
</button> |
|
|
<img id="fullscreen-image" src="" alt="NODeSIM Utility Chart" class="max-w-full max-h-full object-contain"> |
|
|
</div> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<div id="home-screen" class="app-screen block space-y-4"> |
|
|
<h1 class="text-3xl font-extrabold text-neon pt-2 mb-4">Dashboard</h1> |
|
|
|
|
|
|
|
|
<div class="glass-card p-4 rounded-xl shadow-neon/30"> |
|
|
<div class="flex justify-between items-center"> |
|
|
<p class="text-lg text-white/70">SIMCoin Balance</p> |
|
|
<ph-wallet-bold size="28" class="text-neon"></ph-wallet-bold> |
|
|
</div> |
|
|
<p class="text-4xl font-mono text-neon mt-1">1,250.84 <span class="text-xl">SIMC</span></p> |
|
|
<p class="text-sm text-white/50">~ $ 125.08 USD</p> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="glass-card p-4 rounded-xl border-l-4 border-neon shadow-neon/30"> |
|
|
<p class="text-lg font-bold text-neon mb-2 flex items-center"> |
|
|
<ph-globe-stand-bold size="24" class="mr-2"></ph-globe-stand-bold> Ihr NFT: Schlüssel zum dezentralen Netz |
|
|
</p> |
|
|
<p class="text-sm text-white/80"> |
|
|
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. |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="glass-card p-4 rounded-xl h-48 shadow-neon/30"> |
|
|
<p class="text-sm font-semibold text-white/70 mb-2">Earnings & Data Usage (Letzte 7 Tage)</p> |
|
|
<canvas id="simcoin-chart"></canvas> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="grid grid-cols-4 gap-3 pt-2"> |
|
|
<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"> |
|
|
<ph-currency-eth-bold size="28" class="text-neon"></ph-currency-eth-bold> |
|
|
<span class="text-xs mt-1">Wallet</span> |
|
|
</button> |
|
|
<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"> |
|
|
<ph-cards-bold size="28" class="text-neon"></ph-cards-bold> |
|
|
<span class="text-xs mt-1">eSIM-NFTs</span> |
|
|
</button> |
|
|
<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"> |
|
|
<ph-seal-check-bold size="28" class="text-neon"></ph-seal-check-bold> |
|
|
<span class="text-xs mt-1">DAO Voting</span> |
|
|
</button> |
|
|
<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"> |
|
|
<ph-link-bold size="28" class="text-neon"></ph-link-bold> |
|
|
<span class="text-xs mt-1">Connectivity</span> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="wallet-screen" class="app-screen space-y-4"> |
|
|
<h1 class="text-3xl font-extrabold text-neon pt-2 mb-4">SIMCoin Wallet</h1> |
|
|
|
|
|
|
|
|
<div class="glass-card p-4 rounded-xl text-center shadow-neon/30"> |
|
|
<p class="text-lg text-white/70">Aktuelles Guthaben</p> |
|
|
<p class="text-5xl font-mono text-neon mt-1 font-bold">1,250.84</p> |
|
|
<span class="text-xl text-white">SIMC</span> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="grid grid-cols-3 gap-3"> |
|
|
<button class="bg-neon text-black p-3 rounded-xl flex flex-col items-center font-bold text-sm btn-futuristic"> |
|
|
<ph-arrow-square-out-bold size="24"></ph-arrow-square-out-bold> Senden |
|
|
</button> |
|
|
<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"> |
|
|
<ph-arrow-square-in-bold size="24"></ph-arrow-square-in-bold> Empfangen |
|
|
</button> |
|
|
<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"> |
|
|
<ph-link-simple-bold size="24"></ph-link-simple-bold> Redeem |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
|
|
|
<h2 class="text-xl text-neon border-b border-neon/50 pb-1 mt-6">Transaktionen</h2> |
|
|
<div class="space-y-2 text-sm"> |
|
|
|
|
|
<div class="glass-card p-3 rounded-lg flex justify-between items-center"> |
|
|
<span class="text-white/80">Netzwerk Belohnung</span> |
|
|
<span class="text-neon font-mono">+ 50.00 SIMC</span> |
|
|
</div> |
|
|
<div class="glass-card p-3 rounded-lg flex justify-between items-center"> |
|
|
<span class="text-white/80">Data-Abo gekauft</span> |
|
|
<span class="text-red-500 font-mono">- 300.00 SIMC</span> |
|
|
</div> |
|
|
<div class="glass-card p-3 rounded-lg flex justify-between items-center"> |
|
|
<span class="text-white/80">Überweisung an NodeRunner</span> |
|
|
<span class="text-red-500 font-mono">- 10.00 SIMC</span> |
|
|
</div> |
|
|
<div class="glass-card p-3 rounded-lg flex justify-between items-center"> |
|
|
<span class="text-white/80">Netzwerk Belohnung</span> |
|
|
<span class="text-neon font-mono">+ 12.84 SIMC</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="nfts-screen" class="app-screen space-y-4"> |
|
|
<h1 class="text-3xl font-extrabold text-neon pt-2 mb-4">Meine eSIM-NFTs</h1> |
|
|
|
|
|
|
|
|
<div id="nft-gallery" class="grid grid-cols-2 gap-4"> |
|
|
|
|
|
</div> |
|
|
|
|
|
<button class="bg-neon text-black p-3 rounded-xl font-bold w-full btn-futuristic"> |
|
|
<ph-plus-circle-bold size="20" class="inline-block mr-1"></ph-plus-circle-bold> NEUES NFT MINTEN |
|
|
</button> |
|
|
|
|
|
|
|
|
<h2 class="text-xl text-neon border-b border-neon/50 pb-1 mt-6">NFT Utility Schema</h2> |
|
|
<div class="glass-card p-2 rounded-xl cursor-pointer hover:shadow-neon/50 transition duration-300" id="utility-chart-preview"> |
|
|
|
|
|
<img src="https://huggingface.co/spaces/Uschi1000/nodesim-nft-gallery-fixer/resolve/main/images/NODeSIM%20eSIM-NFT%20Utility.png" |
|
|
alt="Klicken zum Vergrößern" |
|
|
data-full-src="https://huggingface.co/spaces/Uschi1000/nodesim-nft-gallery-fixer/resolve/main/images/NODeSIM%20eSIM-NFT%20Utility.png" |
|
|
class="w-full h-auto rounded-lg object-cover"> |
|
|
<p class="text-xs text-white/50 text-center mt-1">Klicken für Querformat-Ansicht / Detaillierte Utility</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="dao-screen" class="app-screen space-y-4"> |
|
|
<h1 class="text-3xl font-extrabold text-neon pt-2 mb-4">DAO Governance</h1> |
|
|
<p class="text-sm text-white/70">Nehmen Sie an Entscheidungen über die NODeSIM-Netzwerkentwicklung teil. Ihre eSIM-NFTs geben Ihnen Stimmrechte.</p> |
|
|
|
|
|
|
|
|
<h2 class="text-xl text-neon border-b border-neon/50 pb-1 mt-6">Aktive Vorschläge</h2> |
|
|
<div class="space-y-3"> |
|
|
<div class="glass-card p-3 rounded-xl border-l-4 border-neon"> |
|
|
<p class="font-bold">PIP-005: Erhöhung der SIMCoin-Belohnung</p> |
|
|
<div class="flex justify-between text-xs mt-1 text-white/70"> |
|
|
<span>Status: <span class="text-neon">Abstimmung läuft</span></span> |
|
|
<span>Stimmen: 85% JA</span> |
|
|
</div> |
|
|
<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> |
|
|
</div> |
|
|
<div class="glass-card p-3 rounded-xl border-l-4 border-gray-500"> |
|
|
<p class="font-bold">PIP-006: Neue Layer-2-Integration</p> |
|
|
<div class="flex justify-between text-xs mt-1 text-white/70"> |
|
|
<span>Status: <span class="text-gray-400">Diskussion</span></span> |
|
|
<span>Stimmen: N/A</span> |
|
|
</div> |
|
|
<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> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<h2 class="text-xl text-neon border-b border-neon/50 pb-1 mt-6">Abgeschlossen</h2> |
|
|
<div class="space-y-3"> |
|
|
<div class="glass-card p-3 rounded-xl border-l-4 border-green-500"> |
|
|
<p class="font-bold">PIP-004: Mobile Roaming-Partnerschaft</p> |
|
|
<div class="flex justify-between text-xs mt-1 text-white/70"> |
|
|
<span>Status: <span class="text-green-500">Angenommen</span></span> |
|
|
<span>Stimmen: 92% JA</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="settings-screen" class="app-screen space-y-4"> |
|
|
<h1 class="text-3xl font-extrabold text-neon pt-2 mb-4">Einstellungen & Info</h1> |
|
|
|
|
|
|
|
|
<div class="glass-card p-4 rounded-xl space-y-2"> |
|
|
<h2 class="text-lg font-bold text-neon mb-2">Mein Konto</h2> |
|
|
<p class="text-sm text-white/80">Wallet Adresse: 0x39F...F14</p> |
|
|
<button class="text-sm text-neon underline hover:text-white transition">Konto verwalten</button> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="glass-card p-4 rounded-xl space-y-2"> |
|
|
<h2 class="text-lg font-bold text-neon mb-2">Links & Community</h2> |
|
|
<a href="https://de.linkedin.com/company/nodesim" target="_blank" class="flex items-center text-white/80 hover:text-neon transition text-sm"> |
|
|
<ph-linkedin-logo-bold size="20" class="mr-2 text-neon"></ph-linkedin-logo-bold> NODeSIM auf LinkedIn |
|
|
</a> |
|
|
<a href="https://x.com/NodesimApp" target="_blank" class="flex items-center text-white/80 hover:text-neon transition text-sm"> |
|
|
<ph-x-logo-bold size="20" class="mr-2 text-neon"></ph-x-logo-bold> NodesimApp (X/Twitter) |
|
|
</a> |
|
|
<a href="https://og.rarible.com/NODeSIM" target="_blank" class="flex items-center text-white/80 hover:text-neon transition text-sm"> |
|
|
<ph-storefront-bold size="20" class="mr-2 text-neon"></ph-storefront-bold> Rarible NFT Collection |
|
|
</a> |
|
|
<a href="https://nodesim.app" target="_blank" class="flex items-center text-white/80 hover:text-neon transition text-sm"> |
|
|
<ph-globe-bold size="20" class="mr-2 text-neon"></ph-globe-bold> Offizielle Website (UC) |
|
|
</a> |
|
|
<a href="https://x.com/i/status/1726728649280487909" target="_blank" class="flex items-center text-white/80 hover:text-neon transition text-sm"> |
|
|
<ph-video-bold size="20" class="mr-2 text-neon"></ph-video-bold> Video-Trailer (X) |
|
|
</a> |
|
|
</div> |
|
|
|
|
|
<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"> |
|
|
<ph-sign-out-bold size="20" class="inline-block mr-1"></ph-sign-out-bold> Ausloggen |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="connectivity-screen" class="app-screen space-y-4"> |
|
|
<h1 class="text-3xl font-extrabold text-neon pt-2 mb-4">Konnektivitätsstatus</h1> |
|
|
<p class="text-sm text-white/70">Echtzeit-Analyse Ihrer dezentralen Netzwerkverbindung.</p> |
|
|
|
|
|
<div class="glass-card p-4 rounded-xl mt-6 space-y-4"> |
|
|
<div class="flex justify-between items-center"> |
|
|
<span class="text-white/80">Netzwerk-Status:</span> |
|
|
<span class="text-neon font-bold flex items-center"><ph-check-circle-bold size="20" class="mr-1"></ph-check-circle-bold> Verbunden</span> |
|
|
</div> |
|
|
<div class="flex justify-between items-center"> |
|
|
<span class="text-white/80">Aktives Protokoll:</span> |
|
|
<span class="text-white font-mono">PoD v1.2</span> |
|
|
</div> |
|
|
<div class="flex justify-between items-center"> |
|
|
<span class="text-white/80">Signalstärke:</span> |
|
|
<span class="text-white font-bold">-75 dBm (Exzellent)</span> |
|
|
</div> |
|
|
<div class="flex justify-between items-center"> |
|
|
<span class="text-white/80">Latenz:</span> |
|
|
<span class="text-white font-bold">25 ms</span> |
|
|
</div> |
|
|
<div class="flex justify-between items-center"> |
|
|
<span class="text-white/80">Verbundene Peers:</span> |
|
|
<span class="text-white font-bold">128</span> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="glass-card p-4 rounded-xl mt-4"> |
|
|
<h2 class="text-lg font-bold text-neon mb-2">Globale Abdeckung</h2> |
|
|
<p class="text-sm text-white/80">Dank des dezentralen Netzwerks haben Sie potenziell in über 150 Ländern Zugang zu Konnektivitätspunkten.</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div id="nft-detail-modal" class="modal fixed inset-0 flex-col"> |
|
|
<div class="glass-card p-6 rounded-xl w-11/12 max-w-md mx-auto relative"> |
|
|
<button id="close-nft-modal-btn" class="absolute top-3 right-3 text-neon hover:text-white transition"> |
|
|
<ph-x-circle-bold size="28"></ph-x-circle-bold> |
|
|
</button> |
|
|
<h2 id="nft-modal-title" class="text-2xl font-bold text-neon border-b border-neon/50 pb-2 mb-4"></h2> |
|
|
|
|
|
<p id="nft-modal-eSim" class="text-lg font-mono text-white/80 mb-3"></p> |
|
|
|
|
|
<div id="nft-modal-chart-container" class="h-32 mb-4"> |
|
|
<canvas id="nft-modal-chart"></canvas> |
|
|
</div> |
|
|
|
|
|
<div class="space-y-3"> |
|
|
<h3 class="text-xl font-semibold text-white">Einzigartigkeit:</h3> |
|
|
<p id="nft-modal-description" class="text-sm text-white/70"></p> |
|
|
<ul id="nft-modal-features" class="list-disc list-inside text-sm text-white/80 ml-2 space-y-1"> |
|
|
|
|
|
</ul> |
|
|
</div> |
|
|
<button class="mt-4 w-full py-3 bg-neon text-black font-bold rounded-xl btn-futuristic hover:shadow-neon"> |
|
|
<ph-arrow-left-bold size="20" class="inline-block mr-1"></ph-arrow-left-bold> ZURÜCK |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<nav class="h-16 flex justify-around items-center bg-black/80 border-t border-neon/50 backdrop-blur-sm"> |
|
|
<button data-screen="home" class="nav-button active flex flex-col items-center text-white/70 hover:text-neon transition text-xs"> |
|
|
<ph-house-bold size="24"></ph-house-bold> Home |
|
|
</button> |
|
|
<button data-screen="wallet" class="nav-button flex flex-col items-center text-white/70 hover:text-neon transition text-xs"> |
|
|
<ph-wallet-bold size="24"></ph-wallet-bold> Wallet |
|
|
</button> |
|
|
<button data-screen="nfts" class="nav-button flex flex-col items-center text-white/70 hover:text-neon transition text-xs"> |
|
|
<ph-cards-bold size="24"></ph-cards-bold> NFTs |
|
|
</button> |
|
|
<button data-screen="dao" class="nav-button flex flex-col items-center text-white/70 hover:text-neon transition text-xs"> |
|
|
<ph-seal-check-bold size="24"></ph-seal-check-bold> DAO |
|
|
</button> |
|
|
<button data-screen="settings" class="nav-button flex flex-col items-center text-white/70 hover:text-neon transition text-xs"> |
|
|
<ph-gear-six-bold size="24"></ph-gear-six-bold> Settings |
|
|
</button> |
|
|
</nav> |
|
|
|
|
|
</div> |
|
|
|
|
|
<script type="module"> |
|
|
|
|
|
const appId = typeof __app_id !== 'undefined' ? __app_id : 'default-app-id'; |
|
|
const firebaseConfig = typeof __firebase_config !== 'undefined' ? JSON.parse(__firebase_config) : {}; |
|
|
|
|
|
|
|
|
const mockData = { |
|
|
SIMCoinBalance: 1250.84, |
|
|
pitchDeck: [ |
|
|
{ |
|
|
title: "1. Finanzierung durch exklusiven NFT-Launch", |
|
|
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.", |
|
|
icon: "rocket-launch-bold" |
|
|
}, |
|
|
{ |
|
|
title: "2. Technologischer Vorreiter: eSIM & Blockchain", |
|
|
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.", |
|
|
icon: "cpu-bold" |
|
|
}, |
|
|
{ |
|
|
title: "3. Dezentrale Monetarisierung", |
|
|
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.", |
|
|
icon: "currency-circle-dollar-bold" |
|
|
}, |
|
|
{ |
|
|
title: "4. Community-Governance (DAO)", |
|
|
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.", |
|
|
icon: "users-three-bold" |
|
|
}, |
|
|
{ |
|
|
title: "5. Multiple-Income-Streams", |
|
|
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.", |
|
|
icon: "chart-line-up-bold" |
|
|
}, |
|
|
{ |
|
|
title: "6. Real-World-Problem & Win-Win-Lösung", |
|
|
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.", |
|
|
icon: "check-circle-bold" |
|
|
} |
|
|
], |
|
|
NFTs: [ |
|
|
{ |
|
|
name: "Common", |
|
|
eSimId: "eSIM C-Class", |
|
|
rarity: "Common", |
|
|
image: "https://placehold.co/150x150/A0A0A0/0C0C0C?text=COMMON", |
|
|
description: "Der Standard-NFT für den Einstieg in das NODeSIM-Ökosystem. Bietet grundlegenden Netzwerkzugang und Belohnungen.", |
|
|
chart: { |
|
|
labels: ['DAO Power', 'SIMC Boost', 'Treasure Hunt'], |
|
|
data: [25, 42, 20], |
|
|
label: 'Common Utility Index' |
|
|
}, |
|
|
features: [ |
|
|
"Inklusive Mobilfunknummer", |
|
|
"SIMCoins in Credits umwandelbar", |
|
|
"DAO-Stimmrecht (1x Stärke)", |
|
|
"SIMCoin-Booster (1.5x)", |
|
|
"Schatzsuche (2x Multiplikator)", |
|
|
"Zugang zum privaten Discord" |
|
|
] |
|
|
}, |
|
|
{ |
|
|
name: "Uncommon", |
|
|
eSimId: "eSIM UC-Class", |
|
|
rarity: "Uncommon", |
|
|
image: "https://placehold.co/150x150/66C2A5/0C0C0C?text=UNCOMMON", |
|
|
description: "Ein seltenerer NFT mit verbesserten Belohnungen für engagierte Netzwerkteilnehmer.", |
|
|
chart: { |
|
|
labels: ['DAO Power', 'SIMC Boost', 'Treasure Hunt'], |
|
|
data: [25, 57, 40], |
|
|
label: 'Uncommon Utility Index' |
|
|
}, |
|
|
features: [ |
|
|
"Inklusive Mobilfunknummer", |
|
|
"SIMCoins in Credits umwandelbar", |
|
|
"DAO-Stimmrecht (1x Stärke)", |
|
|
"SIMCoin-Booster (2x)", |
|
|
"Schatzsuche (4x Multiplikator)", |
|
|
"Zugang zum privaten Discord" |
|
|
] |
|
|
}, |
|
|
{ |
|
|
name: "Rare", |
|
|
eSimId: "eSIM R-Class", |
|
|
rarity: "Rare", |
|
|
image: "https://placehold.co/150x150/8DA0CB/0C0C0C?text=RARE", |
|
|
description: "Dieser NFT bietet erhöhte Stimmkraft und Zugang zu exklusiven Events für Community-orientierte Nutzer.", |
|
|
chart: { |
|
|
labels: ['DAO Power', 'SIMC Boost', 'Treasure Hunt'], |
|
|
data: [50, 64, 45], |
|
|
label: 'Rare Utility Index' |
|
|
}, |
|
|
features: [ |
|
|
"Inklusive Mobilfunknummer", |
|
|
"SIMCoins in Credits umwandelbar", |
|
|
"DAO-Stimmrecht (2x Stärke)", |
|
|
"SIMCoin-Booster (2.25x)", |
|
|
"Schatzsuche (4.5x Multiplikator)", |
|
|
"Zugang zum privaten Discord", |
|
|
"Exklusiver Zugang zu Events" |
|
|
] |
|
|
}, |
|
|
{ |
|
|
name: "Epic", |
|
|
eSimId: "eSIM E-Class", |
|
|
rarity: "Epic", |
|
|
image: "https://placehold.co/150x150/E78AC3/0C0C0C?text=EPIC", |
|
|
description: "Ein leistungsstarker NFT für Power-User mit signifikant verbesserten Boostern und Multiplikatoren.", |
|
|
chart: { |
|
|
labels: ['DAO Power', 'SIMC Boost', 'Treasure Hunt'], |
|
|
data: [50, 71, 50], |
|
|
label: 'Epic Utility Index' |
|
|
}, |
|
|
features: [ |
|
|
"Inklusive Mobilfunknummer", |
|
|
"SIMCoins in Credits umwandelbar", |
|
|
"DAO-Stimmrecht (2x Stärke)", |
|
|
"SIMCoin-Booster (2.5x)", |
|
|
"Schatzsuche (5x Multiplikator)", |
|
|
"Zugang zum privaten Discord", |
|
|
"Exklusiver Zugang zu Events" |
|
|
] |
|
|
}, |
|
|
{ |
|
|
name: "Legendary", |
|
|
eSimId: "eSIM L-Class", |
|
|
rarity: "Legendary", |
|
|
image: "https://placehold.co/150x150/FFD92F/0C0C0C?text=LEGEND", |
|
|
description: "Verleiht hohe Stimmkraft in der DAO und exzellente Netzwerk-Belohnungen für treue Unterstützer.", |
|
|
chart: { |
|
|
labels: ['DAO Power', 'SIMC Boost', 'Treasure Hunt'], |
|
|
data: [75, 78, 55], |
|
|
label: 'Legendary Utility Index' |
|
|
}, |
|
|
features: [ |
|
|
"Inklusive Mobilfunknummer", |
|
|
"SIMCoins in Credits umwandelbar", |
|
|
"DAO-Stimmrecht (3x Stärke)", |
|
|
"SIMCoin-Booster (2.75x)", |
|
|
"Schatzsuche (5.5x Multiplikator)", |
|
|
"Zugang zum privaten Discord", |
|
|
"Exklusiver Zugang zu Events" |
|
|
] |
|
|
}, |
|
|
{ |
|
|
name: "Mythic", |
|
|
eSimId: "eSIM M-Class", |
|
|
rarity: "Mythic", |
|
|
image: "https://placehold.co/150x150/E5C494/0C0C0C?text=MYTHIC", |
|
|
description: "Ein mythischer NFT, der lebenslang kostenlose mobile Credits und starken Einfluss auf das Netzwerk gewährt.", |
|
|
chart: { |
|
|
labels: ['DAO Power', 'SIMC Boost', 'Treasure Hunt'], |
|
|
data: [75, 85, 80], |
|
|
label: 'Mythic Utility Index' |
|
|
}, |
|
|
features: [ |
|
|
"Inklusive Mobilfunknummer", |
|
|
"SIMCoins in Credits umwandelbar", |
|
|
"DAO-Stimmrecht (3x Stärke)", |
|
|
"SIMCoin-Booster (3x)", |
|
|
"Schatzsuche (8x Multiplikator)", |
|
|
"Zugang zum privaten Discord", |
|
|
"Exklusiver Zugang zu Events", |
|
|
"Lebenslang kostenlose Credits" |
|
|
] |
|
|
}, |
|
|
{ |
|
|
name: "Ultra", |
|
|
eSimId: "eSIM U-Class", |
|
|
rarity: "Ultra", |
|
|
image: "https://placehold.co/150x150/FC8D62/0C0C0C?text=ULTRA", |
|
|
description: "Repräsentiert die höchste Stufe der Beteiligung mit maximaler Stimmkraft und Belohnungen.", |
|
|
chart: { |
|
|
labels: ['DAO Power', 'SIMC Boost', 'Treasure Hunt'], |
|
|
data: [100, 100, 100], |
|
|
label: 'Ultra Utility Index' |
|
|
}, |
|
|
features: [ |
|
|
"Inklusive Mobilfunknummer", |
|
|
"SIMCoins in Credits umwandelbar", |
|
|
"DAO-Stimmrecht (4x Stärke)", |
|
|
"SIMCoin-Booster (3.5x)", |
|
|
"Schatzsuche (10x Multiplikator)", |
|
|
"Zugang zum privaten Discord", |
|
|
"Exklusiver Zugang zu Events", |
|
|
"Lebenslang kostenlose Credits" |
|
|
] |
|
|
}, |
|
|
{ |
|
|
name: "Ultra Rare", |
|
|
eSimId: "eSIM UR-Class", |
|
|
rarity: "Ultra Rare", |
|
|
image: "https://placehold.co/150x150/A6D854/0C0C0C?text=ULTRA+RARE", |
|
|
description: "Identisch zum Ultra NFT, aber mit extrem limitierter Auflage, was ihn zu einem begehrten Sammlerstück macht.", |
|
|
chart: { |
|
|
labels: ['DAO Power', 'SIMC Boost', 'Treasure Hunt'], |
|
|
data: [100, 100, 100], |
|
|
label: 'Ultra Rare Utility Index' |
|
|
}, |
|
|
features: [ |
|
|
"Inklusive Mobilfunknummer", |
|
|
"SIMCoins in Credits umwandelbar", |
|
|
"DAO-Stimmrecht (4x Stärke)", |
|
|
"SIMCoin-Booster (3.5x)", |
|
|
"Schatzsuche (10x Multiplikator)", |
|
|
"Zugang zum privaten Discord", |
|
|
"Exklusiver Zugang zu Events", |
|
|
"Lebenslang kostenlose Credits" |
|
|
] |
|
|
} |
|
|
] |
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
import { initializeApp } from "https://www.gstatic.com/firebasejs/11.6.1/firebase-app.js"; |
|
|
import { getAuth, signInAnonymously, signInWithCustomToken } from "https://www.gstatic.com/firebasejs/11.6.1/firebase-auth.js"; |
|
|
import { getFirestore } from "https://www.gstatic.com/firebasejs/11.6.1/firebase-firestore.js"; |
|
|
|
|
|
const app = Object.keys(firebaseConfig).length > 0 ? initializeApp(firebaseConfig) : null; |
|
|
const db = app ? getFirestore(app) : null; |
|
|
const auth = app ? getAuth(app) : null; |
|
|
|
|
|
if (auth) { |
|
|
const initialAuthToken = typeof __initial_auth_token !== 'undefined' ? __initial_auth_token : null; |
|
|
if (initialAuthToken) { |
|
|
signInWithCustomToken(auth, initialAuthToken).catch(console.error); |
|
|
} else { |
|
|
signInAnonymously(auth).catch(console.error); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
let simcoinChartInstance = null; |
|
|
let nftChartInstance = null; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
function showScreen(screenId) { |
|
|
const screens = document.querySelectorAll('.app-screen'); |
|
|
screens.forEach(screen => { |
|
|
screen.style.display = 'none'; |
|
|
}); |
|
|
document.getElementById(`${screenId}-screen`).style.display = 'block'; |
|
|
|
|
|
|
|
|
document.querySelectorAll('.nav-button').forEach(btn => { |
|
|
btn.classList.remove('active'); |
|
|
if (btn.getAttribute('data-screen') === screenId) { |
|
|
btn.classList.add('active'); |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
if (screenId === 'home') { |
|
|
if (!simcoinChartInstance) { |
|
|
initializeHomeChart(); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
document.getElementById('pitch-deck-menu').classList.remove('open'); |
|
|
} |
|
|
|
|
|
|
|
|
function initializeHomeChart() { |
|
|
const ctx = document.getElementById('simcoin-chart').getContext('2d'); |
|
|
|
|
|
simcoinChartInstance = new Chart(ctx, { |
|
|
type: 'line', |
|
|
data: { |
|
|
labels: ['Mo', 'Di', 'Mi', 'Do', 'Fr', 'Sa', 'So'], |
|
|
datasets: [ |
|
|
{ |
|
|
label: 'SIMC Verdient', |
|
|
data: [50, 75, 60, 90, 80, 110, 100], |
|
|
borderColor: 'var(--neon-green)', |
|
|
backgroundColor: 'rgba(57, 255, 20, 0.1)', |
|
|
borderWidth: 2, |
|
|
tension: 0.4, |
|
|
fill: true, |
|
|
pointBackgroundColor: 'var(--neon-green)' |
|
|
}, |
|
|
{ |
|
|
label: 'Datenverbrauch (GB)', |
|
|
data: [1.2, 0.9, 1.5, 1.1, 1.3, 0.8, 1.0], |
|
|
borderColor: '#00FFFF', |
|
|
backgroundColor: 'rgba(0, 255, 255, 0.1)', |
|
|
borderWidth: 2, |
|
|
tension: 0.4, |
|
|
fill: false, |
|
|
yAxisID: 'y1', |
|
|
pointBackgroundColor: '#00FFFF' |
|
|
} |
|
|
] |
|
|
}, |
|
|
options: { |
|
|
responsive: true, |
|
|
maintainAspectRatio: false, |
|
|
scales: { |
|
|
y: { |
|
|
beginAtZero: true, |
|
|
title: { display: false, text: 'SIMC' }, |
|
|
ticks: { color: 'var(--neon-green)' }, |
|
|
grid: { color: 'rgba(57, 255, 20, 0.1)' } |
|
|
}, |
|
|
y1: { |
|
|
position: 'right', |
|
|
title: { display: false, text: 'GB' }, |
|
|
ticks: { color: '#00FFFF' }, |
|
|
grid: { drawOnChartArea: false } |
|
|
}, |
|
|
x: { |
|
|
ticks: { color: 'white' }, |
|
|
grid: { color: 'rgba(57, 255, 20, 0.1)' } |
|
|
} |
|
|
}, |
|
|
plugins: { |
|
|
legend: { |
|
|
display: true, |
|
|
labels: { color: 'white', boxWidth: 10 } |
|
|
}, |
|
|
tooltip: { |
|
|
backgroundColor: 'rgba(0, 0, 0, 0.8)', |
|
|
titleColor: 'var(--neon-green)', |
|
|
bodyColor: 'white', |
|
|
borderColor: 'var(--neon-green)', |
|
|
borderWidth: 1 |
|
|
} |
|
|
} |
|
|
} |
|
|
}); |
|
|
} |
|
|
|
|
|
|
|
|
function renderNfts() { |
|
|
const gallery = document.getElementById('nft-gallery'); |
|
|
gallery.innerHTML = ''; |
|
|
|
|
|
mockData.NFTs.forEach((nft, index) => { |
|
|
const card = document.createElement('div'); |
|
|
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'; |
|
|
card.innerHTML = ` |
|
|
<img src="${nft.image}" alt="${nft.name}" class="w-20 h-20 rounded-lg mb-2 object-cover border border-neon"> |
|
|
<p class="text-lg font-bold text-neon">${nft.name}</p> |
|
|
<p class="text-sm text-white/70">${nft.rarity}</p> |
|
|
<p class="text-xs font-mono text-white/50 mt-1">${nft.eSimId}</p> |
|
|
`; |
|
|
|
|
|
|
|
|
card.addEventListener('click', () => showNftDetailModal(index)); |
|
|
gallery.appendChild(card); |
|
|
}); |
|
|
} |
|
|
|
|
|
|
|
|
function showNftDetailModal(index) { |
|
|
const nft = mockData.NFTs[index]; |
|
|
document.getElementById('nft-modal-title').textContent = nft.name; |
|
|
document.getElementById('nft-modal-eSim').textContent = `eSIM ID: ${nft.eSimId}`; |
|
|
document.getElementById('nft-modal-description').textContent = nft.description; |
|
|
|
|
|
|
|
|
const featuresList = document.getElementById('nft-modal-features'); |
|
|
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(''); |
|
|
|
|
|
|
|
|
if (nftChartInstance) { |
|
|
nftChartInstance.destroy(); |
|
|
} |
|
|
|
|
|
|
|
|
const ctx = document.getElementById('nft-modal-chart').getContext('2d'); |
|
|
nftChartInstance = new Chart(ctx, { |
|
|
type: 'radar', |
|
|
data: { |
|
|
labels: nft.chart.labels, |
|
|
datasets: [{ |
|
|
label: nft.chart.label, |
|
|
data: nft.chart.data, |
|
|
backgroundColor: 'rgba(57, 255, 20, 0.2)', |
|
|
borderColor: 'var(--neon-green)', |
|
|
pointBackgroundColor: 'var(--neon-green)', |
|
|
pointBorderColor: '#fff', |
|
|
pointHoverBackgroundColor: '#fff', |
|
|
pointHoverBorderColor: 'var(--neon-green)' |
|
|
}] |
|
|
}, |
|
|
options: { |
|
|
responsive: true, |
|
|
maintainAspectRatio: false, |
|
|
scales: { |
|
|
r: { |
|
|
angleLines: { color: 'rgba(57, 255, 20, 0.3)' }, |
|
|
grid: { color: 'rgba(57, 255, 20, 0.3)' }, |
|
|
pointLabels: { color: 'white' }, |
|
|
ticks: { display: false, backdropColor: 'var(--glass-bg)' }, |
|
|
suggestedMin: 0, |
|
|
suggestedMax: 100 |
|
|
} |
|
|
}, |
|
|
plugins: { |
|
|
legend: { display: false } |
|
|
} |
|
|
} |
|
|
}); |
|
|
|
|
|
document.getElementById('nft-detail-modal').style.display = 'flex'; |
|
|
} |
|
|
|
|
|
|
|
|
function renderPitchDeck() { |
|
|
const contentDiv = document.getElementById('pitch-deck-content'); |
|
|
contentDiv.innerHTML = mockData.pitchDeck.map(item => ` |
|
|
<div class="glass-card p-3 rounded-xl border-l-4 border-neon/70"> |
|
|
<h3 class="text-md font-bold text-neon flex items-center mb-1"> |
|
|
<ph-${item.icon} size="20" class="mr-2"></ph-${item.icon}> ${item.title} |
|
|
</h3> |
|
|
<p class="text-xs text-white/80">${item.content}</p> |
|
|
</div> |
|
|
`).join(''); |
|
|
} |
|
|
|
|
|
|
|
|
document.addEventListener('DOMContentLoaded', () => { |
|
|
|
|
|
showScreen('home'); |
|
|
renderNfts(); |
|
|
renderPitchDeck(); |
|
|
|
|
|
|
|
|
document.querySelectorAll('.nav-button').forEach(button => { |
|
|
button.addEventListener('click', (e) => { |
|
|
const screen = e.currentTarget.getAttribute('data-screen'); |
|
|
showScreen(screen); |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
document.querySelectorAll('.quick-action-btn').forEach(button => { |
|
|
button.addEventListener('click', (e) => { |
|
|
const screen = e.currentTarget.getAttribute('data-screen'); |
|
|
showScreen(screen); |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
const menuBtn = document.getElementById('menu-btn'); |
|
|
const closeMenuBtn = document.getElementById('close-menu-btn'); |
|
|
const pitchDeckMenu = document.getElementById('pitch-deck-menu'); |
|
|
|
|
|
menuBtn.addEventListener('click', () => { |
|
|
pitchDeckMenu.classList.toggle('open'); |
|
|
}); |
|
|
closeMenuBtn.addEventListener('click', () => { |
|
|
pitchDeckMenu.classList.remove('open'); |
|
|
}); |
|
|
|
|
|
document.getElementById('close-nft-modal-btn').addEventListener('click', () => { |
|
|
document.getElementById('nft-detail-modal').style.display = 'none'; |
|
|
}); |
|
|
|
|
|
|
|
|
document.querySelector('#nft-detail-modal .modal button').addEventListener('click', () => { |
|
|
document.getElementById('nft-detail-modal').style.display = 'none'; |
|
|
}); |
|
|
|
|
|
const smartphoneContainer = document.getElementById('smartphone-container'); |
|
|
const utilityChartPreview = document.getElementById('utility-chart-preview'); |
|
|
const fullscreenImageModal = document.getElementById('fullscreen-image-modal'); |
|
|
const fullscreenImage = document.getElementById('fullscreen-image'); |
|
|
const closeImageModalBtn = document.getElementById('close-image-modal-btn'); |
|
|
|
|
|
utilityChartPreview.addEventListener('click', () => { |
|
|
const imgSrc = utilityChartPreview.querySelector('img').getAttribute('data-full-src'); |
|
|
fullscreenImage.src = imgSrc; |
|
|
|
|
|
|
|
|
smartphoneContainer.classList.add('landscape-mode'); |
|
|
|
|
|
|
|
|
fullscreenImageModal.style.display = 'flex'; |
|
|
|
|
|
|
|
|
document.querySelectorAll('.app-screen').forEach(screen => screen.style.display = 'none'); |
|
|
|
|
|
|
|
|
document.querySelector('nav').style.display = 'none'; |
|
|
document.querySelector('.h-10').style.display = 'none'; |
|
|
}); |
|
|
|
|
|
closeImageModalBtn.addEventListener('click', () => { |
|
|
|
|
|
fullscreenImageModal.style.display = 'none'; |
|
|
|
|
|
|
|
|
smartphoneContainer.classList.remove('landscape-mode'); |
|
|
|
|
|
|
|
|
document.querySelector('nav').style.display = 'flex'; |
|
|
document.querySelector('.h-10').style.display = 'flex'; |
|
|
|
|
|
|
|
|
showScreen('nfts'); |
|
|
}); |
|
|
}); |
|
|
|
|
|
</script> |
|
|
</body> |
|
|
</html> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
