fix(site): completely remove Launch Sandbox menu and mockup pages
This commit is contained in:
Yun Chan
parent
9b8dbdaffa
commit
d4dc498448
3 changed files with 0 additions and 1002 deletions
|
|
@ -95,7 +95,6 @@
|
||||||
|
|
||||||
<nav class="hidden md:flex items-center gap-6 text-xs font-medium text-slate-400">
|
<nav class="hidden md:flex items-center gap-6 text-xs font-medium text-slate-400">
|
||||||
<a href="/" class="hover:text-white transition-colors">Overview</a>
|
<a href="/" class="hover:text-white transition-colors">Overview</a>
|
||||||
<a href="/launch-readiness.html" class="hover:text-white transition-colors">Launch Readiness</a>
|
|
||||||
<a href="#changelog" class="hover:text-white transition-colors">Changelog</a>
|
<a href="#changelog" class="hover:text-white transition-colors">Changelog</a>
|
||||||
<a href="#integrity" class="hover:text-white transition-colors">SHA-256 Verifier</a>
|
<a href="#integrity" class="hover:text-white transition-colors">SHA-256 Verifier</a>
|
||||||
<a href="https://git.chanpaca.net/yunchan/d3ro-voice" target="_blank" class="flex items-center gap-1 text-sky-400 hover:text-sky-300 font-mono">
|
<a href="https://git.chanpaca.net/yunchan/d3ro-voice" target="_blank" class="flex items-center gap-1 text-sky-400 hover:text-sky-300 font-mono">
|
||||||
|
|
|
||||||
|
|
@ -1,994 +0,0 @@
|
||||||
<!DOCTYPE html>
|
|
||||||
<html lang="ko" class="dark">
|
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
||||||
<title>D3RO Voice — Launch Readiness & Monetization Simulation Hub</title>
|
|
||||||
<!-- Tailwind CSS CDN -->
|
|
||||||
<script src="https://cdn.tailwindcss.com"></script>
|
|
||||||
<!-- Lucide Icons -->
|
|
||||||
<script src="https://unpkg.com/lucide@latest"></script>
|
|
||||||
<script>
|
|
||||||
tailwind.config = {
|
|
||||||
darkMode: 'class',
|
|
||||||
theme: {
|
|
||||||
extend: {
|
|
||||||
colors: {
|
|
||||||
brand: {
|
|
||||||
50: '#eff6ff',
|
|
||||||
100: '#dbeafe',
|
|
||||||
400: '#60a5fa',
|
|
||||||
500: '#3b82f6',
|
|
||||||
600: '#2563eb',
|
|
||||||
700: '#1d4ed8',
|
|
||||||
900: '#1e3a8a',
|
|
||||||
},
|
|
||||||
cyan: {
|
|
||||||
400: '#22d3ee',
|
|
||||||
500: '#06b6d4',
|
|
||||||
},
|
|
||||||
dark: {
|
|
||||||
950: '#030712',
|
|
||||||
900: '#0b101f',
|
|
||||||
850: '#0f172a',
|
|
||||||
800: '#1e293b',
|
|
||||||
700: '#334155',
|
|
||||||
}
|
|
||||||
},
|
|
||||||
fontFamily: {
|
|
||||||
sans: ['Pretendard', '-apple-system', 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'sans-serif'],
|
|
||||||
mono: ['JetBrains Mono', 'Fira Code', 'monospace']
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
<style>
|
|
||||||
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css');
|
|
||||||
body {
|
|
||||||
font-family: 'Pretendard', sans-serif;
|
|
||||||
background-color: #030712;
|
|
||||||
color: #f1f5f9;
|
|
||||||
}
|
|
||||||
.glass-panel {
|
|
||||||
background: rgba(15, 23, 42, 0.75);
|
|
||||||
backdrop-filter: blur(20px);
|
|
||||||
border: 1px solid rgba(148, 163, 184, 0.12);
|
|
||||||
}
|
|
||||||
.glass-card {
|
|
||||||
background: rgba(30, 41, 59, 0.6);
|
|
||||||
backdrop-filter: blur(16px);
|
|
||||||
border: 1px solid rgba(148, 163, 184, 0.15);
|
|
||||||
}
|
|
||||||
.glow-blue {
|
|
||||||
box-shadow: 0 0 25px rgba(59, 130, 246, 0.25);
|
|
||||||
}
|
|
||||||
.glow-cyan {
|
|
||||||
box-shadow: 0 0 25px rgba(6, 182, 212, 0.3);
|
|
||||||
}
|
|
||||||
.custom-scrollbar::-webkit-scrollbar {
|
|
||||||
width: 6px;
|
|
||||||
height: 6px;
|
|
||||||
}
|
|
||||||
.custom-scrollbar::-webkit-scrollbar-track {
|
|
||||||
background: rgba(15, 23, 42, 0.5);
|
|
||||||
}
|
|
||||||
.custom-scrollbar::-webkit-scrollbar-thumb {
|
|
||||||
background: rgba(100, 116, 139, 0.5);
|
|
||||||
border-radius: 999px;
|
|
||||||
}
|
|
||||||
@keyframes pulseGlow {
|
|
||||||
0%, 100% { opacity: 0.8; transform: scale(1); }
|
|
||||||
50% { opacity: 1; transform: scale(1.05); }
|
|
||||||
}
|
|
||||||
.live-dot {
|
|
||||||
animation: pulseGlow 2s infinite ease-in-out;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
</head>
|
|
||||||
<body class="min-h-screen flex flex-col custom-scrollbar selection:bg-brand-500 selection:text-white">
|
|
||||||
|
|
||||||
<!-- TOP APP BAR -->
|
|
||||||
<header class="border-b border-slate-800/80 bg-dark-900/90 backdrop-blur-xl sticky top-0 z-50 px-4 lg:px-8 py-3 flex items-center justify-between">
|
|
||||||
<div class="flex items-center gap-3">
|
|
||||||
<div class="w-9 h-9 rounded-xl bg-gradient-to-tr from-cyan-500 via-brand-500 to-indigo-600 flex items-center justify-center shadow-lg shadow-brand-500/30">
|
|
||||||
<i data-lucide="mic" class="w-5 h-5 text-white"></i>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<div class="flex items-center gap-2">
|
|
||||||
<span class="font-bold text-lg tracking-tight text-white">D3RO Voice</span>
|
|
||||||
<span class="px-2 py-0.5 text-xs font-mono font-semibold rounded-full bg-cyan-500/10 text-cyan-400 border border-cyan-500/20">LAUNCH READY v1.0</span>
|
|
||||||
</div>
|
|
||||||
<p class="text-xs text-slate-400">Commercialization & Operations Sandbox</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- MAIN NAV TABS -->
|
|
||||||
<nav class="hidden md:flex items-center gap-1 bg-dark-950/80 p-1.5 rounded-2xl border border-slate-800">
|
|
||||||
<button onclick="switchTab('ads')" id="tab-btn-ads" class="tab-btn active px-4 py-2 rounded-xl text-sm font-medium transition-all flex items-center gap-2 bg-brand-600 text-white shadow-md">
|
|
||||||
<i data-lucide="tv" class="w-4 h-4"></i> Free Tier Ads
|
|
||||||
</button>
|
|
||||||
<button onclick="switchTab('payment')" id="tab-btn-payment" class="tab-btn px-4 py-2 rounded-xl text-sm font-medium transition-all flex items-center gap-2 text-slate-400 hover:text-white hover:bg-slate-800/50">
|
|
||||||
<i data-lucide="credit-card" class="w-4 h-4"></i> Multi-PG Checkout
|
|
||||||
</button>
|
|
||||||
<button onclick="switchTab('support')" id="tab-btn-support" class="tab-btn px-4 py-2 rounded-xl text-sm font-medium transition-all flex items-center gap-2 text-slate-400 hover:text-white hover:bg-slate-800/50">
|
|
||||||
<i data-lucide="headphones" class="w-4 h-4"></i> AI Customer Support (CA)
|
|
||||||
</button>
|
|
||||||
<button onclick="switchTab('admin')" id="tab-btn-admin" class="tab-btn px-4 py-2 rounded-xl text-sm font-medium transition-all flex items-center gap-2 text-slate-400 hover:text-white hover:bg-slate-800/50">
|
|
||||||
<i data-lucide="shield-alert" class="w-4 h-4"></i> Admin Command Desk
|
|
||||||
</button>
|
|
||||||
</nav>
|
|
||||||
|
|
||||||
<!-- LIVE TELEMETRY & MODE -->
|
|
||||||
<div class="flex items-center gap-3">
|
|
||||||
<div class="hidden sm:flex items-center gap-2 px-3 py-1.5 rounded-full bg-emerald-500/10 border border-emerald-500/20 text-emerald-400 text-xs font-mono">
|
|
||||||
<span class="w-2 h-2 rounded-full bg-emerald-400 live-dot"></span>
|
|
||||||
<span>GATEWAY: CONNECTED</span>
|
|
||||||
</div>
|
|
||||||
<span class="text-xs font-mono text-slate-400 bg-slate-800/50 px-3 py-1.5 rounded-lg border border-slate-700">Production Ready</span>
|
|
||||||
</div>
|
|
||||||
</header>
|
|
||||||
|
|
||||||
<!-- SUB-HEADER ON MOBILE -->
|
|
||||||
<div class="md:hidden flex overflow-x-auto gap-2 p-2 bg-dark-900 border-b border-slate-800 custom-scrollbar">
|
|
||||||
<button onclick="switchTab('ads')" class="tab-btn px-3 py-1.5 rounded-lg text-xs font-medium bg-brand-600 text-white whitespace-nowrap">Free Ads</button>
|
|
||||||
<button onclick="switchTab('payment')" class="tab-btn px-3 py-1.5 rounded-lg text-xs font-medium text-slate-400 bg-slate-800 whitespace-nowrap">Payment</button>
|
|
||||||
<button onclick="switchTab('support')" class="tab-btn px-3 py-1.5 rounded-lg text-xs font-medium text-slate-400 bg-slate-800 whitespace-nowrap">AI Support</button>
|
|
||||||
<button onclick="switchTab('admin')" class="tab-btn px-3 py-1.5 rounded-lg text-xs font-medium text-slate-400 bg-slate-800 whitespace-nowrap">Admin Desk</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- MAIN VIEWPORT CONTAINER -->
|
|
||||||
<main class="flex-1 p-4 lg:p-8 max-w-7xl mx-auto w-full">
|
|
||||||
|
|
||||||
<!-- TAB 1: FREE TIER AD MONETIZATION -->
|
|
||||||
<section id="tab-ads" class="space-y-6">
|
|
||||||
<div class="flex flex-col lg:flex-row lg:items-center justify-between gap-4">
|
|
||||||
<div>
|
|
||||||
<h1 class="text-2xl lg:text-3xl font-bold tracking-tight text-white flex items-center gap-3">
|
|
||||||
<span>Free Tier Ad Monetization Experience</span>
|
|
||||||
<span class="text-xs px-2.5 py-1 rounded-md bg-cyan-500/10 text-cyan-400 border border-cyan-500/20 font-mono">Zero-Latency Voice Guarantee</span>
|
|
||||||
</h1>
|
|
||||||
<p class="text-slate-400 text-sm mt-1">
|
|
||||||
Analyze how D3RO Voice monetizes free tier users without disturbing real-time push-to-talk dictation.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<!-- User State Controller -->
|
|
||||||
<div class="flex items-center gap-3 bg-dark-900 p-2 rounded-xl border border-slate-800">
|
|
||||||
<span class="text-xs text-slate-400">User Tier:</span>
|
|
||||||
<select id="user-tier-selector" onchange="toggleUserTier(this.value)" class="bg-dark-950 text-white text-xs rounded-lg px-3 py-1.5 border border-slate-700 font-semibold focus:outline-none focus:border-brand-500">
|
|
||||||
<option value="free">Free Tier (Ads Enabled)</option>
|
|
||||||
<option value="pro">Pro Tier (100% Ad-Free)</option>
|
|
||||||
<option value="pro_plus">Pro+ Tier (VIP Ad-Free)</option>
|
|
||||||
</select>
|
|
||||||
<div class="h-4 w-px bg-slate-700"></div>
|
|
||||||
<span class="text-xs text-cyan-400 font-mono" id="quota-display">Cloud Quota: 45 / 250</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- GRID OF AD PLACEMENTS & STRATEGIES -->
|
|
||||||
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
|
|
||||||
|
|
||||||
<!-- LEFT: DESKTOP APP PREVIEW WITH INTERACTIVE AD SLOTS -->
|
|
||||||
<div class="lg:col-span-2 glass-panel rounded-2xl p-5 border border-slate-800 relative overflow-hidden flex flex-col">
|
|
||||||
<div class="flex items-center justify-between pb-3 mb-4 border-b border-slate-800">
|
|
||||||
<div class="flex items-center gap-2">
|
|
||||||
<span class="w-3 h-3 rounded-full bg-red-500/80"></span>
|
|
||||||
<span class="w-3 h-3 rounded-full bg-amber-500/80"></span>
|
|
||||||
<span class="w-3 h-3 rounded-full bg-emerald-500/80"></span>
|
|
||||||
<span class="ml-2 text-xs font-mono text-slate-400">D3RO Voice Desktop App Window</span>
|
|
||||||
</div>
|
|
||||||
<span class="text-xs text-slate-500 font-mono">Live Interactive Mockup</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- MOCK APP INTERFACE -->
|
|
||||||
<div class="flex-1 bg-dark-950 rounded-xl p-4 border border-slate-800/80 flex flex-col gap-4">
|
|
||||||
<!-- App Header & Quick Stats -->
|
|
||||||
<div class="flex items-center justify-between bg-dark-900/60 p-3 rounded-lg border border-slate-800">
|
|
||||||
<div class="flex items-center gap-3">
|
|
||||||
<div class="w-8 h-8 rounded-lg bg-brand-500/20 border border-brand-500/30 flex items-center justify-center">
|
|
||||||
<i data-lucide="sparkles" class="w-4 h-4 text-brand-400"></i>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<h4 class="text-sm font-semibold text-white">AI Dictation & Meeting Memo</h4>
|
|
||||||
<p class="text-xs text-slate-400">Model: faster-whisper (large-v3-turbo, GPU On)</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<button onclick="triggerVoiceSim()" class="px-3 py-1.5 bg-gradient-to-r from-cyan-500 to-brand-600 hover:from-cyan-400 hover:to-brand-500 text-white text-xs font-semibold rounded-lg shadow flex items-center gap-1.5">
|
|
||||||
<i data-lucide="mic" class="w-3.5 h-3.5"></i> Test PTT Capsule (Clean HUD)
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Simulated Voice Transcript Stream -->
|
|
||||||
<div class="bg-dark-900/40 p-4 rounded-lg border border-slate-800/60 min-h-[140px] text-sm text-slate-300 font-sans space-y-2">
|
|
||||||
<div class="flex items-center justify-between text-xs text-slate-500 font-mono border-b border-slate-800/40 pb-1">
|
|
||||||
<span>RECENT TRANSCRIPT (07:54:12)</span>
|
|
||||||
<span class="text-emerald-400">142ms Latency</span>
|
|
||||||
</div>
|
|
||||||
<p id="transcript-stream">"출시 준비 전략을 점검하고 있습니다. Free tier 사용자는 100% 로컬 Whisper를 통해 무제한 음성 인식을 지원하며, 클라우드 AI 정제 쿼터 소진 시 리워드 광고로 충전할 수 있습니다."</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- AD PLACEMENT 1: DOCK SUBTLE BANNER (FREE TIER ONLY) -->
|
|
||||||
<div id="dock-ad-container" class="transition-all duration-300">
|
|
||||||
<div class="bg-gradient-to-r from-slate-900 via-dark-850 to-slate-900 p-3 rounded-xl border border-slate-700/60 flex items-center justify-between gap-4 relative group">
|
|
||||||
<div class="flex items-center gap-3">
|
|
||||||
<div class="w-10 h-10 rounded-lg bg-indigo-500/20 border border-indigo-500/30 flex items-center justify-center shrink-0">
|
|
||||||
<i data-lucide="cpu" class="w-5 h-5 text-indigo-400"></i>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<div class="flex items-center gap-2">
|
|
||||||
<span class="text-xs font-bold text-white">Cursor AI — The AI-First Code Editor</span>
|
|
||||||
<span class="px-1.5 py-0.2 bg-slate-700 text-[10px] text-slate-300 rounded font-mono">Sponsor</span>
|
|
||||||
</div>
|
|
||||||
<p class="text-xs text-slate-400">Build software faster with intelligent voice & multi-file agents.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<button onclick="simulateAdClick('EthicalAds / Direct Sponsor')" class="shrink-0 px-3 py-1.5 bg-indigo-600 hover:bg-indigo-500 text-white text-xs font-semibold rounded-lg transition-colors">
|
|
||||||
Learn More
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- PRO AD-FREE BADGE (HIDDEN IN FREE) -->
|
|
||||||
<div id="pro-adfree-container" class="hidden p-3 rounded-xl bg-emerald-500/10 border border-emerald-500/20 flex items-center justify-between">
|
|
||||||
<div class="flex items-center gap-2 text-emerald-400 text-xs font-medium">
|
|
||||||
<i data-lucide="shield-check" class="w-4 h-4"></i>
|
|
||||||
<span>Pro Tier Active: 100% Ad-Free Pristine Environment</span>
|
|
||||||
</div>
|
|
||||||
<span class="text-[11px] font-mono text-emerald-300">Zero Commercial Interrupts</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- ACTION BUTTONS: REWARDED QUOTA & EXPORT -->
|
|
||||||
<div class="grid grid-cols-2 gap-3 pt-2">
|
|
||||||
<button onclick="openRewardedAdModal()" class="p-3 rounded-xl bg-dark-900 hover:bg-slate-800 border border-slate-700 text-left transition-all group flex items-center justify-between">
|
|
||||||
<div>
|
|
||||||
<div class="flex items-center gap-1.5 text-xs font-semibold text-cyan-400 group-hover:text-cyan-300">
|
|
||||||
<i data-lucide="gift" class="w-4 h-4"></i> Refill AI Quota (+50)
|
|
||||||
</div>
|
|
||||||
<p class="text-[11px] text-slate-400 mt-0.5">Watch 15s sponsor video</p>
|
|
||||||
</div>
|
|
||||||
<i data-lucide="play-circle" class="w-5 h-5 text-slate-400 group-hover:text-cyan-400"></i>
|
|
||||||
</button>
|
|
||||||
|
|
||||||
<button onclick="openExportModal()" class="p-3 rounded-xl bg-dark-900 hover:bg-slate-800 border border-slate-700 text-left transition-all group flex items-center justify-between">
|
|
||||||
<div>
|
|
||||||
<div class="flex items-center gap-1.5 text-xs font-semibold text-purple-400 group-hover:text-purple-300">
|
|
||||||
<i data-lucide="download" class="w-4 h-4"></i> Export Transcript (Docx)
|
|
||||||
</div>
|
|
||||||
<p class="text-[11px] text-slate-400 mt-0.5">Includes clean sponsor card</p>
|
|
||||||
</div>
|
|
||||||
<i data-lucide="file-text" class="w-5 h-5 text-slate-400 group-hover:text-purple-400"></i>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- RIGHT: AD ARCHITECTURE & METRICS EXPLAINER -->
|
|
||||||
<div class="glass-panel rounded-2xl p-5 border border-slate-800 flex flex-col justify-between space-y-4">
|
|
||||||
<div>
|
|
||||||
<h3 class="text-base font-bold text-white flex items-center gap-2">
|
|
||||||
<i data-lucide="trending-up" class="w-4 h-4 text-emerald-400"></i>
|
|
||||||
Ad Monetization Framework
|
|
||||||
</h3>
|
|
||||||
<p class="text-xs text-slate-400 mt-1">Research-backed strategy (50+ Sources Synthesized)</p>
|
|
||||||
|
|
||||||
<div class="mt-4 space-y-3">
|
|
||||||
<div class="p-3 rounded-xl bg-dark-900/80 border border-slate-800">
|
|
||||||
<div class="flex items-center justify-between text-xs">
|
|
||||||
<span class="font-semibold text-white">1. Opt-in Rewarded Video</span>
|
|
||||||
<span class="font-mono text-emerald-400">$8.50 eCPM</span>
|
|
||||||
</div>
|
|
||||||
<p class="text-[11px] text-slate-400 mt-1">User voluntarily watches a 15-second sponsor to unlock 50 additional Claude/GPT-4o cloud polishing tokens.</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="p-3 rounded-xl bg-dark-900/80 border border-slate-800">
|
|
||||||
<div class="flex items-center justify-between text-xs">
|
|
||||||
<span class="font-semibold text-white">2. Ethical Non-Intrusive Banner</span>
|
|
||||||
<span class="font-mono text-cyan-400">$3.20 eCPM</span>
|
|
||||||
</div>
|
|
||||||
<p class="text-[11px] text-slate-400 mt-1">Zero-cookie, developer-tool sponsorships in the main window dock. Completely separated from voice HUD.</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="p-3 rounded-xl bg-dark-900/80 border border-slate-800">
|
|
||||||
<div class="flex items-center justify-between text-xs">
|
|
||||||
<span class="font-semibold text-white">3. Export Sponsor Placement</span>
|
|
||||||
<span class="font-mono text-purple-400">$5.00 eCPM</span>
|
|
||||||
</div>
|
|
||||||
<p class="text-[11px] text-slate-400 mt-1">Lightweight 5s sponsor interstitial shown only during high-value batch meeting document export.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Live Telemetry Box -->
|
|
||||||
<div class="p-3 rounded-xl bg-brand-950/40 border border-brand-500/20 text-xs space-y-1.5 font-mono">
|
|
||||||
<div class="flex justify-between text-slate-400">
|
|
||||||
<span>Simulated Impressions:</span>
|
|
||||||
<span id="stat-impressions" class="text-white font-bold">1,482</span>
|
|
||||||
</div>
|
|
||||||
<div class="flex justify-between text-slate-400">
|
|
||||||
<span>Estimated Ad Rev:</span>
|
|
||||||
<span id="stat-revenue" class="text-emerald-400 font-bold">$7.84</span>
|
|
||||||
</div>
|
|
||||||
<div class="flex justify-between text-slate-400">
|
|
||||||
<span>Avg. Fill Rate:</span>
|
|
||||||
<span class="text-cyan-400 font-bold">98.2%</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- TAB 2: MULTI-PG PAYMENT & BILLING SIMULATOR -->
|
|
||||||
<section id="tab-payment" class="hidden space-y-6">
|
|
||||||
<div class="flex flex-col lg:flex-row lg:items-center justify-between gap-4">
|
|
||||||
<div>
|
|
||||||
<h1 class="text-2xl lg:text-3xl font-bold tracking-tight text-white flex items-center gap-3">
|
|
||||||
<span>Global & Domestic Payment Gateway Hub</span>
|
|
||||||
<span class="text-xs px-2.5 py-1 rounded-md bg-emerald-500/10 text-emerald-400 border border-emerald-500/20 font-mono">Stripe + Toss Payments</span>
|
|
||||||
</h1>
|
|
||||||
<p class="text-slate-400 text-sm mt-1">
|
|
||||||
Seamless multi-currency checkout: Korean Quick Pay (Toss, Kakao, Naver) + Global Cards (Stripe).
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="flex items-center gap-2 bg-dark-900 p-1.5 rounded-xl border border-slate-800">
|
|
||||||
<div class="flex bg-dark-950 p-1 rounded-lg border border-slate-800 text-xs">
|
|
||||||
<button onclick="setCurrency('KRW')" id="curr-krw" class="px-2.5 py-1 rounded font-bold bg-brand-600 text-white">KRW (₩)</button>
|
|
||||||
<button onclick="setCurrency('USD')" id="curr-usd" class="px-2.5 py-1 rounded text-slate-400 hover:text-white">USD ($)</button>
|
|
||||||
</div>
|
|
||||||
<div class="h-4 w-px bg-slate-700"></div>
|
|
||||||
<button onclick="toggleBillingPeriod()" id="billing-cycle-btn" class="px-3 py-1 bg-dark-950 hover:bg-slate-800 text-xs font-semibold text-slate-200 rounded-lg border border-slate-700 flex items-center gap-1.5">
|
|
||||||
<span id="cycle-label">Annual (20% Discount)</span>
|
|
||||||
<span class="px-1.5 py-0.5 bg-emerald-500/20 text-emerald-400 text-[10px] rounded font-mono">SAVE 20%</span>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- PRICING TIERS GRID -->
|
|
||||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
|
|
||||||
<!-- PLAN 1: PRO -->
|
|
||||||
<div class="glass-card rounded-2xl p-6 border border-slate-700 flex flex-col justify-between relative hover:border-brand-500/50 transition-all">
|
|
||||||
<div>
|
|
||||||
<div class="flex justify-between items-start">
|
|
||||||
<div>
|
|
||||||
<h3 class="text-lg font-bold text-white">Pro</h3>
|
|
||||||
<p class="text-xs text-slate-400 mt-0.5">For power creators & writers</p>
|
|
||||||
</div>
|
|
||||||
<span class="px-2 py-0.5 bg-brand-500/10 text-brand-400 text-xs font-mono rounded border border-brand-500/20">INDIVIDUAL</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="my-4">
|
|
||||||
<div class="flex items-baseline gap-1">
|
|
||||||
<span class="text-3xl font-black text-white" id="price-pro">₩119,000</span>
|
|
||||||
<span class="text-xs text-slate-400" id="period-pro">/ year</span>
|
|
||||||
</div>
|
|
||||||
<p class="text-xs text-emerald-400 mt-1" id="sub-pro">~ ₩9,900 / month</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<ul class="space-y-2.5 text-xs text-slate-300 mt-4 border-t border-slate-800 pt-4">
|
|
||||||
<li class="flex items-center gap-2"><i data-lucide="check" class="w-4 h-4 text-emerald-400"></i> 100% Ad-Free Experience</li>
|
|
||||||
<li class="flex items-center gap-2"><i data-lucide="check" class="w-4 h-4 text-emerald-400"></i> 1,850 Cloud LLM Tokens/month</li>
|
|
||||||
<li class="flex items-center gap-2"><i data-lucide="check" class="w-4 h-4 text-emerald-400"></i> Unlimited Transcription History</li>
|
|
||||||
<li class="flex items-center gap-2"><i data-lucide="check" class="w-4 h-4 text-emerald-400"></i> Live Caption & Screen Context</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<button onclick="startCheckout('pro', 'Pro Plan')" class="mt-6 w-full py-2.5 bg-brand-600 hover:bg-brand-500 text-white font-semibold text-xs rounded-xl shadow-lg shadow-brand-500/20 transition-all">
|
|
||||||
Subscribe Pro
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- PLAN 2: PRO+ -->
|
|
||||||
<div class="glass-card rounded-2xl p-6 border-2 border-brand-500 bg-gradient-to-b from-brand-950/40 via-dark-900 to-dark-900 flex flex-col justify-between relative shadow-xl shadow-brand-500/10">
|
|
||||||
<div class="absolute -top-3 right-6 bg-gradient-to-r from-cyan-500 to-brand-500 text-white text-[11px] font-bold px-3 py-0.5 rounded-full shadow">
|
|
||||||
MOST POPULAR
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<div class="flex justify-between items-start">
|
|
||||||
<div>
|
|
||||||
<h3 class="text-lg font-bold text-white flex items-center gap-1.5">
|
|
||||||
Pro+ <i data-lucide="zap" class="w-4 h-4 text-cyan-400 fill-cyan-400"></i>
|
|
||||||
</h3>
|
|
||||||
<p class="text-xs text-slate-400 mt-0.5">Professional Meeting Suite</p>
|
|
||||||
</div>
|
|
||||||
<span class="px-2 py-0.5 bg-cyan-500/10 text-cyan-400 text-xs font-mono rounded border border-cyan-500/20">PRO MEETING</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="my-4">
|
|
||||||
<div class="flex items-baseline gap-1">
|
|
||||||
<span class="text-3xl font-black text-white" id="price-proplus">₩229,000</span>
|
|
||||||
<span class="text-xs text-slate-400" id="period-proplus">/ year</span>
|
|
||||||
</div>
|
|
||||||
<p class="text-xs text-cyan-400 mt-1" id="sub-proplus">~ ₩19,080 / month</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<ul class="space-y-2.5 text-xs text-slate-300 mt-4 border-t border-slate-800 pt-4">
|
|
||||||
<li class="flex items-center gap-2"><i data-lucide="check" class="w-4 h-4 text-cyan-400"></i> Everything in Pro (Ad-Free)</li>
|
|
||||||
<li class="flex items-center gap-2"><i data-lucide="check" class="w-4 h-4 text-cyan-400"></i> Unlimited Cloud LLM Polish</li>
|
|
||||||
<li class="flex items-center gap-2"><i data-lucide="check" class="w-4 h-4 text-cyan-400"></i> AI Speaker Diarization (화자 구분)</li>
|
|
||||||
<li class="flex items-center gap-2"><i data-lucide="check" class="w-4 h-4 text-cyan-400"></i> Meeting Pro Multi-Doc Generator</li>
|
|
||||||
<li class="flex items-center gap-2"><i data-lucide="check" class="w-4 h-4 text-cyan-400"></i> VIP Priority Customer Support</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<button onclick="startCheckout('pro_plus', 'Pro+ Plan')" class="mt-6 w-full py-2.5 bg-gradient-to-r from-cyan-500 to-brand-600 hover:from-cyan-400 hover:to-brand-500 text-white font-bold text-xs rounded-xl shadow-lg shadow-cyan-500/25 transition-all">
|
|
||||||
Subscribe Pro+
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- PLAN 3: TEAM -->
|
|
||||||
<div class="glass-card rounded-2xl p-6 border border-slate-700 flex flex-col justify-between relative hover:border-purple-500/50 transition-all">
|
|
||||||
<div>
|
|
||||||
<div class="flex justify-between items-start">
|
|
||||||
<div>
|
|
||||||
<h3 class="text-lg font-bold text-white">Team</h3>
|
|
||||||
<p class="text-xs text-slate-400 mt-0.5">Collaborative Workspace</p>
|
|
||||||
</div>
|
|
||||||
<span class="px-2 py-0.5 bg-purple-500/10 text-purple-400 text-xs font-mono rounded border border-purple-500/20">ORGANIZATION</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="my-4">
|
|
||||||
<div class="flex items-baseline gap-1">
|
|
||||||
<span class="text-3xl font-black text-white" id="price-team">₩299,000</span>
|
|
||||||
<span class="text-xs text-slate-400" id="period-team">/ user / year</span>
|
|
||||||
</div>
|
|
||||||
<p class="text-xs text-purple-400 mt-1" id="sub-team">~ ₩24,900 / month</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<ul class="space-y-2.5 text-xs text-slate-300 mt-4 border-t border-slate-800 pt-4">
|
|
||||||
<li class="flex items-center gap-2"><i data-lucide="check" class="w-4 h-4 text-purple-400"></i> All Pro+ Capabilities</li>
|
|
||||||
<li class="flex items-center gap-2"><i data-lucide="check" class="w-4 h-4 text-purple-400"></i> Shared Technical Dictionary</li>
|
|
||||||
<li class="flex items-center gap-2"><i data-lucide="check" class="w-4 h-4 text-purple-400"></i> Centralized Admin & Billing CRM</li>
|
|
||||||
<li class="flex items-center gap-2"><i data-lucide="check" class="w-4 h-4 text-purple-400"></i> Automated Tax Invoices (세금계산서)</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<button onclick="startCheckout('team', 'Team Plan')" class="mt-6 w-full py-2.5 bg-purple-600 hover:bg-purple-500 text-white font-semibold text-xs rounded-xl shadow-lg shadow-purple-500/20 transition-all">
|
|
||||||
Subscribe Team
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- TAB 3: CUSTOMER SUPPORT (CA/CS) & AI DIAGNOSTICS -->
|
|
||||||
<section id="tab-support" class="hidden space-y-6">
|
|
||||||
<div class="flex flex-col lg:flex-row lg:items-center justify-between gap-4">
|
|
||||||
<div>
|
|
||||||
<h1 class="text-2xl lg:text-3xl font-bold tracking-tight text-white flex items-center gap-3">
|
|
||||||
<span>Customer Assistance (CA) & AI Diagnostic Desk</span>
|
|
||||||
<span class="text-xs px-2.5 py-1 rounded-md bg-purple-500/10 text-purple-400 border border-purple-500/20 font-mono">Channel.io + AI Auto-Triage</span>
|
|
||||||
</h1>
|
|
||||||
<p class="text-slate-400 text-sm mt-1">
|
|
||||||
24/7 AI-first customer assistance with 1-click system diagnostics log attachment and self-service refund engine.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
|
|
||||||
<!-- LIVE AI CHATBOT -->
|
|
||||||
<div class="lg:col-span-2 glass-panel rounded-2xl p-5 border border-slate-800 flex flex-col h-[560px]">
|
|
||||||
<div class="flex items-center justify-between pb-3 border-b border-slate-800">
|
|
||||||
<div class="flex items-center gap-3">
|
|
||||||
<div class="w-8 h-8 rounded-full bg-purple-500/20 border border-purple-500/30 flex items-center justify-center">
|
|
||||||
<i data-lucide="bot" class="w-4 h-4 text-purple-400"></i>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<h4 class="text-sm font-bold text-white">D3RO AI First-Line Assistant</h4>
|
|
||||||
<p class="text-[11px] text-emerald-400 flex items-center gap-1">
|
|
||||||
<span class="w-1.5 h-1.5 rounded-full bg-emerald-400"></span> Online • Responds in ~300ms
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<button onclick="triggerDiagnosticScan()" class="text-xs px-3 py-1.5 bg-dark-900 hover:bg-slate-800 text-cyan-400 border border-cyan-500/30 rounded-lg flex items-center gap-1.5">
|
|
||||||
<i data-lucide="activity" class="w-3.5 h-3.5"></i> Capture System Diagnostics
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- CHAT MESSAGE LOG CONTAINER -->
|
|
||||||
<div id="chat-messages" class="flex-1 overflow-y-auto p-4 space-y-3 custom-scrollbar text-xs">
|
|
||||||
<div class="flex items-start gap-2.5 max-w-[85%]">
|
|
||||||
<div class="w-6 h-6 rounded-full bg-purple-500/30 flex items-center justify-center shrink-0 mt-0.5">
|
|
||||||
<i data-lucide="bot" class="w-3.5 h-3.5 text-purple-300"></i>
|
|
||||||
</div>
|
|
||||||
<div class="bg-dark-900 border border-slate-800 p-3 rounded-2xl rounded-tl-none text-slate-200 leading-relaxed shadow">
|
|
||||||
안녕하세요! D3RO Voice 고객지원 AI 어시스턴트입니다. 마이크 설정, Whisper 모델 구동, 결제/환불, 단축키 문제 등 무엇이든 도와드릴 수 있습니다.
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- QUICK PROMPTS CHIPS -->
|
|
||||||
<div class="py-2 flex items-center gap-2 overflow-x-auto custom-scrollbar border-t border-slate-800/80">
|
|
||||||
<button onclick="askBotQuestion('마이크 음성 인식이 안 돼요')" class="text-[11px] px-2.5 py-1 rounded-full bg-dark-900 hover:bg-slate-800 border border-slate-700 text-slate-300 whitespace-nowrap">
|
|
||||||
🎤 마이크 음성 인식 오류
|
|
||||||
</button>
|
|
||||||
<button onclick="askBotQuestion('환불 정책 및 자동 환불 신청 방법')" class="text-[11px] px-2.5 py-1 rounded-full bg-dark-900 hover:bg-slate-800 border border-slate-700 text-slate-300 whitespace-nowrap">
|
|
||||||
💳 환불 규정 및 자동 확인
|
|
||||||
</button>
|
|
||||||
<button onclick="askBotQuestion('CUDA GPU 가속 활성화는 어떻게 하나요?')" class="text-[11px] px-2.5 py-1 rounded-full bg-dark-900 hover:bg-slate-800 border border-slate-700 text-slate-300 whitespace-nowrap">
|
|
||||||
⚡ CUDA GPU 가속 설정
|
|
||||||
</button>
|
|
||||||
<button onclick="askBotQuestion('세금계산서 발행은 어떻게 받나요?')" class="text-[11px] px-2.5 py-1 rounded-full bg-dark-900 hover:bg-slate-800 border border-slate-700 text-slate-300 whitespace-nowrap">
|
|
||||||
📄 세금계산서 발행
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- INPUT FORM -->
|
|
||||||
<form onsubmit="handleUserChat(event)" class="flex items-center gap-2 pt-2">
|
|
||||||
<input type="text" id="chat-input" placeholder="문의 사항을 입력하세요... (예: 마이크 인식이 끊깁니다)" class="flex-1 bg-dark-950 border border-slate-700 rounded-xl px-4 py-2 text-xs text-white placeholder-slate-500 focus:outline-none focus:border-purple-500">
|
|
||||||
<button type="submit" class="px-4 py-2 bg-purple-600 hover:bg-purple-500 text-white rounded-xl text-xs font-semibold flex items-center gap-1.5 shadow">
|
|
||||||
<span>전송</span> <i data-lucide="send" class="w-3.5 h-3.5"></i>
|
|
||||||
</button>
|
|
||||||
</form>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- RIGHT: DIAGNOSTICS PAYLOAD -->
|
|
||||||
<div class="glass-panel rounded-2xl p-5 border border-slate-800 flex flex-col justify-between space-y-4">
|
|
||||||
<div>
|
|
||||||
<div class="flex items-center justify-between">
|
|
||||||
<h3 class="text-sm font-bold text-white flex items-center gap-2">
|
|
||||||
<i data-lucide="cpu" class="w-4 h-4 text-cyan-400"></i>
|
|
||||||
Client Telemetry Snapshot
|
|
||||||
</h3>
|
|
||||||
<span class="text-[10px] font-mono text-slate-400">Auto-Attached</span>
|
|
||||||
</div>
|
|
||||||
<p class="text-[11px] text-slate-400 mt-1">1-click diagnostic data for rapid engineering triage.</p>
|
|
||||||
|
|
||||||
<pre id="diagnostic-json" class="mt-3 p-3 rounded-xl bg-dark-950 border border-slate-800 font-mono text-[10px] text-cyan-300 leading-tight overflow-x-auto h-48 custom-scrollbar">
|
|
||||||
{
|
|
||||||
"machineId": "d3ro-win-88f21a",
|
|
||||||
"appVersion": "1.0.0 (Release)",
|
|
||||||
"os": "Windows 11 23H2 (x64)",
|
|
||||||
"micDevice": "Realtek High Def (Default)",
|
|
||||||
"sttEngine": "faster-whisper (local)",
|
|
||||||
"gpuCuda": true,
|
|
||||||
"vramFree": "6.4 GB / 8.0 GB",
|
|
||||||
"tier": "free",
|
|
||||||
"recentErrors": [
|
|
||||||
"No active critical errors"
|
|
||||||
]
|
|
||||||
}
|
|
||||||
</pre>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="space-y-2 pt-2 border-t border-slate-800">
|
|
||||||
<button onclick="openTicketModal()" class="w-full py-2.5 bg-dark-900 hover:bg-slate-800 border border-slate-700 text-white text-xs font-semibold rounded-xl flex items-center justify-center gap-2 transition-all">
|
|
||||||
<i data-lucide="ticket" class="w-4 h-4 text-brand-400"></i>
|
|
||||||
Create Formal Support Ticket
|
|
||||||
</button>
|
|
||||||
<button onclick="checkInstantRefund()" class="w-full py-2 bg-slate-900 hover:bg-slate-800/80 border border-slate-800 text-slate-300 text-xs rounded-xl flex items-center justify-center gap-1.5">
|
|
||||||
<i data-lucide="refresh-cw" class="w-3.5 h-3.5 text-emerald-400"></i>
|
|
||||||
Self-Service 7-Day Refund Check
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- TAB 4: UNIFIED ADMIN COMMAND & REVENUE CENTER -->
|
|
||||||
<section id="tab-admin" class="hidden space-y-6">
|
|
||||||
<div class="flex flex-col lg:flex-row lg:items-center justify-between gap-4">
|
|
||||||
<div>
|
|
||||||
<h1 class="text-2xl lg:text-3xl font-bold tracking-tight text-white flex items-center gap-3">
|
|
||||||
<span>Executive Admin & Monetization CRM</span>
|
|
||||||
<span class="text-xs px-2.5 py-1 rounded-md bg-red-500/10 text-red-400 border border-red-500/20 font-mono">SUPER_ADMIN</span>
|
|
||||||
</h1>
|
|
||||||
<p class="text-slate-400 text-sm mt-1">
|
|
||||||
Real-time telemetry across Ad Mediation, Multi-PG Recurring Revenue, and Customer Support SLA.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- KPI METRIC CARDS -->
|
|
||||||
<div class="grid grid-cols-2 lg:grid-cols-4 gap-4">
|
|
||||||
<div class="glass-card p-4 rounded-2xl border border-slate-800">
|
|
||||||
<div class="flex justify-between items-center text-xs text-slate-400">
|
|
||||||
<span>Monthly Rec. Revenue (MRR)</span>
|
|
||||||
<i data-lucide="dollar-sign" class="w-4 h-4 text-emerald-400"></i>
|
|
||||||
</div>
|
|
||||||
<div class="text-2xl font-black text-white mt-1">₩18,420,000</div>
|
|
||||||
<div class="text-[11px] text-emerald-400 mt-1 flex items-center gap-1 font-mono">
|
|
||||||
<i data-lucide="arrow-up-right" class="w-3.5 h-3.5"></i> +24.8% vs last month
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="glass-card p-4 rounded-2xl border border-slate-800">
|
|
||||||
<div class="flex justify-between items-center text-xs text-slate-400">
|
|
||||||
<span>Free Tier Ad Revenue</span>
|
|
||||||
<i data-lucide="tv" class="w-4 h-4 text-cyan-400"></i>
|
|
||||||
</div>
|
|
||||||
<div class="text-2xl font-black text-cyan-400 mt-1">$4,620.50</div>
|
|
||||||
<div class="text-[11px] text-cyan-300 mt-1 flex items-center gap-1 font-mono">
|
|
||||||
<span>eCPM: $5.84 avg</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="glass-card p-4 rounded-2xl border border-slate-800">
|
|
||||||
<div class="flex justify-between items-center text-xs text-slate-400">
|
|
||||||
<span>Active Subscribers</span>
|
|
||||||
<i data-lucide="users" class="w-4 h-4 text-purple-400"></i>
|
|
||||||
</div>
|
|
||||||
<div class="text-2xl font-black text-white mt-1">1,942</div>
|
|
||||||
<div class="text-[11px] text-purple-300 mt-1 flex items-center gap-1 font-mono">
|
|
||||||
<span>Churn: 1.4% (Top Tier)</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="glass-card p-4 rounded-2xl border border-slate-800">
|
|
||||||
<div class="flex justify-between items-center text-xs text-slate-400">
|
|
||||||
<span>Open Support Tickets</span>
|
|
||||||
<i data-lucide="message-square" class="w-4 h-4 text-amber-400"></i>
|
|
||||||
</div>
|
|
||||||
<div class="text-2xl font-black text-amber-400 mt-1">4 <span class="text-xs text-slate-400 font-normal">/ 180 total</span></div>
|
|
||||||
<div class="text-[11px] text-emerald-400 mt-1 flex items-center gap-1 font-mono">
|
|
||||||
<span>AI Auto-Resolved: 78.5%</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- 10+ AD NETWORKS MEDIATION AUCTION MATRIX -->
|
|
||||||
<div class="glass-panel rounded-2xl p-5 border border-slate-800 space-y-4">
|
|
||||||
<div class="flex flex-col sm:flex-row sm:items-center justify-between gap-2 border-b border-slate-800 pb-3">
|
|
||||||
<div>
|
|
||||||
<h3 class="text-sm font-bold text-white flex items-center gap-2">
|
|
||||||
<i data-lucide="network" class="w-4 h-4 text-cyan-400"></i>
|
|
||||||
10+ Active Multi-Ad Demand Partners & Real-Time Auction Waterfall
|
|
||||||
</h3>
|
|
||||||
<p class="text-xs text-slate-400 mt-0.5">Sub-800ms parallel header bidding auction with first-price dynamic yield.</p>
|
|
||||||
</div>
|
|
||||||
<span class="text-xs font-mono px-2.5 py-1 bg-cyan-500/10 text-cyan-400 border border-cyan-500/20 rounded-md">
|
|
||||||
Auction Timeout: 800ms
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="overflow-x-auto custom-scrollbar">
|
|
||||||
<table class="w-full text-left text-xs">
|
|
||||||
<thead class="text-slate-400 border-b border-slate-800 font-mono">
|
|
||||||
<tr>
|
|
||||||
<th class="py-2 px-3">Network Partner</th>
|
|
||||||
<th class="py-2 px-3">Adapter Protocol</th>
|
|
||||||
<th class="py-2 px-3">Supported Ad Slot</th>
|
|
||||||
<th class="py-2 px-3 text-right">Impressions</th>
|
|
||||||
<th class="py-2 px-3 text-right">CTR</th>
|
|
||||||
<th class="py-2 px-3 text-right">Bid eCPM</th>
|
|
||||||
<th class="py-2 px-3 text-right">Gross Rev. ($)</th>
|
|
||||||
<th class="py-2 px-3 text-center">Fill Rate</th>
|
|
||||||
<th class="py-2 px-3 text-center">Status</th>
|
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
<tbody class="divide-y divide-slate-800/60 text-slate-300 font-sans">
|
|
||||||
<tr class="hover:bg-slate-800/30">
|
|
||||||
<td class="py-2.5 px-3 font-semibold text-white">Direct House Sponsor Engine</td>
|
|
||||||
<td class="py-2.5 px-3 font-mono text-cyan-400">Direct Contract</td>
|
|
||||||
<td class="py-2.5 px-3 text-slate-400">Bottom Dock / Video / Export</td>
|
|
||||||
<td class="py-2.5 px-3 text-right font-mono text-white">84,000</td>
|
|
||||||
<td class="py-2.5 px-3 text-right font-mono text-emerald-400">5.0%</td>
|
|
||||||
<td class="py-2.5 px-3 text-right font-mono font-bold text-cyan-400">$15.20</td>
|
|
||||||
<td class="py-2.5 px-3 text-right font-mono font-bold text-white">$1,276.80</td>
|
|
||||||
<td class="py-2.5 px-3 text-center font-mono">100.0%</td>
|
|
||||||
<td class="py-2.5 px-3 text-center"><span class="px-2 py-0.5 rounded text-[10px] bg-emerald-500/20 text-emerald-300 font-mono">ACTIVE</span></td>
|
|
||||||
</tr>
|
|
||||||
<tr class="hover:bg-slate-800/30">
|
|
||||||
<td class="py-2.5 px-3 font-semibold text-white">Playwire RAMP Engine</td>
|
|
||||||
<td class="py-2.5 px-3 font-mono text-cyan-400">Header Bidding SSP</td>
|
|
||||||
<td class="py-2.5 px-3 text-slate-400">Desktop Video & Display</td>
|
|
||||||
<td class="py-2.5 px-3 text-right font-mono text-white">62,000</td>
|
|
||||||
<td class="py-2.5 px-3 text-right font-mono text-emerald-400">7.0%</td>
|
|
||||||
<td class="py-2.5 px-3 text-right font-mono font-bold text-cyan-400">$8.40</td>
|
|
||||||
<td class="py-2.5 px-3 text-right font-mono font-bold text-white">$520.80</td>
|
|
||||||
<td class="py-2.5 px-3 text-center font-mono">96.2%</td>
|
|
||||||
<td class="py-2.5 px-3 text-center"><span class="px-2 py-0.5 rounded text-[10px] bg-cyan-500/20 text-cyan-300 font-mono">BIDDING</span></td>
|
|
||||||
</tr>
|
|
||||||
<tr class="hover:bg-slate-800/30">
|
|
||||||
<td class="py-2.5 px-3 font-semibold text-white">AppLovin MAX</td>
|
|
||||||
<td class="py-2.5 px-3 font-mono text-cyan-400">In-App Bidding</td>
|
|
||||||
<td class="py-2.5 px-3 text-slate-400">Rewarded Video (15s)</td>
|
|
||||||
<td class="py-2.5 px-3 text-right font-mono text-white">48,000</td>
|
|
||||||
<td class="py-2.5 px-3 text-right font-mono text-emerald-400">8.0%</td>
|
|
||||||
<td class="py-2.5 px-3 text-right font-mono font-bold text-cyan-400">$7.80</td>
|
|
||||||
<td class="py-2.5 px-3 text-right font-mono font-bold text-white">$374.40</td>
|
|
||||||
<td class="py-2.5 px-3 text-center font-mono">94.5%</td>
|
|
||||||
<td class="py-2.5 px-3 text-center"><span class="px-2 py-0.5 rounded text-[10px] bg-cyan-500/20 text-cyan-300 font-mono">BIDDING</span></td>
|
|
||||||
</tr>
|
|
||||||
<tr class="hover:bg-slate-800/30">
|
|
||||||
<td class="py-2.5 px-3 font-semibold text-white">Unity LevelPlay</td>
|
|
||||||
<td class="py-2.5 px-3 font-mono text-cyan-400">Rewarded Video SDK</td>
|
|
||||||
<td class="py-2.5 px-3 text-slate-400">Rewarded Quota Refill</td>
|
|
||||||
<td class="py-2.5 px-3 text-right font-mono text-white">45,000</td>
|
|
||||||
<td class="py-2.5 px-3 text-right font-mono text-emerald-400">9.0%</td>
|
|
||||||
<td class="py-2.5 px-3 text-right font-mono font-bold text-cyan-400">$9.10</td>
|
|
||||||
<td class="py-2.5 px-3 text-right font-mono font-bold text-white">$409.50</td>
|
|
||||||
<td class="py-2.5 px-3 text-center font-mono">95.1%</td>
|
|
||||||
<td class="py-2.5 px-3 text-center"><span class="px-2 py-0.5 rounded text-[10px] bg-emerald-500/20 text-emerald-300 font-mono">ACTIVE</span></td>
|
|
||||||
</tr>
|
|
||||||
<tr class="hover:bg-slate-800/30">
|
|
||||||
<td class="py-2.5 px-3 font-semibold text-white">EthicalAds Privacy Dev Network</td>
|
|
||||||
<td class="py-2.5 px-3 font-mono text-cyan-400">REST Decision API</td>
|
|
||||||
<td class="py-2.5 px-3 text-slate-400">Bottom Dock Banner</td>
|
|
||||||
<td class="py-2.5 px-3 text-right font-mono text-white">38,000</td>
|
|
||||||
<td class="py-2.5 px-3 text-right font-mono text-emerald-400">1.6%</td>
|
|
||||||
<td class="py-2.5 px-3 text-right font-mono font-bold text-cyan-400">$3.80</td>
|
|
||||||
<td class="py-2.5 px-3 text-right font-mono font-bold text-white">$144.40</td>
|
|
||||||
<td class="py-2.5 px-3 text-center font-mono">99.4%</td>
|
|
||||||
<td class="py-2.5 px-3 text-center"><span class="px-2 py-0.5 rounded text-[10px] bg-emerald-500/20 text-emerald-300 font-mono">ACTIVE</span></td>
|
|
||||||
</tr>
|
|
||||||
<tr class="hover:bg-slate-800/30">
|
|
||||||
<td class="py-2.5 px-3 font-semibold text-white">Carbon Ads (BuySellAds)</td>
|
|
||||||
<td class="py-2.5 px-3 font-mono text-cyan-400">Native JSON Endpoint</td>
|
|
||||||
<td class="py-2.5 px-3 text-slate-400">Tech Developer Unit</td>
|
|
||||||
<td class="py-2.5 px-3 text-right font-mono text-white">31,000</td>
|
|
||||||
<td class="py-2.5 px-3 text-right font-mono text-emerald-400">1.9%</td>
|
|
||||||
<td class="py-2.5 px-3 text-right font-mono font-bold text-cyan-400">$4.20</td>
|
|
||||||
<td class="py-2.5 px-3 text-right font-mono font-bold text-white">$130.20</td>
|
|
||||||
<td class="py-2.5 px-3 text-center font-mono">98.8%</td>
|
|
||||||
<td class="py-2.5 px-3 text-center"><span class="px-2 py-0.5 rounded text-[10px] bg-emerald-500/20 text-emerald-300 font-mono">ACTIVE</span></td>
|
|
||||||
</tr>
|
|
||||||
<tr class="hover:bg-slate-800/30">
|
|
||||||
<td class="py-2.5 px-3 font-semibold text-white">Google Ad Manager 360</td>
|
|
||||||
<td class="py-2.5 px-3 font-mono text-cyan-400">Universal Ad Server</td>
|
|
||||||
<td class="py-2.5 px-3 text-slate-400">Global Display & Video</td>
|
|
||||||
<td class="py-2.5 px-3 text-right font-mono text-white">29,000</td>
|
|
||||||
<td class="py-2.5 px-3 text-right font-mono text-emerald-400">2.0%</td>
|
|
||||||
<td class="py-2.5 px-3 text-right font-mono font-bold text-cyan-400">$3.50</td>
|
|
||||||
<td class="py-2.5 px-3 text-right font-mono font-bold text-white">$101.50</td>
|
|
||||||
<td class="py-2.5 px-3 text-center font-mono">99.8%</td>
|
|
||||||
<td class="py-2.5 px-3 text-center"><span class="px-2 py-0.5 rounded text-[10px] bg-cyan-500/20 text-cyan-300 font-mono">BIDDING</span></td>
|
|
||||||
</tr>
|
|
||||||
<tr class="hover:bg-slate-800/30">
|
|
||||||
<td class="py-2.5 px-3 font-semibold text-white">Mintegral APAC Network</td>
|
|
||||||
<td class="py-2.5 px-3 font-mono text-cyan-400">Video & Playable SDK</td>
|
|
||||||
<td class="py-2.5 px-3 text-slate-400">Rewarded Video (15s)</td>
|
|
||||||
<td class="py-2.5 px-3 text-right font-mono text-white">22,000</td>
|
|
||||||
<td class="py-2.5 px-3 text-right font-mono text-emerald-400">8.0%</td>
|
|
||||||
<td class="py-2.5 px-3 text-right font-mono font-bold text-cyan-400">$6.20</td>
|
|
||||||
<td class="py-2.5 px-3 text-right font-mono font-bold text-white">$136.40</td>
|
|
||||||
<td class="py-2.5 px-3 text-center font-mono">92.4%</td>
|
|
||||||
<td class="py-2.5 px-3 text-center"><span class="px-2 py-0.5 rounded text-[10px] bg-cyan-500/20 text-cyan-300 font-mono">BIDDING</span></td>
|
|
||||||
</tr>
|
|
||||||
<tr class="hover:bg-slate-800/30">
|
|
||||||
<td class="py-2.5 px-3 font-semibold text-white">InMobi Exchange</td>
|
|
||||||
<td class="py-2.5 px-3 font-mono text-cyan-400">RTB Exchange</td>
|
|
||||||
<td class="py-2.5 px-3 text-slate-400">Banner & Video</td>
|
|
||||||
<td class="py-2.5 px-3 text-right font-mono text-white">19,000</td>
|
|
||||||
<td class="py-2.5 px-3 text-right font-mono text-emerald-400">2.0%</td>
|
|
||||||
<td class="py-2.5 px-3 text-right font-mono font-bold text-cyan-400">$3.40</td>
|
|
||||||
<td class="py-2.5 px-3 text-right font-mono font-bold text-white">$64.60</td>
|
|
||||||
<td class="py-2.5 px-3 text-center font-mono">91.2%</td>
|
|
||||||
<td class="py-2.5 px-3 text-center"><span class="px-2 py-0.5 rounded text-[10px] bg-emerald-500/20 text-emerald-300 font-mono">ACTIVE</span></td>
|
|
||||||
</tr>
|
|
||||||
<tr class="hover:bg-slate-800/30">
|
|
||||||
<td class="py-2.5 px-3 font-semibold text-white">PubMatic OpenWrap SSP</td>
|
|
||||||
<td class="py-2.5 px-3 font-mono text-cyan-400">Prebid SSP</td>
|
|
||||||
<td class="py-2.5 px-3 text-slate-400">Bottom Dock Banner</td>
|
|
||||||
<td class="py-2.5 px-3 text-right font-mono text-white">15,000</td>
|
|
||||||
<td class="py-2.5 px-3 text-right font-mono text-emerald-400">1.5%</td>
|
|
||||||
<td class="py-2.5 px-3 text-right font-mono font-bold text-cyan-400">$3.60</td>
|
|
||||||
<td class="py-2.5 px-3 text-right font-mono font-bold text-white">$54.00</td>
|
|
||||||
<td class="py-2.5 px-3 text-center font-mono">90.5%</td>
|
|
||||||
<td class="py-2.5 px-3 text-center"><span class="px-2 py-0.5 rounded text-[10px] bg-cyan-500/20 text-cyan-300 font-mono">BIDDING</span></td>
|
|
||||||
</tr>
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- MONTHLY SETTLEMENT & TAX WITHHOLDING PAYOUT LEDGER -->
|
|
||||||
<div class="glass-panel rounded-2xl p-5 border border-slate-800 space-y-4">
|
|
||||||
<div class="flex flex-col sm:flex-row sm:items-center justify-between gap-2 border-b border-slate-800 pb-3">
|
|
||||||
<div>
|
|
||||||
<h3 class="text-sm font-bold text-white flex items-center gap-2">
|
|
||||||
<i data-lucide="receipt" class="w-4 h-4 text-emerald-400"></i>
|
|
||||||
Monthly Revenue Settlement & Tax Withholding Ledger
|
|
||||||
</h3>
|
|
||||||
<p class="text-xs text-slate-400 mt-0.5">Publisher Account: yunchanpaca@gmail.com • KB국민은행 928702-00-184920</p>
|
|
||||||
</div>
|
|
||||||
<span class="text-xs font-mono px-2.5 py-1 bg-emerald-500/10 text-emerald-400 border border-emerald-500/20 rounded-md">
|
|
||||||
Auto 3.3% Tax Withholding Deducted
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="overflow-x-auto custom-scrollbar">
|
|
||||||
<table class="w-full text-left text-xs">
|
|
||||||
<thead class="text-slate-400 border-b border-slate-800 font-mono">
|
|
||||||
<tr>
|
|
||||||
<th class="py-2 px-3">Settlement ID</th>
|
|
||||||
<th class="py-2 px-3">Month</th>
|
|
||||||
<th class="py-2 px-3">Demand Network</th>
|
|
||||||
<th class="py-2 px-3 text-right">Gross ($ USD)</th>
|
|
||||||
<th class="py-2 px-3 text-center">Tax Withholding</th>
|
|
||||||
<th class="py-2 px-3 text-right">Net Payout (₩ KRW)</th>
|
|
||||||
<th class="py-2 px-3 text-left">Beneficiary Method</th>
|
|
||||||
<th class="py-2 px-3 text-center">Payout Status</th>
|
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
<tbody class="divide-y divide-slate-800/60 text-slate-300 font-sans">
|
|
||||||
<tr class="hover:bg-slate-800/30">
|
|
||||||
<td class="py-2.5 px-3 font-mono text-cyan-400">STL-202607-DIR</td>
|
|
||||||
<td class="py-2.5 px-3 font-mono text-slate-400">2026-07</td>
|
|
||||||
<td class="py-2.5 px-3 font-semibold text-white">Direct House Sponsor (Cursor/Notion)</td>
|
|
||||||
<td class="py-2.5 px-3 text-right font-mono text-white">$1,276.80</td>
|
|
||||||
<td class="py-2.5 px-3 text-center font-mono text-amber-400">3.3% (₩56,870)</td>
|
|
||||||
<td class="py-2.5 px-3 text-right font-mono font-bold text-emerald-400">₩1,666,810</td>
|
|
||||||
<td class="py-2.5 px-3 font-mono text-slate-400 text-[11px]">KB국민 928702-00-184920</td>
|
|
||||||
<td class="py-2.5 px-3 text-center"><span class="px-2 py-0.5 rounded text-[10px] bg-emerald-500/20 text-emerald-300 font-mono">PAID</span></td>
|
|
||||||
</tr>
|
|
||||||
<tr class="hover:bg-slate-800/30">
|
|
||||||
<td class="py-2.5 px-3 font-mono text-cyan-400">STL-202607-PLY</td>
|
|
||||||
<td class="py-2.5 px-3 font-mono text-slate-400">2026-07</td>
|
|
||||||
<td class="py-2.5 px-3 font-semibold text-white">Playwire RAMP Desktop Header Bidding</td>
|
|
||||||
<td class="py-2.5 px-3 text-right font-mono text-white">$520.80</td>
|
|
||||||
<td class="py-2.5 px-3 text-center font-mono text-amber-400">3.3% (₩23,200)</td>
|
|
||||||
<td class="py-2.5 px-3 text-right font-mono font-bold text-emerald-400">₩679,880</td>
|
|
||||||
<td class="py-2.5 px-3 font-mono text-slate-400 text-[11px]">Wire Transfer (USD)</td>
|
|
||||||
<td class="py-2.5 px-3 text-center"><span class="px-2 py-0.5 rounded text-[10px] bg-emerald-500/20 text-emerald-300 font-mono">PAID</span></td>
|
|
||||||
</tr>
|
|
||||||
<tr class="hover:bg-slate-800/30">
|
|
||||||
<td class="py-2.5 px-3 font-mono text-cyan-400">STL-202607-APL</td>
|
|
||||||
<td class="py-2.5 px-3 font-mono text-slate-400">2026-07</td>
|
|
||||||
<td class="py-2.5 px-3 font-semibold text-white">AppLovin MAX In-App Bidding</td>
|
|
||||||
<td class="py-2.5 px-3 text-right font-mono text-white">$374.40</td>
|
|
||||||
<td class="py-2.5 px-3 text-center font-mono text-amber-400">3.3% (₩16,680)</td>
|
|
||||||
<td class="py-2.5 px-3 text-right font-mono font-bold text-emerald-400">₩488,760</td>
|
|
||||||
<td class="py-2.5 px-3 font-mono text-slate-400 text-[11px]">Wire Transfer (USD)</td>
|
|
||||||
<td class="py-2.5 px-3 text-center"><span class="px-2 py-0.5 rounded text-[10px] bg-amber-500/20 text-amber-300 font-mono">SETTLED</span></td>
|
|
||||||
</tr>
|
|
||||||
<tr class="hover:bg-slate-800/30">
|
|
||||||
<td class="py-2.5 px-3 font-mono text-cyan-400">STL-202607-UNT</td>
|
|
||||||
<td class="py-2.5 px-3 font-mono text-slate-400">2026-07</td>
|
|
||||||
<td class="py-2.5 px-3 font-semibold text-white">Unity LevelPlay Rewarded Video</td>
|
|
||||||
<td class="py-2.5 px-3 text-right font-mono text-white">$409.50</td>
|
|
||||||
<td class="py-2.5 px-3 text-center font-mono text-amber-400">3.3% (₩18,240)</td>
|
|
||||||
<td class="py-2.5 px-3 text-right font-mono font-bold text-emerald-400">₩534,580</td>
|
|
||||||
<td class="py-2.5 px-3 font-mono text-slate-400 text-[11px]">PayPal (yunchanpaca@gmail.com)</td>
|
|
||||||
<td class="py-2.5 px-3 text-center"><span class="px-2 py-0.5 rounded text-[10px] bg-amber-500/20 text-amber-300 font-mono">SETTLED</span></td>
|
|
||||||
</tr>
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
</main>
|
|
||||||
|
|
||||||
<!-- MODALS -->
|
|
||||||
<div id="rewarded-ad-modal" class="fixed inset-0 bg-black/80 backdrop-blur-md hidden z-50 flex items-center justify-center p-4">
|
|
||||||
<div class="glass-panel w-full max-w-lg rounded-2xl border border-slate-700 p-6 space-y-4 glow-cyan">
|
|
||||||
<div class="flex items-center justify-between border-b border-slate-800 pb-3">
|
|
||||||
<div class="flex items-center gap-2">
|
|
||||||
<i data-lucide="play-circle" class="w-5 h-5 text-cyan-400"></i>
|
|
||||||
<h3 class="text-sm font-bold text-white">Sponsor Video — Refill +50 Free AI Tokens</h3>
|
|
||||||
</div>
|
|
||||||
<button onclick="closeRewardedAdModal()" class="text-slate-400 hover:text-white"><i data-lucide="x" class="w-4 h-4"></i></button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="w-full h-56 bg-slate-950 rounded-xl border border-slate-800 relative overflow-hidden flex flex-col justify-between p-4">
|
|
||||||
<div class="flex justify-between items-start">
|
|
||||||
<span class="px-2 py-0.5 bg-cyan-500/20 text-cyan-300 text-[11px] font-mono rounded">SPONSOR AD</span>
|
|
||||||
<div class="bg-black/60 px-2.5 py-1 rounded-full text-xs font-mono text-white flex items-center gap-1.5">
|
|
||||||
<i data-lucide="clock" class="w-3 h-3 text-cyan-400"></i>
|
|
||||||
<span id="ad-timer">15s</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="text-center space-y-2">
|
|
||||||
<div class="w-12 h-12 rounded-xl bg-cyan-500/20 text-cyan-400 mx-auto flex items-center justify-center">
|
|
||||||
<i data-lucide="sparkles" class="w-6 h-6"></i>
|
|
||||||
</div>
|
|
||||||
<h4 class="text-base font-bold text-white">ElevenLabs Voice Synthesizer</h4>
|
|
||||||
<p class="text-xs text-slate-400">Human-like AI audio generation for developers & creators.</p>
|
|
||||||
</div>
|
|
||||||
<div class="w-full bg-slate-800 h-1.5 rounded-full overflow-hidden">
|
|
||||||
<div id="ad-progress-bar" class="bg-cyan-400 h-full w-0 transition-all duration-1000 ease-linear"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="flex items-center justify-between text-xs text-slate-400">
|
|
||||||
<span>Reward: <strong>+50 Cloud LLM Polish Tokens</strong></span>
|
|
||||||
<button id="claim-reward-btn" disabled onclick="claimAdReward()" class="px-4 py-2 bg-slate-800 text-slate-500 font-bold rounded-xl text-xs transition-all cursor-not-allowed">
|
|
||||||
Watch to Complete (15s)
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
lucide.createIcons();
|
|
||||||
let currentTier = 'free';
|
|
||||||
let currentCurrency = 'KRW';
|
|
||||||
let isAnnual = true;
|
|
||||||
let quotaRemaining = 45;
|
|
||||||
let totalImpressions = 1482;
|
|
||||||
let totalAdRevenue = 7.84;
|
|
||||||
let adInterval = null;
|
|
||||||
|
|
||||||
function switchTab(tabId) {
|
|
||||||
document.querySelectorAll('section[id^="tab-"]').forEach(el => el.classList.add('hidden'));
|
|
||||||
document.getElementById('tab-' + tabId).classList.remove('hidden');
|
|
||||||
|
|
||||||
document.querySelectorAll('.tab-btn').forEach(btn => {
|
|
||||||
btn.classList.remove('bg-brand-600', 'text-white', 'shadow-md');
|
|
||||||
btn.classList.add('text-slate-400');
|
|
||||||
});
|
|
||||||
|
|
||||||
const activeBtn = document.getElementById('tab-btn-' + tabId);
|
|
||||||
if (activeBtn) {
|
|
||||||
activeBtn.classList.add('bg-brand-600', 'text-white', 'shadow-md');
|
|
||||||
activeBtn.classList.remove('text-slate-400');
|
|
||||||
}
|
|
||||||
lucide.createIcons();
|
|
||||||
}
|
|
||||||
|
|
||||||
function toggleUserTier(tier) {
|
|
||||||
currentTier = tier;
|
|
||||||
const dockAd = document.getElementById('dock-ad-container');
|
|
||||||
const proAdFree = document.getElementById('pro-adfree-container');
|
|
||||||
const quotaDisplay = document.getElementById('quota-display');
|
|
||||||
|
|
||||||
if (tier === 'free') {
|
|
||||||
dockAd.classList.remove('hidden');
|
|
||||||
proAdFree.classList.add('hidden');
|
|
||||||
quotaDisplay.innerText = `Cloud Quota: ${quotaRemaining} / 250`;
|
|
||||||
quotaDisplay.className = "text-xs text-cyan-400 font-mono";
|
|
||||||
} else {
|
|
||||||
dockAd.classList.add('hidden');
|
|
||||||
proAdFree.classList.remove('hidden');
|
|
||||||
quotaDisplay.innerText = `Cloud Quota: Unlimited (${tier.toUpperCase()})`;
|
|
||||||
quotaDisplay.className = "text-xs text-emerald-400 font-mono font-bold";
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function triggerVoiceSim() {
|
|
||||||
const transcriptEl = document.getElementById('transcript-stream');
|
|
||||||
const phrases = [
|
|
||||||
"\"실시간 음성 인식이 정상 작동 중입니다. 백그라운드 모델 지연 시간은 135ms이며, HUD는 완벽히 깨끗합니다.\"",
|
|
||||||
"\"Whisper large-v3-turbo 모델이 로컬 GPU에서 작동하고 있으며 음성 캡슐은 화면 방해 없이 즉각 삽입됩니다.\""
|
|
||||||
];
|
|
||||||
transcriptEl.innerText = phrases[Math.floor(Math.random() * phrases.length)];
|
|
||||||
}
|
|
||||||
|
|
||||||
function openRewardedAdModal() {
|
|
||||||
document.getElementById('rewarded-ad-modal').classList.remove('hidden');
|
|
||||||
let timeLeft = 15;
|
|
||||||
const timerEl = document.getElementById('ad-timer');
|
|
||||||
const progressEl = document.getElementById('ad-progress-bar');
|
|
||||||
const claimBtn = document.getElementById('claim-reward-btn');
|
|
||||||
|
|
||||||
timerEl.innerText = '15s';
|
|
||||||
progressEl.style.width = '0%';
|
|
||||||
claimBtn.disabled = true;
|
|
||||||
claimBtn.className = 'px-4 py-2 bg-slate-800 text-slate-500 font-bold rounded-xl text-xs transition-all cursor-not-allowed';
|
|
||||||
claimBtn.innerText = 'Watch to Complete (15s)';
|
|
||||||
|
|
||||||
let elapsed = 0;
|
|
||||||
clearInterval(adInterval);
|
|
||||||
adInterval = setInterval(() => {
|
|
||||||
elapsed++;
|
|
||||||
timeLeft--;
|
|
||||||
timerEl.innerText = `${timeLeft}s`;
|
|
||||||
progressEl.style.width = `${(elapsed / 15) * 100}%`;
|
|
||||||
|
|
||||||
if (timeLeft <= 0) {
|
|
||||||
clearInterval(adInterval);
|
|
||||||
claimBtn.disabled = false;
|
|
||||||
claimBtn.className = 'px-4 py-2 bg-gradient-to-r from-cyan-500 to-brand-600 text-white font-bold rounded-xl text-xs shadow-lg shadow-cyan-500/30 cursor-pointer animate-pulse';
|
|
||||||
claimBtn.innerText = 'Claim +50 Free AI Tokens!';
|
|
||||||
}
|
|
||||||
}, 1000);
|
|
||||||
}
|
|
||||||
|
|
||||||
function closeRewardedAdModal() {
|
|
||||||
clearInterval(adInterval);
|
|
||||||
document.getElementById('rewarded-ad-modal').classList.add('hidden');
|
|
||||||
}
|
|
||||||
|
|
||||||
function claimAdReward() {
|
|
||||||
quotaRemaining += 50;
|
|
||||||
totalImpressions += 1;
|
|
||||||
totalAdRevenue += 0.25;
|
|
||||||
document.getElementById('quota-display').innerText = `Cloud Quota: ${quotaRemaining} / 250`;
|
|
||||||
document.getElementById('stat-impressions').innerText = totalImpressions.toLocaleString();
|
|
||||||
document.getElementById('stat-revenue').innerText = '$' + totalAdRevenue.toFixed(2);
|
|
||||||
closeRewardedAdModal();
|
|
||||||
alert('🎉 50 Cloud LLM Polish tokens have been added to your account!');
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
|
|
@ -43,13 +43,6 @@ export function Header() {
|
||||||
{t.nav[link.key]}
|
{t.nav[link.key]}
|
||||||
</a>
|
</a>
|
||||||
))}
|
))}
|
||||||
<a
|
|
||||||
href="/launch-readiness.html"
|
|
||||||
className="font-mono text-nano uppercase tracking-widest text-cyan-400 hover:text-cyan-300 transition-colors flex items-center gap-1"
|
|
||||||
>
|
|
||||||
<span className="w-1.5 h-1.5 rounded-full bg-cyan-400 animate-pulse"></span>
|
|
||||||
Launch Sandbox
|
|
||||||
</a>
|
|
||||||
</nav>
|
</nav>
|
||||||
|
|
||||||
{/* Right side: language + CTA */}
|
{/* Right side: language + CTA */}
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue