yunchan/d3ro-voice
1
0
Fork 0
Code Issues Pull requests Projects Releases 2 Packages Wiki Activity Actions

feat: complete release preparation, 10+ ad mediation, CI/CD, and docker deployment
Some checks failed
CI Pipeline / Code Quality & Typecheck (push) Waiting to run
Details
CI Pipeline / Test Suite (macos-latest) (push) Blocked by required conditions
Details
CI Pipeline / Test Suite (ubuntu-latest) (push) Blocked by required conditions
Details
CI Pipeline / Test Suite (windows-latest) (push) Blocked by required conditions
Details
CI Pipeline / Build Validation (admin) (push) Blocked by required conditions
Details
CI Pipeline / Build Validation (desktop) (push) Blocked by required conditions
Details
Deploy Landing Page / deploy (push) Blocked by required conditions
Details
Deploy Landing Page / build (push) Waiting to run
Details
Release & Packaging Pipeline / Build & Publish Admin Docker Image (push) Failing after 8s
Details
Release & Code Signing CA Pipeline / build-and-sign-windows (push) Failing after 1m51s
Details
Build macOS / Build & Package (macOS) (push) Failing after 4s
Details
Build macOS / Build & Package (macOS)-1 (push) Failing after 5s
Details
Release & Code Signing CA Pipeline / build-and-sign-macos (push) Failing after 3s
Details
Release & Packaging Pipeline / Package macOS Desktop App (push) Failing after 4s
Details
Release & Packaging Pipeline / Package Windows Desktop App (push) Failing after 2m28s
Details
Release & Packaging Pipeline / Publish Official GitHub Release (push) Has been skipped
Details

Browse source
This commit is contained in:
Yun Chan 2026-08-20 11:12:05 +09:00
parent 5cd1de6859
commit 708e20f747
406 changed files with 42464 additions and 6199 deletions
Download patch file Download diff file Expand all files Collapse all files

994
site/public/launch-readiness.html Normal file
View file

@ -0,0 +1,994 @@
<!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>