1<!DOCTYPE html> 2<html lang="en"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <link href="/assets/built.css" rel="stylesheet"> 7 <!-- Primary Meta Tags --> 8 <title>RdRx - Modern URL Shortener & Content Sharing Platform</title> 9 <meta name="title" content="RdRx - Modern URL Shortener & Content Sharing Platform"> 10 <meta name="description" content="Open-source URL shortener built on Cloudflare Workers. Create short links, share code snippets, host files, and build bio pages with powerful analytics."> 11 <meta name="keywords" content="URL shortener, link shortener, Cloudflare Workers, code snippets, file sharing, bio pages, analytics, open source, edge computing"> 12 <meta name="author" content="RdRx"> 13 <meta name="robots" content="index, follow"> 14 15 <!-- Open Graph / Facebook --> 16 <meta property="og:type" content="website"> 17 <meta property="og:url" content="https://rdrx.co/"> 18 <meta property="og:title" content="RdRx - Modern URL Shortener & Content Sharing Platform"> 19 <meta property="og:description" content="Open-source URL shortener built on Cloudflare Workers. Create short links, share code snippets, host files, and build bio pages with powerful analytics."> 20 <meta property="og:image" content="https://rdrx.co/assets/banner.jpg"> 21 <meta property="og:site_name" content="RdRx"> 22 23 <!-- Twitter --> 24 <meta property="twitter:card" content="summary_large_image"> 25 <meta property="twitter:url" content="https://rdrx.co/"> 26 <meta property="twitter:title" content="RdRx - Modern URL Shortener & Content Sharing Platform"> 27 <meta property="twitter:description" content="Open-source URL shortener built on Cloudflare Workers. Create short links, share code snippets, host files, and build bio pages with powerful analytics."> 28 <meta property="twitter:image" content="https://rdrx.co/assets/banner.jpg"> 29 30 <!-- Canonical URL --> 31 <link rel="canonical" href="https://rdrx.co/"> 32 33 <!-- Favicons --> 34 <link rel="apple-touch-icon" sizes="180x180" href="/assets/apple-icon-180x180.png"> 35 <link rel="icon" type="image/png" sizes="32x32" href="/assets/favicon-32x32.png"> 36 <link rel="icon" type="image/png" sizes="16x16" href="/assets/favicon-16x16.png"> 37 <link rel="manifest" href="/assets/manifest.json"> 38 39 <!-- Stylesheets --> 40 <link rel="stylesheet" href="/assets/built.css"> 41 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"> 42 <link rel="preconnect" href="https://fonts.googleapis.com"> 43 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> 44 <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap" rel="stylesheet"> 45 46 <!-- Alpine.js --> 47
47<script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/cdn.min.js"></script>
47 48 49 <!-- Structured Data --> 50
50<script type="application/ld+json"> 51 { 52 "@context": "https://schema.org", 53 "@type": "SoftwareApplication", 54 "name": "RdRx", 55 "applicationCategory": "WebApplication", 56 "description": "Open-source URL shortener and content sharing platform built on Cloudflare Workers", 57 "operatingSystem": "Web", 58 "offers": { 59 "@type": "Offer", 60 "price": "0", 61 "priceCurrency": "USD" 62 }, 63 "author": { 64 "@type": "Organization", 65 "name": "RdRx" 66 } 67 } 68 </script>
68 69 70 <style> 71 /* CSS Variables for theming */ 72 :root { 73 --bg-primary: #FFFFFF; 74 --bg-secondary: #F8FAFC; 75 --bg-tertiary: #F1F5F9; 76 --text-primary: #0F172A; 77 --text-secondary: #475569; 78 --text-tertiary: #64748B; 79 --border-color: #E2E8F0; 80 --card-bg: #FFFFFF; 81 82 /* Orange accent colors */ 83 --primary-50: #FFF7ED; 84 --primary-100: #FFEDD5; 85 --primary-200: #FED7AA; 86 --primary-300: #FDBA74; 87 --primary-400: #FB923C; 88 --primary-500: #F97316; 89 --primary-600: #EA580C; 90 --primary-700: #C2410C; 91 --primary-800: #9A3412; 92 --primary-900: #7C2D12; 93 } 94 95 .dark { 96 --bg-primary: #0F172A; 97 --bg-secondary: #1E293B; 98 --bg-tertiary: #334155; 99 --text-primary: #F1F5F9; 100 --text-secondary: #CBD5E1; 101 --text-tertiary: #94A3B8; 102 --border-color: #475569; 103 --card-bg: #1E293B; 104 105 /* Brighter orange for dark mode */ 106 --primary-50: #7C2D12; 107 --primary-100: #9A3412; 108 --primary-200: #C2410C; 109 --primary-300: #EA580C; 110 --primary-400: #F97316; 111 --primary-500: #FB923C; 112 --primary-600: #FDBA74; 113 --primary-700: #FED7AA; 114 --primary-800: #FFEDD5; 115 --primary-900: #FFF7ED; 116 } 117 118 * { 119 margin: 0; 120 padding: 0; 121 box-sizing: border-box; 122 } 123 124 html { 125 scroll-behavior: smooth; 126 } 127 128 body { 129 font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; 130 background-color: var(--bg-primary); 131 color: var(--text-primary); 132 transition: background-color 0.3s ease, color 0.3s ease; 133 line-height: 1.6; 134 } 135 136 /* Gradient text effect */ 137 .gradient-text { 138 background: linear-gradient(135deg, var(--primary-500) 0%, var(--primary-600) 100%); 139 -webkit-background-clip: text; 140 -webkit-text-fill-color: transparent; 141 background-clip: text; 142 } 143 144 /* Hero gradient background */ 145 .hero-gradient { 146 background: linear-gradient(135deg, var(--bg-primary) 0%, var(--bg-secondary) 100%); 147 position: relative; 148 } 149 150 .dark .hero-gradient { 151 background: linear-gradient(135deg, #0F172A 0%, #1E293B 100%); 152 } 153 154 /* Animated gradient orbs for dark mode */ 155 .hero-gradient::before, 156 .hero-gradient::after { 157 content: ''; 158 position: absolute; 159 border-radius: 50%; 160 filter: blur(80px); 161 opacity: 0; 162 transition: opacity 0.3s ease; 163 pointer-events: none; 164 } 165 166 .dark .hero-gradient::before { 167 opacity: 0.15; 168 width: 500px; 169 height: 500px; 170 background: var(--primary-500); 171 top: -100px; 172 left: -100px; 173 } 174 175 .dark .hero-gradient::after { 176 opacity: 0.1; 177 width: 400px; 178 height: 400px; 179 background: var(--primary-600); 180 bottom: -100px; 181 right: -100px; 182 } 183 184 /* Feature cards */ 185 .feature-card { 186 background: var(--card-bg); 187 border: 1px solid var(--border-color); 188 border-radius: 1rem; 189 padding: 2rem; 190 transition: all 0.3s ease; 191 height: 100%; 192 } 193 194 .feature-card:hover { 195 transform: translateY(-4px); 196 box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); 197 border-color: var(--primary-500); 198 } 199 200 .dark .feature-card:hover { 201 box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.3), 0 10px 10px -5px rgba(0, 0, 0, 0.2); 202 } 203 204 /* Dark mode toggle button */ 205 .dark-mode-toggle { 206 position: fixed; 207 bottom: 2rem; 208 right: 2rem; 209 width: 3.5rem; 210 height: 3.5rem; 211 border-radius: 50%; 212 background: var(--card-bg); 213 border: 2px solid var(--border-color); 214 display: flex; 215 align-items: center; 216 justify-content: center; 217 cursor: pointer; 218 transition: all 0.3s ease; 219 z-index: 1000; 220 box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); 221 } 222 223 .dark-mode-toggle:hover { 224 transform: scale(1.1) rotate(15deg); 225 box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.2), 0 10px 10px -5px rgba(0, 0, 0, 0.1); 226 } 227 228 .dark .dark-mode-toggle { 229 box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3), 0 4px 6px -2px rgba(0, 0, 0, 0.2); 230 } 231 232 .dark-mode-toggle i { 233 font-size: 1.25rem; 234 color: var(--text-primary); 235 transition: transform 0.3s ease; 236 } 237 238 .dark-mode-toggle:hover i { 239 transform: rotate(-15deg); 240 } 241 242 /* Smooth transitions */ 243 * { 244 transition-property: background-color, border-color, color, fill, stroke; 245 transition-duration: 0.3s; 246 transition-timing-function: ease; 247 } 248 249 /* Override transition for transforms and other properties */ 250 .feature-card, 251 .dark-mode-toggle, 252 button, 253 a { 254 transition: all 0.3s ease; 255 } 256 </style> 257</head> 258<body x-data="{ darkMode: false }" 259 x-init=" 260 // Check localStorage and system preference 261 darkMode = localStorage.getItem('darkMode') === 'true' || 262 (!localStorage.getItem('darkMode') && window.matchMedia('(prefers-color-scheme: dark)').matches); 263 264 // Watch for changes 265 $watch('darkMode', value => { 266 localStorage.setItem('darkMode', value); 267 if (value) { 268 document.documentElement.classList.add('dark'); 269 } else { 270 document.documentElement.classList.remove('dark'); 271 } 272 }); 273 274 // Apply initial state 275 if (darkMode) { 276 document.documentElement.classList.add('dark'); 277 } 278 " 279 :class="{ 'dark': darkMode }"> 280 281 282<!-- Navigation --> 283<nav x-data="{ mobileMenuOpen: false }" class="sticky top-0 z-50 bg-[var(--card-bg)] border-b border-[var(--border-color)] backdrop-blur-lg bg-opacity-90"> 284 <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> 285 <div class="flex justify-between items-center h-16"> 286 <!-- Logo --> 287 <div class="flex items-center"> 288 <a href="/" class="flex items-center space-x-2 group"> 289 <img src="/assets/RdRx.png" alt="RdRx Logo" class="w-8 h-8 transition-transform group-hover:scale-110">
290 <span class="text-xl font-bold text-[var(--text-primary)]">RdRx</span> 291 </a> 292 </div> 293 294 <!-- Desktop Navigation --> 295 <div class="hidden md:flex items-center space-x-8"> 296 <a href="#features" class="text-[var(--text-secondary)] hover:text-[var(--primary-500)] transition-colors font-medium">Features</a> 297 <a href="#technology" class="text-[var(--text-secondary)] hover:text-[var(--primary-500)] transition-colors font-medium">Technology</a> 298 <a href="/docs" target="_blank" class="text-[var(--text-secondary)] hover:text-[var(--primary-500)] transition-colors font-medium">Docs</a> 299 <a href="https://github.com/clarkhacks/RdRx" target="_blank" class="text-[var(--text-secondary)] hover:text-[var(--primary-500)] transition-colors font-medium inline-flex items-center"> 300 <i class="fab fa-github mr-1"></i> GitHub 301 </a> 302 <a href="/login" class="px-4 py-2 rounded-lg bg-[var(--primary-500)] text-white hover:bg-[var(--primary-600)] transition-colors font-medium"> 303 Login 304 </a> 305 </div> 306 307 <!-- Mobile menu button --> 308 <div class="md:hidden"> 309 <button @click="mobileMenuOpen = !mobileMenuOpen" class="text-[var(--text-primary)] hover:text-[var(--primary-500)] transition-colors" aria-label="Toggle menu"> 310 <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"> 311 <path x-show="!mobileMenuOpen" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path> 312 <path x-show="mobileMenuOpen" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path> 313 </svg> 314 </button> 315 </div> 316 </div> 317 </div> 318 319 <!-- Mobile Navigation --> 320 <div x-show="mobileMenuOpen" 321 x-transition:enter="transition ease-out duration-200" 322 x-transition:enter-start="opacity-0 transform scale-95" 323 x-transition:enter-end="opacity-100 transform scale-100" 324 x-transition:leave="transition ease-in duration-150" 325 x-transition:leave-start="opacity-100 transform scale-100" 326 x-transition:leave-end="opacity-0 transform scale-95" 327 class="md:hidden border-t border-[var(--border-color)]"> 328 <div class="px-4 py-4 space-y-3 bg-[var(--card-bg)]"> 329 <a href="#features" @click="mobileMenuOpen = false" class="block text-[var(--text-secondary)] hover:text-[var(--primary-500)] transition-colors font-medium py-2">Features</a> 330 <a href="#technology" @click="mobileMenuOpen = false" class="block text-[var(--text-secondary)] hover:text-[var(--primary-500)] transition-colors font-medium py-2">Technology</a> 331 <a href="/docs" target="_blank" class="block text-[var(--text-secondary)] hover:text-[var(--primary-500)] transition-colors font-medium py-2">Docs</a> 332 <a href="https://github.com/clarkhacks/RdRx" target="_blank" class="block text-[var(--text-secondary)] hover:text-[var(--primary-500)] transition-colors font-medium py-2"> 333 <i class="fab fa-github mr-1"></i> GitHub 334 </a> 335 <a href="/login" class="block px-4 py-2 rounded-lg bg-[var(--primary-500)] text-white hover:bg-[var(--primary-600)] transition-colors font-medium text-center"> 336 Login 337 </a> 338 </div> 339 </div> 340</nav> 341 342 343<!-- Hero Section --> 344<section class="hero-gradient min-h-screen flex items-center py-20 px-4 sm:px-6 lg:px-8 relative overflow-hidden"> 345 <div class="max-w-7xl mx-auto w-full relative z-10"> 346 <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center"> 347 <!-- Left: Content --> 348 <div class="text-center lg:text-left"> 349 <h1 class="text-5xl sm:text-6xl lg:text-7xl font-bold mb-6 leading-tight"> 350 Modern URL Shortening for the <span class="gradient-text">Edge</span> 351 </h1> 352 <p class="text-xl sm:text-2xl text-[var(--text-secondary)] mb-6"> 353 Open-source platform built on Cloudflare Workers 354 </p> 355 <p class="text-lg text-[var(--text-tertiary)] mb-8 max-w-xl mx-auto lg:mx-0"> 356 Create short links, share code snippets, host files, and build bio pages. All powered by Cloudflare's global edge network for lightning-fast performance. 357 </p> 358 359 <!-- CTA Buttons --> 360 <div class="flex flex-col sm:flex-row gap-4 justify-center lg:justify-start mb-8"> 361 <a href="https://deploy.workers.cloudflare.com/?url=https://github.com/clarkhacks/RdRx" target="_blank" class="inline-flex items-center justify-center px-8 py-4 rounded-lg bg-[var(--primary-500)] text-white font-semibold hover:bg-[var(--primary-600)] transition-all transform hover:scale-105 shadow-lg hover:shadow-xl"> 362 <i class="fas fa-rocket mr-2"></i> 363 Deploy to Cloudflare 364 </a> 365 <a href="https://github.com/clarkhacks/RdRx" target="_blank" class="inline-flex items-center justify-center px-8 py-4 rounded-lg bg-[var(--card-bg)] text-[var(--text-primary)] font-semibold border-2 border-[var(--border-color)] hover:border-[var(--primary-500)] transition-all transform hover:scale-105"> 366 <i class="fab fa-github mr-2"></i> 367 View on GitHub 368 </a> 369 </div> 370 371 <!-- Stats --> 372 <div class="flex flex-wrap gap-6 justify-center lg:justify-start text-sm"> 373 <div class="flex items-center text-[var(--text-secondary)]"> 374 <i class="fas fa-code-branch mr-2 text-[var(--primary-500)]"></i> 375 Open Source 376 </div> 377 <div class="flex items-center text-[var(--text-secondary)]"> 378 <i class="fas fa-bolt mr-2 text-[var(--primary-500)]"></i> 379 Edge Computing 380 </div> 381 <div class="flex items-center text-[var(--text-secondary)]"> 382 <i class="fas fa-shield-alt mr-2 text-[var(--primary-500)]"></i> 383 GPL-3.0 License 384 </div> 385 </div> 386 </div> 387 388 <!-- Right: Interactive Demo --> 389 <div class="lg:pl-8"> 390 <div class="bg-[var(--card-bg)] rounded-2xl shadow-2xl p-8 border border-[var(--border-color)]" 391 x-data="{ 392 url: '', 393 shortUrl: '', 394 expiresAt: '', 395 isLoading: false, 396 error: '', 397 success: false, 398 async createShortUrl() { 399 this.isLoading = true; 400 this.error = ''; 401 this.success = false;
402 403 try { 404 if (!this.url) { 405 this.error = 'Please enter a URL'; 406 this.isLoading = false; 407 return; 408 } 409 410 if (!this.url.startsWith('http://') && !this.url.startsWith('https://')) { 411 this.url = 'https://' + this.url; 412 } 413 414 const response = await fetch('https://rdrx.co/api/temp', { 415 method: 'POST', 416 headers: { 'Content-Type': 'application/json' }, 417 body: JSON.stringify({ url: this.url }) 418 }); 419 420 if (!response.ok) throw new Error('Failed to create short URL'); 421 422 const data = await response.json(); 423 this.shortUrl = data.full_url; 424 this.expiresAt = new Date(data.expires_at).toLocaleString(); 425 this.success = true; 426 } catch (error) { 427 this.error = error.message || 'An error occurred'; 428 } finally { 429 this.isLoading = false; 430 } 431 }, 432 copyToClipboard() { 433 navigator.clipboard.writeText(this.shortUrl); 434 const btn = $event.target; 435 const originalHTML = btn.innerHTML; 436 btn.innerHTML = '<i class="fas fa-check"></i>'; 437 setTimeout(() => { btn.innerHTML = originalHTML; }, 2000); 438 } 439 }"> 440 441 <div class="text-center mb-6"> 442 <div class="inline-flex items-center justify-center w-16 h-16 rounded-full bg-[var(--primary-100)] mb-4"> 443 <i class="fas fa-link text-[var(--primary-500)] text-2xl"></i> 444 </div> 445 <h2 class="text-2xl font-bold text-[var(--text-primary)] mb-2">Try It Now</h2> 446 <p class="text-[var(--text-secondary)] text-sm"> 447 No account required ⢠Links expire in 2 days 448 </p> 449 </div> 450 451 <div class="space-y-4"> 452 <div class="relative"> 453 <input 454 type="text" 455 x-model="url" 456 placeholder="Enter your long URL here..." 457 class="w-full px-4 py-3 rounded-lg border-2 border-[var(--border-color)] bg-[var(--bg-primary)] text-[var(--text-primary)] focus:border-[var(--primary-500)] focus:outline-none transition-colors" 458 @keyup.enter="createShortUrl" 459 > 460 <div class="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none"> 461 <i class="fas fa-globe text-[var(--text-tertiary)]"></i> 462 </div> 463 </div> 464 465 <button 466 @click="createShortUrl" 467 class="w-full px-4 py-3 rounded-lg bg-[var(--primary-500)] text-white font-semibold hover:bg-[var(--primary-600)] transition-all transform hover:scale-105 disabled:opacity-50 disabled:cursor-not-allowed disabled:transform-none" 468 :disabled="isLoading" 469 >
470 <span x-show="!isLoading"> 471 <i class="fas fa-magic mr-2"></i>Shorten URL 472 </span> 473 <span x-show="isLoading"> 474 <i class="fas fa-spinner fa-spin mr-2"></i>Processing... 475 </span> 476 </button> 477 478 <p x-show="error" x-text="error" class="text-red-500 text-sm"></p> 479 </div> 480 481 <div x-show="success" 482 x-transition 483 class="mt-6 p-4 bg-green-50 dark:bg-green-900/20 rounded-lg border-2 border-green-200 dark:border-green-800"> 484 <h3 class="text-lg font-semibold text-green-800 dark:text-green-400 mb-3"> 485 <i class="fas fa-check-circle mr-2"></i>Success! 486 </h3> 487 <div class="flex items-center gap-2"> 488 <input 489 type="text" 490 x-model="shortUrl" 491 readonly 492 class="flex-1 px-3 py-2 rounded-lg border border-green-300 dark:border-green-700 bg-white dark:bg-green-950 text-sm" 493 > 494 <button 495 @click="copyToClipboard" 496 class="px-4 py-2 rounded-lg bg-green-600 hover:bg-green-700 text-white transition-colors" 497 > 498 <i class="fas fa-copy"></i> 499 </button> 500 </div> 501 <p class="text-sm text-green-700 dark:text-green-300 mt-2"> 502 <i class="fas fa-clock mr-1"></i>Expires: <span x-text="expiresAt"></span> 503 </p> 504 </div> 505 </div> 506 </div> 507 </div> 508 </div> 509</section> 510 511<!-- Features Section --> 512<section id="features" class="py-20 px-4 sm:px-6 lg:px-8 bg-[var(--bg-secondary)]"> 513 <div class="max-w-7xl mx-auto"> 514 <div class="text-center mb-16"> 515 <h2 class="text-4xl sm:text-5xl font-bold mb-4"> 516 Powerful <span class="gradient-text">Features</span> 517 </h2> 518 <p class="text-xl text-[var(--text-secondary)] max-w-3xl mx-auto"> 519 Everything you need for modern link management and content sharing 520 </p> 521 </div> 522 523 <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> 524 <!-- Feature 1 --> 525 <div class="feature-card"> 526 <div class="w-12 h-12 rounded-lg bg-[var(--primary-100)] flex items-center justify-center mb-4"> 527 <i class="fas fa-link text-[var(--primary-500)] text-xl"></i> 528 </div> 529 <h3 class="text-xl font-semibold mb-2 text-[var(--text-primary)]">URL Shortening</h3> 530 <p class="text-[var(--text-secondary)]"> 531 Create short, memorable links with custom shortcodes. Perfect for social media, marketing campaigns, and sharing. 532 </p> 533 </div> 534 535 <!-- Feature 2 --> 536 <div class="feature-card"> 537 <div class="w-12 h-12 rounded-lg bg-[var(--primary-100)] flex items-center justify-center mb-4"> 538 <i class="fas fa-code text-[var(--primary-500)] text-xl"></i> 539 </div> 540 <h3 class="text-xl font-semibold mb-2 text-[var(--text-primary)]">Code Snippets</h3> 541 <p class="text-[var(--text-secondary)]"> 542 Share code with syntax highlighting. Great for documentation, tutorials, and collaboration. 543 </p> 544 </div> 545 546 <!-- Feature 3 --> 547 <div class="feature-card"> 548 <div class="w-12 h-12 rounded-lg bg-[var(--primary-100)] flex items-center justify-center mb-4"> 549 <i class="fas fa-file-upload text-[var(--primary-500)] text-xl"></i> 550 </div> 551 <h3 class="text-xl font-semibold mb-2 text-[var(--text-primary)]">File Sharing</h3> 552 <p class="text-[var(--text-secondary)]"> 553 Upload and share files with global CDN delivery via Cloudflare R2 for fast, reliable access. 554 </p> 555 </div> 556 557 <!-- Feature 4 --> 558 <div class="feature-card"> 559 <div class="w-12 h-12 rounded-lg bg-[var(--primary-100)] flex items-center justify-center mb-4"> 560 <i class="fas fa-user-circle text-[var(--primary-500)] text-xl"></i> 561 </div> 562 <h3 class="text-xl font-semibold mb-2 text-[var(--text-primary)]">Bio Pages</h3> 563 <p class="text-[var(--text-secondary)]"> 564 Create beautiful landing pages like Linktree. Showcase your links, social media, and content in one place. 565 </p> 566 </div> 567 568 <!-- Feature 5 --> 569 <div class="feature-card"> 570 <div class="w-12 h-12 rounded-lg bg-[var(--primary-100)] flex items-center justify-center mb-4"> 571 <i class="fas fa-chart-line text-[var(--primary-500)] text-xl"></i> 572 </div> 573 <h3 class="text-xl font-semibold mb-2 text-[var(--text-primary)]">Analytics</h3> 574 <p class="text-[var(--text-secondary)]"> 575 Track clicks, geographic data, and visitor insights. Understand your audience with detailed analytics. 576 </p> 577 </div> 578 579 <!-- Feature 6 --> 580 <div class="feature-card"> 581 <div class="w-12 h-12 rounded-lg bg-[var(--primary-100)] flex items-center justify-center mb-4"> 582 <i class="fas fa-lock text-[var(--primary-500)] text-xl"></i> 583 </div> 584 <h3 class="text-xl font-semibold mb-2 text-[var(--text-primary)]">Password Protection</h3> 585 <p class="text-[var(--text-secondary)]"> 586 Secure your links with password protection. Control who can access your shared content. 587 </p> 588 </div> 589 590 <!-- Feature 7 --> 591 <div class="feature-card"> 592 <div class="w-12 h-12 rounded-lg bg-[var(--primary-100)] flex items-center justify-center mb-4"> 593 <i class="fas fa-clock text-[var(--primary-500)] text-xl"></i> 594 </div> 595 <h3 class="text-xl font-semibold mb-2 text-[var(--text-primary)]">Scheduled Deletion</h3> 596 <p class="text-[var(--text-secondary)]"> 597 Set expiration dates for your links. Automatically delete content after a specified time. 598 </p> 599 </div> 600 601 <!-- Feature 8 --> 602 <div class="feature-card"> 603 <div class="w-12 h-12 rounded-lg bg-[var(--primary-100)] flex items-center justify-center mb-4"> 604 <i class="fas fa-key text-[var(--primary-500)] text-xl"></i> 605 </div> 606 <h3 class="text-xl font-semibold mb-2 text-[var(--text-primary)]">API Access</h3> 607 <p class="text-[var(--text-secondary)]"> 608 Programmatic access via REST API. Integrate RdRx into your applications and workflows. 609 </p> 610 </div> 611 612 <!-- Feature 9 --> 613 <div class="feature-card"> 614 <div class="w-12 h-12 rounded-lg bg-[var(--primary-100)] flex items-center justify-center mb-4"> 615 <i class="fas fa-user-shield text-[var(--primary-500)] text-xl"></i> 616 </div> 617 <h3 class="text-xl font-semibold mb-2 text-[var(--text-primary)]">Admin Panel</h3> 618 <p class="text-[var(--text-secondary)]"> 619 Comprehensive admin interface for user and content management with detailed insights. 620 </p> 621 </div> 622 </div> 623 </div> 624</section> 625 626<!-- Technology Section --> 627<section id="technology" class="py-20 px-4 sm:px-6 lg:px-8 bg-[var(--bg-primary)]"> 628 <div class="max-w-7xl mx-auto"> 629 <div class="text-center mb-16"> 630 <h2 class="text-4xl sm:text-5xl font-bold mb-4"> 631 Built on <span class="gradient-text">Cloudflare</span> 632 </h2> 633 <p class="text-xl text-[var(--text-secondary)] max-w-3xl mx-auto"> 634 Leveraging Cloudflare's global edge network for unmatched performance and reliability 635 </p> 636 </div> 637 638 <div class="grid grid-cols-1 md:grid-cols-2 gap-8 mb-12">
639 <!-- Workers --> 640 <div class="bg-[var(--card-bg)] rounded-2xl p-8 border border-[var(--border-color)]"> 641 <div class="flex items-center mb-4"> 642 <div class="w-12 h-12 rounded-lg bg-orange-100 dark:bg-orange-900/30 flex items-center justify-center mr-4"> 643 <i class="fas fa-server text-orange-600 dark:text-orange-400 text-xl"></i> 644 </div> 645 <h3 class="text-2xl font-semibold text-[var(--text-primary)]">Cloudflare Workers</h3> 646 </div> 647 <p class="text-[var(--text-secondary)] mb-4"> 648 Serverless edge computing platform that runs your code in 300+ cities worldwide. Lightning-fast response times with zero cold starts. 649 </p> 650 <ul class="space-y-2"> 651 <li class="flex items-center text-[var(--text-secondary)]"> 652 <i class="fas fa-check text-green-500 mr-2"></i> 653 Global edge network 654 </li> 655 <li class="flex items-center text-[var(--text-secondary)]"> 656 <i class="fas fa-check text-green-500 mr-2"></i> 657 Sub-50ms response times 658 </li> 659 <li class="flex items-center text-[var(--text-secondary)]"> 660 <i class="fas fa-check text-green-500 mr-2"></i> 661 Automatic scaling 662 </li> 663 </ul> 664 </div> 665 666 <!-- D1 --> 667 <div class="bg-[var(--card-bg)] rounded-2xl p-8 border border-[var(--border-color)]"> 668 <div class="flex items-center mb-4"> 669 <div class="w-12 h-12 rounded-lg bg-blue-100 dark:bg-blue-900/30 flex items-center justify-center mr-4"> 670 <i class="fas fa-database text-blue-600 dark:text-blue-400 text-xl"></i> 671 </div> 672 <h3 class="text-2xl font-semibold text-[var(--text-primary)]">Cloudflare D1</h3> 673 </div> 674 <p class="text-[var(--text-secondary)] mb-4"> 675 Serverless SQL database built on SQLite. Store your links, analytics, and user data with high performance and reliability. 676 </p> 677 <ul class="space-y-2"> 678 <li class="flex items-center text-[var(--text-secondary)]"> 679 <i class="fas fa-check text-green-500 mr-2"></i> 680 SQL database at the edge 681 </li> 682 <li class="flex items-center text-[var(--text-secondary)]"> 683 <i class="fas fa-check text-green-500 mr-2"></i> 684 Zero maintenance 685 </li> 686 <li class="flex items-center text-[var(--text-secondary)]"> 687 <i class="fas fa-check text-green-500 mr-2"></i> 688 Automatic backups 689 </li> 690 </ul> 691 </div> 692 693 <!-- R2 --> 694 <div class="bg-[var(--card-bg)] rounded-2xl p-8 border border-[var(--border-color)]"> 695 <div class="flex items-center mb-4"> 696 <div class="w-12 h-12 rounded-lg bg-purple-100 dark:bg-purple-900/30 flex items-center justify-center mr-4"> 697 <i class="fas fa-cloud text-purple-600 dark:text-purple-400 text-xl"></i> 698 </div> 699 <h3 class="text-2xl font-semibold text-[var(--text-primary)]">Cloudflare R2</h3> 700 </div> 701 <p class="text-[var(--text-secondary)] mb-4"> 702 Object storage for your files with zero egress fees. Store and deliver files globally with Cloudflare's CDN. 703 </p> 704 <ul class="space-y-2"> 705 <li class="flex items-center text-[var(--text-secondary)]"> 706 <i class="fas fa-check text-green-500 mr-2"></i> 707 Zero egress fees 708 </li> 709 <li class="flex items-center text-[var(--text-secondary)]"> 710 <i class="fas fa-check text-green-500 mr-2"></i> 711 S3-compatible API 712 </li> 713 <li class="flex items-center text-[var(--text-secondary)]"> 714 <i class="fas fa-check text-green-500 mr-2"></i> 715 Global CDN delivery 716 </li> 717 </ul> 718 </div> 719 720 <!-- KV --> 721 <div class="bg-[var(--card-bg)] rounded-2xl p-8 border border-[var(--border-color)]"> 722 <div class="flex items-center mb-4"> 723 <div class="w-12 h-12 rounded-lg bg-green-100 dark:bg-green-900/30 flex items-center justify-center mr-4"> 724 <i class="fas fa-bolt text-green-600 dark:text-green-400 text-xl"></i> 725 </div> 726 <h3 class="text-2xl font-semibold text-[var(--text-primary)]">Cloudflare KV</h3> 727 </div> 728 <p class="text-[var(--text-secondary)] mb-4"> 729 Global key-value storage for caching and temporary data. Ultra-low latency reads from the edge. 730 </p> 731 <ul class="space-y-2"> 732 <li class="flex items-center text-[var(--text-secondary)]"> 733 <i class="fas fa-check text-green-500 mr-2"></i> 734 Edge caching 735 </li> 736 <li class="flex items-center text-[var(--text-secondary)]"> 737 <i class="fas fa-check text-green-500 mr-2"></i> 738 Low-latency reads 739 </li> 740 <li class="flex items-center text-[var(--text-secondary)]"> 741 <i class="fas fa-check text-green-500 mr-2"></i> 742 Global replication 743 </li> 744 </ul> 745 </div> 746 </div> 747 748 <!-- Performance Stats --> 749 <div class="grid grid-cols-1 md:grid-cols-3 gap-8 text-center"> 750 <div class="p-6"> 751 <div class="text-4xl font-bold text-[var(--primary-500)] mb-2">300+</div> 752 <div class="text-[var(--text-secondary)]">Cities Worldwide</div> 753 </div> 754 <div class="p-6"> 755 <div class="text-4xl font-bold text-[var(--primary-500)] mb-2"><50ms</div> 756 <div class="text-[var(--text-secondary)]">Average Response Time</div> 757 </div> 758 <div class="p-6"> 759 <div class="text-4xl font-bold text-[var(--primary-500)] mb-2">99.99%</div> 760 <div class="text-[var(--text-secondary)]">Uptime SLA</div> 761 </div> 762 </div> 763 </div> 764</section> 765 766<!-- Deployment Section --> 767<section class="py-20 px-4 sm:px-6 lg:px-8 bg-gradient-to-br from-[var(--primary-50)] to-[var(--bg-secondary)]"> 768 <div class="max-w-5xl mx-auto"> 769 <div class="text-center mb-12"> 770 <h2 class="text-4xl sm:text-5xl font-bold mb-4"> 771 Deploy in <span class="gradient-text">Minutes</span> 772 </h2> 773 <p class="text-xl text-[var(--text-secondary)] max-w-3xl mx-auto mb-8"> 774 Get your own RdRx instance running on Cloudflare Workers with one-click deployment 775 </p> 776 777 <!-- Deploy Button --> 778 <div class="mb-8"> 779 <a href="https://deploy.workers.cloudflare.com/?url=https://github.com/clarkhacks/RdRx" target="_blank" class="inline-block transform hover:scale-105 transition-transform"> 780 <img src="https://deploy.workers.cloudflare.com/button" alt="Deploy to Cloudflare Workers" class="shadow-lg hover:shadow-xl rounded-lg"> 781 </a> 782 </div> 783 784 <p class="text-[var(--text-secondary)] mb-4"> 785 After deployment, follow our <a href="https://github.com/clarkhacks/RdRx/blob/main/static/docs/getting-started.md" target="_blank" class="text-[var(--primary-500)] hover:underline font-medium">
785Getting Started Guide</a> to configure your instance. 786 </p> 787 </div> 788 789 <!-- Setup Steps --> 790 <div class="grid grid-cols-1 md:grid-cols-2 gap-8"> 791 <div class="bg-[var(--card-bg)] rounded-xl p-6 border border-[var(--border-color)]"> 792 <div class="flex items-start mb-4"> 793 <div class="w-10 h-10 rounded-full bg-[var(--primary-500)] text-white flex items-center justify-center font-bold mr-4 flex-shrink-0">1</div> 794 <div> 795 <h3 class="text-lg font-semibold text-[var(--text-primary)] mb-2">Deploy to Cloudflare</h3> 796 <p class="text-[var(--text-secondary)] text-sm">Click the deploy button above to create your Worker and fork the repository.</p> 797 </div> 798 </div> 799 </div> 800 801 <div class="bg-[var(--card-bg)] rounded-xl p-6 border border-[var(--border-color)]"> 802 <div class="flex items-start mb-4"> 803 <div class="w-10 h-10 rounded-full bg-[var(--primary-500)] text-white flex items-center justify-center font-bold mr-4 flex-shrink-0">2</div> 804 <div> 805 <h3 class="text-lg font-semibold text-[var(--text-primary)] mb-2">Create Resources</h3> 806 <p class="text-[var(--text-secondary)] text-sm">Set up D1 database, R2 bucket, and KV namespace using Wrangler CLI.</p> 807 </div> 808 </div> 809 </div> 810 811 <div class="bg-[var(--card-bg)] rounded-xl p-6 border border-[var(--border-color)]"> 812 <div class="flex items-start mb-4"> 813 <div class="w-10 h-10 rounded-full bg-[var(--primary-500)] text-white flex items-center justify-center font-bold mr-4 flex-shrink-0">3</div> 814 <div> 815 <h3 class="text-lg font-semibold text-[var(--text-primary)] mb-2">Configure Environment</h3> 816 <p class="text-[var(--text-secondary)] text-sm">Set environment variables and secrets for JWT, email, and domain configuration.</p> 817 </div> 818 </div> 819 </div> 820 821 <div class="bg-[var(--card-bg)] rounded-xl p-6 border border-[var(--border-color)]"> 822 <div class="flex items-start mb-4"> 823 <div class="w-10 h-10 rounded-full bg-[var(--primary-500)] text-white flex items-center justify-center font-bold mr-4 flex-shrink-0">4</div> 824 <div> 825 <h3 class="text-lg font-semibold text-[var(--text-primary)] mb-2">Initialize & Deploy</h3> 826 <p class="text-[var(--text-secondary)] text-sm">Run database migrations and deploy your fully configured RdRx instance.</p> 827 </div> 828 </div> 829 </div> 830 </div> 831 832 <div class="mt-12 text-center"> 833 <a href="https://github.com/clarkhacks/RdRx/blob/main/static/docs/getting-started.md" target="_blank" class="inline-flex items-center text-[var(--primary-500)] hover:text-[var(--primary-600)] font-medium"> 834 <i class="fas fa-book mr-2"></i> 835 Read the Full Documentation 836 <i class="fas fa-arrow-right ml-2"></i> 837 </a> 838 </div> 839 </div> 840</section> 841 842<!-- Open Source Section --> 843<section class="py-20 px-4 sm:px-6 lg:px-8 bg-[var(--bg-primary)]"> 844 <div class="max-w-5xl mx-auto text-center"> 845 <div class="mb-8"> 846 <i class="fas fa-code-branch text-6xl text-[var(--primary-500)] mb-6"></i> 847 </div> 848 <h2 class="text-4xl sm:text-5xl font-bold mb-6"> 849 Open Source & <span class="gradient-text">Community Driven</span> 850 </h2> 851 <p class="text-xl text-[var(--text-secondary)] max-w-3xl mx-auto mb-8"> 852 RdRx is open source under the GPL-3.0 license. We believe in transparency, collaboration, and building together. 853 </p> 854 855 <div class="flex flex-wrap justify-center gap-4 mb-12"> 856 <a href="https://github.com/clarkhacks/RdRx" target="_blank" class="inline-flex items-center px-6 py-3 rounded-lg bg-[var(--card-bg)] border-2 border-[var(--border-color)] hover:border-[var(--primary-500)] transition-all"> 857 <i class="fab fa-github mr-2"></i> 858 Star on GitHub 859 </a> 860 <a href="https://github.com/clarkhacks/RdRx/issues" target="_blank" class="inline-flex items-center px-6 py-3 rounded-lg bg-[var(--card-bg)] border-2 border-[var(--border-color)] hover:border-[var(--primary-500)] transition-all"> 861 <i class="fas fa-bug mr-2"></i> 862 Report Issues 863 </a> 864 <a href="https://github.com/clarkhacks/RdRx/blob/main/static/docs/contributing.md" target="_blank" class="inline-flex items-center px-6 py-3 rounded-lg bg-[var(--card-bg)] border-2 border-[var(--border-color)] hover:border-[var(--primary-500)] transition-all"> 865 <i class="fas fa-hands-helping mr-2"></i> 866 Contribute 867 </a> 868 </div> 869 870 <div class="grid grid-cols-1 md:grid-cols-3 gap-8 text-center"> 871 <div> 872 <div class="text-3xl font-bold text-[var(--primary-500)] mb-2">GPL-3.0</div> 873 <div class="text-[var(--text-secondary)]">Open Source License</div> 874 </div> 875 <div> 876 <div class="text-3xl font-bold text-[var(--primary-500)] mb-2">TypeScript</div> 877 <div class="text-[var(--text-secondary)]">Type-Safe Codebase</div> 878 </div> 879 <div> 880 <div class="text-3xl font-bold text-[var(--primary-500)] mb-2">Active</div> 881 <div class="text-[var(--text-secondary)]">Development</div> 882 </div> 883 </div> 884 </div> 885</section> 886 887<!-- Footer --> 888<footer class="bg-[var(--bg-secondary)] border-t border-[var(--border-color)] mt-20"> 889 <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12"> 890 <div class="grid grid-cols-1 md:grid-cols-4 gap-8"> 891 <!-- Brand --> 892 <div class="col-span-1 md:col-span-1"> 893 <div class="flex items-center space-x-2 mb-4"> 894 <img src="/assets/RdRx.png" alt="RdRx Logo" class="w-8 h-8">
895 <span class="text-xl font-bold text-[var(--text-primary)]">RdRx</span> 896 </div> 897 <p class="text-[var(--text-secondary)] text-sm mb-4"> 898 Modern URL shortening and content sharing platform built on Cloudflare Workers. 899 </p> 900 <div class="flex space-x-4"> 901 <a href="https://github.com/clarkhacks/RdRx" target="_blank" class="text-[var(--text-secondary)] hover:text-[var(--primary-500)] transition-colors" aria-label="GitHub"> 902 <i class="fab fa-github text-xl"></i> 903 </a> 904 </div> 905 </div> 906 907 <!-- Product --> 908 <div> 909 <h3 class="text-[var(--text-primary)] font-semibold mb-4">Product</h3> 910 <ul class="space-y-2"> 911 <li><a href="#features" class="text-[var(--text-secondary)] hover:text-[var(--primary-500)] transition-colors text-sm">Features</a></li> 912 <li><a href="#technology" class="text-[var(--text-secondary)] hover:text-[var(--primary-500)] transition-colors text-sm">Technology</a></li> 913 <li><a href="https://github.com/clarkhacks/RdRx/blob/main/static/docs/changelog.md" target="_blank" class="text-[var(--text-secondary)] hover:text-[var(--primary-500)] transition-colors text-sm">Changelog</a></li> 914 <li><a href="https://github.com/clarkhacks/RdRx/issues" target="_blank" class="text-[var(--text-secondary)] hover:text-[var(--primary-500)] transition-colors text-sm">Roadmap</a></li> 915 </ul> 916 </div> 917 918 <!-- Resources --> 919 <div> 920 <h3 class="text-[var(--text-primary)] font-semibold mb-4">Resources</h3> 921 <ul class="space-y-2"> 922 <li><a href="https://github.com/clarkhacks/RdRx/blob/main/static/docs/README.md" target="_blank" class="text-[var(--text-secondary)] hover:text-[var(--primary-500)] transition-colors text-sm">Documentation</a></li> 923 <li><a href="https://github.com/clarkhacks/RdRx/blob/main/static/docs/api/README.md" target="_blank" class="text-[var(--text-secondary)] hover:text-[var(--primary-500)] transition-colors text-sm">API Reference</a></li> 924 <li><a href="https://github.com/clarkhacks/RdRx/blob/main/static/docs/getting-started.md" target="_blank" class="text-[var(--text-secondary)] hover:text-[var(--primary-500)] transition-colors text-sm">Getting Started</a></li> 925 <li><a href="https://github.com/clarkhacks/RdRx/blob/main/static/docs/deployment.md" target="_blank" class="text-[var(--text-secondary)] hover:text-[var(--primary-500)] transition-colors text-sm">Deployment Guide</a></li> 926 </ul> 927 </div> 928 929 <!-- Community --> 930 <div> 931 <h3 class="text-[var(--text-primary)] font-semibold mb-4">Community</h3> 932 <ul class="space-y-2"> 933 <li><a href="https://github.com/clarkhacks/RdRx" target="_blank" class="text-[var(--text-secondary)] hover:text-[var(--primary-500)] transition-colors text-sm">GitHub</a></li> 934 <li><a href="https://github.com/clarkhacks/RdRx/discussions" target="_blank" class="text-[var(--text-secondary)] hover:text-[var(--primary-500)] transition-colors text-sm">Discussions</a></li> 935 <li><a href="https://github.com/clarkhacks/RdRx/issues" target="_blank" class="text-[var(--text-secondary)] hover:text-[var(--primary-500)] transition-colors text-sm">Issues</a></li> 936 <li><a href="https://github.com/clarkhacks/RdRx/blob/main/static/docs/contributing.md" target="_blank" class="text-[var(--text-secondary)] hover:text-[var(--primary-500)] transition-colors text-sm">Contributing</a></li> 937 </ul> 938 </div> 939 </div> 940 941 <!-- Bottom Bar --> 942 <div class="mt-12 pt-8 border-t border-[var(--border-color)]"> 943 <div class="flex flex-col md:flex-row justify-between items-center space-y-4 md:space-y-0 text-center md:text-left"> 944 <div class="text-[var(--text-secondary)] text-sm"> 945 © 2026 RdRx. Licensed under <a href="https://github.com/clarkhacks/RdRx/blob/main/LICENSE" target="_blank" class="hover:text-[var(--primary-500)] transition-colors">GPL-3.0</a> 946 </div> 947 <div class="flex flex-col md:flex-row gap-4 md:gap-6"> 948 <a href="/privacy" class="text-[var(--text-secondary)] hover:text-[var(--primary-500)] transition-colors text-sm">Privacy Policy</a> 949 <a href="/terms" class="text-[var(--text-secondary)] hover:text-[var(--primary-500)] transition-colors text-sm">Terms of Service</a> 950 <a href="https://github.com/clarkhacks/RdRx/blob/main/static/docs/code-of-conduct.md" target="_blank" class="text-[var(--text-secondary)] hover:text-[var(--primary-500)] transition-colors text-sm">Code of Conduct</a> 951 </div> 952 </div> 953 </div> 954 </div> 955</footer> 956 957 958 959 <!-- Dark mode toggle button --> 960 <button 961 class="dark-mode-toggle" 962 @click="darkMode = !darkMode" 963 aria-label="Toggle dark mode" 964 type="button" 965 > 966 <i class="fas" :class="darkMode ? 'fa-sun' : 'fa-moon'"></i> 967 </button> 968 969
969<script> 970 // Prevent FOUC (Flash of Unstyled Content) 971 (function() { 972 const darkMode = localStorage.getItem('darkMode') === 'true' || 973 (!localStorage.getItem('darkMode') && window.matchMedia('(prefers-color-scheme: dark)').matches); 974 if (darkMode) { 975 document.documentElement.classList.add('dark'); 976 } 977 })(); 978 </script>
vendor: 1 bytes, line 978
978
979<script>(function(){function c(){var b=a.contentDocument||(a.contentWindow&&a.contentWindow.document);if(b){var d=b.createElement('script');d.innerHTML="window.__CF$cv$params={r:'a40d8692aa29000e',t:'MTc5MDM3NTk3NA=='};var a=document.createElement('script');a.src='/cdn-cgi/challenge-platform/scripts/jsd/main.js';document.getElementsByTagName('head')[0].appendChild(a);";b.getElementsByTagName('head')[0].appendChild(d)}}if(document.body){var a=document.createElement('iframe');a.height=1;a.width=1;a.style.position='absolute';a.style.top=0;a.style.left=0;a.style.border='none';a.style.visibility='hidden';document.body.appendChild(a);if('loading'!==document.readyState)c();else if(window.addEventListener)document.addEventListener('DOMContentLoaded',c);else{var e=document.onreadystatechange||function(){};document.onreadystatechange=function(b){e(b);'loading'!==document.readyState&&(document.onreadystatechange=e,c())}}}})();</script>
979<script type="module" src="https://static.cloudflareinsights.com/beacon.min.js/v31edd6df95cf4e85bb4c19e7a9bdbcba1788362987495" integrity="sha512-iIg7k2xntmwu6/uSb5tpc/hySgZc4eoL31yB29W6tJFo2akwjPWcEqnCEdJvGexCL0KEQwVYv5BlowfhVz26hg==" data-cf-beacon='{"version":"2024.11.0","token":"ea37f80c0d8b40e6a968efc6f55fe2da","r":1,"spa":2}' crossorigin="anonymous"></script>
979 980</body> 981</html>
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.