From d14bcdc8953fc7b7985559966e14e9648bbaa5b2 Mon Sep 17 00:00:00 2001 From: Alex Mueller Date: Fri, 8 May 2020 22:58:02 -0400 Subject: [PATCH] i think we should be all set now --- final/css/style.css | 1 + final/css/style.css.map | 1 + final/css/style.sass | 106 +++++++++++++++++++++++ final/css/style.sass.map | 1 + final/img/favicon.svg | 1 + final/img/image.svg | 1 + final/index.html | 46 ++++++++++ final/js/main.js | 180 +++++++++++++++++++++++++++++++++++++++ final/manifest.json | 9 ++ 9 files changed, 346 insertions(+) create mode 100644 final/css/style.css create mode 100644 final/css/style.css.map create mode 100644 final/css/style.sass create mode 100644 final/css/style.sass.map create mode 100644 final/img/favicon.svg create mode 100644 final/img/image.svg create mode 100644 final/index.html create mode 100644 final/js/main.js create mode 100644 final/manifest.json diff --git a/final/css/style.css b/final/css/style.css new file mode 100644 index 0000000..df1f7c3 --- /dev/null +++ b/final/css/style.css @@ -0,0 +1 @@ +body{margin:0;font-family:"Manrope",sans-serif;font-size:100%;background-size:cover;background-position:center;color:#fff;background-color:#2c2c2c;background-image:linear-gradient(90deg, rgba(0, 0, 0, 0.4)) 0%;transition:background 1s;background-repeat:no-repeat;text-align:center;box-sizing:border-box;font-variant-numeric:tabular-nums}.container{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100vw;height:100vh}article{height:300px}section{display:flex;flex-direction:column;align-items:center;justify-content:center}h1{text-align:center;font-size:2em;margin:0px}h3{margin-top:4px}footer{position:absolute;bottom:12px;display:flex;left:12px;right:12px;justify-content:space-between}#unsplash-author,#color-picker{transition:background .5s ease-in-out;color:#fff !important;display:flex;justify-content:center;align-items:center;width:56px;height:56px;background:rgba(255,255,255,.4);border-radius:50%;backdrop-filter:blur(10px)}#unsplash-author:hover,#color-picker:hover{background:rgba(255,255,255,.6);border-radius:50%}button{border:none;padding:12px;font-family:"Manrope",sans-serif;font-weight:bold;text-transform:uppercase;background:#000;color:#fff;border-radius:8px}.tab{animation:.3s ease both hide reverse .3s;display:inline-block;cursor:pointer;transition:all .3s .1s;outline:0px;padding:12px;font-family:"Manrope",sans-serif;font-weight:bold;text-transform:uppercase;background:none;margin-right:8px;margin-left:8px;border-radius:12px;width:120px}.active{transition:all .3s;background-color:#fff;color:#000}.tab-row{margin-bottom:24px}.hidden{display:none}textarea{min-width:250px;min-height:100px;max-width:75vw;max-height:40vh;transition:border .2s;background-color:rgba(255,255,255,.2);color:#fff;border-radius:8px;padding:8px;border:2px solid rgba(255,255,255,.6);font-family:"Manrope";backdrop-filter:blur(25px)}textarea::placeholder{color:#fff;transition:all .2s}textarea:focus{outline:none !important;border:2px solid #fff}/*# sourceMappingURL=style.css.map */ diff --git a/final/css/style.css.map b/final/css/style.css.map new file mode 100644 index 0000000..e7978fd --- /dev/null +++ b/final/css/style.css.map @@ -0,0 +1 @@ +{"version":3,"sourceRoot":"","sources":["style.sass"],"names":[],"mappings":"AAAA,KACI,SACA,iCACA,eACA,sBACA,2BACA,WACA,yBACA,+DACA,yBACA,4BACA,kBACA,sBACA,kCACJ,WACI,aACA,sBACA,mBACA,uBACA,YACA,aACJ,QACI,aACJ,QACI,aACA,sBACA,mBACA,uBACJ,GACI,kBACA,cACA,WACJ,GACI,eACJ,OACI,kBACA,YACA,aACA,UACA,WACA,8BACJ,+BACI,sCACA,sBACA,aACA,uBACA,mBACA,WACA,YACA,gCACA,kBACA,2BACA,2CACI,gCACA,kBACR,OACI,YACA,aACA,iCACA,iBACA,yBACA,gBACA,WACA,kBACJ,KACI,yCACA,qBACA,eACA,uBACA,YACA,aACA,iCACA,iBACA,yBACA,gBACA,iBACA,gBACA,mBACA,YACJ,QACI,mBACA,sBACA,WACJ,SACI,mBACJ,QACI,aACJ,SACI,gBACA,iBACA,eACA,gBACA,sBACA,sCACA,WACA,kBACA,YACA,sCACA,sBACA,2BACA,sBACI,WACA,mBACJ,eACI,wBACA","file":"style.css"} \ No newline at end of file diff --git a/final/css/style.sass b/final/css/style.sass new file mode 100644 index 0000000..07607ff --- /dev/null +++ b/final/css/style.sass @@ -0,0 +1,106 @@ +body + margin: 0 + font-family: 'Manrope', sans-serif + font-size: 100% + background-size: cover + background-position: center + color: white + background-color: #2c2c2c + background-image: linear-gradient(90deg, rgba(0, 0, 0, 0.4)) 0% + transition: background 1s + background-repeat: no-repeat + text-align: center + box-sizing: border-box + font-variant-numeric: tabular-nums +.container + display: flex + flex-direction: column + align-items: center + justify-content: center + width: 100vw + height: 100vh +article + height: 300px +section + display: flex + flex-direction: column + align-items: center + justify-content: center +h1 + text-align: center + font-size: 2em + margin: 0px +h3 + margin-top: 4px +footer + position: absolute + bottom: 12px + display: flex + left: 12px + right: 12px + justify-content: space-between +#unsplash-author, #color-picker + transition: background .5s ease-in-out + color: white !important + display: flex + justify-content: center + align-items: center + width: 56px + height: 56px + background: rgba(255,255,255, .4) + border-radius: 50% + backdrop-filter: blur(10px) + &:hover + background: rgba(255,255,255, .6) + border-radius: 50% +button + border: none + padding: 12px + font-family: 'Manrope', sans-serif + font-weight: bold + text-transform: uppercase + background: #000000 + color: #fff + border-radius: 8px +.tab + animation: .3s ease both hide reverse .3s + display: inline-block + cursor: pointer + transition: all .3s .1s + outline: 0px + padding: 12px + font-family: 'Manrope', sans-serif + font-weight: bold + text-transform: uppercase + background: none + margin-right: 8px + margin-left: 8px + border-radius: 12px + width: 120px +.active + transition: all .3s + background-color: white + color: #000 +.tab-row + margin-bottom: 24px +.hidden + display: none +textarea + min-width: 250px + min-height: 100px + max-width: 75vw + max-height: 40vh + transition: border .2s + background-color: rgba(255,255,255,.2) + color: white + border-radius: 8px + padding: 8px + border: 2px solid rgba(255, 255, 255, .6) + font-family: 'Manrope' + backdrop-filter: blur(25px) + &::placeholder + color: white + transition: all .2s + &:focus + outline: none !important + border: 2px solid rgba(255, 255, 255, 1) \ No newline at end of file diff --git a/final/css/style.sass.map b/final/css/style.sass.map new file mode 100644 index 0000000..0502113 --- /dev/null +++ b/final/css/style.sass.map @@ -0,0 +1 @@ +{"version":3,"sourceRoot":"","sources":["style.css"],"names":[],"mappings":"AAAA;EACE;EACA;;;AAGF","file":"style.sass"} \ No newline at end of file diff --git a/final/img/favicon.svg b/final/img/favicon.svg new file mode 100644 index 0000000..6ebbcf1 --- /dev/null +++ b/final/img/favicon.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/final/img/image.svg b/final/img/image.svg new file mode 100644 index 0000000..f411927 --- /dev/null +++ b/final/img/image.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/final/index.html b/final/index.html new file mode 100644 index 0000000..d3f9b1a --- /dev/null +++ b/final/index.html @@ -0,0 +1,46 @@ + + + + + + + + New tab + + + + + +
+
+
+ Time of Day + Notes +
+ + + +
+
+ + + + + \ No newline at end of file diff --git a/final/js/main.js b/final/js/main.js new file mode 100644 index 0000000..3d23101 --- /dev/null +++ b/final/js/main.js @@ -0,0 +1,180 @@ +function $(query) { + return document.querySelector(query) +} + +//Mapping time to text +var currentTod = $('#current-time'); +var docTitle = $('title'); +var date = new Date(); +var hour = date.getHours(); +var humanTime; +if (hour > 20 || hour <= 6) humanTime = "night"; +else if (hour > 17) humanTime = "evening"; +else if (hour > 12) humanTime = "afternoon"; +else if (hour > 6) humanTime = "morning"; +currentTod.innerHTML = humanTime; +//docTitle.innerHTML = 'New tab: Good ' + humanTime +'!'; +// Current Time +var time = $('#time') +function addZero(i) { + if (i < 10) { + i = "0" + i; + } + return i; + } + +function setTime() { + var d = new Date(); + var h = d.getHours(); + var amPm = 'AM' + if (h == 0) h = 12; + if (h >= 12) amPm = "PM" + if (h > 12) h -= 12; + var m = addZero(d.getMinutes()); + var s = addZero(d.getSeconds()); + time.innerHTML = h + ":" + m + ' ' + amPm; +} +setTime(); +var currentTime = setInterval(setTime, 1000) +// Unsplash Fun Times +var background = $('body'); +var imageCred = $('#unsplash-author') +function getBg() { + fetch(`https://source.unsplash.com/1600x900/?${humanTime}`) + .then((response) => { + background.style.backgroundImage = `linear-gradient(90deg, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0.4) 100%),url('${response.url}')`; + imageCred.href = response.url; + }) +} +getBg(); +//saving name to local storage +var name = $('#name'); +name.addEventListener('input', setName) +function setName(e) { + let userName = e.target.textContent + localStorage.setItem('name', userName) +} +var lsName = localStorage.getItem('name') +if (lsName) name.innerHTML = lsName; + +// Radio Button +var page; +var tod = $('#tod'); +var todSection = $('#tod-section') +var prod = $('#prod') +var prodSection = $('#productivity') +var notes = $('#notes') +var notesSection = $('#notes-section') +//var twentyFive = $('#twenty-five'); +//var fiftyTwo = $('#fifty-two') +tod.addEventListener('click', switchTabs) +//prod.addEventListener('click', switchTabs) +notes.addEventListener('click', switchTabs) +//twentyFive.addEventListener('click', switchTabs) +//fiftyTwo.addEventListener('click', switchTabs) +$(`#${localStorage.getItem('activeTab')}`).classList.add('active') +$(`#${localStorage.getItem('activeTab')}-section`).classList.remove('hidden') +function switchTabs(e) { + let id = e.srcElement.id + if (id == 'tod') { + tod.classList.add('active') + todSection.classList.remove('hidden') + //prod.classList.remove('active') + //prodSection.classList.add('hidden') + notes.classList.remove('active') + notesSection.classList.add('hidden') + localStorage.setItem('activeTab', 'tod') + } + // else if (id == 'prod') { + // prod.classList.add('active') + // prodSection.classList.remove('hidden') + // tod.classList.remove('active') + // todSection.classList.add('hidden') + // notes.classList.remove('active') + // notesSection.classList.add('hidden') + // } + else if (id == "notes") { + tod.classList.remove('active') + todSection.classList.add('hidden') + notes.classList.add('active') + notesSection.classList.remove('hidden') + localStorage.setItem('activeTab', 'notes') + } + +} + +// Productivity timer +// var timer = $('#timer') +// var timerRunning = localStorage.getItem('timerRunning'); +// console.log(timerRunning); +// var workPeriod = localStorage.getItem('workPeriod'); +// var breakPeriod = localStorage.getItem('breakPeriod') +// var timerInterval; +// function startTimer(work, rest) { +// console.log('run'); +// startButton.disabled = true; +// startButton.classList.add('hidden'); +// cancelButton.classList.remove('hidden'); +// if (localStorage.timerRunning == true) { +// setInterval(function() { +// var timeRemaining = localStorage.getItem('endTime') - new Date(); +// console.log(timeRemaining); +// console.log(localStorage.endTime) +// console.log('first'); + +// if (timeRemaining >= 0) { +// console.log('herefirst'); + +// timer.innerText = Math.floor(timeRemaining / 60000) + ':' + ((timeRemaining % 60000) / 1000).toFixed(0); +// } else { +// clearInterval(); +// } +// }, 1000) +// } else { +// localStorage.setItem('timerRunning', true); +// let endTime = +new Date() + (work*60000); +// console.log(endTime); +// console.log('second'); +// localStorage.setItem('workPeriod', work) +// localStorage.setItem('breakPeriod', rest) +// localStorage.setItem('endTime', endTime) +// timerInterval = setInterval(function() { +// var timeRemaining = localStorage.getItem('endTime') - new Date(); +// console.log(timeRemaining); + +// if (timeRemaining >= 0) { +// console.log('here'); +// timer.innerText = Math.floor(timeRemaining / 60000) + ':' + ((timeRemaining % 60000) / 1000).toFixed(0); +// } else { +// clearInterval(timerInterval); +// } +// }, 1000) +// } +// } +// function checkTimer() { +// if (localStorage.timerRunning == true) startTimer(workPeriod, breakPeriod); +// } +// function cancelTimer() { +// localStorage.clear('endTime') +// localStorage.timerRunning = false; +// clearInterval(timerInterval); +// startButton.classList.remove('hidden'); +// startButton.disabled = false; +// cancelButton.classList.add('hidden'); +// } +// var startButton = $('#start') +// var cancelButton = $('#cancel') +// startButton.addEventListener('click', function() {startTimer(52,17)}) +// cancelButton.addEventListener('click', cancelTimer) +// checkTimer(); + +// Notepad +var notepad = $('textarea') +notepad.addEventListener('input', saveNotes) +var lsNotes = localStorage.getItem('notes') +if (lsNotes) notepad.innerHTML = lsNotes; +function saveNotes(e) { + console.log(e); + localStorage.setItem('notes', e.target.value); + +} \ No newline at end of file diff --git a/final/manifest.json b/final/manifest.json new file mode 100644 index 0000000..c881f31 --- /dev/null +++ b/final/manifest.json @@ -0,0 +1,9 @@ +{ + "name": "Simple Welcome Page", + "version": "1.0", + "description": "A new tab page containing the current time and a notepad.", + "manifest_version": 2, + "chrome_url_overrides" : { + "newtab": "index.html" + } + } \ No newline at end of file