Spaces:

Uschi1000
/

nodesim

Running

App Files Files Community

nodesim / index.html

Uschi1000

Promote version 4008f17 to main

dc28180 verified 9 months ago

Raw

History Blame Contribute Delete

49.6 kB

	<!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>
	<!-- Tailwind CSS CDN -->
	<script src="https://cdn.tailwindcss.com"></script>
	<!-- Chart.js CDN for interactive charts -->
	<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
	<!-- Phosphor Icons for a futuristic look -->
	<script src="https://unpkg.com/@phosphor-icons/web@2.1.1/dist/p.js"></script>
	<!-- Google Fonts for a futuristic look -->
	<link href="https://fonts.googleapis.com/css2?family=VT323&family=Inter:wght@400;600;800&display=swap" rel="stylesheet">

	<style>
	/* Global Styles */
	: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 Simulation */
	.smartphone-container {
	width: 375px; /* Mobile width */
	height: 667px; /* Mobile height */
	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;
	}

	/* Landscape Mode Simulation for Fullscreen Image */
	.smartphone-container.landscape-mode {
	width: 667px; /* Swap width/height */
	height: 375px;
	transform: rotate(90deg) translate(146px, -146px); /* Rotate 90deg and translate to stay centered */
	box-shadow: 0 0 80px rgba(57, 255, 20, 0.7), 0 0 30px rgba(0, 0, 0, 0.9) inset;
	}

	/* Glassmorphism Effect */
	.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);
	}

	/* Neon Green Accents */
	.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); }

	/* Main Screen Layout */
	.app-screen {
	height: calc(100% - 104px); /* Full height minus nav bar and top bar */
	overflow-y: auto;
	padding: 1rem;
	display: none;
	scrollbar-width: none; /* Firefox */
	}
	.app-screen::-webkit-scrollbar {
	display: none; /* Chrome, Safari, Opera */
	}

	/* Pitch Deck Sidebar */
	#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 Bar Styling */
	.nav-button.active {
	color: var(--neon-green);
	transform: translateY(-2px);
	text-shadow: 0 0 8px rgba(57, 255, 20, 0.8);
	}

	/* Modal Styling */
	.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 */
	#fullscreen-image-modal {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: var(--dark-bg);
	z-index: 60; /* Above regular screens but below nav bar (for the phone simulation) */
	display: none;
	}

	/* Custom animation for buttons */
	.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">

	<!-- Top Status Bar & Menu -->
	<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>

	<!-- Pitch Deck / Sidebar Menu -->
	<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">
	<!-- Pitch Deck Content rendered here by JS -->
	</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>

	<!-- FULLSCREEN IMAGE MODAL (for the utility chart on NFT screen) -->
	<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>

	<!-- APP SCREENS -->

	<!-- 1. Home Screen -->
	<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>

	<!-- Balance Card -->
	<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>

	<!-- eSIM-NFT Utility Clarity -->
	<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>

	<!-- Interactive Chart -->
	<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>

	<!-- Quick Access -->
	<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>

	<!-- 2. Wallet Screen -->
	<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>

	<!-- Main Balance -->
	<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>

	<!-- Actions -->
	<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>

	<!-- Transaction History -->
	<h2 class="text-xl text-neon border-b border-neon/50 pb-1 mt-6">Transaktionen</h2>
	<div class="space-y-2 text-sm">
	<!-- Mock Transactions -->
	<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>

	<!-- 3. NFTs Screen -->
	<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>

	<!-- NFT Collection Grid -->
	<div id="nft-gallery" class="grid grid-cols-2 gap-4">
	<!-- NFT Cards rendered here by JS -->
	</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>

	<!-- Interactive Utility Chart Image (Mock Image) -->
	<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">
	<!-- Image Placeholder URL is used here -->
	<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>

	<!-- 4. DAO Screen -->
	<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>

	<!-- Active Proposals -->
	<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>

	<!-- Passed Proposals -->
	<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>

	<!-- 5. Settings Screen -->
	<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>

	<!-- Account Section -->
	<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>

	<!-- Social Media & Links -->
	<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>

	<!-- 6. Connectivity Screen (NEU) -->
	<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>
	<!-- NFT DETAIL POP-UP MODAL -->
	<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">
	<!-- Features rendered here -->
	</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>
	<!-- Bottom Navigation Bar -->
	<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">
	// Global variables for Firebase Compliance (Required but not used for MOCK DATA)
	const appId = typeof __app_id !== 'undefined' ? __app_id : 'default-app-id';
	const firebaseConfig = typeof __firebase_config !== 'undefined' ? JSON.parse(__firebase_config) : {};

	// Mock Data for the Prototyp / Pitch Deck
	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"
	]
	}
	]
	};

	// --- Firebase/Auth Setup (For Compliance) ---
	// This is necessary for the Canvas environment but is not used to fetch mock data.
	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;

	/**
	* Hauptfunktion zum Wechseln des Bildschirms
	* @param {string} screenId - ID des anzuzeigenden Bildschirms (z.B. 'home', 'nfts')
	*/
	function showScreen(screenId) {
	const screens = document.querySelectorAll('.app-screen');
	screens.forEach(screen => {
	screen.style.display = 'none';
	});
	document.getElementById(`${screenId}-screen`).style.display = 'block';

	// Nav Bar Button Status aktualisieren
	document.querySelectorAll('.nav-button').forEach(btn => {
	btn.classList.remove('active');
	if (btn.getAttribute('data-screen') === screenId) {
	btn.classList.add('active');
	}
	});

	// Spezielle Initialisierung für den Home Screen Chart
	if (screenId === 'home') {
	if (!simcoinChartInstance) {
	initializeHomeChart();
	}
	}

	// Sicherstellen, dass das Pitch Deck geschlossen ist
	document.getElementById('pitch-deck-menu').classList.remove('open');
	}

	/** Initialisiert das Chart.js-Diagramm auf dem Home Screen. */
	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 } // Nur Gitterlinien von Y-Achse
	},
	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
	}
	}
	}
	});
	}

	/** Rendert die NFT-Karten und fügt Event-Listener hinzu. */
	function renderNfts() {
	const gallery = document.getElementById('nft-gallery');
	gallery.innerHTML = ''; // Vorherige Karten entfernen

	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>
	`;

	// Klick-Handler zum Öffnen des Modals
	card.addEventListener('click', () => showNftDetailModal(index));
	gallery.appendChild(card);
	});
	}

	/** Zeigt das NFT-Detail-Modal an. */
	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;

	// Features rendern
	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('');

	// Altes Chart zerstören, falls vorhanden
	if (nftChartInstance) {
	nftChartInstance.destroy();
	}

	// Neues Chart erstellen
	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';
	}

	/** Rendert den Pitch Deck Inhalt. */
	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('');
	}

	// --- Event Listener Setup ---
	document.addEventListener('DOMContentLoaded', () => {
	// Initialer Startbildschirm
	showScreen('home');
	renderNfts();
	renderPitchDeck();

	// Navigations-Buttons
	document.querySelectorAll('.nav-button').forEach(button => {
	button.addEventListener('click', (e) => {
	const screen = e.currentTarget.getAttribute('data-screen');
	showScreen(screen);
	});
	});

	// Quick-Action-Buttons auf Home-Screen
	document.querySelectorAll('.quick-action-btn').forEach(button => {
	button.addEventListener('click', (e) => {
	const screen = e.currentTarget.getAttribute('data-screen');
	showScreen(screen);
	});
	});

	// Pitch Deck Menu Toggle
	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');
	});
	// NFT Modal Close
	document.getElementById('close-nft-modal-btn').addEventListener('click', () => {
	document.getElementById('nft-detail-modal').style.display = 'none';
	});

	// ZURÜCK Button im NFT Modal
	document.querySelector('#nft-detail-modal .modal button').addEventListener('click', () => {
	document.getElementById('nft-detail-modal').style.display = 'none';
	});
	// --- Fullscreen Image / Rotation Logic ---
	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;

	// 1. Smartphone-Container in den Landscape-Modus versetzen
	smartphoneContainer.classList.add('landscape-mode');

	// 2. Fullscreen Modal anzeigen
	fullscreenImageModal.style.display = 'flex';

	// 3. Andere App-Screens ausblenden, um den Fokus auf das Bild zu legen
	document.querySelectorAll('.app-screen').forEach(screen => screen.style.display = 'none');

	// 4. Nav Bar ausblenden, um das immersive Erlebnis zu simulieren
	document.querySelector('nav').style.display = 'none';
	document.querySelector('.h-10').style.display = 'none'; // Top bar ausblenden
	});

	closeImageModalBtn.addEventListener('click', () => {
	// 1. Fullscreen Modal ausblenden
	fullscreenImageModal.style.display = 'none';

	// 2. Smartphone-Container in den Portrait-Modus zurückversetzen
	smartphoneContainer.classList.remove('landscape-mode');

	// 3. Nav Bar und Top Bar wieder einblenden
	document.querySelector('nav').style.display = 'flex';
	document.querySelector('.h-10').style.display = 'flex';

	// 4. Zurück zum NFT-Screen navigieren
	showScreen('nfts');
	});
	});

	</script>
	</body>
	</html>