forked from extern/the-glorious-startpage
620f297f70
* replace divs with labels in dashboard textboxes * convert weather settings block to form * convert search engine block to form * convert theme engine block to form * dashboard buttons:replace onmouseup with .onclick() * add hover event on buttons
253 lines
9.5 KiB
HTML
253 lines
9.5 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 background/image -->
|
|
<div id='bodyBackground'></div>
|
|
|
|
<div class='bar' id='topPanel'>
|
|
<div id='clock'></div>
|
|
</div>
|
|
|
|
<div class='dockContainer'>
|
|
<div class='bar' id='dock'>
|
|
<!-- Javascript will generate a list here -->
|
|
</div>
|
|
</div>
|
|
|
|
<div id='centeredBoxOverlay'></div>
|
|
<div class='centeredBar' id='centeredBox'>
|
|
<div id='profileImageContainer'>
|
|
<div id='profileImage'></div>
|
|
</div>
|
|
<div id='searchBoxContainer'>
|
|
<input type='text' id='searchBox' autocomplete='off' autofocus='off' placeholder=' Search with HiddenWiki'/>
|
|
<div id='suggestionsContainer'>
|
|
<ul id='suggestions'>
|
|
<li id='phrase'>
|
|
<button type='button' class='phraseButton'>suggestion 1</button>
|
|
</li>
|
|
<li id='phrase'>
|
|
<button type='button' class='phraseButton'>suggestion 2</button>
|
|
</li>
|
|
<li id='phrase'>
|
|
<button type='button' class='phraseButton'>suggestion 3</button>
|
|
</li>
|
|
<li id='phrase'>
|
|
<button type='button' class='phraseButton'>suggestion 4</button>
|
|
</li>
|
|
</ul>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class='dashboard' id='rightDashboard'>
|
|
<div class='rightDashboardBody'>
|
|
<div id='greeterMessage'></div>
|
|
<div id='dateMessage'></div>
|
|
|
|
<!-- Weather Settings -->
|
|
<form class='weatherSettings'>
|
|
<div id='weatherSettingsPadding'>
|
|
|
|
<div class='header' id='weatherSettingsHeader'>
|
|
<div class='headerIcon' id='weatherSettingsHeaderIcon'></div>
|
|
<label for='apiBox' class='headerLabel' id='weatherSettingsHeaderLabel'>Weather Settings</label>
|
|
</div>
|
|
|
|
<div id='weatherSettingsContainer'>
|
|
<div class='weatherSettingsGroups'>
|
|
<label for='apiBox' class='weatherSettingsLabels'>API Key</label>
|
|
<input type='text' class='weatherSettingsInputs' id='apiBox' autocomplete='off' placeholder='API KEY'/>
|
|
</div>
|
|
|
|
<div class='weatherSettingsGroups'>
|
|
<label for='cityBox' class='weatherSettingsLabels'>City ID</label>
|
|
<input type='text' class='weatherSettingsInputs' id='cityBox' autocomplete='off' placeholder='City ID'/>
|
|
</div>
|
|
|
|
<div class='weatherSettingsGroups'>
|
|
<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'>Clear Credentials</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'>
|
|
<option value='google'>Google</option>
|
|
<option value='duckduckgo'>Duckduckgo</option>
|
|
<option value='ecosia'>Ecosia</option>
|
|
<option value='yahoo'>Yahoo</option>
|
|
<option value='bing'>Bing</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'>
|
|
<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'>
|
|
<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'>
|
|
<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>
|
|
<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'>
|
|
<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'>
|
|
|
|
<!-- Javascript will generate a list here -->
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<!-- Web menu panel -->
|
|
<div id='webMenu'>
|
|
<div id='webMenuContainer'>
|
|
<div id='webMenuSearchBoxContainer'>
|
|
<input type='text' id='webMenuSearchBox' autocomplete='off' placeholder=' Type to search'>
|
|
</div>
|
|
<div id='webMenuListContainer'>
|
|
|
|
<ul id='webMenuList'>
|
|
<!-- Javascript will generate a list here -->
|
|
</ul>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<script src='js/body-background-set.js'></script>
|
|
<script src='js/clock.js'></script>
|
|
<script src='js/sites-list.js'></script>
|
|
<script src='js/dock-buttons.js'></script>
|
|
<script src='js/keybindings.js'></script>
|
|
<script src='js/auto-suggest.js'></script>
|
|
<script src='js/animate-profile-image.js'></script>
|
|
<script src='js/show-search-box.js'></script>
|
|
<script src='js/animate-dashboard.js'></script>
|
|
<script src='js/greeter-date-message.js'></script>
|
|
<script src='js/search-engine-settings.js'></script>
|
|
<script src='js/search-query-send.js'></script>
|
|
<script src='js/theme-engine.js'></script>
|
|
<script src='js/weather-screen.js'></script>
|
|
<script src='js/weather-settings.js'></script>
|
|
<script src='js/web-menu.js'></script>
|
|
<script src='js/centered-box.js'></script>
|
|
<script src='js/mobile-swipe-event.js'></script>
|
|
<script src='js/mobile-swipe-callback.js'></script>
|
|
</body>
|
|
</html> |