Permalink
This commit does not belong to any branch on this respository, and may belong to a fork outside of the repository.
Showing
with
346 additions
and 0 deletions.
- +1 −0 final/css/style.css
- +1 −0 final/css/style.css.map
- +106 −0 final/css/style.sass
- +1 −0 final/css/style.sass.map
- +1 −0 final/img/favicon.svg
- +1 −0 final/img/image.svg
- +46 −0 final/index.html
- +180 −0 final/js/main.js
- +9 −0 final/manifest.json
@@ -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) |
@@ -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> |
@@ -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> |
@@ -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> |
@@ -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); | |||
|
|||
} |
@@ -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" | |||
} | |||
} |