thePR0M3TH3AN/seedPass
1
0
Fork 0
mirror of https://github.com/PR0M3TH3AN/SeedPass.git synced 2025-09-08 15:28:44 +00:00
Code Issues Packages Projects Releases Wiki Activity

update

Browse Source
This commit is contained in:
Keep Creating Online
2024-10-27 11:39:54 -04:00
parent 8b31dac1a6
commit 0005d7c165
2 changed files with 703 additions and 289 deletions
Download Patch File Download Diff File Expand all files Collapse all files

339
landing/index.html
View File

@@ -1,143 +1,322 @@
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Meta Tags and Title -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SeedPass - Secure Password Manager</title>
<!-- Stylesheets -->
<link rel="stylesheet" href="./style.css"> <!-- Relative path to style.css -->
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet">
<!-- Font Awesome for Icons -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" integrity="sha512-..." crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
integrity="sha512-p1olLJAT+hK1SDqkyP4WgzqZtyFjvKphQcHz41x2YZwRSL5qWfSxG6Pj8hXj9FV8p/2p4fe8bnYdOQ0Y4n1Ryg=="
crossorigin="anonymous"
referrerpolicy="no-referrer" />
</head>
<body>
<!-- Dark Mode Toggle -->
<div class="dark-mode-toggle">
<input type="checkbox" id="dark-mode-checkbox">
<input type="checkbox" id="dark-mode-checkbox" aria-label="Toggle Dark Mode">
<label for="dark-mode-checkbox">
<i class="fas fa-moon"></i>
<i class="fas fa-sun"></i>
<i class="fas fa-moon" aria-hidden="true"></i>
<i class="fas fa-sun" aria-hidden="true"></i>
<span class="toggle-ball"></span>
</label>
</div>
<!-- Header and Navigation -->
<header>
<nav class="navbar">
<nav class="navbar" role="navigation" aria-label="Main Navigation">
<div class="container">
<img src="https://raw.githubusercontent.com/PR0M3TH3AN/SeedPass/refs/heads/main/logo/png/SeedPass-Logo-05.png" alt="SeedPass Logo" class="logo">
<a href="#intro" class="logo-link">
<img src="https://raw.githubusercontent.com/PR0M3TH3AN/SeedPass/main/logo/png/SeedPass-Logo-05.png"
alt="SeedPass Logo" class="logo">
</a>
<!-- Hamburger Menu Toggle -->
<div class="menu-toggle" aria-label="Toggle navigation menu"><i class="fas fa-bars"></i></div>
<ul class="nav-links">
<li><a href="#intro">Home</a></li>
<li><a href="#features">Features</a></li>
<li><a href="#how-it-works">How It Works</a></li>
<li><a href="#disclaimer">Disclaimer</a></li>
<button class="menu-toggle" aria-label="Toggle navigation menu" aria-expanded="false">
<i class="fas fa-bars"></i>
</button>
<ul class="nav-links" role="menubar">
<li role="none"><a href="#intro" role="menuitem">Home</a></li>
<li role="none"><a href="#features" role="menuitem">Features</a></li>
<li role="none"><a href="#how-it-works" role="menuitem">How It Works</a></li>
<li role="none"><a href="#roadmap" role="menuitem">Roadmap</a></li>
<li role="none"><a href="#disclaimer" role="menuitem">Disclaimer</a></li>
</ul>
</div>
</nav>
</header>
<!-- Main Content -->
<main>
<section class="intro" id="intro">
<!-- Intro Section -->
<section class="intro" id="intro" aria-labelledby="intro-heading">
<div class="container">
<h1>SeedPass: Secure Password Manager</h1>
<h1 id="intro-heading">SeedPass: Secure Password Manager</h1>
<p><strong>SeedPass</strong> is a secure password generator and manager built on Bitcoin's BIP-85 standard. It uses deterministic key derivation to generate passwords that are never stored but can be easily regenerated when needed.</p>
<p>By integrating with the <strong>Nostr network</strong>, SeedPass ensures that your passwords are safe and accessible across devices.</p>
<a href="https://github.com/PR0M3TH3AN/SeedPass" class="btn-primary cta-button"><i class="fas fa-download"></i> Get Started</a>
<a href="https://github.com/PR0M3TH3AN/SeedPass" class="btn-primary cta-button"><i class="fas fa-download" aria-hidden="true"></i> Get Started</a>
</div>
</section>
<section class="features" id="features">
<!-- Features Section -->
<section class="features" id="features" aria-labelledby="features-heading">
<div class="container">
<h2>Features</h2>
<h2 class="section-title" id="features-heading">Features</h2>
<ul>
<li><i class="fas fa-key"></i> Deterministic password generation using BIP-85</li>
<li><i class="fas fa-lock"></i> Encrypted local storage for seeds and sensitive data</li>
<li><i class="fas fa-network-wired"></i> Nostr integration for secure backup and retrieval</li>
<li><i class="fas fa-check-circle"></i> Checksum verification for integrity checks</li>
<li><i class="fas fa-terminal"></i> User-friendly command-line interface</li>
<li><i class="fas fa-key" aria-hidden="true"></i> Deterministic password generation using BIP-85</li>
<li><i class="fas fa-lock" aria-hidden="true"></i> Encrypted local storage for seeds and sensitive data</li>
<li><i class="fas fa-network-wired" aria-hidden="true"></i> Nostr relay integration for secure backup and retrieval</li>
<li><i class="fas fa-exchange-alt" aria-hidden="true"></i> Seed/Fingerprint switching for managing multiple profiles</li>
<li><i class="fas fa-seedling" aria-hidden="true"></i> Bring your own seed or generate one on demand</li>
<li><i class="fas fa-terminal" aria-hidden="true"></i> User-friendly command-line interface</li>
</ul>
</div>
</section>
<section class="how-it-works" id="how-it-works">
<!-- How It Works Section -->
<section class="how-it-works" id="how-it-works" aria-labelledby="how-it-works-heading">
<div class="container">
<h2>How SeedPass Works</h2>
<p>SeedPass uses Bitcoin's BIP-85 standard for deterministic password generation. This means your passwords are not stored but can be regenerated using your master seed and specific indices. Below is a simplified view of how the seed generation works:</p>
<h2 class="section-title" id="how-it-works-heading">How SeedPass Works</h2>
<p>SeedPass uses Bitcoin's BIP-85 standard for deterministic password generation. This means your passwords are not stored but can be regenerated using your master seed and specific indices.</p>
<h3 class="subsection-title">BIP-85 Derivation Tree</h3>
<p>The BIP-85 standard allows you to derive multiple child seeds from a single master seed. Each child seed can then be used to generate secure passwords. Here's a simplified illustration:</p>
<pre class="directory-tree">
<span class="parent" data-tooltip="This is the master seed">Parent_Seed</span>
├── <span class="child" data-tooltip="Child seed for Index 0">Child_Seed_1 (Index: 0)</span>
│ ├── <span class="grandchild" data-tooltip="Password for Service A">Grandchild_Seed_1 (Password)</span>
│ └── <span class="grandchild" data-tooltip="Password for Service B">Grandchild_Seed_2 (Password)</span>
├── <span class="child" data-tooltip="Child seed for Index 1">Child_Seed_2 (Index: 1)</span>
│ ├── <span class="grandchild" data-tooltip="Password for Service C">Grandchild_Seed_1 (Password)</span>
│ └── <span class="grandchild" data-tooltip="Password for Service D">Grandchild_Seed_2 (Password)</span>
└── <span class="child" data-tooltip="Child seed for Index 2">Child_Seed_3 (Index: 2)</span>
├── <span class="grandchild" data-tooltip="Password for Service E">Grandchild_Seed_1 (Password)</span>
└── <span class="grandchild" data-tooltip="Password for Service F">Grandchild_Seed_2 (Password)</span>
<span class="parent" data-tooltip="This is your master seed" tabindex="0">Master_Seed</span>
├── <span class="child" data-tooltip="Derived seed at index 0" tabindex="0">Child_Seed_0</span>
│ └── <span class="grandchild" data-tooltip="Password for Service A" tabindex="0">Password_A</span>
├── <span class="child" data-tooltip="Derived seed at index 1" tabindex="0">Child_Seed_1</span>
│ └── <span class="grandchild" data-tooltip="Password for Service B" tabindex="0">Password_B</span>
├── <span class="child" data-tooltip="Derived seed at index 2" tabindex="0">Child_Seed_2</span>
│ └── <span class="grandchild" data-tooltip="Password for Service C" tabindex="0">Password_C</span>
└── <span class="child" data-tooltip="...and so on" tabindex="0">...</span>
</pre>
<p>Not only does this system provide you with secure passwords, but it can also be extended to manage dependent users, such as children or elderly family members, where you have access to all their accounts but keep everything secure under one parent seed.</p>
<h3 class="subsection-title">Seed/Fingerprint Switching</h3>
<p>SeedPass allows you to manage multiple seed profiles (fingerprints). You can switch between different seeds to compartmentalize your passwords.</p>
<p>For example, under your master seed, you can create child seeds for each dependent, and further generate unique passwords for each of their online accounts:</p>
<h3 class="subsection-title">Nostr Relay Integration</h3>
<p>By integrating with the Nostr network, SeedPass securely backs up your encrypted password index to Nostr relays, allowing you to retrieve your index on multiple devices without compromising security.</p>
<pre class="directory-tree">
<span class="parent" data-tooltip="This is the master seed">Parent_Seed</span>
├── <span class="child" data-tooltip="Child seed for Kid's Account">Child_Seed_1 (Kid's Account)</span>
│ ├── <span class="grandchild" data-tooltip="Email Password">Grandchild_Seed_1 (Email Password)</span>
│ └── <span class="grandchild" data-tooltip="Social Media Password">Grandchild_Seed_2 (Social Media Password)</span>
├── <span class="child" data-tooltip="Child seed for Elderly Parent's Account">Child_Seed_2 (Elderly Parent's Account)</span>
│ ├── <span class="grandchild" data-tooltip="Banking Password">Grandchild_Seed_1 (Banking Password)</span>
│ └── <span class="grandchild" data-tooltip="Medical Portal Password">Grandchild_Seed_2 (Medical Portal Password)</span>
<h3 class="subsection-title">Bring Your Own Seed</h3>
<p>You can bring your own BIP-39 seed or generate a new one within SeedPass. This gives you flexibility and control over your master seed.</p>
<h3 class="subsection-title">Command-Line Interface</h3>
<p>Interact with SeedPass using a user-friendly CLI. Here's an example of the current interface:</p>
<pre class="code-block">
(venv) user@debian:~/SeedPass/src$ python main.py
Available Fingerprints:
1. 31DD880A523B9759
2. Add a new fingerprint
Select a fingerprint by number: 1
Enter your master password:
Fingerprint 31DD880A523B9759 selected and managers initialized.
Select an option:
1. Generate a New Password and Add to Index
2. Retrieve a Password from Index
3. Modify an Existing Entry
4. Verify Script Checksum
5. Post Encrypted Index to Nostr
6. Retrieve Encrypted Index from Nostr
7. Display Nostr Public Key (npub)
8. Backup/Reveal Parent Seed
9. Switch Fingerprint
10. Add a New Fingerprint
11. Remove an Existing Fingerprint
12. List All Fingerprints
13. Exit
Enter your choice (1-13): 1
Enter the website name: newsitename
Enter the username (optional):
Enter the URL (optional):
Enter desired password length (default 16):
[+] Entry added successfully at index 0.
[+] Password generated and indexed with ID 0.
Password for newsitename: 06~8Eo(~D8t+G7D}
</pre>
<p>This way, you can manage their passwords securely without storing them in a cloud-based manager, ensuring that only you or trusted parties have access.</p>
</div>
</section>
<section class="disclaimer" id="disclaimer">
<!-- Roadmap Section -->
<section class="roadmap" id="roadmap" aria-labelledby="roadmap-heading">
<div class="container">
<h2>Disclaimer</h2>
<h2 class="section-title" id="roadmap-heading">Roadmap</h2>
<div class="timeline">
<!-- Phase 1 -->
<div class="timeline-item">
<div class="timeline-icon" aria-hidden="true"><i class="fas fa-rocket"></i></div>
<div class="timeline-content">
<h3>Phase 1: Core Functionality and Security Enhancements</h3>
<p><strong>Goal:</strong> Establish a robust foundation with individual entry management, secure seed handling, and seamless Nostr integration.</p>
<ul>
<li>Configuration File Management</li>
<li>Individual JSON File Management</li>
<li>Enhanced JSON Schema Integration</li>
<li>Nostr Integration Enhancements</li>
<li>Backup and Restore Index Option</li>
<li>Security Enhancements</li>
<li>Comprehensive Testing and Security Auditing</li>
<li>Managed Users’ Data Loading</li>
</ul>
</div>
</div>
<!-- Phase 2 -->
<div class="timeline-item">
<div class="timeline-icon" aria-hidden="true"><i class="fas fa-shield-alt"></i></div>
<div class="timeline-content">
<h3>Phase 2: Enhanced Security and Data Management</h3>
<p><strong>Goal:</strong> Strengthen security features and improve data management capabilities with the new individual entry system.</p>
<ul>
<li>Advanced Data Fields and New Kinds</li>
<li>Family Password Management</li>
<li>Easy BIP39 Seed Generation for Various Use Cases</li>
<li>Nostr Public/Private Key Pair Generation</li>
</ul>
</div>
</div>
<!-- Phase 3 -->
<div class="timeline-item">
<div class="timeline-icon" aria-hidden="true"><i class="fas fa-terminal"></i></div>
<div class="timeline-content">
<h3>Phase 3: Advanced CLI Functionalities</h3>
<p><strong>Goal:</strong> Develop a sophisticated Command-Line Interface (CLI) tailored for the individual entry system, enhancing automation and customization.</p>
<ul>
<li>Advanced CLI Commands for Entry Management</li>
<li>Custom Relays Configuration via CLI</li>
<li>Secure Clipboard Operations</li>
</ul>
</div>
</div>
<!-- Phase 4 -->
<div class="timeline-item">
<div class="timeline-icon" aria-hidden="true"><i class="fas fa-sync-alt"></i></div>
<div class="timeline-content">
<h3>Phase 4: Data Management Enhancements and Integrations</h3>
<p><strong>Goal:</strong> Further improve data management capabilities and integrate with other platforms using the individual entry system.</p>
<ul>
<li>Additional Integrations</li>
<li>Scalability Enhancements</li>
</ul>
</div>
</div>
<!-- Phase 5 -->
<div class="timeline-item">
<div class="timeline-icon" aria-hidden="true"><i class="fas fa-book"></i></div>
<div class="timeline-content">
<h3>Phase 5: Documentation, Testing, and Finalization</h3>
<p><strong>Goal:</strong> Ensure comprehensive documentation, robust testing, and finalize the application for release with the new entry management system.</p>
<ul>
<li>Provide Comprehensive Documentation</li>
<li>Enhance Logging and Monitoring</li>
<li>Ensure Comprehensive Testing</li>
<li>Prioritize Security Best Practices</li>
</ul>
</div>
</div>
<!-- Future Phases -->
<div class="timeline-item">
<div class="timeline-icon" aria-hidden="true"><i class="fas fa-forward"></i></div>
<div class="timeline-content">
<h3>Future Phases (Beyond Initial Roadmap)</h3>
<p><strong>Goal:</strong> Continuous improvement and feature expansion based on user feedback and emerging needs.</p>
<ul>
<li>Continuous Improvement and Feature Expansion</li>
<li>Scalability and Performance Optimization</li>
</ul>
</div>
</div>
</div>
</div>
</section>
<!-- Disclaimer Section -->
<section class="disclaimer" id="disclaimer" aria-labelledby="disclaimer-heading">
<div class="container">
<h2 class="section-title" id="disclaimer-heading">Disclaimer</h2>
<p><strong>⚠️ Use with Caution:</strong> Please read the following terms carefully.</p>
<ul>
<li><i class="fas fa-info-circle"></i><strong>No Guarantees:</strong><span> SeedPass is provided "as is" without any warranties, express or implied. We do not guarantee that the software is free from errors, bugs, or vulnerabilities.</span></li>
<li><i class="fas fa-info-circle"></i><strong>Security Risks:</strong><span> While SeedPass employs robust security measures, no system can be completely secure. Use it at your own risk, and ensure you have proper backups of your data.</span></li>
<li><i class="fas fa-info-circle"></i><strong>Not Professional Advice:</strong><span> SeedPass is not a substitute for professional security or cryptographic advice. Consult with a security expert before using it in critical or sensitive environments.</span></li>
<li><i class="fas fa-info-circle"></i><strong>Liability Limitation:</strong><span> We are not liable for any damages, losses, or other liabilities arising from the use or inability to use SeedPass.</span></li>
<li><i class="fas fa-info-circle"></i><strong>Regular Backups:</strong><span> Always maintain regular backups of your seeds and sensitive data to prevent loss in case of unforeseen issues.</span></li>
<li><i class="fas fa-info-circle"></i><strong>User Responsibility:</strong><span> Users are responsible for the secure storage and management of their master seeds and any derived seeds. Unauthorized access to these seeds can compromise all associated passwords and accounts.</span></li>
<li><i class="fas fa-info-circle"></i><strong>Updates and Maintenance:</strong><span> While we strive to keep SeedPass updated and secure, we cannot promise timely updates or maintenance. Users should stay informed about the latest security practices and updates.</span></li>
<li>
<i class="fas fa-info-circle" aria-hidden="true"></i>
<strong>No Guarantees:</strong>
<span> SeedPass is provided "as is" without any warranties, express or implied. We do not guarantee that the software is free from errors, bugs, or vulnerabilities.</span>
</li>
<li>
<i class="fas fa-info-circle" aria-hidden="true"></i>
<strong>Security Risks:</strong>
<span> While SeedPass employs robust security measures, no system can be completely secure. Use it at your own risk, and ensure you have proper backups of your data.</span>
</li>
<li>
<i class="fas fa-info-circle" aria-hidden="true"></i>
<strong>Not Professional Advice:</strong>
<span> SeedPass is not a substitute for professional security or cryptographic advice. Consult with a security expert before using it in critical or sensitive environments.</span>
</li>
<li>
<i class="fas fa-info-circle" aria-hidden="true"></i>
<strong>Liability Limitation:</strong>
<span> We are not liable for any damages, losses, or other liabilities arising from the use or inability to use SeedPass.</span>
</li>
<li>
<i class="fas fa-info-circle" aria-hidden="true"></i>
<strong>Regular Backups:</strong>
<span> Always maintain regular backups of your seeds and sensitive data to prevent loss in case of unforeseen issues.</span>
</li>
<li>
<i class="fas fa-info-circle" aria-hidden="true"></i>
<strong>User Responsibility:</strong>
<span> Users are responsible for the secure storage and management of their master seeds and any derived seeds. Unauthorized access to these seeds can compromise all associated passwords and accounts.</span>
</li>
<li>
<i class="fas fa-info-circle" aria-hidden="true"></i>
<strong>Updates and Maintenance:</strong>
<span> While we strive to keep SeedPass updated and secure, we cannot promise timely updates or maintenance. Users should stay informed about the latest security practices and updates.</span>
</li>
</ul>
<p>Please ensure you understand the risks involved and take appropriate measures to secure your data. By using SeedPass, you acknowledge and agree to these terms.</p>
</div>
</section>
</main>
<footer>
<div class="container">
<div class="social-media">
<!-- Nostr Link with Inline SVG -->
<a href="https://primal.net/p/npub15jnttpymeytm80hatjqcvhhqhzrhx6gxp8pq0wn93rhnu8s9h9dsha32lx" target="_blank" aria-label="Nostr Profile">
<svg
class="nostr-icon"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 620 620"
fill="currentColor" <!-- Ensure fill is set to currentColor -->
aria-labelledby="nostrIconTitle"
role="img"
>
<title id="nostrIconTitle">Nostr Logo</title>
<path d="M620 270.227V597.655C620 609.968 610.081 619.961 597.859 619.961H332.161C319.938 619.961 310.02 609.968 310.02 597.655V536.678C311.23 461.931 319.079 390.332 335.558 357.759C345.438 338.168 361.722 327.506 380.427 321.802C415.768 311.102 477.779 318.419 504.099 317.16C504.099 317.16 583.605 320.346 583.605 274.987C583.605 238.48 548.07 241.352 548.07 241.352C508.902 242.374 479.068 239.699 459.738 232.028C427.365 219.203 426.272 195.678 426.155 187.81C424.554 96.934 291.549 86.0368 174.359 108.579C46.2354 133.127 175.765 318.143 175.765 565.121V598.088C175.531 610.204 165.807 620 153.702 620H22.1415C9.91874 620 0 610.008 0 597.694V31.3934C0 19.08 9.91874 9.08757 22.1415 9.08757H145.813C158.036 9.08757 167.955 19.08 167.955 31.3934C167.955 49.6866 188.378 59.8756 203.139 49.2145C247.617 17.113 304.709 0 368.595 0C511.714 0 619.922 84.0305 619.922 270.227H620ZM382.419 203.782C382.419 177.424 361.214 156.062 335.051 156.062C308.887 156.062 287.683 177.424 287.683 203.782C287.683 230.14 308.887 251.501 335.051 251.501C361.214 251.501 382.419 230.14 382.419 203.782Z" />
</svg>
</a>
<!-- GitHub Link -->
<a href="https://github.com/PR0M3TH3AN/SeedPass" target="_blank" aria-label="GitHub Repository">
<i class="fab fa-github"></i>
</a>
</div>
<p>&copy; 2024 SeedPass. All rights reserved.</p>
<!-- Footer -->
<footer>
<div class="container">
<div class="social-media">
<!-- Nostr Link with Inline SVG -->
<a href="https://primal.net/p/npub15jnttpymeytm80hatjqcvhhqhzrhx6gxp8pq0wn93rhnu8s9h9dsha32lx" target="_blank" aria-label="Nostr Profile" rel="noopener noreferrer">
<!-- SVG code as before -->
<svg
class="nostr-icon"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 620 620"
fill="currentColor"
aria-labelledby="nostrIconTitle"
role="img"
tabindex="0"
>
<title id="nostrIconTitle">Nostr Logo</title>
<path d="M620 270.227V597.655C620 609.968 610.081 619.961 597.859 619.961H332.161C319.938 619.961 310.02 609.968 310.02 597.655V536.678C311.23 461.931 319.079 390.332 335.558 357.759C345.438 338.168 361.722 327.506 380.427 321.802C415.768 311.102 477.779 318.419 504.099 317.16C504.099 317.16 583.605 320.346 583.605 274.987C583.605 238.48 548.07 241.352 548.07 241.352C508.902 242.374 479.068 239.699 459.738 232.028C427.365 219.203 426.272 195.678 426.155 187.81C424.554 96.934 291.549 86.0368 174.359 108.579C46.2354 133.127 175.765 318.143 175.765 565.121V598.088C175.531 610.204 165.807 620 153.702 620H22.1415C9.91874 620 0 610.008 0 597.694V31.3934C0 19.08 9.91874 9.08757 22.1415 9.08757H145.813C158.036 9.08757 167.955 19.08 167.955 31.3934C167.955 49.6866 188.378 59.8756 203.139 49.2145C247.617 17.113 304.709 0 368.595 0C511.714 0 619.922 84.0305 619.922 270.227H620ZM382.419 203.782C382.419 177.424 361.214 156.062 335.051 156.062C308.887 156.062 287.683 177.424 287.683 203.782C287.683 230.14 308.887 251.501 335.051 251.501C361.214 251.501 382.419 230.14 382.419 203.782Z" />
</svg>
</a>
<!-- GitHub Link -->
<a href="https://github.com/PR0M3TH3AN/SeedPass" target="_blank" aria-label="GitHub Repository" rel="noopener noreferrer">
<i class="fab fa-github"></i>
</a>
</div>
</footer>
<p>&copy; 2024 SeedPass. All rights reserved.</p>
</div>
</footer>
<!-- JavaScript -->
<script src="./script.js"></script> <!-- Relative path to script.js -->
</body>
</html>

635
landing/style.css
View File

@@ -1,3 +1,67 @@
/* CSS Variables for Future Scalability */
:root {
/* Primary Colors */
--primary-color: #283c4f;
--secondary-color: #e94a39;
--accent-color: #6e5494;
/* Background Colors */
--background-light: #f4f4f9;
--background-section: #ffffff;
--background-disclaimer: #fdf2f2;
--background-dark: #0d1117;
--background-dark-section: #1a1a1a;
--background-dark-disclaimer: #1e1e1e;
/* Text Colors */
--text-primary: #283c4f;
--text-secondary: #24292e;
--text-light: #c9d1d9;
--text-muted: #555;
--text-dark-mode: #d1d1d1;
--text-disclaimer: #777;
--text-disclaimer-hover: #555;
/* Element Colors */
--cta-button-bg: var(--secondary-color);
--cta-button-hover-bg: #d43d2a;
--cta-button-dark-hover-bg: #2ea043;
--disclaimer-border: var(--secondary-color);
--disclaimer-hover-bg: #fde0e0;
--footer-bg: var(--primary-color);
--footer-text: #ffffff;
/* Icon Colors */
--icon-color: var(--secondary-color);
--icon-hover-color: #e94a39;
/* Tooltip Colors */
--tooltip-bg: #24292e;
--tooltip-text: #ffffff;
/* Shadows */
--shadow-light: rgba(0, 0, 0, 0.1);
--shadow-dark: rgba(255, 255, 255, 0.05);
}
/* Dark Mode Overrides */
body.dark-mode {
--background-light: #0d1117;
--background-section: #0d1117;
--background-disclaimer: #1e1e1e;
--text-primary: #c9d1d9;
--text-secondary: #c9d1d9;
--cta-button-bg: var(--secondary-color);
--cta-button-hover-bg: #2ea043;
--disclaimer-border: var(--secondary-color);
--disclaimer-hover-bg: #444;
--footer-bg: #0d1117;
--footer-text: #ffffff;
--tooltip-bg: #24292e;
--tooltip-text: #ffffff;
--shadow-light: rgba(255, 255, 255, 0.05);
}
/* General Reset */
* {
margin: 0;
@@ -5,18 +69,22 @@
box-sizing: border-box;
}
html {
font-size: 16px; /* Base font size for rem calculations */
}
body {
font-family: 'Roboto', sans-serif;
line-height: 1.6;
background-color: #f4f4f9;
color: #283c4f;
background-color: var(--background-light);
color: var(--text-primary);
transition: background-color 0.3s, color 0.3s;
}
/* Dark Mode */
body.dark-mode {
background-color: #0d1117;
color: #c9d1d9;
background-color: var(--background-light);
color: var(--text-light);
}
/* Dark Mode Toggle */
@@ -44,7 +112,7 @@ body.dark-mode {
position: relative;
}
.dark-mode-toggle label:after {
.dark-mode-toggle label::after {
content: '';
position: absolute;
top: 2px;
@@ -57,27 +125,27 @@ body.dark-mode {
}
.dark-mode-toggle input:checked + label {
background: #6e5494;
background: var(--accent-color);
}
.dark-mode-toggle input:checked + label:after {
.dark-mode-toggle input:checked + label::after {
left: calc(100% - 2px);
transform: translateX(-100%);
}
.dark-mode-toggle label:active:after {
.dark-mode-toggle label:active::after {
width: 28px;
}
/* Navbar */
.navbar {
background-color: #283c4f;
background-color: var(--primary-color);
padding: 20px 0;
position: sticky;
top: 0;
width: 100%;
z-index: 999;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
box-shadow: 0 2px 4px var(--shadow-light);
transition: background-color 0.3s;
}
@@ -113,10 +181,22 @@ body.dark-mode {
text-decoration: none;
font-weight: 500;
transition: color 0.3s;
font-size: 1rem;
}
.nav-links a:hover {
color: #e94a39;
.nav-links a:hover,
.nav-links a:focus {
color: var(--secondary-color);
outline: none; /* Remove default focus outline */
}
/* Focus States for Accessibility */
.nav-links a:focus,
.cta-button:focus,
.menu-toggle:focus,
footer .social-media a:focus {
outline: 2px solid var(--secondary-color);
outline-offset: 4px;
}
/* Hamburger Menu Toggle */
@@ -125,6 +205,12 @@ body.dark-mode {
font-size: 1.5rem;
color: #ffffff;
cursor: pointer;
background: none;
border: none;
}
.menu-toggle:focus {
outline: none;
}
@media screen and (max-width: 768px) {
@@ -147,11 +233,51 @@ body.dark-mode {
}
}
/* Section Titles */
.section-title {
text-align: center;
font-size: clamp(1.5rem, 2vw, 2.5rem);
color: var(--text-secondary);
margin-bottom: 50px;
position: relative;
}
.section-title::after {
content: '';
width: 60px;
height: 4px;
background-color: var(--secondary-color);
display: block;
margin: 10px auto 0 auto;
border-radius: 2px;
}
/* Subsection Titles Styling */
.subsection-title {
font-size: 1.75rem;
margin-top: 40px;
margin-bottom: 20px;
color: var(--text-secondary);
text-align: center;
position: relative;
}
/* Decorative Underline for Subsection Titles */
.subsection-title::after {
content: '';
width: 48px;
height: 4px;
background-color: var(--secondary-color);
display: block;
margin: 8px auto 0 auto;
border-radius: 2px;
}
/* Hero/Intro Section */
.intro {
text-align: center;
padding: 120px 20px;
background: linear-gradient(135deg, #283c4f 0%, #1a2733 100%);
background: linear-gradient(135deg, var(--primary-color) 0%, #1a2733 100%);
color: #ffffff;
position: relative;
overflow: hidden;
@@ -175,7 +301,7 @@ body.dark-mode {
}
.intro h1 {
font-size: 3rem;
font-size: clamp(2rem, 5vw, 3rem);
margin-bottom: 20px;
animation: fadeInDown 1s ease-out;
}
@@ -190,51 +316,34 @@ body.dark-mode {
display: inline-flex;
align-items: center;
justify-content: center;
background-color: #e94a39;
background-color: var(--cta-button-bg);
color: #ffffff;
padding: 15px 30px;
font-size: 1.2rem;
font-weight: bold;
text-decoration: none;
border-radius: 50px;
border: none;
transition: background-color 0.3s, transform 0.3s;
border: none;
}
.cta-button i {
margin-right: 10px;
}
.cta-button:hover {
background-color: #d43d2a;
.cta-button:hover,
.cta-button:focus {
background-color: var(--cta-button-hover-bg);
transform: translateY(-3px);
}
/* Features Section */
.features {
background-color: #f6f8fa;
background-color: var(--background-section);
padding: 80px 20px;
transition: background-color 0.3s;
}
.features h2 {
text-align: center;
font-size: 2.5rem;
color: #24292e;
margin-bottom: 50px;
position: relative;
}
.features h2::after {
content: '';
width: 60px;
height: 4px;
background-color: #e94a39;
display: block;
margin: 10px auto 0 auto;
border-radius: 2px;
}
.features ul {
max-width: 1000px;
margin: 0 auto;
@@ -242,14 +351,14 @@ body.dark-mode {
padding: 0;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
grid-gap: 30px;
gap: 30px;
}
.features ul li {
background-color: #ffffff;
padding: 30px 20px;
border-radius: 12px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
box-shadow: 0 4px 12px var(--shadow-light);
transition: transform 0.3s, box-shadow 0.3s;
display: flex;
align-items: center;
@@ -257,58 +366,41 @@ body.dark-mode {
.features ul li i {
font-size: 2rem;
color: #e94a39;
color: var(--secondary-color);
margin-right: 20px;
}
.features ul li:hover {
.features ul li:hover,
.features ul li:focus-within {
transform: translateY(-5px);
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
box-shadow: 0 8px 16px var(--shadow-light);
}
/* How It Works Section */
.how-it-works {
padding: 80px 20px;
background-color: #f6f8fa;
background-color: var(--background-section);
animation: fadeInUp 1s ease-out;
transition: background-color 0.3s;
}
.how-it-works h2 {
text-align: center;
font-size: 2.5rem;
color: #24292e;
margin-bottom: 40px;
position: relative;
}
.how-it-works h2::after {
content: '';
width: 60px;
height: 4px;
background-color: #e94a39;
display: block;
margin: 10px auto 0 auto;
border-radius: 2px;
}
.how-it-works p {
max-width: 800px;
margin: 0 auto 30px auto;
font-size: 1.1rem;
text-align: center;
color: #24292e;
color: var(--text-secondary);
}
.directory-tree {
background-color: #f6f8fa;
border-left: 4px solid #e94a39;
background-color: var(--background-section);
border-left: 4px solid var(--secondary-color);
padding: 20px;
margin: 20px auto;
max-width: 800px;
overflow-x: auto;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
box-shadow: 0 2px 8px var(--shadow-light);
font-family: 'Courier New', Courier, monospace;
font-size: 1rem;
line-height: 1.5;
@@ -316,28 +408,18 @@ body.dark-mode {
transition: transform 0.3s, background-color 0.3s, border-left 0.3s;
}
.directory-tree:hover {
.directory-tree:hover,
.directory-tree:focus-within {
transform: scale(1.02);
}
.directory-tree::before {
content: '';
position: absolute;
top: 10px;
left: 10px;
width: 20px;
height: 20px;
background-image: url('https://icons.iconarchive.com/icons/icons8/windows-8/256/Content-folder-icon.png');
background-size: cover;
}
.directory-tree .parent {
color: #e94a39;
color: var(--secondary-color);
font-weight: bold;
}
.directory-tree .child {
color: #24292e;
color: var(--text-secondary);
margin-left: 20px;
}
@@ -357,8 +439,8 @@ body.dark-mode {
left: 50%;
bottom: 100%;
transform: translateX(-50%);
background-color: #24292e;
color: #ffffff;
background-color: var(--tooltip-bg);
color: var(--tooltip-text);
padding: 5px 10px;
border-radius: 4px;
white-space: nowrap;
@@ -370,30 +452,219 @@ body.dark-mode {
font-size: 0.9rem;
}
.directory-tree span[data-tooltip]:hover::after {
.directory-tree span[data-tooltip]:hover::after,
.directory-tree span[data-tooltip]:focus::after {
opacity: 1;
visibility: visible;
}
/* Code Block Styling */
.code-block {
background-color: #1e1e1e;
color: #dcdcdc;
padding: 15px;
border-radius: 5px;
overflow-x: auto;
font-family: 'Courier New', Courier, monospace;
font-size: 0.95rem;
line-height: 1.5;
margin: 20px auto;
max-width: 800px;
box-shadow: 0 2px 8px var(--shadow-light);
}
/* Roadmap Timeline Styles */
.timeline {
position: relative;
margin: 50px 0;
padding: 0 20px;
overflow: hidden;
}
.timeline:before {
content: '';
position: absolute;
left: 50%;
top: 0;
bottom: 0;
width: 4px;
background: var(--secondary-color);
transform: translateX(-50%);
}
.timeline-item {
position: relative;
width: 45%;
padding: 20px;
box-sizing: border-box;
}
.timeline-item:nth-child(odd) {
left: 0;
}
.timeline-item:nth-child(even) {
left: 55%;
}
.timeline-item .timeline-icon {
position: absolute;
top: 20px;
right: -30px;
background: var(--secondary-color);
color: #fff;
width: 60px;
height: 60px;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
z-index: 1;
}
.timeline-item:nth-child(even) .timeline-icon {
left: -30px;
right: auto;
}
.timeline-item .timeline-content {
background: var(--background-section);
padding: 20px;
border-radius: 8px;
position: relative;
box-shadow: 0 2px 8px var(--shadow-light);
}
.timeline-item:nth-child(odd) .timeline-content::before {
content: '';
position: absolute;
top: 20px;
right: -15px;
border-width: 8px 0 8px 15px;
border-style: solid;
border-color: transparent transparent transparent var(--background-section);
z-index: 0;
}
.timeline-item:nth-child(even) .timeline-content::before {
content: '';
position: absolute;
top: 20px;
left: -15px;
border-width: 8px 15px 8px 0;
border-style: solid;
border-color: transparent var(--background-section) transparent transparent;
z-index: 0;
}
.timeline-item .timeline-content h3 {
font-size: 1.5rem;
margin-bottom: 10px;
color: var(--secondary-color);
}
.timeline-item .timeline-content p {
font-size: 1rem;
margin-bottom: 10px;
color: var(--text-secondary);
}
.timeline-item .timeline-content ul {
list-style: disc;
padding-left: 20px;
}
.timeline-item .timeline-content ul li {
margin-bottom: 5px;
color: var(--text-secondary);
}
@media screen and (max-width: 768px) {
.timeline:before {
left: 20px;
}
.timeline-item {
width: 100%;
left: 0 !important;
padding-left: 50px;
padding-right: 25px;
margin-bottom: 30px;
}
.timeline-item .timeline-icon {
top: auto;
left: 0;
right: auto;
}
.timeline-item:nth-child(even) .timeline-icon {
left: 0;
}
.timeline-item .timeline-content {
padding-left: 70px;
}
.timeline-item .timeline-content::before {
left: 45px;
border-width: 8px 8px 8px 0;
border-color: transparent var(--background-section) transparent transparent;
}
/* Adjust footer icons size for smaller screens */
footer .social-media a i.fab.fa-github,
footer .social-media a svg.nostr-icon {
width: 20px;
height: 20px;
}
}
/* Dark Mode for Roadmap Timeline */
body.dark-mode .timeline:before {
background: var(--secondary-color);
}
body.dark-mode .timeline-item .timeline-content {
background: var(--background-dark-section);
}
body.dark-mode .timeline-item:nth-child(odd) .timeline-content::before {
border-color: transparent transparent transparent var(--background-dark-section);
}
body.dark-mode .timeline-item:nth-child(even) .timeline-content::before {
border-color: transparent var(--background-dark-section) transparent transparent;
}
body.dark-mode .timeline-item .timeline-content {
color: var(--text-light);
}
body.dark-mode .timeline-item .timeline-icon {
background: var(--secondary-color);
color: #fff;
}
/* Disclaimer Section */
.disclaimer {
padding: 60px 0;
background-color: #fdf2f2;
background-color: var(--background-disclaimer);
transition: background-color 0.3s ease;
}
.disclaimer .container {
background-color: #fff;
background-color: #ffffff;
border-radius: 10px;
padding: 40px;
max-width: 900px;
margin: 0 auto;
box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.1);
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
transition: background-color 0.3s ease, color 0.3s ease;
}
.disclaimer h2 {
color: #e74c3c;
color: var(--secondary-color);
font-size: 2.5rem;
margin-bottom: 20px;
text-align: center;
@@ -403,7 +674,7 @@ body.dark-mode {
.disclaimer p {
font-size: 1.1rem;
line-height: 1.8;
color: #555;
color: var(--text-muted);
margin-bottom: 20px;
text-align: center;
}
@@ -421,19 +692,20 @@ body.dark-mode {
display: flex;
align-items: flex-start;
padding: 20px;
border-left: 4px solid #e74c3c;
background-color: #fdf2f2;
border-left: 4px solid var(--disclaimer-border);
background-color: var(--background-disclaimer);
border-radius: 8px;
transition: background-color 0.3s ease, color 0.3s ease;
}
.disclaimer ul li:hover {
background-color: #fde0e0;
.disclaimer ul li:hover,
.disclaimer ul li:focus-within {
background-color: var(--disclaimer-hover-bg);
}
.disclaimer ul li i {
font-size: 1.5rem;
color: #e74c3c;
color: var(--secondary-color);
margin-right: 15px;
margin-top: 5px;
}
@@ -445,66 +717,23 @@ body.dark-mode {
}
.disclaimer ul li span {
color: #777;
color: var(--text-muted);
line-height: 1.6;
}
.disclaimer ul li:hover span {
color: #555;
}
/* Footer Info */
.disclaimer p:last-child {
margin-top: 30px;
font-size: 1rem;
text-align: center;
color: #666;
}
/* Dark Mode for Disclaimer Section */
body.dark-mode .disclaimer {
background-color: #1e1e1e;
}
body.dark-mode .disclaimer .container {
background-color: #2a2a2a;
color: #d1d1d1;
box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.4);
}
body.dark-mode .disclaimer ul li {
background-color: #333;
border-left: 4px solid #e74c3c;
}
body.dark-mode .disclaimer ul li:hover {
background-color: #444;
}
body.dark-mode .disclaimer ul li i {
color: #e74c3c;
}
body.dark-mode .disclaimer ul li strong {
color: #f0f0f0;
}
body.dark-mode .disclaimer ul li span {
color: #b0b0b0;
}
body.dark-mode .disclaimer p {
color: #cfcfcf;
.disclaimer ul li:hover span,
.disclaimer ul li:focus-within span {
color: var(--text-secondary);
}
/* Footer */
footer {
background-color: #24292e;
background-color: var(--footer-bg);
padding: 30px 20px;
text-align: center;
font-size: 0.9rem;
color: white;
transition: background-color 0.3s, color 0.3s; /* Added transition for consistency */
color: var(--footer-text);
transition: background-color 0.3s, color 0.3s;
}
footer .container {
@@ -521,7 +750,7 @@ footer .social-media {
}
footer .social-media a {
color: white;
color: var(--footer-text);
margin: 0 10px;
font-size: 1.2rem;
transition: color 0.3s, transform 0.3s;
@@ -531,40 +760,43 @@ footer .social-media a {
text-decoration: none;
}
footer .social-media a:hover {
color: #e94a39;
footer .social-media a:hover,
footer .social-media a:focus {
color: var(--secondary-color);
transform: scale(1.1);
}
footer .social-media a:focus {
outline: none;
}
/* Custom Nostr Icon Styling */
.nostr-icon {
width: 24px;
height: 24px;
fill: currentColor; /* Inherit color from parent link */
fill: currentColor;
transition: fill 0.3s, transform 0.3s;
display: inline-block;
vertical-align: middle; /* Align vertically with GitHub icon */
vertical-align: middle;
}
/* Adjust Icon Color in Dark Mode */
body.dark-mode .nostr-icon {
/* No filter needed as color is inherited */
/* If the SVG doesn't display correctly, you can uncomment the next line */
/* filter: brightness(0) invert(1); */
.nostr-icon:focus {
outline: none;
}
/* GitHub Icon Styling */
.social-media a i.fab.fa-github {
font-size: 24px;
font-size: 1.5rem;
transition: color 0.3s, transform 0.3s;
width: 24px; /* Ensure consistent sizing */
height: 24px; /* Ensure consistent sizing */
width: 24px;
height: 24px;
}
/* Ensure both icons align vertically */
.social-media a,
.social-media a img,
.social-media a i {
.social-media a i,
.social-media a svg.nostr-icon {
vertical-align: middle;
}
@@ -594,7 +826,7 @@ body.dark-mode .nostr-icon {
/* Responsive Design */
@media screen and (max-width: 992px) {
.features ul {
grid-template-columns: 1fr 1fr;
grid-template-columns: repeat(2, 1fr);
}
}
@@ -610,10 +842,6 @@ body.dark-mode .nostr-icon {
display: none;
}
.nav-links li {
margin: 10px 0;
}
.nav-links.active {
display: flex;
}
@@ -627,13 +855,6 @@ body.dark-mode .nostr-icon {
font-size: 0.9rem;
}
.directory-tree::before {
top: 5px;
left: 5px;
width: 16px;
height: 16px;
}
.dark-mode-toggle {
top: 10px;
right: 10px;
@@ -650,59 +871,69 @@ body.dark-mode .nostr-icon {
width: 20px;
height: 20px;
}
/* Roadmap Padding Adjustment for Mobile */
.timeline {
padding: 0 10px;
}
.timeline-item .timeline-content {
padding-left: 60px;
}
}
/* Dark Mode Styling */
body.dark-mode .navbar {
background-color: #0d1117;
background-color: var(--background-dark);
}
body.dark-mode .intro {
background: linear-gradient(135deg, #0d1117 0%, #161b22 100%);
background: linear-gradient(135deg, var(--background-dark) 0%, #161b22 100%);
}
body.dark-mode .intro p,
body.dark-mode .how-it-works p,
body.dark-mode .features h2,
body.dark-mode .features .section-title,
body.dark-mode .features ul li,
body.dark-mode .disclaimer p {
color: #c9d1d9;
color: var(--text-light);
}
body.dark-mode .cta-button {
background-color: #e94a39;
background-color: var(--cta-button-bg);
color: #ffffff;
}
body.dark-mode .cta-button:hover {
background-color: #2ea043;
body.dark-mode .cta-button:hover,
body.dark-mode .cta-button:focus {
background-color: var(--cta-button-hover-bg);
color: #ffffff;
}
body.dark-mode .features {
background-color: #0d1117;
background-color: var(--background-dark);
}
body.dark-mode .features h2 {
color: #c9d1d9;
body.dark-mode .features .section-title {
color: var(--text-light);
}
body.dark-mode .features ul li {
background-color: #161b22;
box-shadow: 0 4px 12px rgba(255, 255, 255, 0.05);
background-color: var(--background-dark-section);
box-shadow: 0 4px 12px var(--shadow-dark);
}
body.dark-mode .how-it-works {
background-color: #0d1117;
background-color: var(--background-dark);
}
body.dark-mode .how-it-works h2 {
color: #c9d1d9;
body.dark-mode .how-it-works .section-title {
color: var(--text-light);
}
body.dark-mode .directory-tree {
background-color: #161b22;
border-left: 4px solid #e94a39;
background-color: var(--background-dark-section);
border-left: 4px solid var(--secondary-color);
}
body.dark-mode .directory-tree span.parent {
@@ -710,30 +941,34 @@ body.dark-mode .directory-tree span.parent {
}
body.dark-mode .directory-tree span.child {
color: #c9d1d9;
color: var(--text-light);
}
body.dark-mode .directory-tree span.grandchild {
color: #ff8779;
}
body.dark-mode .disclaimer .container {
background-color: #2c2f33;
color: #ffffff;
border-left: 5px solid #e74c3c;
body.dark-mode .code-block {
background-color: #2d2d2d;
color: #dcdcdc;
box-shadow: 0 2px 8px var(--shadow-dark);
}
body.dark-mode .disclaimer ul li::before {
color: #e74c3c;
body.dark-mode .disclaimer .container {
background-color: #2c2f33;
color: var(--footer-text);
border-left: 5px solid var(--disclaimer-border);
}
body.dark-mode .disclaimer ul li {
background-color: var(--background-dark-disclaimer);
}
body.dark-mode .disclaimer ul li:hover,
body.dark-mode .disclaimer ul li:focus-within {
background-color: var(--disclaimer-hover-bg);
}
body.dark-mode footer {
background-color: #0d1117;
}
/* Additional Enhancements */
/* Smooth Scrolling */
html {
scroll-behavior: smooth;
background-color: var(--background-dark);
}