Skip to content

/ dmd-3475

Permalink
Browse files

i think we should be all set now

  • Loading branch information
Alex Mueller
Alex Mueller committed May 9, 2020
1 parent 9fa480f commit d14bcdc8953fc7b7985559966e14e9648bbaa5b2
Unified Split
Showing with 346 additions and 0 deletions.
  1. +1 −0 final/css/style.css
  2. +1 −0 final/css/style.css.map
  3. +106 −0 final/css/style.sass
  4. +1 −0 final/css/style.sass.map
  5. +1 −0 final/img/favicon.svg
  6. +1 −0 final/img/image.svg
  7. +46 −0 final/index.html
  8. +180 −0 final/js/main.js
  9. +9 −0 final/manifest.json
1 final/css/style.css
View file

Some generated files are not rendered by default. Learn more.

1 final/css/style.css.map
View file

Some generated files are not rendered by default. Learn more.

106 final/css/style.sass
View file
@@ -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)
1 final/css/style.sass.map
View file

Some generated files are not rendered by default. Learn more.

1 final/img/favicon.svg
View file
@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" focusable="false" width="1em" height="1em" style="-ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); transform: rotate(360deg);" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"><g fill="none" stroke="#ffca45" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><path d="M12 1v2"/><path d="M12 21v2"/><path d="M4.22 4.22l1.42 1.42"/><path d="M18.36 18.36l1.42 1.42"/><path d="M1 12h2"/><path d="M21 12h2"/><path d="M4.22 19.78l1.42-1.42"/><path d="M18.36 5.64l1.42-1.42"/></g></svg>
1 final/img/image.svg
View file
@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" focusable="false" width="32px" height="32px" style="-ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); transform: rotate(360deg);" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"><path d="M21 19V5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2zM8.9 13.98l2.1 2.53l3.1-3.99c.2-.26.6-.26.8.01l3.51 4.68a.5.5 0 0 1-.4.8H6.02c-.42 0-.65-.48-.39-.81L8.12 14c.19-.26.57-.27.78-.02z" fill="#fff"/></svg>
46 final/index.html
View file
@@ -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>
180 final/js/main.js
View file
@@ -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);

}
9 final/manifest.json
View file
@@ -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"
}
}

0 comments on commit d14bcdc

Please sign in to comment.
You can’t perform that action at this time.