i want you to make me a website that features all the well known gematria decoders, like truthmafia, tommy truthful, gematria effect news, doenut, dekoding with kodi, ani osaru, matrixcodebreaker88, and any other well know gematria decoders, the site will be called gematriahub and basically its a site where people can visit to see all the decoders in one place, all there social media links, recent decodes/updates, the main page should be structured to see all the decoders and there recent decodes along with links to there most recent videos/posts on all social media platforms that way keeping up with them is easy, it should also have a members area where decoders can post there work for everyone to see, and also a messaging service to other members, i also want it to be able to play there videos right off my website with embedded video, we will also implement a gematria calculator at a later date to this website
cbd0bbf
verified
| <html lang="en" class="dark"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>GematriaHub - The Ultimate Decoder Nexus</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <script> | |
| tailwind.config = { | |
| theme: { | |
| extend: { | |
| colors: { | |
| primary: '#4f46e5', | |
| secondary: '#10b981', | |
| dark: '#1e293b', | |
| light: '#f8fafc' | |
| } | |
| } | |
| }, | |
| darkMode: 'class' | |
| } | |
| </script> | |
| <style> | |
| .video-container { | |
| aspect-ratio: 16/9; | |
| } | |
| .decoder-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); | |
| } | |
| .gradient-bg { | |
| background: linear-gradient(135deg, #4f46e5 0%, #10b981 100%); | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-light dark:bg-dark text-dark dark:text-light transition-colors duration-300"> | |
| <!-- Navigation --> | |
| <nav class="bg-white dark:bg-gray-900 shadow-lg sticky top-0 z-50"> | |
| <div class="container mx-auto px-4 py-3 flex justify-between items-center"> | |
| <div class="flex items-center space-x-2"> | |
| <i data-feather="code" class="text-primary"></i> | |
| <span class="text-xl font-bold">GematriaHub</span> | |
| </div> | |
| <div class="hidden md:flex space-x-8"> | |
| <a href="#" class="font-medium hover:text-primary">Decoders</a> | |
| <a href="#" class="font-medium hover:text-primary">Videos</a> | |
| <a href="#" class="font-medium hover:text-primary">Community</a> | |
| <a href="#" class="font-medium hover:text-primary">Calculator</a> | |
| <a href="#" class="font-medium hover:text-primary">About</a> | |
| </div> | |
| <div class="flex items-center space-x-4"> | |
| <button id="theme-toggle" class="p-2 rounded-full hover:bg-gray-200 dark:hover:bg-gray-700"> | |
| <i data-feather="moon" class="hidden dark:block"></i> | |
| <i data-feather="sun" class="dark:hidden"></i> | |
| </button> | |
| <a href="#" class="bg-primary text-white px-4 py-2 rounded-lg hover:bg-opacity-90 transition">Login</a> | |
| <button class="md:hidden"> | |
| <i data-feather="menu"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Hero Section --> | |
| <header class="gradient-bg text-white py-20"> | |
| <div class="container mx-auto px-4 text-center"> | |
| <h1 class="text-4xl md:text-6xl font-bold mb-6">The Ultimate Gematria Decoder Hub</h1> | |
| <p class="text-xl md:text-2xl mb-8 max-w-3xl mx-auto"> | |
| Track, explore, and engage with content from all major gematria decoders in one centralized platform. | |
| </p> | |
| <div class="flex flex-col sm:flex-row justify-center gap-4"> | |
| <a href="#decoders" class="bg-white text-primary font-bold px-8 py-3 rounded-lg hover:bg-opacity-90 transition"> | |
| Explore Decoders | |
| </a> | |
| <a href="#" class="bg-transparent border-2 border-white font-bold px-8 py-3 rounded-lg hover:bg-white hover:bg-opacity-10 transition"> | |
| Join Community | |
| </a> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Featured Decoders --> | |
| <section id="decoders" class="py-16 bg-gray-50 dark:bg-gray-800"> | |
| <div class="container mx-auto px-4"> | |
| <h2 class="text-3xl font-bold text-center mb-12">Featured Gematria Decoders</h2> | |
| <!-- Search Bar --> | |
| <div class="max-w-2xl mx-auto mb-12"> | |
| <div class="relative"> | |
| <input type="text" placeholder="Search decoders..." class="w-full px-4 py-3 rounded-lg border dark:border-gray-700 bg-white dark:bg-gray-900 focus:outline-none focus:ring-2 focus:ring-primary"> | |
| <button class="absolute right-3 top-3 text-gray-500"> | |
| <i data-feather="search"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Decoders Grid --> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> | |
| <!-- Decoder Card 1 --> | |
| <div class="decoder-card bg-white dark:bg-gray-900 rounded-xl overflow-hidden shadow-lg transition-all duration-300"> | |
| <div class="video-container"> | |
| <iframe class="w-full h-full" src="https://www.youtube.com/embed/dQw4w9WgXcQ" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> | |
| </div> | |
| <div class="p-6"> | |
| <div class="flex items-center mb-4"> | |
| <img src="https://static.photos/people/200x200/1" alt="TruthMafia" class="w-12 h-12 rounded-full mr-4"> | |
| <div> | |
| <h3 class="font-bold text-xl">TruthMafia</h3> | |
| <div class="flex space-x-2 mt-1"> | |
| <a href="#" class="text-gray-500 hover:text-primary"><i data-feather="youtube"></i></a> | |
| <a href="#" class="text-gray-500 hover:text-primary"><i data-feather="twitter"></i></a> | |
| <a href="#" class="text-gray-500 hover:text-primary"><i data-feather="instagram"></i></a> | |
| </div> | |
| </div> | |
| </div> | |
| <p class="text-gray-600 dark:text-gray-400 mb-4"> | |
| Specializing in celebrity and current event decodes with a focus on predictive programming. | |
| </p> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-sm text-gray-500">Last decode: 2 days ago</span> | |
| <a href="#" class="text-primary font-medium hover:underline">View Profile</a> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Decoder Card 2 --> | |
| <div class="decoder-card bg-white dark:bg-gray-900 rounded-xl overflow-hidden shadow-lg transition-all duration-300"> | |
| <div class="video-container"> | |
| <iframe class="w-full h-full" src="https://www.youtube.com/embed/dQw4w9WgXcQ" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> | |
| </div> | |
| <div class="p-6"> | |
| <div class="flex items-center mb-4"> | |
| <img src="https://static.photos/people/200x200/2" alt="Tommy Truthful" class="w-12 h-12 rounded-full mr-4"> | |
| <div> | |
| <h3 class="font-bold text-xl">Tommy Truthful</h3> | |
| <div class="flex space-x-2 mt-1"> | |
| <a href="#" class="text-gray-500 hover:text-primary"><i data-feather="youtube"></i></a> | |
| <a href="#" class="text-gray-500 hover:text-primary"><i data-feather="twitter"></i></a> | |
| <a href="#" class="text-gray-500 hover:text-primary"><i data-feather="telegram"></i></a> | |
| </div> | |
| </div> | |
| </div> | |
| <p class="text-gray-600 dark:text-gray-400 mb-4"> | |
| Deep dives into sports gematria and connections between historical events and current affairs. | |
| </p> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-sm text-gray-500">Last decode: 1 day ago</span> | |
| <a href="#" class="text-primary font-medium hover:underline">View Profile</a> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Decoder Card 3 --> | |
| <div class="decoder-card bg-white dark:bg-gray-900 rounded-xl overflow-hidden shadow-lg transition-all duration-300"> | |
| <div class="video-container"> | |
| <iframe class="w-full h-full" src="https://www.youtube.com/embed/dQw4w9WgXcQ" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> | |
| </div> | |
| <div class="p-6"> | |
| <div class="flex items-center mb-4"> | |
| <img src="https://static.photos/people/200x200/3" alt="Gematria Effect News" class="w-12 h-12 rounded-full mr-4"> | |
| <div> | |
| <h3 class="font-bold text-xl">Gematria Effect News</h3> | |
| <div class="flex space-x-2 mt-1"> | |
| <a href="#" class="text-gray-500 hover:text-primary"><i data-feather="youtube"></i></a> | |
| <a href="#" class="text-gray-500 hover:text-primary"><i data-feather="twitter"></i></a> | |
| <a href="#" class="text-gray-500 hover:text-primary"><i data-feather="link"></i></a> | |
| </div> | |
| </div> | |
| </div> | |
| <p class="text-gray-600 dark:text-gray-400 mb-4"> | |
| Daily decodes of news events with a focus on the numerical patterns behind world events. | |
| </p> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-sm text-gray-500">Last decode: Today</span> | |
| <a href="#" class="text-primary font-medium hover:underline">View Profile</a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- View All Button --> | |
| <div class="text-center mt-12"> | |
| <a href="#" class="inline-block bg-primary text-white px-6 py-3 rounded-lg hover:bg-opacity-90 transition"> | |
| View All Decoders | |
| </a> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Latest Videos Section --> | |
| <section class="py-16 bg-white dark:bg-gray-900"> | |
| <div class="container mx-auto px-4"> | |
| <h2 class="text-3xl font-bold text-center mb-12">Latest Decodes</h2> | |
| <div class="grid grid-cols-1 lg:grid-cols-2 gap-8 mb-12"> | |
| <!-- Featured Video --> | |
| <div class="bg-gray-100 dark:bg-gray-800 rounded-xl overflow-hidden"> | |
| <div class="video-container"> | |
| <iframe class="w-full h-full" src="https://www.youtube.com/embed/dQw4w9WgXcQ" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> | |
| </div> | |
| <div class="p-6"> | |
| <div class="flex items-center mb-4"> | |
| <img src="https://static.photos/people/200x200/4" alt="Doenut" class="w-10 h-10 rounded-full mr-3"> | |
| <span class="font-medium">Doenut</span> | |
| </div> | |
| <h3 class="text-xl font-bold mb-2">Breaking Down the Latest Celebrity Rituals</h3> | |
| <p class="text-gray-600 dark:text-gray-400 mb-4"> | |
| A deep dive into the recent celebrity "coincidences" and their numerical connections to historical events. | |
| </p> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-sm text-gray-500">Posted 5 hours ago</span> | |
| <div class="flex space-x-4"> | |
| <button class="flex items-center text-gray-500 hover:text-primary"> | |
| <i data-feather="thumbs-up" class="mr-1"></i> 142 | |
| </button> | |
| <button class="flex items-center text-gray-500 hover:text-primary"> | |
| <i data-feather="message-square" class="mr-1"></i> 23 | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Video List --> | |
| <div class="space-y-6"> | |
| <!-- Video Item 1 --> | |
| <div class="flex bg-gray-100 dark:bg-gray-800 rounded-lg overflow-hidden"> | |
| <div class="w-1/3"> | |
| <img src="https://static.photos/technology/320x240/1" alt="Video thumbnail" class="w-full h-full object-cover"> | |
| </div> | |
| <div class="w-2/3 p-4"> | |
| <h3 class="font-bold mb-1">Sports Gematria Explained</h3> | |
| <div class="flex items-center mb-2"> | |
| <img src="https://static.photos/people/200x200/5" alt="MatrixCodeBreaker88" class="w-6 h-6 rounded-full mr-2"> | |
| <span class="text-sm">MatrixCodeBreaker88</span> | |
| </div> | |
| <div class="flex justify-between items-center text-sm text-gray-500"> | |
| <span>12K views</span> | |
| <span>2 days ago</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Video Item 2 --> | |
| <div class="flex bg-gray-100 dark:bg-gray-800 rounded-lg overflow-hidden"> | |
| <div class="w-1/3"> | |
| <img src="https://static.photos/technology/320x240/2" alt="Video thumbnail" class="w-full h-full object-cover"> | |
| </div> | |
| <div class="w-2/3 p-4"> | |
| <h3 class="font-bold mb-1">Predictive Programming in Movies</h3> | |
| <div class="flex items-center mb-2"> | |
| <img src="https://static.photos/people/200x200/6" alt="Ani Osaru" class="w-6 h-6 rounded-full mr-2"> | |
| <span class="text-sm">Ani Osaru</span> | |
| </div> | |
| <div class="flex justify-between items-center text-sm text-gray-500"> | |
| <span>8.5K views</span> | |
| <span>3 days ago</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Video Item 3 --> | |
| <div class="flex bg-gray-100 dark:bg-gray-800 rounded-lg overflow-hidden"> | |
| <div class="w-1/3"> | |
| <img src="https://static.photos/technology/320x240/3" alt="Video thumbnail" class="w-full h-full object-cover"> | |
| </div> | |
| <div class="w-2/3 p-4"> | |
| <h3 class="font-bold mb-1">The Numbers Behind Recent Headlines</h3> | |
| <div class="flex items-center mb-2"> | |
| <img src="https://static.photos/people/200x200/7" alt="Dekoding with Kodi" class="w-6 h-6 rounded-full mr-2"> | |
| <span class="text-sm">Dekoding with Kodi</span> | |
| </div> | |
| <div class="flex justify-between items-center text-sm text-gray-500"> | |
| <span>15K views</span> | |
| <span>1 week ago</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- View All Button --> | |
| <div class="text-center"> | |
| <a href="#" class="inline-block border-2 border-primary text-primary dark:text-light px-6 py-3 rounded-lg hover:bg-primary hover:text-white transition"> | |
| View All Videos | |
| </a> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Community CTA --> | |
| <section class="gradient-bg text-white py-16"> | |
| <div class="container mx-auto px-4 text-center"> | |
| <h2 class="text-3xl font-bold mb-6">Join Our Growing Community</h2> | |
| <p class="text-xl mb-8 max-w-2xl mx-auto"> | |
| Connect with fellow gematria enthusiasts, share your decodes, and stay updated with the latest discoveries. | |
| </p> | |
| <div class="flex flex-col sm:flex-row justify-center gap-4"> | |
| <a href="#" class="bg-white text-primary font-bold px-8 py-3 rounded-lg hover:bg-opacity-90 transition"> | |
| Sign Up Free | |
| </a> | |
| <a href="#" class="bg-transparent border-2 border-white font-bold px-8 py-3 rounded-lg hover:bg-white hover:bg-opacity-10 transition"> | |
| Learn More | |
| </a> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Newsletter --> | |
| <section class="py-16 bg-gray-50 dark:bg-gray-800"> | |
| <div class="container mx-auto px-4 max-w-4xl"> | |
| <div class="bg-white dark:bg-gray-900 rounded-xl shadow-lg p-8 md:p-12"> | |
| <div class="md:flex items-center"> | |
| <div class="md:w-1/2 mb-6 md:mb-0"> | |
| <h3 class="text-2xl font-bold mb-2">Stay Updated</h3> | |
| <p class="text-gray-600 dark:text-gray-400"> | |
| Get the latest decodes and community updates delivered to your inbox. | |
| </p> | |
| </div> | |
| <div class="md:w-1/2"> | |
| <form class="flex"> | |
| <input type="email" placeholder="Your email address" class="flex-grow px-4 py-3 rounded-l-lg border dark:border-gray-700 focus:outline-none focus:ring-2 focus:ring-primary"> | |
| <button type="submit" class="bg-primary text-white px-6 py-3 rounded-r-lg hover:bg-opacity-90 transition"> | |
| Subscribe | |
| </button> | |
| </form> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="bg-gray-900 text-gray-400 py-12"> | |
| <div class="container mx-auto px-4"> | |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-8"> | |
| <div> | |
| <div class="flex items-center space-x-2 mb-4"> | |
| <i data-feather="code" class="text-primary"></i> | |
| <span class="text-xl font-bold text-white">GematriaHub</span> | |
| </div> | |
| <p class="mb-4"> | |
| The centralized platform for all major gematria decoders and enthusiasts. | |
| </p> | |
| <div class="flex space-x-4"> | |
| <a href="#" class="hover:text-primary"><i data-feather="youtube"></i></a> | |
| <a href="#" class="hover:text-primary"><i data-feather="twitter"></i></a> | |
| <a href="#" class="hover:text-primary"><i data-feather="instagram"></i></a> | |
| <a href="#" class="hover:text-primary"><i data-feather="telegram"></i></a> | |
| </div> | |
| </div> | |
| <div> | |
| <h4 class="text-white font-bold mb-4">Decoders</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="hover:text-primary">TruthMafia</a></li> | |
| <li><a href="#" class="hover:text-primary">Tommy Truthful</a></li> | |
| <li><a href="#" class="hover:text-primary">Gematria Effect News</a></li> | |
| <li><a href="#" class="hover:text-primary">Doenut</a></li> | |
| <li><a href="#" class="hover:text-primary">Dekoding with Kodi</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="text-white font-bold mb-4">Resources</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="hover:text-primary">Gematria Guide</a></li> | |
| <li><a href="#" class="hover:text-primary">Decoder Handbook</a></li> | |
| <li><a href="#" class="hover:text-primary">Community Guidelines</a></li> | |
| <li><a href="#" class="hover:text-primary">FAQ</a></li> | |
| <li><a href="#" class="hover:text-primary">Calculator (Coming Soon)</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="text-white font-bold mb-4">Legal</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="hover:text-primary">Terms of Service</a></li> | |
| <li><a href="#" class="hover:text-primary">Privacy Policy</a></li> | |
| <li><a href="#" class="hover:text-primary">Cookie Policy</a></li> | |
| <li><a href="#" class="hover:text-primary">DMCA</a></li> | |
| <li><a href="#" class="hover:text-primary">Contact Us</a></li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="border-t border-gray-800 mt-8 pt-8 text-center"> | |
| <p>© 2023 GematriaHub. All rights reserved.</p> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // Theme toggle | |
| const themeToggle = document.getElementById('theme-toggle'); | |
| const html = document.documentElement; | |
| themeToggle.addEventListener('click', () => { | |
| html.classList.toggle('dark'); | |
| // Save preference to localStorage | |
| if (html.classList.contains('dark')) { | |
| localStorage.setItem('theme', 'dark'); | |
| } else { | |
| localStorage.setItem('theme', 'light'); | |
| } | |
| }); | |
| // Check for saved theme preference | |
| if (localStorage.getItem('theme') === 'dark' || (!localStorage.getItem('theme') && window.matchMedia('(prefers-color-scheme: dark)').matches)) { | |
| html.classList.add('dark'); | |
| } else { | |
| html.classList.remove('dark'); | |
| } | |
| // Feather icons | |
| feather.replace(); | |
| </script> | |
| </body> | |
| </html> | |