From cfeffe9ac591689a768a0203e1b52c6bf7bb10be Mon Sep 17 00:00:00 2001 From: AYUSH GAUTAM <142661926+Ayushgautam16@users.noreply.github.com> Date: Wed, 29 Oct 2025 20:52:31 +0530 Subject: [PATCH 1/6] Add files via upload --- .gitignore | 94 +++++++++--- DEPLOYMENT.md | 154 +++++++++++++++++++ README.md | 236 ++++++++++++++++++----------- index.html | 91 ++++++++++++ index1.html | 0 script.js | 405 ++++++++++++++++++++++++++++++++++++++++++++++++++ styles.css | 367 +++++++++++++++++++++++++++++++++++++++++++++ 7 files changed, 1236 insertions(+), 111 deletions(-) create mode 100644 DEPLOYMENT.md create mode 100644 index.html create mode 100644 index1.html create mode 100644 script.js create mode 100644 styles.css diff --git a/.gitignore b/.gitignore index d663edd..c2365c8 100644 --- a/.gitignore +++ b/.gitignore @@ -1,23 +1,71 @@ -# Java -*.class -*.log -*.jar -*.war -*.ear -# Build directories -target/ -build/ -out/ -bin/ -# Editor temporary files -*.swp -*~ -# IDE files -.idea/ -.vscode/ -*.iml -*.iws -*.ipr -# Other -.DS_Store -Thumbs.db \ No newline at end of file +# Dependencies +node_modules/ +npm-debug.log* +yarn-debug.log* +yarn-error.log* + +# Runtime data +pids +*.pid +*.seed +*.pid.lock + +# Coverage directory used by tools like istanbul +coverage/ + +# nyc test coverage +.nyc_output + +# Grunt intermediate storage +.grunt + +# Bower dependency directory +bower_components + +# node-waf configuration +.lock-wscript + +# Compiled binary addons +build/Release + +# Dependency directories +jspm_packages/ + +# Optional npm cache directory +.npm + +# Optional REPL history +.node_repl_history + +# Output of 'npm pack' +*.tgz + +# Yarn Integrity file +.yarn-integrity + +# dotenv environment variables file +.env + +# IDE files +.vscode/ +.idea/ +*.swp +*.swo +*~ + +# OS generated files +.DS_Store +.DS_Store? +._* +.Spotlight-V100 +.Trashes +ehthumbs.db +Thumbs.db + +# Logs +logs +*.log + +# Temporary files +tmp/ +temp/ diff --git a/DEPLOYMENT.md b/DEPLOYMENT.md new file mode 100644 index 0000000..652697d --- /dev/null +++ b/DEPLOYMENT.md @@ -0,0 +1,154 @@ +# ๐Ÿš€ GitHub Pages Deployment Guide + +This guide will walk you through deploying your Singly Linked List Game to GitHub Pages. + +## Prerequisites + +- A GitHub account +- Git installed on your computer +- Basic knowledge of Git commands + +## Step-by-Step Deployment + +### 1. Create a New Repository + +1. Go to [GitHub](https://github.com) and sign in +2. Click the "+" icon in the top right corner +3. Select "New repository" +4. Name your repository (e.g., `singly-linked-list-game`) +5. Make it **Public** (required for free GitHub Pages) +6. Don't initialize with README (we already have one) +7. Click "Create repository" + +### 2. Upload Your Files + +#### Option A: Using GitHub Web Interface +1. In your new repository, click "uploading an existing file" +2. Drag and drop all your project files: + - `index.html` + - `styles.css` + - `script.js` + - `README.md` + - `.gitignore` +3. Add a commit message: "Initial commit: Singly Linked List Game" +4. Click "Commit changes" + +#### Option B: Using Git Command Line +```bash +# Clone the repository +git clone https://github.com/yourusername/singly-linked-list-game.git +cd singly-linked-list-game + +# Copy your project files to this directory +# (index.html, styles.css, script.js, README.md, .gitignore) + +# Add all files +git add . + +# Commit +git commit -m "Initial commit: Singly Linked List Game" + +# Push to GitHub +git push origin main +``` + +### 3. Enable GitHub Pages + +1. Go to your repository on GitHub +2. Click on **Settings** tab +3. Scroll down to **Pages** section (or click "Pages" in the left sidebar) +4. Under **Source**, select "Deploy from a branch" +5. Under **Branch**, select `main` (or `master`) +6. Click **Save** + +### 4. Wait for Deployment + +- GitHub will automatically build and deploy your site +- This usually takes 1-5 minutes +- You'll see a green checkmark when deployment is complete + +### 5. Access Your Game + +Your game will be available at: +``` +https://yourusername.github.io/singly-linked-list-game +``` + +## ๐ŸŽฏ Custom Domain (Optional) + +If you want to use a custom domain: + +1. In the Pages settings, enter your domain in the "Custom domain" field +2. Add a CNAME record in your domain provider's DNS settings +3. Point it to `yourusername.github.io` + +## ๐Ÿ”„ Updating Your Game + +To update your game after making changes: + +### Using GitHub Web Interface +1. Navigate to the file you want to edit +2. Click the pencil icon to edit +3. Make your changes +4. Commit with a descriptive message + +### Using Git Command Line +```bash +# Pull latest changes +git pull origin main + +# Make your changes to files + +# Add and commit +git add . +git commit -m "Update: [describe your changes]" + +# Push to GitHub +git push origin main +``` + +## ๐Ÿ› Troubleshooting + +### Common Issues + +**Page not loading:** +- Check if the repository is public +- Verify all files are in the root directory +- Wait a few minutes for deployment to complete + +**Game not working:** +- Check browser console for JavaScript errors +- Ensure all file paths are correct +- Verify all files were uploaded + +**Styling issues:** +- Check if CSS file was uploaded correctly +- Verify file names match exactly (case-sensitive) + +### Getting Help + +- Check the [GitHub Pages documentation](https://pages.github.com/) +- Look for error messages in the Actions tab +- Verify your repository settings + +## ๐Ÿ“ฑ Testing + +After deployment, test your game on: +- Desktop browsers (Chrome, Firefox, Safari, Edge) +- Mobile devices +- Different screen sizes +- Various browsers + +## ๐ŸŽ‰ Success! + +Once deployed, you can: +- Share your game with friends and students +- Use it in educational settings +- Showcase your programming skills +- Contribute to open source education + +--- + +**Happy Deploying! ๐Ÿš€** + +Your Singly Linked List Game will be live on the web and accessible to anyone with an internet connection! diff --git a/README.md b/README.md index 866e27f..23e85d5 100644 --- a/README.md +++ b/README.md @@ -1,88 +1,148 @@ -# Hacktoberfest Projects Repository - -Welcome to the **Hacktoberfest Projects** repository! This is a place where developers can upload and showcase their full stack projects. Whether you're an experienced developer or just starting, feel free to contribute your projects and help others learn. - -## Table of Contents - -- [About the Repository](#about-the-repository) -- [How to Get Started](#how-to-get-started) -- [How to Contribute](#how-to-contribute) -- [Past Contributors](#contributors) -- [License](#license) - -## About the Repository - -This repository collects full stack projects using popular technologies like: - -- **Frontend**: HTML, CSS, JavaScript, React, Angular, Vue.js, etc. -- **Backend**: PHP, Go, Node.js, Express, Django, etc. -- **Databases**: MongoDB, PostgreSQL, MySQL, etc. - -Each project is designed to be easy to set up and customize, offering a great resource for developers of all levels. - -## How to Get Started - -Follow these steps to start using this repository: - -1. **Clone the repository** - - ```bash - git clone https://github.com/gitsofaryan/Hacktoberfest-Projects-2024.git - cd Hacktoberfest-Projects-2024 - -2. Explore projects: Look through the folders to find projects that interest you. - -3. Run a project: Each project has a README file with instructions on how to set it up and run. - - -## How to Contribute -We welcome your contributions! Hereโ€™s how to add your project to the repository: - -### Steps to Contribute - -1. Fork the repository: Click the "Fork" button at the top of the page. - -2. Create a new branch for your project: - -```bash -git checkout -b your-project-name -``` - -3. Add your project: Create a new folder for your project and include: - -- Your source code -- A README file with instructions for setup and running the project -- Any other important files (e.g., images, config files) - -4. Commit your changes: - -```bash -git add . -git commit -m "Added my project: Your Project Name" -``` - -5. Push to your branch: -```bash -git push origin your-project-name -``` - -6. Create a Pull Request: Go back to the original repository and click "New Pull Request." - -## Pull Request Guidelines - -- Make sure your README clearly explains how to set up and run your project. -- Follow best coding practices. -- Provide a brief description of your project in the Pull Request. - -[![Contributors](https://img.shields.io/github/contributors/gitsofaryan/Hacktoberfest-Projects-2025?style=for-the-badge)](https://github.com/gitsofaryan/Hacktoberfest-Projects-2025/graphs/contributors) - - -

- - Contributors - -

- -See the full list of contributors and their contributions on the [`GitHub Contributors Graph`](https://github.com/gitsofaryan/Hacktoberfest-Projects-2025/graphs/contributors). - -### Thank you for contributing to the Hacktoberfest Projects repository! Weโ€™re excited to see your projects and hope this helps you grow as a developer. Happy coding! +# ๐Ÿ”— Singly Linked List Game + +An interactive, educational web game that teaches and tests knowledge of singly linked list data structure operations through engaging gameplay. + +## ๐ŸŽฎ Game Features + +### Core Operations +- **Insert**: Add new nodes to the linked list +- **Delete**: Remove nodes with specific values +- **Search**: Find values within the linked list +- **Reverse**: Reverse the entire linked list structure + +### Game Mechanics +- **Scoring System**: Earn points for successful operations +- **Level Progression**: Advance through levels as you score points +- **Visual Feedback**: Real-time visualization of the linked list structure +- **Interactive Tutorial**: Comprehensive guide for beginners +- **Responsive Design**: Works on desktop and mobile devices + +### Visual Elements +- Beautiful gradient backgrounds and modern UI +- Animated node representations with arrows +- Confetti effects for level-ups +- Smooth transitions and hover effects + +## ๐Ÿš€ How to Play + +1. **Start the Game**: Click "New Game" to begin +2. **Choose Operation**: Select from Insert, Delete, Search, or Reverse +3. **Input Values**: Enter the required value (except for Reverse) +4. **Submit**: Click submit or press Enter to execute the operation +5. **Earn Points**: Successful operations award points and help you level up +6. **Learn**: Use the Tutorial button to understand linked list concepts + +## ๐Ÿ› ๏ธ Technical Implementation + +### Frontend Technologies +- **HTML5**: Semantic structure and accessibility +- **CSS3**: Modern styling with gradients, animations, and responsive design +- **JavaScript ES6+**: Object-oriented programming with classes and modules + +### Data Structure +- **SinglyLinkedList Class**: Implements core linked list operations +- **GameState Class**: Manages game progression and scoring +- **GameController Class**: Handles user interactions and game flow + +### Key Features +- Real-time linked list visualization +- Dynamic scoring and difficulty scaling +- Input validation and error handling +- Responsive design for all screen sizes +- Smooth animations and visual feedback + +## ๐ŸŒ GitHub Pages Deployment + +### Automatic Deployment +This game is designed to work seamlessly with GitHub Pages. Simply: + +1. **Push to GitHub**: Upload all files to a GitHub repository +2. **Enable Pages**: Go to repository Settings โ†’ Pages +3. **Select Source**: Choose "Deploy from a branch" +4. **Select Branch**: Choose `main` or `master` branch +5. **Save**: Your game will be available at `https://username.github.io/repository-name` + +### Manual Deployment +If you prefer manual deployment: + +1. **Build the Project**: All files are already production-ready +2. **Upload to Web Server**: Place files in your web server's public directory +3. **Configure Server**: Ensure your server serves static files correctly + +### File Structure for Deployment +``` +repository/ +โ”œโ”€โ”€ index.html # Main game page +โ”œโ”€โ”€ styles.css # Game styling +โ”œโ”€โ”€ script.js # Game logic +โ”œโ”€โ”€ README.md # This file +โ””โ”€โ”€ .gitignore # Git ignore file (optional) +``` + +## ๐Ÿ“ฑ Browser Compatibility + +- **Chrome**: 60+ (Full support) +- **Firefox**: 55+ (Full support) +- **Safari**: 12+ (Full support) +- **Edge**: 79+ (Full support) +- **Mobile Browsers**: iOS Safari 12+, Chrome Mobile 60+ + +## ๐ŸŽฏ Learning Objectives + +This game helps players understand: + +- **Data Structure Concepts**: How linked lists organize data +- **Algorithm Implementation**: Step-by-step operation execution +- **Memory Management**: How nodes reference each other +- **Problem Solving**: Strategic thinking for data manipulation +- **Visual Learning**: Seeing abstract concepts in action + +## ๐Ÿ”ง Customization + +### Adding New Operations +To add new linked list operations: + +1. Add the operation button to `index.html` +2. Implement the method in the `SinglyLinkedList` class +3. Add case handling in the `executeOperation` method +4. Update scoring and feedback logic + +### Modifying Visual Styles +The game uses CSS custom properties and modern CSS features: +- Modify color schemes in `styles.css` +- Adjust animations and transitions +- Customize responsive breakpoints +- Update typography and spacing + +## ๐Ÿ“Š Performance Features + +- **Efficient Rendering**: Minimal DOM manipulation +- **Memory Management**: Proper cleanup of event listeners +- **Smooth Animations**: CSS-based animations for better performance +- **Responsive Updates**: Only update necessary UI elements + +## ๐Ÿค Contributing + +Feel free to contribute to this project by: + +1. **Forking** the repository +2. **Creating** a feature branch +3. **Making** your improvements +4. **Submitting** a pull request + +## ๐Ÿ“„ License + +This project is open source and available under the [MIT License](LICENSE). + +## ๐ŸŽ‰ Acknowledgments + +- Built with modern web technologies +- Designed for educational purposes +- Inspired by data structure learning games +- Created with accessibility and user experience in mind + +--- + +**Happy Learning! ๐Ÿš€** + +Start playing the game and master the concepts of singly linked lists through interactive gameplay! diff --git a/index.html b/index.html new file mode 100644 index 0000000..e28f5e5 --- /dev/null +++ b/index.html @@ -0,0 +1,91 @@ + + + + + + Singly Linked List Game + + + + +
+
+

๐Ÿ”— Singly Linked List Game

+

Learn and practice singly linked list operations through interactive gameplay!

+
+ +
+ + +
+ Score: 0 + Level: 1 +
+
+ +
+
+ +
+ +
+
+

Operations

+
+ + + + +
+
+ +
+

Input

+
+ + +
+
+ + +
+
+ +
+
+ × +

How to Play

+
+

๐ŸŽฏ Objective

+

Complete linked list operations to earn points and advance through levels!

+ +

๐Ÿ”ง Operations

+
    +
  • Insert: Add a new node with the specified value
    • +
  • Delete: Remove a node with the specified value
    • +
  • Search: Find if a value exists in the list
    • +
  • Reverse: Reverse the entire linked list
    • +
+ +

๐ŸŽฎ Gameplay

+
    +
  • Choose an operation from the buttons
    • +
  • Enter the required value (if needed)
    • +
  • Submit your answer
    • +
  • Earn points for correct operations
    • +
  • Level up as you progress!
    • +
+ +

๐Ÿ“š What is a Singly Linked List?

+

A singly linked list is a data structure where each element (node) contains data and a reference to the next node. The last node points to null, indicating the end of the list.

+
+
+
+
+ + + + diff --git a/index1.html b/index1.html new file mode 100644 index 0000000..e69de29 diff --git a/script.js b/script.js new file mode 100644 index 0000000..8708af7 --- /dev/null +++ b/script.js @@ -0,0 +1,405 @@ +// Singly Linked List Game +class SinglyLinkedList { + constructor() { + this.head = null; + this.size = 0; + } + + // Insert a new node at the end + insert(value) { + const newNode = { data: value, next: null }; + + if (!this.head) { + this.head = newNode; + } else { + let current = this.head; + while (current.next) { + current = current.next; + } + current.next = newNode; + } + this.size++; + return true; + } + + // Delete a node with given value + delete(value) { + if (!this.head) return false; + + if (this.head.data === value) { + this.head = this.head.next; + this.size--; + return true; + } + + let current = this.head; + while (current.next && current.next.data !== value) { + current = current.next; + } + + if (current.next) { + current.next = current.next.next; + this.size--; + return true; + } + return false; + } + + // Search for a value + search(value) { + let current = this.head; + while (current) { + if (current.data === value) { + return true; + } + current = current.next; + } + return false; + } + + // Reverse the linked list + reverse() { + let prev = null; + let current = this.head; + let next = null; + + while (current) { + next = current.next; + current.next = prev; + prev = current; + current = next; + } + + this.head = prev; + return true; + } + + // Get array representation + toArray() { + const result = []; + let current = this.head; + while (current) { + result.push(current.data); + current = current.next; + } + return result; + } + + // Clear the list + clear() { + this.head = null; + this.size = 0; + } +} + +// Game State +class GameState { + constructor() { + this.linkedList = new SinglyLinkedList(); + this.score = 0; + this.level = 1; + this.currentOperation = null; + this.gameHistory = []; + this.difficulty = 1; + } + + startNewGame() { + this.linkedList.clear(); + this.score = 0; + this.level = 1; + this.currentOperation = null; + this.gameHistory = []; + this.difficulty = 1; + + // Add some initial nodes for the game + this.linkedList.insert(5); + this.linkedList.insert(10); + this.linkedList.insert(15); + + this.updateDisplay(); + this.showFeedback("New game started! The linked list has been initialized with some values.", "info"); + } + + selectOperation(operation) { + this.currentOperation = operation; + this.updateOperationButtons(); + this.showOperationInstructions(operation); + } + + executeOperation(value) { + if (!this.currentOperation) { + this.showFeedback("Please select an operation first!", "error"); + return; + } + + let success = false; + let message = ""; + + switch (this.currentOperation) { + case 'insert': + success = this.linkedList.insert(value); + message = success ? + `Successfully inserted ${value} into the linked list!` : + `Failed to insert ${value}`; + break; + + case 'delete': + success = this.linkedList.delete(value); + message = success ? + `Successfully deleted ${value} from the linked list!` : + `Value ${value} not found in the linked list`; + break; + + case 'search': + const found = this.linkedList.search(value); + success = true; + message = found ? + `Value ${value} found in the linked list!` : + `Value ${value} not found in the linked list`; + break; + + case 'reverse': + success = this.linkedList.reverse(); + message = success ? + "Successfully reversed the linked list!" : + "Failed to reverse the linked list"; + break; + } + + if (success) { + this.score += this.calculatePoints(); + this.checkLevelUp(); + this.gameHistory.push({ + operation: this.currentOperation, + value: value, + success: success, + timestamp: new Date() + }); + } + + this.showFeedback(message, success ? "success" : "error"); + this.updateDisplay(); + this.currentOperation = null; + this.updateOperationButtons(); + } + + calculatePoints() { + const basePoints = 10; + const difficultyMultiplier = this.difficulty; + const sizeBonus = Math.floor(this.linkedList.size / 5) * 5; + return basePoints * difficultyMultiplier + sizeBonus; + } + + checkLevelUp() { + const newLevel = Math.floor(this.score / 100) + 1; + if (newLevel > this.level) { + this.level = newLevel; + this.difficulty = Math.min(this.level, 5); + this.showFeedback(`๐ŸŽ‰ Level Up! You're now at level ${this.level}!`, "success"); + } + } + + showOperationInstructions(operation) { + const instructions = { + insert: "Enter a value to insert into the linked list", + delete: "Enter a value to delete from the linked list", + search: "Enter a value to search for in the linked list", + reverse: "Click submit to reverse the entire linked list" + }; + + this.showFeedback(instructions[operation], "info"); + + // Show/hide input panel based on operation + const inputPanel = document.getElementById('inputPanel'); + if (operation === 'reverse') { + inputPanel.style.display = 'none'; + } else { + inputPanel.style.display = 'block'; + } + } + + updateOperationButtons() { + const buttons = document.querySelectorAll('.op-btn'); + buttons.forEach(btn => { + btn.classList.remove('active'); + if (btn.dataset.operation === this.currentOperation) { + btn.classList.add('active'); + } + }); + } + + showFeedback(message, type) { + const feedbackText = document.getElementById('feedbackText'); + feedbackText.textContent = message; + feedbackText.className = `feedback-text ${type}`; + + // Auto-hide after 3 seconds + setTimeout(() => { + feedbackText.textContent = ''; + feedbackText.className = 'feedback-text'; + }, 3000); + } + + updateDisplay() { + this.updateScore(); + this.updateLevel(); + this.updateLinkedListVisual(); + } + + updateScore() { + document.getElementById('score').textContent = this.score; + } + + updateLevel() { + document.getElementById('level').textContent = this.level; + } + + updateLinkedListVisual() { + const visual = document.getElementById('linkedListVisual'); + const nodes = this.linkedList.toArray(); + + if (nodes.length === 0) { + visual.innerHTML = '

Empty linked list

'; + return; + } + + let html = '
'; + + nodes.forEach((node, index) => { + html += `
${node}
`; + if (index < nodes.length - 1) { + html += 'โ†’'; + } + }); + + html += 'null'; + html += '
'; + + visual.innerHTML = html; + } +} + +// Game Controller +class GameController { + constructor() { + this.gameState = new GameState(); + this.initializeEventListeners(); + this.gameState.startNewGame(); + } + + initializeEventListeners() { + // New Game Button + document.getElementById('newGameBtn').addEventListener('click', () => { + this.gameState.startNewGame(); + }); + + // Tutorial Button + document.getElementById('tutorialBtn').addEventListener('click', () => { + this.showTutorial(); + }); + + // Operation Buttons + document.querySelectorAll('.op-btn').forEach(btn => { + btn.addEventListener('click', (e) => { + const operation = e.target.dataset.operation; + this.gameState.selectOperation(operation); + }); + }); + + // Submit Button + document.getElementById('submitBtn').addEventListener('click', () => { + this.handleSubmit(); + }); + + // Enter key in input field + document.getElementById('valueInput').addEventListener('keypress', (e) => { + if (e.key === 'Enter') { + this.handleSubmit(); + } + }); + + // Tutorial Modal + const modal = document.getElementById('tutorialModal'); + const closeBtn = document.querySelector('.close'); + + closeBtn.addEventListener('click', () => { + modal.style.display = 'none'; + }); + + window.addEventListener('click', (e) => { + if (e.target === modal) { + modal.style.display = 'none'; + } + }); + } + + handleSubmit() { + const input = document.getElementById('valueInput'); + const value = parseInt(input.value); + + if (isNaN(value) || value < 0 || value > 999) { + this.gameState.showFeedback("Please enter a valid number between 0 and 999", "error"); + return; + } + + this.gameState.executeOperation(value); + input.value = ''; + input.focus(); + } + + showTutorial() { + document.getElementById('tutorialModal').style.display = 'block'; + } +} + +// Initialize the game when the page loads +document.addEventListener('DOMContentLoaded', () => { + new GameController(); +}); + +// Add some fun easter eggs and animations +document.addEventListener('DOMContentLoaded', () => { + // Add confetti effect for level ups + const originalShowFeedback = GameState.prototype.showFeedback; + GameState.prototype.showFeedback = function(message, type) { + if (message.includes('Level Up')) { + this.createConfetti(); + } + originalShowFeedback.call(this, message, type); + }; + + // Confetti effect + GameState.prototype.createConfetti = function() { + const colors = ['#ff6b6b', '#4ecdc4', '#45b7d1', '#96ceb4', '#feca57']; + const confettiCount = 50; + + for (let i = 0; i < confettiCount; i++) { + setTimeout(() => { + const confetti = document.createElement('div'); + confetti.style.position = 'fixed'; + confetti.style.width = '10px'; + confetti.style.height = '10px'; + confetti.style.backgroundColor = colors[Math.floor(Math.random() * colors.length)]; + confetti.style.left = Math.random() * window.innerWidth + 'px'; + confetti.style.top = '-10px'; + confetti.style.borderRadius = '50%'; + confetti.style.pointerEvents = 'none'; + confetti.style.zIndex = '9999'; + + document.body.appendChild(confetti); + + const animation = confetti.animate([ + { transform: 'translateY(0px) rotate(0deg)', opacity: 1 }, + { transform: `translateY(${window.innerHeight + 100}px) rotate(${Math.random() * 360}deg)`, opacity: 0 } + ], { + duration: 3000 + Math.random() * 2000, + easing: 'cubic-bezier(0.25, 0.46, 0.45, 0.94)' + }); + + animation.onfinish = () => { + document.body.removeChild(confetti); + }; + }, i * 50); + } + }; +}); diff --git a/styles.css b/styles.css new file mode 100644 index 0000000..dedded6 --- /dev/null +++ b/styles.css @@ -0,0 +1,367 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body { + font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; + background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); + min-height: 100vh; + color: #333; +} + +.container { + max-width: 1200px; + margin: 0 auto; + padding: 20px; +} + +header { + text-align: center; + margin-bottom: 30px; + color: white; +} + +header h1 { + font-size: 2.5rem; + font-weight: 700; + margin-bottom: 10px; + text-shadow: 0 2px 4px rgba(0,0,0,0.3); +} + +header p { + font-size: 1.1rem; + opacity: 0.9; + font-weight: 300; +} + +.game-controls { + display: flex; + justify-content: center; + align-items: center; + gap: 20px; + margin-bottom: 30px; + flex-wrap: wrap; +} + +.btn { + padding: 12px 24px; + border: none; + border-radius: 8px; + font-size: 1rem; + font-weight: 500; + cursor: pointer; + transition: all 0.3s ease; + text-transform: uppercase; + letter-spacing: 0.5px; +} + +.btn-primary { + background: linear-gradient(45deg, #ff6b6b, #ee5a24); + color: white; + box-shadow: 0 4px 15px rgba(255, 107, 107, 0.4); +} + +.btn-primary:hover { + transform: translateY(-2px); + box-shadow: 0 6px 20px rgba(255, 107, 107, 0.6); +} + +.btn-secondary { + background: linear-gradient(45deg, #4ecdc4, #44a08d); + color: white; + box-shadow: 0 4px 15px rgba(78, 205, 196, 0.4); +} + +.btn-secondary:hover { + transform: translateY(-2px); + box-shadow: 0 6px 20px rgba(78, 205, 196, 0.6); +} + +.btn-success { + background: linear-gradient(45deg, #2ecc71, #27ae60); + color: white; + box-shadow: 0 4px 15px rgba(46, 204, 113, 0.4); +} + +.btn-success:hover { + transform: translateY(-2px); + box-shadow: 0 6px 20px rgba(46, 204, 113, 0.6); +} + +.score-display { + display: flex; + gap: 20px; + color: white; + font-weight: 600; + font-size: 1.1rem; +} + +.game-area { + display: grid; + grid-template-columns: 2fr 1fr; + gap: 30px; + margin-bottom: 30px; +} + +.linked-list-visualization { + background: rgba(255, 255, 255, 0.95); + border-radius: 16px; + padding: 30px; + box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1); + backdrop-filter: blur(10px); + min-height: 400px; + display: flex; + align-items: center; + justify-content: center; +} + +.linked-list-container { + display: flex; + align-items: center; + gap: 15px; + flex-wrap: wrap; + justify-content: center; +} + +.node { + display: flex; + align-items: center; + background: linear-gradient(45deg, #667eea, #764ba2); + color: white; + padding: 15px 20px; + border-radius: 12px; + font-weight: 600; + font-size: 1.1rem; + box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3); + position: relative; + transition: all 0.3s ease; +} + +.node:hover { + transform: scale(1.05); + box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4); +} + +.arrow { + font-size: 1.5rem; + color: #667eea; + font-weight: bold; +} + +.null-pointer { + color: #e74c3c; + font-weight: bold; + font-size: 1.2rem; +} + +.game-panel { + display: flex; + flex-direction: column; + gap: 20px; +} + +.operation-panel, .input-panel, .feedback-panel { + background: rgba(255, 255, 255, 0.95); + border-radius: 16px; + padding: 20px; + box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1); + backdrop-filter: blur(10px); +} + +.operation-panel h3, .input-panel h3, .feedback-panel h3 { + margin-bottom: 15px; + color: #333; + font-weight: 600; +} + +.operation-buttons { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 10px; +} + +.op-btn { + padding: 12px 16px; + border: 2px solid #667eea; + background: white; + color: #667eea; + border-radius: 8px; + cursor: pointer; + transition: all 0.3s ease; + font-weight: 500; +} + +.op-btn:hover, .op-btn.active { + background: #667eea; + color: white; + transform: translateY(-2px); +} + +.op-btn:disabled { + opacity: 0.5; + cursor: not-allowed; + transform: none; +} + +.input-group { + display: flex; + gap: 10px; +} + +.input-group input { + flex: 1; + padding: 12px; + border: 2px solid #ddd; + border-radius: 8px; + font-size: 1rem; + transition: border-color 0.3s ease; +} + +.input-group input:focus { + outline: none; + border-color: #667eea; +} + +.feedback-text { + min-height: 60px; + padding: 15px; + border-radius: 8px; + font-weight: 500; +} + +.feedback-text.success { + background: #d4edda; + color: #155724; + border: 1px solid #c3e6cb; +} + +.feedback-text.error { + background: #f8d7da; + color: #721c24; + border: 1px solid #f5c6cb; +} + +.feedback-text.info { + background: #d1ecf1; + color: #0c5460; + border: 1px solid #bee5eb; +} + +.tutorial-modal { + display: none; + position: fixed; + z-index: 1000; + left: 0; + top: 0; + width: 100%; + height: 100%; + background-color: rgba(0, 0, 0, 0.5); + backdrop-filter: blur(5px); +} + +.modal-content { + background-color: white; + margin: 5% auto; + padding: 30px; + border-radius: 16px; + width: 90%; + max-width: 600px; + max-height: 80vh; + overflow-y: auto; + box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3); + position: relative; +} + +.close { + color: #aaa; + float: right; + font-size: 28px; + font-weight: bold; + cursor: pointer; + position: absolute; + right: 20px; + top: 20px; +} + +.close:hover { + color: #000; +} + +.tutorial-content h3 { + color: #667eea; + margin: 20px 0 10px 0; + font-size: 1.2rem; +} + +.tutorial-content ul { + margin-left: 20px; + margin-bottom: 15px; +} + +.tutorial-content li { + margin-bottom: 5px; +} + +.tutorial-content p { + line-height: 1.6; + margin-bottom: 15px; +} + +/* Responsive Design */ +@media (max-width: 768px) { + .game-area { + grid-template-columns: 1fr; + } + + .game-controls { + flex-direction: column; + gap: 15px; + } + + .score-display { + flex-direction: column; + gap: 10px; + text-align: center; + } + + .operation-buttons { + grid-template-columns: 1fr; + } + + .input-group { + flex-direction: column; + } + + header h1 { + font-size: 2rem; + } + + .container { + padding: 15px; + } +} + +/* Animation for nodes */ +@keyframes nodeAppear { + from { + opacity: 0; + transform: scale(0.8); + } + to { + opacity: 1; + transform: scale(1); + } +} + +.node { + animation: nodeAppear 0.5s ease-out; +} + +/* Highlight effect for active operations */ +.highlight { + background: linear-gradient(45deg, #f39c12, #e67e22) !important; + transform: scale(1.1); + box-shadow: 0 8px 25px rgba(243, 156, 18, 0.5) !important; +} From ef2a3c1bd10c249a2219dd745295e87780eed1c4 Mon Sep 17 00:00:00 2001 From: AYUSH GAUTAM <142661926+Ayushgautam16@users.noreply.github.com> Date: Wed, 29 Oct 2025 21:11:53 +0530 Subject: [PATCH 2/6] Todo webapp --- script.js | 650 ++++++++++++++++++++---------------------------------- style.css | 429 +++++++++++++++++++++++++++++++++++ 2 files changed, 674 insertions(+), 405 deletions(-) create mode 100644 style.css diff --git a/script.js b/script.js index 8708af7..6ad6b56 100644 --- a/script.js +++ b/script.js @@ -1,405 +1,245 @@ -// Singly Linked List Game -class SinglyLinkedList { - constructor() { - this.head = null; - this.size = 0; - } - - // Insert a new node at the end - insert(value) { - const newNode = { data: value, next: null }; - - if (!this.head) { - this.head = newNode; - } else { - let current = this.head; - while (current.next) { - current = current.next; - } - current.next = newNode; - } - this.size++; - return true; - } - - // Delete a node with given value - delete(value) { - if (!this.head) return false; - - if (this.head.data === value) { - this.head = this.head.next; - this.size--; - return true; - } - - let current = this.head; - while (current.next && current.next.data !== value) { - current = current.next; - } - - if (current.next) { - current.next = current.next.next; - this.size--; - return true; - } - return false; - } - - // Search for a value - search(value) { - let current = this.head; - while (current) { - if (current.data === value) { - return true; - } - current = current.next; - } - return false; - } - - // Reverse the linked list - reverse() { - let prev = null; - let current = this.head; - let next = null; - - while (current) { - next = current.next; - current.next = prev; - prev = current; - current = next; - } - - this.head = prev; - return true; - } - - // Get array representation - toArray() { - const result = []; - let current = this.head; - while (current) { - result.push(current.data); - current = current.next; - } - return result; - } - - // Clear the list - clear() { - this.head = null; - this.size = 0; - } -} - -// Game State -class GameState { - constructor() { - this.linkedList = new SinglyLinkedList(); - this.score = 0; - this.level = 1; - this.currentOperation = null; - this.gameHistory = []; - this.difficulty = 1; - } - - startNewGame() { - this.linkedList.clear(); - this.score = 0; - this.level = 1; - this.currentOperation = null; - this.gameHistory = []; - this.difficulty = 1; - - // Add some initial nodes for the game - this.linkedList.insert(5); - this.linkedList.insert(10); - this.linkedList.insert(15); - - this.updateDisplay(); - this.showFeedback("New game started! The linked list has been initialized with some values.", "info"); - } - - selectOperation(operation) { - this.currentOperation = operation; - this.updateOperationButtons(); - this.showOperationInstructions(operation); - } - - executeOperation(value) { - if (!this.currentOperation) { - this.showFeedback("Please select an operation first!", "error"); - return; - } - - let success = false; - let message = ""; - - switch (this.currentOperation) { - case 'insert': - success = this.linkedList.insert(value); - message = success ? - `Successfully inserted ${value} into the linked list!` : - `Failed to insert ${value}`; - break; - - case 'delete': - success = this.linkedList.delete(value); - message = success ? - `Successfully deleted ${value} from the linked list!` : - `Value ${value} not found in the linked list`; - break; - - case 'search': - const found = this.linkedList.search(value); - success = true; - message = found ? - `Value ${value} found in the linked list!` : - `Value ${value} not found in the linked list`; - break; - - case 'reverse': - success = this.linkedList.reverse(); - message = success ? - "Successfully reversed the linked list!" : - "Failed to reverse the linked list"; - break; - } - - if (success) { - this.score += this.calculatePoints(); - this.checkLevelUp(); - this.gameHistory.push({ - operation: this.currentOperation, - value: value, - success: success, - timestamp: new Date() - }); - } - - this.showFeedback(message, success ? "success" : "error"); - this.updateDisplay(); - this.currentOperation = null; - this.updateOperationButtons(); - } - - calculatePoints() { - const basePoints = 10; - const difficultyMultiplier = this.difficulty; - const sizeBonus = Math.floor(this.linkedList.size / 5) * 5; - return basePoints * difficultyMultiplier + sizeBonus; - } - - checkLevelUp() { - const newLevel = Math.floor(this.score / 100) + 1; - if (newLevel > this.level) { - this.level = newLevel; - this.difficulty = Math.min(this.level, 5); - this.showFeedback(`๐ŸŽ‰ Level Up! You're now at level ${this.level}!`, "success"); - } - } - - showOperationInstructions(operation) { - const instructions = { - insert: "Enter a value to insert into the linked list", - delete: "Enter a value to delete from the linked list", - search: "Enter a value to search for in the linked list", - reverse: "Click submit to reverse the entire linked list" - }; - - this.showFeedback(instructions[operation], "info"); - - // Show/hide input panel based on operation - const inputPanel = document.getElementById('inputPanel'); - if (operation === 'reverse') { - inputPanel.style.display = 'none'; - } else { - inputPanel.style.display = 'block'; - } - } - - updateOperationButtons() { - const buttons = document.querySelectorAll('.op-btn'); - buttons.forEach(btn => { - btn.classList.remove('active'); - if (btn.dataset.operation === this.currentOperation) { - btn.classList.add('active'); - } - }); - } - - showFeedback(message, type) { - const feedbackText = document.getElementById('feedbackText'); - feedbackText.textContent = message; - feedbackText.className = `feedback-text ${type}`; - - // Auto-hide after 3 seconds - setTimeout(() => { - feedbackText.textContent = ''; - feedbackText.className = 'feedback-text'; - }, 3000); - } - - updateDisplay() { - this.updateScore(); - this.updateLevel(); - this.updateLinkedListVisual(); - } - - updateScore() { - document.getElementById('score').textContent = this.score; - } - - updateLevel() { - document.getElementById('level').textContent = this.level; - } - - updateLinkedListVisual() { - const visual = document.getElementById('linkedListVisual'); - const nodes = this.linkedList.toArray(); - - if (nodes.length === 0) { - visual.innerHTML = '

Empty linked list

'; - return; - } - - let html = '
'; - - nodes.forEach((node, index) => { - html += `
${node}
`; - if (index < nodes.length - 1) { - html += 'โ†’'; - } - }); - - html += 'null'; - html += '
'; - - visual.innerHTML = html; - } -} - -// Game Controller -class GameController { - constructor() { - this.gameState = new GameState(); - this.initializeEventListeners(); - this.gameState.startNewGame(); - } - - initializeEventListeners() { - // New Game Button - document.getElementById('newGameBtn').addEventListener('click', () => { - this.gameState.startNewGame(); - }); - - // Tutorial Button - document.getElementById('tutorialBtn').addEventListener('click', () => { - this.showTutorial(); - }); - - // Operation Buttons - document.querySelectorAll('.op-btn').forEach(btn => { - btn.addEventListener('click', (e) => { - const operation = e.target.dataset.operation; - this.gameState.selectOperation(operation); - }); - }); - - // Submit Button - document.getElementById('submitBtn').addEventListener('click', () => { - this.handleSubmit(); - }); - - // Enter key in input field - document.getElementById('valueInput').addEventListener('keypress', (e) => { - if (e.key === 'Enter') { - this.handleSubmit(); - } - }); - - // Tutorial Modal - const modal = document.getElementById('tutorialModal'); - const closeBtn = document.querySelector('.close'); - - closeBtn.addEventListener('click', () => { - modal.style.display = 'none'; - }); - - window.addEventListener('click', (e) => { - if (e.target === modal) { - modal.style.display = 'none'; - } - }); - } - - handleSubmit() { - const input = document.getElementById('valueInput'); - const value = parseInt(input.value); - - if (isNaN(value) || value < 0 || value > 999) { - this.gameState.showFeedback("Please enter a valid number between 0 and 999", "error"); - return; - } - - this.gameState.executeOperation(value); - input.value = ''; - input.focus(); - } - - showTutorial() { - document.getElementById('tutorialModal').style.display = 'block'; - } -} - -// Initialize the game when the page loads -document.addEventListener('DOMContentLoaded', () => { - new GameController(); -}); - -// Add some fun easter eggs and animations -document.addEventListener('DOMContentLoaded', () => { - // Add confetti effect for level ups - const originalShowFeedback = GameState.prototype.showFeedback; - GameState.prototype.showFeedback = function(message, type) { - if (message.includes('Level Up')) { - this.createConfetti(); - } - originalShowFeedback.call(this, message, type); - }; - - // Confetti effect - GameState.prototype.createConfetti = function() { - const colors = ['#ff6b6b', '#4ecdc4', '#45b7d1', '#96ceb4', '#feca57']; - const confettiCount = 50; - - for (let i = 0; i < confettiCount; i++) { - setTimeout(() => { - const confetti = document.createElement('div'); - confetti.style.position = 'fixed'; - confetti.style.width = '10px'; - confetti.style.height = '10px'; - confetti.style.backgroundColor = colors[Math.floor(Math.random() * colors.length)]; - confetti.style.left = Math.random() * window.innerWidth + 'px'; - confetti.style.top = '-10px'; - confetti.style.borderRadius = '50%'; - confetti.style.pointerEvents = 'none'; - confetti.style.zIndex = '9999'; - - document.body.appendChild(confetti); - - const animation = confetti.animate([ - { transform: 'translateY(0px) rotate(0deg)', opacity: 1 }, - { transform: `translateY(${window.innerHeight + 100}px) rotate(${Math.random() * 360}deg)`, opacity: 0 } - ], { - duration: 3000 + Math.random() * 2000, - easing: 'cubic-bezier(0.25, 0.46, 0.45, 0.94)' - }); - - animation.onfinish = () => { - document.body.removeChild(confetti); - }; - }, i * 50); - } - }; -}); +class TodoApp { + constructor() { + this.todos = JSON.parse(localStorage.getItem('todos')) || []; + this.filteredTodos = [...this.todos]; + this.currentFilter = 'all'; + this.searchQuery = ''; + + this.initializeElements(); + this.bindEvents(); + this.renderTodos(); + this.updateStats(); + } + + initializeElements() { + this.todoInput = document.getElementById('todoInput'); + this.addBtn = document.getElementById('addBtn'); + this.todoList = document.getElementById('todoList'); + this.searchInput = document.getElementById('searchInput'); + this.prioritySelect = document.getElementById('prioritySelect'); + this.categorySelect = document.getElementById('categorySelect'); + this.dueDateInput = document.getElementById('dueDateInput'); + this.filterBtns = document.querySelectorAll('.filter-btn'); + } + + bindEvents() { + this.addBtn.addEventListener('click', () => this.addTodo()); + this.todoInput.addEventListener('keypress', (e) => { + if (e.key === 'Enter') this.addTodo(); + }); + + this.searchInput.addEventListener('input', (e) => { + this.searchQuery = e.target.value.toLowerCase(); + this.filterTodos(); + }); + + this.filterBtns.forEach(btn => { + btn.addEventListener('click', (e) => { + this.setActiveFilter(e.target.dataset.filter); + }); + }); + + // Set default due date to tomorrow + const tomorrow = new Date(); + tomorrow.setDate(tomorrow.getDate() + 1); + this.dueDateInput.value = tomorrow.toISOString().split('T')[0]; + } + + setActiveFilter(filter) { + this.currentFilter = filter; + this.filterBtns.forEach(btn => { + btn.classList.toggle('active', btn.dataset.filter === filter); + }); + this.filterTodos(); + } + + filterTodos() { + this.filteredTodos = this.todos.filter(todo => { + const matchesSearch = todo.text.toLowerCase().includes(this.searchQuery); + const matchesFilter = this.currentFilter === 'all' || + (this.currentFilter === 'pending' && !todo.completed) || + (this.currentFilter === 'completed' && todo.completed); + return matchesSearch && matchesFilter; + }); + this.renderTodos(); + } + + addTodo() { + const todoText = this.todoInput.value.trim(); + if (todoText === '') return; + + const todo = { + id: Date.now(), + text: todoText, + completed: false, + priority: this.prioritySelect.value, + category: this.categorySelect.value, + dueDate: this.dueDateInput.value, + createdAt: new Date().toISOString() + }; + + this.todos.push(todo); + this.saveTodos(); + this.filterTodos(); + this.updateStats(); + this.todoInput.value = ''; + this.todoInput.focus(); + } + + toggleTodo(id) { + const todo = this.todos.find(t => t.id === id); + if (todo) { + todo.completed = !todo.completed; + this.saveTodos(); + this.filterTodos(); + this.updateStats(); + } + } + + editTodo(id) { + const todo = this.todos.find(t => t.id === id); + if (!todo) return; + + const newText = prompt('Edit todo:', todo.text); + if (newText !== null && newText.trim() !== '') { + todo.text = newText.trim(); + this.saveTodos(); + this.filterTodos(); + } + } + + deleteTodo(id) { + if (confirm('Are you sure you want to delete this todo?')) { + this.todos = this.todos.filter(t => t.id !== id); + this.saveTodos(); + this.filterTodos(); + this.updateStats(); + } + } + + saveTodos() { + localStorage.setItem('todos', JSON.stringify(this.todos)); + } + + updateStats() { + const total = this.todos.length; + const completed = this.todos.filter(t => t.completed).length; + const pending = total - completed; + + document.getElementById('totalCount').textContent = total; + document.getElementById('completedCount').textContent = completed; + document.getElementById('pendingCount').textContent = pending; + } + + renderTodos() { + this.todoList.innerHTML = ''; + + if (this.filteredTodos.length === 0) { + const emptyState = this.searchQuery || this.currentFilter !== 'all' + ? 'No todos match your search/filter criteria.' + : 'No todos yet. Add one above!'; + + this.todoList.innerHTML = ` +
+ +

${emptyState}

+
+ `; + return; + } + + this.filteredTodos.forEach(todo => { + const li = document.createElement('li'); + li.className = `todo-item ${todo.completed ? 'completed' : ''}`; + + const dueDate = new Date(todo.dueDate); + const today = new Date(); + const tomorrow = new Date(today); + tomorrow.setDate(tomorrow.getDate() + 1); + + const isOverdue = !todo.completed && dueDate < today && dueDate.toDateString() !== today.toDateString(); + + li.innerHTML = ` +
+ ${this.escapeHtml(todo.text)} +
+
+ + + ${todo.priority} + + + + ${todo.category} + + + + ${this.formatDate(todo.dueDate)} + ${isOverdue ? ' ' : ''} + + + + ${this.formatRelativeTime(todo.createdAt)} + +
+
+ + + +
+ `; + + this.todoList.appendChild(li); + }); + } + + formatDate(dateString) { + const date = new Date(dateString); + const today = new Date(); + const tomorrow = new Date(today); + tomorrow.setDate(tomorrow.getDate() + 1); + + if (date.toDateString() === today.toDateString()) { + return 'Today'; + } else if (date.toDateString() === tomorrow.toDateString()) { + return 'Tomorrow'; + } else { + return date.toLocaleDateString('en-US', { + month: 'short', + day: 'numeric', + year: date.getFullYear() !== today.getFullYear() ? 'numeric' : undefined + }); + } + } + + formatRelativeTime(dateString) { + const date = new Date(dateString); + const now = new Date(); + const diffInMinutes = Math.floor((now - date) / (1000 * 60)); + + if (diffInMinutes < 1) return 'Just now'; + if (diffInMinutes < 60) return `${diffInMinutes}m ago`; + if (diffInMinutes < 1440) return `${Math.floor(diffInMinutes / 60)}h ago`; + return `${Math.floor(diffInMinutes / 1440)}d ago`; + } + + escapeHtml(text) { + const div = document.createElement('div'); + div.textContent = text; + return div.innerHTML; + } +} + +// Initialize the app when the page loads +document.addEventListener('DOMContentLoaded', () => { + window.todoApp = new TodoApp(); +}); diff --git a/style.css b/style.css new file mode 100644 index 0000000..a1ea8b5 --- /dev/null +++ b/style.css @@ -0,0 +1,429 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +:root { + --primary-color: #6366f1; + --primary-dark: #4f46e5; + --secondary-color: #8b5cf6; + --accent-color: #06b6d4; + --success-color: #10b981; + --warning-color: #f59e0b; + --danger-color: #ef4444; + --text-primary: #1f2937; + --text-secondary: #6b7280; + --bg-primary: #ffffff; + --bg-secondary: #f9fafb; + --border-color: #e5e7eb; + --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05); + --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1); + --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1); + --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1); +} + +body { + font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; + background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); + min-height: 100vh; + color: var(--text-primary); + line-height: 1.6; +} + +.container { + max-width: 900px; + margin: 2rem auto; + padding: 0 1rem; +} + +.app-header { + text-align: center; + margin-bottom: 2rem; +} + +.app-header h1 { + font-size: 2.5rem; + font-weight: 800; + background: linear-gradient(135deg, #4f46e5, #7c3aed); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; + margin-bottom: 0.5rem; + filter: brightness(0.8) contrast(1.2); +} + +.app-header h1 i { + margin-right: 0.5rem; + color: var(--primary-color); +} + +.subtitle { + color: var(--text-secondary); + font-size: 1.1rem; + font-weight: 500; +} + +.search-section { + background: rgba(255, 255, 255, 0.1); + backdrop-filter: blur(10px); + border-radius: 16px; + padding: 1.5rem; + margin-bottom: 2rem; + border: 1px solid rgba(255, 255, 255, 0.2); +} + +.search-box { + position: relative; + margin-bottom: 1rem; +} + +.search-box i { + position: absolute; + left: 1rem; + top: 50%; + transform: translateY(-50%); + color: var(--text-secondary); +} + +#searchInput { + width: 100%; + padding: 1rem 1rem 1rem 3rem; + border: none; + border-radius: 12px; + background: rgba(255, 255, 255, 0.9); + font-size: 1rem; + transition: all 0.3s ease; +} + +#searchInput:focus { + outline: none; + background: white; + box-shadow: var(--shadow-lg); +} + +.filter-buttons { + display: flex; + gap: 0.5rem; + flex-wrap: wrap; +} + +.filter-btn { + padding: 0.5rem 1rem; + border: none; + border-radius: 8px; + background: rgba(255, 255, 255, 0.2); + color: white; + cursor: pointer; + font-weight: 500; + transition: all 0.3s ease; +} + +.filter-btn:hover { + background: rgba(255, 255, 255, 0.3); +} + +.filter-btn.active { + background: var(--primary-color); + color: white; +} + +.input-section { + background: rgba(255, 255, 255, 0.1); + backdrop-filter: blur(10px); + border-radius: 16px; + padding: 1.5rem; + margin-bottom: 2rem; + border: 1px solid rgba(255, 255, 255, 0.2); +} + +.input-row { + display: grid; + grid-template-columns: 2fr 1fr 1fr 1fr auto; + gap: 1rem; + align-items: center; +} + +#todoInput { + padding: 1rem; + border: none; + border-radius: 12px; + background: rgba(255, 255, 255, 0.9); + font-size: 1rem; + transition: all 0.3s ease; +} + +#todoInput:focus { + outline: none; + background: white; + box-shadow: var(--shadow-lg); +} + +#prioritySelect, #categorySelect, #dueDateInput { + padding: 1rem; + border: none; + border-radius: 12px; + background: rgba(255, 255, 255, 0.9); + font-size: 1rem; + cursor: pointer; + transition: all 0.3s ease; +} + +#prioritySelect:focus, #categorySelect:focus, #dueDateInput:focus { + outline: none; + background: white; + box-shadow: var(--shadow-lg); +} + +#addBtn { + padding: 1rem 1.5rem; + background: linear-gradient(135deg, var(--primary-color), var(--secondary-color)); + color: white; + border: none; + border-radius: 12px; + cursor: pointer; + font-size: 1rem; + font-weight: 600; + transition: all 0.3s ease; + display: flex; + align-items: center; + gap: 0.5rem; +} + +#addBtn:hover { + transform: translateY(-2px); + box-shadow: var(--shadow-xl); +} + +.stats-section { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 1rem; + margin-bottom: 2rem; +} + +.stat-item { + background: rgba(255, 255, 255, 0.1); + backdrop-filter: blur(10px); + border-radius: 12px; + padding: 1.5rem; + text-align: center; + border: 1px solid rgba(255, 255, 255, 0.2); + transition: transform 0.3s ease; +} + +.stat-item:hover { + transform: translateY(-4px); +} + +.stat-number { + display: block; + font-size: 2rem; + font-weight: 800; + color: white; + margin-bottom: 0.5rem; +} + +.stat-label { + color: rgba(255, 255, 255, 0.8); + font-weight: 500; + text-transform: uppercase; + letter-spacing: 0.5px; + font-size: 0.875rem; +} + +#todoList { + list-style: none; +} + +.todo-item { + background: rgba(255, 255, 255, 0.95); + backdrop-filter: blur(10px); + border-radius: 16px; + padding: 1.5rem; + margin-bottom: 1rem; + border: 1px solid rgba(255, 255, 255, 0.2); + transition: all 0.3s ease; + position: relative; + overflow: hidden; +} + +.todo-item::before { + content: ''; + position: absolute; + left: 0; + top: 0; + bottom: 0; + width: 4px; + background: var(--primary-color); + transition: all 0.3s ease; +} + +.todo-item:hover { + transform: translateY(-4px); + box-shadow: var(--shadow-xl); +} + +.todo-item.completed::before { + background: var(--success-color); +} + +.todo-item.completed { + opacity: 0.8; +} + +.todo-item.completed .todo-text { + text-decoration: line-through; + color: var(--text-secondary); +} + +.todo-header { + display: flex; + align-items: center; + gap: 1rem; + margin-bottom: 1rem; +} + +.todo-text { + flex: 1; + font-size: 1.1rem; + font-weight: 500; + color: var(--text-primary); +} + +.todo-meta { + display: flex; + gap: 1rem; + margin-bottom: 1rem; + flex-wrap: wrap; +} + +.meta-item { + display: flex; + align-items: center; + gap: 0.5rem; + font-size: 0.875rem; + color: var(--text-secondary); +} + +.priority-badge { + padding: 0.25rem 0.75rem; + border-radius: 20px; + font-size: 0.75rem; + font-weight: 600; + text-transform: uppercase; + letter-spacing: 0.5px; +} + +.priority-low { + background: #dbeafe; + color: #1e40af; +} + +.priority-medium { + background: #fef3c7; + color: #92400e; +} + +.priority-high { + background: #fee2e2; + color: #991b1b; +} + +.category-badge { + padding: 0.25rem 0.75rem; + border-radius: 20px; + font-size: 0.75rem; + font-weight: 600; + background: var(--accent-color); + color: white; +} + +.todo-actions { + display: flex; + gap: 0.75rem; + justify-content: flex-end; +} + +.complete-btn, .edit-btn, .delete-btn { + padding: 0.75rem 1rem; + border: none; + border-radius: 8px; + cursor: pointer; + font-size: 0.875rem; + font-weight: 500; + transition: all 0.3s ease; + display: flex; + align-items: center; + gap: 0.5rem; +} + +.complete-btn { + background: var(--success-color); + color: white; +} + +.complete-btn:hover { + background: #059669; + transform: translateY(-2px); +} + +.edit-btn { + background: var(--warning-color); + color: white; +} + +.edit-btn:hover { + background: #d97706; + transform: translateY(-2px); +} + +.delete-btn { + background: var(--danger-color); + color: white; +} + +.delete-btn:hover { + background: #dc2626; + transform: translateY(-2px); +} + +.empty-state { + text-align: center; + padding: 3rem; + color: rgba(255, 255, 255, 0.8); +} + +.empty-state i { + font-size: 3rem; + margin-bottom: 1rem; + opacity: 0.5; +} + +@media (max-width: 768px) { + .container { + margin: 1rem; + } + + .input-row { + grid-template-columns: 1fr; + gap: 1rem; + } + + .stats-section { + grid-template-columns: 1fr; + } + + .todo-meta { + flex-direction: column; + gap: 0.5rem; + } + + .todo-actions { + flex-direction: column; + } + + .filter-buttons { + justify-content: center; + } +} From 6021f901235c2993b58651391c2dcb3dc226d0ad Mon Sep 17 00:00:00 2001 From: AYUSH GAUTAM <142661926+Ayushgautam16@users.noreply.github.com> Date: Wed, 29 Oct 2025 21:15:17 +0530 Subject: [PATCH 3/6] Add files via upload From ef84230c3e30b47f5a186197edb97e78a5c3147f Mon Sep 17 00:00:00 2001 From: AYUSH GAUTAM <142661926+Ayushgautam16@users.noreply.github.com> Date: Wed, 29 Oct 2025 21:16:26 +0530 Subject: [PATCH 4/6] Add files via upload --- README.md | 211 ++++++++++++++++++++---------------------------------- 1 file changed, 79 insertions(+), 132 deletions(-) diff --git a/README.md b/README.md index 23e85d5..bdca072 100644 --- a/README.md +++ b/README.md @@ -1,148 +1,95 @@ -# ๐Ÿ”— Singly Linked List Game - -An interactive, educational web game that teaches and tests knowledge of singly linked list data structure operations through engaging gameplay. - -## ๐ŸŽฎ Game Features - -### Core Operations -- **Insert**: Add new nodes to the linked list -- **Delete**: Remove nodes with specific values -- **Search**: Find values within the linked list -- **Reverse**: Reverse the entire linked list structure - -### Game Mechanics -- **Scoring System**: Earn points for successful operations -- **Level Progression**: Advance through levels as you score points -- **Visual Feedback**: Real-time visualization of the linked list structure -- **Interactive Tutorial**: Comprehensive guide for beginners -- **Responsive Design**: Works on desktop and mobile devices - -### Visual Elements -- Beautiful gradient backgrounds and modern UI -- Animated node representations with arrows -- Confetti effects for level-ups -- Smooth transitions and hover effects - -## ๐Ÿš€ How to Play - -1. **Start the Game**: Click "New Game" to begin -2. **Choose Operation**: Select from Insert, Delete, Search, or Reverse -3. **Input Values**: Enter the required value (except for Reverse) -4. **Submit**: Click submit or press Enter to execute the operation -5. **Earn Points**: Successful operations award points and help you level up -6. **Learn**: Use the Tutorial button to understand linked list concepts - -## ๐Ÿ› ๏ธ Technical Implementation - -### Frontend Technologies -- **HTML5**: Semantic structure and accessibility -- **CSS3**: Modern styling with gradients, animations, and responsive design -- **JavaScript ES6+**: Object-oriented programming with classes and modules - -### Data Structure -- **SinglyLinkedList Class**: Implements core linked list operations -- **GameState Class**: Manages game progression and scoring -- **GameController Class**: Handles user interactions and game flow - -### Key Features -- Real-time linked list visualization -- Dynamic scoring and difficulty scaling -- Input validation and error handling -- Responsive design for all screen sizes -- Smooth animations and visual feedback - -## ๐ŸŒ GitHub Pages Deployment - -### Automatic Deployment -This game is designed to work seamlessly with GitHub Pages. Simply: - -1. **Push to GitHub**: Upload all files to a GitHub repository -2. **Enable Pages**: Go to repository Settings โ†’ Pages -3. **Select Source**: Choose "Deploy from a branch" -4. **Select Branch**: Choose `main` or `master` branch -5. **Save**: Your game will be available at `https://username.github.io/repository-name` - -### Manual Deployment -If you prefer manual deployment: - -1. **Build the Project**: All files are already production-ready -2. **Upload to Web Server**: Place files in your web server's public directory -3. **Configure Server**: Ensure your server serves static files correctly - -### File Structure for Deployment +# ๐Ÿš€ Smart Todo App + +A beautiful, feature-rich todo application built with vanilla HTML, CSS, and JavaScript. Features a stunning Notion-like design with advanced functionality. + +## โœจ Features + +- **๐ŸŽจ Stunning Design**: Glassmorphism effects with backdrop blur and modern gradients +- **๐Ÿ” Smart Search**: Real-time search and filtering capabilities +- **๐Ÿท๏ธ Categories**: Organize todos by Personal, Work, Shopping, Health, and Learning +- **โšก Priority Levels**: Low, Medium, and High priority with color-coded badges +- **๐Ÿ“… Due Dates**: Set deadlines with overdue warnings +- **๐Ÿ“Š Statistics Dashboard**: Live counts and progress tracking +- **๐Ÿ’พ Local Storage**: Data persists between browser sessions +- **๐Ÿ“ฑ Responsive Design**: Works perfectly on all devices +- **โœ๏ธ Edit & Delete**: Full CRUD operations for todos + +## ๐Ÿ› ๏ธ Technologies Used + +- **HTML5**: Semantic markup and modern structure +- **CSS3**: Advanced styling with CSS variables, flexbox, and grid +- **JavaScript ES6+**: Modern JavaScript with classes and modules +- **Font Awesome**: Beautiful icons for enhanced UX +- **Local Storage**: Client-side data persistence + +## ๐Ÿš€ Getting Started + +### Option 1: Direct Usage +1. Clone or download this repository +2. Open `index.html` in your web browser +3. Start organizing your tasks! + +### Option 2: GitHub Pages (Recommended) +1. Fork this repository to your GitHub account +2. Go to Settings โ†’ Pages +3. Select source as "Deploy from a branch" +4. Choose `main` branch and `/ (root)` folder +5. Click Save - your app will be live in minutes! + +## ๐Ÿ“ฑ Features in Detail + +### Search & Filter +- **Real-time Search**: Type to instantly find todos +- **Status Filters**: View All, Pending, or Completed todos +- **Smart Results**: Combines search and filter for precise results + +### Todo Management +- **Add Todos**: Quick input with priority, category, and due date +- **Edit Todos**: Click edit to modify existing tasks +- **Complete/Undo**: Toggle completion status +- **Delete**: Remove todos with confirmation + +### Visual Design +- **Glassmorphism**: Modern translucent card design +- **Color Coding**: Priority-based color schemes +- **Responsive Layout**: Adapts to any screen size +- **Smooth Animations**: Hover effects and transitions + +## ๐ŸŽจ Customization + +The app uses CSS custom properties (variables) for easy theming: + +```css +:root { + --primary-color: #6366f1; + --secondary-color: #8b5cf6; + --accent-color: #06b6d4; + /* ... more variables */ +} ``` -repository/ -โ”œโ”€โ”€ index.html # Main game page -โ”œโ”€โ”€ styles.css # Game styling -โ”œโ”€โ”€ script.js # Game logic -โ”œโ”€โ”€ README.md # This file -โ””โ”€โ”€ .gitignore # Git ignore file (optional) -``` - -## ๐Ÿ“ฑ Browser Compatibility - -- **Chrome**: 60+ (Full support) -- **Firefox**: 55+ (Full support) -- **Safari**: 12+ (Full support) -- **Edge**: 79+ (Full support) -- **Mobile Browsers**: iOS Safari 12+, Chrome Mobile 60+ - -## ๐ŸŽฏ Learning Objectives - -This game helps players understand: - -- **Data Structure Concepts**: How linked lists organize data -- **Algorithm Implementation**: Step-by-step operation execution -- **Memory Management**: How nodes reference each other -- **Problem Solving**: Strategic thinking for data manipulation -- **Visual Learning**: Seeing abstract concepts in action - -## ๐Ÿ”ง Customization -### Adding New Operations -To add new linked list operations: +## ๐Ÿ“ Project Structure -1. Add the operation button to `index.html` -2. Implement the method in the `SinglyLinkedList` class -3. Add case handling in the `executeOperation` method -4. Update scoring and feedback logic - -### Modifying Visual Styles -The game uses CSS custom properties and modern CSS features: -- Modify color schemes in `styles.css` -- Adjust animations and transitions -- Customize responsive breakpoints -- Update typography and spacing +``` +โ”œโ”€โ”€ index.html # Main HTML file +โ”œโ”€โ”€ style.css # Styles and animations +โ”œโ”€โ”€ script.js # JavaScript functionality +โ””โ”€โ”€ README.md # This file +``` -## ๐Ÿ“Š Performance Features +## ๐ŸŒŸ Live Demo -- **Efficient Rendering**: Minimal DOM manipulation -- **Memory Management**: Proper cleanup of event listeners -- **Smooth Animations**: CSS-based animations for better performance -- **Responsive Updates**: Only update necessary UI elements +Visit the live demo: [Your GitHub Pages URL will appear here] ## ๐Ÿค Contributing -Feel free to contribute to this project by: - -1. **Forking** the repository -2. **Creating** a feature branch -3. **Making** your improvements -4. **Submitting** a pull request +Feel free to fork this project and submit pull requests for any improvements! ## ๐Ÿ“„ License This project is open source and available under the [MIT License](LICENSE). -## ๐ŸŽ‰ Acknowledgments - -- Built with modern web technologies -- Designed for educational purposes -- Inspired by data structure learning games -- Created with accessibility and user experience in mind - --- -**Happy Learning! ๐Ÿš€** +**Built with โค๏ธ using vanilla web technologies** -Start playing the game and master the concepts of singly linked lists through interactive gameplay! From 2b34087c22a7175befb0725eb50673c5b0a13629 Mon Sep 17 00:00:00 2001 From: AYUSH GAUTAM <142661926+Ayushgautam16@users.noreply.github.com> Date: Wed, 29 Oct 2025 21:17:58 +0530 Subject: [PATCH 5/6] Add files via upload --- LICENSE | 22 ++++++++ index.html | 161 +++++++++++++++++++++++------------------------------ 2 files changed, 92 insertions(+), 91 deletions(-) create mode 100644 LICENSE diff --git a/LICENSE b/LICENSE new file mode 100644 index 0000000..0918486 --- /dev/null +++ b/LICENSE @@ -0,0 +1,22 @@ +MIT License + +Copyright (c) 2024 Smart Todo App + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all +copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE +SOFTWARE. + diff --git a/index.html b/index.html index e28f5e5..223823d 100644 --- a/index.html +++ b/index.html @@ -1,91 +1,70 @@ - - - - - - Singly Linked List Game - - - - -
-
-

๐Ÿ”— Singly Linked List Game

-

Learn and practice singly linked list operations through interactive gameplay!

-
- -
- - -
- Score: 0 - Level: 1 -
-
- -
-
- -
- -
-
-

Operations

-
- - - - -
-
- -
-

Input

-
- - -
-
- - -
-
- -
-
- × -

How to Play

-
-

๐ŸŽฏ Objective

-

Complete linked list operations to earn points and advance through levels!

- -

๐Ÿ”ง Operations

-
    -
  • Insert: Add a new node with the specified value
    • -
  • Delete: Remove a node with the specified value
    • -
  • Search: Find if a value exists in the list
    • -
  • Reverse: Reverse the entire linked list
    • -
- -

๐ŸŽฎ Gameplay

-
    -
  • Choose an operation from the buttons
    • -
  • Enter the required value (if needed)
    • -
  • Submit your answer
    • -
  • Earn points for correct operations
    • -
  • Level up as you progress!
    • -
- -

๐Ÿ“š What is a Singly Linked List?

-

A singly linked list is a data structure where each element (node) contains data and a reference to the next node. The last node points to null, indicating the end of the list.

-
-
-
-
- - - - + + + + + + Notion-Style Todo App + + + + +
+
+

Smart Todo

+

Organize your life, one task at a time

+
+ +
+
+ + +
+
+ + + +
+
+ +
+
+ + + + + +
+
+ +
+
+ 0 + Total +
+
+ 0 + Pending +
+
+ 0 + Completed +
+
+ + +
+ + + From f103d83d47320b535cabc59006af9d723c919ea9 Mon Sep 17 00:00:00 2001 From: AYUSH GAUTAM <142661926+Ayushgautam16@users.noreply.github.com> Date: Wed, 29 Oct 2025 21:18:57 +0530 Subject: [PATCH 6/6] Godseye --- .gitignore | 81 ++++++++------------------------------ LICENSE | 3 +- README.md | 111 +++++++++++++++-------------------------------------- 3 files changed, 49 insertions(+), 146 deletions(-) diff --git a/.gitignore b/.gitignore index c2365c8..6fafe04 100644 --- a/.gitignore +++ b/.gitignore @@ -1,71 +1,22 @@ -# Dependencies -node_modules/ -npm-debug.log* -yarn-debug.log* -yarn-error.log* - -# Runtime data -pids -*.pid -*.seed -*.pid.lock - -# Coverage directory used by tools like istanbul -coverage/ - -# nyc test coverage -.nyc_output - -# Grunt intermediate storage -.grunt - -# Bower dependency directory -bower_components - -# node-waf configuration -.lock-wscript - -# Compiled binary addons -build/Release - -# Dependency directories -jspm_packages/ - -# Optional npm cache directory -.npm - -# Optional REPL history -.node_repl_history - -# Output of 'npm pack' -*.tgz - -# Yarn Integrity file -.yarn-integrity - -# dotenv environment variables file -.env +# Python +__pycache__/ +*.py[cod] +*.egg-info/ +.venv/ +venv/ +env/ + +# OS +.DS_Store -# IDE files +# IDE .vscode/ .idea/ -*.swp -*.swo -*~ -# OS generated files -.DS_Store -.DS_Store? -._* -.Spotlight-V100 -.Trashes -ehthumbs.db -Thumbs.db +# Env +.env -# Logs -logs -*.log +# Caches +.pytest_cache/ +.mypy_cache/ -# Temporary files -tmp/ -temp/ diff --git a/LICENSE b/LICENSE index 0918486..656e8d6 100644 --- a/LICENSE +++ b/LICENSE @@ -1,6 +1,6 @@ MIT License -Copyright (c) 2024 Smart Todo App +Copyright (c) 2025 Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal @@ -20,3 +20,4 @@ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. + diff --git a/README.md b/README.md index bdca072..19f63ec 100644 --- a/README.md +++ b/README.md @@ -1,95 +1,46 @@ -# ๐Ÿš€ Smart Todo App +## Godseye OSINT Toolkit (MVP) -A beautiful, feature-rich todo application built with vanilla HTML, CSS, and JavaScript. Features a stunning Notion-like design with advanced functionality. +Godseye is a privacy-respecting, public-data OSINT toolkit. It aggregates open sources like crt.sh (certificate transparency), Wayback Machine, and GitHub to help investigate domains and usernames. -## โœจ Features +### Features (MVP) +- Domain enrichment: subdomains via crt.sh, historical URLs via Wayback Machine +- Username enrichment: presence checks on popular platforms + GitHub profile summary +- HTTP API (FastAPI) and CLI (Typer) -- **๐ŸŽจ Stunning Design**: Glassmorphism effects with backdrop blur and modern gradients -- **๐Ÿ” Smart Search**: Real-time search and filtering capabilities -- **๐Ÿท๏ธ Categories**: Organize todos by Personal, Work, Shopping, Health, and Learning -- **โšก Priority Levels**: Low, Medium, and High priority with color-coded badges -- **๐Ÿ“… Due Dates**: Set deadlines with overdue warnings -- **๐Ÿ“Š Statistics Dashboard**: Live counts and progress tracking -- **๐Ÿ’พ Local Storage**: Data persists between browser sessions -- **๐Ÿ“ฑ Responsive Design**: Works perfectly on all devices -- **โœ๏ธ Edit & Delete**: Full CRUD operations for todos +### Quickstart -## ๐Ÿ› ๏ธ Technologies Used +1) Python 3.10+ -- **HTML5**: Semantic markup and modern structure -- **CSS3**: Advanced styling with CSS variables, flexbox, and grid -- **JavaScript ES6+**: Modern JavaScript with classes and modules -- **Font Awesome**: Beautiful icons for enhanced UX -- **Local Storage**: Client-side data persistence - -## ๐Ÿš€ Getting Started - -### Option 1: Direct Usage -1. Clone or download this repository -2. Open `index.html` in your web browser -3. Start organizing your tasks! - -### Option 2: GitHub Pages (Recommended) -1. Fork this repository to your GitHub account -2. Go to Settings โ†’ Pages -3. Select source as "Deploy from a branch" -4. Choose `main` branch and `/ (root)` folder -5. Click Save - your app will be live in minutes! - -## ๐Ÿ“ฑ Features in Detail - -### Search & Filter -- **Real-time Search**: Type to instantly find todos -- **Status Filters**: View All, Pending, or Completed todos -- **Smart Results**: Combines search and filter for precise results - -### Todo Management -- **Add Todos**: Quick input with priority, category, and due date -- **Edit Todos**: Click edit to modify existing tasks -- **Complete/Undo**: Toggle completion status -- **Delete**: Remove todos with confirmation - -### Visual Design -- **Glassmorphism**: Modern translucent card design -- **Color Coding**: Priority-based color schemes -- **Responsive Layout**: Adapts to any screen size -- **Smooth Animations**: Hover effects and transitions - -## ๐ŸŽจ Customization - -The app uses CSS custom properties (variables) for easy theming: - -```css -:root { - --primary-color: #6366f1; - --secondary-color: #8b5cf6; - --accent-color: #06b6d4; - /* ... more variables */ -} +2) Create a virtual environment and install deps +```bash +python -m venv .venv +. .venv/Scripts/activate # Windows PowerShell: . .venv/Scripts/Activate.ps1 +pip install -r requirements.txt ``` -## ๐Ÿ“ Project Structure +3) (Optional) Configure environment variables +Copy `.env.example` to `.env` and add tokens if you have them. +4) Run the CLI +```bash +python -m godseye.cli domain example.com +python -m godseye.cli username torvalds ``` -โ”œโ”€โ”€ index.html # Main HTML file -โ”œโ”€โ”€ style.css # Styles and animations -โ”œโ”€โ”€ script.js # JavaScript functionality -โ””โ”€โ”€ README.md # This file -``` - -## ๐ŸŒŸ Live Demo -Visit the live demo: [Your GitHub Pages URL will appear here] - -## ๐Ÿค Contributing - -Feel free to fork this project and submit pull requests for any improvements! +5) Run the API +```bash +uvicorn godseye.api.main:app --reload +# Open: http://127.0.0.1:8000/docs +``` -## ๐Ÿ“„ License +### Environment variables +- `GITHUB_TOKEN` (optional): increases GitHub rate limits for user lookups. -This project is open source and available under the [MIT License](LICENSE). +### Notes +- Only public sources are used. Respect rate limits and each source's ToS. +- Results are best-effort and may contain inaccuracies. Always verify critical findings. ---- +### License +MIT -**Built with โค๏ธ using vanilla web technologies**