From 6237adeb408d164f9c33d0076ede5ef05aacb78f Mon Sep 17 00:00:00 2001 From: thePR0M3TH3AN <53631862+PR0M3TH3AN@users.noreply.github.com> Date: Tue, 22 Oct 2024 14:40:09 -0400 Subject: [PATCH] update --- landing/assets/svg/nostr.svg | 3 + landing/index.html | 114 +++++-- landing/script.js | 68 +++- landing/style.css | 591 ++++++++++++++++++++++++++++++++--- 4 files changed, 705 insertions(+), 71 deletions(-) create mode 100644 landing/assets/svg/nostr.svg diff --git a/landing/assets/svg/nostr.svg b/landing/assets/svg/nostr.svg new file mode 100644 index 0000000..873040a --- /dev/null +++ b/landing/assets/svg/nostr.svg @@ -0,0 +1,3 @@ + + + diff --git a/landing/index.html b/landing/index.html index 5013466..9cf82c2 100644 --- a/landing/index.html +++ b/landing/index.html @@ -3,57 +3,131 @@ - SeedPass - Secure Password Manager + + + +
+ + +
+
-
+

SeedPass: Secure Password Manager

SeedPass 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.

By integrating with the Nostr network, SeedPass ensures that your passwords are safe and accessible across devices.

- Get Started + Get Started
-
+

Features

    -
  • Deterministic password generation using BIP-85
    • -
  • Encrypted local storage for seeds and sensitive data
    • -
  • Nostr integration for secure backup and retrieval
    • -
  • Checksum verification for integrity checks
    • -
  • User-friendly command-line interface
    • +
  • Deterministic password generation using BIP-85
    • +
  • Encrypted local storage for seeds and sensitive data
    • +
  • Nostr integration for secure backup and retrieval
    • +
  • Checksum verification for integrity checks
    • +
  • User-friendly command-line interface
-
+
-

Disclaimer

-

⚠️ Use with Caution: This software was not developed by an experienced security expert. There may be bugs and missing features, and security vulnerabilities may exist. Always backup your data and be cautious while using it in sensitive environments.

+

How SeedPass Works

+

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:

+ + 
+    Parent_Seed
+    ├── Child_Seed_1 (Index: 0)
+    │   ├── Grandchild_Seed_1 (Password)
+    │   └── Grandchild_Seed_2 (Password)
+    ├── Child_Seed_2 (Index: 1)
+    │   ├── Grandchild_Seed_1 (Password)
+    │   └── Grandchild_Seed_2 (Password)
+    └── Child_Seed_3 (Index: 2)
+        ├── Grandchild_Seed_1 (Password)
+        └── Grandchild_Seed_2 (Password)
+
+ +

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.

+ +

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:

+ + 
+    Parent_Seed
+    ├── Child_Seed_1 (Kid's Account)
+    │   ├── Grandchild_Seed_1 (Email Password)
+    │   └── Grandchild_Seed_2 (Social Media Password)
+    ├── Child_Seed_2 (Elderly Parent's Account)
+    │   ├── Grandchild_Seed_1 (Banking Password)
+    │   └── Grandchild_Seed_2 (Medical Portal Password)
+
+ +

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.

-
- - - + +
+
+

Disclaimer

+

⚠️ Use with Caution:

+ +

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.

+
+
+ + + diff --git a/landing/script.js b/landing/script.js index 6fbf49d..c8202fe 100644 --- a/landing/script.js +++ b/landing/script.js @@ -1,5 +1,69 @@ -// Add any JavaScript functionality here if needed -// For example, you can add animations, smooth scroll, or event handlers +// Dark Mode Toggle with Persistence +const toggleCheckbox = document.getElementById('dark-mode-checkbox'); + +// Check for saved user preference +if (localStorage.getItem('dark-mode') === 'enabled') { + toggleCheckbox.checked = true; + document.body.classList.add('dark-mode'); +} + +toggleCheckbox.addEventListener('change', function() { + if (this.checked) { + document.body.classList.add('dark-mode'); + localStorage.setItem('dark-mode', 'enabled'); + } else { + document.body.classList.remove('dark-mode'); + localStorage.setItem('dark-mode', 'disabled'); + } +}); + +// Responsive Navbar Toggle +const menuToggle = document.querySelector('.menu-toggle'); +const navLinks = document.querySelector('.nav-links'); + +if (menuToggle) { + menuToggle.addEventListener('click', () => { + navLinks.classList.toggle('active'); + }); +} + +// Active Link Highlighting Based on Scroll +const sections = document.querySelectorAll('section'); +const navLinksArray = document.querySelectorAll('.nav-links a'); + +window.addEventListener('scroll', () => { + let current = ''; + + sections.forEach(section => { + const sectionTop = section.offsetTop - 70; + if (pageYOffset >= sectionTop) { + current = section.getAttribute('id'); + } + }); + + navLinksArray.forEach(link => { + link.classList.remove('active'); + if (link.getAttribute('href') === `#${current}`) { + link.classList.add('active'); + } + }); +}); + +// Smooth Scroll for Older Browsers +document.querySelectorAll('a[href^="#"]').forEach(anchor => { + anchor.addEventListener('click', function(e) { + e.preventDefault(); + const target = document.querySelector(this.getAttribute('href')); + if (target) { + window.scrollTo({ + top: target.offsetTop - 60, // Adjust for navbar height + behavior: 'smooth' + }); + } + }); +}); + +// Log when the page is loaded document.addEventListener('DOMContentLoaded', function() { console.log('SeedPass landing page loaded'); }); diff --git a/landing/style.css b/landing/style.css index 4c43b65..39f6a17 100644 --- a/landing/style.css +++ b/landing/style.css @@ -10,142 +10,635 @@ body { line-height: 1.6; background-color: #f4f4f9; color: #283c4f; + transition: background-color 0.3s, color 0.3s; +} + +/* Dark Mode */ +body.dark-mode { + background-color: #0d1117; /* GitHub Dark Mode Background */ + color: #c9d1d9; /* GitHub Dark Mode Text Color */ +} + +/* Dark Mode Toggle */ +.dark-mode-toggle { + position: fixed; + top: 20px; + right: 20px; + z-index: 1000; +} + +.dark-mode-toggle input[type="checkbox"] { + height: 0; + width: 0; + visibility: hidden; +} + +.dark-mode-toggle label { + cursor: pointer; + text-indent: -9999px; + width: 50px; + height: 25px; + background: grey; + display: block; + border-radius: 100px; + position: relative; +} + +.dark-mode-toggle label:after { + content: ''; + position: absolute; + top: 2px; + left: 2px; + width: 21px; + height: 21px; + background: #fff; + border-radius: 90px; + transition: 0.3s; +} + +.dark-mode-toggle input:checked + label { + background: #6e5494; /* Purple for Dark Mode */ +} + +.dark-mode-toggle input:checked + label:after { + left: calc(100% - 2px); + transform: translateX(-100%); +} + +.dark-mode-toggle label:active:after { + width: 28px; } /* Navbar */ .navbar { - background-color: #283c4f; /* Red background */ - padding: 40px 0; + background-color: #283c4f; + padding: 20px 0; + position: sticky; + top: 0; + width: 100%; + z-index: 999; + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); + transition: background-color 0.3s; +} + +.navbar .container { display: flex; - justify-content: center; + justify-content: space-between; align-items: center; + max-width: 1200px; + margin: 0 auto; + padding: 0 20px; } .navbar .logo { - max-width: 250px; + max-width: 200px; + transition: transform 0.3s; +} + +.navbar .logo:hover { + transform: scale(1.05); +} + +.nav-links { + list-style: none; + display: flex; +} + +.nav-links li { + margin-left: 20px; +} + +.nav-links a { + color: #ffffff; + text-decoration: none; + font-weight: 500; + transition: color 0.3s; +} + +.nav-links a:hover { + color: #e94a39; +} + +/* Hamburger Menu Toggle */ +.menu-toggle { + display: none; /* Hidden by default */ + font-size: 1.5rem; + color: #ffffff; + cursor: pointer; +} + +@media screen and (max-width: 768px) { + .menu-toggle { + display: block; + } + + .nav-links { + flex-direction: column; + width: 100%; + display: none; + } + + .nav-links li { + margin: 10px 0; + } + + .nav-links.active { + display: flex; + } } /* Hero/Intro Section */ .intro { text-align: center; - padding: 100px 20px; - background-color: #283c4f; /* Red background for hero section */ - color: #ffffff; /* White text for contrast */ + padding: 120px 20px; + background: linear-gradient(135deg, #283c4f 0%, #1a2733 100%); + color: #ffffff; + position: relative; + overflow: hidden; +} + +.intro::before { + content: ''; + position: absolute; + top: 0; + left: 50%; + width: 200%; + height: 100%; + background: rgba(255, 255, 255, 0.1); + transform: translateX(-50%); + z-index: 1; +} + +.intro .container { + position: relative; + z-index: 2; } .intro h1 { - font-size: 2.5rem; - color: #ffffff; + font-size: 3rem; margin-bottom: 20px; + animation: fadeInDown 1s ease-out; } .intro p { font-size: 1.2rem; - color: #ffffff; - margin-bottom: 20px; + margin-bottom: 30px; + animation: fadeInUp 1s ease-out 0.5s; } -/* Call-to-Action (CTA) Button */ .cta-button { - display: inline-block; - margin-top: 30px; - background-color: #ffffff; /* White background */ - color: #e94a39; /* Red text */ + display: inline-flex; + align-items: center; + justify-content: center; + background-color: #e94a39; + color: #ffffff; padding: 15px 30px; font-size: 1.2rem; font-weight: bold; text-decoration: none; - border-radius: 6px; - border: 2px solid #ffffff; /* White border */ - transition: background-color 0.3s ease, color 0.3s ease; + border-radius: 50px; + border: none; + transition: background-color 0.3s, transform 0.3s; +} + +.cta-button i { + margin-right: 10px; } .cta-button:hover { - background-color: #e94a39; - color: #ffffff; - border: 2px solid #ffffff; /* Button changes on hover */ + background-color: #d43d2a; + transform: translateY(-3px); } /* Features Section */ .features { - background-color: #f4f4f9; - padding: 60px 20px; + background-color: #f6f8fa; /* GitHub-like Light Gray */ + padding: 80px 20px; + transition: background-color 0.3s; } .features h2 { text-align: center; - font-size: 2rem; - color: #e94a39; - margin-bottom: 40px; + font-size: 2.5rem; + color: #24292e; /* GitHub Dark Text */ + margin-bottom: 50px; + position: relative; +} + +.features h2::after { + content: ''; + width: 60px; + height: 4px; + background-color: #0366d6; /* GitHub Blue */ + display: block; + margin: 10px auto 0 auto; + border-radius: 2px; } .features ul { - max-width: 900px; + max-width: 1000px; margin: 0 auto; list-style: none; padding: 0; display: grid; - grid-template-columns: 1fr 1fr; - grid-gap: 20px; + grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); + grid-gap: 30px; } .features ul li { background-color: #ffffff; - padding: 20px; - border-radius: 8px; - box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); - transition: transform 0.3s ease; + padding: 30px 20px; + border-radius: 12px; + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); + transition: transform 0.3s, box-shadow 0.3s; + display: flex; + align-items: center; +} + +.features ul li i { + font-size: 2rem; + color: #0366d6; /* GitHub Blue */ + margin-right: 20px; } .features ul li:hover { transform: translateY(-5px); + box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); +} + +/* How It Works Section */ +.how-it-works { + padding: 80px 20px; + background-color: #f6f8fa; /* GitHub-like Light Gray */ + animation: fadeInUp 1s ease-out; + transition: background-color 0.3s; +} + +.how-it-works h2 { + text-align: center; + font-size: 2.5rem; + color: #24292e; /* GitHub Dark Text */ + margin-bottom: 40px; + position: relative; +} + +.how-it-works h2::after { + content: ''; + width: 60px; + height: 4px; + background-color: #0366d6; /* GitHub Blue */ + 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; /* GitHub Dark Text */ +} + +.directory-tree { + background-color: #f6f8fa; /* GitHub-like Light Gray */ + border-left: 4px solid #0366d6; /* GitHub Blue */ + 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); + font-family: 'Courier New', Courier, monospace; + font-size: 1rem; + line-height: 1.5; + position: relative; + transition: transform 0.3s, background-color 0.3s, border-left 0.3s; +} + +.directory-tree:hover { + 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: #0366d6; /* GitHub Blue for Parent Seed */ + font-weight: bold; +} + +.directory-tree .child { + color: #24292e; /* GitHub Dark Text for Child Seed */ + margin-left: 20px; +} + +.directory-tree .grandchild { + color: #586069; /* GitHub Gray for Grandchild Seed */ + margin-left: 40px; +} + +/* Tooltip Styling */ +.directory-tree span[data-tooltip] { + position: relative; +} + +.directory-tree span[data-tooltip]::after { + content: attr(data-tooltip); + position: absolute; + left: 50%; + bottom: 100%; + transform: translateX(-50%); + background-color: #24292e; /* GitHub Dark Tooltip Background */ + color: #ffffff; + padding: 5px 10px; + border-radius: 4px; + white-space: nowrap; + opacity: 0; + visibility: hidden; + transition: opacity 0.3s; + pointer-events: none; + z-index: 10; + font-size: 0.9rem; +} + +.directory-tree span[data-tooltip]:hover::after { + opacity: 1; + visibility: visible; } /* Disclaimer Section */ .disclaimer { - padding: 40px 20px; - background-color: #e94a39; - color: white; + padding: 60px 20px; + background-color: #ffe6e6; /* Light red background for emphasis */ + color: #a94442; /* Dark red text for readability */ text-align: center; + border-left: 5px solid #a94442; /* Accent border */ + margin: 40px 0; + border-radius: 8px; + transition: background-color 0.3s, color 0.3s, border-left 0.3s; } .disclaimer h2 { - color: white; + color: #a94442; margin-bottom: 20px; + font-size: 2rem; +} + +.disclaimer ul { + max-width: 800px; + margin: 0 auto 20px auto; + text-align: left; + list-style: none; + padding: 0; +} + +.disclaimer ul li { + position: relative; + padding-left: 30px; + margin-bottom: 10px; + font-size: 1.1rem; +} + +.disclaimer ul li::before { + content: '\f05a'; /* Font Awesome info-circle icon */ + font-family: 'Font Awesome 5 Free'; + font-weight: 900; + position: absolute; + left: 0; + top: 0; + color: #a94442; } .disclaimer p { max-width: 800px; margin: 0 auto; font-size: 1.1rem; - text-align: center; + color: #a94442; } /* Footer */ footer { - background-color: #e94a39; - padding: 20px 0; + background-color: #24292e; /* GitHub Dark Footer */ + padding: 30px 20px; text-align: center; font-size: 0.9rem; color: white; } -/* Responsive */ +footer .social-media { + margin-bottom: 15px; +} + +/* Custom Nostr Icon Styling */ +.nostr-icon { + width: 24px; /* Adjust size as needed */ + height: 24px; + vertical-align: middle; + transition: filter 0.3s, transform 0.3s; +} + +/* Adjust Icon Color in Dark Mode (if needed) */ +body.dark-mode .nostr-icon { + filter: brightness(0) invert(1); /* Makes the icon white in dark mode */ +} + +/* Hover Effects for Nostr Icon */ +.social-media a:hover .nostr-icon { + transform: scale(1.1); + filter: brightness(0.8); +} + +/* GitHub Icon Styling (if necessary) */ +.social-media a i.fab.fa-github { + font-size: 24px; /* Match the size of the Nostr icon */ + transition: color 0.3s, transform 0.3s; +} + +/* Hover Effects for GitHub Icon */ +.social-media a:hover i.fab.fa-github { + transform: scale(1.1); + color: #0366d6; /* GitHub Blue on hover */ +} + +footer .social-media a { + color: white; + margin: 0 10px; + font-size: 1.2rem; + transition: color 0.3s; +} + +footer .social-media a:hover { + color: #0366d6; /* GitHub Blue */ +} + +/* Animations */ +@keyframes fadeInDown { + from { + opacity: 0; + transform: translateY(-20px); + } + to { + opacity: 1; + transform: translateY(0); + } +} + +@keyframes fadeInUp { + from { + opacity: 0; + transform: translateY(20px); + } + to { + opacity: 1; + transform: translateY(0); + } +} + +/* Responsive Design */ +@media screen and (max-width: 992px) { + .features ul { + grid-template-columns: 1fr 1fr; + } +} + @media screen and (max-width: 768px) { - .navbar { + .navbar .container { flex-direction: column; + align-items: flex-start; } - .navbar .logo { - margin-bottom: 10px; - } - - .cta-button { + .nav-links { + flex-direction: column; width: 100%; - text-align: center; + display: none; + } + + .nav-links li { + margin: 10px 0; + } + + .nav-links.active { + display: flex; } .features ul { grid-template-columns: 1fr; } + + .directory-tree { + padding: 15px; + font-size: 0.9rem; + } + + .directory-tree::before { + top: 5px; + left: 5px; + width: 16px; + height: 16px; + } + + .dark-mode-toggle { + top: 10px; + right: 10px; + } +} + +/* Dark Mode Styling */ +body.dark-mode .navbar { + background-color: #0d1117; /* GitHub Dark Mode Navbar */ +} + +body.dark-mode .intro { + background: linear-gradient(135deg, #0d1117 0%, #161b22 100%); /* Darker gradient */ +} + +body.dark-mode .intro p, +body.dark-mode .how-it-works p, +body.dark-mode .features h2, +body.dark-mode .features ul li, +body.dark-mode .disclaimer { + color: #c9d1d9; /* GitHub Dark Mode Text Color */ +} + +body.dark-mode .cta-button { + background-color: #238636; /* GitHub Green */ + color: #ffffff; +} + +body.dark-mode .cta-button:hover { + background-color: #2ea043; /* Darker GitHub Green */ + color: #ffffff; +} + +body.dark-mode .features { + background-color: #0d1117; /* Dark background for Features section */ +} + +body.dark-mode .features h2 { + color: #c9d1d9; /* Light text in Features section */ +} + +body.dark-mode .features ul li { + background-color: #161b22; /* GitHub Dark Mode Feature Cards */ + box-shadow: 0 4px 12px rgba(255, 255, 255, 0.05); +} + +body.dark-mode .how-it-works { + background-color: #0d1117; /* Dark background for How It Works section */ +} + +body.dark-mode .how-it-works h2 { + color: #c9d1d9; /* Light text in How It Works section */ +} + +body.dark-mode .directory-tree { + background-color: #161b22; /* GitHub Dark Mode Directory Tree */ + border-left: 4px solid #238636; /* GitHub Green */ +} + +body.dark-mode .directory-tree span.parent { + color: #58a6ff; /* GitHub Blue for Parent Seed */ +} + +body.dark-mode .directory-tree span.child { + color: #c9d1d9; /* GitHub Dark Mode Text for Child Seed */ +} + +body.dark-mode .directory-tree span.grandchild { + color: #58a6ff; /* GitHub Blue for Grandchild Seed */ +} + +body.dark-mode .disclaimer { + background-color: #2c2f33; /* Darker background for disclaimer */ + color: #ffffff; + border-left: 5px solid #e74c3c; /* Red accent */ +} + +body.dark-mode .disclaimer ul li::before { + color: #e74c3c; /* Red icon in disclaimer */ +} + +body.dark-mode footer { + background-color: #0d1117; /* GitHub Dark Mode Footer */ +} + +/* Additional Enhancements */ + +/* Toggle menu for mobile */ +.menu-toggle { + display: none; +} + +/* Smooth Scrolling */ +html { + scroll-behavior: smooth; }