Skip to content

Instantly share code, notes, and snippets.

@vikwilliamson

vikwilliamson/index.html

Last active May 28, 2019 03:56
Show Gist options
  • Save vikwilliamson/9e26ae2290aaa521960c7fd04a43bdaf to your computer and use it in GitHub Desktop.
Save vikwilliamson/9e26ae2290aaa521960c7fd04a43bdaf to your computer and use it in GitHub Desktop.
Download ZIP
Voyage-9 Solo Project
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>New Tab - Initab</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="container-fluid" id="main">
<div class="row">
<div class="col-2" id="sidebar">
<p class="title" id="settings"> <i class="fas fa-wrench"></i> SETTINGS</p>
<p class="title" id="gists"> <i class="fas fa-code"></i> GISTS</p>
<p class="title" id="stack"> <i class="fab fa-stack-overflow"></i> STACK OVERFLOW</p>
<p class="title" id="trending"> <i class="fas fa-chart-line"></i> TRENDING</p>
<p class="title" id="scratch"> <i class="fas fa-pen-square"></i> SCRATCHPAD</p>
<p class="title" id="play"> <i class="far fa-lightbulb"></i> PLAYGROUND</p>
<p class="title" id="help"> <i class="fas fa-question"></i> HELP/INTRO</p>
</div>
<div class="col-2" id="reddit">
<p class="title"> <i class="fab fa-reddit"></i> POPULAR ON R/JAVASCRIPT </p>
<p class="js-content">The revolutionary project management tool is here and it’s visual. Start Your Free Trial Now.</p>
<p class="js-content">WebAssembly at eBay: A Real-World Use Case (Barcode scanning with WASM)</p>
<p class="js-content">I wrote a HTTP client for micro frontend architecture. Now we started to use it on every Node.js project.</p>
<p class="js-content">Fake English-like word generator JavaScript/TypeScript</p>
<p class="js-content">The revolutionary project management tool is here and it’s visual. Start Your Free Trial Now.</p>
<p class="js-content">The revolutionary project management tool is here and it’s visual. Start Your Free Trial Now.</p>
</div>
<div class="col-6" id="javascript">
<p class="title"> <i class="far fa-clock"></i> RELEVANT JAVASCRIPT HISTORY </p>
<p class="center-content"><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/split">String.prototype.split() - JavaScript | MDN</a></p>
<p class="center-content"><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort">Array.prototype.sort() - JavaScript | MDN</a></p>
<p class="center-content"><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/shift">Array.prototype.shift() - JavaScript | MDN</a></p>
<p class="center-content"><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/endsWith">String.prototype.endsWith() - JavaScript | MDN</a></p><
<p class="center-content"><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/substring">String.prototype.substring() - JavaScript | MDN</a></p>
<hr/ >
<p class="time"><span id="time" /></p>
<p class="dateee"> <span id="datetime" class="dateee"></span></p>
</div>
<div class="col-2" id="github">
<p class="title"> <i class="fab fa-github-alt"></i> GITHUB ISSUES HISTORY </p>
<p class="gitlab">switch to gitlab</p>
<p class="git-content"><a href="https://www.github.com" id="issues">ISSUES</a> <a href="https://www.github.com" id="pullrequests">PULL REQUESTS</a>
<div class="git-issues">
<p class="repo">Repo: vikwilliamson/git-slideshow</p>
<p class="issueNumber">Issue #2</p>
<p class="js-content">Preparing Your Project For Git</p>
</div>
<div class="git-issues">
<p class="repo">Repo: vikwilliamson/git-slideshow</p>
<p class="issueNumber">Issue #1</p>
<p class="js-content">Planning the upload to Github</p>
</div>
<div class="git-issues">
<p class="repo">Repo: vikwilliamson/git-slideshow</p>
<p class="issueNumber">Issue #3</p>
<p class="js-content">Your first contribution</p>
</div>
<div class="git-issues">
<p class="repo">Repo: vikwilliamson/git-slideshow</p>
<p class="issueNumber">Issue #3</p>
<p class="js-content">Your first contribution</p>
</div>
<div class="git-issues">
<p class="repo">Repo: vikwilliamson/git-slideshow</p>
<p class="issueNumber">Issue #3</p>
<p class="js-content">Your first contribution</p>
</div>
</div>
</div>
</div>
</body>
</html>
Raw
script.js
function updateTime() {
var currentTime = new Date();
var hours = currentTime.getHours();
var minutes = currentTime.getMinutes();
var seconds = currentTime.getSeconds();
if (minutes < 10){
minutes = "0" + minutes;
}
if (seconds < 10){
seconds = "0" + seconds;
}
var v = hours + ":" + minutes + ":" + seconds + " ";
if(hours > 11){
v+="PM";
} else {
v+="AM"
}
setTimeout("updateTime()",1000);
document.getElementById('time').innerHTML=v;
}
updateTime();
var dt = new Date();
document.getElementById("datetime").innerHTML = dt.toLocaleDateString();
Raw
style.css
@import url('https://fonts.googleapis.com/css?family=Inconsolata&display=swap');
body
{
background-color: #212529;}
.title
{
color: #8be9fd;
font-family: 'Inconsolata', monospace;
font-size: 16px;
text-align: center;
}
.js-content
{
color: #fff;
font-family: 'Inconsolata', monospace;
font-size: 16px;
text-align: center;
}
.center-content
{
color: #6272A4;
font-family: 'Inconsolata', monospace;
font-size: 16px;
text-align: center;
}
.git-content
{
text-align: center;
}
.gitlab
{
color: #6272A4;
font-size: 12px;
text-align: center;
margin-top: -15px;
}
.time
{
color: #6272A4;
font-size: 120px;
font-family: Helvetica;
text-align: center;
}
a
{
color: #6272A4;
}
hr
{
background-color: #6c757d;
}
#main
{
background-color: #6c757d;
}
#sidebar
{
height: 100%;
}
#settings
{
}
#gists
{
color: #28a745;
}
#stack
{
color: #fd7e14;
}
#trending
{
color: #e83e8c;
}
#scratch
{
color: #6f42c1;
}
#play
{
color: #fff;
}
#help
{
color: #ffc107;
}
#reddit
{
background-color: #212529;
overflow-y: scroll;
height:100%;
}
#javascript
{
background-color: #212529;
color: #fff;
}
#github
{
background-color: #212529;
overflow-y: scroll;
height:100%;
}
#issues
{
font-family: Helvetica;
font-size: 13px;
color: #ffc107;
}
#pullrequests
{
font-family: Helvetica;
font-size: 13px;
color: #e83e8c;
}
.git-issues
{
margin: 20px 0px 20px 0px;
}
.issueNumber
{
color: #ffc107;
margin: 0px 0px 0px 0px;
text-align: center;
}
.repo
{
color: #6272A4;
text-align: center;
}
.dateee
{
text-align: center;
font-size: 20px;
font-family: Helvetica;
color: #6272A4;
}
Raw
styles
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.min.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment