├── images
    ├── startpage.png
    └── screenshot.png
├── fonts
    └── Fira Code Regular Nerd Font Complete.woff2
├── scripts
    ├── popup.js
    ├── keybinding.js
    ├── time.js
    └── script.js
├── README.md
├── index.html
└── style.css


/images/startpage.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/aman333nolawz/startpage-v2/HEAD/images/startpage.png


--------------------------------------------------------------------------------
/images/screenshot.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/aman333nolawz/startpage-v2/HEAD/images/screenshot.png


--------------------------------------------------------------------------------
/fonts/Fira Code Regular Nerd Font Complete.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/aman333nolawz/startpage-v2/HEAD/fonts/Fira Code Regular Nerd Font Complete.woff2


--------------------------------------------------------------------------------
/scripts/popup.js:
--------------------------------------------------------------------------------
1 | const settingsDialog = document.getElementById("settings");
2 | 
3 | function showSettings() {
4 |   settingsDialog.showModal();
5 | }
6 | 


--------------------------------------------------------------------------------
/scripts/keybinding.js:
--------------------------------------------------------------------------------
 1 | document.addEventListener("keydown", (e) => {
 2 |   if (search === document.activeElement) {
 3 |     return;
 4 |   }
 5 |   if (e.key == "s") {
 6 |     if (!settingsDialog.open) {
 7 |       e.preventDefault();
 8 |       showSettings();
 9 |     }
10 |   }
11 | });
12 | 


--------------------------------------------------------------------------------
/scripts/time.js:
--------------------------------------------------------------------------------
 1 | const todayHeader = document.getElementById("today");
 2 | const timeDiv = document.getElementById("time");
 3 | const days = [
 4 |   "Sunday",
 5 |   "Monday",
 6 |   "Tuesday",
 7 |   "Wednesday",
 8 |   "Thursday",
 9 |   "Friday",
10 |   "Saturday",
11 | ];
12 | const months = [
13 |   "January",
14 |   "February",
15 |   "March",
16 |   "April",
17 |   "May",
18 |   "June",
19 |   "July",
20 |   "August",
21 |   "September",
22 |   "October",
23 |   "November",
24 |   "December",
25 | ];
26 | 
27 | function setTime() {
28 |   let today = new Date();
29 |   todayHeader.innerText = `Today is ${days[today.getDay()]}, ${
30 |     months[today.getMonth()]
31 |   } ${today.getDate()}, ${today.getFullYear()}.`;
32 | 
33 |   timeDiv.innerHTML = `${String(today.getHours()).padStart(
34 |     2,
35 |     "0"
36 |   )}<br/>--<br/>${String(today.getMinutes()).padStart(2, "0")}`;
37 | }
38 | setTime();
39 | setInterval(setTime, 1000);
40 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Startpage
 2 | 
 3 | ![Screenshot of Startpage](images/screenshot.png)
 4 | 
 5 | # Settings
 6 | 
 7 | Press `s` to open settings.
 8 | 
 9 | # Firefox
10 | 
11 | ## Setting the startpage as the Home page
12 | 
13 | 1. Copy the startpage dir to ~/.mozilla/firefox/PROFILE/ (You can find your profile by going to `about:profiles`)
14 | 2. Open `index.html` in Firefox and copy the link in address bar. It would loook like: `file:///home/<username>/.mozilla/firefox/<PROFILE>/startpage/index.html`
15 | 3. Open preferences > Home from the hamburger menu, select custom URLs and paste the address
16 | 4. Restart Firefox
17 | 
18 | ## Setting the startpage as the New Tab page
19 | 
20 | 1. Write the following lines to `/usr/lib/firefox/mozilla.cfg` (Create it if it doesn't exist). And change the `var newTabUrl = ...`.
21 | 
22 | ```javascript
23 | //
24 | var { classes: Cc, interfaces: Ci, utils: Cu } = Components;
25 | 
26 | /* set new tab page */
27 | try {
28 |   Cu.import("resource:///modules/AboutNewTab.jsm");
29 |   var newTabURL =
30 |     "file:///home/<username>/.mozilla/firefox/<profile>/startpage/index.html";
31 |   AboutNewTab.newTabURL = newTabURL;
32 | } catch (e) {
33 |   Cu.reportError(e);
34 | } // report errors in the Browser Console
35 | ```
36 | 
37 | 2. Write the following lines to `/usr/lib/firefox/defaults/pref/local-settings.js`:
38 | 
39 | ```javascript
40 | //
41 | pref("general.config.filename", "mozilla.cfg");
42 | pref("general.config.obscure_value", 0);
43 | pref("general.config.sandbox_enabled", false);
44 | ```
45 | 
46 | 3. Restart Firefox
47 | 


--------------------------------------------------------------------------------
/scripts/script.js:
--------------------------------------------------------------------------------
  1 | const search = document.getElementById("search");
  2 | const searchButton = document.getElementById("searchButton");
  3 | const username = document.getElementById("username");
  4 | const titleSel = document.getElementById("titleSel");
  5 | const userSel = document.getElementById("userSel");
  6 | const engineSel = document.getElementById("engineSel");
  7 | const imgSel = document.getElementById("imgSel");
  8 | const savePref = document.getElementById("savePref");
  9 | 
 10 | const engines = {
 11 |   google: "https://google.com/search?q=",
 12 |   duckduckgo: "https://duckduckgo.com/?q=",
 13 | };
 14 | let engineUrl;
 15 | 
 16 | function setEngine(engine) {
 17 |   localStorage.setItem("engine", engine);
 18 |   engineUrl = engines[engine];
 19 |   engineSel.value = engine;
 20 | }
 21 | 
 22 | function setUser(name) {
 23 |   localStorage.setItem("username", name);
 24 |   username.innerText = "Hello, " + name;
 25 |   userSel.value = name;
 26 | }
 27 | 
 28 | function setTitle(title) {
 29 |   localStorage.setItem("title", title);
 30 |   document.title = title;
 31 |   titleSel.value = title;
 32 | }
 33 | 
 34 | function setImg(src) {
 35 |   localStorage.setItem("image", src);
 36 |   document.getElementById("startImg").src = src;
 37 |   imgSel.value = src;
 38 | }
 39 | 
 40 | if (localStorage.getItem("title")) {
 41 |   setTitle(localStorage.getItem("title"));
 42 | } else {
 43 |   setTitle("New Tab");
 44 | }
 45 | 
 46 | if (localStorage.getItem("engine")) {
 47 |   setEngine(localStorage.getItem("engine"));
 48 | } else {
 49 |   setEngine("google");
 50 | }
 51 | 
 52 | if (localStorage.getItem("username")) {
 53 |   setUser(localStorage.getItem("username"));
 54 | } else {
 55 |   setUser("Nolawz");
 56 | }
 57 | 
 58 | if (localStorage.getItem("image")) {
 59 |   setImg(localStorage.getItem("image"));
 60 | } else {
 61 |   setImg("images/startpage.png");
 62 | }
 63 | 
 64 | search.focus();
 65 | 
 66 | function isWebUrl(value) {
 67 |   try {
 68 |     const url = new URL(value);
 69 |     return true;
 70 |   } catch {
 71 |     return false;
 72 |   }
 73 | }
 74 | 
 75 | function parseSearch(q) {
 76 |   q = q.trim();
 77 |   if (q == "") {
 78 |     return;
 79 |   }
 80 |   if (isWebUrl(q)) {
 81 |     window.open(q, "_self");
 82 |     return;
 83 |   }
 84 |   targetURL = engineUrl + encodeURIComponent(q);
 85 |   window.open(targetURL, "_self");
 86 | }
 87 | 
 88 | search.onkeyup = (e) => {
 89 |   if (e.key == "Enter") {
 90 |     parseSearch(search.value);
 91 |   }
 92 | };
 93 | searchButton.onclick = () => {
 94 |   parseSearch(search.value);
 95 | };
 96 | 
 97 | savePref.onclick = () => {
 98 |   setEngine(engineSel.value);
 99 |   setUser(userSel.value);
100 |   setTitle(titleSel.value);
101 |   setImg(imgSel.value);
102 | };
103 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | 
 4 | <head>
 5 |   <title>New tab</title>
 6 |   <link rel="stylesheet" href="style.css" type="text/css" media="screen" />
 7 |   <link rel="preload" as="font" href="fonts/Fira Code Regular Nerd Font Complete.woff2" type="font/woff2"
 8 |     crossorigin="anonymous" />
 9 |   <script defer src="scripts/time.js"></script>
10 |   <script defer src="scripts/script.js"></script>
11 |   <script defer src="scripts/popup.js"></script>
12 |   <script defer src="scripts/keybinding.js"></script>
13 | </head>
14 | 
15 | <body>
16 |   <div class="container">
17 |     <div class="img-holder">
18 |       <img src="images/startpage.png" alt="Startpage image" id="startImg" />
19 |       <div class="time-container" id="time">00<br />--<br />00</div>
20 |     </div>
21 |     <div class="main">
22 |       <h1 class="greeting" id="username">Hello, Nolawz</h1>
23 |       <h2 id="today">Today is someday</h2>
24 |       <div class="searchbox">
25 |         <input type="search" id="search" />
26 |         <button id="searchButton">&#61442;</button>
27 |       </div>
28 |       <div class="bookmarks">
29 |         <div class="bookmarks-row">
30 |           <a href="https://youtube.com">YouTube</a>
31 |           <a href="https://discord.com/app">Discord</a>
32 |           <a href="https://reddit.com">Reddit</a>
33 |           <a href="https://instagram.com/">Instagram</a>
34 |         </div>
35 |         <div class="bookmarks-row">
36 |           <a href="https://github.com">Github</a>
37 |           <a href="https://gmail.com">Gmail</a>
38 |           <a href="https://keybr.com">Keybr</a>
39 |           <a href="https://monkeytype.com">Monkey Type</a>
40 |         </div>
41 |         <div class="bookmarks-row">
42 |           <a href="https://ctftime.org">CTF Time</a>
43 |           <a href="https://gchq.github.io/CyberChef/">Cyber Chef</a>
44 |           <a href="https://tryhackme.com/">Try Hack Me</a>
45 |           <a href="https://book.hacktricks.xyz/welcome/readme">Hack Tricks</a>
46 |         </div>
47 |       </div>
48 |     </div>
49 | 
50 |     <dialog id="settings" class="modal">
51 |       <h2>Settings</h2>
52 | 
53 |       <div class="field">
54 |         <label for="titleSel">Title</label>
55 |         <input class="input-field" type="text" id="titleSel" placeholder="Title for the startpage" value="New Tab" />
56 |       </div>
57 | 
58 |       <div class="field">
59 |         <label for="userSel">Username</label>
60 |         <input class="input-field" type="text" id="userSel" placeholder="Username" value="Nolawz" />
61 |       </div>
62 | 
63 |       <div class="field">
64 |         <label for="imgSel">Image</label>
65 |         <input class="input-field" type="text" id="imgSel" placeholder="Image in the startpage"
66 |           value="images/startpage.png" />
67 |       </div>
68 | 
69 | 
70 |       <div class="field">
71 |         <label for="engineSel">Search Engine</label>
72 |         <select class="input-field" name="engine" id="engineSel">
73 |           <option value="google" selected>Google</option>
74 |           <option value="duckduckgo">Duck Duck Go</option>
75 |         </select>
76 |       </div>
77 | 
78 |       <form method="dialog">
79 |         <input class="btn" type="submit" name="savePref" value="Save" id="savePref" />
80 |       </form>
81 |     </dialog>
82 |   </div>
83 | </body>
84 | 
85 | </html>


--------------------------------------------------------------------------------
/style.css:
--------------------------------------------------------------------------------
  1 | * {
  2 |   margin: 0;
  3 |   padding: 0;
  4 |   box-sizing: border-box;
  5 | }
  6 | 
  7 | @font-face {
  8 |   font-family: "Fira Code";
  9 |   src: local("FiraCode Nerd Font"),
 10 |     url("fonts/Fira Code Regular Nerd Font Complete.woff2"), local("monospace");
 11 |   font-display: swap;
 12 | }
 13 | 
 14 | :root {
 15 |   --bg-color: #282a36;
 16 |   --bg-dim-color: #303241;
 17 |   --fg-color: #eee;
 18 |   --search-input-color: #f8f8f2;
 19 |   --search-btn-color: #6272a4;
 20 |   --primary-color: #50fa7b;
 21 |   --primary-dim-color: rgba(80, 250, 123, 0.7);
 22 |   --secondary-color: rgb(189, 147, 249);
 23 |   --secondary-dim-color: hsl(265 89% 70%);
 24 |   --third-color: #44475a;
 25 | }
 26 | 
 27 | body {
 28 |   width: 100vw;
 29 |   height: 100vh;
 30 |   background-color: var(--bg-color);
 31 |   font-family: "Fira Code", monospace;
 32 |   display: flex;
 33 |   justify-content: center;
 34 |   align-items: center;
 35 | }
 36 | 
 37 | .container {
 38 |   max-width: 1080px;
 39 |   width: 80%;
 40 |   height: 340px;
 41 |   display: flex;
 42 | }
 43 | .img-holder {
 44 |   max-width: 15em;
 45 |   width: 40%;
 46 |   margin-right: 1em;
 47 |   margin-bottom: 0;
 48 |   overflow: hidden;
 49 |   position: relative;
 50 | }
 51 | .img-holder img {
 52 |   object-fit: cover;
 53 |   filter: blur(2px);
 54 |   opacity: 0.6;
 55 | }
 56 | 
 57 | .img-holder #time {
 58 |   width: auto;
 59 |   padding: 0;
 60 |   position: absolute;
 61 |   top: 50%;
 62 |   right: 50%;
 63 |   transform: translate(50%, -50%);
 64 |   color: hsl(0, 0%, 86%);
 65 |   font-size: 4rem;
 66 | }
 67 | 
 68 | .searchbox {
 69 |   width: 100%;
 70 |   display: flex;
 71 |   margin-bottom: 1em;
 72 | }
 73 | 
 74 | .searchbox input {
 75 |   font-size: 1rem;
 76 |   font-family: "Fira Code", monospace;
 77 |   width: 100%;
 78 |   padding: 0.7em;
 79 |   color: var(--search-input-color);
 80 |   background-color: var(--bg-color);
 81 |   border: none;
 82 |   outline: none;
 83 | }
 84 | 
 85 | .searchbox:focus-within {
 86 |   outline: 1px var(--secondary-color) solid;
 87 | }
 88 | 
 89 | .searchbox button {
 90 |   font-size: 1rem;
 91 |   font-family: "Fira Code", monospace;
 92 |   padding: 0 1em;
 93 |   color: var(--search-btn-color);
 94 |   background-color: var(--bg-color);
 95 |   border: none;
 96 |   outline: none;
 97 |   transition: background-color 0.4s ease;
 98 | }
 99 | 
100 | .searchbox button:focus-visible,
101 | .searchbox button:hover {
102 |   cursor: pointer;
103 |   background-color: var(--bg-dim-color);
104 | }
105 | 
106 | .main {
107 |   width: 100%;
108 |   padding: 1.5em;
109 |   background-color: hsla(232, 14%, 31%, 0.3);
110 |   overflow: auto;
111 |   scrollbar-color: var(--secondary-color) var(--third-color);
112 |   scrollbar-width: thin;
113 | }
114 | 
115 | .main h1 {
116 |   color: var(--primary-color);
117 | }
118 | 
119 | .main h2 {
120 |   color: var(--primary-dim-color);
121 | 
122 |   margin-bottom: 1em;
123 | }
124 | 
125 | .main a {
126 |   text-decoration: none;
127 |   color: var(--secondary-color);
128 |   padding: 0.5em;
129 |   position: relative;
130 |   outline: none;
131 | }
132 | 
133 | .main a:hover,
134 | .main a:focus-visible,
135 | .main a:active {
136 |   color: var(--primary-color);
137 | }
138 | 
139 | .main a:hover::before,
140 | .main a:focus-visible::before {
141 |   content: "\0ea9c";
142 |   position: absolute;
143 |   left: -0.75rem;
144 | }
145 | 
146 | .main::-webkit-scrollbar {
147 |   width: 0.4em;
148 |   height: 0.4em;
149 | }
150 | 
151 | .main::-webkit-scrollbar-track {
152 |   background-color: var(--third-color);
153 | }
154 | 
155 | .main::-webkit-scrollbar-thumb {
156 |   background-color: var(--secondary-color);
157 | }
158 | 
159 | .main::-webkit-scrollbar-thumb:hover {
160 |   background-color: var(--secondary-dim-color);
161 | }
162 | 
163 | .bookmarks {
164 |   display: flex;
165 |   justify-content: space-between;
166 |   gap: 5rem;
167 | }
168 | 
169 | .bookmarks-row {
170 |   display: flex;
171 |   flex-direction: column;
172 | }
173 | 
174 | dialog {
175 |   margin: auto;
176 |   padding: 1em;
177 |   border: none;
178 |   background-color: var(--bg-dim-color);
179 |   color: var(--fg-color);
180 |   width: 70vw;
181 | }
182 | 
183 | dialog::backdrop {
184 |   background-color: rgb(0 0 0 / 0.4);
185 | }
186 | 
187 | dialog h2 {
188 |   color: var(--primary-color);
189 | }
190 | 
191 | .field {
192 |   display: flex;
193 |   flex-direction: column;
194 |   gap: 0.7em;
195 |   margin-block: 1.7em;
196 | }
197 | 
198 | .input-field {
199 |   font-size: 1rem;
200 |   font-family: "FiraCode", monospace;
201 |   padding: 0.7em;
202 |   background-color: var(--bg-color);
203 |   color: var(--search-input-color);
204 |   border: none;
205 |   outline: none;
206 | }
207 | 
208 | .input-field:focus {
209 |   outline: 1px solid var(--secondary-color);
210 | }
211 | 
212 | .btn {
213 |   padding: 0.3125em 0.9375em;
214 |   font-size: 1.1em;
215 |   font-family: "FiraCode", monospace;
216 |   background-color: var(--bg-dim-color);
217 |   color: var(--fg-color);
218 |   cursor: pointer;
219 |   transition: all 0.22s ease-in-out 0s;
220 |   border: 3px solid var(--secondary-color);
221 |   box-shadow: var(--secondary-color) 2px 2px 0 0;
222 |   outline: none;
223 | }
224 | 
225 | .btn:hover,
226 | .btn:focus {
227 |   box-shadow: var(--secondary-color) 5px 5px 0 0;
228 | }
229 | 


--------------------------------------------------------------------------------