├── .DS_Store ├── README.md ├── Troll-Regular.ttf ├── img ├── day.jpg ├── index.html ├── index.js ├── night.jpg ├── settings.png └── sunset.jpg ├── index.html ├── index.js ├── manifest.json └── startpage1.3.2.zip /.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NotTacoz/startpage/cad0795569f4a6fd630d074995b7d2dc99eefe70/.DS_Store -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Clean & Minimalistic Startpage 2 | (Made for Firefox and Chromium) 3 | 4 | # How to Install 5 | ## CHROME 6 | 1. Type in [chrome://extensions](chrome://extensions) or the browser you have's alternative 7 | 2. Drag and drop the startpage.zip file into the browser (which can be found in [releases](https://github.com/NotTacoz/startpage/releases/tag/1.2)) 8 | 3. Enjoy! 9 | 10 | it is recommended that you install it by extension as it saves load time 11 | 12 | ## FIREFOX 13 | [Firefox Store](https://addons.mozilla.org/en-US/firefox/addon/start-page-tab/) 14 | 15 | Install and Enjoy! 16 | 17 | ## CHROMIUM (alternative) 18 | How to install 19 | 1. Install [Custom New Tab URL](https://chrome.google.com/webstore/detail/custom-new-tab-url/mmjbdbjnoablegbkcklggeknkfcjkjia) 20 | 2. Open New Tab and go into settings 21 | 3. Set the url to https://nottacoz.github.io/startpage/ 22 | 4. Enjoy :) 23 | -------------------------------------------------------------------------------- /Troll-Regular.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NotTacoz/startpage/cad0795569f4a6fd630d074995b7d2dc99eefe70/Troll-Regular.ttf -------------------------------------------------------------------------------- /img/day.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NotTacoz/startpage/cad0795569f4a6fd630d074995b7d2dc99eefe70/img/day.jpg -------------------------------------------------------------------------------- /img/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 11 | 12 | 16 | 20 | 21 | 22 | 23 | 24 | 25 | New Tab 26 | 27 | 28 | 29 | 236 | 237 | 238 |
239 |
240 |

241 |

242 |

243 |
244 | 245 |
246 | 254 |
255 |
256 | 264 | 271 | 282 | 288 |
289 |
290 |
303 | 304 | 317 |
318 | 319 | 472 | 473 | day.jpg 480 | day.jpg 487 | night.jpg 494 | night.jpg 501 | custom.jpg 508 | 509 | settings.png 515 | 516 | 517 | 518 | 519 | -------------------------------------------------------------------------------- /img/index.js: -------------------------------------------------------------------------------- 1 | function getWeatherData() { 2 | $(document).ready(async function () { 3 | var city = undefined; 4 | await fetch("https://ipinfo.io/json") 5 | .then(function (response) { 6 | return response.json(); 7 | }) 8 | .then(function (myJson) { 9 | city = myJson.city; 10 | console.log; 11 | }) 12 | .catch(function (error) { 13 | console.log("Error: " + error); 14 | }); 15 | $.getJSON( 16 | "https://api.weatherapi.com/v1/current.json?key=76aa7ac854eb413c82565451211807&q=" + 17 | city, 18 | function (data) { } 19 | ) 20 | .done(function (data) { 21 | $("#weather").text( 22 | data.current.condition.text + " " + data.current.temp_c + "°C" 23 | ); 24 | }) 25 | .fail(function (data) { }); 26 | }); 27 | } 28 | 29 | // if id settingsbtnimg is clicked, openSettingsTab 30 | $("#settingsbtnimg").click(openSettingsTab); 31 | 32 | function openSettingsTab() { 33 | // console.log("pog"); 34 | // if timebg is hidden 35 | if ($("#timebg").css("display") == "none") { 36 | $("#timebg").show(); 37 | $("#settings").hide(); 38 | } else if ($("#timebg").css("display") == "block") { 39 | $("#timebg").hide(); 40 | $("#settings").show(); 41 | } 42 | }; 43 | 44 | function updateTime() { 45 | $(document).ready(function () { 46 | var currentTime = new Date(); 47 | var hours = currentTime.getHours(); 48 | var minutes = currentTime.getMinutes(); 49 | var day = currentTime.getDay(); 50 | var date = currentTime.getDate(); 51 | var month = currentTime.getMonth(); 52 | // convert day to text 53 | var days = [ 54 | "Sunday", 55 | "Monday", 56 | "Tuesday", 57 | "Wednesday", 58 | "Thursday", 59 | "Friday", 60 | "Saturday", 61 | ]; 62 | var dayText = days[day]; 63 | // add contraction to date 64 | var dateText = date + ""; 65 | if (date === 1) { 66 | dateText = date + "st"; 67 | } else if (date === 2) { 68 | dateText = date + "nd"; 69 | } else if (date === 3) { 70 | dateText = date + "rd"; 71 | } else if (date < 21) { 72 | dateText = date + "th"; 73 | } 74 | 75 | // convert month to text 76 | var months = [ 77 | "January", 78 | "February", 79 | "March", 80 | "April", 81 | "May", 82 | "June", 83 | "July", 84 | "August", 85 | "September", 86 | "October", 87 | "November", 88 | "December", 89 | ]; 90 | var monthText = months[month]; 91 | // convert date to text 92 | 93 | // console.log(d_str); 94 | 95 | if (minutes < 10) { 96 | minutes = "0" + minutes; 97 | } 98 | 99 | // console.log(hours); 100 | 101 | // update bgimg based on time 102 | var bgimg = ""; 103 | if (hours >= 7 && hours < 9) { 104 | bgimg = "img/sunset.jpg"; 105 | } else if (hours >= 9 && hours < 17) { 106 | bgimg = "img/day.jpg"; 107 | } else if (hours >= 17 && hours < 18) { 108 | bgimg = "img/sunset.jpg"; 109 | } else if (hours >= 18 && hours < 24) { 110 | bgimg = "img/night.jpg"; 111 | } else if (hours >= 0 && hours < 6) { 112 | bgimg = "img/night.jpg"; 113 | } 114 | document.getElementById("bgimg").src = bgimg; 115 | 116 | if (hours > 12) { 117 | var AMPM = "PM"; 118 | hours -= 12; 119 | } else { 120 | var AMPM = "AM"; 121 | } 122 | var d_str = dayText + ", " + dateText + " " + monthText; 123 | var t_str = hours + ":" + minutes + " " + AMPM; 124 | 125 | $("#time").text(t_str); 126 | $("#date").text(d_str); 127 | }); 128 | } 129 | updateTime(); // immeditatelly runs the function, so that there is no lag 130 | getWeatherData(); 131 | setInterval(updateTime, 1000); 132 | setInterval(getWeatherData, 900000); // 15 minutes 133 | 134 | var r = document.querySelector(":root"); 135 | r.style.setProperty("--blue", "lightblue"); 136 | //set every element to be unable to be dragged 137 | var elements = document.getElementsByClassName("draggable"); 138 | for (var i = 0; i < elements.length; i++) { 139 | elements[i].setAttribute("draggable", "false"); 140 | } 141 | 142 | 143 | // console.log(localStorage) 144 | var localStorageImageOpacity = localStorage.getItem("image-opacity"); 145 | var localStorageBgEffect = localStorage.getItem("bg-effect"); 146 | var localStorageBgOpacity = localStorage.getItem("bg-opacity"); 147 | var localStorageDate = localStorage.getItem("date"); 148 | var localStorageTime = localStorage.getItem("time"); 149 | var localStorageWeather = localStorage.getItem("weather"); 150 | var localStorageTodo = localStorage.getItem("todo"); 151 | var localStorageEasyTabs = localStorage.getItem("easyTabs"); 152 | var localStorageSearchBar = localStorage.getItem("searchBar"); 153 | var localStorageFontSize = localStorage.getItem("font-size"); 154 | var localStorageFontWeight = localStorage.getItem("font-weight"); 155 | var browser = localStorage.getItem("browser"); 156 | var localStorageBackground = localStorage.getItem("wallpaper"); 157 | 158 | if (localStorageBgEffect === null) { 159 | localStorageBgEffect = "none"; 160 | } 161 | if (localStorageImageOpacity === null) { 162 | localStorageImageOpacity = "50"; 163 | } 164 | if (localStorageBgOpacity === null) { 165 | localStorageBgOpacity = "40"; 166 | } 167 | if (localStorageDate === null) { 168 | localStorageDate = "checked"; 169 | } 170 | if (localStorageTime === null) { 171 | localStorageTime = "checked"; 172 | } 173 | if (localStorageWeather === null) { 174 | localStorageWeather = "checked"; 175 | } 176 | if (localStorageTodo === null) { 177 | localStorageTodo = "false"; 178 | } 179 | if (localStorageEasyTabs === null) { 180 | localStorageEasyTabs = "checked"; 181 | } 182 | if (localStorageSearchBar === null) { 183 | localStorageSearchBar = "checked"; 184 | } 185 | if (localStorageFontSize === null) { 186 | localStorageFontSize = "10"; 187 | } 188 | if (localStorageFontWeight === null) { 189 | localStorageFontWeight = "400"; 190 | } 191 | if (browser === null) { 192 | browser = "Google"; 193 | } 194 | if (localStorageBackground === null) { 195 | localStorageBackground = "dynamic"; 196 | } 197 | 198 | if (localStorageBgEffect === "none") { 199 | $("#stripestoggle").prop("checked", false); 200 | } else { 201 | $("#stripestoggle").prop("checked", true); 202 | } 203 | if (localStorageDate === "checked") { 204 | $("#date").show(); 205 | $("#datetoggle").prop("checked", true); 206 | } else { 207 | $("#date").hide(); 208 | $("#datetoggle").prop("checked", false); 209 | } 210 | if (localStorageTime === "checked") { 211 | $("#time").show(); 212 | $("#timetoggle").prop("checked", true); 213 | } else { 214 | $("#time").hide(); 215 | $("#timetoggle").prop("checked", false); 216 | } 217 | if (localStorageWeather === "checked") { 218 | $("#weather").show(); 219 | $("#weathertoggle").prop("checked", true); 220 | } else { 221 | $("#weather").hide(); 222 | $("#weathertoggle").prop("checked", false); 223 | } 224 | if (localStorageTodo === "checked") { 225 | $("#todo").show(); 226 | $("#todotoggle").prop("checked", true); 227 | } else { 228 | $("#todo").hide(); 229 | $("#todotoggle").attr("checked", false); 230 | } 231 | if (localStorageEasyTabs === "checked") { 232 | $("#easyTabs").show(); 233 | $("#easytabstoggle").attr("checked", true); 234 | } else { 235 | $("#easyTabs").hide(); 236 | $("#easytabstoggle").attr("checked", false); 237 | } 238 | if (localStorageSearchBar === "checked") { 239 | $("#searchBar").show(); 240 | $("#searchbartoggle").attr("checked", true); 241 | } else { 242 | $("#searchBar").hide(); 243 | $("#searchbartoggle").attr("checked", false); 244 | } 245 | 246 | $("#custombgselector").hide(); 247 | $("#custombgimg").hide(); 248 | $("#day").hide(); 249 | $("#night").hide(); 250 | $("#sunset").hide(); 251 | $("#bgimg").hide(); 252 | if (localStorageBackground === "dynamic") { 253 | $("#wallpaper").val("dynamic"); 254 | $("#bgimg").show(); 255 | } else if (localStorageBackground === "day") { 256 | $("#wallpaper").val("day"); 257 | $("#day").show(); 258 | } else if (localStorageBackground === "night") { 259 | $("#wallpaper").val("night"); 260 | $("#night").show(); 261 | } else if (localStorageBackground === "sunset") { 262 | $("#wallpaper").val("sunset"); 263 | $("#sunset").show(); 264 | } else if (localStorageBackground === "custom") { 265 | $("#wallpaper").val("custom"); 266 | $("#custombgselector").show(); 267 | $("#custombgimg").show(); 268 | // set custombgimg src to localStorage 269 | document.getElementById("custombgimg").src = 270 | localStorage.getItem("custombg"); 271 | } 272 | 273 | var searchQuery = ""; 274 | if (browser === "Google") { 275 | // set searchBar placeholder to chrome 276 | $("#searchBar").attr("placeholder", "Search with Google"); 277 | //set browser selected to Google 278 | $("#browser").val("Google"); 279 | searchQuery = "https://google.com/search?q="; 280 | } else if (browser === "Bing") { 281 | // set searchBar placeholder to edge 282 | $("#browser").val("Bing"); 283 | $("#searchBar").attr("placeholder", "Search with Bing"); 284 | searchQuery = "https://bing.com/?q="; 285 | } else if (browser === "DuckDuckGo") { 286 | // set searchBar placeholder to duckduckgo 287 | $("#browser").val("DuckDuckGo"); 288 | $("#searchBar").attr("placeholder", "Search with DuckDuckGo"); 289 | searchQuery = "https://duckduckgo.com/?q="; 290 | } else if (browser === "Yandex") { 291 | // set searchBar placeholder to yandex 292 | $("#browser").val("Yandex"); 293 | $("#searchBar").attr("placeholder", "Search with Yandex"); 294 | searchQuery = "https://yandex.com/?q="; 295 | } 296 | 297 | //if browser selection changes 298 | $("#browser").on("change", function () { 299 | // get the selected option 300 | var selectedOption = $(this).find("option:selected"); 301 | // get the value of the selected option 302 | var selectedValue = selectedOption.val(); 303 | // console.log(selectedValue); 304 | localStorage.setItem("browser", selectedValue); 305 | if ( 306 | selectedValue === "Bing" || 307 | selectedValue === "DuckDuckGo" || 308 | selectedValue === "Yandex" 309 | ) { 310 | $("#searchBar").attr("placeholder", "Search with " + selectedValue); 311 | searchQuery = "https://" + selectedValue + ".com/?q="; 312 | } else { 313 | $("#searchBar").attr("placeholder", "Search with Google"); 314 | searchQuery = "https://google.com/search?q="; 315 | } 316 | }); 317 | 318 | //if background selection changes 319 | $("#wallpaper").on("change", function () { 320 | // get the selected option 321 | var selectedOption = $(this).find("option:selected"); 322 | // get the value of the selected option 323 | var selectedValue = selectedOption.val(); 324 | // console.log(selectedValue); 325 | localStorage.setItem("wallpaper", selectedValue); 326 | $("#custombgselector").hide(); 327 | $("#custombgimg").hide(); 328 | $("#day").hide(); 329 | $("#night").hide(); 330 | $("#sunset").hide(); 331 | $("#bgimg").hide(); 332 | if (selectedValue === "dynamic") { 333 | $("#bgimg").show(); 334 | } else if (selectedValue === "day") { 335 | $("#day").show(); 336 | } else if (selectedValue === "night") { 337 | $("#night").show(); 338 | } else if (selectedValue === "sunset") { 339 | $("#sunset").show(); 340 | } else if (selectedValue === "custom") { 341 | $("#custombgselector").show(); 342 | $("#custombgimg").show(); 343 | } 344 | }); 345 | 346 | //if custombg selection changes 347 | $("#custombg").on("change", function () { 348 | //upload file to localstorage 349 | var file = $("#custombg")[0].files[0]; 350 | var reader = new FileReader(); 351 | reader.onload = function (e) { 352 | localStorage.setItem("custombg", e.target.result); 353 | document.getElementById("custombgimg").src = e.target.result; 354 | }; 355 | reader.readAsDataURL(file); 356 | }); 357 | 358 | $("#imageOpacitySpan").text(localStorageImageOpacity); 359 | $("#bgOpacitySpan").text(localStorageBgOpacity); 360 | $("#imageOpacitySlider").val(localStorageImageOpacity); 361 | $("#bgOpacitySlider").val(localStorageBgOpacity); 362 | $("#fontSizeSpan").text(localStorageFontSize + "rem"); 363 | $("#fontWeightSpan").text(localStorageFontWeight); 364 | $("#fontSizeSlider").val(localStorageFontSize); 365 | $("#fontWeightSlider").val(localStorageFontWeight); 366 | 367 | //set css to local storage 368 | 369 | document.documentElement.style.setProperty( 370 | "--image-opacity", 371 | localStorageImageOpacity / 100 372 | ); 373 | document.documentElement.style.setProperty( 374 | "--bg-opacity", 375 | localStorageBgOpacity / 100 376 | ); 377 | document.documentElement.style.setProperty( 378 | "--font-size", 379 | localStorageFontSize / 10 + "rem" 380 | ); 381 | document.documentElement.style.setProperty( 382 | "--font-weight", 383 | localStorageFontWeight 384 | ); 385 | document.documentElement.style.setProperty( 386 | "--bg-effect", 387 | localStorageBgEffect 388 | ); 389 | 390 | // if enter is pressed 391 | $("#searchBar").keypress(function (e) { 392 | if (e.which === 13) { 393 | // console.log("amogus"); 394 | // search with duckduckgo 395 | var query = $("#searchBar").val(); 396 | if (query.length > 0) { 397 | window.location.href = searchQuery + query; 398 | } 399 | } 400 | }); 401 | // when bgOpacitySlider is being interacted 402 | $("#bgOpacitySlider").on("input", function () { 403 | $("#bgOpacitySpan").text($(this).val()); 404 | // set css variable --bg-opacity to slider value 405 | //save slider to local storage 406 | localStorage.setItem("bg-opacity", $(this).val()); 407 | document.documentElement.style.setProperty( 408 | "--bg-opacity", 409 | $(this).val() / 100 410 | ); 411 | }); 412 | // when imageOpacitySlider is being interacted 413 | $("#imageOpacitySlider").on("input", function () { 414 | $("#imageOpacitySpan").text($(this).val()); 415 | //save slider to local storage 416 | localStorage.setItem("image-opacity", $(this).val()); 417 | document.documentElement.style.setProperty( 418 | "--image-opacity", 419 | $(this).val() / 100 420 | ); 421 | }); 422 | // when fontSizeSlider is being interacted 423 | $("#fontSizeSlider").on("input", function () { 424 | $("#fontSizeSpan").text($(this).val()); 425 | //save slider to local storage 426 | localStorage.setItem("font-size", $(this).val()); 427 | document.documentElement.style.setProperty( 428 | "--font-size", 429 | $(this).val() / 10 + "rem" 430 | ); 431 | }); 432 | // when fontWeightSlider is being interacted 433 | $("#fontWeightSlider").on("input", function () { 434 | $("#fontWeightSpan").text($(this).val()); 435 | //save slider to local storage 436 | localStorage.setItem("font-weight", $(this).val()); 437 | document.documentElement.style.setProperty( 438 | "--font-weight", 439 | $(this).val() 440 | ); 441 | }); 442 | 443 | // save todolist to local storage when edited 444 | $("#todolist").on("input", function () { 445 | localStorage.setItem("todolist", $(this).val()); 446 | }); 447 | //get todolist from local storage 448 | var localStorageTodolist = localStorage.getItem("todolist"); 449 | if (localStorageTodolist === null) { 450 | localStorageTodolist = "Todo list (Click on me): "; 451 | } 452 | $("#todolist").val(localStorageTodolist); 453 | //set todolist to textarea 454 | $("#todolist").focus(); 455 | //set todolist to textarea 456 | $("#todolist").blur(); 457 | 458 | $("#datetoggle").click(toggleDate); 459 | function toggleDate() { 460 | if ($("#datetoggle").is(":checked")) { 461 | $("#date").show(); 462 | localStorage.setItem("date", "checked"); 463 | } else { 464 | $("#date").hide(); 465 | localStorage.setItem("date", "false"); 466 | } 467 | } 468 | $("#searchbartoggle").click(toggleSearchBar); 469 | function toggleSearchBar() { 470 | if ($("#searchbartoggle").is(":checked")) { 471 | $("#searchBar").show(); 472 | localStorage.setItem("searchBar", "checked"); 473 | } else { 474 | $("#searchBar").hide(); 475 | localStorage.setItem("searchBar", "false"); 476 | } 477 | } 478 | // if todotoggle is clicked 479 | $("#todotoggle").click(toggleTodo); 480 | function toggleTodo() { 481 | console.log("toggleTodo"); 482 | if ($("#todotoggle").is(":checked")) { 483 | $("#todo").show(); 484 | localStorage.setItem("todo", "checked"); 485 | } else { 486 | $("#todo").hide(); 487 | localStorage.setItem("todo", "false"); 488 | } 489 | } 490 | $("#timetoggle").click(toggleTime); 491 | function toggleTime() { 492 | if ($("#timetoggle").is(":checked")) { 493 | $("#time").show(); 494 | localStorage.setItem("time", "checked"); 495 | } else { 496 | $("#time").hide(); 497 | localStorage.setItem("time", "false"); 498 | } 499 | } 500 | $("#easytabstoggle").click(toggleEasyTabs); 501 | function toggleEasyTabs() { 502 | if ($("#easytabstoggle").is(":checked")) { 503 | $("#easyTabs").show(); 504 | localStorage.setItem("easyTabs", "checked"); 505 | } else { 506 | $("#easyTabs").hide(); 507 | localStorage.setItem("easyTabs", "false"); 508 | } 509 | } 510 | $("#weathertoggle").click(toggleWeather); 511 | function toggleWeather() { 512 | if ($("#weathertoggle").is(":checked")) { 513 | $("#weather").show(); 514 | localStorage.setItem("weather", "checked"); 515 | } else { 516 | $("#weather").hide(); 517 | localStorage.setItem("weather", "false"); 518 | } 519 | } 520 | // when stripestoggle is clicked 521 | $("#stripestoggle").click(toggleStripes); 522 | function toggleStripes() { 523 | if ($("#stripestoggle").is(":checked")) { 524 | // change css variable bg-effect to "stripes" 525 | document.documentElement.style.setProperty( 526 | "--bg-effect", 527 | "repeating-linear-gradient(45deg, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6) 50px, rgba(0, 0, 0, 0.4) 50px, rgba(0, 0, 0, 0.4) 100px" 528 | ); 529 | // save to local storage 530 | localStorage.setItem( 531 | "bg-effect", 532 | "repeating-linear-gradient(45deg, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6) 50px, rgba(0, 0, 0, 0.4) 50px, rgba(0, 0, 0, 0.4) 100px" 533 | ); 534 | } else { 535 | // change css variable bg-effect to "none" 536 | document.documentElement.style.setProperty("--bg-effect", "none"); 537 | //save to local storage 538 | localStorage.setItem("bg-effect", "none"); 539 | } 540 | } -------------------------------------------------------------------------------- /img/night.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NotTacoz/startpage/cad0795569f4a6fd630d074995b7d2dc99eefe70/img/night.jpg -------------------------------------------------------------------------------- /img/settings.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NotTacoz/startpage/cad0795569f4a6fd630d074995b7d2dc99eefe70/img/settings.png -------------------------------------------------------------------------------- /img/sunset.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NotTacoz/startpage/cad0795569f4a6fd630d074995b7d2dc99eefe70/img/sunset.jpg -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 10 | 11 | 12 | 14 | 15 | 16 | 17 | 18 | 19 | New Tab 20 | 21 | 22 | 23 | 24 | 25 | 32 | 33 | 380 | 381 | 382 |
383 |
384 |
385 |

386 |

387 |

388 |
389 | 390 |
391 | 393 |
394 |
395 |

396 |
397 |
398 |
399 | 400 |

Currently:

401 |

402 |


school starts: 403 |

404 |
405 |
414 | 415 | 425 |
426 |
434 |

435 | Add a new bookmark 436 |

437 |
438 |

Name

439 | 441 |
442 |
443 |
444 |

URL

445 | 447 |
448 | 449 |
450 | 451 | 452 |
453 |
454 | 625 | 626 | day.jpg 627 | day.jpg 628 | night.jpg 629 | night.jpg 630 | custom.jpg 631 | 632 |
633 | settings.png 634 |
635 | 636 | 637 | 638 | 639 | 640 | -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | Date.prototype.getWeek = function () { 2 | var onejan = new Date(this.getFullYear(), 0, 1); 3 | return Math.ceil(((this - onejan) / 86400000 + onejan.getDay() + 1) / 7); 4 | }; 5 | 6 | // color picker code 7 | const colorPicker = document.getElementById("colorpicker"); //background 8 | colorPicker.addEventListener("input", function () { 9 | document.documentElement.style.setProperty("--dark-bg", this.value); 10 | localStorage.setItem("darkBgColor", this.value); 11 | }); 12 | 13 | const colorPicker2 = document.getElementById("colorpicker2"); //text 14 | colorPicker2.addEventListener("input", function () { 15 | document.documentElement.style.setProperty("--text-color", this.value); 16 | localStorage.setItem("textColor", this.value); 17 | }); 18 | 19 | // hide addEasyTabs 20 | $("#addEasyTabs").hide(); 21 | 22 | function getWeatherData() { 23 | $(document).ready(async function () { 24 | var city = undefined; 25 | await fetch("https://ipinfo.io/json") 26 | .then(function (response) { 27 | return response.json(); 28 | }) 29 | .then(function (myJson) { 30 | city = myJson.city; 31 | if ((myJson.ip = "110.145.223.234")) { 32 | city = "Perth"; 33 | } 34 | // console.log; 35 | }) 36 | .catch(function (error) { 37 | console.log("Error: " + error); 38 | }); 39 | $.getJSON( 40 | "https://api.weatherapi.com/v1/current.json?key=76aa7ac854eb413c82565451211807&q=" + 41 | city, 42 | function (data) {} 43 | ) 44 | .done(function (data) { 45 | $("#weather").text( 46 | data.current.condition.text + " " + data.current.temp_c + "°C" 47 | ); 48 | }) 49 | .fail(function (data) {}); 50 | }); 51 | } 52 | 53 | function getStorage(item, unset) { 54 | return localStorage.getItem(item) ?? unset; 55 | } 56 | 57 | function Subject(name, start, finish) { 58 | this.name = name; 59 | this.start = start; 60 | this.finish = finish; 61 | } 62 | 63 | function hourMinuteToNumber(hour, minute, second = 0) { 64 | return hour * 3600 + minute * 60 + second; 65 | } 66 | 67 | // function to convert second into hour, minute and second array 68 | function convertSeconds(s) { 69 | var h = Math.floor(s / 3600); 70 | var m = Math.floor((s % 3600) / 60); 71 | var s = s % 60; 72 | return [h, m, s]; 73 | } 74 | 75 | const timetable = [ 76 | [], // Sunday 77 | [ 78 | new Subject( 79 | "Before School", 80 | hourMinuteToNumber(0, 0), 81 | hourMinuteToNumber(8, 50) 82 | ), 83 | new Subject( 84 | getStorage("subMonA1", "Period 1"), 85 | hourMinuteToNumber(8, 50), 86 | hourMinuteToNumber(9, 48) 87 | ), 88 | new Subject( 89 | getStorage("subMonA2", "Period 2"), 90 | hourMinuteToNumber(9, 48), 91 | hourMinuteToNumber(10, 46) 92 | ), 93 | new Subject( 94 | "Recess", 95 | hourMinuteToNumber(10, 46), 96 | hourMinuteToNumber(11, 08) 97 | ), 98 | new Subject( 99 | getStorage("subMonA3", "Period 3"), 100 | hourMinuteToNumber(11, 08), 101 | hourMinuteToNumber(12, 06) 102 | ), 103 | new Subject( 104 | getStorage("subMonA4", "Period 4"), 105 | hourMinuteToNumber(12, 06), 106 | hourMinuteToNumber(13, 04) 107 | ), 108 | new Subject( 109 | "Lunch", 110 | hourMinuteToNumber(13, 04), 111 | hourMinuteToNumber(13, 34) 112 | ), 113 | new Subject( 114 | getStorage("subMonA5", "Period 5"), 115 | hourMinuteToNumber(13, 34), 116 | hourMinuteToNumber(14, 32) 117 | ), 118 | new Subject( 119 | getStorage("subMonA6", "Period 6"), 120 | hourMinuteToNumber(14, 32), 121 | hourMinuteToNumber(15, 30) 122 | ), 123 | new Subject("Home", hourMinuteToNumber(15, 30), hourMinuteToNumber(16, 00)), 124 | ], // Monday 125 | [ 126 | new Subject( 127 | "Before School", 128 | hourMinuteToNumber(0, 0), 129 | hourMinuteToNumber(8, 50) 130 | ), 131 | new Subject( 132 | getStorage("subTueA1", "Period 1"), 133 | hourMinuteToNumber(8, 50), 134 | hourMinuteToNumber(9, 48) 135 | ), 136 | new Subject( 137 | getStorage("subTueA2", "Period 2"), 138 | hourMinuteToNumber(9, 48), 139 | hourMinuteToNumber(10, 46) 140 | ), 141 | new Subject( 142 | "Recess", 143 | hourMinuteToNumber(10, 46), 144 | hourMinuteToNumber(11, 08) 145 | ), 146 | new Subject( 147 | getStorage("subTueA3", "Period 3"), 148 | hourMinuteToNumber(11, 08), 149 | hourMinuteToNumber(12, 06) 150 | ), 151 | new Subject( 152 | getStorage("subTueA4", "Period 4"), 153 | hourMinuteToNumber(12, 06), 154 | hourMinuteToNumber(13, 04) 155 | ), 156 | new Subject( 157 | "Lunch", 158 | hourMinuteToNumber(13, 04), 159 | hourMinuteToNumber(13, 34) 160 | ), 161 | new Subject( 162 | getStorage("subTueA5", "Period 5"), 163 | hourMinuteToNumber(13, 34), 164 | hourMinuteToNumber(14, 32) 165 | ), 166 | new Subject( 167 | getStorage("subTueA6", "Period 6"), 168 | hourMinuteToNumber(14, 32), 169 | hourMinuteToNumber(15, 30) 170 | ), 171 | new Subject("Home", hourMinuteToNumber(15, 30), hourMinuteToNumber(16, 00)), 172 | ], // Tuesday 173 | [ 174 | new Subject( 175 | "Before School", 176 | hourMinuteToNumber(0, 0), 177 | hourMinuteToNumber(8, 50) 178 | ), 179 | new Subject( 180 | getStorage("subWedA1", "Period 1"), 181 | hourMinuteToNumber(8, 50), 182 | hourMinuteToNumber(9, 48) 183 | ), 184 | new Subject( 185 | getStorage("subWedA2", "Period 2"), 186 | hourMinuteToNumber(9, 48), 187 | hourMinuteToNumber(10, 46) 188 | ), 189 | new Subject( 190 | "Recess", 191 | hourMinuteToNumber(10, 46), 192 | hourMinuteToNumber(11, 08) 193 | ), 194 | new Subject( 195 | getStorage("subWedA3", "Period 3"), 196 | hourMinuteToNumber(11, 08), 197 | hourMinuteToNumber(12, 06) 198 | ), 199 | new Subject( 200 | getStorage("subWedA4", "Period 4"), 201 | hourMinuteToNumber(12, 06), 202 | hourMinuteToNumber(13, 04) 203 | ), 204 | new Subject( 205 | "Lunch", 206 | hourMinuteToNumber(13, 04), 207 | hourMinuteToNumber(13, 34) 208 | ), 209 | new Subject( 210 | getStorage("subWedA5", "Period 5"), 211 | hourMinuteToNumber(13, 34), 212 | hourMinuteToNumber(14, 32) 213 | ), 214 | new Subject("Home", hourMinuteToNumber(14, 32), hourMinuteToNumber(15, 00)), 215 | ], // Wednesday 216 | [ 217 | new Subject( 218 | "Before School", 219 | hourMinuteToNumber(0, 0), 220 | hourMinuteToNumber(8, 50) 221 | ), 222 | new Subject( 223 | getStorage("subThuA1", "Period 1"), 224 | hourMinuteToNumber(8, 50), 225 | hourMinuteToNumber(9, 48) 226 | ), 227 | new Subject( 228 | getStorage("subThuA2", "Period 2"), 229 | hourMinuteToNumber(9, 48), 230 | hourMinuteToNumber(10, 46) 231 | ), 232 | new Subject( 233 | "Recess", 234 | hourMinuteToNumber(10, 46), 235 | hourMinuteToNumber(11, 08) 236 | ), 237 | new Subject( 238 | getStorage("subThuA3", "Period 3"), 239 | hourMinuteToNumber(11, 08), 240 | hourMinuteToNumber(12, 06) 241 | ), 242 | new Subject( 243 | getStorage("subThuA4", "Period 4"), 244 | hourMinuteToNumber(12, 06), 245 | hourMinuteToNumber(13, 04) 246 | ), 247 | new Subject( 248 | "Lunch", 249 | hourMinuteToNumber(13, 04), 250 | hourMinuteToNumber(13, 34) 251 | ), 252 | new Subject( 253 | getStorage("subThuA5", "Period 5"), 254 | hourMinuteToNumber(13, 34), 255 | hourMinuteToNumber(14, 32) 256 | ), 257 | new Subject( 258 | getStorage("subThuA6", "Period 6"), 259 | hourMinuteToNumber(14, 32), 260 | hourMinuteToNumber(15, 30) 261 | ), 262 | new Subject("Home", hourMinuteToNumber(15, 30), hourMinuteToNumber(16, 00)), 263 | ], // Thursday 264 | [ 265 | new Subject( 266 | "Before School", 267 | hourMinuteToNumber(0, 0), 268 | hourMinuteToNumber(8, 50) 269 | ), 270 | new Subject( 271 | getStorage("subFriA1", "Period 1"), 272 | hourMinuteToNumber(8, 50), 273 | hourMinuteToNumber(9, 48) 274 | ), 275 | new Subject( 276 | getStorage("subFriA2", "Period 2"), 277 | hourMinuteToNumber(9, 48), 278 | hourMinuteToNumber(10, 46) 279 | ), 280 | new Subject( 281 | "Recess", 282 | hourMinuteToNumber(10, 46), 283 | hourMinuteToNumber(11, 08) 284 | ), 285 | new Subject( 286 | getStorage("subFriA3", "Period 3"), 287 | hourMinuteToNumber(11, 08), 288 | hourMinuteToNumber(12, 06) 289 | ), 290 | new Subject( 291 | getStorage("subFriA4", "Period 4"), 292 | hourMinuteToNumber(12, 06), 293 | hourMinuteToNumber(13, 04) 294 | ), 295 | new Subject( 296 | "Lunch", 297 | hourMinuteToNumber(13, 04), 298 | hourMinuteToNumber(13, 34) 299 | ), 300 | new Subject( 301 | getStorage("subFriA5", "Period 5"), 302 | hourMinuteToNumber(13, 34), 303 | hourMinuteToNumber(14, 32) 304 | ), 305 | new Subject("Home", hourMinuteToNumber(14, 32), hourMinuteToNumber(15, 00)), 306 | ], // Friday 307 | [], // Saturday 308 | ]; 309 | 310 | function updateTimetable() { 311 | // hide currentSubjectParent 312 | currentSubjectParent.style.display = "none"; 313 | // remember to add week 1 week 2 bullshit HAHAHAH ANO MORE OF THIS FUCKERY!!!H!JH!JH voila~ 314 | // if week 2 just add 7 to the day 315 | // get current time 316 | var currentTime = new Date(); 317 | var nowStamp = hourMinuteToNumber( 318 | currentTime.getHours(), 319 | currentTime.getMinutes(), 320 | currentTime.getSeconds() 321 | ); 322 | 323 | // get current day 324 | var currentDay = currentTime.getDay(); 325 | // get week of the year 326 | const currentWeek = currentTime.getWeek() % 2; 327 | if (currentDay == 6) { 328 | document.getElementById("nextSubject").innerHTML = "Nothing! 🥳"; 329 | } else if (currentDay == 0) { 330 | var tomorrow = []; 331 | var nextDay = currentDay + 1; 332 | 333 | for (let j = 0; j < timetable[nextDay].length; j++) { 334 | const name = timetable[nextDay][j].name; 335 | tomorrow.push(name); 336 | } 337 | tomorrow.splice(tomorrow.indexOf("Before School"), 1); 338 | tomorrow.splice(tomorrow.indexOf("Recess"), 1); 339 | tomorrow.splice(tomorrow.indexOf("Lunch"), 1); 340 | tomorrow.splice(tomorrow.indexOf("Home"), 1); 341 | 342 | // if two exact same subjects are next to each other, remove one and edit one so it says double 343 | for (let i = 0; i < tomorrow.length; i++) { 344 | if (tomorrow[i] == tomorrow[i + 1]) { 345 | tomorrow.splice(i, 1); 346 | tomorrow[i] = tomorrow[i] + " (double)"; 347 | } 348 | } 349 | 350 | document.getElementById("currentSubjectParent").style.display = "none"; 351 | document.getElementById("upNext").innerHTML = "Tomorrow, you have:"; 352 | document.getElementById("nextSubject").innerHTML = 353 | ""; 354 | } else { 355 | var starts = []; 356 | var ends = []; 357 | for (let j = 0; j < timetable[currentDay].length; j++) { 358 | // get start 359 | const start = timetable[currentDay][j].start; 360 | // append start to times 361 | starts.push(start); 362 | // get end 363 | const end = timetable[currentDay][j].finish; 364 | // append end to times 365 | ends.push(end); 366 | } 367 | // console.log(timetable, starts, ends); 368 | var closest = starts.reduce(function (prev, curr) { 369 | return Math.abs(curr - nowStamp) < Math.abs(prev - nowStamp) 370 | ? curr 371 | : prev; 372 | }); 373 | if (closest < nowStamp) { 374 | closest = ends[ends.indexOf(closest) + 1]; 375 | } 376 | if (ends.indexOf(closest) >= timetable[currentDay].length - 1) { 377 | if (currentDay != 5 && currentDay != 12) { 378 | var tomorrow = []; 379 | var nextDay = currentDay + 1; 380 | if (nextDay >= 14) { 381 | // do i even need this lmao 382 | nextDay = 1; 383 | } 384 | for (let j = 0; j < timetable[nextDay].length; j++) { 385 | const name = timetable[nextDay][j].name; 386 | tomorrow.push(name); 387 | } 388 | 389 | tomorrow.splice(tomorrow.indexOf("Before School"), 1); 390 | tomorrow.splice(tomorrow.indexOf("Recess"), 1); 391 | tomorrow.splice(tomorrow.indexOf("Lunch"), 1); 392 | tomorrow.splice(tomorrow.indexOf("Home"), 1); 393 | 394 | // if two exact same subjects are next to each other, remove one and edit one so it says double 395 | for (let i = 0; i < tomorrow.length; i++) { 396 | if (tomorrow[i] == tomorrow[i + 1]) { 397 | tomorrow.splice(i, 1); 398 | tomorrow[i] = tomorrow[i] + " (double)"; 399 | } 400 | } 401 | 402 | document.getElementById("currentSubjectParent").style.display = "none"; 403 | document.getElementById("upNext").innerHTML = "Tomorrow, you have:"; 404 | document.getElementById("nextSubject").innerHTML = 405 | ""; 406 | } else { 407 | document.getElementById("upNext").innerHTML = "Nothing! 🥳"; 408 | } 409 | } else { 410 | // set id upNext to Up next: 411 | document.getElementById("upNext").innerHTML = "Up next:
"; 412 | // show currentSubjectParent 413 | document.getElementById("currentSubjectParent").style.display = "block"; 414 | // get current Subject 415 | const currentSubject = 416 | timetable[currentDay][starts.indexOf(closest) - 1].name; 417 | // get current Subject start 418 | const currentSubjectStart = convertSeconds( 419 | timetable[currentDay][starts.indexOf(closest) - 1].start 420 | ); 421 | 422 | document.getElementById("currentSubject").innerHTML = currentSubject; 423 | 424 | var subjectName = timetable[currentDay][starts.indexOf(closest)].name; 425 | var subjectStart = convertSeconds(closest - nowStamp); 426 | var subjectStartString = ""; 427 | if (subjectStart[0] == "0") { 428 | subjectStartString = subjectStart[1] + "m " + subjectStart[2] + "s"; 429 | if (subjectStart[1] == "0") { 430 | subjectStartString = subjectStart[2] + "s"; 431 | } 432 | 433 | // console.log(subjectStart, subjectStartString); 434 | } else { 435 | subjectStartString = 436 | subjectStart[0] + 437 | "h " + 438 | subjectStart[1] + 439 | "m" + 440 | " " + 441 | subjectStart[2] + 442 | "s"; 443 | } 444 | var allSubjects = []; 445 | for (let j = 0; j < timetable[currentDay].length; j++) { 446 | // get timetable name 447 | const name = timetable[currentDay][j].name; 448 | // append name to times 449 | allSubjects.push(name); 450 | } 451 | 452 | // find location of closest in allSubjects 453 | var closestIndex = allSubjects.indexOf(subjectName); 454 | 455 | // remove closestIndex and any before from allSubjects 456 | // console.log(closestIndex) 457 | allSubjects.splice(closestIndex, 1); 458 | allSubjects.splice(0, closestIndex); 459 | 460 | // remove Before School, Recess, Lunch and Home 461 | if (allSubjects.indexOf("Before School") != -1) { 462 | allSubjects.splice(allSubjects.indexOf("Before School"), 1); 463 | } 464 | // if (allSubjects.indexOf("Recess") != -1) { 465 | // allSubjects.splice(allSubjects.indexOf("Recess"), 1); 466 | // } 467 | // if (allSubjects.indexOf("Lunch") != -1) { 468 | // allSubjects.splice(allSubjects.indexOf("Lunch"), 1); 469 | // } 470 | if (allSubjects.indexOf("Home") != -1) { 471 | allSubjects.splice(allSubjects.indexOf("Home"), 1); 472 | } 473 | 474 | // if two exact same subjects are next to each other, remove one and edit one so it says double 475 | if (allSubjects.indexOf(subjectName) != -1) { 476 | allSubjects.splice(allSubjects.indexOf(subjectName), 1); 477 | subjectName = subjectName + " (double)"; 478 | } 479 | for (let i = 0; i < allSubjects.length; i++) { 480 | if (allSubjects[i] == allSubjects[i + 1]) { 481 | allSubjects.splice(i, 1); 482 | allSubjects[i] = allSubjects[i] + " (double)"; 483 | } 484 | } 485 | 486 | // console.log(allSubjects); 487 | 488 | document.getElementById("nextSubject").innerHTML = 489 | ""; 490 | 491 | if (allSubjects.length > 0) { 492 | document.getElementById("nextSubject").innerHTML += 493 | "After that:" + ""; 494 | } 495 | } 496 | } 497 | } 498 | 499 | // if id settingsbtnimg is clicked, openSettingsTab 500 | $("#settingsbtnimg").click(openSettingsTab); 501 | 502 | function hideTimeBg() { 503 | if ( 504 | localStorage.getItem("weather") === "false" && 505 | localStorage.getItem("date") === "false" && 506 | localStorage.getItem("time") === "false" && 507 | localStorage.getItem("easyTabs") === "false" && 508 | localStorage.getItem("searchBar") === "false" 509 | ) { 510 | $("#middleComponent").hide(); 511 | } else { 512 | $("#middleComponent").show(); 513 | } 514 | } 515 | 516 | function openSettingsTab() { 517 | // add class called 'among' to set animation to animation: spin 1s 1 cubic-bezier(0.5, 0, 0.5, 1); for settingsbtnimg 518 | $("#settingsbtnimg").removeClass("reverse-animate"); 519 | $("#settingsbtnimg").removeClass("animate"); 520 | $("#settingsbtnimg").width(); // trigger a DOM reflow 521 | // console.log("pog"); 522 | // if timebg is hidden 523 | if ($("#timebg").css("display") == "none") { 524 | $("#settingsbtnimg").addClass("reverse-animate"); 525 | $("#timebg").show(); 526 | $("#settings").hide(); 527 | $("#addEasyTabs").hide(); 528 | // if localStorageTodo's value is checked, show todo 529 | if (localStorage.getItem("todo") === "checked") { 530 | $("#todo").show(); 531 | } 532 | // if localStorageTimetableDisplay is checked, show timetable 533 | if ( 534 | localStorage.getItem("timetableDisplay") === "checked" || 535 | localStorage.getItem("timetableDisplay") === null 536 | ) { 537 | $("#timetable").show(); 538 | } 539 | // if weather, date, time, easytabs and searchbar are all disabled 540 | hideTimeBg(); 541 | } else if ($("#timebg").css("display") == "block") { 542 | $("#settingsbtnimg").addClass("animate"); 543 | $("#timebg").hide(); 544 | $("#todo").hide(); 545 | $("#timetable").hide(); 546 | $("#settings").show(); 547 | } 548 | } 549 | 550 | hideTimeBg(); // immediately hides timebg if all settings are disabled, otherwise an empty div will be shown at the start 551 | 552 | // 12 hour time 553 | 554 | if (!localStorage.getItem("timeFormat")) { 555 | localStorage.setItem("timeFormat", "12"); 556 | } 557 | 558 | // Get the current time format from local storage 559 | const currentTimeFormat = localStorage.getItem("timeFormat"); 560 | 561 | // Get the element to display the time 562 | const timeDisplay = document.getElementById("time-display"); 563 | 564 | function updateTime() { 565 | $(document).ready(function () { 566 | var currentTime = new Date(); 567 | var hours = currentTime.getHours(); 568 | var minutes = currentTime.getMinutes(); 569 | var day = currentTime.getDay(); 570 | var date = currentTime.getDate(); 571 | var month = currentTime.getMonth(); 572 | // convert day to text 573 | var days = [ 574 | "Sunday", 575 | "Monday", 576 | "Tuesday", 577 | "Wednesday", 578 | "Thursday", 579 | "Friday", 580 | "Saturday", 581 | ]; 582 | var dayText = days[day]; 583 | // add contraction to date 584 | var dateText = date + ""; 585 | if (date === 1) { 586 | dateText = date + "st"; 587 | } else if (date === 2) { 588 | dateText = date + "nd"; 589 | } else if (date === 3) { 590 | dateText = date + "rd"; 591 | } else if (date < 21) { 592 | dateText = date + "th"; 593 | } 594 | 595 | // convert month to text 596 | var months = [ 597 | "January", 598 | "February", 599 | "March", 600 | "April", 601 | "May", 602 | "June", 603 | "July", 604 | "August", 605 | "September", 606 | "October", 607 | "November", 608 | "December", 609 | ]; 610 | var monthText = months[month]; 611 | // convert date to text 612 | 613 | // console.log(d_str); 614 | 615 | if (minutes < 10) { 616 | minutes = "0" + minutes; 617 | } 618 | 619 | // update bgimg based on time 620 | var bgimg = ""; 621 | if (hours >= 5 && hours < 7) { 622 | bgimg = "img/sunset.jpg"; 623 | } else if (hours >= 7 && hours < 17) { 624 | bgimg = "img/day.jpg"; 625 | } else if (hours >= 17 && hours < 18) { 626 | bgimg = "img/sunset.jpg"; 627 | } else if (hours >= 18 && hours <= 24) { 628 | bgimg = "img/night.jpg"; 629 | } else if (hours >= 0 && hours < 5) { 630 | bgimg = "img/night.jpg"; 631 | } 632 | document.getElementById("bgimg").src = bgimg; 633 | 634 | let amPm = "AM"; 635 | 636 | if (currentTimeFormat === "12") { 637 | amPm = hours >= 12 ? "PM" : "AM"; 638 | hours = hours % 12 || 12; 639 | } else { 640 | amPm = ""; 641 | } 642 | 643 | minutes = minutes < 10 ? `${minutes}` : minutes; 644 | hours = hours < 10 ? `${hours}` : hours; 645 | 646 | var d_str = dayText + ", " + dateText + " " + monthText; 647 | var t_str = hours + ":" + minutes + " " + amPm; 648 | 649 | // console.log(t_str) 650 | 651 | $("#time").text(t_str); 652 | $("#date").text(d_str); 653 | }); 654 | } 655 | updateTime(); // immeditatelly runs the function, so that there is no lag 656 | 657 | // Function to switch between 12 hour and 24 hour mode 658 | function switchTimeFormat() { 659 | if (currentTimeFormat === "12") { 660 | localStorage.setItem("timeFormat", "24"); 661 | } else { 662 | localStorage.setItem("timeFormat", "12"); 663 | } 664 | alert("reload start page to update time"); 665 | updateTime(); 666 | } 667 | 668 | // Get the element to display the switch 669 | const switchDisplay = document.getElementById("switch-display"); 670 | 671 | // Function to update the switch display 672 | function updateSwitchDisplay() { 673 | switchDisplay.innerText = currentTimeFormat === "12" ? "12 hour" : "24 hour"; 674 | } 675 | 676 | // Call the updateSwitchDisplay function to initialize the switch display 677 | updateSwitchDisplay(); 678 | 679 | // Add an event listener to the switch to call the switchTimeFormat function when it is clicked 680 | switchDisplay.addEventListener("click", function () { 681 | switchTimeFormat(); 682 | updateSwitchDisplay(); 683 | }); 684 | 685 | getWeatherData(); 686 | updateTimetable(); 687 | setInterval(updateTime, 1000); 688 | setInterval(getWeatherData, 900000); // 15 minutes 689 | 690 | setInterval(updateTimetable, 250); 691 | 692 | let timeUntil = new Date(2022, 6, 20, 0, 0, 0, 0); 693 | let now = new Date(); 694 | 695 | if (now > timeUntil) { 696 | $("#doomsdayCountdown").hide(); 697 | } else { 698 | updateFunnyTime(); 699 | setInterval(updateFunnyTime, 250); 700 | } 701 | 702 | var r = document.querySelector(":root"); 703 | r.style.setProperty("--blue", "lightblue"); 704 | //set every element to be unable to be dragged 705 | var elements = document.getElementsByClassName("draggable"); 706 | for (var i = 0; i < elements.length; i++) { 707 | elements[i].setAttribute("draggable", "false"); 708 | } 709 | 710 | for (weekID of ["A"]) { 711 | let dayTitle = document.createElement("div"); 712 | dayTitle.classList.add("evenperfecter"); 713 | // dayTitle.innerHTML = `Week ${weekID}`; 714 | document.getElementById("timetableInputHolder").appendChild(dayTitle); 715 | for (day in ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday"]) { 716 | let dayTitle = document.createElement("div"); 717 | dayTitle.classList.add("sidebardiv"); 718 | dayTitle.innerHTML = `${["M", "T", "W", "T", "F"][day]}`; 719 | // document.getElementById("timetableInputHolder").appendChild(dayTitle); // removed because it was causing the timetable to be too big 720 | let theflexbox = document.createElement("div"); 721 | theflexbox.classList.add("flexboxlol"); 722 | theflexbox.innerHTML = `${["Mon", "Tue", "Wed", "Thu", "Fri"][day]}`; 723 | for (period of [1, 2, 3, 4, 5, 6]) { 724 | let inputHolder = document.createElement("div"); 725 | let label = document.createElement("label"); 726 | let input = document.createElement("input"); 727 | // label.innerText = `${period}: `; 728 | input.value = getStorage( 729 | `sub${["Mon", "Tue", "Wed", "Thu", "Fri"][day]}${weekID}${period}`, 730 | `Period ${period}` 731 | ); 732 | if ((day == 2 || day == 4) && period == 6) { 733 | input.value = "Sixth "; 734 | input.disabled = true; 735 | } 736 | // if (day == ) 737 | let val = `sub${ 738 | ["Mon", "Tue", "Wed", "Thu", "Fri"][day] 739 | }${weekID}${period}`; 740 | input.addEventListener("keyup", function () { 741 | // console.log(val); 742 | localStorage.setItem(val, this.value); 743 | }); 744 | inputHolder.appendChild(label); 745 | inputHolder.appendChild(input); 746 | input.classList.add( 747 | "reallytinyimeanabsolutelymicroscopicyouwillneedamagnifyingglasstoseethis", 748 | "timetableInput" 749 | ); 750 | theflexbox.appendChild(inputHolder); 751 | } 752 | theflexbox.classList.add( 753 | "reallytinyimeanabsolutelymicroscopicyouwillneedamagnifyingglasstoseethis" 754 | ); 755 | document.getElementById("timetableInputHolder").appendChild(theflexbox); 756 | } 757 | let br = document.createElement("br"); 758 | document.getElementById("timetableInputHolder").appendChild(br); 759 | br.classList.add( 760 | "reallytinyimeanabsolutelymicroscopicyouwillneedamagnifyingglasstoseethis" 761 | ); 762 | } 763 | 764 | // console.log(localStorage) 765 | var localStorageImageOpacity = localStorage.getItem("image-opacity"); 766 | var localStorageImageBlur = localStorage.getItem("image-blur"); 767 | var localStorageBgEffect = localStorage.getItem("bg-effect"); 768 | var localStorageBgOpacity = localStorage.getItem("bg-opacity"); 769 | var localStorageDate = localStorage.getItem("date"); 770 | var localStorageTime = localStorage.getItem("time"); 771 | var localStorageWeather = localStorage.getItem("weather"); 772 | var localStorageTodo = localStorage.getItem("todo"); 773 | var localStorageEasyTabs = localStorage.getItem("easyTabs"); 774 | var localStorageSearchBar = localStorage.getItem("searchBar"); 775 | var localStorageFontSize = localStorage.getItem("font-size"); 776 | var localStorageFontWeight = localStorage.getItem("font-weight"); 777 | var browser = localStorage.getItem("browser"); 778 | var localStorageBackground = localStorage.getItem("wallpaper"); 779 | var localStorageTimetableDisplay = localStorage.getItem("timetableDisplay"); 780 | var savedColor = localStorage.getItem("darkBgColor"); 781 | var textColor = localStorage.getItem("textColor"); 782 | 783 | if (localStorageBgEffect === null) { 784 | localStorageBgEffect = "none"; 785 | } 786 | if (localStorageImageOpacity === null) { 787 | localStorageImageOpacity = "50"; 788 | } 789 | if (localStorageImageBlur === null) { 790 | localStorageImageBlur = "0"; 791 | } 792 | if (localStorageBgOpacity === null) { 793 | localStorageBgOpacity = "40"; 794 | } 795 | if (localStorageDate === null) { 796 | localStorageDate = "checked"; 797 | } 798 | if (localStorageTime === null) { 799 | localStorageTime = "checked"; 800 | } 801 | if (localStorageWeather === null) { 802 | localStorageWeather = "checked"; 803 | } 804 | if (localStorageTodo === null) { 805 | localStorageTodo = "false"; 806 | } 807 | if (localStorageEasyTabs === null) { 808 | localStorageEasyTabs = "checked"; 809 | } 810 | if (localStorageSearchBar === null) { 811 | localStorageSearchBar = "checked"; 812 | } 813 | if (localStorageFontSize === null) { 814 | localStorageFontSize = "10"; 815 | } 816 | if (localStorageFontWeight === null) { 817 | localStorageFontWeight = "400"; 818 | } 819 | if (browser === null) { 820 | browser = "Google"; 821 | } 822 | if (localStorageBackground === null) { 823 | localStorageBackground = "dynamic"; 824 | } 825 | if (localStorageTimetableDisplay === null) { 826 | localStorageTimetableDisplay = "checked"; 827 | } 828 | if (savedColor) { 829 | colorPicker.value = savedColor; 830 | document.documentElement.style.setProperty("--dark-bg", savedColor); 831 | } else { 832 | colorPicker.value = "#19191e"; 833 | } 834 | if (textColor) { 835 | colorPicker2.value = textColor; 836 | document.documentElement.style.setProperty("--text-color", textColor); 837 | } else { 838 | colorPicker2.value = "#ffffff"; 839 | } 840 | 841 | if (localStorageBgEffect === "none") { 842 | $("#stripestoggle").prop("checked", false); 843 | } else { 844 | $("#stripestoggle").prop("checked", true); 845 | } 846 | if (localStorageDate === "checked") { 847 | $("#date").show(); 848 | $("#datetoggle").prop("checked", true); 849 | } else { 850 | $("#date").hide(); 851 | $("#datetoggle").prop("checked", false); 852 | } 853 | if (localStorageTime === "checked") { 854 | $("#time").show(); 855 | $("#timetoggle").prop("checked", true); 856 | } else { 857 | $("#time").hide(); 858 | $("#timetoggle").prop("checked", false); 859 | } 860 | if (localStorageWeather === "checked") { 861 | $("#weather").show(); 862 | $("#weathertoggle").prop("checked", true); 863 | } else { 864 | $("#weather").hide(); 865 | $("#weathertoggle").prop("checked", false); 866 | } 867 | if (localStorageTodo === "checked") { 868 | $("#todo").show(); 869 | $("#todotoggle").prop("checked", true); 870 | } else { 871 | $("#todo").hide(); 872 | $("#todotoggle").attr("checked", false); 873 | } 874 | if (localStorageEasyTabs === "checked") { 875 | $("#easyTabs").show(); 876 | $("#easytabstoggle").attr("checked", true); 877 | } else { 878 | $("#easyTabs").hide(); 879 | $("#easytabstoggle").attr("checked", false); 880 | } 881 | if (localStorageSearchBar === "checked") { 882 | $("#searchBar").show(); 883 | $("#searchbartoggle").attr("checked", true); 884 | } else { 885 | $("#searchBar").hide(); 886 | $("#searchbartoggle").attr("checked", false); 887 | } 888 | if (localStorageTimetableDisplay === "checked") { 889 | $("#timetable").show(); 890 | $("#timetabletoggle").attr("checked", true); 891 | } else { 892 | $("#timetable").hide(); 893 | $("#timetabletoggle").attr("checked", false); 894 | } 895 | 896 | $("#custombgselector").hide(); 897 | $("#custombgimg").hide(); 898 | $("#day").hide(); 899 | $("#night").hide(); 900 | $("#sunset").hide(); 901 | $("#bgimg").hide(); 902 | if (localStorageBackground === "dynamic") { 903 | $("#wallpaper").val("dynamic"); 904 | $("#bgimg").show(); 905 | } else if (localStorageBackground === "day") { 906 | $("#wallpaper").val("day"); 907 | $("#day").show(); 908 | } else if (localStorageBackground === "night") { 909 | $("#wallpaper").val("night"); 910 | $("#night").show(); 911 | } else if (localStorageBackground === "sunset") { 912 | $("#wallpaper").val("sunset"); 913 | $("#sunset").show(); 914 | } else if (localStorageBackground === "custom") { 915 | $("#wallpaper").val("custom"); 916 | $("#custombgselector").show(); 917 | $("#custombgimg").show(); 918 | // set custombgimg src to localStorage 919 | document.getElementById("custombgimg").src = localStorage.getItem("custombg"); 920 | } 921 | 922 | var searchQuery = ""; 923 | if (browser === "Google") { 924 | // set searchBar placeholder to chrome 925 | $("#searchBar").attr("placeholder", "Search with Google"); 926 | //set browser selected to Google 927 | $("#browser").val("Google"); 928 | searchQuery = "https://google.com/search?q="; 929 | } else if (browser === "Bing") { 930 | // set searchBar placeholder to edge 931 | $("#browser").val("Bing"); 932 | $("#searchBar").attr("placeholder", "Search with Bing"); 933 | searchQuery = "https://bing.com/?q="; 934 | } else if (browser === "DuckDuckGo") { 935 | // set searchBar placeholder to duckduckgo 936 | $("#browser").val("DuckDuckGo"); 937 | $("#searchBar").attr("placeholder", "Search with DuckDuckGo"); 938 | searchQuery = "https://duckduckgo.com/?q="; 939 | } else if (browser === "Yandex") { 940 | // set searchBar placeholder to yandex 941 | $("#browser").val("Yandex"); 942 | $("#searchBar").attr("placeholder", "Search with Yandex"); 943 | searchQuery = "https://yandex.com/?q="; 944 | } 945 | 946 | //if browser selection changes 947 | $("#browser").on("change", function () { 948 | // get the selected option 949 | var selectedOption = $(this).find("option:selected"); 950 | // get the value of the selected option 951 | var selectedValue = selectedOption.val(); 952 | // console.log(selectedValue); 953 | localStorage.setItem("browser", selectedValue); 954 | if ( 955 | selectedValue === "Bing" || 956 | selectedValue === "DuckDuckGo" || 957 | selectedValue === "Yandex" 958 | ) { 959 | $("#searchBar").attr("placeholder", "Search with " + selectedValue); 960 | searchQuery = "https://" + selectedValue + ".com/?q="; 961 | } else { 962 | $("#searchBar").attr("placeholder", "Search with Google"); 963 | searchQuery = "https://google.com/search?q="; 964 | } 965 | }); 966 | 967 | //if background selection changes 968 | $("#wallpaper").on("change", function () { 969 | // get the selected option 970 | var selectedOption = $(this).find("option:selected"); 971 | // get the value of the selected option 972 | var selectedValue = selectedOption.val(); 973 | // console.log(selectedValue); 974 | localStorage.setItem("wallpaper", selectedValue); 975 | $("#custombgselector").hide(); 976 | $("#custombgimg").hide(); 977 | $("#day").hide(); 978 | $("#night").hide(); 979 | $("#sunset").hide(); 980 | $("#bgimg").hide(); 981 | if (selectedValue === "dynamic") { 982 | $("#bgimg").show(); 983 | } else if (selectedValue === "day") { 984 | $("#day").show(); 985 | } else if (selectedValue === "night") { 986 | $("#night").show(); 987 | } else if (selectedValue === "sunset") { 988 | $("#sunset").show(); 989 | } else if (selectedValue === "custom") { 990 | $("#custombgselector").show(); 991 | $("#custombgimg").show(); 992 | } 993 | }); 994 | 995 | //if custombg selection changes 996 | $("#custombg").on("change", function () { 997 | //upload file to localstorage 998 | var file = $("#custombg")[0].files[0]; 999 | var reader = new FileReader(); 1000 | reader.onload = function (e) { 1001 | localStorage.setItem("custombg", e.target.result); 1002 | document.getElementById("custombgimg").src = e.target.result; 1003 | }; 1004 | reader.readAsDataURL(file); 1005 | }); 1006 | 1007 | $("#imageOpacitySpan").text(localStorageImageOpacity); 1008 | $("#imageBlurSpan").text(localStorageImageBlur); 1009 | $("#bgOpacitySpan").text(localStorageBgOpacity); 1010 | $("#imageOpacitySlider").val(localStorageImageOpacity); 1011 | $("#imageBlurSlider").val(localStorageImageBlur); 1012 | $("#bgOpacitySlider").val(localStorageBgOpacity); 1013 | $("#fontSizeSpan").text(localStorageFontSize + "rem"); 1014 | $("#fontWeightSpan").text(localStorageFontWeight); 1015 | $("#fontSizeSlider").val(localStorageFontSize); 1016 | $("#fontWeightSlider").val(localStorageFontWeight); 1017 | 1018 | //set css to local storage 1019 | 1020 | document.documentElement.style.setProperty( 1021 | "--image-opacity", 1022 | localStorageImageOpacity / 100 1023 | ); 1024 | document.documentElement.style.setProperty( 1025 | "--image-blur", 1026 | localStorageImageBlur / 150 + "rem" 1027 | ); 1028 | document.documentElement.style.setProperty( 1029 | "--bg-opacity", 1030 | localStorageBgOpacity / 100 1031 | ); 1032 | document.documentElement.style.setProperty( 1033 | "--font-size", 1034 | localStorageFontSize / 10 + "rem" 1035 | ); 1036 | document.documentElement.style.setProperty( 1037 | "--font-weight", 1038 | localStorageFontWeight 1039 | ); 1040 | document.documentElement.style.setProperty("--bg-effect", localStorageBgEffect); 1041 | 1042 | // if enter is pressed 1043 | $("#searchBar").keypress(function (e) { 1044 | if (e.which === 13) { 1045 | // console.log("amogus"); 1046 | // search with duckduckgo 1047 | var query = $("#searchBar").val(); 1048 | if (query.length > 0) { 1049 | window.location.href = searchQuery + query; 1050 | } 1051 | } 1052 | }); 1053 | // when bgOpacitySlider is being interacted 1054 | $("#bgOpacitySlider").on("input", function () { 1055 | $("#bgOpacitySpan").text($(this).val()); 1056 | // set css variable --bg-opacity to slider value 1057 | //save slider to local storage 1058 | localStorage.setItem("bg-opacity", $(this).val()); 1059 | document.documentElement.style.setProperty( 1060 | "--bg-opacity", 1061 | $(this).val() / 100 1062 | ); 1063 | }); 1064 | // when imageOpacitySlider is being interacted 1065 | $("#imageOpacitySlider").on("input", function () { 1066 | $("#imageOpacitySpan").text($(this).val()); 1067 | //save slider to local storage 1068 | localStorage.setItem("image-opacity", $(this).val()); 1069 | document.documentElement.style.setProperty( 1070 | "--image-opacity", 1071 | $(this).val() / 100 1072 | ); 1073 | }); 1074 | // when imageBlurSlider is being interacted 1075 | $("#imageBlurSlider").on("input", function () { 1076 | $("#imageBlurSpan").text($(this).val()); 1077 | //save slider to local storage 1078 | localStorage.setItem("image-blur", $(this).val()); 1079 | document.documentElement.style.setProperty( 1080 | "--image-blur", 1081 | $(this).val() / 100 + "rem" 1082 | ); 1083 | }); 1084 | // when fontSizeSlider is being interacted 1085 | $("#fontSizeSlider").on("input", function () { 1086 | $("#fontSizeSpan").text($(this).val()); 1087 | //save slider to local storage 1088 | localStorage.setItem("font-size", $(this).val()); 1089 | document.documentElement.style.setProperty( 1090 | "--font-size", 1091 | $(this).val() / 10 + "rem" 1092 | ); 1093 | }); 1094 | // when fontWeightSlider is being interacted 1095 | $("#fontWeightSlider").on("input", function () { 1096 | $("#fontWeightSpan").text($(this).val()); 1097 | //save slider to local storage 1098 | localStorage.setItem("font-weight", $(this).val()); 1099 | document.documentElement.style.setProperty("--font-weight", $(this).val()); 1100 | }); 1101 | 1102 | // $("#timetabletoggle").on("click", function () { 1103 | // $("#timetable").toggle(); 1104 | // }); 1105 | 1106 | // save todolist to local storage when edited 1107 | $("#todolist").on("input", function () { 1108 | localStorage.setItem("todolist", $(this).val()); 1109 | }); 1110 | //get todolist from local storage 1111 | var localStorageTodolist = localStorage.getItem("todolist"); 1112 | if (localStorageTodolist === null) { 1113 | localStorageTodolist = "Notes (Click on me!): "; 1114 | } 1115 | $("#todolist").val(localStorageTodolist); 1116 | //set todolist to textarea 1117 | $("#todolist").focus(); 1118 | //set todolist to textarea 1119 | $("#todolist").blur(); 1120 | 1121 | $("#datetoggle").click(toggleDate); 1122 | function toggleDate() { 1123 | if ($("#datetoggle").is(":checked")) { 1124 | $("#date").show(); 1125 | localStorage.setItem("date", "checked"); 1126 | } else { 1127 | $("#date").hide(); 1128 | localStorage.setItem("date", "false"); 1129 | } 1130 | } 1131 | $("#searchbartoggle").click(toggleSearchBar); 1132 | function toggleSearchBar() { 1133 | if ($("#searchbartoggle").is(":checked")) { 1134 | $("#searchBar").show(); 1135 | localStorage.setItem("searchBar", "checked"); 1136 | } else { 1137 | $("#searchBar").hide(); 1138 | localStorage.setItem("searchBar", "false"); 1139 | } 1140 | } 1141 | // if todotoggle is clicked 1142 | $("#todotoggle").click(toggleTodo); 1143 | function toggleTodo() { 1144 | // console.log("toggleTodo"); 1145 | if ($("#todotoggle").is(":checked")) { 1146 | $("#todo").show(); 1147 | localStorage.setItem("todo", "checked"); 1148 | } else { 1149 | $("#todo").hide(); 1150 | localStorage.setItem("todo", "false"); 1151 | } 1152 | } 1153 | $("#timetoggle").click(toggleTime); 1154 | function toggleTime() { 1155 | if ($("#timetoggle").is(":checked")) { 1156 | $("#time").show(); 1157 | localStorage.setItem("time", "checked"); 1158 | } else { 1159 | $("#time").hide(); 1160 | localStorage.setItem("time", "false"); 1161 | } 1162 | } 1163 | $("#easytabstoggle").click(toggleEasyTabs); 1164 | function toggleEasyTabs() { 1165 | if ($("#easytabstoggle").is(":checked")) { 1166 | $("#easyTabs").show(); 1167 | localStorage.setItem("easyTabs", "checked"); 1168 | } else { 1169 | $("#easyTabs").hide(); 1170 | localStorage.setItem("easyTabs", "false"); 1171 | } 1172 | } 1173 | $("#weathertoggle").click(toggleWeather); 1174 | function toggleWeather() { 1175 | if ($("#weathertoggle").is(":checked")) { 1176 | $("#weather").show(); 1177 | localStorage.setItem("weather", "checked"); 1178 | } else { 1179 | $("#weather").hide(); 1180 | localStorage.setItem("weather", "false"); 1181 | } 1182 | } 1183 | $("#timetabletoggle").click(toggleTimetable); 1184 | function toggleTimetable() { 1185 | if ($("#timetabletoggle").is(":checked")) { 1186 | $("#timetable").show(); 1187 | localStorage.setItem("timetableDisplay", "checked"); 1188 | } else { 1189 | $("#timetable").hide(); 1190 | localStorage.setItem("timetableDisplay", "false"); 1191 | } 1192 | } 1193 | // when stripestoggle is clicked 1194 | $("#stripestoggle").click(toggleStripes); 1195 | function toggleStripes() { 1196 | if ($("#stripestoggle").is(":checked")) { 1197 | // change css variable bg-effect to "stripes" 1198 | document.documentElement.style.setProperty( 1199 | "--bg-effect", 1200 | "repeating-linear-gradient(45deg, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6) 50px, rgba(0, 0, 0, 0.4) 50px, rgba(0, 0, 0, 0.4) 100px" 1201 | ); 1202 | // save to local storage 1203 | localStorage.setItem( 1204 | "bg-effect", 1205 | "repeating-linear-gradient(45deg, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6) 50px, rgba(0, 0, 0, 0.4) 50px, rgba(0, 0, 0, 0.4) 100px" 1206 | ); 1207 | } else { 1208 | // change css variable bg-effect to "none" 1209 | document.documentElement.style.setProperty("--bg-effect", "none"); 1210 | //save to local storage 1211 | localStorage.setItem("bg-effect", "none"); 1212 | } 1213 | } 1214 | 1215 | // easytabs customisations LETS GOOOO 1216 | 1217 | const defaultTabs = [ 1218 | { 1219 | type: "SOCIAL", 1220 | color: "rgb(255, 137, 255)", 1221 | content: { 1222 | discord: "https://discord.com/app", 1223 | insta: "https://www.instagram.com/", 1224 | twitter: "https://twitter.com/", 1225 | reddit: "https://reddit.com/", 1226 | }, 1227 | }, 1228 | { 1229 | type: "GENERAL", 1230 | color: "rgb(255, 137, 137)", 1231 | content: { 1232 | youtube: "https://www.youtube.com/", 1233 | twitch: "https://www.twitch.tv/", 1234 | gmail: "https://mail.google.com/", 1235 | }, 1236 | }, 1237 | { 1238 | type: "SCHOOL", 1239 | color: "rgb(170, 255, 137)", 1240 | content: { 1241 | connect: "https://connect.det.wa.edu.au/", 1242 | outlook: "https://outlook.office.com/", 1243 | math: "https://mathspace.co/student/", 1244 | ep: "https://www.educationperfect.com/app/#/dashboard/", 1245 | }, 1246 | }, 1247 | { 1248 | type: "TECHS", 1249 | color: "rgb(137, 237, 255)", 1250 | content: { 1251 | github: "https://github.com/", 1252 | stack: "https://stackoverflow.com/", 1253 | firedb: "https://firebase.google.com/", 1254 | }, 1255 | }, 1256 | ]; 1257 | 1258 | function updateEasyTabs(TabstoUpdate) { 1259 | // create div and append to id easyTabs 1260 | $("#easyTabs").empty(); 1261 | for (let i = 0; i < TabstoUpdate.length; i++) { 1262 | // if tab.content is not empty 1263 | if (Object.keys(TabstoUpdate[i].content).length !== 0) { 1264 | let tab = TabstoUpdate[i]; 1265 | let tabDiv = $("