forked from extern/the-glorious-startpage
c59d1ec0ec
* add screens css * separate dir for screens * separate dir for dashboard and settings * separate dir for centeredbox and its contents * move autosuggestion to centeredbox dir * rename webmenu to webmenuscreen * fix bugs and errors caused by renaming webmenu * fix missing dashboard icons * fix missing weather forecast icons * reduced the use of !important * reduced the use of !important * reduced the use of !important * reduced the use of !important * reduced the use of !important * reduced the use of !important * combine bars and panels * bars css cleanup * dashboard missing icon fix and css * decrease the usage of !important * decrease the usage of important
308 lines
12 KiB
HTML
308 lines
12 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<meta charset='utf-8'>
|
|
<head>
|
|
<meta charset='utf-8' />
|
|
<meta name='viewport' content='width=device-width, viewport-fit=cover, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no'>
|
|
<meta name='robots' content='noindex'>
|
|
<link rel='stylesheet' href='css/style.css' class='style'>
|
|
|
|
<!-- Favicons -->
|
|
<link rel='shortcut icon' href='assets/favicon/favicon.ico'>
|
|
<link rel='icon' sizes='16x16 32x32 64x64' href='assets/favicon/favicon.ico'>
|
|
<link rel='icon' type='image/png' sizes='196x196' href='assets/favicon/favicon-192.png'>
|
|
<link rel='icon' type='image/png' sizes='160x160' href='assets/favicon/favicon-160.png'>
|
|
<link rel='icon' type='image/png' sizes='96x96' href='assets/favicon/favicon-96.png'>
|
|
<link rel='icon' type='image/png' sizes='64x64' href='assets/favicon/favicon-64.png'>
|
|
<link rel='icon' type='image/png' sizes='32x32' href='assets/favicon/favicon-32.png'>
|
|
<link rel='icon' type='image/png' sizes='16x16' href='assets/favicon/favicon-16.png'>
|
|
<link rel='apple-touch-icon' href='assets/favicon/favicon-57.png'>
|
|
<link rel='apple-touch-icon' sizes='114x114' href='assets/favicon/favicon-114.png'>
|
|
<link rel='apple-touch-icon' sizes='72x72' href='assets/favicon/favicon-72.png'>
|
|
<link rel='apple-touch-icon' sizes='144x144' href='assets/favicon/favicon-144.png'>
|
|
<link rel='apple-touch-icon' sizes='60x60' href='assets/favicon/favicon-60.png'>
|
|
<link rel='apple-touch-icon' sizes='120x120' href='assets/favicon/favicon-120.png'>
|
|
<link rel='apple-touch-icon' sizes='76x76' href='assets/favicon/favicon-76.png'>
|
|
<link rel='apple-touch-icon' sizes='152x152' href='assets/favicon/favicon-152.png'>
|
|
<link rel='apple-touch-icon' sizes='180x180' href='assets/favicon/favicon-180.png'>
|
|
<meta name='msapplication-TileColor' content='#FFFFFF'>
|
|
<meta name='msapplication-TileImage' content='assets/favicon/favicon-144.png'>
|
|
<meta name='msapplication-config' content='assets/favicon/browserconfig.xml'>
|
|
|
|
<title>Home</title>
|
|
</head>
|
|
<body>
|
|
|
|
<!-- The place where we set the DUMMY background/image -->
|
|
<div id='dummyBodyBackground'></div>
|
|
|
|
<div class='bar' id='topPanel'>
|
|
<div id='clock'></div>
|
|
</div>
|
|
|
|
<div class='dockContainer'>
|
|
<div class='bar' id='dock'>
|
|
<!-- Below is the structure of a DIV of a function button that will be generated in js/dock-buttons.js -->
|
|
<!--
|
|
<div id='buttonbuttonLaunch' class='dockButton'>
|
|
<div id='buttonImageLaunch' class='dockButtonImage'></div>
|
|
</div>
|
|
-->
|
|
<!-- Below is the structure of a DIV of a website button that will be generated in js/dock-buttons.js -->
|
|
<!--
|
|
<a class='dockLink' href='https://example.com/' tabindex='-1'>
|
|
<div id='buttonReddit' class='dockButton'>
|
|
<div id='buttonImage0' class='dockButtonImage'></div>
|
|
</div>
|
|
</a>
|
|
-->
|
|
</div>
|
|
</div>
|
|
|
|
<div id='centeredBoxOverlay'></div>
|
|
<div class='centeredBar' id='centeredBox'>
|
|
<div id='profileImageContainer'>
|
|
<div id='profileImage'></div>
|
|
</div>
|
|
<div id='searchBoxContainer' class='searchBoxContainer'>
|
|
<input type='text' id='searchBox' autocomplete='off' autofocus='off' placeholder=' Search with HiddenWiki'/>
|
|
<div id='suggestionsContainer' class='phrasesContainer'>
|
|
<ul id='suggestions'>
|
|
<!-- Below is the structure of an LI that will be generated in js/auto-suggestion.js -->
|
|
<!--
|
|
<li id='phrase'>
|
|
<button type='button' class='phraseButton'>Suggestion1</button>
|
|
</li>
|
|
-->
|
|
</ul>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class='dashboard' id='rightDashboard'>
|
|
<div class='rightDashboardBody'>
|
|
<div id='greeterMessage' class='dashboardMessage'></div>
|
|
<div id='dateMessage' class='dashboardMessage'></div>
|
|
|
|
<!-- Weather Settings -->
|
|
<form class='weatherSettings'>
|
|
<div id='weatherSettingsPadding'>
|
|
|
|
<div class='header' id='weatherSettingsHeader'>
|
|
<div class='headerIcon' id='weatherSettingsHeaderIcon'></div>
|
|
<label for='apiKeySet' class='headerLabel' id='weatherSettingsHeaderLabel'>Weather Settings</label>
|
|
</div>
|
|
|
|
<div id='weatherSettingsContainer'>
|
|
<div class='weatherSettingsGroups' id='weatherSettingsAPIKey'>
|
|
<label for='apiKeySet' class='weatherSettingsLabels'>API Key</label>
|
|
<input type='text' class='weatherSettingsInputs' id='apiKeySet' autocomplete='off' placeholder='API KEY'/>
|
|
</div>
|
|
|
|
<div class='weatherSettingsGroups' id='weatherSettingsUnitsSelect'>
|
|
<label for='weatherSelectUnits' class='weatherSettingsLabels'>Locator Mode</label>
|
|
<select class='weatherSettingsInputs' id='weatherSelectLocator'>
|
|
<option value='city'>City</option>
|
|
<option value='geolocation'>Geolocation</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class='weatherSettingsGroups' id='weatherSettingsCityID'>
|
|
<label for='cityIDSet' class='weatherSettingsLabels'>City ID</label>
|
|
<input type='text' class='weatherSettingsInputs' id='cityIDSet' autocomplete='off' placeholder='City ID'/>
|
|
</div>
|
|
|
|
<div class='weatherSettingsGroups' id='weatherSettingsUnitsSelect'>
|
|
<label for='weatherSelectUnits' class='weatherSettingsLabels'>Units</label>
|
|
<select class='weatherSettingsInputs' id='weatherSelectUnits'>
|
|
<option value='metric'>Metric</option>
|
|
<option value='imperial'>Imperial</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class='weatherSettingsGroups' id='weatherSettingsButtons'>
|
|
<button type='button' class='weatherSettingsInputs' id='weatherSettingsReset'>Reset</button>
|
|
<button type='button' class='weatherSettingsInputs' id='weatherSettingsApply'>Apply</button>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</form>
|
|
|
|
<!-- Select search engine -->
|
|
<form class='searchEngine'>
|
|
<div id='searchEnginePadding'>
|
|
<div class='header' id='searchEngineHeader'>
|
|
<div class='headerIcon' id='searchEngineHeaderIcon'></div>
|
|
<label for='searchEngineSelect' class='headerLabel' id='searchEngineHeaderLabel'>Search Engine</label>
|
|
</div>
|
|
<div id='searchEngineContainer'>
|
|
<select id='searchEngineSelect'>
|
|
<!-- Below is the structure of an option that will be generated in js/search-engine-settings.js -->
|
|
<!--
|
|
<option value='example'>Example</option>
|
|
-->
|
|
</select>
|
|
<button type='button' id='searchEngineAsDefault'>Set as Default</button>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
|
|
<!-- Theme engine -->
|
|
<form class='themeEngine'>
|
|
<div id='themeEnginePadding'>
|
|
<div class='header' id='themeEngineHeader'>
|
|
<div class='headerIcon' id='themeEngineHeaderIcon'></div>
|
|
<label for='backgroundSet' class='headerLabel' id='themeEngineHeaderLabel'>Theme Engine</label>
|
|
</div>
|
|
<div id='themeEngineContainer'>
|
|
|
|
<div class='themeEngineGroups' id='themeEngineBackground'>
|
|
<label for='backgroundSet' class='themeEngineLabels'>Background Color and Opacity</label>
|
|
<div class='backgroundColorSetter'>
|
|
<input type='text' maxlength='7' class='themeEngineInputs' id='backgroundSet' autocomplete='off' placeholder='000000'/>
|
|
<input type='text' maxlength='2' class='themeEngineInputs' id='backgroundOpacitySet' autocomplete='off' placeholder='FF'/>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class='themeEngineGroups' id='themeEngineForeground'>
|
|
<label for='foregroundSet' class='themeEngineLabels'>Foreground Color and Opacity</label>
|
|
<div class='foregroundColorSetter'>
|
|
<input type='text' maxlength='7' class='themeEngineInputs' id='foregroundSet' autocomplete='off' placeholder='000000'/>
|
|
<input type='text' maxlength='2' class='themeEngineInputs' id='foregroundOpacitySet' autocomplete='off' placeholder='FF'/>
|
|
</div>
|
|
</div>
|
|
|
|
<div class='themeEngineGroups' id='themeEngineBlurStrength'>
|
|
<label for='blurSet' class='themeEngineLabels'>Blur Strength in Pixels</label>
|
|
<div class='blurSetter'>
|
|
<input type='text' class='themeEngineInputs' id='blurSet' autocomplete='off' placeholder='10'/>
|
|
</div>
|
|
</div>
|
|
<div class='themeEngineGroups' id='themeEngineAnimSpeed'>
|
|
<label for='animSpeedSet' class='themeEngineLabels'>Animation Speed</label>
|
|
<div class='animSpeedSetter'>
|
|
<input type='text' class='themeEngineInputs' id='animSpeedSet' autocomplete='off' placeholder='300ms'/>
|
|
</div>
|
|
</div>
|
|
<button type='button' id='themeEngineReset'>Reset</button>
|
|
<button type='button' id='themeEngineAsDefault'>Apply</button>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
|
|
</div>
|
|
</div>
|
|
<div class='dashboardOverlay' id='dashboardOverlay'></div>
|
|
|
|
<!-- Weather screen -->
|
|
<div id='weatherScreen' class='screen'>
|
|
<div id='weatherScreenContainer'>
|
|
<div id='weatherTodayIcon'></div>
|
|
<div id='weatherTodayLocation'>
|
|
Earth, Milky Way
|
|
</div>
|
|
<div id='weatherTodayDescription'>
|
|
dust & clouds, -1000°C
|
|
</div>
|
|
<div id='weatherHourDataTodayContainer'>
|
|
<div class='weatherDataHour' id='weatherTodaySunrise'>
|
|
<div class='hourDataIcon' id='sunriseHourDataIcon'></div>
|
|
<div class='hourDataLabel' id='sunriseTodayHour'>00:00</div>
|
|
</div>
|
|
<div class='weatherDataHour' id='weatherTodaySunset'>
|
|
<div class='hourDataIcon' id='sunsetHourDataIcon'></div>
|
|
<div class='hourDataLabel' id='sunsetTodayHour'>00:00</div>
|
|
</div>
|
|
<div class='weatherDataHour' id='weatherTodayUpdate'>
|
|
<div class='hourDataIcon' id='updateHourDataIcon'></div>
|
|
<div class='hourDataLabel' id='updateTodayHour'>00:00</div>
|
|
</div>
|
|
</div>
|
|
<div class='weatherForecast' id='forecastContainer'>
|
|
<!-- Below is the structure of a DIV that will be generated in js/weather-screen.js -->
|
|
<!--
|
|
<div class='weatherForecastDay'>
|
|
<div class='weatherForecastDayDate'>
|
|
<div class='weatherForecastDayDateName'></div>
|
|
<div class='weatherForecastDayDateHour'></div>
|
|
</div>
|
|
<div class='weatherForecastDayIconContainer'>
|
|
<div class='weatherForecastDayIcon'></div>
|
|
</div>
|
|
<div class='weatherForecastDayDetails'>
|
|
<div class='weatherForecastDayDetailsTemperature'></div>
|
|
<div class='weatherForecastDayDetailsDescription'></div>
|
|
</div>
|
|
</div>
|
|
-->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<!-- Web menu panel -->
|
|
<div id='webMenuScreen' class='screen'>
|
|
<div id='webMenuContainer'>
|
|
<div id='webMenuSearchBoxContainer'>
|
|
<input type='text' id='webMenuSearchBox' autocomplete='off' placeholder=' Type to search'>
|
|
</div>
|
|
<div id='webMenuListContainer'>
|
|
|
|
<ul id='webMenuList'>
|
|
<!-- Below is the structure of an LI that will be generated in js/web-menu.js -->
|
|
<!--
|
|
<li>
|
|
<a href='https://example.com'>
|
|
<div class='webItem'>
|
|
<div class='webItemContainer'>
|
|
<div class='webItemBody'>
|
|
<div class='webItemIconContainer'>
|
|
<div class='webItemIcon'></div>
|
|
</div>
|
|
<div class='webItemName'></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
</li>
|
|
-->
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src='js/config.js'></script>
|
|
<script src='js/background-set.js'></script>
|
|
<script src='js/clock.js'></script>
|
|
<script src='js/dock-buttons.js'></script>
|
|
<script src='js/profile-image.js'></script>
|
|
<script src='js/search-engine-settings.js'></script>
|
|
<script src='js/search-query-send.js'></script>
|
|
|
|
<script src='js/show-search-box.js'></script>
|
|
<script src='js/centered-box.js'></script>
|
|
|
|
<script src='js/greeter-date-message.js'></script>
|
|
<script src='js/theme-engine.js'></script>
|
|
<script src='js/dashboard.js'></script>
|
|
|
|
<script src='js/web-menu.js'></script>
|
|
<script src='js/weather-screen.js'></script>
|
|
<script src='js/weather-settings.js'></script>
|
|
|
|
<script src='js/auto-suggestion.js'></script>
|
|
<script src='js/keybindings.js'></script>
|
|
|
|
<script src='js/mobile-swipe-event.js'></script>
|
|
<script src='js/mobile-swipe-callback.js'></script>
|
|
|
|
<script src='js/script.js'></script>
|
|
|
|
</body>
|
|
</html> |