mirror of
https://github.com/bckelley/Web-Browser-Homepage.git
synced 2026-08-24 03:24:13 -05:00
Commit project
This commit is contained in:
DrElyk
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
@@ -0,0 +1,54 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<!-- Developed by Kyle Capehart -->
|
||||||
|
|
||||||
|
<!-- Linked to styleHomepage.css -->
|
||||||
|
<!-- Linked to Roboto font on Google Font -->
|
||||||
|
|
||||||
|
<!-- TODO: Make the background image change every time it opens -->
|
||||||
|
|
||||||
|
<html>
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<Title>Homepage</Title>
|
||||||
|
<link href = "styleHomepage.css" type = "text/css" rel = "stylesheet">
|
||||||
|
<link href = "https://fonts.googleapis.com/css?family=Roboto:400,700" rel = "stylesheet">
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<div id = "clock">
|
||||||
|
<script src = "jquery-3.1.1.js"></script>
|
||||||
|
<script src = "clock.js"></script>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class = "boxContainer">
|
||||||
|
<div id = "twitch" class = "boxes">
|
||||||
|
<a href = "https://www.twitch.tv/directory">
|
||||||
|
<img src = "Pictures\twitch.png" alt = "Twitch"/>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id = "youtube" class = "boxes">
|
||||||
|
<a href = "https://www.youtube.com/feed/subscriptions">
|
||||||
|
<img src = "Pictures\youtube.png" alt = "Youtube"/>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id = "netflix" class = "boxes">
|
||||||
|
<a href = "https://www.netflix.com/browse">
|
||||||
|
<img src = "Pictures\netflix.png" alt = "Netflix"/>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id = "reddit" class = "boxes">
|
||||||
|
<a href = "https://www.reddit.com/">
|
||||||
|
<img src = "Pictures\reddit.png" alt = "Reddit"/>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id = "amazon" class = "boxes">
|
||||||
|
<a href = "https://smile.amazon.com/">
|
||||||
|
<img src = "Pictures\amazon.png" alt = "Amazon"/>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</html>
|
||||||
@@ -0,0 +1,56 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<!-- Developed by Kyle Capehart -->
|
||||||
|
|
||||||
|
<!-- Linked to styleHomepage.css -->
|
||||||
|
<!-- Linked to Roboto font on Google Font -->
|
||||||
|
|
||||||
|
<!-- TODO: Make the background image change every time it opens -->
|
||||||
|
|
||||||
|
<html>
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<Title>Homepage</Title>
|
||||||
|
<link href = "styleHomepage.css" type = "text/css" rel = "stylesheet">
|
||||||
|
<link href = "https://fonts.googleapis.com/css?family=Roboto:400,700" rel = "stylesheet">
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<div id = "clock">
|
||||||
|
<script src = "jquery-3.1.1.js"></script>
|
||||||
|
<script src = "clock.js"></script>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class = "boxContainer">
|
||||||
|
<div id = "innerBox">
|
||||||
|
<div id = "twitch" class = "boxes">
|
||||||
|
<a href = "https://www.twitch.tv/directory">
|
||||||
|
<img src = "Pictures\twitch.png" alt = "Twitch"/>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id = "youtube" class = "boxes">
|
||||||
|
<a href = "https://www.youtube.com/feed/subscriptions">
|
||||||
|
<img src = "Pictures\youtube.png" alt = "Youtube"/>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id = "netflix" class = "boxes">
|
||||||
|
<a href = "https://www.netflix.com/browse">
|
||||||
|
<img src = "Pictures\netflix.png" alt = "Netflix"/>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id = "reddit" class = "boxes">
|
||||||
|
<a href = "https://www.reddit.com/">
|
||||||
|
<img src = "Pictures\reddit.png" alt = "Reddit"/>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id = "amazon" class = "boxes">
|
||||||
|
<a href = "https://smile.amazon.com/">
|
||||||
|
<img src = "Pictures\amazon.png" alt = "Amazon"/>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</html>
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 331 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 18 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 64 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 14 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 24 KiB |
@@ -0,0 +1,6 @@
|
|||||||
|
function main()
|
||||||
|
{
|
||||||
|
alert("My First Jquery Test");
|
||||||
|
}
|
||||||
|
|
||||||
|
$(document).ready(main);
|
||||||
@@ -0,0 +1,13 @@
|
|||||||
|
function background()
|
||||||
|
{
|
||||||
|
var img = $(".boxes > img").each(function() { // for each img found
|
||||||
|
var src = $(this).attr("src"); // get the src
|
||||||
|
var path = src.substring(0,src.lastIndexOf('/')); // get the path from the src
|
||||||
|
var fileName = src.substring(src.lastIndexOf('/')); // and filename
|
||||||
|
var newSrc = path + "/large" + fileName; // re-assemble
|
||||||
|
|
||||||
|
$(this).attr("src",newSrc);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
$(document).ready(background);
|
||||||
@@ -0,0 +1,13 @@
|
|||||||
|
function background()
|
||||||
|
{
|
||||||
|
var img = $(".large-image > img").each(function() { // for each img found
|
||||||
|
var src = $(this).attr("src"); // get the src
|
||||||
|
var path = src.substring(0,src.lastIndexOf('/')); // get the path from the src
|
||||||
|
var fileName = src.substring(src.lastIndexOf('/')); // and filename
|
||||||
|
var newSrc = path+"/large"+fileName; // re-assemble
|
||||||
|
|
||||||
|
$(this).attr("src",newSrc);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
$(document).ready(background);
|
||||||
@@ -0,0 +1,68 @@
|
|||||||
|
function startTime()
|
||||||
|
{
|
||||||
|
// Get time values
|
||||||
|
var timeOfDay = "AM";
|
||||||
|
var today = new Date();
|
||||||
|
var hour = today.getHours();
|
||||||
|
var minute = today.getMinutes();
|
||||||
|
var second = today.getSeconds();
|
||||||
|
|
||||||
|
// Convert the time to a 12 hour clock
|
||||||
|
timeOfDay = convertTimeOfDay(hour, timeOfDay);
|
||||||
|
hour = convertHour(hour);
|
||||||
|
|
||||||
|
// Check time to adjust format
|
||||||
|
minute = checkTime(minute);
|
||||||
|
second = checkTime(second);
|
||||||
|
|
||||||
|
// Put time in the html document
|
||||||
|
document.getElementById('clock').innerHTML =
|
||||||
|
hour + ":" + minute + ":" + second + " " + timeOfDay;
|
||||||
|
|
||||||
|
// Call function again after specified amount of time
|
||||||
|
var t = setTimeout(startTime, 500);
|
||||||
|
}
|
||||||
|
|
||||||
|
function checkTime(i)
|
||||||
|
{
|
||||||
|
// Add a 0 for numbers less than 10
|
||||||
|
if (i < 10)
|
||||||
|
{
|
||||||
|
i = "0" + i
|
||||||
|
}
|
||||||
|
|
||||||
|
return i;
|
||||||
|
}
|
||||||
|
|
||||||
|
function convertTimeOfDay(hour, timeOfDay)
|
||||||
|
{
|
||||||
|
// Make the time AM or PM
|
||||||
|
if (hour > 12)
|
||||||
|
{
|
||||||
|
timeOfDay = "PM";
|
||||||
|
}
|
||||||
|
else
|
||||||
|
{
|
||||||
|
timeOfDay = "AM";
|
||||||
|
}
|
||||||
|
|
||||||
|
return timeOfDay;
|
||||||
|
}
|
||||||
|
|
||||||
|
function convertHour(hour)
|
||||||
|
{
|
||||||
|
// Convert it to a 12 hour clock
|
||||||
|
if (hour == 0)
|
||||||
|
{
|
||||||
|
hour = 12;
|
||||||
|
}
|
||||||
|
if (hour > 12)
|
||||||
|
{
|
||||||
|
hour = hour - 12;
|
||||||
|
}
|
||||||
|
|
||||||
|
return hour;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Start the clock once the page has loaded
|
||||||
|
$(document).ready(startTime);
|
||||||
@@ -0,0 +1,68 @@
|
|||||||
|
function startTime()
|
||||||
|
{
|
||||||
|
// Get time values
|
||||||
|
var timeOfDay = "AM";
|
||||||
|
var today = new Date();
|
||||||
|
var hour = today.getHours();
|
||||||
|
var minute = today.getMinutes();
|
||||||
|
var second = today.getSeconds();
|
||||||
|
|
||||||
|
// Convert the time to a 12 hour clock
|
||||||
|
timeOfDay = convertTimeOfDay(hour, timeOfDay);
|
||||||
|
hour = convertHour(hour);
|
||||||
|
|
||||||
|
// Check time to adjust format
|
||||||
|
minute = checkTime(minute);
|
||||||
|
second = checkTime(second);
|
||||||
|
|
||||||
|
// Put time in the html document
|
||||||
|
document.getElementById('clock').innerHTML =
|
||||||
|
hour + ":" + minute + ":" + second + " " + timeOfDay;
|
||||||
|
|
||||||
|
// Call function again after specified amount of time
|
||||||
|
var t = setTimeout(startTime, 500);
|
||||||
|
}
|
||||||
|
|
||||||
|
function checkTime(i)
|
||||||
|
{
|
||||||
|
// Add a 0 for numbers less than 10
|
||||||
|
if (i < 10)
|
||||||
|
{
|
||||||
|
i = "0" + i
|
||||||
|
}
|
||||||
|
|
||||||
|
return i;
|
||||||
|
}
|
||||||
|
|
||||||
|
function convertTimeOfDay(hour, timeOfDay)
|
||||||
|
{
|
||||||
|
// Make the time AM or PM
|
||||||
|
if (hour > 12)
|
||||||
|
{
|
||||||
|
timeOfDay = "PM";
|
||||||
|
}
|
||||||
|
else
|
||||||
|
{
|
||||||
|
timeOfDay = "AM";
|
||||||
|
}
|
||||||
|
|
||||||
|
return timeOfDay;
|
||||||
|
}
|
||||||
|
|
||||||
|
function convertHour(hour)
|
||||||
|
{
|
||||||
|
// Convert it to a 12 hour clock
|
||||||
|
if (hour == 0)
|
||||||
|
{
|
||||||
|
hour = 12;
|
||||||
|
}
|
||||||
|
if (hour > 12)
|
||||||
|
{
|
||||||
|
hour = hour - 12;
|
||||||
|
}
|
||||||
|
|
||||||
|
return hour;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Start the clock once the page has loaded
|
||||||
|
$(document).ready(startTime);
|
||||||
Vendored
+10220
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,51 @@
|
|||||||
|
/* Linked to Homepage.html */
|
||||||
|
|
||||||
|
*
|
||||||
|
{
|
||||||
|
font-family: Roboto, "Arial Black", sans-serif;
|
||||||
|
line-height: 125%;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
html
|
||||||
|
{
|
||||||
|
background-image: url('Pictures/Qb8b9UC.jpg');
|
||||||
|
background-size: cover;
|
||||||
|
/* background-color: #2d333d; */
|
||||||
|
}
|
||||||
|
|
||||||
|
#clock
|
||||||
|
{
|
||||||
|
font-size: 500%;
|
||||||
|
text-align: center;
|
||||||
|
text-shadow:
|
||||||
|
-1px -1px 0 white,
|
||||||
|
1px -1px 0 white,
|
||||||
|
-1px 1px 0 white,
|
||||||
|
1px 1px 0 white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.boxContainer
|
||||||
|
{
|
||||||
|
margin: auto;
|
||||||
|
margin-top: 27%;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.boxes
|
||||||
|
{
|
||||||
|
width: 13%;
|
||||||
|
height: 13%;
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.boxes img
|
||||||
|
{
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
#twitch
|
||||||
|
{
|
||||||
|
margin-left: 16%;
|
||||||
|
}
|
||||||
@@ -0,0 +1,51 @@
|
|||||||
|
/* Linked to Homepage.html */
|
||||||
|
|
||||||
|
*
|
||||||
|
{
|
||||||
|
font-family: Roboto, "Arial Black", sans-serif;
|
||||||
|
line-height: 125%;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
html
|
||||||
|
{
|
||||||
|
background-image: url('Homepage\Pictures/Qb8b9UC.jpg');
|
||||||
|
background-size: cover;
|
||||||
|
/* background-color: #2d333d; */
|
||||||
|
}
|
||||||
|
|
||||||
|
#clock
|
||||||
|
{
|
||||||
|
font-size: 500%;
|
||||||
|
text-align: center;
|
||||||
|
text-shadow:
|
||||||
|
-1px -1px 0 white,
|
||||||
|
1px -1px 0 white,
|
||||||
|
-1px 1px 0 white,
|
||||||
|
1px 1px 0 white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.boxContainer
|
||||||
|
{
|
||||||
|
margin: auto;
|
||||||
|
margin-top: 27%;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.boxes
|
||||||
|
{
|
||||||
|
width: 13%;
|
||||||
|
height: 13%;
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.boxes img
|
||||||
|
{
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
#twitch
|
||||||
|
{
|
||||||
|
margin-left: 16%;
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user