the-glorious-startpage/index.html
2020-06-04 12:59:50 +08:00

237 lines
8.6 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>
<input type="text" id="searchBox" autocomplete="off" autofocus="off" placeholder="Type to search"/>
</div>
<div class="dashboard" id="rightDashboard">
<div class="rightDashboardBody">
<div id="greeterMessage"></div>
<div id="dateMessage"></div>
<!-- Weather Settings -->
<div class="weatherSettings">
<div id="weatherSettingsPadding">
<div class="header" id="weatherSettingsHeader">
<div class="headerIcon" id="weatherSettingsHeaderIcon"></div>
<div class="headerLabel" id="weatherSettingsHeaderLabel">Weather Settings</div>
</div>
<div id="weatherSettingsContainer">
<div class="weatherSettingsGroups">
<div class="weatherSettingsLabels">
API Key
</div>
<input type="text" class="weatherSettingsInputs" id="apiBox" autocomplete="off" placeholder="API KEY"/>
</div>
<div class="weatherSettingsGroups">
<div class="weatherSettingsLabels">
City ID
</div>
<input type="text" class="weatherSettingsInputs" id="cityBox" autocomplete="off" placeholder="City ID"/>
</div>
<div class="weatherSettingsGroups">
<div class="weatherSettingsLabels">
Units
</div>
<select class="weatherSettingsInputs" id="weatherSelectUnits">
<option value="metric">Metric</option>
<option value="imperial">Imperial</option>
</select>
</div>
<div class="weatherSettingsGroups" id="weatherSettingsButtons">
<div class="weatherSettingsInputs" id="weatherSettingsReset">Clear Credentials</div>
<div class="weatherSettingsInputs" id="weatherSettingsApply">Apply</div>
</div>
</div>
</div>
</div>
<!-- Select search engine -->
<div class="searchEngine">
<div id="searchEnginePadding">
<div class="header" id="searchEngineHeader">
<div class="headerIcon" id="searchEngineHeaderIcon"></div>
<div class="headerLabel" id="searchEngineHeaderLabel">Search Engine</div>
</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>
<div id="searchEngineAsDefault">Set as default</div>
</div>
</div>
</div>
<!-- Theme engine -->
<div class="themeEngine">
<div id="themeEnginePadding">
<div class="header" id="themeEngineHeader">
<div class="headerIcon" id="themeEngineHeaderIcon"></div>
<div class="headerLabel" id="themeEngineHeaderLabel">Theme Engine</div>
</div>
<div id="themeEngineContainer">
<div class="themeEngineGroups">
<div class="themeEngineLabels">
Background Color and Opacity
</div>
<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">
<div class="themeEngineLabels">
Foreground Color and Opacity
</div>
<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">
<div class="themeEngineLabels">
Blur Strength in Pixels
</div>
<div class="blurSetter">
<input type="text" class="themeEngineInputs" id="blurSet" autocomplete="off" placeholder="10"/>
</div>
</div>
<div id="themeEngineReset">Reset</div>
<div id="themeEngineAsDefault">Apply</div>
</div>
</div>
</div>
</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/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/mobile-swipe-event.js"></script>
<script src="js/mobile-swipe-callback.js"></script>
</body>
</html>