spotnotes.app/static/index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SpotNotes.app - Location Based Notes</title>
    
    <!-- Leaflet CSS for the map -->
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
     integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY="
     crossorigin=""/>
    <link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster@1.4.1/dist/MarkerCluster.css" />
    <link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster@1.4.1/dist/MarkerCluster.Default.css" />
     
    <!-- Custom Styles -->
    <link rel="stylesheet" href="/assets/css/base.css">
    <link rel="stylesheet" href="/assets/css/navbar.css">
    <link rel="stylesheet" href="/assets/css/map.css">
    <link rel="stylesheet" href="/assets/css/sidebar.css">
    <link rel="stylesheet" href="/assets/css/auth.css">
    <link rel="stylesheet" href="/assets/css/modals.css">
    <link rel="icon" href="favicon.ico" type="image/x-icon" />
</head>
<body class="page-body">

    <nav class="navbar">
            <a href="/" class="brand">
            <img src="/assets/images/spotnotes.png" alt="SpotNotes.app" style="height: 44px;">
            </a>
            <button class="nav-toggle" id="nav-toggle" aria-label="Toggle Navigation" style="display: none; background: none; border: none; font-size: 1.5rem; cursor: pointer;">☰</button>
            <div class="nav-search">
                <form id="search-form" style="display: flex; width: 100%;">
                    <input type="text" id="search-input" placeholder="Search notes or location...">
                    <button type="submit" id="search-btn">🔍</button>
                </form>
            </div>
            <div class="nav-links" id="nav-links">
            <a href="/login.html" id="link-login">Login</a>
            <a href="/about.html">About</a>
            <a href="/contact.html">Contact</a>
            <a href="#" id="link-logout" style="display: none;">Logout</a>
        </div>
    </nav>

    <!-- Full Screen Map Container -->
    <div id="map"></div>
    <!-- Center Crosshair -->
    <div id="map-crosshair"></div>

    <!-- Right Collapsible Panel -->
    <div class="sidebar" id="sidebar">
        <button class="sidebar-toggle" id="sidebar-toggle" aria-label="Toggle Notepads">
            &gt; <!-- Simple arrow icon placeholder -->
        </button>
        <div class="sidebar-content">
            <div class="sidebar-header">
                <h2>Notepads</h2>
                <button class="btn-new-pad" id="btn-create-pad" title="Create New Pad">+</button>
            </div>
            
            <!-- Center Map on User Button -->
            <button id="btn-center-user" class="btn-center-location" style="display: none;">Target My Location</button>
            
            <div id="sidebar-body">
                <!-- Notepad items will be injected here by JS -->
            </div>
        </div>
    </div>

    <!-- Create Notepad Modal -->
    <div id="modal-create-pad" class="modal hidden">
        <div class="modal-content">
            <span class="close-modal">&times;</span>
            <h3>Create New Notepad</h3>
            <form id="form-create-pad">
                <div class="form-group">
                    <label>Name</label>
                    <input type="text" id="pad-name" required>
                </div>
                <div class="form-group">
                    <label>
                        <input type="checkbox" id="pad-public" style="width:auto;"> Make Public (Unencrypted)
                    </label>
                    <small style="display:block; color:var(--text-muted); font-size:0.8rem; margin-top:4px;">🔒 Private notepads are end-to-end encrypted client-side. The server operator cannot read your private notes.</small>
                </div>
                <div class="form-group">
                    <label>Marker Color</label>
                    <input type="color" id="pad-color" value="#3388ff">
                </div>
                <button type="submit" class="btn btn-primary">Create</button>
            </form>
        </div>
    </div>

    <!-- Edit Notepad Modal -->
    <div id="modal-edit-pad" class="modal hidden">
        <div class="modal-content">
            <span class="close-modal">&times;</span>
            <h3>Edit Notepad</h3>
            <form id="form-edit-pad">
                <input type="hidden" id="pad-id-edit">
                <div class="form-group">
                    <label>Name</label>
                    <input type="text" id="pad-name-edit" required>
                </div>
                <div class="form-group">
                    <label>
                        <input type="checkbox" id="pad-public-edit" style="width:auto;"> Make Public (Unencrypted)
                    </label>
                    <small style="display:block; color:var(--text-muted); font-size:0.8rem; margin-top:4px;">🔒 Private notepads remain end-to-end encrypted at rest.</small>
                </div>
                <div class="form-group">
                    <label>Marker Color</label>
                    <input type="color" id="pad-color-edit" value="#3388ff">
                </div>
                <button type="submit" class="btn btn-primary">Save Changes</button>
            </form>
        </div>
    </div>

    <!-- Share Settings Modal -->
    <div id="modal-share-settings" class="modal hidden">
        <div class="modal-content">
            <span class="close-modal">&times;</span>
            <h3>Share Settings for <span id="share-pad-name"></span></h3>
            
            <h4>Current Collaborators</h4>
            <div id="collaborators-list" style="margin-bottom: 20px;">
                <!-- Collaborators will be injected here -->
            </div>

            <h4>Add New Collaborator</h4>
            <form id="form-add-collaborator">
                <input type="hidden" id="share-pad-id">
                <div class="form-group">
                    <label>User Email</label>
                    <input type="email" id="collaborator-email" required>
                </div>
                <div class="form-group">
                    <label>Permission</label>
                    <select id="collaborator-permission">
                        <option value="read">Read-Only</option>
                        <option value="write">Read & Write</option>
                    </select>
                </div>
                <button type="submit" class="btn btn-primary">Add Collaborator</button>
            </form>
        </div>
    </div>

    <!-- Create Note Modal -->
    <div id="modal-create-note" class="modal hidden">
        <div class="modal-content">
            <span class="close-modal">&times;</span>
            <h3>Add Note</h3>
            <p style="font-size:0.8rem; color:#666; margin-bottom:10px;">Note will be placed at the center of the map.</p>
            <form id="form-create-note">
                <div class="form-group">
                    <label>Title</label>
                    <input type="text" id="note-title" required>
                </div>
                <div class="form-group">
                    <label>Content</label>
                    <textarea id="note-content" required rows="4" style="width: 100%;"></textarea>
                </div>
                <button type="submit" class="btn btn-primary">Add Note</button>
            </form>
        </div>
    </div>

    <!-- Edit Note Modal -->
    <div id="modal-edit-note" class="modal hidden">
        <div class="modal-content">
            <span class="close-modal">&times;</span>
            <h3>Edit Note</h3>
            <form id="form-edit-note">
                <input type="hidden" id="note-id-edit">
                <div class="form-group">
                    <label>Title</label>
                    <input type="text" id="note-title-edit" required>
                </div>
                <div class="form-group">
                    <label>Content</label>
                    <textarea id="note-content-edit" required rows="4" style="width: 100%;"></textarea>
                </div>
                <button type="submit" class="btn btn-primary">Save Changes</button>
            </form>
        </div>
    </div>

    <!-- Scripts -->
    <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js" integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" crossorigin=""></script>
    <script src="https://unpkg.com/leaflet.markercluster@1.4.1/dist/leaflet.markercluster.js"></script>
    <script src="/assets/js/crypto.js"></script>
    <script src="/assets/js/nav.js"></script>
    <script src="/assets/js/map.js"></script>
    <script src="/assets/js/sidebar.js"></script>
    <script src="/assets/js/index.js"></script>
    <script src="/assets/js/actions.js"></script>
    <script src="/assets/js/search.js"></script>
</body>
</html>