Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Settings Panel created and made fully functional #35

Merged
merged 5 commits into from
Dec 16, 2020
Merged

Settings Panel created and made fully functional #35

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
a5e0582
Added Settings panel
vinaysrivastava273 Dec 10, 2020
48cf28a
Added Fonts list
vinaysrivastava273 Dec 10, 2020
a2937d0
Made Font list fully functional
vinaysrivastava273 Dec 12, 2020
f793abc
Merge branch 'master' into settings
vinaysrivastava273 Dec 12, 2020
52c9abb
Added Cookies and minimized irregularities
vinaysrivastava273 Dec 14, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
22,367 changes: 22,367 additions & 0 deletions fonts/font_list.json
View file
Open in desktop

Large diffs are not rendered by default.

73 changes: 52 additions & 21 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,32 +8,63 @@
<title>New Tab</title>
</head>
<body>
<div class="date">
<div class="settings">
<ul class="top-level-menu">
<li><a href="#" id="settings">Settings</a>
<ul class="second-level-menu">
<li><a href="user.html">Change Username</a></li>
<li><a href="#" id="color">Background Color</a>
<ul class="bgcolor">
<li><input type="color" id="favcolor" value="#000000"></input></li>
</ul>
</li>
<li>
<select id="third-level-menu">
<option value="12">Clock Format</option>
<option value=12>12 Hour</option>
<option value="24">24 Hour</option>
</select>
</li>
<li><select id="fonts">
<option value="Fredericka the Great">Font Styles</option>
</select>
</li>
</ul>
</li>
</ul>
</div>
<h1 id = "greet"></h1>
<div id="quote"></div>

<form id="search-form" action="http://www.google.com/search" class="searchform" method="get" name="searchform" >
<input id="search" autocomplete="off" name="q" placeholder="Search on Google" required="required" type="text">
<button id="search-btn" type="submit"><img src="assets\images\search_button.svg" width="20px" height="19px"></button>
</form>
<div class="date"></div>
<div style="clear: both;">
<h1 id = "greet"></h1>
<div id="quote"></div>

<div class="links">
<a href="https://www.google.com" class="grid-item"><img src="assets/images/google.svg" class="icon"></a>
<a href="https://www.gmail.com" class="grid-item"><img src="assets/images/gmail.svg" class="icon"></a>
<a href="https://drive.google.com" class="grid-item"><img src="assets/images/drive.svg" class="icon"></a>
<a href="https://www.youtube.com" class="grid-item"><img src="assets/images/youtube.svg" class="icon"></a>
<a href="https://www.facebook.com" class="grid-item"><img src="assets/images/facebook.svg" class="icon"></a>
<!-- <br> -->
<a href="https://www.github.com" class="grid-item"><img src="assets/images/github.svg" class="icon"></a>
<a href="https://www.medium.com" class="grid-item"><img src="assets/images/medium.svg" class="icon"></a>
<a href="https://www.quora.com" class="grid-item"><img src="assets/images/quora.svg" class="icon"></a>
<a href="https://www.amazon.in" class="grid-item"><img src="assets/images/amazon.svg" class="icon"></a>
<a href="https://www.spotify.com" class="grid-item"><img src="assets/images/spotify.svg" class="icon"></a>
</div>
<form id="search-form" action="http://www.google.com/search" class="searchform" method="get" name="searchform" >
<input id="search" autocomplete="off" name="q" placeholder="Search on Google" required="required" type="text">
<button id="search-btn" type="submit"><img src="assets\images\search_button.svg" width="20px" height="19px"></button>
</form>

<div class="links">
<a href="https://www.google.com" class="grid-item"><img src="assets/images/google.svg" class="icon"></a>
<a href="https://www.gmail.com" class="grid-item"><img src="assets/images/gmail.svg" class="icon"></a>
<a href="https://drive.google.com" class="grid-item"><img src="assets/images/drive.svg" class="icon"></a>
<a href="https://www.youtube.com" class="grid-item"><img src="assets/images/youtube.svg" class="icon"></a>
<a href="https://www.facebook.com" class="grid-item"><img src="assets/images/facebook.svg" class="icon"></a>
<!-- <br> -->
<a href="https://www.github.com" class="grid-item"><img src="assets/images/github.svg" class="icon"></a>
<a href="https://www.medium.com" class="grid-item"><img src="assets/images/medium.svg" class="icon"></a>
<a href="https://www.quora.com" class="grid-item"><img src="assets/images/quora.svg" class="icon"></a>
<a href="https://www.amazon.in" class="grid-item"><img src="assets/images/amazon.svg" class="icon"></a>
<a href="https://www.spotify.com" class="grid-item"><img src="assets/images/spotify.svg" class="icon"></a>
</div>
</div>
<script type="text/javascript" src="src/greet.js"></script>
<script type="text/javascript" src="src/cookies.js"></script>
<script type="text/javascript" src="src/clock.js"></script>
<script type="text/javascript" src="fonts/font_list.json"></script>
<script type="text/javascript" src="src/bg-color.js"></script>
<script type="text/javascript" src="src/font_list.js"></script>
<script type="text/javascript" src="src/index.js"></script>

</body>
</html>
5 changes: 5 additions & 0 deletions src/bg-color.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
function color_change(){
let bgcolor = document.getElementById('favcolor').value;
document.getElementsByTagName('body')[0].style.backgroundColor = bgcolor;
return bgcolor;
}
39 changes: 38 additions & 1 deletion src/clock.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -78,11 +78,48 @@ function clock() {

var date = `${date} ${monthWord} ${today.getFullYear()}`;

const time = `${today.getHours()}:${today.getMinutes()}:${today.getSeconds()}`;
const time = time_format();
const dateTime = `${dayWord} &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp ${date} &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp ${time}`;
document.querySelector(".date").innerHTML = dateTime;
document.querySelector(".date").style.fontSize = "1rem";
document.querySelector(".date").style.fontWeight = "50";
document.querySelector(".date").style.marginTop = "25px";
setTimeout(clock, 1000);
}

var format = document.getElementById('third-level-menu');
format.addEventListener('change', timeChange, false);

function timeChange(){
num = format.options[format.selectedIndex].value;
setCookie("time",num,365);
}

function time_format(){
var today = new Date();
var hours = today.getHours();

num = getCookie("time");
if(num==24)
{
var time = today.getHours() + ":" + today.getMinutes() + ":" + today.getSeconds();
}
else if(num==12)
{
if(hours==0)
var time = "12:" + today.getMinutes() + ":" + today.getSeconds() + " AM";

else if(hours<12)
{
var time = today.getHours() + ":" + today.getMinutes() + ":" + today.getSeconds() + " AM";
}

else if(hours>12)
{
var time = today.getHours()-12 + ":" + today.getMinutes() + ":" + today.getSeconds() + " PM";
}
else time = today.getHours() + ":" + today.getMinutes() + ":" + today.getSeconds() + " PM";
}

return time;
}
38 changes: 38 additions & 0 deletions src/cookies.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,38 @@
function setCookie(cname,cvalue,exdays) {
var d = new Date();
d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
var expires = "expires="+d.toUTCString();

document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}

function getCookie(cname) {
var name = cname+"=";
var ca = document.cookie.split(';');

for(i=0;i<ca.length;i++)
{
while (ca[i].charAt(0) == ' ') {
ca[i] = ca[i].substring(1);
}

if (ca[i].indexOf(name) == 0) {
cvalue = ca[i].substring(name.length, ca[i].length);

if(name=="color="){
if(document.getElementById('favcolor')!=null)
document.getElementById('favcolor').value = cvalue;
document.getElementsByTagName('body')[0].style.backgroundColor = cvalue;
}
else if(name=="username=")
return cvalue;

else if(name=="font="){
fontlink(cvalue);
}
else if(name=="time="){
return cvalue;
}
}
}
}
44 changes: 44 additions & 0 deletions src/font_list.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,44 @@
var values = [];

fetch('./fonts/font_list.json')
.then(res => res.json())
.then((out) => {
for(i=0;i<1023;i++)
{
values.push(out.items[i].family);
}
})
.catch(err => { throw err });

var select = document.getElementById('fonts');

function updateFont(){

for (const val of values) {
var option = document.createElement("option");
option.value = val;
option.text = val.charAt(0).toUpperCase() + val.slice(1);
if(select.childElementCount < 1024)
select.appendChild(option);
}

fontFamily = select.options[select.selectedIndex].value;
fontlink(fontFamily);
}

function fontlink(fontFamily){
var link = document.createElement('link');
link.rel = 'preconnect';
link.href = 'https://fonts.gstatic.com';
document.head.appendChild(link);

var familylink = document.createElement('link');
familylink.rel = 'stylesheet';
familylink.href = "https://fonts.googleapis.com/css2?family="+fontFamily+"&display=swap";
document.head.appendChild(familylink);

document.getElementsByTagName('h1')[0].style.fontFamily = fontFamily;
setCookie("font",fontFamily,365);
}

select.addEventListener('click',updateFont,false);
2 changes: 1 addition & 1 deletion src/greet.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ function greet() {
if (document.cookie.length == 0) {
window.open("user.html", "_parent", "", "");
} else {
const name = document.cookie.split("=")[1];
var name = getCookie("username");
const myDate = new Date();
const hrs = myDate.getHours();
let message;
Expand Down
8 changes: 7 additions & 1 deletion src/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,2 +1,8 @@
window.onload = greet();
clock();
getCookie("color");
getCookie("font");
clock();
document.getElementById('favcolor').oninput = function(){
setCookie("color",color_change(),365);
getCookie("color");
}
3 changes: 3 additions & 0 deletions src/user.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
getCookie("color");
getCookie("font");
getCookie("color");
124 changes: 124 additions & 0 deletions stylesheets/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -78,3 +78,127 @@ font-size:16px;
* {
box-sizing: border-box;
}

.top-level-menu
{
list-style: none;
padding: 0;
margin-bottom: 10px;
left: 0;
}

.top-level-menu > li
{
position: relative;
float: left;
height: 40px;
width: 200px;
}

.top-level-menu li:hover > ul
{
/* On hover, display the next level's menu */
display: inline;
transition: all 0.5s ease;
}

/* Menu Link Styles */

.top-level-menu a /* Apply to all links inside the multi-level menu */
{
font-family: inherit;
font-size: large;
color: black;
text-decoration: none;
margin-bottom: 10px;

/* Make the link cover the entire list item-container */
display: block;
line-height: 40px;
cursor: pointer;
}

#settings{
color: white;
}

.second-level-menu
{
position: absolute;
top: 30px;
left: 0;
width: 280px;
list-style: none;
padding: 0;
margin: 10px 0px;
display: none;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}

.second-level-menu > li
{
position: relative;
height: 40px;
background: #f9f9f9;
color: black;
}
.second-level-menu > li:hover
{
background: #ddd;
}

.bgcolor, #third-level-menu{
width: 280px;
height: 40px;
font-size: large;
border: 0px;
text-align: center;
left: 0px;
position: absolute;
top: 0;
right: -150px;
list-style: none;
padding: 0.45rem 4.4rem;
margin: 0;
cursor: pointer;
}

#third-level-menu > option
{
height: 40px;
background: #f9f9f9;
color: black;
position: relative;
border: 0px;
}

.bgcolor:hover , #third-level-menu:hover
{
background: #ddd;
border: 0px;
transition: all 0.5s ease;
}

select {
font-size: large;
padding: 2px 0px;
height: 40px;
border: 0px;
cursor: pointer;
left: 0px;
}

.color:hover > ul{
display: inline;
}

.bgcolor{
padding: 0.45rem;
display: none;
}

.bgcolor:hover{
display: inline;
}
6 changes: 5 additions & 1 deletion user.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,11 +9,15 @@
</head>
<body>
<img src="assets/images/favicon-128x128.png" class="logo">
<h1>What's your name?</h1>
<h1 id="fonts">What's your name?</h1>
<form action="index.html">
<input type="text" name="username" id="usr-input">
<br>
<input type="submit" method="GET" value="submit" id="usr-btn">
</form>
<script type="text/javascript" src="src/cookies.js"></script>
<script type="text/javascript" src="src/bg-color.js"></script>
<script type="text/javascript" src="src/font_list.js"></script>
<script type="text/javascript" src="src/user.js"></script>
</body>
</html>