Notes-Mine

README.md

# 💎 Notes Mine

**A beautiful neural network-inspired note-taking Progressive Web App**

Notes Mine transforms your note-taking experience with a stunning solar system visualization. Your notes orbit around a central core like celestial bodies, creating a mesmerizing neural network interface.

---

## ✨ Features

### 🌌 Stunning Visualization
- **Solar System Interface** - Notes orbit in beautiful concentric rings
- **Animated Rings** - Three rotating rings with glowing effects
- **Pulse Wave** - Hypnotic pulse animation from the center
- **Starfield Background** - Dynamic moving stars
- **Smooth Animations** - 60fps hardware-accelerated transitions

### 📝 Powerful Note Management
- **15 Custom Icons** - Personalize each note with emoji icons (💎 🧠 ⚡ 🎯 🚀 💡 🌟 🔮 ⭐ 💫 🔥 💻 📚 🎨 🎵)
- **Format Preservation** - Paste text with formatting intact (paragraphs, line breaks, spacing)
- **Advanced Scrolling** - Smooth scrollbars for long notes
- **Quick Export** - Download all notes as a timestamped text file
- **Bulk Operations** - Clear all notes with one click

### 🎨 Beautiful Design
- **Dark/Light Themes** - Toggle between themes with automatic saving
- **Glassmorphism UI** - Modern frosted-glass effects
- **5 Category Colors** - Notes cycle through pink, purple, blue, cyan, and green
- **Fully Responsive** - Perfect on desktop, tablet, and mobile

### 💾 Progressive Web App
- **Install as App** - Works like a native application
- **Offline Support** - Full functionality without internet
- **100% Private** - All data stored locally in your browser
- **Cross-Platform** - Works on Windows, Mac, Linux, iOS, and Android
- **Zero Dependencies** - Lightweight and fast

---

## 🚀 Getting Started

### Use Online

Simply visit the app and start creating notes immediately. No account required.

### Install as App

#### Desktop (Chrome/Edge/Brave)
1. Click the install icon (⊕) in the address bar
2. Click "Install"
3. App opens in its own window

#### Android
1. Tap the menu (⋮) → "Install app" or "Add to Home screen"
2. App appears on your home screen

#### iOS/Safari
1. Tap Share → "Add to Home Screen"
2. App icon appears on your home screen

---

## 📖 How to Use

### Creating Notes

1. Click the **➕** button at the bottom
2. Choose an icon from 15 options
3. Enter a title/label
4. Add your content (paste with formatting preserved!)
5. Click **Save**

**Keyboard Shortcut:** `Ctrl+N` (or `Cmd+N` on Mac)

### Viewing Notes

**Single Note:**
- Click any floating node in the visualization

**All Notes:**
- Click the **📋** button to see a list view

### Managing Notes

**Edit:** Open a note → Click "Edit"  
**Delete:** Open a note → Click "Delete"  
**Export All:** Click **💾** button → Downloads as `.txt` file  
**Clear All:** Click **🗑️** button → Confirms before deleting

### Theme Toggle

Click the **🌙/☀️** icon in the top-right corner to switch themes.

---

## 🌐 Browser Compatibility

| Browser | Minimum Version | Status |
|---------|----------------|--------|
| Chrome  | 80+            | ✅ Full Support |
| Edge    | 80+            | ✅ Full Support |
| Firefox | 75+            | ✅ Full Support |
| Safari  | 13+            | ✅ Full Support |
| Opera   | 67+            | ✅ Full Support |

---

## 🔐 Privacy & Security

- **100% Local Storage** - All data stays in your browser
- **No Server** - Nothing is sent to external servers
- **No Tracking** - Zero analytics or telemetry
- **No Account Required** - Use anonymously
- **Open Source** - Full transparency

---

## 💻 Technology

Built with:
- Pure HTML5, CSS3, and Vanilla JavaScript
- No frameworks or dependencies
- Progressive Web App (PWA) technologies
- Service Workers for offline support
- LocalStorage for data persistence

---

## 🎨 Customization

### Changing Colors

The app uses CSS variables for easy theming. Edit the color values in the `<style>` section:

```css
/* Dark Mode Colors */
--accent-color: #00d9ff;
--ring-color-1: rgba(0, 217, 255, 0.8);
--ring-color-2: rgba(138, 43, 226, 0.6);

Adding More Icons

Add new emoji options to the icon selector:

<div class="icon-option" data-icon="🎭">🎭</div>

Adjusting Animations

Modify animation speeds in the CSS:

/* Solar ring rotation speed */
animation: orbitRotate1 25s linear infinite;

/* Pulse wave timing */
animation: pulseExpand 6s ease-in-out infinite;

---

🔧 Self-Hosting

Quick Setup

1. Download all files from this repository
2. Ensure you have the required folder structure:

notes-mine/
├── index.html
├── manifest.json
├── service-worker.js
└── icons/
    ├── icon-72x72.png
    ├── icon-96x96.png
    ├── icon-128x128.png
    ├── icon-144x144.png
    ├── icon-152x152.png
    ├── icon-192x192.png
    ├── icon-384x384.png
    └── icon-512x512.png

Creating App Icons

You need PNG icons in these sizes: 72, 96, 128, 144, 152, 192, 384, 512 pixels.

Easy Method:

1. Visit Favicon.io
2. Enter text: 💎
3. Background: Rounded
4. Background color: #00d9ff
5. Download and resize to required sizes

Deploy to GitHub Pages

1. Upload files to a GitHub repository
2. Go to Settings → Pages
3. Select branch: main, folder: / (root)
4. Your app will be live at: https://username.github.io/repository-name/

Deploy to Netlify

1. Drag and drop your project folder to Netlify Drop
2. App deploys instantly with HTTPS

---

❓ Troubleshooting

PWA Won't Install

• Ensure you're using HTTPS (required for PWA)
• Check that all icon files exist in the /icons/ folder
• Verify manifest.json is in the root directory
• Clear browser cache and try again

Notes Not Saving

• Check browser's LocalStorage isn't full (usually 5-10MB limit)
• Ensure JavaScript is enabled
• Try in incognito/private mode to rule out extensions
• Check browser console for errors (F12)

App Not Working Offline

• Verify service worker is registered (check DevTools → Application → Service Workers)
• Make sure you visited the app at least once online
• Hard refresh the page (Ctrl+Shift+R)

Theme Not Persisting

• Check that LocalStorage is enabled in browser settings
• Disable any privacy extensions temporarily
• Try a different browser to isolate the issue

---

📋 Keyboard Shortcuts

Shortcut	Action
Ctrl+N / Cmd+N	Create new note
Esc	Close modal
Tab	Navigate between fields

---

🤝 Contributing

Contributions are welcome! Here's how you can help:

Report Bugs:

• Open an issue with detailed steps to reproduce
• Include browser version and OS

Suggest Features:

• Open an issue describing the feature
• Explain the use case and benefits

Submit Code:

• Fork the repository
• Create a feature branch
• Submit a pull request with clear description

---

📄 License

MIT License - Free to use, modify, and distribute.

Copyright (c) 2024 Notes Mine

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.

---

🙏 Acknowledgments

Inspired by:

• Neural network visualizations
• Solar system orbital mechanics
• Modern glassmorphism design trends
• The Progressive Web App movement

---

Made with 💎

Mining ideas, one note at a time.