i think we should be all set now

alm17008 · May 9, 2020 · d14bcdc · d14bcdc
1 parent 9fa480f
commit d14bcdc
Show file tree

Hide file tree

Showing 9 changed files with 346 additions and 0 deletions.
diff --git a/final/css/style.css b/final/css/style.css
diff --git a/final/css/style.css.map b/final/css/style.css.map
diff --git a/final/css/style.sass 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)
diff --git a/final/css/style.sass.map b/final/css/style.sass.map
diff --git a/final/img/favicon.svg b/final/img/favicon.svg
diff --git a/final/img/image.svg b/final/img/image.svg
diff --git a/final/index.html b/final/index.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="css/style.css">
+    <link rel="shortcut icon" href="img/favicon.svg" type="image/x-icon">
+    <title>New tab</title>
+    <link href="https://fonts.googleapis.com/css2?family=Manrope:wght@500;600;700&display=swap" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css?family=YT+Sans:300,400,500,600,700,800,900&display=swap" rel="stylesheet">
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.0.2/anime.min.js"></script>
+</head>
+<body style="transition: all 1s">
+    <div class="container">
+        <article>
+            <div class="tab-row">
+                <a class="tab" id="tod">Time of Day</a>
+                <a class="tab" id="notes">Notes</a>
+            </div>
+            <section id="tod-section" class="hidden">
+                <h1>Good <span id="current-time">morning</span>, <span contenteditable id="name">Your Name Here</span>!</h1>
+                <h3>It is currently <span id="time"></span>.</h3>
+            </section >
+            <!-- <section class="hidden" id="productivity">
+                <div class="">
+                    <a class="tab active" id="twenty-five">25:5</a>
+                    <a class="tab" id="fifty-two">52:17</a>
+                </div>
+                <h1 id="timer">00:00</h1>
+                <button id="start">Start</button>
+                <button id="cancel" class="hidden">Cancel</button>
+            </section> -->
+            <section id="notes-section" class="hidden">
+                <textarea name="notepad" id="notepad" cols="30" rows="10" placeholder="Type anything here, it'll stay right where you leave it!"></textarea>
+            </section>
+        </article>
+    </div>
+    <footer>
+        <a href="" id="unsplash-author">
+            <img src="img/image.svg" alt="" srcset="">
+        </a>
+    </footer>
+    <script src="https://requirejs.org/docs/release/2.3.5/minified/require.js"></script>
+    <script type="module" src="js/main.js"></script>
+</body>
+</html>
diff --git a/final/js/main.js 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);
+
+}
diff --git a/final/manifest.json 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"
+      }
+  }