diff options
| -rw-r--r-- | .gitignore | 1 | ||||
| -rw-r--r-- | favicon.ico | bin | 0 -> 318 bytes | |||
| -rw-r--r-- | index.html | 106 | ||||
| -rw-r--r-- | link-manager.js | 8 | ||||
| -rw-r--r-- | search-manager.js | 11 | ||||
| -rw-r--r-- | styles.css | 93 | ||||
| -rw-r--r-- | template-config.js | 12 | ||||
| -rw-r--r-- | weather-manager.js | 37 |
8 files changed, 268 insertions, 0 deletions
diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..a2d72a2 --- /dev/null +++ b/.gitignore @@ -0,0 +1 @@ +config.js
\ No newline at end of file diff --git a/favicon.ico b/favicon.ico Binary files differnew file mode 100644 index 0000000..b0f91e4 --- /dev/null +++ b/favicon.ico diff --git a/index.html b/index.html new file mode 100644 index 0000000..70ae21e --- /dev/null +++ b/index.html @@ -0,0 +1,106 @@ +<!doctype html> +<html lang="en"> + +<head> + <meta charset="UTF-8"> + <link rel="stylesheet" href="styles.css"> + <title>New Tab</title> +</head> + +<body> + <h1></h1> + <span class="search"><input id="searchInput" placeholder="Search..."><button id="searchBtn">Go</button></span> + <div class="items"> + <a class="item" href="https://budget.marks.kitchen"> + <span class="icon">đ°</span>BUDGET + </a> + <a class="item" id="calendar"> + <span class="icon">đ
</span>CALENDAR + </a> + <a class="item" id="filefeed"> + <span class="icon">đī¸</span>FILE FEED + </a> + <a class="item" id="files"> + <span class="icon">đ</span>FILES + </a> + <a class="item" href="https://fosstodon.org"> + <span class="icon">#ī¸âŖ</span>FOSSTODON + </a> + <a class="item" id="gitea"> + <span class="icon">đž</span>GITEA + </a> + <a class="item" id="rss"> + <span class="icon">đ°</span>RSS + </a> + <a class="item" id="rssvideo"> + <span class="icon">đē</span>RSS VIDEO + </a> + <a class="item" href="https://news.ycombinator.com/"> + <span class="icon">đąâđģ</span>HN + </a> + <a class="item" id="wiki"> + <span class="icon">đ</span>WIKI + </a> + <a class="item" id="wunderground"> + <span class="icon">đŠī¸</span>WUNDERGROUND + </a> + <a class="item" href="https://www.youtube.com/feed/subscriptions"> + <span class="icon">đŊī¸</span>YOUTUBE + </a> + </div> + <table class="weather"> + <tr> + <td rowspan="2"> + <image id="weatherIcon"></image> + </td> + <td>Temp</td> + <td>Humid</td> + <td>Feels</td> + <td>UVI</td> + </tr> + <tr> + <td id="weatherTemp"></td> + <td id="weatherHumid"></td> + <td id="weatherFeels"></td> + <td id="weatherUVI"></td> + </tr> + </table> + <table class="forecast"> + <tr> + <th id="day1">Tomorrow</th> + <th id="day2">The Next Day</th> + <th id="day3">The Day After That</th> + </tr> + <tr> + <image id="day1icon"></image> + <image id="day2icon"></image> + <image id="day3icon"></image> + </tr> + <tr> + <td id="day1high"></td> + <td id="day2high"></td> + <td id="day3high"></td> + </tr> + <tr> + <td id="day1low"></td> + <td id="day2low"></td> + <td id="day3low"></td> + </tr> + <tr> + <td id="day1pop"></td> + <td id="day2pop"></td> + <td id="day3pop"></td> + </tr> + <tr> + <td id="day1desc"></td> + <td id="day2desc"></td> + <td id="day3desc"></td> + </tr> + </table> + <script src="config.js"></script> + <script src="link-manager.js"></script> + <script src="weather-manager.js"></script> + <script src="search-manager.js"></script> +</body> + +</html>
\ No newline at end of file diff --git a/link-manager.js b/link-manager.js new file mode 100644 index 0000000..f41be2b --- /dev/null +++ b/link-manager.js @@ -0,0 +1,8 @@ +document.getElementById("wiki").href = `${WIKI_URL}`; +document.getElementById("rss").href = `${RSS_URL}`; +document.getElementById("rssvideo").href = `${RSS_VIDEO_URL}`; +document.getElementById("gitea").href = `${GITEA_URL}`; +document.getElementById("files").href = `${FILES_URL}`; +document.getElementById("filefeed").href = `${FILE_FEED_URL}`; +document.getElementById("calendar").href = `${CALENDAR_URL}`; +document.getElementById("wunderground").href = `https://www.wunderground.com/forecast/${WUNDERGROUND_STATION}`
\ No newline at end of file diff --git a/search-manager.js b/search-manager.js new file mode 100644 index 0000000..6823608 --- /dev/null +++ b/search-manager.js @@ -0,0 +1,11 @@ +document.getElementById("searchInput").addEventListener("keyup", function (event) { + if (event.keyCode === 13) { + event.preventDefault(); + document.getElementById("searchBtn").click(); + } +}); +document.getElementById("searchBtn").addEventListener("click", function (event) { + console.log("t"); + let text = document.getElementById("searchInput").value; + window.location.href = "https://duckduckgo.com/?q=" + text; +});
\ No newline at end of file diff --git a/styles.css b/styles.css new file mode 100644 index 0000000..2a1c06d --- /dev/null +++ b/styles.css @@ -0,0 +1,93 @@ +body { + width: 80%; + margin-left: 10%; + background-color: #333; +} + +.items { + display: flex; + flex-wrap: wrap; +} + +a.item, +a.item:visited { + color: #ddd; + display: block; + font-size: 24pt; + margin-top: 10px; + margin-left: 10px; + border: 1px solid #ddd; + padding: 10px; + text-decoration: none; + min-width: 10em; + min-height: 2em; + text-align: center; + line-height: 2em; + flex-grow: 1; + box-shadow: 0 5px #999; +} + +a:hover, +a:hover:visited { + background-color: #222; +} + +a:active { + transform: translateY(4px); + box-shadow: 0 1px #666; +} + +span.search { + width: 100%; + display: flex; +} + +span.icon { + margin-right: 10px; +} + +input { + height: 48px; + font-size: 28px; + flex-grow: 4; + margin-left: 10px; +} + +button { + height: 48px; + font-size: 28px; + margin-left: 20px; + flex-grow: 1; +} + +.weather { + color: #fff; + text-align: center; + font-size: 28px; + line-height: 50px; + text-align: center; +} + +.weather td { + width: 200px; +} + +#weatherIcon { + width: 100px; +} +.forecast{ + color: #fff; + text-align: center; + line-height: 50px; + text-align: center; +} +.forecast th, .forecast td { + border: 1px solid white; + margin: 0px; +} +.forecast th { + font-size: 28px; +} +.forecast td { + font-size: 16px; +}
\ No newline at end of file diff --git a/template-config.js b/template-config.js new file mode 100644 index 0000000..a69143b --- /dev/null +++ b/template-config.js @@ -0,0 +1,12 @@ +const OPEN_WEATHER_API_KEY = undefined; +const LAT = undefined; +const LON = undefined; +const WUNDERGROUND_STATION = undefined; +const WIKI_URL = undefined; +const RSS_URL = undefined; +const RSS_VIDEO_URL = undefined; +const GITEA_URL = undefined; +const FILES_URL = undefined; +const FILE_FEED_URL = undefined; +const CALENDAR_URL = undefined; +const WEATHER_UNITS = "imperial"
\ No newline at end of file diff --git a/weather-manager.js b/weather-manager.js new file mode 100644 index 0000000..941c8cc --- /dev/null +++ b/weather-manager.js @@ -0,0 +1,37 @@ +function loadWeather() { + let data = JSON.parse(window.localStorage.weather); + let temp = data.current.temp; + let humid = data.current.humidity; + let feels_like = data.current.feels_like; + let uvi = data.current.uvi; + let desc = data.current.weather[0].description; + + document.getElementById("weatherTemp").innerHTML = `${temp}°`; + document.getElementById("weatherFeels").innerHTML = `${feels_like}°`; + document.getElementById("weatherHumid").innerHTML = `${humid}%`; + document.getElementById("weatherUVI").innerHTML = `${uvi}`; + + let icon = `https://openweathermap.org/img/wn/${data.current.weather[0].icon}@2x.png` + let icon_el = document.getElementById("weatherIcon") + icon_el.src = icon; + + for(var i = 1; i <= 3; i++){ + document.getElementById(`day${i}icon`).src + document.getElementById(`day${i}high`).innerHTML = `${data.daily[i].temp.max}°` + document.getElementById(`day${i}low`).innerHTML = `${data.daily[i].temp.min}°` + document.getElementById(`day${i}pop`).innerHTML = `${data.daily[i].pop * 100}%` + document.getElementById(`day${i}desc`).innerHTML = data.daily[i].weather.reduce( (acc, el) => { + if(acc.length == 0) { return el.description } + else { return acc + " then " + el.description} + }, "") + } +} +if(!window.localStorage.weather){ + fetch(`https://api.openweathermap.org/data/2.5/onecall?lat=${LAT}&lon=${LON}&APPID=${OPEN_WEATHER_API_KEY}&units=${WEATHER_UNITS}&exclude=hourly,minutely`) + .then(response => response.json()) + .then(data => { + console.log(data) + window.localStorage.weather = JSON.stringify(data); + }); +} +loadWeather()
\ No newline at end of file |