Something went wrong. Try again.
Monorepo for Aesthetic.Computer aesthetic.computer
Something went wrong. Try again.
7.4 kB · 296 lines
HTML
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>Preferences</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Helvetica Neue', sans-serif; background: linear-gradient(180deg, #1a1a2e 0%, #16162a 100%); color: #e0e0e0; height: 100vh; overflow: hidden; user-select: none; -webkit-app-region: drag; } .titlebar { height: 38px; display: flex; align-items: center; justify-content: center; background: rgba(136, 68, 255, 0.1); border-bottom: 1px solid rgba(136, 68, 255, 0.2); font-size: 13px; font-weight: 500; color: rgba(136, 68, 255, 0.8); letter-spacing: 0.5px; } .content { padding: 24px; -webkit-app-region: no-drag; height: calc(100vh - 38px); overflow-y: auto; } .section { margin-bottom: 28px; } .section-title { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; color: rgba(136, 68, 255, 0.6); margin-bottom: 12px; } .setting-row { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; background: rgba(255, 255, 255, 0.03); border-radius: 8px; margin-bottom: 8px; border: 1px solid rgba(136, 68, 255, 0.1); } .setting-row:hover { background: rgba(136, 68, 255, 0.08); border-color: rgba(136, 68, 255, 0.2); } .setting-label { font-size: 13px; color: #e0e0e0; } .setting-description { font-size: 11px; color: rgba(255, 255, 255, 0.4); margin-top: 2px; } .setting-left { flex: 1; } /* Toggle switch */ .toggle { position: relative; width: 44px; height: 24px; cursor: pointer; } .toggle input { opacity: 0; width: 0; height: 0; } .toggle-slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background: rgba(255, 255, 255, 0.1); transition: 0.2s; border-radius: 24px; } .toggle-slider:before { position: absolute; content: ""; height: 18px; width: 18px; left: 3px; bottom: 3px; background: white; transition: 0.2s; border-radius: 50%; } .toggle input:checked + .toggle-slider { background: rgba(136, 68, 255, 0.8); } .toggle input:checked + .toggle-slider:before { transform: translateX(20px); } /* Text input */ .text-input { background: rgba(0, 0, 0, 0.3); border: 1px solid rgba(136, 68, 255, 0.3); border-radius: 6px; padding: 6px 10px; color: #e0e0e0; font-size: 13px; width: 100px; text-align: center; outline: none; transition: border-color 0.2s; } .text-input:focus { border-color: rgba(136, 68, 255, 0.7); } /* Select dropdown */ .select-input { background: rgba(0, 0, 0, 0.3); border: 1px solid rgba(136, 68, 255, 0.3); border-radius: 6px; padding: 6px 10px; color: #e0e0e0; font-size: 13px; outline: none; cursor: pointer; } .select-input:focus { border-color: rgba(136, 68, 255, 0.7); } .select-input option { background: #1a1a2e; color: #e0e0e0; } /* Footer */ .footer { position: absolute; bottom: 0; left: 0; right: 0; padding: 16px 24px; background: rgba(0, 0, 0, 0.2); border-top: 1px solid rgba(136, 68, 255, 0.1); text-align: center; font-size: 11px; color: rgba(255, 255, 255, 0.3); } .footer a { color: rgba(136, 68, 255, 0.6); text-decoration: none; } .footer a:hover { color: rgba(136, 68, 255, 0.9); } </style></head><body> <div class="titlebar">Preferences</div> <div class="content"> <!-- Menu Bar Section --> <div class="section"> <div class="section-title">Menu Bar</div> <div class="setting-row"> <div class="setting-left"> <div class="setting-label">Show Title in Menu Bar</div> <div class="setting-description">Display current piece name next to the tray icon</div> </div> <label class="toggle"> <input type="checkbox" id="showTrayTitle"> <span class="toggle-slider"></span> </label> </div> </div> <!-- Startup Section --> <div class="section"> <div class="section-title">Startup</div> <div class="setting-row"> <div class="setting-left"> <div class="setting-label">Launch at Login</div> <div class="setting-description">Start Aesthetic Computer when you log in</div> </div> <label class="toggle"> <input type="checkbox" id="launchAtLogin"> <span class="toggle-slider"></span> </label> </div> <div class="setting-row"> <div class="setting-left"> <div class="setting-label">Default Mode</div> <div class="setting-description">Window type to open on launch</div> </div> <select class="select-input" id="defaultMode"> <option value="development">Development</option> <option value="production">Production</option> <option value="shell">Shell</option> </select> </div> </div> </div> <div class="footer"> Aesthetic Computer · <a href="#" id="version"></a> </div>
<script> const { ipcRenderer } = require('electron'); const { app } = require('@electron/remote') || {}; // Load preferences and populate UI async function loadPrefs() { const prefs = await ipcRenderer.invoke('get-preferences'); document.getElementById('showTrayTitle').checked = prefs.showTrayTitle; document.getElementById('launchAtLogin').checked = prefs.launchAtLogin; document.getElementById('defaultMode').value = prefs.defaultMode || 'development'; } // Save preference changes async function savePref(key, value) { const update = {}; update[key] = value; await ipcRenderer.invoke('set-preferences', update); } // Wire up controls document.getElementById('showTrayTitle').addEventListener('change', async (e) => { await savePref('showTrayTitle', e.target.checked); }); document.getElementById('launchAtLogin').addEventListener('change', async (e) => { await savePref('launchAtLogin', e.target.checked); }); document.getElementById('defaultMode').addEventListener('change', async (e) => { await savePref('defaultMode', e.target.value); }); // Get version try { const v = require('electron').remote?.app?.getVersion?.() || require('@electron/remote')?.app?.getVersion?.(); if (v) { document.getElementById('version').textContent = 'v' + v; } } catch (e) { // Version not available } loadPrefs(); </script></body></html>