From 63c59e4af8b9043bece3a805bd8b5b4156e911e0 Mon Sep 17 00:00:00 2001 From: Javier Date: Sun, 17 Mar 2024 21:09:04 -0500 Subject: [PATCH] add files --- bookmark.png | Bin 0 -> 5800 bytes css/sidebar.css | 171 +++++++++++++++++++++++++++ css/style.css | 286 +++++++++++++++++++++++++++++++++++++++++++++ index.html | 134 ++++++++++++++++++++++ js/greeting.js | 50 ++++++++ js/header.js | 78 +++++++++++++ js/menu.js | 5 + js/script.js | 299 ++++++++++++++++++++++++++++++++++++++++++++++++ js/theme.js | 117 +++++++++++++++++++ js/weather.js | 111 ++++++++++++++++++ 10 files changed, 1251 insertions(+) create mode 100644 bookmark.png create mode 100644 css/sidebar.css create mode 100644 css/style.css create mode 100644 index.html create mode 100644 js/greeting.js create mode 100644 js/header.js create mode 100644 js/menu.js create mode 100644 js/script.js create mode 100644 js/theme.js create mode 100644 js/weather.js diff --git a/bookmark.png b/bookmark.png new file mode 100644 index 0000000000000000000000000000000000000000..fd3ec045d08445cdd73c7413e01a89754827593f GIT binary patch literal 5800 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 my~EB8%iIStI!$X&;{O3r3)blbBiM}q0000 + + + + Welcome Javier! + + + + + + + +
+
+
+ + + + + + +
+
+

Weather

+

API

+ +

City

+ +
+ + +
+ +
+
+

Greeting

+

Name

+ + +
+
+

Theme

+

Background

+ +

Foreground

+ +

Accent

+ +
+ + +
+
+
+
+
+
+

Howdy, Javier Pacheco.

+
+

+

+
+
+ + +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+ + + + + + + + + + + diff --git a/js/greeting.js b/js/greeting.js new file mode 100644 index 0000000..1c38014 --- /dev/null +++ b/js/greeting.js @@ -0,0 +1,50 @@ +let greeting = document.querySelector('.header__greeting'); +let buttonApplyName = document.getElementById('name_apply'); +let nameInput = document.getElementById('greeting_name'); + +// Greetings +const night = 'Good night'; +const morning = 'Good morning'; +const afternoon = 'Good afternoon'; +const evening = 'Good evening'; + +// Name +if (localStorage.getItem('name') !== null) { + let name = localStorage.getItem('name'); + let greetingName = `${name}.`; + setGreeting(greetingName); + nameInput.placeholder = name; +} else { + let name = 'Javier Pacheco'; + let greetingName = `${name}.` + setGreeting(greetingName); + nameInput.placeholder = name; +} + +buttonApplyName.onclick = () => { + if (nameInput.value !== '') { + let greetingName = `${nameInput.value}.`; + setGreeting(greetingName); + + localStorage.setItem('name', nameInput.value); + + nameInput.placeholder = nameInput.value; + nameInput.value = ''; + nameInput.blur(); + } +}; + +// Hours of the greetings +function setGreeting(greetingName) { + let hour = new Date().getHours(); + + if (hour >= 23 || hour < 6) { + greeting.innerHTML = `${night}, ${greetingName}`; + } else if (hour >= 6 && hour < 12) { + greeting.innerHTML = `${morning}, ${greetingName}`; + } else if (hour >= 12 && hour < 17) { + greeting.innerHTML = `${afternoon}, ${greetingName}`; + } else { + greeting.innerHTML = `${evening}, ${greetingName}`; + } +} diff --git a/js/header.js b/js/header.js new file mode 100644 index 0000000..4f39e00 --- /dev/null +++ b/js/header.js @@ -0,0 +1,78 @@ +let buttonHeader = document.getElementById('chb_header'); +let header = document.querySelector('.header'); +let headerWeather = document.querySelector('.header__weather'); +let headerGreeting = document.querySelector('.header__greeting'); +let icons = document.querySelectorAll('.main a'); + +localStorage.getItem('header') === 'shown' || localStorage.getItem('header') === null ? showHeader() : hideHeader(); + +buttonHeader.onclick = () => buttonHeader.checked ? showHeader() : hideHeader(); + +function showHeader() { + buttonHeader.checked = true; + localStorage.setItem('header', 'shown'); + + for (let e of icons) { + e.classList.remove('big-icons'); + } + + header.style.opacity = '.75'; + header.style.zIndex = '1'; + headerWeather.classList.remove('hide-header-elements'); + headerGreeting.classList.remove('hide-header-elements'); +} + +function hideHeader() { + buttonHeader.checked = false; + localStorage.setItem('header', 'hidden'); + + for (let e of icons) { + e.classList.add('big-icons'); + } + + header.style.opacity = '0'; + header.style.zIndex = '-1'; +} + +document.addEventListener('keyup', (event) => { + let header = document.querySelector('.header'); + let sidebar = document.querySelector('.sidebar-wrapper'); + let searchForm = document.querySelector('.search-form'); + let searchInput = document.querySelector('.search-form__input'); + + if (searchInput !== document.activeElement && + event.keyCode >= 65 && + event.keyCode <= 90 && + !sidebar.classList.contains('show-sidebar')) { + if (buttonHeader.checked === false) { + header.style.opacity = '.75'; + header.style.zIndex = '1'; + headerWeather.classList.add('hide-header-elements'); + headerGreeting.classList.add('hide-header-elements'); + + for (let e of icons) { + e.classList.remove('big-icons'); + } + } + + header.style.marginBottom = '35px'; + searchForm.classList.add('show-search'); + searchInput.focus(); + searchInput.value = event.key; + } + + if (event.code === 'Escape') { + if (buttonHeader.checked === false) { + header.style.opacity = '0'; + + for (let e of icons) { + e.classList.add('big-icons'); + } + } + + header.style.marginBottom = ''; + searchForm.classList.remove('show-search'); + searchInput.value = ''; + searchInput.blur(); + } +}); \ No newline at end of file diff --git a/js/menu.js b/js/menu.js new file mode 100644 index 0000000..0bd6821 --- /dev/null +++ b/js/menu.js @@ -0,0 +1,5 @@ +let buttonSidebar = document.querySelector('.btn_menu'); +buttonSidebar.onclick = () => { + let sidebar = document.querySelector('.sidebar-wrapper'); + sidebar.classList.toggle('show-sidebar'); +}; \ No newline at end of file diff --git a/js/script.js b/js/script.js new file mode 100644 index 0000000..5d360c7 --- /dev/null +++ b/js/script.js @@ -0,0 +1,299 @@ +/* based on chromium plugin code, adapted by Nibble<.gs@gmail.com> */ +var hint_num_str = ''; +var hint_elems = []; +var hint_open_in_new_tab = false; +var hint_enabled = false; +function hintMode(newtab){ + hint_enabled = true; + if (newtab) { + hint_open_in_new_tab = true; + } else { + hint_open_in_new_tab = false; + } + setHints(); + document.removeEventListener('keydown', initKeyBind, false); + document.addEventListener('keydown', hintHandler, false); + hint_num_str = ''; +} +function hintHandler(e){ + e.preventDefault(); //Stop Default Event + var pressedKey = get_key(e); + if (pressedKey == 'Enter') { + if (hint_num_str == '') + hint_num_str = '1'; + judgeHintNum(Number(hint_num_str)); + } else if (/[0-9]/.test(pressedKey) == false) { + removeHints(); + } else { + hint_num_str += pressedKey; + var hint_num = Number(hint_num_str); + if (hint_num * 10 > hint_elems.length + 1) { + judgeHintNum(hint_num); + } else { + var hint_elem = hint_elems[hint_num - 1]; + if (hint_elem != undefined && hint_elem.tagName.toLowerCase() == 'a') { + setHighlight(hint_elem, true); + } + } + } +} +function setHighlight(elem, is_active) { + if (is_active) { + var active_elem = document.body.querySelector('a[highlight=hint_active]'); + if (active_elem != undefined) + active_elem.setAttribute('highlight', 'hint_elem'); + elem.setAttribute('highlight', 'hint_active'); + } else { + elem.setAttribute('highlight', 'hint_elem'); + } +} +function setHintRules() { + if (document.styleSheets.length < 1) { + var style = document.createElement("style"); + style.appendChild(document.createTextNode("")); + document.head.appendChild(style); + } + var ss = document.styleSheets[0]; + ss.insertRule('a[highlight=hint_elem] {background-color: NULL}', 0); + ss.insertRule('a[highlight=hint_active] {background-color: NULL}', 0); +} +function deleteHintRules() { + var ss = document.styleSheets[0]; + ss.deleteRule(0); + ss.deleteRule(0); +} +function judgeHintNum(hint_num) { + var hint_elem = hint_elems[hint_num - 1]; + if (hint_elem != undefined) { + execSelect(hint_elem); + } else { + removeHints(); + } +} +function execSelect(elem) { + var tag_name = elem.tagName.toLowerCase(); + var type = elem.type ? elem.type.toLowerCase() : ""; + if (tag_name == 'a' && elem.href != '') { + setHighlight(elem, true); + // TODO: ajax,