📍 GeoCrypt — Location Encryption & Vault Web App

Skeuomorphic Nostalgia meets Modern Liquid Glass.
A client-side location obfuscation tool that transforms coordinates and addresses into encrypted compact codes.

---

📖 Table of Contents

• Overview
• Key Features
• UI/UX Design Philosophy
• Technical Architecture
• Encryption Protocol
• Project Structure
• Installation & Getting Started
• Detailed Component Breakdown
• Privacy & Security Model
• Future Roadmap
• License

---

🌟 Overview

GeoCrypt is a privacy-first web application that allows users to encode, hide, and share physical locations (latitude, longitude, and custom address descriptions) into small, encrypted code strings.

Designed with a blend of iOS-inspired Liquid Glass (Glassmorphism) and tactile Skeuomorphism, GeoCrypt offers a nostalgic yet modern aesthetic complete with dual themes (Light and Dark mode), smooth tab switching, interactive map pinning, and local vault storage.

---

✨ Key Features

🔐 1. Location Encryption & Decryption

• Encrypted Short Codes: Turn location data into a compact, cryptographically secured string (e.g., GEO-7X9B-41A2-K9).
• Custom Passkey Support: Protect codes with optional user-defined passkeys.
• One-Click Decryption: Input any generated GeoCrypt code to unpack coordinates, addresses, and timestamps instantly.

🗺️ 2. Interactive Map & Pinpoint Location

• Leaflet & OpenStreetMap Integration: Click or drag a pin anywhere on the world map to retrieve precise coordinates.
• GPS Auto-Detect Prompt: On-demand geolocation fetching with clear system permissions guidance.
• Google Maps Link: Quick option to open locations directly in Google Maps for turn-by-turn navigation.

📦 3. Geo Vault (Code Management)

• Local Code History: Automatically saves generated codes to browser memory / LocalStorage.
• Vault Actions: Search, filter, view details, copy to clipboard, share via Web Share API, and delete individual or all entries.

🎨 4. iOS Liquid Glass & Skeuomorphic Design

• Dual Theme Engine: Seamless switching between Aero Light and Cyber Obsidian Dark modes.
• Tactile Skeuomorphism: Beveled inset input fields, raised physical-style primary buttons, tactile switches, and debossed text elements.
• Liquid Glassmorphism: Translucent multi-layered containers with high-blur backdrops (backdrop-filter), subtle outer glows, and physics-driven micro-animations.

---

🎨 UI/UX Design Philosophy

GeoCrypt blends two iconic UI eras into a cohesive Aero-Skeuomorphic System:

1. Classic iOS Nostalgia (Skeuomorphism):

   • Raised, pressable physical buttons with active depth translation (transform: translateY(2px)).
   • Soft inner shadows on form inputs mimicking physically carved recesses.
   • Metallic highlights, subtle gradients, and physical rim lighting.

2. Modern Liquid Glass (Glassmorphism):

   • Semi-transparent frosted surfaces (rgba backgrounds with 16px to 24px backdrop blur).
   • Soft glowing borders simulating light bending through thick glass edges.
   • Floating cards with dynamic depth levels (z-index layering).

Theme Tokens

Element	Light Mode (Aero Glass)	Dark Mode (Cyber Obsidian)
Primary Background	Soft Mesh Gradient (#E0E7FF to #F3F4F6)	Deep Space Blue (#0B0F19 to #111827)
Card Surface	rgba(255, 255, 255, 0.65)	rgba(17, 24, 39, 0.70)
Glass Border	rgba(255, 255, 255, 0.80)	rgba(255, 255, 255, 0.12)
Accent Glow	Electric Sapphire (#3B82F6)	Cyan Neon / iOS Violet (#6366F1)

---

🏗️ Technical Architecture

GeoCrypt is built as a zero-dependency, single-page application (SPA) optimized for client-side speed, accessibility, and zero-server data leakage.

+-------------------------------------------------------------------+
|                            USER INTERFACE                         |
|   [ Create Code ]       [ Geo Vault ]       [ Settings / Theme ]  |
+-------------------------------------------------------------------+
|
v
+-------------------------------------------------------------------+
|                        APPLICATION LOGIC                          |
|   - Form Controller (Prevent default reloads / fixed tab bugs)   |
|   - Leaflet Map Handler & Marker Drag Events                     |
|   - Geolocation API Wrapper                                       |
+-------------------------------------------------------------------+
|
+------------------+------------------+
|                                     |
v                                     v
+-----------------------------+       +-----------------------------+
|    ENCRYPTION ENGINE        |       |    PERSISTENCE & SHARING    |
| - CryptoJS / Web Crypto API |       | - LocalStorage Vault        |
| - Payload Serialization     |       | - Web Share API / Clipboard |
| - Base64 Obfuscation        |       | - Google Maps URL Intent    |
+-----------------------------+       +-----------------------------+

Tech Stack

• HTML5: Semantic layout with ARIA accessibility roles.
• CSS3: Custom CSS variables, flexbox/grid layout, media queries for responsiveness, glassmorphism filters, keyframe animations.
• JavaScript (ES6+): Vanilla DOM manipulating engine with event delegation.
• Leaflet.js (v1.9.4): Lightweight open-source interactive mapping.
• Web Crypto API / AES: Client-side cryptographic primitives.

---

🔒 Encryption Protocol

GeoCrypt uses a multi-stage obfuscation and encryption pipeline to transform raw geospatial data into portable text tokens.

Pipeline Stages

1. Payload Construction:

   {
     "lat": 6.9271,
     "lng": 79.8612,
     "addr": "Main Street, Kalutara",
     "ts": 1753358400
   }
   

2. Symmetric Encryption (AES-GCM / Dynamic Key):

• If a custom passkey is provided, it derives a cryptographic key via PBKDF2.
• If no key is provided, a default salt-infused system key is used.

3. Format Encoding:

• The encrypted bytes are encoded into custom alphanumeric strings using a URL-safe Base64 dialect.
• Formatted with prefixes and hyphens for readability: GEO- + 4-character chunks (e.g., GEO-9A82-F41C-88E0).

4. Reversibility:

• Decryption parses the token, strips human-readable delimiters, extracts the ciphertext, and decrypts the JSON payload back into interactive coordinates.

---

📁 Project Structure

geocrypt-app/
├── index.html              # Main Single Page Application structure
├── css/
│   ├── main.css            # Base styles, variables, typography
│   ├── glass-skeuo.css     # Skeuomorphic & Liquid Glass design rules
│   └── components.css      # Tabs, cards, map UI, vault list styles
├── js/
│   ├── app.js              # State manager & Tab navigation fix
│   ├── map.js              # Leaflet initialization & GPS handler
│   ├── crypto.js           # Location encryption/decryption logic
│   └── vault.js            # LocalStorage manager & UI rendering
├── assets/
│   ├── icons/              # iOS-styled SVG icons
│   └── images/             # Custom markers / map textures
└── README.md               # App documentation

---

🚀 Installation & Getting Started

Since GeoCrypt runs entirely on client-side web technologies, no backend server or Node.js runtime is strictly required.

Quick Start (Local)

1. Clone or Download the Repository:

git clone [https://github.com/your-username/geocrypt.git](https://github.com/your-username/geocrypt.git)
cd geocrypt

2. Launch with any Static Web Server:

• VS Code Live Server: Right-click index.html and select Open with Live Server.
• Python Simple Server:

python3 -m http.server 8000

Then open http://localhost:8000 in your browser.

3. HTTPS Requirement for Geolocation:

• GPS auto-detection (navigator.geolocation) requires a secure context (HTTPS or localhost). Ensure you serve via HTTPS when deploying online.

---

🛠️ Detailed Component Breakdown

1. Tab Router Fix (Event Prevention)

Prevents content from flashing and instantly vanishing upon clicking action buttons (Create, Vault, Settings):

// Example fix implemented in app.js
document.querySelectorAll('.tab-btn').forEach(button => {
    button.addEventListener('click', (e) => {
        e.preventDefault(); // Stop accidental form submission / page jumping
        const targetTab = button.getAttribute('data-tab');
        
        // Hide all tab views
        document.querySelectorAll('.tab-content').forEach(view => {
            view.classList.remove('active');
        });
        
        // Show target tab view
        document.getElementById(targetTab).classList.add('active');
    });
});

2. Map Selector Logic

// Interactive pin marker with reverse coordinate lookup
let map, marker;

function initMap(defaultLat = 6.9271, defaultLng = 79.8612) {
    map = L.map('map-container').setView([defaultLat, defaultLng], 13);
    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map);

    marker = L.marker([defaultLat, defaultLng], { draggable: true }).addTo(map);

    marker.on('dragend', function (e) {
        const coords = marker.getLatLng();
        document.getElementById('lat-input').value = coords.lat.toFixed(6);
        document.getElementById('lng-input').value = coords.lng.toFixed(6);
    });
}

---

🛡️ Privacy & Security Model

• Zero Cloud Storage: No locations, coordinates, or addresses are ever uploaded to a central server.
• Local Sandboxing: Vault items reside strictly within your device's browser LocalStorage.
• Private Link Sharing: When sharing a code, the recipient decodes it entirely on their device using their own instance of GeoCrypt.

---

🛣️ Future Roadmap

• PWA (Progressive Web App) Support: Full offline map tiles caching and installability on iOS/Android home screens.
• Skeuomorphic Audio Feedback: Soft mechanical click sounds when toggling switches and pressing glass buttons.
• QR Code Generator: Convert encrypted location codes into visual QR codes for scanning.
• Steganography Mode: Hide the encrypted location code inside an image metadata tag.

---

📄 License

Distributed under the MIT License. See LICENSE for more information.

---

Crafted with precision for fans of tactile UI, liquid glass aesthetics, and privacy-first engineering.

This document provides a complete technical reference, design system breakdown, and code architecture overview for the **GeoCrypt** application.