Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Open X Notes AI | Privacy-Focused Research Assistant</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| .gradient-text { | |
| background: linear-gradient(90deg, #3b82f6, #8b5cf6); | |
| -webkit-background-clip: text; | |
| background-clip: text; | |
| color: transparent; | |
| } | |
| .note-card:hover { | |
| transform: translateY(-2px); | |
| box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1); | |
| } | |
| .sidebar { | |
| transition: all 0.3s ease; | |
| } | |
| @keyframes float { | |
| 0% { transform: translateY(0px); } | |
| 50% { transform: translateY(-10px); } | |
| 100% { transform: translateY(0px); } | |
| } | |
| .floating { | |
| animation: float 6s ease-in-out infinite; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50 font-sans antialiased"> | |
| <div class="min-h-screen flex flex-col"> | |
| <!-- Header --> | |
| <header class="bg-white border-b border-gray-200 py-4 px-6"> | |
| <div class="max-w-7xl mx-auto flex justify-between items-center"> | |
| <div class="flex items-center space-x-2"> | |
| <div class="w-8 h-8 rounded-full bg-indigo-500 flex items-center justify-center text-white"> | |
| <i class="fas fa-book-open"></i> | |
| </div> | |
| <h1 class="text-xl font-bold text-gray-800">Open X <span class="gradient-text">Notes AI</span></h1> | |
| </div> | |
| <nav class="hidden md:flex space-x-8"> | |
| <a href="#" class="text-gray-600 hover:text-indigo-500 transition">Features</a> | |
| <a href="#" class="text-gray-600 hover:text-indigo-500 transition">Pricing</a> | |
| <a href="#" class="text-gray-600 hover:text-indigo-500 transition">Docs</a> | |
| <a href="#" class="text-gray-600 hover:text-indigo-500 transition">Community</a> | |
| </nav> | |
| <div class="flex items-center space-x-4"> | |
| <button class="px-4 py-2 text-gray-600 hover:text-indigo-500 transition">Log in</button> | |
| <button class="px-4 py-2 bg-indigo-500 text-white rounded-md hover:bg-indigo-600 transition">Get Started</button> | |
| <button class="md:hidden p-2 rounded-md text-gray-600 hover:bg-gray-100 transition" aria-label="Toggle menu" onclick="toggleMenu()"> | |
| <i class="fas fa-bars text-xl"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Mobile menu --> | |
| <div class="md:hidden hidden bg-white border-b border-gray-200 fixed w-full left-0 top-0 z-50 shadow-lg" id="mobile-menu" style="margin-top: 72px;"> | |
| <div class="px-6 py-4 space-y-4"> | |
| <a href="#" class="block text-gray-600 hover:text-indigo-500 transition">Features</a> | |
| <a href="#" class="block text-gray-600 hover:text-indigo-500 transition">Pricing</a> | |
| <a href="#" class="block text-gray-600 hover:text-indigo-500 transition">Docs</a> | |
| <a href="#" class="block text-gray-600 hover:text-indigo-500 transition">Community</a> | |
| <div class="pt-4 border-t border-gray-200"> | |
| <button class="w-full px-4 py-2 text-gray-600 hover:text-indigo-500 transition">Log in</button> | |
| <button class="w-full mt-2 px-4 py-2 bg-indigo-500 text-white rounded-md hover:bg-indigo-600 transition">Get Started</button> | |
| </div> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Hero Section --> | |
| <section class="py-16 px-6 bg-white"> | |
| <div class="max-w-7xl mx-auto flex flex-col md:flex-row items-center"> | |
| <div class="md:w-1/2 mb-10 md:mb-0"> | |
| <h2 class="text-4xl md:text-5xl font-bold text-gray-800 leading-tight mb-6"> | |
| Ditch the data vampires! 🧛♂️ <span class="gradient-text">Open source</span> AI that keeps your brain juice private | |
| </h2> | |
| <p class="text-lg text-gray-600 mb-8"> | |
| Why feed the Google monster when you can have an AI research sidekick that actually respects your privacy? No creepy data harvesting here! | |
| </p> | |
| <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4"> | |
| <button class="px-6 py-3 bg-indigo-500 text-white rounded-md hover:bg-indigo-600 transition font-medium"> | |
| Get started <i class="fas fa-rocket ml-2"></i> | |
| </button> | |
| <button class="px-6 py-3 border border-gray-300 text-gray-700 rounded-md hover:bg-gray-50 transition font-medium"> | |
| Log in <i class="fas fa-sign-in-alt ml-2"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="md:w-1/2 flex justify-center"> | |
| <div class="relative w-full max-w-md"> | |
| <div class="absolute -top-10 -left-10 w-32 h-32 rounded-full bg-indigo-100 opacity-50 floating"></div> | |
| <div class="absolute -bottom-10 -right-10 w-32 h-32 rounded-full bg-purple-100 opacity-50 floating" style="animation-delay: 1s;"></div> | |
| <div class="relative bg-white rounded-xl shadow-lg overflow-hidden border border-gray-200"> | |
| <div class="bg-gray-800 px-4 py-3 flex items-center"> | |
| <div class="flex space-x-2"> | |
| <div class="w-3 h-3 rounded-full bg-red-500"></div> | |
| <div class="w-3 h-3 rounded-full bg-yellow-500"></div> | |
| <div class="w-3 h-3 rounded-full bg-green-500"></div> | |
| </div> | |
| <div class="ml-4 text-gray-300 text-sm">research-notes.md</div> | |
| </div> | |
| <div class="p-6"> | |
| <div class="mb-6"> | |
| <h3 class="text-lg font-semibold text-gray-800 mb-2">Research on Neural Networks</h3> | |
| <p class="text-gray-600 text-sm">Created: Today | Last edited: 5 min ago</p> | |
| </div> | |
| <div class="prose max-w-none"> | |
| <p class="text-gray-700 mb-4">In a world dominated by Artificial Intelligence, having the ability to think 🧠 and acquire new knowledge 💡, is a skill that should not be a privilege for a few, nor restricted to a single provider.</p> | |
| <div class="bg-indigo-50 border-l-4 border-indigo-500 p-4 mb-4"> | |
| <p class="text-indigo-700"><strong>AI Insight:</strong> Research suggests that decentralized knowledge management leads to more innovative thinking patterns.</p> | |
| </div> | |
| <p class="text-gray-700">Open Notebook empowers you to manage your research, generate AI-assisted notes, and interact with your content—on your terms.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="flex justify-center mt-12"> | |
| <div class="relative"> | |
| <div class="w-32 h-32 rounded-full bg-indigo-100 opacity-20"></div> | |
| <div class="absolute -bottom-2 -right-2 w-16 h-16 rounded-full bg-purple-100 opacity-20"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Value Proposition --> | |
| <section class="py-16 px-6 bg-gray-50"> | |
| <!-- Our Vision --> | |
| <section class="py-20 px-6 bg-gradient-to-b from-white to-indigo-50"> | |
| <div class="max-w-7xl mx-auto"> | |
| <div class="text-center mb-16 relative"> | |
| <div class="absolute -top-6 left-1/2 transform -translate-x-1/2 w-16 h-16 rounded-full bg-indigo-100 opacity-30"></div> | |
| <h2 class="text-4xl font-bold text-gray-800 mb-4 relative"> | |
| <span class="relative z-10">Our Vision</span> | |
| <span class="absolute bottom-0 left-1/2 transform -translate-x-1/2 w-24 h-1 bg-indigo-500 rounded-full"></span> | |
| </h2> | |
| <h3 class="text-3xl text-transparent bg-clip-text bg-gradient-to-r from-indigo-500 to-purple-600 mb-6 font-medium"> | |
| Empowering Self-Teaching and Knowledge Mastery | |
| </h3> | |
| <div class="relative max-w-4xl mx-auto"> | |
| <div class="absolute -left-8 top-0 w-16 h-16 rounded-full bg-purple-100 opacity-20"></div> | |
| <div class="relative bg-white p-8 rounded-xl shadow-sm border border-gray-100 mb-8"> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0 mr-4 mt-1"> | |
| <div class="w-8 h-8 rounded-full bg-indigo-100 text-indigo-500 flex items-center justify-center"> | |
| <i class="fas fa-lightbulb"></i> | |
| </div> | |
| </div> | |
| <p class="text-lg text-gray-700"> | |
| We're building the Hogwarts of research tools - where your knowledge is magic ✨ and no evil wizard (looking at you, data brokers) can steal your spells. Imagine AI that amplifies your brainpower instead of mining it like digital bitcoin. | |
| </p> | |
| </div> | |
| </div> | |
| <div class="relative bg-white p-8 rounded-xl shadow-sm border border-gray-100"> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0 mr-4 mt-1"> | |
| <div class="w-8 h-8 rounded-full bg-purple-100 text-purple-500 flex items-center justify-center"> | |
| <i class="fas fa-bullseye"></i> | |
| </div> | |
| </div> | |
| <p class="text-lg text-gray-700"> | |
| Our mission is to build tools that enable everyone to transform their knowledge into something tangible, flexible, and deeply personal—learning that is adaptable, creative, and entirely in your hands. | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <div class="max-w-7xl mx-auto"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl font-bold text-gray-800 mb-4">Take Back Control of Your Research</h2> | |
| <p class="text-xl text-gray-600 max-w-3xl mx-auto">An AI-powered privacy-first approach to knowledge management that respects your data</p> | |
| </div> | |
| <div class="grid md:grid-cols-3 gap-8"> | |
| <div class="bg-white p-8 rounded-xl shadow-sm hover:shadow-md transition"> | |
| <div class="w-12 h-12 rounded-full bg-indigo-100 text-indigo-500 flex items-center justify-center mb-6"> | |
| <i class="fas fa-lock text-xl"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold text-gray-800 mb-3">Privacy First</h3> | |
| <p class="text-gray-600">Your data never leaves your device unless you choose to share it. No tracking, no ads, no data mining.</p> | |
| </div> | |
| <div class="bg-white p-8 rounded-xl shadow-sm hover:shadow-md transition"> | |
| <div class="w-12 h-12 rounded-full bg-purple-100 text-purple-500 flex items-center justify-center mb-6"> | |
| <i class="fas fa-brain text-xl"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold text-gray-800 mb-3">AI-Assisted</h3> | |
| <p class="text-gray-600">Local AI models help you generate insights, summarize content, and make connections in your research.</p> | |
| </div> | |
| <div class="bg-white p-8 rounded-xl shadow-sm hover:shadow-md transition"> | |
| <div class="w-12 h-12 rounded-full bg-green-100 text-green-500 flex items-center justify-center mb-6"> | |
| <i class="fab fa-github text-xl"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold text-gray-800 mb-3">Open Source</h3> | |
| <p class="text-gray-600">Transparent codebase that anyone can audit, modify, and contribute to. No hidden agendas.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Features --> | |
| <section class="py-16 px-6 bg-white"> | |
| <!-- Path to Mastery --> | |
| <section class="py-16 px-6 bg-gray-50"> | |
| <div class="max-w-7xl mx-auto"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl font-bold text-gray-800 mb-4">The Path to Self-Directed Mastery</h2> | |
| <p class="text-xl text-gray-600 max-w-4xl mx-auto"> | |
| The best way to learn is to create, connect, and actively engage. We believe in making self-teaching accessible to everyone, inspired by principles of lifelong learning, the Zettelkasten method, and the mindset of ultralearning. | |
| </p> | |
| </div> | |
| <div class="grid md:grid-cols-2 gap-8 mb-16"> | |
| <!-- Pillar 1 --> | |
| <div class="bg-white p-8 rounded-xl shadow-sm hover:shadow-md transition"> | |
| <div class="flex items-center mb-6"> | |
| <div class="w-12 h-12 rounded-full bg-indigo-100 text-indigo-500 flex items-center justify-center mr-4"> | |
| <span class="text-xl font-bold">1</span> | |
| </div> | |
| <h3 class="text-xl font-semibold text-gray-800">Learning Requires Action</h3> | |
| </div> | |
| <div class="pl-16"> | |
| <p class="text-gray-600 mb-4"><strong>Elaboration:</strong> Create your own thoughts and notes. Learning isn't passive—it's an active process of engagement. Write, refine, and develop your own perspective.</p> | |
| <p class="text-gray-600"><strong>Curate and Organize:</strong> Take the knowledge you have gathered, reorganize it, refine it, and shape it into something new. Cleaning up the chaos and turning it into structure is a key step to learning deeply.</p> | |
| </div> | |
| </div> | |
| <!-- Pillar 2 --> | |
| <div class="bg-white p-8 rounded-xl shadow-sm hover:shadow-md transition"> | |
| <div class="flex items-center mb-6"> | |
| <div class="w-12 h-12 rounded-full bg-purple-100 text-purple-500 flex items-center justify-center mr-4"> | |
| <span class="text-xl font-bold">2</span> | |
| </div> | |
| <h3 class="text-xl font-semibold text-gray-800">Seamless Integration</h3> | |
| </div> | |
| <div class="pl-16"> | |
| <p class="text-gray-600 mb-4"><strong>Universal Content Support:</strong> Work with any type of content—articles, videos, presentations, or even your own fleeting thoughts. Open X Notes AI makes it easy to gather and manage it all in one place.</p> | |
| <p class="text-gray-600"><strong>Cross-Platform Compatibility:</strong> Access your thoughts and learning materials wherever you are. Whether you are on a desktop, tablet, or mobile, your knowledge is always within reach.</p> | |
| </div> | |
| </div> | |
| <!-- Pillar 3 --> | |
| <div class="bg-white p-8 rounded-xl shadow-sm hover:shadow-md transition"> | |
| <div class="flex items-center mb-6"> | |
| <div class="w-12 h-12 rounded-full bg-blue-100 text-blue-500 flex items-center justify-center mr-4"> | |
| <span class="text-xl font-bold">3</span> | |
| </div> | |
| <h3 class="text-xl font-semibold text-gray-800">AI as a Cognitive Partner</h3> | |
| </div> | |
| <div class="pl-16"> | |
| <p class="text-gray-600 mb-4"><strong>Processing:</strong> Why spend time going through thousands of pages manually when AI can help surface what's most important? Let AI work for you.</p> | |
| <p class="text-gray-600 mb-4"><strong>Researching:</strong> AI can sift through vast amounts of information to help you find those hidden gems you may not even know to look for.</p> | |
| <p class="text-gray-600"><strong>Question Your Thinking:</strong> Imagine having a thinking partner who constantly challenges your assumptions and helps you see different perspectives—AI can be that partner, always pushing your understanding further.</p> | |
| </div> | |
| </div> | |
| <!-- Pillar 4 --> | |
| <div class="bg-white p-8 rounded-xl shadow-sm hover:shadow-md transition"> | |
| <div class="flex items-center mb-6"> | |
| <div class="w-12 h-12 rounded-full bg-green-100 text-green-500 flex items-center justify-center mr-4"> | |
| <span class="text-xl font-bold">4</span> | |
| </div> | |
| <h3 class="text-xl font-semibold text-gray-800">CONTEXT is King</h3> | |
| </div> | |
| <div class="pl-16"> | |
| <p class="text-gray-600 mb-4"><strong>Your Context:</strong> The more the AI understands about your goals and motivations, the better it can help you. We aim to make your learning experience deeply personalized.</p> | |
| <p class="text-gray-600"><strong>Privacy First:</strong> Your context is the most personal and valuable asset you have. At Open X Notes AI, we prioritize your privacy, ensuring you maintain complete control over your data.</p> | |
| </div> | |
| </div> | |
| <!-- Pillar 5 --> | |
| <div class="bg-white p-8 rounded-xl shadow-sm hover:shadow-md transition md:col-span-2"> | |
| <div class="flex items-center mb-6"> | |
| <div class="w-12 h-12 rounded-full bg-yellow-100 text-yellow-500 flex items-center justify-center mr-4"> | |
| <span class="text-xl font-bold">5</span> | |
| </div> | |
| <h3 class="text-xl font-semibold text-gray-800">Community-Driven Development</h3> | |
| </div> | |
| <div class="pl-16"> | |
| <p class="text-gray-600 mb-4"><strong>Open Source Forever:</strong> Maintaining transparency, trust, and the power to evolve without restrictions.</p> | |
| <p class="text-gray-600"><strong>Community Extensions:</strong> We envision a vibrant ecosystem of community-built plugins, where users collectively push the boundaries of what Open X Notes AI can achieve.</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Zettelkasten Method --> | |
| <div class="bg-white p-8 rounded-xl shadow-sm mb-12"> | |
| <h3 class="text-2xl font-semibold text-gray-800 mb-6 text-center">Embracing the Zettelkasten Method</h3> | |
| <p class="text-gray-600 mb-6"> | |
| At the core of our vision is a Zettelkasten-inspired approach to knowledge management. We believe in capturing ideas in atomic, concise notes and interlinking them to form a network of insights that grows with you. Your knowledge should evolve into a web of interconnected ideas—a personal knowledge graph—that helps you uncover patterns, generate new insights, and explore ideas in ways that traditional notes cannot offer. | |
| </p> | |
| <div class="grid md:grid-cols-3 gap-6"> | |
| <div class="bg-indigo-50 p-6 rounded-lg"> | |
| <h4 class="font-semibold text-indigo-700 mb-3">Atomic Notes</h4> | |
| <p class="text-gray-700">Break information down into its most essential pieces, capturing single concepts concisely.</p> | |
| </div> | |
| <div class="bg-purple-50 p-6 rounded-lg"> | |
| <h4 class="font-semibold text-purple-700 mb-3">Linking and Exploring Connections</h4> | |
| <p class="text-gray-700">Like a spider's web, your ideas grow richer as they connect to each other, forming a network of relationships.</p> | |
| </div> | |
| <div class="bg-blue-50 p-6 rounded-lg"> | |
| <h4 class="font-semibold text-blue-700 mb-3">Creativity Through Connections</h4> | |
| <p class="text-gray-700">The Zettelkasten method helps spark creativity by encouraging you to make unexpected connections between different ideas, unlocking new perspectives and insights.</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Ultralearning --> | |
| <div class="bg-white p-8 rounded-xl shadow-sm"> | |
| <h3 class="text-2xl font-semibold text-gray-800 mb-6 text-center">The Mindset of Ultralearning</h3> | |
| <p class="text-gray-600 mb-6"> | |
| We also draw inspiration from the philosophy of ultralearning—self-directed, intense, and strategic learning that prioritizes deep understanding over superficial familiarity. With Open X Notes AI, we want to empower learners to: | |
| </p> | |
| <div class="grid md:grid-cols-3 gap-6"> | |
| <div class="bg-green-50 p-6 rounded-lg"> | |
| <h4 class="font-semibold text-green-700 mb-3">Learn by Doing</h4> | |
| <p class="text-gray-700">Practice directly in real-world contexts. The most effective way to learn is by applying your knowledge.</p> | |
| </div> | |
| <div class="bg-yellow-50 p-6 rounded-lg"> | |
| <h4 class="font-semibold text-yellow-700 mb-3">Direct Your Own Journey</h4> | |
| <p class="text-gray-700">Every learner is different. Open X Notes AI provides the flexibility to choose what and how you want to learn, giving you complete control over your journey.</p> | |
| </div> | |
| <div class="bg-red-50 p-6 rounded-lg"> | |
| <h4 class="font-semibold text-red-700 mb-3">Challenge Yourself</h4> | |
| <p class="text-gray-700">Ultralearning is about stretching beyond comfort zones. Use AI to test your understanding, push your limits, and develop mastery through retrieval, active engagement, and feedback.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <div class="max-w-7xl mx-auto"> | |
| <div class="flex flex-col md:flex-row items-center mb-16"> | |
| <div class="md:w-1/2 mb-10 md:mb-0"> | |
| <h2 class="text-3xl font-bold text-gray-800 mb-6">Tame Your Research Chaos 🦁</h2> | |
| <p class="text-gray-600 mb-6">Turn your digital hoarding into a masterpiece of organization. Notebooks, tags, and search so smart it's basically cheating.</p> | |
| <ul class="space-y-4"> | |
| <li class="flex items-start"> | |
| <div class="flex-shrink-0 mt-1"> | |
| <div class="w-6 h-6 rounded-full bg-indigo-100 text-indigo-500 flex items-center justify-center"> | |
| <i class="fas fa-check text-xs"></i> | |
| </div> | |
| </div> | |
| <p class="ml-3 text-gray-700">Nested notebooks for complex research projects</p> | |
| </li> | |
| <li class="flex items-start"> | |
| <div class="flex-shrink-0 mt-1"> | |
| <div class="w-6 h-6 rounded-full bg-indigo-100 text-indigo-500 flex items-center justify-center"> | |
| <i class="fas fa-check text-xs"></i> | |
| </div> | |
| </div> | |
| <p class="ml-3 text-gray-700">Smart tags and automatic categorization</p> | |
| </li> | |
| <li class="flex items-start"> | |
| <div class="flex-shrink-0 mt-1"> | |
| <div class="w-6 h-6 rounded-full bg-indigo-100 text-indigo-500 flex items-center justify-center"> | |
| <i class="fas fa-check text-xs"></i> | |
| </div> | |
| </div> | |
| <p class="ml-3 text-gray-700">Full-text search with semantic understanding</p> | |
| </li> | |
| </ul> | |
| </div> | |
| <div class="md:w-1/2 flex justify-center"> | |
| <div class="relative w-full max-w-md"> | |
| <div class="bg-white rounded-xl shadow-md border border-gray-200 overflow-hidden"> | |
| <div class="bg-gray-100 px-4 py-3 border-b border-gray-200 flex items-center"> | |
| <div class="flex space-x-2"> | |
| <div class="w-2 h-2 rounded-full bg-gray-400"></div> | |
| <div class="w-2 h-2 rounded-full bg-gray-400"></div> | |
| <div class="w-2 h-2 rounded-full bg-gray-400"></div> | |
| </div> | |
| <div class="ml-4 text-gray-500 text-sm">Notebook Explorer</div> | |
| </div> | |
| <div class="p-4"> | |
| <div class="flex items-center justify-between mb-4"> | |
| <h3 class="font-medium text-gray-700">My Research</h3> | |
| <button class="text-gray-500 hover:text-indigo-500"> | |
| <i class="fas fa-plus"></i> | |
| </button> | |
| </div> | |
| <div class="space-y-2"> | |
| <div class="flex items-center justify-between p-2 hover:bg-gray-50 rounded cursor-pointer"> | |
| <div class="flex items-center"> | |
| <i class="fas fa-folder text-yellow-400 mr-3"></i> | |
| <span>Artificial Intelligence</span> | |
| </div> | |
| <i class="fas fa-chevron-right text-gray-400 text-xs"></i> | |
| </div> | |
| <div class="flex items-center justify-between p-2 hover:bg-gray-50 rounded cursor-pointer"> | |
| <div class="flex items-center"> | |
| <i class="fas fa-folder text-yellow-400 mr-3"></i> | |
| <span>Neuroscience</span> | |
| </div> | |
| <i class="fas fa-chevron-right text-gray-400 text-xs"></i> | |
| </div> | |
| <div class="flex items-center justify-between p-2 hover:bg-gray-50 rounded cursor-pointer"> | |
| <div class="flex items-center"> | |
| <i class="fas fa-folder text-yellow-400 mr-3"></i> | |
| <span>Quantum Computing</span> | |
| </div> | |
| <i class="fas fa-chevron-right text-gray-400 text-xs"></i> | |
| </div> | |
| <div class="flex items-center justify-between p-2 hover:bg-gray-50 rounded cursor-pointer"> | |
| <div class="flex items-center"> | |
| <i class="fas fa-file-alt text-blue-400 mr-3"></i> | |
| <span>Research Methodology</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- CTA --> | |
| <section class="py-16 px-6 bg-gradient-to-r from-indigo-500 to-purple-600 text-white"> | |
| <div class="max-w-7xl mx-auto text-center"> | |
| <h2 class="text-3xl font-bold mb-6">Ready to break up with Big Tech? 💔</h2> | |
| <p class="text-xl mb-8 max-w-3xl mx-auto opacity-90">Join the rebellion of 42,069* researchers who said "no thanks" to surveillance capitalism. *Okay maybe not exactly 42,069, but definitely a lot of cool people!</p> | |
| <div class="flex flex-col sm:flex-row justify-center space-y-4 sm:space-y-0 sm:space-x-4"> | |
| <button class="px-8 py-3 bg-white text-indigo-600 rounded-md hover:bg-gray-100 transition font-medium"> | |
| Sign up <i class="fas fa-arrow-down ml-2"></i> | |
| </button> | |
| <button class="px-8 py-3 border border-white text-white rounded-md hover:bg-white hover:bg-opacity-10 transition font-medium"> | |
| View Demo <i class="fas fa-play-circle ml-2"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="bg-gray-900 text-gray-400 py-12 px-6"> | |
| <div class="max-w-7xl mx-auto"> | |
| <div class="grid grid-cols-2 md:grid-cols-4 gap-8"> | |
| <div> | |
| <h3 class="text-white font-medium mb-4">Product</h3> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="hover:text-white transition">Features</a></li> | |
| <li><a href="#" class="hover:text-white transition">Pricing</a></li> | |
| <li><a href="#" class="hover:text-white transition">Download</a></li> | |
| <li><a href="#" class="hover:text-white transition">Roadmap</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-white font-medium mb-4">Resources</h3> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="hover:text-white transition">Documentation</a></li> | |
| <li><a href="#" class="hover:text-white transition">Tutorials</a></li> | |
| <li><a href="#" class="hover:text-white transition">Blog</a></li> | |
| <li><a href="#" class="hover:text-white transition">API</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-white font-medium mb-4">Company</h3> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="hover:text-white transition">About</a></li> | |
| <li><a href="#" class="hover:text-white transition">Privacy</a></li> | |
| <li><a href="#" class="hover:text-white transition">Terms</a></li> | |
| <li><a href="#" class="hover:text-white transition">Contact</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-white font-medium mb-4">Connect</h3> | |
| <div class="flex space-x-4 mb-4"> | |
| <a href="#" class="w-8 h-8 rounded-full bg-gray-800 flex items-center justify-center hover:bg-indigo-500 hover:text-white transition"> | |
| <i class="fab fa-github"></i> | |
| </a> | |
| <a href="#" class="w-8 h-8 rounded-full bg-gray-800 flex items-center justify-center hover:bg-blue-500 hover:text-white transition"> | |
| <i class="fab fa-twitter"></i> | |
| </a> | |
| <a href="#" class="w-8 h-8 rounded-full bg-gray-800 flex items-center justify-center hover:bg-red-500 hover:text-white transition"> | |
| <i class="fab fa-youtube"></i> | |
| </a> | |
| <a href="#" class="w-8 h-8 rounded-full bg-gray-800 flex items-center justify-center hover:bg-blue-600 hover:text-white transition"> | |
| <i class="fab fa-linkedin-in"></i> | |
| </a> | |
| </div> | |
| <p class="text-sm">Get the juicy updates (no spam, we promise!) 🍿</p> | |
| <div class="mt-2 flex"> | |
| <input type="email" placeholder="Your email" class="px-3 py-2 bg-gray-800 text-white rounded-l-md focus:outline-none focus:ring-1 focus:ring-indigo-500 w-full"> | |
| <button class="px-4 py-2 bg-indigo-500 text-white rounded-r-md hover:bg-indigo-600 transition"> | |
| <i class="fas fa-paper-plane"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="border-t border-gray-800 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center"> | |
| <div class="flex items-center mb-4 md:mb-0"> | |
| <div class="w-6 h-6 rounded-full bg-indigo-500 flex items-center justify-center text-white mr-2"> | |
| <i class="fas fa-book-open text-xs"></i> | |
| </div> | |
| <span class="text-white font-medium">Open X <span class="gradient-text">Notes AI</span></span> | |
| </div> | |
| <div class="text-sm"> | |
| © 2023 Open X Notes AI. All rights reserved. | |
| </div> | |
| </div> | |
| </div> | |
| </footer> | |
| </div> | |
| <script> | |
| // Mobile menu toggle function | |
| function toggleMenu() { | |
| const menu = document.getElementById('mobile-menu'); | |
| menu.classList.toggle('hidden'); | |
| } | |
| // Close mobile menu when clicking outside | |
| document.addEventListener('click', function(event) { | |
| const menu = document.getElementById('mobile-menu'); | |
| const button = document.querySelector('button[aria-label="Toggle menu"]'); | |
| if (!menu.contains(event.target) && event.target !== button && !button.contains(event.target)) { | |
| menu.classList.add('hidden'); | |
| } | |
| }); | |
| // Floating animation for elements | |
| const floatingElements = document.querySelectorAll('.floating'); | |
| floatingElements.forEach((el, index) => { | |
| el.style.animationDelay = `${index * 0.5}s`; | |
| }); | |
| // Smooth scrolling for anchor links | |
| document.querySelectorAll('a[href^="#"]').forEach(anchor => { | |
| anchor.addEventListener('click', function (e) { | |
| e.preventDefault(); | |
| document.querySelector(this.getAttribute('href')).scrollIntoView({ | |
| behavior: 'smooth' | |
| }); | |
| }); | |
| }); | |
| </script> | |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=james123231/open-x-notes-ai" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |