649 lines
40 KiB
HTML
649 lines
40 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en" class="dark">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Jordan Map Platform | Developer Dashboard</title>
|
|
<!-- Tailwind CSS Play CDN -->
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<!-- MapLibre GL JS -->
|
|
<script src="https://unpkg.com/maplibre-gl@5.1.1/dist/maplibre-gl.js"></script>
|
|
<link href="https://unpkg.com/maplibre-gl@5.1.1/dist/maplibre-gl.css" rel="stylesheet" />
|
|
<!-- Lucide Icons -->
|
|
<script src="https://unpkg.com/lucide@latest"></script>
|
|
|
|
<!-- Firebase SDK (v10.12.0) -->
|
|
<script src="https://www.gstatic.com/firebasejs/10.12.0/firebase-app-compat.js"></script>
|
|
<script src="https://www.gstatic.com/firebasejs/10.12.0/firebase-auth-compat.js"></script>
|
|
<script src="js/firebase-config.js"></script>
|
|
|
|
<script>
|
|
tailwind.config = {
|
|
darkMode: 'class',
|
|
theme: {
|
|
extend: {
|
|
colors: {
|
|
slate: {
|
|
950: '#0a0a0b',
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Cairo:wght@400;600;700;900&display=swap');
|
|
|
|
body {
|
|
font-family: 'Plus Jakarta Sans', sans-serif;
|
|
background-color: #0a0a0b;
|
|
color: #f8fafc;
|
|
}
|
|
|
|
/* RTL Specifics */
|
|
.rtl-mode #main-content {
|
|
text-align: right;
|
|
}
|
|
.rtl-mode .nav-link {
|
|
flex-direction: row-reverse;
|
|
}
|
|
|
|
.glass {
|
|
background: rgba(15, 23, 42, 0.6);
|
|
backdrop-filter: blur(12px);
|
|
border: 1px solid rgba(255, 255, 255, 0.05);
|
|
}
|
|
|
|
.text-gradient {
|
|
background: linear-gradient(135deg, #fff 0%, #94a3b8 100%);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
}
|
|
|
|
.btn {
|
|
@apply flex items-center gap-2 px-4 py-2.5 rounded-xl font-bold transition-all duration-300 active:scale-95 text-sm;
|
|
}
|
|
|
|
.btn-primary {
|
|
@apply bg-blue-600 text-white hover:bg-blue-500 shadow-lg shadow-blue-500/20 disabled:opacity-50 disabled:cursor-not-allowed;
|
|
}
|
|
|
|
.btn-secondary {
|
|
@apply bg-slate-900 text-slate-400 hover:text-white border border-slate-800 hover:border-slate-700;
|
|
}
|
|
|
|
/* Nav logic */
|
|
.page-section {
|
|
display: none;
|
|
}
|
|
.page-section.active {
|
|
display: block;
|
|
animation: fadeIn 0.5s ease-out;
|
|
}
|
|
|
|
@keyframes fadeIn {
|
|
from { opacity: 0; transform: translateY(10px); }
|
|
to { opacity: 1; transform: translateY(0); }
|
|
}
|
|
|
|
/* Sidebar active state */
|
|
.nav-link.active {
|
|
@apply bg-blue-600/10 text-blue-400 border-r-2 border-blue-600;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="overflow-hidden h-screen flex bg-[#0a0a0b]">
|
|
|
|
<!-- Login Section -->
|
|
<section id="login-section" class="fixed inset-0 z-[200] flex items-center justify-center bg-gradient-to-br from-slate-950 via-[#0a0a0b] to-blue-950/20 overflow-hidden">
|
|
<div class="absolute inset-0 opacity-20 pointer-events-none">
|
|
<div class="absolute top-1/4 left-1/4 w-96 h-96 bg-blue-600 rounded-full blur-[128px] animate-pulse"></div>
|
|
<div class="absolute bottom-1/4 right-1/4 w-96 h-96 bg-cyan-600 rounded-full blur-[128px] animate-pulse delay-700"></div>
|
|
</div>
|
|
|
|
<div class="glass max-w-md w-full p-10 rounded-[2.5rem] relative z-10 text-center border-white/10 shadow-2xl">
|
|
<div class="w-20 h-20 rounded-2xl bg-gradient-to-tr from-blue-600 to-cyan-400 flex items-center justify-center text-white shadow-2xl shadow-blue-500/30 mx-auto mb-8 rotate-3">
|
|
<i data-lucide="layers" class="w-10 h-10"></i>
|
|
</div>
|
|
|
|
<h1 class="text-4xl font-black tracking-tight mb-3 text-gradient">Intaleq Maps</h1>
|
|
<p class="text-slate-400 font-medium mb-10 leading-relaxed">The premium developer platform for mapping services in Jordan & Syria.</p>
|
|
|
|
<button onclick="auth.signInWithGoogle()" class="w-full btn bg-white text-slate-950 hover:bg-slate-100 py-4 text-base font-black shadow-xl flex items-center justify-center gap-3 active:scale-[0.98] transition-all rounded-2xl">
|
|
<svg class="w-5 h-5" viewBox="0 0 24 24">
|
|
<path fill="currentColor" d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"/>
|
|
<path fill="currentColor" d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"/>
|
|
<path fill="currentColor" d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"/>
|
|
<path fill="currentColor" d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"/>
|
|
</svg>
|
|
Continue with Google
|
|
</button>
|
|
|
|
<p class="mt-8 text-[11px] text-slate-500 font-bold uppercase tracking-widest">Enterprise Ready · Secure Access</p>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Sidebar -->
|
|
<aside id="main-sidebar" class="hidden w-64 border-r border-slate-800 bg-slate-950/50 backdrop-blur-xl flex flex-col z-50">
|
|
<div class="p-8">
|
|
<div class="flex items-center gap-3 group cursor-pointer">
|
|
<div class="w-10 h-10 rounded-xl bg-gradient-to-tr from-blue-600 to-cyan-400 flex items-center justify-center text-white shadow-lg shadow-blue-500/20 group-hover:rotate-12 transition-transform">
|
|
<i data-lucide="layers" class="w-6 h-6"></i>
|
|
</div>
|
|
<div>
|
|
<h1 class="font-black text-lg tracking-tight leading-none">Intaleq</h1>
|
|
<span class="text-[10px] uppercase tracking-[0.2em] font-bold text-slate-500">Maps SaaS</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<nav class="flex-1 px-4 space-y-2 mt-4">
|
|
<a href="#home" class="nav-link flex items-center gap-3 px-4 py-3 rounded-xl transition-all hover:bg-white/5 text-slate-400 font-bold group" id="nav-home">
|
|
<i data-lucide="layout-dashboard" class="w-5 h-5 group-hover:text-white transition-colors"></i>
|
|
<span data-i18n="side-dashboard">Dashboard</span>
|
|
</a>
|
|
<a href="#playground" class="nav-link flex items-center gap-3 px-4 py-3 rounded-xl transition-all hover:bg-white/5 text-slate-400 font-bold group" id="nav-playground">
|
|
<i data-lucide="terminal" class="w-5 h-5 group-hover:text-white transition-colors"></i>
|
|
<span data-i18n="side-playground">Playground</span>
|
|
</a>
|
|
<a href="#analytics" class="nav-link flex items-center gap-3 px-4 py-3 rounded-xl transition-all hover:bg-white/5 text-slate-400 font-bold group" id="nav-analytics">
|
|
<i data-lucide="bar-chart-3" class="w-5 h-5 group-hover:text-white transition-colors"></i>
|
|
<span data-i18n="side-analytics">Analytics</span>
|
|
</a>
|
|
<a href="#billing" class="nav-link flex items-center gap-3 px-4 py-3 rounded-xl transition-all hover:bg-white/5 text-slate-400 font-bold group" id="nav-billing">
|
|
<i data-lucide="credit-card" class="w-5 h-5 group-hover:text-white transition-colors"></i>
|
|
<span data-i18n="side-billing">Billing</span>
|
|
</a>
|
|
<a href="#refinement" class="nav-link flex items-center gap-3 px-4 py-3 rounded-xl transition-all hover:bg-white/5 text-slate-400 font-bold group hidden" id="nav-refinement">
|
|
<i data-lucide="map-pin" class="w-5 h-5 group-hover:text-white transition-colors"></i>
|
|
<span data-i18n="side-audit">Place Audit</span>
|
|
</a>
|
|
<a href="#docs" class="nav-link flex items-center gap-3 px-4 py-3 rounded-xl transition-all hover:bg-white/5 text-slate-400 font-bold group" id="nav-docs">
|
|
<i data-lucide="book-open" class="w-5 h-5 group-hover:text-white transition-colors"></i>
|
|
<span data-i18n="side-docs">Documentation</span>
|
|
</a>
|
|
</nav>
|
|
|
|
<div class="p-6">
|
|
<div class="glass p-5 rounded-2xl border border-blue-500/10 bg-gradient-to-br from-blue-600/5 to-transparent">
|
|
<p class="text-[10px] font-black uppercase tracking-wider text-blue-400 mb-2">Beta Access</p>
|
|
<p class="text-xs text-slate-400 leading-relaxed font-medium mb-4">You're currently on the free sandbox tier.</p>
|
|
<a href="#billing" class="w-full btn btn-primary !py-2 !text-xs text-center flex items-center justify-center" data-i18n="side-upgrade">Upgrade Plan</a>
|
|
</div>
|
|
</div>
|
|
</aside>
|
|
|
|
<!-- Main Content -->
|
|
<div id="main-content" class="hidden flex-1 flex flex-col min-w-0 bg-gradient-to-br from-slate-950 via-[#0f1115] to-slate-950 overflow-y-auto">
|
|
<!-- Header -->
|
|
<header class="h-20 border-b border-white/[0.03] flex items-center justify-between px-8 sticky top-0 bg-slate-950/50 backdrop-blur-md z-40">
|
|
<div class="flex items-center gap-4">
|
|
<div class="w-2 h-2 rounded-full bg-emerald-500 animate-pulse"></div>
|
|
<span class="text-xs font-black uppercase tracking-widest text-slate-500" data-i18n="system-status">System Operational</span>
|
|
</div>
|
|
|
|
<div class="flex items-center gap-6">
|
|
<!-- Language Toggle -->
|
|
<button onclick="i18n.toggle()" class="px-3 py-1.5 rounded-lg border border-white/10 hover:bg-white/5 transition-all text-xs font-bold text-slate-400 flex items-center gap-2" data-i18n="lang-toggle">
|
|
العربية
|
|
</button>
|
|
|
|
<div class="flex flex-col items-end">
|
|
<p class="text-sm font-bold" id="tenant-name">Loading...</p>
|
|
<p class="text-[10px] text-slate-500 font-medium" id="tenant-email">developer@intaleq.com</p>
|
|
</div>
|
|
<div class="w-10 h-10 rounded-full bg-slate-900 border border-slate-800 flex items-center justify-center text-blue-400">
|
|
<i data-lucide="user" class="w-5 h-5"></i>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<main class="p-12 max-w-7xl mx-auto w-full">
|
|
|
|
<!-- Home Section -->
|
|
<section id="home" class="page-section">
|
|
<div class="mb-12">
|
|
<h2 class="text-4xl text-gradient mb-2" id="welcome-msg">Welcome back...</h2>
|
|
<p class="text-slate-400">Everything you need to build with premium Jordan Map Platform API</p>
|
|
</div>
|
|
|
|
<!-- KPI Stats -->
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-6 mb-12">
|
|
<div class="glass p-6 rounded-2xl group border-[#1e293b]">
|
|
<div class="flex items-center justify-between mb-4">
|
|
<div class="w-10 h-10 rounded-xl bg-slate-900 flex items-center justify-center text-blue-400">
|
|
<i data-lucide="zap" class="w-5 h-5"></i>
|
|
</div>
|
|
<span class="text-xs font-bold px-2 py-1 rounded-full bg-slate-900 text-emerald-500">+12.5%</span>
|
|
</div>
|
|
<p class="text-sm text-slate-500 font-medium mb-1" data-i18n="kpi-total-req">Total Requests</p>
|
|
<div class="text-2xl font-bold tracking-tight" id="stat-total-req">...</div>
|
|
</div>
|
|
<div class="glass p-6 rounded-2xl group">
|
|
<div class="flex items-center justify-between mb-4">
|
|
<div class="w-10 h-10 rounded-xl bg-slate-900 flex items-center justify-center text-emerald-400">
|
|
<i data-lucide="shield-check" class="w-5 h-5"></i>
|
|
</div>
|
|
<span class="text-xs font-bold px-2 py-1 rounded-full bg-slate-900 text-emerald-500" id="stat-success-rate">99.9%</span>
|
|
</div>
|
|
<p class="text-sm text-slate-500 font-medium mb-1" data-i18n="kpi-success-rate">Success Rate</p>
|
|
<div class="text-2xl font-bold tracking-tight" id="stat-success-percent">...</div>
|
|
</div>
|
|
<div class="glass p-6 rounded-2xl group">
|
|
<div class="flex items-center justify-between mb-4">
|
|
<div class="w-10 h-10 rounded-xl bg-slate-900 flex items-center justify-center text-cyan-400">
|
|
<i data-lucide="activity" class="w-5 h-5"></i>
|
|
</div>
|
|
<span class="text-xs font-bold px-2 py-1 rounded-full bg-slate-900 text-slate-500">Live</span>
|
|
</div>
|
|
<p class="text-sm text-slate-500 font-medium mb-1" data-i18n="kpi-active-keys">Active Keys</p>
|
|
<div class="text-2xl font-bold tracking-tight" id="active-keys-count">...</div>
|
|
</div>
|
|
<div class="glass p-6 rounded-2xl group">
|
|
<div class="flex items-center justify-between mb-4">
|
|
<div class="w-10 h-10 rounded-xl bg-slate-900 flex items-center justify-center text-violet-400">
|
|
<i data-lucide="trending-up" class="w-5 h-5"></i>
|
|
</div>
|
|
<span class="text-xs font-bold px-2 py-1 rounded-full bg-slate-900 text-slate-500" id="stat-latency-val">-ms</span>
|
|
</div>
|
|
<p class="text-sm text-slate-500 font-medium mb-1" data-i18n="kpi-latency">Avg Latency</p>
|
|
<div class="text-2xl font-bold tracking-tight" id="stat-avg-latency">...</div>
|
|
</div>
|
|
<!-- Usage Battery Card -->
|
|
<div class="glass p-6 rounded-2xl group bg-gradient-to-br from-blue-600/5 to-transparent border-blue-500/10">
|
|
<div class="flex items-center justify-between mb-4">
|
|
<div class="w-10 h-10 rounded-xl bg-slate-900 flex items-center justify-center text-blue-500">
|
|
<i data-lucide="battery-charging" class="w-5 h-5"></i>
|
|
</div>
|
|
<span class="text-[10px] font-black uppercase text-blue-500 tracking-widest" id="usage-percentage-label">...</span>
|
|
</div>
|
|
<p class="text-sm text-slate-500 font-medium mb-3" data-i18n="quota-card-title">Monthly Quota</p>
|
|
<div class="w-full h-2 bg-slate-900 rounded-full overflow-hidden mb-2">
|
|
<div id="usage-progress-bar" class="h-full bg-blue-500 transition-all duration-1000" style="width: 0%"></div>
|
|
</div>
|
|
<p class="text-[10px] text-slate-500 font-bold" id="usage-limit-text">... requests left</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 lg:grid-cols-3 gap-8 mb-12">
|
|
<!-- Traffic Mockup -->
|
|
<div class="lg:col-span-2 glass rounded-2xl p-6 relative overflow-hidden">
|
|
<div class="flex items-center justify-between mb-8">
|
|
<div>
|
|
<h3 class="text-lg font-bold" data-i18n="chart-request-volume">Request Traffic</h3>
|
|
<p class="text-sm text-slate-500">Live traffic across all API endpoints</p>
|
|
</div>
|
|
<a href="#analytics" class="text-xs text-blue-500 hover:text-blue-400 font-bold flex items-center gap-1 transition-colors">
|
|
Full Analytics <i data-lucide="arrow-right" class="w-3.5 h-3.5"></i>
|
|
</a>
|
|
</div>
|
|
<div class="h-64 flex items-end gap-1.5 px-2 relative" id="traffic-bars">
|
|
<!-- Premium Animated Bars via JS -->
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Quick Actions -->
|
|
<div class="glass rounded-2xl p-6 bg-gradient-to-br from-blue-600/10 to-transparent border-blue-500/10">
|
|
<h3 class="text-lg font-bold mb-2">Quick Start</h3>
|
|
<p class="text-sm text-slate-500 mb-6 font-medium">Get started with our lightweight SDK in seconds.</p>
|
|
<div class="space-y-4">
|
|
<div class="bg-slate-950 rounded-xl p-4 border border-slate-800 font-mono text-xs">
|
|
<p class="text-slate-500 mb-2"># Install with npm</p>
|
|
<p class="text-blue-400">npm <span class="text-slate-200">install @intaleq/maps-gl</span></p>
|
|
</div>
|
|
<button class="w-full btn btn-secondary text-sm group" onclick="window.open('/api/docs', '_blank')">
|
|
<i data-lucide="terminal" class="w-4 h-4 text-blue-400 group-hover:scale-110 transition-transform"></i>
|
|
View API Reference
|
|
</button>
|
|
<a href="#playground" class="w-full btn btn-secondary text-sm group">
|
|
<i data-lucide="globe" class="w-4 h-4 text-cyan-400 group-hover:scale-110 transition-transform"></i>
|
|
Try Maps Playground
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- API Keys Table -->
|
|
<div class="glass rounded-2xl overflow-hidden mb-12">
|
|
<div class="p-6 border-b border-slate-800 flex items-center justify-between bg-white/[0.02]">
|
|
<div>
|
|
<h3 class="text-lg font-bold">Your API Keys</h3>
|
|
<p class="text-sm text-slate-500">Manage keys for your applications</p>
|
|
</div>
|
|
<button class="btn btn-primary" onclick="app.toggleModal('create-key-modal', true)" id="create-key-btn">
|
|
<i data-lucide="plus" class="w-4 h-4"></i>
|
|
Create New Key
|
|
</button>
|
|
</div>
|
|
|
|
<div class="overflow-x-auto min-h-[200px]">
|
|
<table class="w-full text-left">
|
|
<thead>
|
|
<tr class="text-xs uppercase tracking-widest text-slate-500 bg-slate-900/40">
|
|
<th class="px-6 py-4 font-black">Name</th>
|
|
<th class="px-6 py-4 font-black">API Key</th>
|
|
<th class="px-6 py-4 font-black">Status</th>
|
|
<th class="px-6 py-4 font-black">Restrictions</th>
|
|
<th class="px-6 py-4 font-black text-right">Actions</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="keys-table-body" class="divide-y divide-slate-800/50">
|
|
<!-- Injected by JS -->
|
|
<tr>
|
|
<td colspan="5" class="py-20 text-center text-slate-500">
|
|
<div class="flex flex-col items-center gap-4">
|
|
<i data-lucide="loader-2" class="w-8 h-8 animate-spin text-blue-500"></i>
|
|
<p>Fetching your secure keys...</p>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Playground Section -->
|
|
<section id="playground" class="page-section">
|
|
<div class="mb-12">
|
|
<h2 class="text-4xl text-gradient mb-2">Maps Playground</h2>
|
|
<p class="text-slate-400">Test your API keys and visualize vector tiles in real-time</p>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 lg:grid-cols-4 gap-8">
|
|
<!-- Sidebar Controls -->
|
|
<div class="lg:col-span-1 space-y-6">
|
|
<div class="glass p-6 rounded-2xl">
|
|
<h4 class="text-[10px] uppercase font-black tracking-widest text-slate-500 mb-4">Configuration</h4>
|
|
<div class="space-y-4">
|
|
<div>
|
|
<label class="text-xs text-slate-400 mb-2 block">Active API Key</label>
|
|
<select id="pg-key-select" class="w-full bg-slate-950 border border-slate-800 rounded-xl px-4 py-3 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500/20"></select>
|
|
</div>
|
|
<div>
|
|
<label class="text-xs text-slate-400 mb-2 block">Map Style</label>
|
|
<div class="flex gap-2">
|
|
<button onclick="playground.setStyle('obsidian')" id="style-obsidian" class="flex-1 py-3 text-xs font-bold rounded-xl bg-blue-600 text-white shadow-lg shadow-blue-500/20">Obsidian</button>
|
|
<button onclick="playground.setStyle('light')" id="style-light" class="flex-1 py-3 text-xs font-bold rounded-xl bg-slate-900 text-slate-500">Light</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Map Container -->
|
|
<div class="lg:col-span-3 glass rounded-3xl overflow-hidden relative" style="min-height: 600px;">
|
|
<div id="map" class="absolute inset-0 w-full h-full bg-slate-900"></div>
|
|
<!-- Search Overlay -->
|
|
<div class="absolute top-6 left-6 w-full max-w-sm">
|
|
<div class="relative">
|
|
<i data-lucide="search" class="absolute left-4 top-1/2 -translate-y-1/2 text-slate-500 w-4 h-4"></i>
|
|
<input type="text" id="pg-search" placeholder="Search Amman, Jordan..."
|
|
class="w-full bg-slate-950/80 backdrop-blur-md border border-slate-800 rounded-2xl px-12 py-4 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500/50 shadow-2xl">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Analytics Section -->
|
|
<section id="analytics" class="page-section">
|
|
<div class="mb-12">
|
|
<h2 class="text-4xl text-gradient mb-2" data-i18n="side-analytics">Analytics</h2>
|
|
<p class="text-slate-400">Deep insights into your API performance</p>
|
|
</div>
|
|
<!-- Simple Chart Mockups -->
|
|
<div class="grid grid-cols-1 lg:grid-cols-2 gap-8 mb-12">
|
|
<div class="glass p-8 rounded-3xl">
|
|
<h3 class="text-xl font-bold mb-8" data-i18n="chart-request-volume">Request Volume (Overall)</h3>
|
|
<div class="h-80 w-full flex items-end justify-between gap-4 px-4" id="v-chart">
|
|
<!-- Injected by analytics.js -->
|
|
</div>
|
|
</div>
|
|
<div class="glass p-8 rounded-3xl">
|
|
<h3 class="text-xl font-bold mb-8" data-i18n="chart-success-ratio">Success Ratio</h3>
|
|
<div class="flex items-center justify-center h-80">
|
|
<div class="relative w-48 h-48 rounded-full border-[12px] border-slate-900 flex items-center justify-center">
|
|
<svg class="absolute inset-0 w-full h-full -rotate-90">
|
|
<circle cx="96" cy="96" r="88" fill="transparent" stroke="currentColor" stroke-width="12" class="text-blue-600" id="success-circle" stroke-dasharray="552.9" stroke-dashoffset="0" />
|
|
</svg>
|
|
<span class="text-3xl font-black" id="success-percent-display">100%</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="glass rounded-3xl overflow-hidden">
|
|
<div class="p-8 border-b border-white/5">
|
|
<h3 class="text-xl font-bold" data-i18n="chart-latency-breakdown">Latency Breakdown</h3>
|
|
</div>
|
|
<div class="p-8 h-80 flex items-end justify-around gap-2" id="l-chart"></div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Map Refinement Section -->
|
|
<section id="refinement" class="page-section">
|
|
<div class="mb-12">
|
|
<h2 class="text-4xl text-gradient mb-2" data-i18n="side-audit">Place Audit</h2>
|
|
<p class="text-slate-400">Review and approve user-suggested map locations</p>
|
|
</div>
|
|
|
|
<div class="glass rounded-3xl overflow-hidden">
|
|
<div class="overflow-x-auto min-h-[400px]">
|
|
<table class="w-full text-left">
|
|
<thead>
|
|
<tr class="text-xs uppercase tracking-widest text-slate-500 bg-slate-900/40">
|
|
<th class="px-8 py-5 font-black">Location Name</th>
|
|
<th class="px-8 py-5 font-black">Automated Match</th>
|
|
<th class="px-8 py-5 font-black">Spatial Context</th>
|
|
<th class="px-8 py-5 font-black text-right">Actions</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="refinement-table-body" class="divide-y divide-slate-800/50">
|
|
<tr>
|
|
<td colspan="5" class="py-20 text-center text-slate-500">
|
|
<div class="flex flex-col items-center gap-4">
|
|
<i data-lucide="map-pin" class="w-8 h-8 opacity-20"></i>
|
|
<p>No pending location suggestions.</p>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Billing Section -->
|
|
<section id="billing" class="page-section p-10">
|
|
<div class="mb-12">
|
|
<h2 class="text-3xl font-black mb-2 text-gradient" data-i18n="side-billing">Subscription & Billing</h2>
|
|
<p class="text-slate-400 font-medium">Manage your plan, payment methods, and invoice history.</p>
|
|
</div>
|
|
|
|
<!-- Current Plan Summary -->
|
|
<div class="glass p-8 rounded-[2rem] border-white/5 mb-12 flex items-center justify-between">
|
|
<div class="flex items-center gap-6">
|
|
<div class="w-16 h-16 rounded-2xl bg-blue-500/10 flex items-center justify-center text-blue-400">
|
|
<i data-lucide="crown" class="w-8 h-8"></i>
|
|
</div>
|
|
<div>
|
|
<h3 class="text-xl font-bold mb-1">Current Plan: <span class="current-plan-name text-blue-400">FREE</span></h3>
|
|
<p class="text-slate-500 text-sm font-medium">Your monthly usage resets on the 1st of each month.</p>
|
|
</div>
|
|
</div>
|
|
<div class="flex gap-3">
|
|
<div class="px-4 py-2 rounded-xl bg-slate-900 border border-slate-800 text-xs font-bold text-slate-400 flex items-center gap-2">
|
|
<i data-lucide="shield-check" class="w-4 h-4 text-emerald-400"></i> Active
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Pricing Cards -->
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-8 mb-12">
|
|
<!-- Free -->
|
|
<div id="plan-card-free" class="glass p-8 rounded-[2.5rem] border-white/5 flex flex-col hover:border-white/10 transition-all">
|
|
<div class="mb-8">
|
|
<span class="text-xs font-black tracking-widest text-slate-500 uppercase">Starter</span>
|
|
<h4 class="text-4xl font-black mt-2">$0 <span class="text-sm font-medium text-slate-500">/mo</span></h4>
|
|
</div>
|
|
<ul class="space-y-4 mb-10 flex-1">
|
|
<li class="flex items-center gap-3 text-sm text-slate-300 font-medium">
|
|
<i data-lucide="check" class="w-4 h-4 text-blue-400"></i> 8,000 requests /mo
|
|
</li>
|
|
<li class="flex items-center gap-3 text-sm text-slate-300 font-medium">
|
|
<i data-lucide="check" class="w-4 h-4 text-blue-400"></i> Standard Map Tiles
|
|
</li>
|
|
<li class="flex items-center gap-3 text-sm text-slate-300 font-medium">
|
|
<i data-lucide="check" class="w-4 h-4 text-blue-400"></i> Basic Geocoding
|
|
</li>
|
|
</ul>
|
|
<button class="plan-btn w-full btn bg-slate-800 text-white py-4 rounded-2xl font-black text-sm active:scale-95 transition-all">Current Plan</button>
|
|
</div>
|
|
|
|
<!-- Pro -->
|
|
<div id="plan-card-pro" class="glass p-8 rounded-[2.5rem] border-blue-500/20 bg-blue-500/[0.02] flex flex-col relative overflow-hidden group">
|
|
<div class="absolute top-4 right-4 bg-blue-500 text-white text-[10px] font-black px-3 py-1 rounded-full uppercase tracking-widest shadow-lg shadow-blue-500/20">Popular</div>
|
|
<div class="mb-8">
|
|
<span class="text-xs font-black tracking-widest text-blue-400 uppercase">Professional</span>
|
|
<h4 class="text-4xl font-black mt-2 text-gradient">$40 <span class="text-sm font-medium text-slate-500">/mo</span></h4>
|
|
</div>
|
|
<ul class="space-y-4 mb-10 flex-1">
|
|
<li class="flex items-center gap-3 text-sm text-slate-300 font-medium">
|
|
<i data-lucide="check" class="w-4 h-4 text-blue-400"></i> 50,000 requests /mo
|
|
</li>
|
|
<li class="flex items-center gap-3 text-sm text-slate-300 font-medium">
|
|
<i data-lucide="check" class="w-4 h-4 text-blue-400"></i> 3D Building Extrusion
|
|
</li>
|
|
<li class="flex items-center gap-3 text-sm text-slate-300 font-medium">
|
|
<i data-lucide="check" class="w-4 h-4 text-blue-400"></i> Advanced Routing API
|
|
</li>
|
|
<li class="flex items-center gap-3 text-sm text-slate-300 font-medium">
|
|
<i data-lucide="check" class="w-4 h-4 text-blue-400"></i> Priority Support
|
|
</li>
|
|
</ul>
|
|
<div class="flex gap-2">
|
|
<button onclick="billing.startCheckout('PRO', 'PAYMOB')" class="plan-btn flex-1 btn bg-blue-600 hover:bg-blue-500 text-white py-4 rounded-2xl font-black text-sm shadow-xl shadow-blue-500/20 active:scale-95 transition-all">Pay with Card</button>
|
|
<button onclick="billing.startCheckout('PRO', 'BINANCE')" class="p-4 rounded-2xl bg-white/5 border border-white/5 hover:bg-white/10 transition-all text-yellow-500" title="Pay with Crypto">
|
|
<i data-lucide="bitcoin" class="w-5 h-5"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Enterprise -->
|
|
<div id="plan-card-enterprise" class="glass p-8 rounded-[2.5rem] border-white/5 flex flex-col hover:border-white/10 transition-all">
|
|
<div class="mb-8">
|
|
<span class="text-xs font-black tracking-widest text-violet-400 uppercase">Enterprise</span>
|
|
<h4 class="text-4xl font-black mt-2">Custom</h4>
|
|
</div>
|
|
<ul class="space-y-4 mb-10 flex-1">
|
|
<li class="flex items-center gap-3 text-sm text-slate-300 font-medium">
|
|
<i data-lucide="check" class="w-4 h-4 text-violet-400"></i> Unlimited Requests
|
|
</li>
|
|
<li class="flex items-center gap-3 text-sm text-slate-300 font-medium">
|
|
<i data-lucide="check" class="w-4 h-4 text-violet-400"></i> Custom Data Layers
|
|
</li>
|
|
<li class="flex items-center gap-3 text-sm text-slate-300 font-medium">
|
|
<i data-lucide="check" class="w-4 h-4 text-violet-400"></i> SLA Guarantees
|
|
</li>
|
|
<li class="flex items-center gap-3 text-sm text-slate-300 font-medium">
|
|
<i data-lucide="check" class="w-4 h-4 text-violet-400"></i> Dedicated Architect
|
|
</li>
|
|
</ul>
|
|
<button class="plan-btn w-full btn border border-violet-500/30 text-violet-300 hover:bg-violet-500/10 py-4 rounded-2xl font-black text-sm active:scale-95 transition-all">Contact Sales</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Invoice History -->
|
|
<div class="glass rounded-[2rem] border-white/5 overflow-hidden">
|
|
<div class="p-8 border-b border-white/5 flex items-center justify-between">
|
|
<h3 class="text-lg font-bold" data-i18n="bill-transaction-history">Transaction History</h3>
|
|
<i data-lucide="receipt" class="w-5 h-5 text-slate-500"></i>
|
|
</div>
|
|
<div class="overflow-x-auto">
|
|
<table class="w-full text-left">
|
|
<thead>
|
|
<tr class="bg-white/[0.01]">
|
|
<th class="px-8 py-5 text-[10px] font-black uppercase tracking-widest text-slate-500">Date</th>
|
|
<th class="px-8 py-5 text-[10px] font-black uppercase tracking-widest text-slate-500">Amount</th>
|
|
<th class="px-8 py-5 text-[10px] font-black uppercase tracking-widest text-slate-500">Provider</th>
|
|
<th class="px-8 py-5 text-[10px] font-black uppercase tracking-widest text-slate-500">Status</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="invoice-table-body">
|
|
<!-- Loaded via JS -->
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
<!-- Documentation Section -->
|
|
<section id="docs" class="page-section h-full">
|
|
<div class="flex h-full gap-8">
|
|
<!-- Docs Nav -->
|
|
<div class="w-64 flex flex-col gap-2 shrink-0">
|
|
<div class="mb-4">
|
|
<h2 class="text-xl font-black text-gradient">Guides</h2>
|
|
</div>
|
|
<a href="javascript:void(0)" data-section="getting-started" class="docs-nav-link active bg-blue-500/10 text-blue-400 p-4 rounded-2xl text-sm font-bold flex items-center gap-3 transition-all hover:bg-blue-500/5">
|
|
<i data-lucide="rocket" class="w-4 h-4"></i> Getting Started
|
|
</a>
|
|
<a href="javascript:void(0)" data-section="tiles-api" class="docs-nav-link p-4 rounded-2xl text-sm font-bold text-slate-500 flex items-center gap-3 transition-all hover:bg-white/5 hover:text-white">
|
|
<i data-lucide="map" class="w-4 h-4"></i> Map Tiles API
|
|
</a>
|
|
<a href="javascript:void(0)" data-section="geocoding-api" class="docs-nav-link p-4 rounded-2xl text-sm font-bold text-slate-500 flex items-center gap-3 transition-all hover:bg-white/5 hover:text-white">
|
|
<i data-lucide="search" class="w-4 h-4"></i> Geocoding API
|
|
</a>
|
|
<a href="javascript:void(0)" data-section="routing-api" class="docs-nav-link p-4 rounded-2xl text-sm font-bold text-slate-500 flex items-center gap-3 transition-all hover:bg-white/5 hover:text-white">
|
|
<i data-lucide="navigation" class="w-4 h-4"></i> Routing API
|
|
</a>
|
|
</div>
|
|
|
|
<!-- Docs Content Area -->
|
|
<div class="flex-1 glass rounded-[2.5rem] border-white/5 p-10 overflow-y-auto" id="docs-content">
|
|
<!-- Loaded via docs.js -->
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
</div>
|
|
|
|
<!-- Modals -->
|
|
<div id="create-key-modal" class="fixed inset-0 z-[100] hidden">
|
|
<div class="absolute inset-0 bg-black/60 backdrop-blur-sm" onclick="app.toggleModal('create-key-modal', false)"></div>
|
|
<div class="absolute inset-0 flex items-center justify-center p-4">
|
|
<div class="glass w-full max-w-md p-8 rounded-3xl animate-in fade-in zoom-in duration-300">
|
|
<h2 class="text-2xl font-bold mb-2">Create API Key</h2>
|
|
<p class="text-sm text-slate-500 mb-8">Set up a new access point for your application.</p>
|
|
<form id="create-key-form" class="space-y-6">
|
|
<div>
|
|
<label class="block text-xs font-black uppercase tracking-widest text-slate-500 mb-2">Key Name</label>
|
|
<input type="text" id="new-key-name" placeholder="e.g. Production Web App" required
|
|
class="w-full bg-slate-950 border border-slate-800 rounded-xl px-4 py-3 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500/20">
|
|
</div>
|
|
|
|
<div class="flex items-center gap-3 pt-4 border-t border-slate-800">
|
|
<button type="button" onclick="app.toggleModal('create-key-modal', false)" class="flex-1 btn btn-secondary">
|
|
Cancel
|
|
</button>
|
|
<button type="submit" id="btn-submit-key" class="flex-1 btn btn-primary">
|
|
Create Key
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- core script -->
|
|
<script src="js/i18n.js"></script>
|
|
<script src="js/auth.js"></script>
|
|
<script src="js/app.js"></script>
|
|
<script src="js/playground.js"></script>
|
|
<script src="js/analytics.js"></script>
|
|
<script src="js/billing.js"></script>
|
|
<script src="js/refinement.js"></script>
|
|
<script src="js/docs.js"></script>
|
|
</body>
|
|
</html>
|