mirror of
https://github.com/PR0M3TH3AN/SeedPass.git
synced 2025-09-07 06:48:52 +00:00
update
This commit is contained in:
thePR0M3TH3AN
3
landing/assets/svg/nostr.svg
Normal file
3
landing/assets/svg/nostr.svg
Normal file
@@ -0,0 +1,3 @@
|
||||
<svg width="620" height="620" viewBox="0 0 620 620" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<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" fill="white"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.2 KiB |
@@ -3,57 +3,131 @@
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||||
<title>SeedPass - Secure Password Manager</title>
|
||||
<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" />
|
||||
</head>
|
||||
<body>
|
||||
<!-- Dark Mode Toggle -->
|
||||
<div class="dark-mode-toggle">
|
||||
<input type="checkbox" id="dark-mode-checkbox">
|
||||
<label for="dark-mode-checkbox">
|
||||
<i class="fas fa-moon"></i>
|
||||
<i class="fas fa-sun"></i>
|
||||
<span class="toggle-ball"></span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<header>
|
||||
<nav class="navbar">
|
||||
<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">
|
||||
<!-- 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>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<section class="intro">
|
||||
<section class="intro" id="intro">
|
||||
<div class="container">
|
||||
<h1>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">Get Started</a>
|
||||
<a href="https://github.com/PR0M3TH3AN/SeedPass" class="btn-primary cta-button"><i class="fas fa-download"></i> Get Started</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="features">
|
||||
<section class="features" id="features">
|
||||
<div class="container">
|
||||
<h2>Features</h2>
|
||||
<ul>
|
||||
<li>Deterministic password generation using BIP-85</li>
|
||||
<li>Encrypted local storage for seeds and sensitive data</li>
|
||||
<li>Nostr integration for secure backup and retrieval</li>
|
||||
<li>Checksum verification for integrity checks</li>
|
||||
<li>User-friendly command-line interface</li>
|
||||
<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>
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="disclaimer">
|
||||
<section class="how-it-works" id="how-it-works">
|
||||
<div class="container">
|
||||
<h2>Disclaimer</h2>
|
||||
<p><strong>⚠️ Use with Caution:</strong> 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.</p>
|
||||
<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>
|
||||
|
||||
<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>
|
||||
</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>
|
||||
|
||||
<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>
|
||||
|
||||
<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>
|
||||
</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>
|
||||
</main>
|
||||
|
||||
<footer>
|
||||
<div class="container">
|
||||
<p>© 2024 SeedPass. All rights reserved.</p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
|
||||
<section class="disclaimer" id="disclaimer">
|
||||
<div class="container">
|
||||
<h2>Disclaimer</h2>
|
||||
<p><strong>⚠️ Use with Caution:</strong></p>
|
||||
<ul>
|
||||
<li><strong>No Guarantees:</strong> 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.</li>
|
||||
<li><strong>Security Risks:</strong> 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.</li>
|
||||
<li><strong>Not Professional Advice:</strong> SeedPass is not a substitute for professional security or cryptographic advice. Consult with a security expert before using it in critical or sensitive environments.</li>
|
||||
<li><strong>Liability Limitation:</strong> We are not liable for any damages, losses, or other liabilities arising from the use or inability to use SeedPass.</li>
|
||||
<li><strong>Regular Backups:</strong> Always maintain regular backups of your seeds and sensitive data to prevent loss in case of unforeseen issues.</li>
|
||||
<li><strong>User Responsibility:</strong> 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.</li>
|
||||
<li><strong>Updates and Maintenance:</strong> 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.</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>
|
||||
|
||||
<footer>
|
||||
<div class="container">
|
||||
<div class="social-media">
|
||||
<!-- Nostr Link with Custom SVG Icon -->
|
||||
<a href="primal.net/p/npub15jnttpymeytm80hatjqcvhhqhzrhx6gxp8pq0wn93rhnu8s9h9dsha32lx" target="_blank" aria-label="Nostr Profile">
|
||||
<img src="/assets/svg/nostr.svg" alt="Nostr Logo" class="nostr-icon">
|
||||
</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>© 2024 SeedPass. All rights reserved.</p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="./script.js"></script> <!-- Relative path to script.js -->
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -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');
|
||||
});
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user