Home

commit 2700f85fc8c8f19d60451dab7784ab47fc8d7deb Author: Rushil Umaretiya Date: Thu Feb 10 15:20:39 2022 -0500 init commit diff --git a/RobotoMono.ttf b/RobotoMono.ttf new file mode 100644 index 0000000..d2b4746 Binary files /dev/null and b/RobotoMono.ttf differ diff --git a/main.js b/main.js new file mode 100644 index 0000000..9bd9779 --- /dev/null +++ b/main.js @@ -0,0 +1,66 @@ + + + // Search on enter key event + function search(e) { + if (e.keyCode == 13) { + var val = document.getElementById("search-field").value; + window.open("https://google.com/search?q=" + val, "_self"); + } + } + // Get current time and format + function getTime() { + let date = new Date(), + min = date.getMinutes(), + sec = date.getSeconds(), + hour = date.getHours(); + + return "" + + (hour < 10 ? ("0" + hour) : hour) + ":" + + (min < 10 ? ("0" + min) : min) + ":" + + (sec < 10 ? ("0" + sec) : sec); + } + + window.onload = () => { + //randomize background color + let colors = ["#E0BBE4","#957DAD","#D291BC", + "#FEC8D8","#FF9AA2","#FFB7B2", + "#FFDAC1","#32F0CB","#B5EAD7","#C7CEEA"] + document.getElementsByTagName("body")[0].style.background = colors[Math.floor(Math.random() * 10)]; + + //get HTTP request + let xhr = new XMLHttpRequest(); + // Request to open weather map + xhr.open('GET', 'http://api.openweathermap.org/data/2.5/weather?id=4744870&units=imperial&appid=e5b292ae2f9dae5f29e11499c2d82ece'); + xhr.onload = () => { + if (xhr.readyState === 4) { + if (xhr.status === 200) { + let json = JSON.parse(xhr.responseText); + console.log(json); + document.getElementById("temp").innerHTML = json.main.temp.toFixed(0) + " F"; + document.getElementById("weather-description").innerHTML = json.weather[0].description; + } else { + console.log('error msg: ' + xhr.status); + } + } + } + xhr.send(); + // Set up the clock + document.getElementById("clock").innerHTML = getTime(); + // Set clock interval to tick clock + setInterval( () => { + document.getElementById("clock").innerHTML = getTime(); + },100); + + document.getElementById('search-field').addEventListener('keypress', search); + } + + document.addEventListener("keydown", event => { + if (event.keyCode == 32) { // Spacebar code to open search + document.getElementById('search').style.display = 'flex'; + document.getElementById('search-field').focus(); + } else if (event.keyCode == 27) { // Esc to close search + document.getElementById('search-field').value = ''; + document.getElementById('search-field').blur(); + document.getElementById('search').style.display = 'none'; + } + }); \ No newline at end of file diff --git a/manifest.json b/manifest.json new file mode 100644 index 0000000..3118099 --- /dev/null +++ b/manifest.json @@ -0,0 +1,11 @@ +{ + "name": "rushilwiz's newtab", + "version": "4.20", + "description": "It's my newtab!", + "permissions" : ["management"], + "chrome_url_overrides" : { + "newtab": "newtab.html" + }, + + "manifest_version": 2 +} \ No newline at end of file diff --git a/newtab.html b/newtab.html new file mode 100644 index 0000000..3d21306 --- /dev/null +++ b/newtab.html @@ -0,0 +1,72 @@ + + + + + + + + Home + + + + +

+ +

Daily

+ Inbox + Github + Drive + Ally +

Media

+ Youtube + Netflix + DisneyPlus + Spotify + Amazon Prime +

School

+ Email + Schoology + Classroom + Ion + Drive + Docs + Slides + Sheets +

Social

+ Twitter + Facebook + Messenger + Insta +

+ + + + diff --git a/styles.css b/styles.css new file mode 100644 index 0000000..917b6d9 --- /dev/null +++ b/styles.css @@ -0,0 +1,153 @@ +@font-face { + font-family: "Roboto Mono"; + src: url(RobotoMono.ttf); +} + +:root { + /*--bg: #5f4b8b;*/ + --bg: #ffd1dc; + --fg: #ffffff; + --secondaryFg: #b3b3b3; + --containerBg: #272727; + --searchBg: var(--containerBg); + --scrollbarColor: #3f3f3f; +} + +body { + /* background-color: var(--bg); */ + margin: 0px; +} + +.container { + width: 100%; + height: 100vh; + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; +} + +#clock { + font-family: sans-serif; + font-size: 3.5rem; + font-weight: 600; + font-family: "Roboto Mono"; + color: var(--fg); + margin-bottom: 0.25em; +} + +#search { + width: 100%; + height: 100vh; + background-color: var(--searchBg); + display: none; + position: absolute; + box-sizing: border-box; + flex-direction: column; + align-items: center; + justify-content: center; +} + +#search-field { + width: 90%; + padding: 0.75em 1em; + box-sizing: border-box; + background-color: var(--searchBg); + border: solid 0px var(--searchBg); + font-family: "Roboto Mono"; + font-size: 4rem; + color: var(--fg); + outline: none; + border-radius: 3px; + margin-bottom: 1em; + text-align: center; +} + +.weather-container { + width: 30%; + background-color: var(--containerBg); + padding: 1em; + border-radius: 3px; + font-family: "Roboto Mono"; + color: var(--fg); + text-align: center; +} +.inline { + display: inline-block; +} + +.bookmark-container { + display: flex; + flex-direction: row; + justify-content: center; + width: 50%; + margin: 1em 0em; +} + +@media only screen and (max-width: 960px) { + .container { + height: auto; + } + #clock { + margin-top: 1em; + } + .container > .bookmark-container { + flex-direction: column; + width: 60%; + } + .bookmark-container > .bookmark-set { + width: auto; + margin: 1em 0em; + } +} + +.bookmark-set { + padding: 1em; + background-color: var(--containerBg); + border-radius: 3px; + font-family: "Roboto Mono"; + font-size: 0.85rem; + width: 25%; + height: 12em; + margin: 0em 0.5em; + box-sizing: border-box; +} + +.bookmark-inner-container { + overflow-y: scroll; + height: 80%; + vertical-align: top; + padding-right: 6px; + box-sizing: border-box; + + scrollbar-width: thin; + scrollbar-color: var(--scrollbarColor) #ffffff00; +} + +.bookmark-inner-container::-webkit-scrollbar { + width: 6px; +} +.bookmark-inner-container::-webkit-scrollbar-track { + background: #ffffff00; +} +.bookmark-inner-container::-webkit-scrollbar-thumb { + background-color: var(--scrollbarColor); + border-radius: 6px; + border: 3px solid #ffffff00; +} + +.bookmark-title { + font-size: 1.1rem; + font-weight: 600; + color: var(--fg); + margin: 0em 0em 0.35em 0em; +} +.bookmark { + text-decoration: none; + color: var(--secondaryFg); + display: block; + margin: 0.5em 0em; +} +.bookmark:hover { + color: var(--fg); +}