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" | ||
} | ||
} |