the-digital-codex / index.html
AronTomas's picture
update: <p align="center">
b7e151c verified
<!DOCTYPE html>
<html lang="en" class="scroll-smooth">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>The Digital Codex - A Curated Collection of Secret Knowledge</title>
<link rel="icon" type="image/svg+xml" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ctext y='.9em' font-size='90'%3E๐Ÿ“œ%3C/text%3E%3C/svg%3E">
<link rel="stylesheet" href="style.css">
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://unpkg.com/feather-icons"></script>
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
<script>
tailwind.config = {
darkMode: 'class',
theme: {
extend: {
colors: {
primary: {
50: '#f0fdfa',
100: '#ccfbf1',
200: '#99f6e4',
300: '#5eead4',
400: '#2dd4bf',
500: '#14b8a6',
600: '#0d9488',
700: '#0f766e',
800: '#115e59',
900: '#134e4a',
},
secondary: {
50: '#f5f3ff',
100: '#ede9fe',
200: '#ddd6fe',
300: '#c4b5fd',
400: '#a78bfa',
500: '#8b5cf6',
600: '#7c3aed',
700: '#6d28d9',
800: '#5b21b6',
900: '#4c1d95',
}
},
animation: {
'fade-in': 'fadeIn 0.3s ease-in',
'slide-up': 'slideUp 0.2s ease-out',
},
keyframes: {
fadeIn: {
'0%': { opacity: '0' },
'100%': { opacity: '1' },
},
slideUp: {
'0%': { transform: 'translateY(10px)', opacity: '0' },
'100%': { transform: 'translateY(0)', opacity: '1' },
}
}
}
}
}
</script>
</head>
<body class="bg-gray-900 text-gray-100 antialiased">
<nav-header></nav-header>
<div class="flex min-h-screen">
<!-- Sidebar -->
<side-nav class="hidden lg:block"></side-nav>
<!-- Main Content -->
<main class="flex-1 px-4 sm:px-6 lg:px-8 py-6 lg:py-8">
<!-- Hero Section -->
<section class="text-center py-12 mb-8 bg-gradient-to-br from-gray-800 to-gray-900 rounded-2xl border border-gray-700 shadow-2xl">
<div class="max-w-4xl mx-auto">
<div class="mb-6">
<a href="https://github.com/trimstray/the-book-of-secret-knowledge">
<img src="https://github.com/trimstray/the-book-of-secret-knowledge/raw/master/static/img/the-book-of-secret-knowledge-preview.png" alt="The Digital Codex" class="mx-auto rounded-lg shadow-lg max-w-2xl">
</a>
</div>
<h1 class="text-4xl sm:text-5xl lg:text-6xl font-bold mb-4 bg-gradient-to-r from-primary-400 to-secondary-400 bg-clip-text text-transparent">
The Digital Codex
</h1>
<p class="text-xl text-gray-300 mb-2 italic">"Knowledge is powerful, be careful how you use it!"</p>
<p class="text-lg text-gray-400 max-w-2xl mx-auto">
A collection of inspiring lists, manuals, cheatsheets, blogs, hacks, one-liners, cli/web tools, and more.
</p>
<stats-counter class="mt-6"></stats-counter>
</div>
</section>
<!-- Search Bar -->
<search-bar class="sticky top-0 z-40 mb-8"></search-bar>
<!-- Content Sections -->
<div id="content-container" class="space-y-12">
<!-- Sections will be dynamically generated -->
</div>
<!-- Back to Top Button -->
<button id="back-to-top" class="fixed bottom-6 right-6 bg-primary-600 hover:bg-primary-700 text-white p-3 rounded-full shadow-lg opacity-0
<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
</body>
</html>