From 9515e4a214019eac2fed8a5fc623444e2029d2ee Mon Sep 17 00:00:00 2001 From: RDXFGXY1 <111075703+RDXFGXY1@users.noreply.github.com> Date: Thu, 7 Aug 2025 20:30:11 +0100 Subject: [PATCH] Host --- NullStudio/black-messenger.html | 273 +++++++++ NullStudio/discord-auth.html | 310 ++++++++++ NullStudio/index.html | 205 +++++++ NullStudio/script.js | 275 +++++++++ NullStudio/styles.css | 980 ++++++++++++++++++++++++++++++++ 5 files changed, 2043 insertions(+) create mode 100644 NullStudio/black-messenger.html create mode 100644 NullStudio/discord-auth.html create mode 100644 NullStudio/index.html create mode 100644 NullStudio/script.js create mode 100644 NullStudio/styles.css diff --git a/NullStudio/black-messenger.html b/NullStudio/black-messenger.html new file mode 100644 index 0000000..3b28569 --- /dev/null +++ b/NullStudio/black-messenger.html @@ -0,0 +1,273 @@ + + + + + + Black Messenger - Secure Chat App + + + +
+
+ + +
Loading...
+
+
+ + + +
+
+
+
+

Black Messenger

+

A secure messaging app I built under my NullStudio organization to learn about encryption and real-time communication

+
+ Secure + Open Source + Learning Project +
+
+ View on GitHub + Learn More +
+
+
+
+ +
+
+

About This Project

+
+
+

I created Black Messenger as a learning project to understand how secure messaging works. NullStudio is just the name I use for my GitHub organization - I thought it sounded cool when I came up with it!

+

The app focuses on privacy and security while keeping things simple and easy to use. It's not meant to compete with big messaging apps - it's just my way of exploring these technologies and having fun with code.

+
+
+
+

End-to-End

+

Encrypted

+
+
+

Real-time

+

Messages

+
+
+

Cross-platform

+

Desktop

+
+
+
+
+
+ +
+
+

What It Does

+
+
+
🔐
+

Secure Messaging

+

Messages are encrypted so only you and your friends can read them.

+
+
+
⚡
+

Real-time Chat

+

Messages appear instantly without any delays or refreshing.

+
+
+
📁
+

File Sharing

+

Share files and images securely with your contacts.

+
+
+
👥
+

Group Chats

+

Create group conversations with multiple people.

+
+
+
🌙
+

Dark Theme

+

Easy on the eyes with a sleek dark interface.

+
+
+
🔔
+

Notifications

+

Get notified when you receive new messages.

+
+
+
+
+ +
+
+

How I Built It

+
+
+

Security

+
    +
  • AES-256 encryption
    • +
  • Secure key exchange
    • +
  • No message logging
    • +
  • Local data storage
    • +
+
+
+

Platforms

+
    +
  • Windows
    • +
  • macOS
    • +
  • Linux
    • +
  • Web version
    • +
+
+
+

Technologies

+
    +
  • Electron
    • +
  • Node.js
    • +
  • WebSockets
    • +
  • SQLite
    • +
+
+
+

Features

+
    +
  • Low memory usage
    • +
  • Fast messaging
    • +
  • File transfers
    • +
  • Offline sync
    • +
+
+
+
+
+ +
+
+

What I Learned

+
+
+
01
+

Encryption

+

How to implement secure encryption and protect user data properly.

+
+
+
02
+

Real-time Communication

+

Working with WebSockets and handling real-time data synchronization.

+
+
+
03
+

Desktop Development

+

Building cross-platform desktop apps with Electron framework.

+
+
+
04
+

User Experience

+

Designing intuitive interfaces and smooth user interactions.

+
+
+
+
+ +
+
+

Support My Work

+

If you like this project and want to help me continue learning and building cool stuff, consider supporting me:

+
+ + ⭐ + GitHub + + + 🎨 + Patreon + + + 🤝 + Open Collective + + + 💝 + Liberapay + + + 💳 + PayPal + +
+
+
+ +
+
+

Want to Try It?

+

Feel free to download and test it out. I'd love to hear your feedback!

+
+ Download + Source Code +
+
+
+
+ + + + + + \ No newline at end of file diff --git a/NullStudio/discord-auth.html b/NullStudio/discord-auth.html new file mode 100644 index 0000000..fc9bec1 --- /dev/null +++ b/NullStudio/discord-auth.html @@ -0,0 +1,310 @@ + + + + + + Discord Auth - Coming Soon + + + + +
+
+ + +
Loading...
+
+
+ + + +
+ +
+
+
+

Discord Auth

+

A full-stack Discord authentication system I'm building to learn about OAuth2 and bot development

+
+ Coming Soon + Full-Stack + Learning Project +
+
+ View Repository + Learn More +
+
+
+
+ + +
+
+

About This Project

+
+
+

I'm currently working on Discord Auth as my next learning project. It's a complete authentication system that integrates with Discord's OAuth2 API, plus a bot for server management.

+

This project is helping me understand how OAuth2 works, how to build REST APIs, and how to create Discord bots. It's more complex than Black Messenger, but that's the point - I want to challenge myself!

+
+
+
+

Full-Stack

+

System

+
+
+

OAuth2

+

Integration

+
+
+

Discord

+

Bot

+
+
+
+
+
+ + +
+
+

What It Will Do

+
+
+
🔐
+

Discord OAuth2

+

Complete authentication system using Discord's OAuth2 API.

+
+
+
🤖
+

Discord Bot

+

Modular bot with ticket system and admin commands.

+
+
+
🌐
+

Web Frontend

+

Clean web interface for user authentication and management.

+
+
+
⚡
+

REST API

+

Backend API for handling authentication and user data.

+
+
+
🎫
+

Ticket System

+

Built-in support ticket management for Discord servers.

+
+
+
🐳
+

Docker Ready

+

Easy deployment with Docker containers.

+
+
+
+
+ + +
+
+

Technologies I'm Using

+
+
+

Backend

+
    +
  • Node.js & Express
    • +
  • Discord OAuth2
    • +
  • MongoDB/JSON storage
    • +
  • RESTful API design
    • +
+
+
+

Discord Bot

+
    +
  • Discord.py
    • +
  • SQLite database
    • +
  • Modular cog system
    • +
  • Admin permissions
    • +
+
+
+

Frontend

+
    +
  • HTML/CSS/JavaScript
    • +
  • Discord login flow
    • +
  • User dashboard
    • +
  • Responsive design
    • +
+
+
+

Deployment

+
    +
  • Docker containers
    • +
  • Docker Compose
    • +
  • Environment configs
    • +
  • Database persistence
    • +
+
+
+
+
+ + +
+
+

Development Progress

+
+
+
01
+

Planning & Setup

+

Project structure, environment setup, and initial configurations.

+
✓ Completed
+
+
+
02
+

Discord Bot

+

Building the modular bot with ticket system and admin commands.

+
🔄 In Progress
+
+
+
03
+

OAuth2 Backend

+

Implementing Discord OAuth2 authentication and user management.

+
⏳ Pending
+
+
+
04
+

Frontend & Testing

+

Web interface development and comprehensive testing.

+
⏳ Pending
+
+
+
+
+ + +
+
+

What I'm Learning

+
+
+
🔑
+

OAuth2 Flow

+

Understanding how OAuth2 authentication works and implementing it securely.

+
+
+
🏗️
+

Full-Stack Development

+

Building complete applications with frontend, backend, and database integration.

+
+
+
🤖
+

Discord Bot Development

+

Creating modular Discord bots with advanced features and permissions.

+
+
+
+
+ + +
+
+

Support My Development

+

This project is taking a lot of time and effort to build. If you're excited about it and want to support my learning journey:

+
+ + ⭐ + GitHub + + + 🎨 + Patreon + + + 🤝 + Open Collective + + + 💝 + Liberapay + + + 💳 + PayPal + +
+
+
+ + +
+
+

Want Updates?

+

Follow the repository to get notified when I release this project!

+
+ Follow on GitHub + Back to Home +
+
+
+
+ + + + + + \ No newline at end of file diff --git a/NullStudio/index.html b/NullStudio/index.html new file mode 100644 index 0000000..86a460c --- /dev/null +++ b/NullStudio/index.html @@ -0,0 +1,205 @@ + + + + + + NullStudio + + + +
+
+ + +
Loading...
+
+
+ + + +
+
+
+
+

Hey, I'm a Developer

+

I create software projects under NullStudio for fun and to improve my coding skills

+
+ About Me + My Projects +
+
+
+
+ +
+
+

About Me

+
+
+

I'm a developer who loves creating software projects in my free time. NullStudio is just the name I chose for my GitHub organization - it sounded cool when I thought of it!

+

I build these projects mainly for fun and to challenge myself with new technologies. If you find my work helpful or interesting, I'd love to hear your feedback and suggestions for improvement.

+
+
+
+

1

+

Project Live

+
+
+

1+

+

Coming Soon

+
+
+

∞

+

Fun Had

+
+
+
+
+
+ + +
+
+

My Projects

+
+
+
💬
+

Black Messenger

+

A secure messaging app with end-to-end encryption and real-time communication.

+
Live
+ View Project → +
+
+
🔐
+

Discord OAuth2

+

A complete Discord OAuth2 implementation with full authentication details.

+
Coming Soon
+ In Development +
+
+
+
+ + +
+
+

What I Build

+
+
+
💻
+

Desktop Apps

+

Cross-platform applications built with modern frameworks like Electron.

+
+
+
🌐
+

Web Projects

+

Responsive websites and web applications using the latest technologies.

+
+
+
🔧
+

Tools & APIs

+

Useful tools and API integrations that solve real problems.

+
+
+
+
+ + +
+
+

Support My Work

+

If you enjoy my projects and want to help me continue learning and building cool stuff, consider supporting me through these platforms:

+
+ + ⭐ + GitHub + + + 🎨 + Patreon + + + 🤝 + Open Collective + + + 💝 + Liberapay + + + 💳 + PayPal + +
+
+
+ + +
+
+

Want to See My Work?

+

Check out my current project and stay tuned for more!

+ About Me +
+
+
+ + + + + + \ No newline at end of file diff --git a/NullStudio/script.js b/NullStudio/script.js new file mode 100644 index 0000000..8483354 --- /dev/null +++ b/NullStudio/script.js @@ -0,0 +1,275 @@ +// Real Loading Screen +window.addEventListener('load', function() { + const loadingScreen = document.getElementById('loading-screen'); + + // Minimum loading time of 1 second for better UX + setTimeout(() => { + loadingScreen.classList.add('hidden'); + + // Remove loading screen from DOM after animation + setTimeout(() => { + loadingScreen.remove(); + }, 500); + }, 1000); +}); + +// Mobile Navigation Toggle +document.addEventListener('DOMContentLoaded', function() { + const hamburger = document.querySelector('.hamburger'); + const navMenu = document.querySelector('.nav-menu'); + const navLinks = document.querySelectorAll('.nav-link'); + + if (hamburger && navMenu) { + // Toggle mobile menu + hamburger.addEventListener('click', function() { + hamburger.classList.toggle('active'); + navMenu.classList.toggle('active'); + + // Animate hamburger bars + const bars = hamburger.querySelectorAll('.bar'); + if (hamburger.classList.contains('active')) { + bars[0].style.transform = 'rotate(-45deg) translate(-5px, 6px)'; + bars[1].style.opacity = '0'; + bars[2].style.transform = 'rotate(45deg) translate(-5px, -6px)'; + } else { + bars[0].style.transform = 'none'; + bars[1].style.opacity = '1'; + bars[2].style.transform = 'none'; + } + }); + + // Close mobile menu when clicking on a link + navLinks.forEach(link => { + link.addEventListener('click', function() { + hamburger.classList.remove('active'); + navMenu.classList.remove('active'); + + // Reset hamburger bars + const bars = hamburger.querySelectorAll('.bar'); + bars[0].style.transform = 'none'; + bars[1].style.opacity = '1'; + bars[2].style.transform = 'none'; + }); + }); + + // Close mobile menu when clicking outside + document.addEventListener('click', function(event) { + const isClickInsideNav = navMenu.contains(event.target) || hamburger.contains(event.target); + + if (!isClickInsideNav && navMenu.classList.contains('active')) { + hamburger.classList.remove('active'); + navMenu.classList.remove('active'); + + // Reset hamburger bars + const bars = hamburger.querySelectorAll('.bar'); + bars[0].style.transform = 'none'; + bars[1].style.opacity = '1'; + bars[2].style.transform = 'none'; + } + }); + } +}); + +// Smooth scrolling for anchor links +document.querySelectorAll('a[href^="#"]').forEach(anchor => { + anchor.addEventListener('click', function (e) { + e.preventDefault(); + const target = document.querySelector(this.getAttribute('href')); + + if (target) { + const headerOffset = 80; + const elementPosition = target.getBoundingClientRect().top; + const offsetPosition = elementPosition + window.pageYOffset - headerOffset; + + window.scrollTo({ + top: offsetPosition, + behavior: 'smooth' + }); + } + }); +}); + +// Navbar background opacity on scroll +window.addEventListener('scroll', function() { + const navbar = document.querySelector('.navbar'); + if (navbar) { + const scrolled = window.pageYOffset; + + if (scrolled > 50) { + navbar.style.background = 'rgba(10, 10, 10, 0.98)'; + } else { + navbar.style.background = 'rgba(10, 10, 10, 0.95)'; + } + } +}); + +// Intersection Observer for fade-in animations +const observerOptions = { + threshold: 0.1, + rootMargin: '0px 0px -50px 0px' +}; + +const observer = new IntersectionObserver(function(entries) { + entries.forEach(entry => { + if (entry.isIntersecting) { + entry.target.style.opacity = '1'; + entry.target.style.transform = 'translateY(0)'; + } + }); +}, observerOptions); + +// Observe elements for animation +document.addEventListener('DOMContentLoaded', function() { + const animateElements = document.querySelectorAll('.feature-card, .learning-card, .stat, .donation-btn'); + + animateElements.forEach(el => { + el.style.opacity = '0'; + el.style.transform = 'translateY(30px)'; + el.style.transition = 'opacity 0.6s ease, transform 0.6s ease'; + observer.observe(el); + }); +}); + +// Add loading state for external links +document.querySelectorAll('a[target="_blank"]').forEach(link => { + link.addEventListener('click', function() { + const originalText = this.textContent; + this.textContent = 'Opening...'; + + setTimeout(() => { + this.textContent = originalText; + }, 2000); + }); +}); + +// Add hover effect for cards +document.querySelectorAll('.feature-card, .learning-card, .donation-btn').forEach(card => { + card.addEventListener('mouseenter', function() { + this.style.transform = 'translateY(-5px) scale(1.02)'; + }); + + card.addEventListener('mouseleave', function() { + this.style.transform = 'translateY(0) scale(1)'; + }); +}); + +// Keyboard navigation support +document.addEventListener('keydown', function(e) { + // ESC key closes mobile menu + if (e.key === 'Escape') { + const navMenu = document.querySelector('.nav-menu'); + const hamburger = document.querySelector('.hamburger'); + + if (navMenu && hamburger && navMenu.classList.contains('active')) { + hamburger.classList.remove('active'); + navMenu.classList.remove('active'); + + // Reset hamburger bars + const bars = hamburger.querySelectorAll('.bar'); + bars[0].style.transform = 'none'; + bars[1].style.opacity = '1'; + bars[2].style.transform = 'none'; + } + } +}); + +// Add focus management for accessibility +document.querySelectorAll('.btn, .nav-link, .donation-btn').forEach(element => { + element.addEventListener('focus', function() { + this.style.outline = '2px solid #00d4ff'; + this.style.outlineOffset = '2px'; + }); + + element.addEventListener('blur', function() { + this.style.outline = 'none'; + }); +}); + +// Performance optimization +if ('IntersectionObserver' in window) { + const imageObserver = new IntersectionObserver((entries, observer) => { + entries.forEach(entry => { + if (entry.isIntersecting) { + const img = entry.target; + if (img.dataset.src) { + img.src = img.dataset.src; + img.classList.remove('lazy'); + imageObserver.unobserve(img); + } + } + }); + }); + + document.querySelectorAll('img[data-src]').forEach(img => { + imageObserver.observe(img); + }); +} + +// Add scroll-to-top functionality +function addScrollToTop() { + const scrollButton = document.createElement('button'); + scrollButton.innerHTML = '↑'; + scrollButton.className = 'scroll-to-top'; + scrollButton.style.cssText = ` + position: fixed; + bottom: 20px; + right: 20px; + width: 50px; + height: 50px; + border-radius: 50%; + background: linear-gradient(135deg, #00d4ff 0%, #0099cc 100%); + color: #0a0a0a; + border: none; + font-size: 20px; + font-weight: bold; + cursor: pointer; + opacity: 0; + visibility: hidden; + transition: all 0.3s ease; + z-index: 1000; + `; + + document.body.appendChild(scrollButton); + + // Show/hide scroll button based on scroll position + window.addEventListener('scroll', function() { + if (window.pageYOffset > 300) { + scrollButton.style.opacity = '1'; + scrollButton.style.visibility = 'visible'; + } else { + scrollButton.style.opacity = '0'; + scrollButton.style.visibility = 'hidden'; + } + }); + + // Scroll to top when clicked + scrollButton.addEventListener('click', function() { + window.scrollTo({ + top: 0, + behavior: 'smooth' + }); + }); + + // Add hover effect + scrollButton.addEventListener('mouseenter', function() { + this.style.transform = 'translateY(-3px)'; + this.style.boxShadow = '0 10px 20px rgba(0, 212, 255, 0.3)'; + }); + + scrollButton.addEventListener('mouseleave', function() { + this.style.transform = 'translateY(0)'; + this.style.boxShadow = 'none'; + }); +} + +// Initialize scroll-to-top button +document.addEventListener('DOMContentLoaded', addScrollToTop); + +// Dynamic year in footer +document.addEventListener('DOMContentLoaded', function() { + const currentYear = new Date().getFullYear(); + const footerText = document.querySelector('.footer-bottom p'); + if (footerText) { + footerText.textContent = `© ${currentYear} NullStudio. Made with ❤️ for fun and learning.`; + } +}); \ No newline at end of file diff --git a/NullStudio/styles.css b/NullStudio/styles.css new file mode 100644 index 0000000..0d0b8dc --- /dev/null +++ b/NullStudio/styles.css @@ -0,0 +1,980 @@ +/* Reset and Base Styles */ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body { + font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; + line-height: 1.6; + color: #e0e0e0; + background-color: #0a0a0a; + overflow-x: hidden; +} + +.container { + max-width: 1200px; + margin: 0 auto; + padding: 0 20px; +} + +/* Loading Screen */ +.loading-screen { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: #0a0a0a; + display: flex; + align-items: center; + justify-content: center; + z-index: 9999; + transition: opacity 0.5s ease, visibility 0.5s ease; +} + +.loading-screen.hidden { + opacity: 0; + visibility: hidden; +} + +.loading-content { + text-align: center; +} + +.loading-logo { + font-size: 2.5rem; + font-weight: 700; + color: #00d4ff; + margin-bottom: 2rem; +} + +.loading-spinner { + width: 50px; + height: 50px; + border: 3px solid rgba(0, 212, 255, 0.3); + border-top: 3px solid #00d4ff; + border-radius: 50%; + animation: spin 1s linear infinite; + margin: 0 auto 1rem; +} + +.loading-text { + color: #b0b0b0; + font-size: 1.1rem; +} + +@keyframes spin { + 0% { transform: rotate(0deg); } + 100% { transform: rotate(360deg); } +} + +/* Navigation */ +.navbar { + position: fixed; + top: 0; + width: 100%; + background: rgba(10, 10, 10, 0.95); + backdrop-filter: blur(10px); + z-index: 1000; + transition: all 0.3s ease; +} + +.nav-container { + max-width: 1200px; + margin: 0 auto; + padding: 0 20px; + display: flex; + justify-content: space-between; + align-items: center; + height: 70px; +} + +.nav-logo h2 { + color: #00d4ff; + font-size: 1.8rem; + font-weight: 700; +} + +.nav-menu { + display: flex; + list-style: none; + gap: 2rem; +} + +.nav-link { + color: #e0e0e0; + text-decoration: none; + font-weight: 500; + transition: color 0.3s ease; + position: relative; +} + +.nav-link:hover, +.nav-link.active { + color: #00d4ff; +} + +.nav-link.active::after { + content: ''; + position: absolute; + bottom: -5px; + left: 0; + width: 100%; + height: 2px; + background: #00d4ff; +} + +.hamburger { + display: none; + flex-direction: column; + cursor: pointer; +} + +.bar { + width: 25px; + height: 3px; + background: #e0e0e0; + margin: 3px 0; + transition: 0.3s; +} + +/* Hero Section */ +.hero { + min-height: 100vh; + display: flex; + align-items: center; + background: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 100%); + position: relative; + overflow: hidden; +} + +.hero::before { + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: radial-gradient(circle at 30% 50%, rgba(0, 212, 255, 0.1) 0%, transparent 50%); +} + +.hero-content { + text-align: center; + position: relative; + z-index: 2; +} + +.hero-title { + font-size: 3.5rem; + font-weight: 700; + margin-bottom: 1rem; + background: linear-gradient(135deg, #e0e0e0 0%, #00d4ff 100%); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; +} + +.highlight { + color: #00d4ff; +} + +.hero-subtitle { + font-size: 1.3rem; + margin-bottom: 2rem; + color: #b0b0b0; + max-width: 600px; + margin-left: auto; + margin-right: auto; +} + +.hero-buttons { + display: flex; + gap: 1rem; + justify-content: center; + flex-wrap: wrap; +} + +/* Buttons */ +.btn { + display: inline-block; + padding: 12px 30px; + text-decoration: none; + border-radius: 50px; + font-weight: 600; + transition: all 0.3s ease; + border: 2px solid transparent; +} + +.btn-primary { + background: linear-gradient(135deg, #00d4ff 0%, #0099cc 100%); + color: #0a0a0a; +} + +.btn-primary:hover { + transform: translateY(-2px); + box-shadow: 0 10px 30px rgba(0, 212, 255, 0.3); +} + +.btn-secondary { + background: transparent; + color: #00d4ff; + border-color: #00d4ff; +} + +.btn-secondary:hover { + background: #00d4ff; + color: #0a0a0a; + transform: translateY(-2px); +} + +/* Sections */ +section { + padding: 80px 0; +} + +.section-title { + font-size: 2.5rem; + text-align: center; + margin-bottom: 3rem; + color: #e0e0e0; + position: relative; +} + +.section-title::after { + content: ''; + position: absolute; + bottom: -10px; + left: 50%; + transform: translateX(-50%); + width: 60px; + height: 3px; + background: linear-gradient(135deg, #00d4ff 0%, #0099cc 100%); +} + +/* About Section */ +.about { + background: #111111; +} + +.about-content { + display: grid; + grid-template-columns: 2fr 1fr; + gap: 3rem; + align-items: center; +} + +.about-text p { + font-size: 1.1rem; + margin-bottom: 1.5rem; + color: #b0b0b0; + line-height: 1.8; +} + +.about-stats { + display: flex; + flex-direction: column; + gap: 2rem; +} + +.stat { + text-align: center; + padding: 1.5rem; + background: rgba(0, 212, 255, 0.1); + border-radius: 10px; + border: 1px solid rgba(0, 212, 255, 0.2); +} + +.stat h3 { + font-size: 2rem; + color: #00d4ff; + margin-bottom: 0.5rem; +} + +.stat p { + color: #b0b0b0; + font-size: 0.9rem; +} + +/* Mission Section */ +.mission { + background: #0a0a0a; +} + +.mission-content { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); + gap: 2rem; +} + +.mission-card { + background: #111111; + padding: 2rem; + border-radius: 15px; + text-align: center; + border: 1px solid rgba(0, 212, 255, 0.1); + transition: all 0.3s ease; +} + +.mission-card:hover { + transform: translateY(-5px); + border-color: rgba(0, 212, 255, 0.3); + box-shadow: 0 10px 30px rgba(0, 212, 255, 0.1); +} + +.mission-icon { + font-size: 3rem; + margin-bottom: 1rem; +} + +.mission-card h3 { + color: #00d4ff; + margin-bottom: 1rem; + font-size: 1.3rem; +} + +.mission-card p { + color: #b0b0b0; + line-height: 1.6; +} + +/* Features/Projects Section */ +.features { + background: #111111; +} + +.features-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); + gap: 2rem; +} + +.feature-card { + background: #0a0a0a; + padding: 2rem; + border-radius: 15px; + text-align: center; + border: 1px solid rgba(0, 212, 255, 0.1); + transition: all 0.3s ease; + position: relative; +} + +.feature-card:hover { + transform: translateY(-5px); + border-color: rgba(0, 212, 255, 0.3); + box-shadow: 0 10px 30px rgba(0, 212, 255, 0.1); +} + +.feature-icon { + font-size: 2.5rem; + margin-bottom: 1rem; +} + +.feature-card h3 { + color: #e0e0e0; + margin-bottom: 1rem; + font-size: 1.2rem; +} + +.feature-card p { + color: #b0b0b0; + line-height: 1.6; + margin-bottom: 1.5rem; +} + +/* Project Card Specific Styles */ +.project-card { + padding-bottom: 3rem; +} + +.project-status { + position: absolute; + top: 1rem; + right: 1rem; + padding: 0.3rem 0.8rem; + border-radius: 15px; + font-size: 0.8rem; + font-weight: 600; +} + +.project-status.live { + background: rgba(34, 197, 94, 0.2); + color: #22c55e; + border: 1px solid rgba(34, 197, 94, 0.3); +} + +.project-status.coming { + background: rgba(251, 191, 36, 0.2); + color: #fbbf24; + border: 1px solid rgba(251, 191, 36, 0.3); +} + +.project-link { + position: absolute; + bottom: 1.5rem; + left: 50%; + transform: translateX(-50%); + color: #00d4ff; + text-decoration: none; + font-weight: 600; + transition: color 0.3s ease; +} + +.project-link:hover { + color: #0099cc; +} + +.project-link.disabled { + color: #666; + cursor: not-allowed; +} + +.coming-soon { + opacity: 0.7; +} + +.coming-soon:hover { + opacity: 1; +} + +/* Progress Status Indicators */ +.progress-status { + position: absolute; + bottom: 1rem; + right: 1rem; + padding: 0.3rem 0.8rem; + border-radius: 15px; + font-size: 0.8rem; + font-weight: 600; +} + +.progress-status.completed { + background: rgba(34, 197, 94, 0.2); + color: #22c55e; + border: 1px solid rgba(34, 197, 94, 0.3); +} + +.progress-status.in-progress { + background: rgba(59, 130, 246, 0.2); + color: #3b82f6; + border: 1px solid rgba(59, 130, 246, 0.3); +} + +.progress-status.pending { + background: rgba(156, 163, 175, 0.2); + color: #9ca3af; + border: 1px solid rgba(156, 163, 175, 0.3); +} + +/* Coming Soon Badge */ +.coming-soon-badge { + background: rgba(251, 191, 36, 0.2) !important; + color: #fbbf24 !important; + border: 1px solid rgba(251, 191, 36, 0.3) !important; +} + +/* Support Section */ +.support { + background: #0a0a0a; +} + +.support-text { + text-align: center; + font-size: 1.1rem; + color: #b0b0b0; + margin-bottom: 3rem; + max-width: 600px; + margin-left: auto; + margin-right: auto; +} + +.donation-links { + display: flex; + gap: 1rem; + justify-content: center; + flex-wrap: wrap; +} + +.donation-btn { + display: flex; + align-items: center; + gap: 0.5rem; + padding: 12px 20px; + text-decoration: none; + border-radius: 25px; + font-weight: 600; + transition: all 0.3s ease; + border: 2px solid rgba(0, 212, 255, 0.3); + background: rgba(0, 212, 255, 0.1); + color: #00d4ff; +} + +.donation-btn:hover { + transform: translateY(-2px); + border-color: #00d4ff; + background: rgba(0, 212, 255, 0.2); + box-shadow: 0 5px 15px rgba(0, 212, 255, 0.2); +} + +.donation-icon { + font-size: 1.2rem; +} + +/* Project Features */ +.project-features { + background: #0a0a0a; +} + +/* Project Overview */ +.project-overview { + background: #111111; +} + +.overview-content { + display: grid; + grid-template-columns: 2fr 1fr; + gap: 3rem; + align-items: center; +} + +.overview-text p { + font-size: 1.1rem; + margin-bottom: 1.5rem; + color: #b0b0b0; + line-height: 1.8; +} + +.overview-stats { + display: flex; + flex-direction: column; + gap: 2rem; +} + +/* Project Hero */ +.project-hero { + min-height: 80vh; + display: flex; + align-items: center; + background: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 100%); + position: relative; + overflow: hidden; +} + +.project-hero::before { + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: radial-gradient(circle at 70% 30%, rgba(0, 212, 255, 0.1) 0%, transparent 50%); +} + +.project-hero-content { + text-align: center; + position: relative; + z-index: 2; +} + +.project-title { + font-size: 4rem; + font-weight: 700; + margin-bottom: 1rem; + background: linear-gradient(135deg, #e0e0e0 0%, #00d4ff 100%); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; +} + +.project-subtitle { + font-size: 1.3rem; + margin-bottom: 2rem; + color: #b0b0b0; + max-width: 700px; + margin-left: auto; + margin-right: auto; +} + +.project-badges { + display: flex; + gap: 1rem; + justify-content: center; + margin-bottom: 2rem; + flex-wrap: wrap; +} + +.badge { + background: rgba(0, 212, 255, 0.2); + color: #00d4ff; + padding: 0.5rem 1rem; + border-radius: 20px; + font-size: 0.9rem; + font-weight: 600; + border: 1px solid rgba(0, 212, 255, 0.3); +} + +.project-buttons { + display: flex; + gap: 1rem; + justify-content: center; + flex-wrap: wrap; +} + +/* Tech Specs */ +.tech-specs { + background: #111111; +} + +.specs-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); + gap: 2rem; +} + +.spec-category { + background: #0a0a0a; + padding: 2rem; + border-radius: 15px; + border: 1px solid rgba(0, 212, 255, 0.1); +} + +.spec-category h3 { + color: #00d4ff; + margin-bottom: 1rem; + font-size: 1.3rem; +} + +.spec-category ul { + list-style: none; +} + +.spec-category li { + color: #b0b0b0; + padding: 0.5rem 0; + border-bottom: 1px solid rgba(255, 255, 255, 0.1); + position: relative; + padding-left: 1.5rem; +} + +.spec-category li::before { + content: '✓'; + position: absolute; + left: 0; + color: #00d4ff; + font-weight: bold; +} + +.spec-category li:last-child { + border-bottom: none; +} + +/* Learning Section */ +.learning-section { + background: #0a0a0a; +} + +.learning-cards { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); + gap: 2rem; +} + +.learning-card { + background: #111111; + padding: 2rem; + border-radius: 15px; + border: 1px solid rgba(0, 212, 255, 0.1); + position: relative; + transition: all 0.3s ease; +} + +.learning-card:hover { + transform: translateY(-5px); + border-color: rgba(0, 212, 255, 0.3); + box-shadow: 0 10px 30px rgba(0, 212, 255, 0.1); +} + +.learning-number { + position: absolute; + top: -15px; + left: 2rem; + background: linear-gradient(135deg, #00d4ff 0%, #0099cc 100%); + color: #0a0a0a; + width: 40px; + height: 40px; + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + font-weight: 700; + font-size: 1.1rem; +} + +.learning-card h3 { + color: #e0e0e0; + margin-bottom: 1rem; + margin-top: 1rem; + font-size: 1.3rem; +} + +.learning-card p { + color: #b0b0b0; + line-height: 1.6; +} + +/* CTA Sections */ +.cta, +.get-started { + background: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 100%); + text-align: center; + position: relative; + overflow: hidden; +} + +.cta::before, +.get-started::before { + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: radial-gradient(circle at 50% 50%, rgba(0, 212, 255, 0.1) 0%, transparent 70%); +} + +.cta h2, +.get-started h2 { + font-size: 2.5rem; + margin-bottom: 1rem; + color: #e0e0e0; + position: relative; + z-index: 2; +} + +.cta p, +.get-started p { + font-size: 1.2rem; + margin-bottom: 2rem; + color: #b0b0b0; + position: relative; + z-index: 2; +} + +.download-buttons { + display: flex; + gap: 1rem; + justify-content: center; + flex-wrap: wrap; + position: relative; + z-index: 2; +} + +/* Footer */ +.footer { + background: #0a0a0a; + border-top: 1px solid rgba(0, 212, 255, 0.1); + padding: 3rem 0 1rem; +} + +.footer-content { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); + gap: 2rem; + margin-bottom: 2rem; +} + +.footer-section h3, +.footer-section h4 { + color: #00d4ff; + margin-bottom: 1rem; +} + +.footer-section p { + color: #b0b0b0; + line-height: 1.6; +} + +.footer-section ul { + list-style: none; +} + +.footer-section ul li { + margin-bottom: 0.5rem; +} + +.footer-section ul li a { + color: #b0b0b0; + text-decoration: none; + transition: color 0.3s ease; +} + +.footer-section ul li a:hover { + color: #00d4ff; +} + +.footer-bottom { + text-align: center; + padding-top: 2rem; + border-top: 1px solid rgba(255, 255, 255, 0.1); + color: #666; +} + +/* Responsive Design */ +@media (max-width: 768px) { + .hamburger { + display: flex; + } + + .nav-menu { + position: fixed; + left: -100%; + top: 70px; + flex-direction: column; + background-color: rgba(10, 10, 10, 0.95); + width: 100%; + text-align: center; + transition: 0.3s; + backdrop-filter: blur(10px); + padding: 2rem 0; + } + + .nav-menu.active { + left: 0; + } + + .nav-menu li { + margin: 1rem 0; + } + + .hero-title, + .project-title { + font-size: 2.5rem; + } + + .hero-subtitle, + .project-subtitle { + font-size: 1.1rem; + } + + .hero-buttons, + .project-buttons, + .download-buttons { + flex-direction: column; + align-items: center; + } + + .about-content, + .overview-content { + grid-template-columns: 1fr; + gap: 2rem; + } + + .about-stats, + .overview-stats { + flex-direction: row; + justify-content: space-around; + } + + .section-title { + font-size: 2rem; + } + + .cta h2, + .get-started h2 { + font-size: 2rem; + } + + .donation-links { + flex-direction: column; + align-items: center; + } + + .features-grid { + grid-template-columns: 1fr; + } +} + +@media (max-width: 480px) { + .container { + padding: 0 15px; + } + + .hero-title, + .project-title { + font-size: 2rem; + } + + .section-title { + font-size: 1.8rem; + } + + .mission-content, + .features-grid, + .learning-cards { + grid-template-columns: 1fr; + } + + .about-stats, + .overview-stats { + flex-direction: column; + gap: 1rem; + } + + .project-badges { + flex-direction: column; + align-items: center; + } + + .specs-grid { + grid-template-columns: 1fr; + } +} + +/* Smooth scrolling */ +html { + scroll-behavior: smooth; +} + +/* Loading animations */ +@keyframes fadeInUp { + from { + opacity: 0; + transform: translateY(30px); + } + to { + opacity: 1; + transform: translateY(0); + } +} + +.hero-content, +.project-hero-content { + animation: fadeInUp 1s ease-out; +} + +/* Focus styles for accessibility */ +.btn:focus, +.nav-link:focus { + outline: 2px solid #00d4ff; + outline-offset: 2px; +} + +/* Reduced motion support */ +@media (prefers-reduced-motion: reduce) { + * { + animation-duration: 0.01ms !important; + animation-iteration-count: 1 !important; + transition-duration: 0.01ms !important; + } + + html { + scroll-behavior: auto; + } +} + +/* Learning cards with progress status */ +.learning-card { + padding-bottom: 4rem; +} +