Skip to content

Add orange color schema #2

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

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
Open

Add orange color schema #2

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
221ebf4
Add orange color
nook24 Feb 22, 2019
42f5ce5
Improve CSS
nook24 Feb 22, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 7 additions & 0 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,10 @@
# [nixie-clock](http://test.bentswanson.com/nixie)

> A JavaScript clock imitating [Nixie tubes](https://en.wikipedia.org/wiki/Nixie_tube).

## Example Yellow (default)
![Yellow Nixie clock](screenshots/yellow.png "Yellow Nixie clock")

## Example Orange
Add the class `clock-orange`.
![Orange Nixie clock](screenshots/orange.png "Orange Nixie clock")
2 changes: 1 addition & 1 deletion index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -89,7 +89,7 @@
</div>
</section>
</div>
<a href="http://bentswanson.com">qwerji</a>
<a class="nixie" href="http://bentswanson.com">qwerji</a>
<script src="nixie.js"></script>
</body>
</html>
95 changes: 95 additions & 0 deletions index_orange.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,95 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>qwerji | nixie clock</title>
<link href="https://fonts.googleapis.com/css?family=Lato:100" rel="stylesheet">
<link rel="stylesheet" href="main.css">
</head>
<body>
<div class="clock clock-orange">
<section class="hours">
<div class="tens">
<p>0</p>
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
<p>6</p>
<p>7</p>
<p>8</p>
<p>9</p>
</div>
<div class="ones">
<p>0</p>
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
<p>6</p>
<p>7</p>
<p>8</p>
<p>9</p>
</div>
</section>
<p class="separator">:</p>
<section class="mins">
<div class="tens">
<p>0</p>
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
<p>6</p>
<p>7</p>
<p>8</p>
<p>9</p>
</div>
<div class="ones">
<p>0</p>
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
<p>6</p>
<p>7</p>
<p>8</p>
<p>9</p>
</div>
</section>
<p class="separator">:</p>
<section class="secs">
<div class="tens">
<p>0</p>
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
<p>6</p>
<p>7</p>
<p>8</p>
<p>9</p>
</div>
<div class="ones">
<p>0</p>
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
<p>6</p>
<p>7</p>
<p>8</p>
<p>9</p>
</div>
</section>
</div>
<a class="nixie" href="http://bentswanson.com">qwerji</a>
<script src="nixie.js"></script>
</body>
</html>
83 changes: 46 additions & 37 deletions main.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,58 +1,67 @@
* {
padding: 0;
margin: 0;
font-family: 'Lato', sans-serif;
font-size: 100px;
}

body {
background: #191919;
}

a {
a.nixie {
position: fixed;
bottom: 0;
left: 0;
font-size: 20px;
text-decoration: none;
margin: 20px;
color: rgba(255,255,255,0.35);
color: rgba(255, 255, 255, 0.35);
transition: .2s ease all;
font-family: 'Lato', sans-serif;
}

a:hover {
a.nixie:hover {
filter: brightness(.75);
}

.clock {
color: rgba(50,50,50,0.35);
color: rgba(50, 50, 50, 0.35);
display: block;
margin: 20vh auto;
text-align: center;
font-family: 'Lato', sans-serif;
font-size: 100px;
}

.clock p.separator,
.clock section {
display: inline-block;
}

.clock section div p {
padding: 0;
margin: 0;
position: absolute;
width: 60px;
text-align: center;
transition: 0.3s ease color, 0.3s ease text-shadow;
}

.clock p.separator {
font-size: 60px;
vertical-align: top;
margin-top: 20px;
}

a.nixie:hover,
.clock p.separator,
.clock section p.active {
color: #FFE548;
text-shadow: 0 0 20px #F58732;
}

.clock-orange p.separator,
.clock-orange section p.active {
color: #feb454;
text-shadow: 0 0 20px #F58732;
}

.clock section div {
display: inline-block;
width: 60px;
height: 120px;
}
.clock p.separator,
.clock section {
display: inline-block;
}
.clock section div p {
position: absolute;
width: 60px;
text-align: center;
transition: 0.3s ease color, 0.3s ease text-shadow;
}
.clock p.separator {
font-size: 60px;
vertical-align: top;
margin-top: 20px;
}
a:hover,
.clock p.separator,
.clock section p.active {
color: #FFE548;
text-shadow: 0px 0px 20px #F58732;
}
.clock section div {
display: inline-block;
width: 60px;
height: 120px;
}
32 changes: 16 additions & 16 deletions nixie.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
const hours = document.querySelector('.hours')
const mins = document.querySelector('.mins')
const secs = document.querySelector('.secs')
const hours = document.querySelector('.hours');
const mins = document.querySelector('.mins');
const secs = document.querySelector('.secs');

function getTime() {
const now = new Date()
const now = new Date();
return {
hours: now.getHours() <= 9 ? `0${now.getHours()}` : `${now.getHours()}`,
mins: now.getMinutes() <= 9 ? `0${now.getMinutes()}` : `${now.getMinutes()}`,
Expand All @@ -12,21 +12,21 @@ function getTime() {
}

function setDigits(section, digit) {
const tens = [...section.children[0].children]
const ones = [...section.children[1].children]
tens.forEach(number => number.classList.remove('active'))
tens[digit[0]].classList.add('active')
ones.forEach(number => number.classList.remove('active'))
ones[digit[1]].classList.add('active')
const tens = [...section.children[0].children];
const ones = [...section.children[1].children];
tens.forEach(number => number.classList.remove('active'));
tens[digit[0]].classList.add('active');
ones.forEach(number => number.classList.remove('active'));
ones[digit[1]].classList.add('active');
}

function tick() {
const time = getTime()
setDigits(hours, time.hours)
setDigits(mins, time.mins)
setDigits(secs, time.secs)
const time = getTime();
setDigits(hours, time.hours);
setDigits(mins, time.mins);
setDigits(secs, time.secs);
}

tick()
tick();

setInterval(tick, 1000)
setInterval(tick, 1000);
Binary file added screenshots/orange.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added screenshots/yellow.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.