@wowoengine/sawitdb 2.4.0 → 2.5.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/docs/index.html CHANGED
@@ -4,7 +4,7 @@
4
4
  <head>
5
5
  <meta charset="UTF-8">
6
6
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
- <title>SawitDB - Tani Edition Documentation</title>
7
+ <title>SawitDB - Documentation</title>
8
8
  <meta name="description"
9
9
  content="SawitDB: The most agricultural database in the world. Feature-rich, single-file, and based on Indonesian wisdom.">
10
10
  <meta name="keywords"
@@ -14,7 +14,7 @@
14
14
  <!-- Open Graph / Facebook -->
15
15
  <meta property="og:type" content="website">
16
16
  <meta property="og:url" content="https://github.com/WowoEngine/SawitDB">
17
- <meta property="og:title" content="SawitDB - Tani Edition Documentation">
17
+ <meta property="og:title" content="SawitDB - Documentation">
18
18
  <meta property="og:description"
19
19
  content="Database infrastruktur langit? No. Ini database infrastruktur darat. Hemat, kuat, dan merakyat.">
20
20
  <meta property="og:image" content="https://raw.githubusercontent.com/WowoEngine/SawitDB/main/docs/sawitdb.jpg">
@@ -22,22 +22,24 @@
22
22
  <!-- Twitter -->
23
23
  <meta property="twitter:card" content="summary_large_image">
24
24
  <meta property="twitter:url" content="https://github.com/WowoEngine/SawitDB">
25
- <meta property="twitter:title" content="SawitDB - Tani Edition Documentation">
25
+ <meta property="twitter:title" content="SawitDB - Documentation">
26
26
  <meta property="twitter:description"
27
27
  content="Database infrastruktur langit? No. Ini database infrastruktur darat. Hemat, kuat, dan merakyat.">
28
28
  <meta property="twitter:image" content="https://raw.githubusercontent.com/WowoEngine/SawitDB/main/docs/sawitdb.jpg">
29
+
29
30
  <!-- Tailwind CSS -->
30
31
  <script src="https://cdn.tailwindcss.com"></script>
31
- <!-- Google Fonts -->
32
- <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
33
32
  <script>
34
33
  tailwind.config = {
34
+ darkMode: 'class',
35
35
  theme: {
36
36
  extend: {
37
- fontFamily: {
38
- sans: ['Inter', 'sans-serif'],
39
- },
40
37
  colors: {
38
+ primary: '#3B82F6',
39
+ secondary: '#10B981',
40
+ dark: '#0f172a',
41
+ darker: '#020617',
42
+ card: '#1e293b',
41
43
  sawit: {
42
44
  50: '#f0fdf4',
43
45
  100: '#dcfce7',
@@ -47,111 +49,185 @@
47
49
  800: '#166534',
48
50
  900: '#14532d',
49
51
  }
52
+ },
53
+ fontFamily: {
54
+ sans: ['Inter', 'sans-serif'],
50
55
  }
51
56
  }
52
57
  }
53
58
  }
54
59
  </script>
60
+ <!-- Google Fonts -->
61
+ <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
62
+ <!-- Font Awesome -->
63
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
64
+
55
65
  <style>
56
- /* Custom scrollbar for sidebar */
57
- .scrollbar-hide::-webkit-scrollbar {
58
- display: none;
66
+ body {
67
+ font-family: 'Inter', sans-serif;
68
+ }
69
+
70
+ /* Global Scrollbar */
71
+ ::-webkit-scrollbar {
72
+ width: 10px;
73
+ }
74
+
75
+ ::-webkit-scrollbar-track {
76
+ background: #020617;
77
+ }
78
+
79
+ ::-webkit-scrollbar-thumb {
80
+ background: #334155;
81
+ border-radius: 5px;
82
+ }
83
+
84
+ ::-webkit-scrollbar-thumb:hover {
85
+ background: #475569;
86
+ }
87
+
88
+ .glass-card {
89
+ background: rgba(255, 255, 255, 0.03);
90
+ backdrop-filter: blur(16px);
91
+ border: 1px solid rgba(255, 255, 255, 0.05);
92
+ box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
93
+ }
94
+
95
+ /* Metric Grid Overlay */
96
+ .bg-grid {
97
+ background-size: 40px 40px;
98
+ background-image: linear-gradient(to right, rgba(255, 255, 255, 0.05) 1px, transparent 1px),
99
+ linear-gradient(to bottom, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
59
100
  }
60
101
 
61
- .scrollbar-hide {
62
- -ms-overflow-style: none;
63
- scrollbar-width: none;
102
+ .bg-grid-mask {
103
+ mask-image: radial-gradient(circle at center, black, transparent 80%);
104
+ -webkit-mask-image: radial-gradient(circle at center, black, transparent 80%);
64
105
  }
65
106
  </style>
66
107
  </head>
67
108
 
68
- <body class="bg-gray-50 text-slate-800 font-sans antialiased">
69
-
70
- <!-- Mobile Header -->
71
- <div class="lg:hidden flex items-center justify-between p-4 bg-sawit-900 text-white sticky top-0 z-50 shadow-md">
72
- <div class="flex items-center space-x-3">
73
- <span class="font-bold text-lg">SawitDB</span>
109
+ <body class="bg-darker text-white antialiased selection:bg-primary selection:text-white">
110
+
111
+ <!-- Mobile Navbar (WowoEngine Style) -->
112
+ <nav class="lg:hidden fixed w-full z-50 top-0 start-0 border-b border-white/5 bg-darker/80 backdrop-blur-xl">
113
+ <div class="max-w-7xl flex flex-wrap items-center justify-between mx-auto p-4">
114
+ <a href="#" class="flex items-center space-x-3 rtl:space-x-reverse group">
115
+ <span
116
+ class="self-center text-lg font-bold whitespace-nowrap bg-gradient-to-r from-green-400 to-emerald-600 text-transparent bg-clip-text">SawitDB</span>
117
+ </a>
118
+ <button id="mobile-menu-btn" data-collapse-toggle="navbar-default" type="button"
119
+ class="inline-flex items-center p-2 w-10 h-10 justify-center text-sm text-gray-500 rounded-lg hover:bg-white/5 focus:outline-none focus:ring-2 focus:ring-gray-600"
120
+ aria-controls="navbar-default" aria-expanded="false">
121
+ <span class="sr-only">Open main menu</span>
122
+ <svg class="w-5 h-5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none"
123
+ viewBox="0 0 17 14">
124
+ <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
125
+ d="M1 1h15M1 7h15M1 13h15" />
126
+ </svg>
127
+ </button>
128
+ <div class="hidden w-full" id="navbar-default">
129
+ <ul
130
+ class="font-medium flex flex-col p-4 mt-4 border border-white/5 rounded-lg bg-black/60 backdrop-blur-xl space-y-2">
131
+ <li>
132
+ <a href="#intro"
133
+ class="block py-2 px-3 text-gray-300 rounded hover:text-white hover:bg-white/5 transition-all">Introduction</a>
134
+ </li>
135
+ <li>
136
+ <a href="#features"
137
+ class="block py-2 px-3 text-gray-300 rounded hover:text-white hover:bg-white/5 transition-all">Features</a>
138
+ </li>
139
+ <li>
140
+ <a href="#filosofi"
141
+ class="block py-2 px-3 text-gray-300 rounded hover:text-white hover:bg-white/5 transition-all">Filosofi</a>
142
+ </li>
143
+ <li>
144
+ <a href="#installation"
145
+ class="block py-2 px-3 text-gray-300 rounded hover:text-white hover:bg-white/5 transition-all">Installation</a>
146
+ </li>
147
+ <li>
148
+ <a href="#syntax"
149
+ class="block py-2 px-3 text-gray-300 rounded hover:text-white hover:bg-white/5 transition-all">AQL
150
+ Syntax</a>
151
+ </li>
152
+ <li>
153
+ <a href="#network"
154
+ class="block py-2 px-3 text-gray-300 rounded hover:text-white hover:bg-white/5 transition-all">Network</a>
155
+ </li>
156
+ <li>
157
+ <a href="#client-api"
158
+ class="block py-2 px-3 text-gray-300 rounded hover:text-white hover:bg-white/5 transition-all">Client
159
+ API</a>
160
+ </li>
161
+ <li>
162
+ <a href="#cli"
163
+ class="block py-2 px-3 text-gray-300 rounded hover:text-white hover:bg-white/5 transition-all">CLI
164
+ Tool</a>
165
+ </li>
166
+ </ul>
167
+ </div>
74
168
  </div>
75
- <button onclick="document.getElementById('mobile-menu').classList.toggle('hidden')"
76
- class="p-2 focus:outline-none">
77
- <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
78
- <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16">
79
- </path>
80
- </svg>
81
- </button>
82
- </div>
83
-
84
- <!-- Mobile Menu Overlay -->
85
- <div id="mobile-menu"
86
- class="hidden lg:hidden fixed inset-0 bg-gray-800 bg-opacity-95 z-40 p-4 transition-all duration-300">
87
- <div class="flex justify-end mb-4">
88
- <button onclick="document.getElementById('mobile-menu').classList.add('hidden')"
89
- class="text-white p-2">✕</button>
169
+ </nav>
170
+
171
+ <div class="flex min-h-screen relative">
172
+ <!-- Background Effects -->
173
+ <div class="fixed top-0 left-0 w-full h-full overflow-hidden -z-10">
174
+ <div class="absolute inset-0 bg-grid bg-grid-mask z-0 pointer-events-none"></div>
175
+ <div class="absolute inset-0 bg-[url('https://grainy-gradients.vercel.app/noise.svg')] opacity-20"></div>
176
+ <!-- Blobs -->
177
+ <div
178
+ class="absolute top-[-10%] left-[-10%] w-96 h-96 bg-green-500/20 rounded-full mix-blend-screen filter blur-[100px] opacity-20">
179
+ </div>
180
+ <div
181
+ class="absolute bottom-[-10%] right-[-10%] w-96 h-96 bg-emerald-500/20 rounded-full mix-blend-screen filter blur-[100px] opacity-20">
182
+ </div>
90
183
  </div>
91
- <nav class="flex flex-col space-y-4 text-center">
92
- <a href="#intro" class="text-white text-lg font-medium hover:text-sawit-400"
93
- onclick="toggleMenu()">Introduction</a>
94
- <a href="#features" class="text-white text-lg font-medium hover:text-sawit-400"
95
- onclick="toggleMenu()">Features</a>
96
- <a href="#filosofi" class="text-white text-lg font-medium hover:text-sawit-400"
97
- onclick="toggleMenu()">Filosofi</a>
98
- <a href="#installation" class="text-white text-lg font-medium hover:text-sawit-400"
99
- onclick="toggleMenu()">Installation</a>
100
- <a href="#syntax" class="text-white text-lg font-medium hover:text-sawit-400" onclick="toggleMenu()">AQL
101
- Syntax</a>
102
- <a href="#network" class="text-white text-lg font-medium hover:text-sawit-400"
103
- onclick="toggleMenu()">Network</a>
104
- <a href="#client-api" class="text-white text-lg font-medium hover:text-sawit-400"
105
- onclick="toggleMenu()">Client API</a>
106
- <a href="#cli" class="text-white text-lg font-medium hover:text-sawit-400" onclick="toggleMenu()">CLI
107
- Tool</a>
108
- </nav>
109
- </div>
110
184
 
111
- <div class="flex min-h-screen">
112
185
  <!-- Desktop Sidebar -->
113
- <aside class="hidden lg:flex flex-col w-72 bg-sawit-900 fixed h-screen overflow-y-auto z-30 shadow-xl">
114
- <div class="p-6 border-b border-sawit-800">
115
- <h1 class="text-2xl font-bold text-white tracking-wide">SawitDB</h1>
186
+ <aside
187
+ class="hidden lg:flex flex-col w-72 bg-black/40 backdrop-blur-xl border-r border-white/5 fixed h-screen overflow-y-auto z-30">
188
+ <div class="p-6 border-b border-white/5">
189
+ <h1
190
+ class="text-2xl font-bold bg-gradient-to-r from-green-400 to-emerald-600 text-transparent bg-clip-text tracking-wide">
191
+ SawitDB</h1>
116
192
  </div>
117
193
 
118
194
  <nav class="flex-1 p-4 space-y-1">
119
195
  <a href="#intro"
120
- class="flex items-center px-4 py-3 text-gray-300 hover:bg-sawit-800 hover:text-white rounded-lg transition-colors group cursor-pointer">
196
+ class="flex items-center px-4 py-3 text-gray-400 hover:bg-white/5 hover:text-white rounded-lg transition-all group cursor-pointer border border-transparent hover:border-white/5">
121
197
  Introduction
122
198
  </a>
123
199
  <a href="#features"
124
- class="flex items-center px-4 py-3 text-gray-300 hover:bg-sawit-800 hover:text-white rounded-lg transition-colors group cursor-pointer">
200
+ class="flex items-center px-4 py-3 text-gray-400 hover:bg-white/5 hover:text-white rounded-lg transition-all group cursor-pointer border border-transparent hover:border-white/5">
125
201
  Features
126
202
  </a>
127
203
  <a href="#filosofi"
128
- class="flex items-center px-4 py-3 text-gray-300 hover:bg-sawit-800 hover:text-white rounded-lg transition-colors group cursor-pointer">
204
+ class="flex items-center px-4 py-3 text-gray-400 hover:bg-white/5 hover:text-white rounded-lg transition-all group cursor-pointer border border-transparent hover:border-white/5">
129
205
  Filosofi
130
206
  </a>
131
207
  <a href="#installation"
132
- class="flex items-center px-4 py-3 text-gray-300 hover:bg-sawit-800 hover:text-white rounded-lg transition-colors group cursor-pointer">
208
+ class="flex items-center px-4 py-3 text-gray-400 hover:bg-white/5 hover:text-white rounded-lg transition-all group cursor-pointer border border-transparent hover:border-white/5">
133
209
  Installation
134
210
  </a>
135
211
  <a href="#syntax"
136
- class="flex items-center px-4 py-3 text-gray-300 hover:bg-sawit-800 hover:text-white rounded-lg transition-colors group cursor-pointer">
212
+ class="flex items-center px-4 py-3 text-gray-400 hover:bg-white/5 hover:text-white rounded-lg transition-all group cursor-pointer border border-transparent hover:border-white/5">
137
213
  Query Syntax
138
214
  </a>
139
215
  <a href="#network"
140
- class="flex items-center px-4 py-3 text-gray-300 hover:bg-sawit-800 hover:text-white rounded-lg transition-colors group cursor-pointer">
216
+ class="flex items-center px-4 py-3 text-gray-400 hover:bg-white/5 hover:text-white rounded-lg transition-all group cursor-pointer border border-transparent hover:border-white/5">
141
217
  Network
142
218
  </a>
143
219
  <a href="#client-api"
144
- class="flex items-center px-4 py-3 text-gray-300 hover:bg-sawit-800 hover:text-white rounded-lg transition-colors group cursor-pointer">
220
+ class="flex items-center px-4 py-3 text-gray-400 hover:bg-white/5 hover:text-white rounded-lg transition-all group cursor-pointer border border-transparent hover:border-white/5">
145
221
  Client API
146
222
  </a>
147
223
  <a href="#cli"
148
- class="flex items-center px-4 py-3 text-gray-300 hover:bg-sawit-800 hover:text-white rounded-lg transition-colors group cursor-pointer">
224
+ class="flex items-center px-4 py-3 text-gray-400 hover:bg-white/5 hover:text-white rounded-lg transition-all group cursor-pointer border border-transparent hover:border-white/5">
149
225
  CLI Tool
150
226
  </a>
151
227
  </nav>
152
228
 
153
- <div class="p-6 border-t border-sawit-800">
154
- <p class="text-xs text-gray-300">&copy; 2025 SawitDB Core Team</p>
229
+ <div class="p-6 border-t border-white/5">
230
+ <p class="text-xs text-gray-500">&copy; 2025 SawitDB Core Team</p>
155
231
  </div>
156
232
  </aside>
157
233
 
@@ -160,18 +236,18 @@
160
236
 
161
237
  <!-- Intro Section -->
162
238
  <section id="intro" class="mb-16 scroll-mt-24">
163
- <h2 class="text-4xl font-extrabold text-sawit-900 mb-6 border-b-4 border-sawit-500 inline-block pb-2">
239
+ <h2 class="text-4xl font-extrabold text-white mb-6 border-b-4 border-green-500 inline-block pb-2">
164
240
  Introduction</h2>
165
- <div
166
- class="bg-white rounded-2xl shadow-sm border border-gray-100 p-8 hover:shadow-md transition-shadow">
167
- <p class="text-lg leading-relaxed text-gray-600 mb-6">
168
- <strong class="text-sawit-700">SawitDB</strong> is a revolutionary database solution stored in
169
- single <code class="bg-gray-100 text-red-500 px-2 py-1 rounded text-sm font-mono">.sawit</code>
241
+ <div class="glass-card rounded-2xl p-8 hover:bg-white/5 transition-all">
242
+ <p class="text-lg leading-relaxed text-gray-300 mb-6">
243
+ <strong class="text-green-400">SawitDB</strong> is a revolutionary database solution stored in
244
+ single <code
245
+ class="bg-red-500/10 text-red-400 px-2 py-1 rounded text-sm font-mono border border-red-500/20">.sawit</code>
170
246
  binary files.
171
247
  It combines the reliability of a Paged Heap File architecture with the charm of localized
172
248
  wisdom.
173
249
  </p>
174
- <p class="text-gray-600 leading-relaxed">
250
+ <p class="text-gray-300 leading-relaxed">
175
251
  What differentiates SawitDB is its unique <strong>Agricultural Query Language (AQL)</strong>,
176
252
  which replaces standard SQL keywords with Indonesian farming terminology, making database
177
253
  management as intuitive as managing a plantation.
@@ -180,10 +256,10 @@
180
256
 
181
257
  <!-- Alert Box -->
182
258
  <div
183
- class="mt-8 bg-amber-50 border-l-4 border-amber-500 p-6 rounded-r-xl shadow-sm flex flex-col md:flex-row items-start md:items-center justify-between">
259
+ class="mt-8 bg-amber-500/10 border-l-4 border-amber-500 p-6 rounded-r-xl flex flex-col md:flex-row items-start md:items-center justify-between">
184
260
  <div>
185
- <h3 class="text-amber-800 font-bold text-lg mb-1">🚨 Emergency: Aceh Flood Relief</h3>
186
- <p class="text-amber-700 text-sm">Please support our brothers and sisters in Aceh.</p>
261
+ <h3 class="text-amber-400 font-bold text-lg mb-1">🚨 Emergency: Aceh Flood Relief</h3>
262
+ <p class="text-amber-200/80 text-sm">Please support our brothers and sisters in Aceh.</p>
187
263
  </div>
188
264
  <a href="https://kitabisa.com/campaign/donasipedulibanjiraceh" target="_blank"
189
265
  class="mt-4 md:mt-0 inline-flex items-center px-4 py-2 bg-amber-600 hover:bg-amber-700 text-white text-sm font-medium rounded-lg transition-colors shadow-sm">
@@ -199,89 +275,102 @@
199
275
 
200
276
  <!-- Features -->
201
277
  <section id="features" class="mb-16 scroll-mt-24">
202
- <h2 class="text-3xl font-bold text-gray-800 mb-8 flex items-center">
278
+ <h2 class="text-3xl font-bold text-white mb-8 flex items-center">
203
279
  Features
204
280
  </h2>
205
281
  <div class="grid md:grid-cols-2 gap-6">
206
- <div
207
- class="bg-white p-6 rounded-xl shadow-sm border border-gray-100 hover:border-sawit-200 transition-colors">
208
- <h3 class="font-bold text-xl text-sawit-800 mb-2">Paged Architecture</h3>
209
- <p class="text-gray-600 text-sm">Data stored in 4096-byte binary pages. Optimized for low memory
282
+ <div class="glass-card p-6 rounded-xl hover:bg-white/5 transition-all group">
283
+ <h3 class="font-bold text-xl text-green-400 mb-2 group-hover:text-green-300">Paged Architecture
284
+ </h3>
285
+ <p class="text-gray-400 text-sm">Data stored in 4096-byte binary pages. Optimized for low memory
210
286
  footprint.</p>
211
287
  </div>
212
- <div
213
- class="bg-white p-6 rounded-xl shadow-sm border border-gray-100 hover:border-sawit-200 transition-colors">
214
- <h3 class="font-bold text-xl text-sawit-800 mb-2">Single File Storage</h3>
215
- <p class="text-gray-600 text-sm">All data, schema, and indexes reside in a single
216
- <code>.sawit</code> file.
288
+ <div class="glass-card p-6 rounded-xl hover:bg-white/5 transition-all group">
289
+ <h3 class="font-bold text-xl text-green-400 mb-2 group-hover:text-green-300">Single File Storage
290
+ </h3>
291
+ <p class="text-gray-400 text-sm">All data, schema, and indexes reside in a single
292
+ <code class="bg-white/10 px-1 py-0.5 rounded text-gray-300">.sawit</code> file.
217
293
  </p>
218
294
  </div>
219
- <div
220
- class="bg-white p-6 rounded-xl shadow-sm border border-gray-100 hover:border-sawit-200 transition-colors">
221
- <h3 class="font-bold text-xl text-sawit-800 mb-2">High Stability</h3>
222
- <p class="text-gray-600 text-sm">Uses 4KB atomic pages. More stable than a coalition government.
295
+ <div class="glass-card p-6 rounded-xl hover:bg-white/5 transition-all group">
296
+ <h3 class="font-bold text-xl text-green-400 mb-2 group-hover:text-green-300">High Stability</h3>
297
+ <p class="text-gray-400 text-sm">Uses 4KB atomic pages. More stable than a coalition government.
223
298
  </p>
224
299
  </div>
225
- <div
226
- class="bg-white p-6 rounded-xl shadow-sm border border-gray-100 hover:border-sawit-200 transition-colors">
227
- <h3 class="font-bold text-xl text-sawit-800 mb-2">Anti-Korupsi Integrity</h3>
228
- <p class="text-gray-600 text-sm">Strict <code>fsync</code> protocols ensure data is safe and
300
+ <div class="glass-card p-6 rounded-xl hover:bg-white/5 transition-all group">
301
+ <h3 class="font-bold text-xl text-green-400 mb-2 group-hover:text-green-300">Anti-Korupsi
302
+ Integrity</h3>
303
+ <p class="text-gray-400 text-sm">Strict <code
304
+ class="bg-white/10 px-1 py-0.5 rounded text-gray-300">fsync</code> protocols ensure data
305
+ is safe and
229
306
  never "mysteriously disappears".</p>
230
307
  </div>
231
- <div
232
- class="bg-white p-6 rounded-xl shadow-sm border border-gray-100 hover:border-sawit-200 transition-colors">
233
- <h3 class="font-bold text-xl text-sawit-800 mb-2">Zero Bureaucracy</h3>
234
- <p class="text-gray-600 text-sm">Pure Node.js. Zero dependencies. No "Vendor Pengadaan" or
308
+ <div class="glass-card p-6 rounded-xl hover:bg-white/5 transition-all group">
309
+ <h3 class="font-bold text-xl text-green-400 mb-2 group-hover:text-green-300">Crash Recovery
310
+ </h3>
311
+ <p class="text-gray-400 text-sm">Powered by <code
312
+ class="bg-white/10 px-1 py-0.5 rounded text-gray-300">Write-Ahead Logging (WAL)</code>.
313
+ Data guarantees to
314
+ return. Unlike a fugitive who is "hard to find".</p>
315
+ </div>
316
+ <div class="glass-card p-6 rounded-xl hover:bg-white/5 transition-all group">
317
+ <h3 class="font-bold text-xl text-green-400 mb-2 group-hover:text-green-300">Zero Bureaucracy
318
+ </h3>
319
+ <p class="text-gray-400 text-sm">Pure Node.js. Zero dependencies. No "Vendor Pengadaan" or
235
320
  markups.</p>
236
321
  </div>
237
- <div
238
- class="bg-white p-6 rounded-xl shadow-sm border border-gray-100 hover:border-sawit-200 transition-colors">
239
- <h3 class="font-bold text-xl text-sawit-800 mb-2">Transparansi</h3>
240
- <p class="text-gray-600 text-sm">Clear query language. No "Pasal Karet" (ambiguous laws).</p>
322
+ <div class="glass-card p-6 rounded-xl hover:bg-white/5 transition-all group">
323
+ <h3 class="font-bold text-xl text-green-400 mb-2 group-hover:text-green-300">Transparansi</h3>
324
+ <p class="text-gray-400 text-sm">Clear query language. No "Pasal Karet" (ambiguous laws).</p>
241
325
  </div>
242
326
  </div>
243
327
  </section>
244
328
 
245
329
  <!-- Benchmarks -->
246
330
  <section id="benchmarks" class="mb-16 scroll-mt-24">
247
- <h2 class="text-3xl font-bold text-gray-800 mb-8 flex items-center">
331
+ <h2 class="text-3xl font-bold text-white mb-8 flex items-center">
248
332
  Benchmark Performance
249
333
  </h2>
250
- <div class="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden">
251
- <div class="p-6 bg-gray-50 border-b border-gray-100">
252
- <p class="text-sm text-gray-600">
334
+ <div class="glass-card rounded-xl overflow-hidden">
335
+ <div class="p-6 bg-white/5 border-b border-white/5">
336
+ <p class="text-sm text-gray-300">
253
337
  <strong>Environment:</strong> Single Thread, Windows Node.js (Local NVMe)
254
338
  </p>
255
339
  </div>
256
340
  <div class="overflow-x-auto">
257
341
  <table class="w-full text-sm text-left">
258
- <thead class="text-xs text-gray-700 uppercase bg-gray-50 border-b">
342
+ <thead class="text-xs text-gray-400 uppercase bg-white/5 border-b border-white/5">
259
343
  <tr>
260
344
  <th class="px-6 py-4 font-bold">Operation</th>
261
345
  <th class="px-6 py-4 font-bold">Ops/Sec</th>
262
346
  <th class="px-6 py-4 font-bold">Latency (avg)</th>
263
347
  </tr>
264
348
  </thead>
265
- <tbody class="divide-y divide-gray-100">
266
- <tr class="bg-white hover:bg-gray-50">
267
- <td class="px-6 py-4 font-medium text-gray-900">INSERT</td>
268
- <td class="px-6 py-4 text-green-600 font-bold">~3,125</td>
269
- <td class="px-6 py-4 text-gray-600">0.32 ms</td>
349
+ <tbody class="divide-y divide-white/5">
350
+ <tr class="hover:bg-white/5 transition-colors">
351
+ <td class="px-6 py-4 font-medium text-white">INSERT</td>
352
+ <td class="px-6 py-4 text-green-400 font-bold">~22,000</td>
353
+ <td class="px-6 py-4 text-gray-400">0.045 ms</td>
270
354
  </tr>
271
- <tr class="bg-white hover:bg-gray-50">
272
- <td class="px-6 py-4 font-medium text-gray-900">SELECT (PK Index)</td>
273
- <td class="px-6 py-4 text-green-600 font-bold">~3,846</td>
274
- <td class="px-6 py-4 text-gray-600">0.26 ms</td>
355
+ <tr class="hover:bg-white/5 transition-colors">
356
+ <td class="px-6 py-4 font-medium text-white">SELECT (PK Index)</td>
357
+ <td class="px-6 py-4 text-green-400 font-bold">~247,288</td>
358
+ <td class="px-6 py-4 text-gray-400">0.004 ms</td>
275
359
  </tr>
276
- <tr class="bg-white hover:bg-gray-50">
277
- <td class="px-6 py-4 font-medium text-gray-900">SELECT (Scan)</td>
278
- <td class="px-6 py-4 text-green-600 font-bold">~4,762</td>
279
- <td class="px-6 py-4 text-gray-600">0.21 ms</td>
360
+ <tr class="hover:bg-white/5 transition-colors">
361
+ <td class="px-6 py-4 font-medium text-white">SELECT (Scan)</td>
362
+ <td class="px-6 py-4 text-green-400 font-bold">~13,200</td>
363
+ <td class="px-6 py-4 text-gray-400">0.075 ms</td>
280
364
  </tr>
281
- <tr class="bg-white hover:bg-gray-50">
282
- <td class="px-6 py-4 font-medium text-gray-900">UPDATE</td>
283
- <td class="px-6 py-4 text-green-600 font-bold">~3,571</td>
284
- <td class="px-6 py-4 text-gray-600">0.28 ms</td>
365
+ <tr class="hover:bg-white/5 transition-colors">
366
+ <td class="px-6 py-4 font-medium text-white">UPDATE (Indexed)</td>
367
+ <td class="px-6 py-4 text-green-400 font-bold">~11,000</td>
368
+ <td class="px-6 py-4 text-gray-400">0.090 ms</td>
369
+ </tr>
370
+ <tr class="hover:bg-white/5 transition-colors">
371
+ <td class="px-6 py-4 font-medium text-white">DELETE (Indexed)</td>
372
+ <td class="px-6 py-4 text-green-400 font-bold">~19,000</td>
373
+ <td class="px-6 py-4 text-gray-400">0.052 ms</td>
285
374
  </tr>
286
375
  </tbody>
287
376
  </table>
@@ -292,19 +381,19 @@
292
381
  <!-- Filosofi -->
293
382
  <section id="filosofi" class="mb-16 scroll-mt-24">
294
383
  <div
295
- class="bg-gradient-to-br from-sawit-800 to-sawit-900 rounded-2xl p-8 md:p-12 text-white shadow-lg relative overflow-hidden">
384
+ class="bg-gradient-to-br from-green-900/50 to-emerald-950/50 rounded-2xl p-8 md:p-12 text-white shadow-lg relative overflow-hidden border border-green-500/20 backdrop-blur-sm">
296
385
  <div class="absolute top-0 right-0 opacity-10 transform translate-x-10 -translate-y-10">
297
386
  <svg width="300" height="300" viewBox="0 0 24 24" fill="currentColor">
298
387
  <path d="M12 2L2 22h20L12 2zm0 3.5L18.5 20h-13L12 5.5z" />
299
388
  </svg>
300
389
  </div>
301
390
 
302
- <h2 class="text-3xl font-bold mb-8 border-b border-gray-600 pb-4 inline-block">Filosofi</h2>
391
+ <h2 class="text-3xl font-bold mb-8 border-b border-white/10 pb-4 inline-block">Filosofi</h2>
303
392
 
304
393
  <div class="grid md:grid-cols-2 gap-10">
305
394
  <div>
306
- <h3 class="text-xl font-bold text-sawit-300 mb-4 flex items-center">Filosofi (ID)</h3>
307
- <p class="text-sawit-100 leading-relaxed text-sm">
395
+ <h3 class="text-xl font-bold text-green-400 mb-4 flex items-center">Filosofi (ID)</h3>
396
+ <p class="text-gray-300 leading-relaxed text-sm">
308
397
  SawitDB dibangun dengan semangat "Kemandirian Data". Kami percaya database yang handal
309
398
  tidak butuh <strong>Infrastruktur Langit</strong> yang harganya triliunan tapi sering
310
399
  <em>down</em>. Berbeda dengan proyek negara yang mahal di <em>budget</em> tapi murah di
@@ -312,9 +401,9 @@
312
401
  </p>
313
402
  </div>
314
403
  <div>
315
- <h3 class="text-xl font-bold text-sawit-300 mb-4 flex items-center">Philosophy (EN)
404
+ <h3 class="text-xl font-bold text-green-400 mb-4 flex items-center">Philosophy (EN)
316
405
  </h3>
317
- <p class="text-sawit-100 leading-relaxed text-sm">
406
+ <p class="text-gray-300 leading-relaxed text-sm">
318
407
  SawitDB is built with the spirit of "Data Sovereignty". We believe a reliable database
319
408
  doesn't need <strong>"Sky Infrastructure"</strong> that costs trillions yet goes
320
409
  <em>down</em> often. SawitDB uses a cost-effective <strong>Single File</strong>
@@ -327,99 +416,162 @@
327
416
 
328
417
  <!-- Installation -->
329
418
  <section id="installation" class="mb-16 scroll-mt-24">
330
- <h2 class="text-3xl font-bold text-gray-800 mb-8 flex items-center">
419
+ <h2 class="text-3xl font-bold text-white mb-8 flex items-center">
331
420
  Installation
332
421
  </h2>
333
422
 
334
- <div class="bg-gray-900 rounded-xl p-6 shadow-xl mb-8 overflow-x-auto">
335
- <div class="flex items-center space-x-2 mb-4">
336
- <div class="w-3 h-3 rounded-full bg-red-500"></div>
337
- <div class="w-3 h-3 rounded-full bg-yellow-500"></div>
338
- <div class="w-3 h-3 rounded-full bg-green-500"></div>
339
- <span class="text-gray-500 text-xs ml-2">bash</span>
340
- </div>
341
- <code class="block font-mono text-sm text-green-400">
342
- git clone https://github.com/WowoEngine/SawitDB.git<br>
343
- cd SawitDB<br>
344
- npm install <span class="text-gray-500"># Pure Node.js, no heavy deps!</span>
345
- </code>
423
+ <!-- Node.js Installation -->
424
+ <div class="mb-8">
425
+ <div class="flex items-center justify-between mb-4">
426
+ <h3 class="text-xl font-bold text-gray-200 flex items-center gap-2">
427
+ <i class="fab fa-node text-green-500"></i> Node.js
428
+ </h3>
429
+ <a href="https://www.npmjs.com/package/@wowoengine/sawitdb" target="_blank"
430
+ class="text-xs bg-white/10 hover:bg-white/20 px-2 py-1 rounded text-gray-400 transition-colors">
431
+ details <i class="fas fa-external-link-alt ml-1"></i>
432
+ </a>
433
+ </div>
434
+ <div
435
+ class="bg-black/50 rounded-xl p-6 shadow-xl overflow-x-auto border border-white/10 relative group">
436
+ <div class="absolute top-4 right-4 opacity-0 group-hover:opacity-100 transition-opacity">
437
+ <button class="text-gray-400 hover:text-white text-xs"
438
+ onclick="navigator.clipboard.writeText('npm install @wowoengine/sawitdb')">Copy</button>
439
+ </div>
440
+ <code class="block font-mono text-sm text-gray-300">
441
+ <span class="text-green-400">npm</span> install @wowoengine/sawitdb
442
+ </code>
443
+ </div>
444
+ </div>
445
+
446
+ <!-- PHP Installation -->
447
+ <div class="mb-12">
448
+ <div class="flex items-center justify-between mb-4">
449
+ <h3 class="text-xl font-bold text-gray-200 flex items-center gap-2">
450
+ <i class="fab fa-php text-indigo-400"></i> PHP
451
+ </h3>
452
+ <a href="https://packagist.org/packages/wowoengine/sawitdb-php" target="_blank"
453
+ class="text-xs bg-white/10 hover:bg-white/20 px-2 py-1 rounded text-gray-400 transition-colors">
454
+ details <i class="fas fa-external-link-alt ml-1"></i>
455
+ </a>
456
+ </div>
457
+ <div
458
+ class="bg-black/50 rounded-xl p-6 shadow-xl overflow-x-auto border border-white/10 relative group">
459
+ <div class="absolute top-4 right-4 opacity-0 group-hover:opacity-100 transition-opacity">
460
+ <button class="text-gray-400 hover:text-white text-xs"
461
+ onclick="navigator.clipboard.writeText('composer require wowoengine/sawitdb-php')">Copy</button>
462
+ </div>
463
+ <code class="block font-mono text-sm text-gray-300">
464
+ <span class="text-indigo-400">composer</span> require wowoengine/sawitdb-php
465
+ </code>
466
+ </div>
467
+ </div>
468
+
469
+ <div class="grid md:grid-cols-2 gap-8">
470
+ <!-- JS Initialization -->
471
+ <div>
472
+ <h4 class="text-sm font-bold text-gray-500 uppercase tracking-widest mb-3">Node.js Usage</h4>
473
+ <div class="bg-black/50 rounded-xl p-6 shadow-xl overflow-x-auto border border-white/10 h-full">
474
+ <code class="font-mono text-sm text-gray-300">
475
+ <span class="text-purple-400">const</span> SawitDB = <span class="text-blue-400">require</span>(<span class="text-green-300">'@wowoengine/sawitdb'</span>);<br>
476
+ <span class="text-purple-400">const</span> path = <span class="text-blue-400">require</span>(<span class="text-green-300">'path'</span>);<br><br>
477
+ <span class="text-gray-500">// Initialize</span><br>
478
+ <span class="text-purple-400">const</span> db = <span class="text-purple-400">new</span> <span class="text-yellow-300">SawitDB</span>(<span class="text-green-300">'plantation.sawit'</span>);
479
+ </code>
480
+ </div>
481
+ </div>
482
+
483
+ <!-- PHP Initialization -->
484
+ <div>
485
+ <h4 class="text-sm font-bold text-gray-500 uppercase tracking-widest mb-3">PHP Usage</h4>
486
+ <div class="bg-black/50 rounded-xl p-6 shadow-xl overflow-x-auto border border-white/10 h-full">
487
+ <code class="font-mono text-sm text-gray-300">
488
+ <span class="text-purple-400">use</span> WowoEngine\SawitDB\SawitDB;<br><br>
489
+ <span class="text-gray-500">// Initialize</span><br>
490
+ <span class="text-purple-400">$db</span> = <span class="text-purple-400">new</span> <span class="text-yellow-300">SawitDB</span>(<span class="text-green-300">'plantation.sawit'</span>);
491
+ </code>
492
+ </div>
493
+ </div>
346
494
  </div>
347
495
 
348
- <h3 class="text-xl font-bold text-gray-700 mb-4">Initialization</h3>
349
- <div class="bg-gray-900 rounded-xl p-6 shadow-xl overflow-x-auto">
350
- <code class="font-mono text-sm text-gray-300">
351
- <span class="text-purple-400">const</span> SawitDB = <span class="text-blue-400">require</span>(<span class="text-green-300">'./src/WowoEngine'</span>);<br>
352
- <span class="text-purple-400">const</span> path = <span class="text-blue-400">require</span>(<span class="text-green-300">'path'</span>);<br><br>
353
- <span class="text-gray-500">// Initialize the engine. File created automatically.</span><br>
354
- <span class="text-purple-400">const</span> db = <span class="text-purple-400">new</span> <span class="text-yellow-300">SawitDB</span>(path.<span class="text-blue-400">join</span>(__dirname, <span class="text-green-300">'plantation.sawit'</span>));
355
- </code>
496
+ <!-- Source Installation (Collapsible or Footnote) -->
497
+ <div class="mt-8 pt-8 border-t border-white/5">
498
+ <details class="text-gray-400 cursor-pointer group">
499
+ <summary class="hover:text-white transition-colors text-sm font-medium">Build from Source (Git)
500
+ </summary>
501
+ <div class="mt-4 bg-black/50 rounded-xl p-4 border border-white/10">
502
+ <code class="block font-mono text-sm text-gray-300">
503
+ git clone https://github.com/WowoEngine/SawitDB.git<br>
504
+ cd SawitDB && npm install
505
+ </code>
506
+ </div>
507
+ </details>
356
508
  </div>
357
509
  </section>
358
510
 
359
511
  <!-- Syntax -->
360
512
  <section id="syntax" class="mb-16 scroll-mt-24">
361
- <h2 class="text-3xl font-bold text-gray-800 mb-8 flex items-center">
513
+ <h2 class="text-3xl font-bold text-white mb-8 flex items-center">
362
514
  Query Syntax (AQL)
363
515
  </h2>
364
- <p class="text-gray-600 mb-8">SawitDB uses intuitive farming metaphors for all database operations. It
516
+ <p class="text-gray-400 mb-8">SawitDB uses intuitive farming metaphors for all database operations. It
365
517
  also supports Generic SQL for easier adoption.</p>
366
518
 
367
519
  <!-- Dual Syntax Table -->
368
- <div class="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden mb-12">
369
- <div class="p-4 bg-gray-50 border-b border-gray-100">
370
- <h3 class="font-bold text-gray-800">Dual Syntax Comparison</h3>
520
+ <div class="glass-card rounded-xl overflow-hidden mb-12">
521
+ <div class="p-4 bg-white/5 border-b border-white/5">
522
+ <h3 class="font-bold text-white">Dual Syntax Comparison</h3>
371
523
  </div>
372
524
  <div class="overflow-x-auto">
373
525
  <table class="w-full text-sm text-left">
374
- <thead class="text-xs text-gray-700 uppercase bg-gray-50 border-b">
526
+ <thead class="text-xs text-gray-400 uppercase bg-white/5 border-b border-white/5">
375
527
  <tr>
376
528
  <th class="px-6 py-4 font-bold">Operation</th>
377
529
  <th class="px-6 py-4 font-bold">Agricultural Query Language (AQL)</th>
378
530
  <th class="px-6 py-4 font-bold">Generic SQL (Standard)</th>
379
531
  </tr>
380
532
  </thead>
381
- <tbody class="divide-y divide-gray-100">
382
- <tr class="bg-white hover:bg-gray-50">
383
- <td class="px-6 py-4 font-medium">Create DB</td>
384
- <td class="px-6 py-4 text-green-600 font-mono">BUKA WILAYAH sales_db</td>
385
- <td class="px-6 py-4 text-blue-600 font-mono">CREATE DATABASE sales_db</td>
533
+ <tbody class="divide-y divide-white/5">
534
+ <tr class="hover:bg-white/5 transition-colors">
535
+ <td class="px-6 py-4 font-medium text-white">Create DB</td>
536
+ <td class="px-6 py-4 text-green-400 font-mono">BUKA WILAYAH sales_db</td>
537
+ <td class="px-6 py-4 text-blue-400 font-mono">CREATE DATABASE sales_db</td>
386
538
  </tr>
387
- <tr class="bg-white hover:bg-gray-50">
388
- <td class="px-6 py-4 font-medium">Use DB</td>
389
- <td class="px-6 py-4 text-green-600 font-mono">MASUK WILAYAH sales_db</td>
390
- <td class="px-6 py-4 text-blue-600 font-mono">USE sales_db</td>
539
+ <tr class="hover:bg-white/5 transition-colors">
540
+ <td class="px-6 py-4 font-medium text-white">Use DB</td>
541
+ <td class="px-6 py-4 text-green-400 font-mono">MASUK WILAYAH sales_db</td>
542
+ <td class="px-6 py-4 text-blue-400 font-mono">USE sales_db</td>
391
543
  </tr>
392
- <tr class="bg-white hover:bg-gray-50">
393
- <td class="px-6 py-4 font-medium">Show DBs</td>
394
- <td class="px-6 py-4 text-green-600 font-mono">LIHAT WILAYAH</td>
395
- <td class="px-6 py-4 text-blue-600 font-mono">SHOW DATABASES</td>
544
+ <tr class="hover:bg-white/5 transition-colors">
545
+ <td class="px-6 py-4 font-medium text-white">Show DBs</td>
546
+ <td class="px-6 py-4 text-green-400 font-mono">LIHAT WILAYAH</td>
547
+ <td class="px-6 py-4 text-blue-400 font-mono">SHOW DATABASES</td>
396
548
  </tr>
397
- <tr class="bg-white hover:bg-gray-50">
398
- <td class="px-6 py-4 font-medium">Create Table</td>
399
- <td class="px-6 py-4 text-green-600 font-mono">LAHAN products</td>
400
- <td class="px-6 py-4 text-blue-600 font-mono">CREATE TABLE products</td>
549
+ <tr class="hover:bg-white/5 transition-colors">
550
+ <td class="px-6 py-4 font-medium text-white">Create Table</td>
551
+ <td class="px-6 py-4 text-green-400 font-mono">LAHAN products</td>
552
+ <td class="px-6 py-4 text-blue-400 font-mono">CREATE TABLE products</td>
401
553
  </tr>
402
- <tr class="bg-white hover:bg-gray-50">
403
- <td class="px-6 py-4 font-medium">Insert</td>
404
- <td class="px-6 py-4 text-green-600 font-mono">TANAM KE products (...) BIBIT (...)
554
+ <tr class="hover:bg-white/5 transition-colors">
555
+ <td class="px-6 py-4 font-medium text-white">Insert</td>
556
+ <td class="px-6 py-4 text-green-400 font-mono">TANAM KE products (...) BIBIT (...)
405
557
  </td>
406
- <td class="px-6 py-4 text-blue-600 font-mono">INSERT INTO products (...) VALUES
558
+ <td class="px-6 py-4 text-blue-400 font-mono">INSERT INTO products (...) VALUES
407
559
  (...)</td>
408
560
  </tr>
409
- <tr class="bg-white hover:bg-gray-50">
410
- <td class="px-6 py-4 font-medium">Select</td>
411
- <td class="px-6 py-4 text-green-600 font-mono">PANEN * DARI products ...</td>
412
- <td class="px-6 py-4 text-blue-600 font-mono">SELECT * FROM products ...</td>
561
+ <tr class="hover:bg-white/5 transition-colors">
562
+ <td class="px-6 py-4 font-medium text-white">Select</td>
563
+ <td class="px-6 py-4 text-green-400 font-mono">PANEN * DARI products ...</td>
564
+ <td class="px-6 py-4 text-blue-400 font-mono">SELECT * FROM products ...</td>
413
565
  </tr>
414
- <tr class="bg-white hover:bg-gray-50">
415
- <td class="px-6 py-4 font-medium">Update</td>
416
- <td class="px-6 py-4 text-green-600 font-mono">PUPUK products DENGAN ...</td>
417
- <td class="px-6 py-4 text-blue-600 font-mono">UPDATE products SET ...</td>
566
+ <tr class="hover:bg-white/5 transition-colors">
567
+ <td class="px-6 py-4 font-medium text-white">Update</td>
568
+ <td class="px-6 py-4 text-green-400 font-mono">PUPUK products DENGAN ...</td>
569
+ <td class="px-6 py-4 text-blue-400 font-mono">UPDATE products SET ...</td>
418
570
  </tr>
419
- <tr class="bg-white hover:bg-gray-50">
420
- <td class="px-6 py-4 font-medium">Delete</td>
421
- <td class="px-6 py-4 text-green-600 font-mono">GUSUR DARI products ...</td>
422
- <td class="px-6 py-4 text-blue-600 font-mono">DELETE FROM products ...</td>
571
+ <tr class="hover:bg-white/5 transition-colors">
572
+ <td class="px-6 py-4 font-medium text-white">Delete</td>
573
+ <td class="px-6 py-4 text-green-400 font-mono">GUSUR DARI products ...</td>
574
+ <td class="px-6 py-4 text-blue-400 font-mono">DELETE FROM products ...</td>
423
575
  </tr>
424
576
  </tbody>
425
577
  </table>
@@ -427,65 +579,66 @@
427
579
  </div>
428
580
 
429
581
  <div class="grid lg:grid-cols-2 gap-8 mb-8">
430
- <div class="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden">
431
- <div class="bg-sawit-50 p-4 border-b border-sawit-100">
432
- <h3 class="font-bold text-sawit-800">Management</h3>
582
+ <div class="glass-card rounded-xl overflow-hidden">
583
+ <div class="bg-green-500/10 p-4 border-b border-green-500/20">
584
+ <h3 class="font-bold text-green-400">Management</h3>
433
585
  </div>
434
586
  <div class="p-4 space-y-4">
435
587
  <div>
436
- <span class="text-xs font-bold text-gray-400 uppercase tracking-wider">Create
588
+ <span class="text-xs font-bold text-gray-500 uppercase tracking-wider">Create
437
589
  Table</span>
438
- <div class="bg-gray-100 p-2 rounded mt-1 font-mono text-sm text-gray-800">LAHAN [name]
590
+ <div class="bg-black/30 p-2 rounded mt-1 font-mono text-sm text-gray-300">LAHAN [name]
439
591
  </div>
440
592
  </div>
441
593
  <div>
442
- <span class="text-xs font-bold text-gray-400 uppercase tracking-wider">Show
594
+ <span class="text-xs font-bold text-gray-500 uppercase tracking-wider">Show
443
595
  Tables</span>
444
- <div class="bg-gray-100 p-2 rounded mt-1 font-mono text-sm text-gray-800">LIHAT LAHAN
596
+ <div class="bg-black/30 p-2 rounded mt-1 font-mono text-sm text-gray-300">LIHAT LAHAN
445
597
  </div>
446
598
  </div>
447
599
  <div>
448
- <span class="text-xs font-bold text-gray-400 uppercase tracking-wider">Drop Table</span>
449
- <div class="bg-gray-100 p-2 rounded mt-1 font-mono text-sm text-gray-800">BAKAR LAHAN
600
+ <span class="text-xs font-bold text-gray-500 uppercase tracking-wider">Drop Table</span>
601
+ <div class="bg-black/30 p-2 rounded mt-1 font-mono text-sm text-gray-300">BAKAR LAHAN
450
602
  [name]</div>
451
603
  </div>
452
604
  </div>
453
605
  </div>
454
606
 
455
- <div class="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden">
456
- <div class="bg-blue-50 p-4 border-b border-blue-100">
457
- <h3 class="font-bold text-blue-800">Data Manipulation</h3>
607
+ <div class="glass-card rounded-xl overflow-hidden">
608
+ <div class="bg-blue-500/10 p-4 border-b border-blue-500/20">
609
+ <h3 class="font-bold text-blue-400">Data Manipulation</h3>
458
610
  </div>
459
611
  <div class="p-4 space-y-4">
460
612
  <div>
461
- <span class="text-xs font-bold text-gray-400 uppercase tracking-wider">Insert
613
+ <span class="text-xs font-bold text-gray-500 uppercase tracking-wider">Insert
462
614
  (Plant)</span>
463
- <div class="bg-gray-100 p-2 rounded mt-1 font-mono text-sm text-gray-800">TANAM KE
615
+ <div class="bg-black/30 p-2 rounded mt-1 font-mono text-sm text-gray-300">TANAM KE
464
616
  [table] (cols) BIBIT (vals)</div>
465
617
  </div>
466
618
  <div>
467
- <span class="text-xs font-bold text-gray-400 uppercase tracking-wider">Select
619
+ <span class="text-xs font-bold text-gray-500 uppercase tracking-wider">Select
468
620
  (Harvest)</span>
469
- <div class="bg-gray-100 p-2 rounded mt-1 font-mono text-sm text-gray-800">PANEN * DARI
621
+ <div class="bg-black/30 p-2 rounded mt-1 font-mono text-sm text-gray-300">PANEN * DARI
470
622
  [table] DIMANA [cond]</div>
471
623
  </div>
472
624
  <div>
473
- <span class="text-xs font-bold text-gray-400 uppercase tracking-wider">Update
625
+ <span class="text-xs font-bold text-gray-500 uppercase tracking-wider">Update
474
626
  (Fertilize)</span>
475
- <div class="bg-gray-100 p-2 rounded mt-1 font-mono text-sm text-gray-800">PUPUK [table]
627
+ <div class="bg-black/30 p-2 rounded mt-1 font-mono text-sm text-gray-300">PUPUK [table]
476
628
  DENGAN x=y DIMANA [cond]</div>
477
629
  </div>
478
630
  <div>
479
- <span class="text-xs font-bold text-gray-400 uppercase tracking-wider">Delete
631
+ <span class="text-xs font-bold text-gray-500 uppercase tracking-wider">Delete
480
632
  (Evict)</span>
481
- <div class="bg-gray-100 p-2 rounded mt-1 font-mono text-sm text-gray-800">GUSUR DARI
633
+ <div class="bg-black/30 p-2 rounded mt-1 font-mono text-sm text-gray-300">GUSUR DARI
482
634
  [table] DIMANA [cond]</div>
483
635
  </div>
484
636
  </div>
485
637
  </div>
486
638
  </div>
487
639
 
488
- <div class="bg-gray-900 text-gray-300 p-6 rounded-xl font-mono text-sm shadow-lg overflow-x-auto mb-12">
640
+ <div
641
+ class="bg-black/50 text-gray-300 p-6 rounded-xl font-mono text-sm shadow-lg overflow-x-auto mb-12 border border-white/10">
489
642
  <span class="text-gray-500">// Create Land</span>
490
643
  <span class="text-green-400">LAHAN</span> sawit_blok_a
491
644
 
@@ -507,54 +660,54 @@
507
660
  </div>
508
661
 
509
662
  <!-- Operators Table -->
510
- <div class="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden mb-12">
511
- <div class="p-4 bg-gray-50 border-b border-gray-100">
512
- <h3 class="font-bold text-gray-800">Supported Operators</h3>
663
+ <div class="glass-card rounded-xl overflow-hidden mb-12">
664
+ <div class="p-4 bg-white/5 border-b border-white/5">
665
+ <h3 class="font-bold text-white">Supported Operators</h3>
513
666
  </div>
514
667
  <div class="overflow-x-auto">
515
668
  <table class="w-full text-sm text-left">
516
- <thead class="text-xs text-gray-700 uppercase bg-gray-50 border-b">
669
+ <thead class="text-xs text-gray-400 uppercase bg-white/5 border-b border-white/5">
517
670
  <tr>
518
671
  <th class="px-6 py-4 font-bold">Operator</th>
519
672
  <th class="px-6 py-4 font-bold">Syntax Example</th>
520
673
  <th class="px-6 py-4 font-bold">Description</th>
521
674
  </tr>
522
675
  </thead>
523
- <tbody class="divide-y divide-gray-100">
524
- <tr class="bg-white hover:bg-gray-50">
525
- <td class="px-6 py-4 font-medium">Comparison</td>
526
- <td class="px-6 py-4 font-mono">=, !=, >, <,>=, <=< /td>
527
- <td class="px-6 py-4 text-gray-600">Standard value comparison</td>
676
+ <tbody class="divide-y divide-white/5">
677
+ <tr class="hover:bg-white/5 transition-colors">
678
+ <td class="px-6 py-4 font-medium text-white">Comparison</td>
679
+ <td class="px-6 py-4 font-mono text-gray-300">=, !=, &gt;, &lt;, &gt;=, &lt;=</td>
680
+ <td class="px-6 py-4 text-gray-400">Standard value comparison</td>
528
681
  </tr>
529
- <tr class="bg-white hover:bg-gray-50">
530
- <td class="px-6 py-4 font-medium">Logical</td>
531
- <td class="px-6 py-4 font-mono">AND, OR</td>
532
- <td class="px-6 py-4 text-gray-600">Combine multiple conditions</td>
682
+ <tr class="hover:bg-white/5 transition-colors">
683
+ <td class="px-6 py-4 font-medium text-white">Logical</td>
684
+ <td class="px-6 py-4 font-mono text-gray-300">AND, OR</td>
685
+ <td class="px-6 py-4 text-gray-400">Combine multiple conditions</td>
533
686
  </tr>
534
- <tr class="bg-white hover:bg-gray-50">
535
- <td class="px-6 py-4 font-medium">In List</td>
536
- <td class="px-6 py-4 font-mono">IN ('coffee', 'tea')</td>
537
- <td class="px-6 py-4 text-gray-600">Matches any value in the list</td>
687
+ <tr class="hover:bg-white/5 transition-colors">
688
+ <td class="px-6 py-4 font-medium text-white">In List</td>
689
+ <td class="px-6 py-4 font-mono text-gray-300">IN ('coffee', 'tea')</td>
690
+ <td class="px-6 py-4 text-gray-400">Matches any value in the list</td>
538
691
  </tr>
539
- <tr class="bg-white hover:bg-gray-50">
540
- <td class="px-6 py-4 font-medium">Pattern</td>
541
- <td class="px-6 py-4 font-mono">LIKE 'Jwa%'</td>
542
- <td class="px-6 py-4 text-gray-600">Wildcard matching (%)</td>
692
+ <tr class="hover:bg-white/5 transition-colors">
693
+ <td class="px-6 py-4 font-medium text-white">Pattern</td>
694
+ <td class="px-6 py-4 font-mono text-gray-300">LIKE 'Jwa%'</td>
695
+ <td class="px-6 py-4 text-gray-400">Wildcard matching (%)</td>
543
696
  </tr>
544
- <tr class="bg-white hover:bg-gray-50">
545
- <td class="px-6 py-4 font-medium">Range</td>
546
- <td class="px-6 py-4 font-mono">BETWEEN 10 AND 50</td>
547
- <td class="px-6 py-4 text-gray-600">Inclusive range check</td>
697
+ <tr class="hover:bg-white/5 transition-colors">
698
+ <td class="px-6 py-4 font-medium text-white">Range</td>
699
+ <td class="px-6 py-4 font-mono text-gray-300">BETWEEN 10 AND 50</td>
700
+ <td class="px-6 py-4 text-gray-400">Inclusive range check</td>
548
701
  </tr>
549
- <tr class="bg-white hover:bg-gray-50">
550
- <td class="px-6 py-4 font-medium">Null Check</td>
551
- <td class="px-6 py-4 font-mono">IS NULL, IS NOT NULL</td>
552
- <td class="px-6 py-4 text-gray-600">Check for existence</td>
702
+ <tr class="hover:bg-white/5 transition-colors">
703
+ <td class="px-6 py-4 font-medium text-white">Null Check</td>
704
+ <td class="px-6 py-4 font-mono text-gray-300">IS NULL, IS NOT NULL</td>
705
+ <td class="px-6 py-4 text-gray-400">Check for existence</td>
553
706
  </tr>
554
- <tr class="bg-white hover:bg-gray-50">
555
- <td class="px-6 py-4 font-medium">Pagination</td>
556
- <td class="px-6 py-4 font-mono">LIMIT 10 OFFSET 5</td>
557
- <td class="px-6 py-4 text-gray-600">Restrict and skip rows</td>
707
+ <tr class="hover:bg-white/5 transition-colors">
708
+ <td class="px-6 py-4 font-medium text-white">Pagination</td>
709
+ <td class="px-6 py-4 font-mono text-gray-300">LIMIT 10 OFFSET 5</td>
710
+ <td class="px-6 py-4 text-gray-400">Restrict and skip rows</td>
558
711
  </tr>
559
712
  </tbody>
560
713
  </table>
@@ -562,13 +715,13 @@
562
715
  </div>
563
716
 
564
717
  <!-- Full Feature Comparison -->
565
- <div class="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden">
566
- <div class="p-4 bg-gray-50 border-b border-gray-100">
567
- <h3 class="font-bold text-gray-800">Full Feature Comparison</h3>
718
+ <div class="glass-card rounded-xl overflow-hidden">
719
+ <div class="p-4 bg-white/5 border-b border-white/5">
720
+ <h3 class="font-bold text-white">Full Feature Comparison</h3>
568
721
  </div>
569
722
  <div class="overflow-x-auto">
570
723
  <table class="w-full text-sm text-left">
571
- <thead class="text-xs text-gray-700 uppercase bg-gray-50 border-b">
724
+ <thead class="text-xs text-gray-400 uppercase bg-white/5 border-b border-white/5">
572
725
  <tr>
573
726
  <th class="px-6 py-4 font-bold">Feature</th>
574
727
  <th class="px-6 py-4 font-bold">Tani Edition (AQL)</th>
@@ -576,29 +729,29 @@
576
729
  <th class="px-6 py-4 font-bold">Notes</th>
577
730
  </tr>
578
731
  </thead>
579
- <tbody class="divide-y divide-gray-100">
580
- <tr class="bg-white hover:bg-gray-50">
581
- <td class="px-6 py-4 font-medium">Create DB</td>
582
- <td class="px-6 py-4 font-mono text-green-600">BUKA WILAYAH [db]</td>
583
- <td class="px-6 py-4 font-mono text-blue-600">CREATE DATABASE [db]</td>
732
+ <tbody class="divide-y divide-white/5">
733
+ <tr class="hover:bg-white/5 transition-colors">
734
+ <td class="px-6 py-4 font-medium text-white">Create DB</td>
735
+ <td class="px-6 py-4 font-mono text-green-400">BUKA WILAYAH [db]</td>
736
+ <td class="px-6 py-4 font-mono text-blue-400">CREATE DATABASE [db]</td>
584
737
  <td class="px-6 py-4 text-gray-500 text-xs">Creates .sawit file</td>
585
738
  </tr>
586
- <tr class="bg-white hover:bg-gray-50">
587
- <td class="px-6 py-4 font-medium">Show Tables</td>
588
- <td class="px-6 py-4 font-mono text-green-600">LIHAT LAHAN</td>
589
- <td class="px-6 py-4 font-mono text-blue-600">SHOW TABLES</td>
739
+ <tr class="hover:bg-white/5 transition-colors">
740
+ <td class="px-6 py-4 font-medium text-white">Show Tables</td>
741
+ <td class="px-6 py-4 font-mono text-green-400">LIHAT LAHAN</td>
742
+ <td class="px-6 py-4 font-mono text-blue-400">SHOW TABLES</td>
590
743
  <td class="px-6 py-4 text-gray-500 text-xs">Lists tables</td>
591
744
  </tr>
592
- <tr class="bg-white hover:bg-gray-50">
593
- <td class="px-6 py-4 font-medium">Aggregation</td>
594
- <td class="px-6 py-4 font-mono text-green-600">HITUNG SUM(x) DARI [t]</td>
595
- <td class="px-6 py-4 font-mono text-blue-600">SELECT SUM(x) FROM [t]</td>
745
+ <tr class="hover:bg-white/5 transition-colors">
746
+ <td class="px-6 py-4 font-medium text-white">Aggregation</td>
747
+ <td class="px-6 py-4 font-mono text-green-400">HITUNG SUM(x) DARI [t]</td>
748
+ <td class="px-6 py-4 font-mono text-blue-400">SELECT SUM(x) FROM [t]</td>
596
749
  <td class="px-6 py-4 text-gray-500 text-xs">COUNT, SUM, AVG</td>
597
750
  </tr>
598
- <tr class="bg-white hover:bg-gray-50">
599
- <td class="px-6 py-4 font-medium">Index</td>
600
- <td class="px-6 py-4 font-mono text-green-600">INDEKS [t] PADA [f]</td>
601
- <td class="px-6 py-4 font-mono text-blue-600">CREATE INDEX ON [t] ([f])</td>
751
+ <tr class="hover:bg-white/5 transition-colors">
752
+ <td class="px-6 py-4 font-medium text-white">Index</td>
753
+ <td class="px-6 py-4 font-mono text-green-400">INDEKS [t] PADA [f]</td>
754
+ <td class="px-6 py-4 font-mono text-blue-400">CREATE INDEX ON [t] ([f])</td>
602
755
  <td class="px-6 py-4 text-gray-500 text-xs">B-Tree Indexing</td>
603
756
  </tr>
604
757
  </tbody>
@@ -610,26 +763,26 @@
610
763
  <!-- Network -->
611
764
  <section id="network" class="mb-16 scroll-mt-24">
612
765
  <div class="flex items-center justify-between mb-8">
613
- <h2 class="text-3xl font-bold text-gray-800 flex items-center">
766
+ <h2 class="text-3xl font-bold text-white flex items-center">
614
767
  Network
615
768
  </h2>
616
769
  <span
617
- class="bg-red-100 text-red-600 px-3 py-1 rounded-full text-sm font-bold border border-red-200">v2.0
618
- NEW</span>
770
+ class="bg-red-500/10 text-red-400 px-3 py-1 rounded-full text-sm font-bold border border-red-500/20">NEW</span>
619
771
  </div>
620
772
 
621
- <p class="text-gray-600 mb-6">Connect using the <code
622
- class="text-red-500 bg-gray-100 px-1 rounded">sawitdb://</code> protocol and manage your data
773
+ <p class="text-gray-400 mb-6">Connect using the <code
774
+ class="text-red-400 bg-white/10 px-1 rounded">sawitdb://</code> protocol and manage your data
623
775
  remotely.</p>
624
776
 
625
777
  <div class="grid md:grid-cols-2 gap-6 mb-8">
626
- <div class="bg-white p-5 rounded-lg border border-gray-200 shadow-sm">
627
- <h4 class="font-bold text-gray-800 mb-2">MongoDB - Style Connection</h4>
628
- <code class="text-sm bg-gray-50 p-1 block rounded">sawitdb://host:port/database</code>
778
+ <div class="glass-card p-5 rounded-lg border border-white/10">
779
+ <h4 class="font-bold text-white mb-2">MongoDB - Style Connection</h4>
780
+ <code
781
+ class="text-sm bg-black/30 p-1 block rounded text-gray-300">sawitdb://host:port/database</code>
629
782
  </div>
630
- <div class="bg-white p-5 rounded-lg border border-gray-200 shadow-sm">
631
- <h4 class="font-bold text-gray-800 mb-2">Advanced Features</h4>
632
- <ul class="text-sm text-gray-600 list-disc ml-4 space-y-1">
783
+ <div class="glass-card p-5 rounded-lg border border-white/10">
784
+ <h4 class="font-bold text-white mb-2">Advanced Features</h4>
785
+ <ul class="text-sm text-gray-400 list-disc ml-4 space-y-1">
633
786
  <li>Multi-database Support</li>
634
787
  <li>B-Tree Indexing</li>
635
788
  <li>Aggregations (COUNT, SUM, etc.)</li>
@@ -638,15 +791,15 @@
638
791
  </div>
639
792
  </div>
640
793
 
641
- <div class="bg-gray-800 rounded-xl p-6 text-white shadow-lg">
642
- <h4 class="text-xs font-bold text-gray-400 uppercase tracking-widest mb-3">Start Server</h4>
794
+ <div class="bg-black/40 rounded-xl p-6 text-white shadow-lg border border-white/10 backdrop-blur-sm">
795
+ <h4 class="text-xs font-bold text-gray-500 uppercase tracking-widest mb-3">Start Server</h4>
643
796
  <div class="overflow-x-auto mb-6">
644
797
  <pre class="font-mono text-sm text-green-400">node bin/sawit-server.js --port 7878</pre>
645
798
  </div>
646
799
 
647
- <h4 class="text-xs font-bold text-gray-400 uppercase tracking-widest mb-3">Environment Variables
800
+ <h4 class="text-xs font-bold text-gray-500 uppercase tracking-widest mb-3">Environment Variables
648
801
  </h4>
649
- <div class="grid grid-cols-1 md:grid-cols-2 gap-4 font-mono text-sm text-gray-300 overflow-x-auto">
802
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-4 font-mono text-sm text-gray-400 overflow-x-auto">
650
803
  <div class="border-b border-gray-700 pb-2">SAWIT_PORT=7878</div>
651
804
  <div class="border-b border-gray-700 pb-2">SAWIT_HOST=0.0.0.0</div>
652
805
  <div class="border-b border-gray-700 pb-2">SAWIT_DATA_DIR=./data</div>
@@ -658,68 +811,170 @@
658
811
  <!-- Client API & CLI -->
659
812
  <section id="tools-section" class="mb-16 scroll-mt-24">
660
813
  <div class="grid grid-cols-1 md:grid-cols-2 gap-6 md:gap-8">
814
+ <div id="client-api" class="glass-card rounded-2xl p-6 md:p-8 hover:bg-white/5 transition-all">
815
+ <div class="flex items-center gap-4 mb-6">
816
+ <i class="fas fa-code text-3xl text-green-400"></i>
817
+ <div>
818
+ <h2 class="text-2xl font-bold text-white">Client API</h2>
819
+ <p class="text-sm text-gray-400">Node.js Integration</p>
820
+ </div>
821
+ </div>
822
+ <p class="text-gray-300 mb-6 text-sm md:text-base">
823
+ SawitDB provides a clean, promise-based client for Node.js applications.
824
+ </p>
825
+ <div class="bg-black/50 rounded-xl p-4 md:p-6 border border-white/10 overflow-x-auto">
826
+ <pre class="font-mono text-sm text-gray-300"><code><span class="text-purple-400">const</span> client = <span class="text-purple-400">new</span> <span class="text-yellow-300">SawitClient</span>(<span class="text-green-300">'sawitdb://localhost:7878'</span>);
827
+ <span class="text-purple-400">await</span> client.connect();
661
828
 
662
- <div id="client-api" class="bg-white p-6 md:p-8 rounded-2xl shadow-sm border border-gray-100">
663
- <h2 class="text-2xl font-bold text-gray-800 mb-6 flex items-center">
664
- Client API
665
- </h2>
666
- <div class="bg-gray-900 p-4 rounded-lg overflow-x-auto">
667
- <pre class="font-mono text-xs text-blue-200 leading-relaxed">
668
- const SawitClient = require('./src/SawitClient');
669
-
670
- // Connect
671
- const client = new SawitClient(
672
- 'sawitdb://localhost:7878/plantation'
673
- );
674
- await client.connect();
675
-
676
- // Query
677
- const result = await client.query(
678
- 'PANEN * DARI sawit'
679
- );
680
-
681
- // Disconnect
682
- client.disconnect();</pre>
829
+ <span class="text-gray-500">// Switch DB</span>
830
+ <span class="text-purple-400">await</span> client.use(<span class="text-green-300">'production'</span>);
831
+
832
+ <span class="text-gray-500">// Query</span>
833
+ <span class="text-purple-400">const</span> profit = <span class="text-purple-400">await</span> client.query(
834
+ <span class="text-green-300">"HITUNG SUM(total) DARI sales"</span>
835
+ );</code></pre>
683
836
  </div>
684
837
  </div>
685
838
 
686
- <div id="cli" class="bg-white p-6 md:p-8 rounded-2xl shadow-sm border border-gray-100">
687
- <h2 class="text-2xl font-bold text-gray-800 mb-6 flex items-center">
688
- CLI Tool
689
- </h2>
690
- <p class="text-sm text-gray-600 mb-4">Manage your database directly from the terminal.</p>
691
-
692
- <div class="space-y-4">
693
- <div>
694
- <div class="text-xs font-bold text-gray-500 uppercase mb-1">Local CLI</div>
695
- <code
696
- class="block bg-gray-100 text-gray-800 p-2 rounded text-sm font-mono border border-gray-200">node cli/local.js</code>
697
- </div>
839
+ <div id="cli" class="glass-card rounded-2xl p-6 md:p-8 hover:bg-white/5 transition-all">
840
+ <div class="flex items-center gap-4 mb-6">
841
+ <i class="fas fa-terminal text-3xl text-amber-400"></i>
698
842
  <div>
699
- <div class="text-xs font-bold text-gray-500 uppercase mb-1">Network CLI</div>
700
- <code
701
- class="block bg-gray-100 text-gray-800 p-2 rounded text-sm font-mono border border-gray-200">node cli/remote.js [url]</code>
843
+ <h2 class="text-2xl font-bold text-white">CLI Tools</h2>
844
+ <p class="text-sm text-gray-400">Manage & Benchmark</p>
702
845
  </div>
703
846
  </div>
847
+ <ul class="space-y-4">
848
+ <li class="bg-black/30 p-3 rounded-lg border border-white/5">
849
+ <div class="flex justify-between items-center mb-1">
850
+ <span class="font-bold text-green-400">Interactive Shell</span>
851
+ <code class="text-xs bg-white/10 px-1 rounded">cli/remote.js</code>
852
+ </div>
853
+ <p class="text-xs text-gray-400">Connect to remote server. Supports <code
854
+ class="text-white">USE [db]</code> context switching.</p>
855
+ </li>
856
+ <li class="bg-black/30 p-3 rounded-lg border border-white/5">
857
+ <div class="flex justify-between items-center mb-1">
858
+ <span class="font-bold text-blue-400">Unit Tests</span>
859
+ <code class="text-xs bg-white/10 px-1 rounded">cli/test.js</code>
860
+ </div>
861
+ <p class="text-xs text-gray-400">Run 10+ automated test suites covering CRUD,
862
+ Persistence, and Indexing.</p>
863
+ </li>
864
+ <li class="bg-black/30 p-3 rounded-lg border border-white/5">
865
+ <div class="flex justify-between items-center mb-1">
866
+ <span class="font-bold text-purple-400">Benchmark</span>
867
+ <code class="text-xs bg-white/10 px-1 rounded">cli/benchmark.js</code>
868
+ </div>
869
+ <p class="text-xs text-gray-400">Test throughput. Measures INSERT (~38k TPS) and SELECT
870
+ (~120k TPS) performance.</p>
871
+ </li>
872
+ </ul>
873
+ </div>
874
+ </div>
875
+ </section>
876
+
877
+ <!-- Changelog -->
878
+ <section id="changelog" class="mb-16 scroll-mt-24">
879
+ <h2 class="text-3xl font-bold text-white mb-8 border-b border-white/10 pb-4">Latest Updates</h2>
880
+ <div class="space-y-6">
881
+ <!-- v2.4.1 -->
882
+ <div class="relative pl-8 border-l-2 border-green-500/30">
883
+ <div
884
+ class="absolute -left-[9px] top-0 w-4 h-4 rounded-full bg-green-500 border-4 border-gray-900">
885
+ </div>
886
+ <div class="flex items-center gap-3 mb-2">
887
+ <h3 class="text-xl font-bold text-white">v2.5.0</h3>
888
+ <span
889
+ class="px-2 py-0.5 rounded text-xs bg-green-500/20 text-green-400 border border-green-500/20">Latest</span>
890
+ <span class="text-sm text-gray-400">Jan 2026</span>
891
+ </div>
892
+ <ul class="list-disc list-outside text-gray-300 text-sm space-y-1 ml-4">
893
+ <li><strong>Performance :</strong> Object Caching & Async WAL achieved
894
+ <strong>~247,000 TPS</strong> for reads.
895
+ </li>
896
+ <li><strong>Hash Join Implementation:</strong> Complex joins are now <strong>77x
897
+ Faster</strong> (O(M+N)).</li>
898
+ <li><strong>New Tools:</strong> Added CLI Unit Tests and Benchmarking Tool.</li>
899
+ <li><strong>Persistence Fix:</strong> Fixed Index loss on restart and Windows file locking
900
+ issues.</li>
901
+ </ul>
902
+ </div>
704
903
 
705
- <div class="mt-6 bg-yellow-50 text-yellow-800 text-sm p-3 rounded-lg border border-yellow-200">
706
- <strong>Pro Tip:</strong> Use <code>.help</code> inside the CLI to see available commands.
904
+ <!-- v2.4 -->
905
+ <div class="relative pl-8 border-l-2 border-white/10">
906
+ <div
907
+ class="absolute -left-[9px] top-0 w-4 h-4 rounded-full bg-gray-700 border-4 border-gray-900">
908
+ </div>
909
+ <div class="flex items-center gap-3 mb-2">
910
+ <h3 class="text-xl font-bold text-gray-400">v2.4</h3>
911
+ <span class="text-sm text-gray-500">Jan 2026</span>
707
912
  </div>
913
+ <ul class="list-disc list-outside text-gray-400 text-sm space-y-1 ml-4">
914
+ <li><strong>Security:</strong> Full Parameterized Query support.</li>
915
+ <li><strong>Docs:</strong> Enhanced documentation site.</li>
916
+ </ul>
708
917
  </div>
709
918
 
919
+ <!-- v2.3 -->
920
+ <div class="relative pl-8 border-l-2 border-white/10">
921
+ <div
922
+ class="absolute -left-[9px] top-0 w-4 h-4 rounded-full bg-gray-700 border-4 border-gray-900">
923
+ </div>
924
+ <div class="flex items-center gap-3 mb-2">
925
+ <h3 class="text-xl font-bold text-gray-400">v2.3</h3>
926
+ <span class="text-sm text-gray-500">Dec 2025</span>
927
+ </div>
928
+ <ul class="list-disc list-outside text-gray-400 text-sm space-y-1 ml-4">
929
+ <li><strong>Generic Syntax:</strong> Added SQL Standard compatibility.</li>
930
+ <li><strong>Operators:</strong> Added LIKE, IN, BETWEEN support.</li>
931
+ </ul>
932
+ </div>
710
933
  </div>
711
934
  </section>
712
935
 
936
+ <!-- Footer -->
937
+ <footer class="mt-24 py-8 border-t border-white/5">
938
+ <div class="flex flex-col md:flex-row justify-between items-center text-gray-500 text-sm">
939
+ <div class="mb-4 md:mb-0">
940
+ &copy; 2025 SawitDB Core Team.
941
+ </div>
942
+ <div class="flex space-x-6 items-center">
943
+ <span class="text-xs">Support Us:</span>
944
+ <a href="https://trakteer.id/wowoengine" target="_blank"
945
+ class="text-gray-500 hover:text-pink-500 transition-colors" title="Traktir Kami">
946
+ <i class="fa-solid fa-heart text-lg"></i>
947
+ </a>
948
+ <a href="https://github.com/WowoEngine/SawitDB" class="hover:text-white transition-colors"><i
949
+ class="fab fa-github text-lg"></i></a>
950
+ </div>
951
+ </div>
952
+ </footer>
953
+
713
954
  </main>
714
955
  </div>
715
956
 
957
+ <!-- Mobile Menu Script -->
716
958
  <!-- Mobile Menu Script -->
717
959
  <script>
718
- function toggleMenu() {
719
- const menu = document.getElementById('mobile-menu');
720
- if (!menu.classList.contains('hidden')) {
721
- menu.classList.add('hidden');
722
- }
960
+ // --- Mobile Menu Logic ---
961
+ const btn = document.getElementById('mobile-menu-btn');
962
+ const menu = document.getElementById('navbar-default');
963
+
964
+ if (btn && menu) {
965
+ btn.addEventListener('click', () => {
966
+ menu.classList.toggle('hidden');
967
+ });
968
+
969
+ // Close mobile menu when a link is clicked
970
+ const menuLinks = menu.querySelectorAll('a');
971
+ menuLinks.forEach(link => {
972
+ link.addEventListener('click', () => {
973
+ if (!menu.classList.contains('hidden')) {
974
+ menu.classList.add('hidden');
975
+ }
976
+ });
977
+ });
723
978
  }
724
979
  </script>
725
980
  </body>