├── LICENSE ├── README.md ├── images ├── arch-logo-od.png ├── cat.gif └── preview.png ├── index.html ├── script.js └── styles.css /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) [2021] [kennethcheo] 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # startpage 2 | 3 | Custom browser startpage with colors inspired by the [One Dark syntax theme](https://github.com/atom/atom/tree/master/packages/one-dark-syntax) for the [Atom text editor](https://atom.io). 4 | 5 | Forked from https://github.com/kencx/startpage.git and added time module and changed the colorscheme. 6 | 7 | ## Preview 8 | [Live Preview](https://michaelneuper.github.io/startpage/) 9 | ![preview](images/preview.png) 10 | 11 | ## Usage 12 | - Clone this repo or download the `.zip` 13 | - Go to browser settings and choose custom homepage 14 | - Copy and paste the file path to the `index.html` file 15 | 16 | ## Modifying 17 | Change the: 18 | - _timezone_ in line 5 in `script.js` 19 | - _locale_ in line 13 in `script.js` 20 | - _font_ in line 12 in `styles.css` 21 | - _links_ in `index.html` 22 | - _colors_ in `styles.css` 23 | - Color reference: 24 | 25 | ![Color Reference](https://raw.githubusercontent.com/joshdick/onedark.vim/main/img/color_reference.png) 26 | 27 | - _picture_ in `index.html` from the [cat gif](https://twitter.com/avogado6/status/1165595520967954432?s=19) 28 | -------------------------------------------------------------------------------- /images/arch-logo-od.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/michaelneuper/startpage/4f5b43a1f221ce9fe1cbfe3135c71d85597ead9b/images/arch-logo-od.png -------------------------------------------------------------------------------- /images/cat.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/michaelneuper/startpage/4f5b43a1f221ce9fe1cbfe3135c71d85597ead9b/images/cat.gif -------------------------------------------------------------------------------- /images/preview.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/michaelneuper/startpage/4f5b43a1f221ce9fe1cbfe3135c71d85597ead9b/images/preview.png -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | New Tab 7 | 8 | 9 | 10 | 11 | 12 |
13 |
14 |
15 | 16 |
17 |
18 | 19 |
20 |
21 |

22 |
23 | 24 |
25 |
26 |
27 |
  • school
    • 28 |
  • gmail
    • 29 |
  • outlook
    • 30 |
  • quizlet
    • 31 |
  • onedrive
    • 32 |
    33 |
    34 | 35 |
    36 |
    37 |
  • dev
    • 38 |
  • github
    • 39 |
  • netlify
    • 40 |
  • tryhackme
    • 41 |
  • overleaf
    • 42 |
    43 |
    44 | 45 |
    46 |
    47 |
  • ent
    • 48 |
  • lichess
    • 49 |
  • netflix
    • 50 |
  • movies
    • 51 |
  • goodreads
    • 52 |
    53 |
    54 | 55 |
    56 |
    57 |
  • misc
    • 58 |
  • tempmail
    • 59 |
  • monkeytype
    • 60 |
  • excalidraw
    • 61 |
  • translator
    • 62 |
    63 |
    64 |
    65 |
    66 |
    67 | 68 | 69 | 70 | 71 | -------------------------------------------------------------------------------- /script.js: -------------------------------------------------------------------------------- 1 | `use strict`; 2 | 3 | // display time as hh:mm 4 | const options = { 5 | timeZone : Intl.DateTimeFormat().resolvedOptions().timeZone, // Automatically get user's timezone 6 | hour12 : false, 7 | hour: "2-digit", 8 | minute: "2-digit", 9 | } 10 | 11 | const locale = navigator.languages != undefined ? navigator.languages[0] : navigator.language; // Get user's locale to format clock accordingly 12 | 13 | myTimer(); // Initialise clock otherwise you wait a second before it appears 14 | 15 | var myVar = setInterval(function () { 16 | myTimer(); 17 | }, 1000); 18 | 19 | function myTimer() { 20 | var today = new Date(); 21 | 22 | var time = today.toLocaleTimeString(locale, options); 23 | 24 | document.getElementById("time").textContent = time; 25 | } 26 | -------------------------------------------------------------------------------- /styles.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css?family=JetBrains+Mono'); 2 | 3 | :root { 4 | --color-bg: #282c34; 5 | --color-fg: #c678dd; 6 | --color-link: #abb2bf; 7 | --color-link-visited: #56b6c2; 8 | --color-link-hover: #61afef; 9 | } 10 | 11 | html, body { 12 | background: var(--color-bg); 13 | color: var(--color-fg); 14 | font-family: "Jetbrains Mono"; 15 | height: 100%; 16 | width: 100%; 17 | margin: 0; 18 | padding: 0; 19 | } 20 | 21 | .container { 22 | display: grid; 23 | grid-template-columns: 1fr 460px 600px 1fr; 24 | grid-template-areas: 25 | ". left right ."; 26 | column-gap: 80px; 27 | justify-items: center; 28 | align-items: center; 29 | min-height: 100%; 30 | } 31 | 32 | .left-container { 33 | grid-area: left; 34 | aspect-ratio: 1/1; 35 | } 36 | 37 | .right-container { 38 | grid-area: right; 39 | height: 55%; 40 | width: 100%; 41 | } 42 | 43 | .gif img { 44 | max-width: 100%; 45 | max-height: 100%; 46 | } 47 | 48 | .head { 49 | display: flex; 50 | flex-direction: column; 51 | align-items: center; 52 | font-size: 90px; 53 | font-weight: 500; 54 | } 55 | 56 | .category { 57 | display: flex; 58 | flex-direction: column; 59 | width: 180px; 60 | } 61 | 62 | .bookmarks { 63 | display: flex; 64 | justify-content: center; 65 | } 66 | 67 | .links { 68 | display: flex; 69 | flex-direction: column; 70 | align-items: center; 71 | padding-top: 20px; 72 | padding-bottom: 20px; 73 | } 74 | 75 | .title { 76 | font-size: 20px; 77 | } 78 | 79 | li { 80 | font-size: 16px; 81 | list-style-type: none; 82 | padding: 5px 83 | } 84 | 85 | a:link { 86 | text-decoration: none; 87 | color: var(--color-link); 88 | } 89 | 90 | a:visited { 91 | color: var(--color-link-visited); 92 | } 93 | 94 | a:hover { 95 | color: var(--color-link-hover); 96 | } 97 | 98 | .blinking { 99 | animation: opacity 1s ease-in-out infinite; 100 | opacity: 1; 101 | } 102 | 103 | @keyframes opacity { 104 | 0% { 105 | opacity: 1; 106 | } 107 | 108 | 50% { 109 | opacity: 0; 110 | } 111 | 112 | 100% { 113 | opacity: 1; 114 | } 115 | } 116 | --------------------------------------------------------------------------------