A single-file, zero-dependency browser speed dial page.
All data stored locally — no server, no account, no internet required to run.
DarioSpeedDial.html anywhere on your computer.No installation, no dependencies, no internet connection required to use the page itself.
| Feature | Description |
|---|---|
| Folders | Organize dials into named tabs in the top bar |
| Dials | Bookmarks displayed as thumbnail cards |
| Thumbnail Modes | Auto favicon, solid color, or custom image |
| Search Bar | Search dial names across all or current folder |
| Clock / Date | Live clock with configurable format, locale, fonts |
| Background Images | Per-element background images (page, top bar, search bar, clock, folder buttons) |
| Dark / Light theme | Toggle with one click; separate color palettes for each |
| Custom CSS | Full CSS override capability with a built-in guide |
| Export / Import | Save and restore all settings and dials as a JSON file |
| Connectivity Monitor | Detects internet outages; warns before favicon refreshes fail |
| Drag and Drop | Reorder dials and folders by dragging |
| Multi-language UI | 10 languages: English, Spanish, Hebrew, German, French, Italian, Portuguese, Russian, Greek, Arabic |
| Inline favicon | No external icon files needed |
Folders appear as tabs in the top bar. Click a folder tab to switch to it.
Click the folder+ button (top right of the top bar) to open the Add Folder panel. Enter a name and click Save.
Right-click a folder tab → Edit to open the Folder Settings panel, where you can change:
A folder can only be deleted if it is empty (contains no dials). Right-click an empty folder → Delete.
Right-click a folder → Move all to… to move every dial in that folder to another folder at once.
Drag a folder tab left or right to reorder it.
Dials are bookmark cards displayed in the main grid area.
Click the dial+ button (top right) to open the Add Dial panel. Enter a URL (required) and optionally a name. If no name is given, one is generated from the URL hostname. Click Save to add with default settings, or More Settings… to go directly to the full Dial Settings panel.
Right-click a dial → Edit to open a quick Name + URL editor. Click More Settings… inside that panel to escalate to the full Dial Settings.
Right-click a dial → Edit → More Settings… to access:
Resting the cursor on any dial for half a second shows a tooltip containing:
Right-click a dial → Delete. A confirmation is required.
Right-click a dial → Move to… to move it to another folder.
Drag a dial card to a new position in the grid. The order is preserved after page reload.
Each dial can display its thumbnail in one of three modes, selectable in the Dial Settings panel:
The thumbnail shows the website's favicon fetched automatically from Google's favicon service. Requires an internet connection. Use Refresh Favicon inside Dial Settings or the context menu Refresh Thumbnail to re-fetch.
The thumbnail shows a solid color background with the first letter of the hostname displayed over it. Choose any color with the color picker. No internet required.
Upload any image from your computer to use as the thumbnail. The image is automatically resized to a maximum of 100 px wide and encoded as a PNG for storage efficiency.
The clock in the top bar is live and updates every second.
| Style | Effect |
|---|---|
| Stretched (default) | Clock is vertically stretched by 1.2× for a distinctive look |
| Normal | Standard proportions |
| Compact | Slightly compressed vertically |
Change the style in Settings → Clock → Clock Style.
Choices: MM/DD/YYYY, DD/MM/YYYY, YYYY-MM-DD, Month D, YYYY. Optional weekday name and ISO 8601 week number display.
The locale controls how month names, weekday names, and time periods (AM/PM) are displayed. It is independent of the UI language — you can have English UI with Hebrew locale for Hebrew month names.
Separate fonts for the time and date displays, configurable in Settings → Clock. Each has family, size (with unit: em, px, %, rem), bold, italic, and underline.
| Target | Notes |
|---|---|
| Page background | Resized to max 1280 px wide, JPEG quality ~91% (≤9% quality loss) |
| Top bar | Resized to fit the top bar's actual rendered size |
| Search bar | Resized to fit the search bar's actual rendered size |
| Clock area | Resized to fit the clock container's actual rendered size |
| Folder tab buttons | Set per-folder in Folder Settings |
All images are stored in localStorage as base64 data URIs. Images are compressed using canvas-based JPEG encoding to minimize storage use. A storage warning banner appears if localStorage quota is exceeded.
Use the Clear button next to each image preview in the Settings panel to remove an image.
Open with the ⚙ button in the top bar. The panel is organized into collapsible accordion sections:
| Section | Contents |
|---|---|
| Colors | All theme colors including rgba-capable pickers for clock BG, folders bar BG, and folder count badge |
| Clock | Clock colors, style, time/date format, locale, fonts |
| Background Images | All background image pickers |
| Other Settings | Search engine, search bar visibility, folder count badge, offline banner style, language |
| Theme Tools | Restore defaults, random theme generator, custom CSS, export/import |
Click any section header to expand or collapse it.
The page actively monitors your internet connection in the background.
navigator.onLine is checked immediately, then a real probe is sent to a known endpoint to verify actual connectivity.online and offline events are also listened to for faster reaction.A Wi-Fi icon appears to the right of the ⚙ button in the top bar: filled = online, struck-out outline = offline. The shape difference makes it readable without relying on color.
When the connection is lost, the page notifies you in one of two ways, controlled by Settings → Other Settings → Show Offline Banner:
| Operation | How to trigger |
|---|---|
| Refresh one dial's thumbnail | Right-click dial → Refresh Thumbnail |
| Refresh all thumbnails in current folder | Right-click folder → Refresh All Thumbnails |
| Refresh ALL dials across all folders | Right-click folder → Refresh ALL Dials (all folders) |
Click the sun/moon button in the top bar to toggle between dark and light mode. Each mode has its own independent color palette.
Colors with transparency (clock background, folders bar background, folder count badge) use a color picker + opacity slider pair.
Settings → Theme Tools → Generate Random generates a random harmonious color palette. Restore Defaults resets all colors to the built-in defaults.
Settings → Theme Tools → Export saves all settings, folders, dials, and images to a .json file — a complete backup.
Settings → Theme Tools → Import loads a previously exported .json file, replacing all current data.
Settings → Theme Tools → Custom CSS opens a CSS editor. Use !important to ensure your rules take effect.
/* Main page background */
body { background-color: #0a0a1a !important; }
/* Top bar */
.top-bar { border-radius: 0 !important; }
/* Clock */
.time { letter-spacing: 0.1em !important; }
.date { font-size: 0.7em !important; }
/* Search box */
#search-box { border-radius: 20px !important; }
/* All folder tabs */
.folder { border-radius: 0 !important; }
/* Active folder tab */
.folder.active { font-style: italic !important; }
/* Dial hover effect */
.dial { transition: transform 0.15s ease; }
.dial:hover { transform: scale(1.08); }
/* Dial thumbnail glow on hover */
.dial:hover .dial-thumbnail {
box-shadow: 0 0 12px var(--highlight-color) !important;
}Every folder and dial has a data-id attribute. Find it with your browser's Inspect tool, then:
/* Style one specific folder */
.folder[data-id="abc123"] {
background: linear-gradient(135deg, #1a237e, #4a90e2) !important;
color: white !important;
}
/* Style a specific dial's name */
.dial[data-id="def456"] .dial-name {
color: gold !important;
font-weight: bold !important;
}| Variable | Default (dark) | Description |
|---|---|---|
--background-color | #1a1a1a | Page background |
--foreground-color | #e0e0e0 | Default text |
--highlight-color | #4a90e2 | Accent / active color |
--highlight-text-color | #ffffff | Text on highlighted elements |
--panel-background-color | #2c2c2c | Floating panels background |
--border-color | #444444 | Borders and dividers |
--time-color | #ffffff | Clock time text |
--date-color | #ffffff | Clock date text |
--clock-bg-color | rgba(44,44,44,0.1) | Clock container background |
--folders-bar-bg-color | rgba(44,44,44,0.1) | Folders bar background |
--folder-count-bg-color | rgba(74,74,30,0.8) | Folder count badge background |
| Key | Action |
|---|---|
Esc | Close any open panel, dismiss context menu |
Enter | Confirm (when a panel's Save button is focused) |
Tab | Navigate between form fields |
The UI language is set in Settings → Other Settings → Language. The date/time locale is set in Settings → Clock → Locale. These two settings are intentionally independent — you can have an English UI with a Hebrew locale.
When you change the UI language, a subtle hint appears offering to also sync the locale. This defaults to off so your locale preference is preserved.
Supported languages: English, Spanish, Hebrew, German, French, Italian, Portuguese, Russian, Greek, Arabic.
.html file.crypto.randomUUID() to avoid collisions.fetch with mode: 'no-cors' against gstatic.com/generate_204. Any response counts as online. 5-second abort timeout prevents hanging.