Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Start Suite</title> | |
| <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet"> | |
| <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> | |
| <link rel="stylesheet" href="{{ url_for('static', filename='styles.css') }}"> | |
| <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> | |
| <link rel="icon" type="image/x-icon" href="{{ url_for('static', filename='icon.png') }}"> | |
| </head> | |
| <body> | |
| <!-- Rain Effect Background --> | |
| <div class="rain-container" id="rainContainer"></div> | |
| <div class="container"> | |
| <!-- Top Bar with Clock and Search --> | |
| <div class="top-bar"> | |
| <!-- User Info --> | |
| <div class="user-info"> | |
| <button class="account-btn" onclick="toggleAccountDropdown()"> | |
| <span class="material-icons">account_circle</span> | |
| </button> | |
| <!-- Account Dropdown --> | |
| <div class="account-dropdown" id="accountDropdown"> | |
| <div class="dropdown-header"> | |
| <span class="material-icons">person</span> | |
| <span id="username" class="dropdown-username">{{ username }}</span> | |
| </div> | |
| <!-- <div class="dropdown-divider"></div> --> | |
| <div class="dropdown-item" onclick="openChangePasswordModal()"> | |
| <span class="material-icons">lock</span> | |
| <span>Change Password</span> | |
| </div> | |
| <div class="dropdown-item" onclick="openVaultPage()"> | |
| <span class="material-icons">security</span> | |
| <span>Password Vault</span> | |
| </div> | |
| <div class="dropdown-item" onclick="openDeveloperPage()"> | |
| <span class="material-icons">analytics</span> | |
| <span>Developer Stats</span> | |
| </div> | |
| <div class="dropdown-divider"></div> | |
| <div class="dropdown-item" onclick="logout()"> | |
| <span class="material-icons">logout</span> | |
| <span>Logout</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Search Bar --> | |
| <div class="search-container"> | |
| <input type="text" class="search-box" placeholder="Search Google or type a URL" id="searchInput"> | |
| <span class="material-icons search-icon" id="searchIcon">search</span> | |
| </div> | |
| <!-- Clock Section --> | |
| <div class="clock"> | |
| <div class="time" id="time">12:00:00</div> | |
| <div class="date" id="date">Monday, January 1, 2024</div> | |
| </div> | |
| </div> | |
| <!-- Main Content --> | |
| <div class="main-content"> | |
| <!-- Bookmarks Card --> | |
| <div class="card"> | |
| <div class="card-header"> | |
| <span class="material-icons card-icon">bookmark</span> | |
| <h3 class="card-title">Quick Access</h3> | |
| </div> | |
| <div class="bookmarks-grid" id="bookmarksGrid"> | |
| <!-- Bookmarks will be populated by JavaScript --> | |
| </div> | |
| </div> | |
| <!-- Notepad Card --> | |
| <div class="card"> | |
| <div class="card-header"> | |
| <span class="material-icons card-icon">notes</span> | |
| <h3 class="card-title">Notes</h3> | |
| </div> | |
| <div class="notepad-container"> | |
| <div class="notes-tabs"> | |
| <button class="note-tab active" data-note-id="0"> | |
| Note 1 | |
| <span class="close-note" | |
| onclick="event.stopPropagation(); window.notePad.removeNote(0);">×</span> | |
| </button> | |
| <button class="add-note-btn" onclick="window.notePad.addNote()"> | |
| <span class="material-icons" style="font-size: 1rem;">add</span> | |
| </button> | |
| </div> | |
| <div class="note-content active" data-note-id="0"> | |
| <textarea class="notepad-textarea" placeholder="Start typing your notes here..."></textarea> | |
| <div class="notepad-footer"> | |
| <span class="save-indicator"> | |
| <span class="material-icons" | |
| style="font-size: 1rem; vertical-align: middle;">check_circle</span> | |
| Saved | |
| </span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Add Bookmark Modal --> | |
| <div id="bookmarkModal" class="modal"> | |
| <div class="modal-content"> | |
| <div class="modal-header"> | |
| <h3 class="modal-title" id="modalTitle">Add Bookmark</h3> | |
| <button class="close-btn" id="closeModal">×</button> | |
| </div> | |
| <form id="bookmarkForm"> | |
| <div class="form-group"> | |
| <label class="form-label" for="bookmarkName">Name</label> | |
| <input type="text" class="form-input" id="bookmarkName" required> | |
| </div> | |
| <div class="form-group"> | |
| <label class="form-label" for="bookmarkUrl">URL</label> | |
| <input type="url" class="form-input" id="bookmarkUrl" required> | |
| </div> | |
| <div class="form-group"> | |
| <label class="form-label" for="bookmarkIcon">Icon</label> | |
| <select class="form-input" id="bookmarkIcon" required> | |
| <option value="">Select an icon</option> | |
| <option value="language">🌐 Web/Language</option> | |
| <option value="work">💼 Work</option> | |
| <option value="home">🏠 Home</option> | |
| <option value="school">🎓 Education</option> | |
| <option value="shopping_cart">🛒 Shopping</option> | |
| <option value="movie">🎬 Entertainment</option> | |
| <option value="music_note">🎵 Music</option> | |
| <option value="photo">📸 Photos</option> | |
| <option value="mail">📧 Email</option> | |
| <option value="forum">💬 Social</option> | |
| <option value="sports">⚽ Sports</option> | |
| <option value="local_dining">🍽️ Food</option> | |
| <option value="flight">✈️ Travel</option> | |
| <option value="account_balance">🏦 Finance</option> | |
| <option value="favorite">❤️ Favorites</option> | |
| </select> | |
| </div> | |
| <div style="display: flex; justify-content: space-between; align-items: center;"> | |
| <button type="button" class="btn btn-danger" id="deleteBtn" style="display: none;">Delete</button> | |
| <div> | |
| <button type="button" class="btn btn-secondary" id="cancelBtn">Cancel</button> | |
| <button type="submit" class="btn" id="submitBtn">Add Bookmark</button> | |
| </div> | |
| </div> | |
| </form> | |
| </div> | |
| </div> | |
| <!-- Change Password Modal --> | |
| <div id="passwordModal" class="modal"> | |
| <div class="modal-content"> | |
| <div class="modal-header"> | |
| <h3 class="modal-title">Change Password</h3> | |
| <button class="close-btn" onclick="closePasswordModal()">×</button> | |
| </div> | |
| <form id="passwordForm"> | |
| <div class="form-group"> | |
| <label class="form-label" for="currentPassword">Current Password</label> | |
| <input type="password" class="form-input" id="currentPassword" required> | |
| </div> | |
| <div class="form-group"> | |
| <label class="form-label" for="newPassword">New Password</label> | |
| <input type="password" class="form-input" id="newPassword" required> | |
| </div> | |
| <div class="form-group"> | |
| <label class="form-label" for="confirmPassword">Confirm New Password</label> | |
| <input type="password" class="form-input" id="confirmPassword" required> | |
| </div> | |
| <div style="display: flex; justify-content: flex-end;"> | |
| <button type="button" class="btn btn-secondary" onclick="closePasswordModal()">Cancel</button> | |
| <button type="submit" class="btn">Change Password</button> | |
| </div> | |
| </form> | |
| </div> | |
| </div> | |
| <!-- Developer Stats Modal --> | |
| <div id="developerModal" class="modal"> | |
| <div class="modal-content developer-modal"> | |
| <div class="modal-header"> | |
| <h3 class="modal-title">Developer Statistics</h3> | |
| <button class="close-btn" onclick="closeDeveloperModal()">×</button> | |
| </div> | |
| <div class="developer-content"> | |
| <div class="stats-grid"> | |
| <div class="stat-card"> | |
| <div class="stat-icon"> | |
| <span class="material-icons">people</span> | |
| </div> | |
| <div class="stat-info"> | |
| <h4 id="totalUsers">0</h4> | |
| <p>Total Users</p> | |
| </div> | |
| </div> | |
| <div class="stat-card"> | |
| <div class="stat-icon"> | |
| <span class="material-icons">visibility</span> | |
| </div> | |
| <div class="stat-info"> | |
| <h4 id="totalVisits">0</h4> | |
| <p>Total Visits</p> | |
| </div> | |
| </div> | |
| <div class="stat-card"> | |
| <div class="stat-icon"> | |
| <span class="material-icons">search</span> | |
| </div> | |
| <div class="stat-info"> | |
| <h4 id="totalSearches">0</h4> | |
| <p>Total Searches</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="chart-container"> | |
| <h4>Monthly Activity Trends</h4> | |
| <canvas id="activityChart" width="600" height="300"></canvas> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Vault Authentication Modal --> | |
| <div id="vaultAuthModal" class="modal"> | |
| <div class="modal-content"> | |
| <div class="modal-header"> | |
| <h3 class="modal-title">Vault Access</h3> | |
| <button class="close-btn" onclick="closeVaultAuthModal()">×</button> | |
| </div> | |
| <div class="vault-auth-content"> | |
| <div class="vault-lock-icon"> | |
| <span class="material-icons">lock</span> | |
| </div> | |
| <!-- <p>Enter your password to access the vault</p> --> | |
| <form id="vaultAuthForm"> | |
| <div class="form-group"> | |
| <input type="password" class="form-input" id="vaultPassword" placeholder="Enter your password" | |
| required> | |
| </div> | |
| <div style="display: flex; justify-content: flex-start; gap: 10px;"> | |
| <button type="button" class="btn btn-secondary" onclick="closeVaultAuthModal()">Cancel</button> | |
| <button type="submit" class="btn">Access</button> | |
| </div> | |
| </form> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Password Vault Modal --> | |
| <div id="vaultModal" class="modal"> | |
| <div class="modal-content vault-modal"> | |
| <div class="modal-header"> | |
| <h3 class="modal-title">Password Vault</h3> | |
| <button class="close-btn" onclick="closeVaultModal()">×</button> | |
| </div> | |
| <div class="vault-content"> | |
| <div class="vault-toolbar"> | |
| <div class="vault-search"> | |
| <input type="text" class="search-input" placeholder="Search passwords..." id="vaultSearchInput"> | |
| <span class="material-icons search-icon">search</span> | |
| </div> | |
| <button class="btn add-password-btn" onclick="openAddPasswordModal()"> | |
| <span class="material-icons">add</span> | |
| Add Password | |
| </button> | |
| </div> | |
| <div class="vault-list" id="vaultList"> | |
| <!-- Password entries will be populated here --> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Add/Edit Password Modal --> | |
| <div id="passwordEntryModal" class="modal"> | |
| <div class="modal-content"> | |
| <div class="modal-header"> | |
| <h3 class="modal-title" id="passwordEntryTitle">Add Password</h3> | |
| <button class="close-btn" onclick="closePasswordEntryModal()">×</button> | |
| </div> | |
| <form id="passwordEntryForm"> | |
| <div class="form-group"> | |
| <label class="form-label" for="entryTitle">Title</label> | |
| <input type="text" class="form-input" id="entryTitle" required> | |
| </div> | |
| <div class="form-group"> | |
| <label class="form-label" for="entryUsername">Username/Email</label> | |
| <input type="text" class="form-input" id="entryUsername"> | |
| </div> | |
| <div class="form-group"> | |
| <label class="form-label" for="entryPassword">Password</label> | |
| <div class="password-input-container"> | |
| <input type="password" class="form-input" id="entryPassword" required> | |
| <button type="button" class="password-toggle-btn" | |
| onclick="togglePasswordVisibility('entryPassword')"> | |
| <span class="material-icons">visibility</span> | |
| </button> | |
| <button type="button" class="password-generate-btn" onclick="generatePassword()"> | |
| <span class="material-icons">refresh</span> | |
| </button> | |
| </div> | |
| <div class="password-strength"> | |
| <div class="password-strength-bar"></div> | |
| </div> | |
| </div> | |
| <div class="form-group"> | |
| <label class="form-label" for="entryWebsite">Website</label> | |
| <input type="url" class="form-input" id="entryWebsite"> | |
| </div> | |
| <div class="form-group"> | |
| <label class="form-label" for="entryNotes">Notes</label> | |
| <textarea class="form-input" id="entryNotes" rows="3"></textarea> | |
| </div> | |
| <div style="display: flex; justify-content: space-between; align-items: center;"> | |
| <button type="button" class="btn btn-danger" id="deletePasswordBtn" | |
| style="display: none;">Delete</button> | |
| <div> | |
| <button type="button" class="btn btn-secondary" | |
| onclick="closePasswordEntryModal()">Cancel</button> | |
| <button type="submit" class="btn" id="savePasswordBtn">Save Password</button> | |
| </div> | |
| </div> | |
| </form> | |
| </div> | |
| </div> | |
| <script> | |
| </script> | |
| <script src="{{ url_for('static', filename='script.js') }}"></script> | |
| </body> | |
| </html> |