Skip to content

Commit b5ea469

Browse files
pradyunsgpradyunsg
authored
Add files via upload
1 parent e5176e2 commit b5ea469

File tree

4 files changed

+384
-0
lines changed

4 files changed

+384
-0
lines changed

‎states.css‎

Lines changed: 186 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,186 @@
1+
/*
2+
The glorious buttons.
3+
*/
4+
button {
5+
position: relative;
6+
7+
width: 100px;
8+
height: 40px;
9+
10+
color: #fbfbfb;
11+
background: linear-gradient(to bottom, #4eb5e5 0%,#389ed5 100%); /* W3C */
12+
13+
border: none;
14+
border-bottom: 4px solid #2b8bc6;
15+
border-radius: 5px;
16+
17+
margin: 0 5px;
18+
19+
box-shadow: 0px 3px 0px 0px rgba(0,0,0,.2);
20+
text-shadow: 0 0 1px rgba(0,0,0,.4);
21+
22+
font-size: 15px;
23+
24+
text-align: center;
25+
text-indent: 0;
26+
27+
cursor: pointer;
28+
}
29+
30+
button:active {
31+
top: 1px;
32+
box-shadow: 0px 2px 0px 0px rgba(0,0,0,.2);
33+
}
34+
35+
/* Button pointing left */
36+
button.prev {
37+
text-align: right;
38+
text-indent: 5px;
39+
40+
padding-right: 12px;
41+
box-sizing: border-box;
42+
}
43+
button.prev:after {
44+
content: "";
45+
width: 0;
46+
height: 0;
47+
display: block;
48+
position: absolute;
49+
left: 0;
50+
top: 0;
51+
52+
opacity: 0.6;
53+
border-top: 20px solid #187dbc;
54+
border-bottom: 20px solid #187dbc;
55+
border-right: 16px solid transparent;
56+
border-left: 20px solid #187dbc;
57+
58+
border-radius: 5px 0 0 5px;
59+
}
60+
61+
/* Next button */
62+
button.next {
63+
text-align: left;
64+
text-indent: 5px;
65+
}
66+
67+
button.next:after {
68+
content: "";
69+
width: 0;
70+
height: 0;
71+
display: block;
72+
border-top: 20px solid #187dbc;
73+
border-bottom: 20px solid #187dbc;
74+
border-left: 16px solid transparent;
75+
border-right: 20px solid #187dbc;
76+
position: absolute;
77+
opacity: 0.6;
78+
right: 0;
79+
top: 0;
80+
border-radius: 0 5px 5px 0;
81+
}
82+
83+
/* Slider Styling, thanks range.css! */
84+
.slider {
85+
-webkit-appearance: none;
86+
width: 100%;
87+
margin: 6.5px 0;
88+
background: inherit;
89+
}
90+
.slider:focus {
91+
outline: none;
92+
}
93+
.slider::-webkit-slider-runnable-track {
94+
width: 100%;
95+
height: 3px;
96+
cursor: pointer;
97+
box-shadow: 0px 0px 1px #000000, 0px 0px 0px #0d0d0d;
98+
background: #4eb5e5;
99+
border-radius: 1.6px;
100+
border: 0px solid #010101;
101+
}
102+
.slider::-webkit-slider-thumb {
103+
box-shadow: 0px 0px 3px rgba(43, 139, 198, 0.49), 0px 0px 0px rgba(55, 152, 212, 0.49);
104+
border: 1px solid #2b8bc6;
105+
height: 16px;
106+
width: 20px;
107+
border-radius: 16px;
108+
background: rgba(24, 125, 188, 0.93);
109+
cursor: pointer;
110+
-webkit-appearance: none;
111+
margin-top: -6.5px;
112+
}
113+
.slider:focus::-webkit-slider-runnable-track {
114+
background: #64bee8;
115+
}
116+
.slider::-moz-range-track {
117+
width: 100%;
118+
height: 3px;
119+
cursor: pointer;
120+
box-shadow: 0px 0px 1px #000000, 0px 0px 0px #0d0d0d;
121+
background: #4eb5e5;
122+
border-radius: 1.6px;
123+
border: 0px solid #010101;
124+
}
125+
.slider::-moz-range-thumb {
126+
box-shadow: 0px 0px 3px rgba(43, 139, 198, 0.49), 0px 0px 0px rgba(55, 152, 212, 0.49);
127+
border: 1px solid #2b8bc6;
128+
height: 16px;
129+
width: 20px;
130+
border-radius: 16px;
131+
background: rgba(24, 125, 188, 0.93);
132+
cursor: pointer;
133+
}
134+
.slider::-ms-track {
135+
width: 100%;
136+
height: 3px;
137+
cursor: pointer;
138+
background: transparent;
139+
border-color: transparent;
140+
color: transparent;
141+
}
142+
.slider::-ms-fill-lower {
143+
background: #38ace2;
144+
border: 0px solid #010101;
145+
border-radius: 3.2px;
146+
box-shadow: 0px 0px 1px #000000, 0px 0px 0px #0d0d0d;
147+
}
148+
.slider::-ms-fill-upper {
149+
background: #4eb5e5;
150+
border: 0px solid #010101;
151+
border-radius: 3.2px;
152+
box-shadow: 0px 0px 1px #000000, 0px 0px 0px #0d0d0d;
153+
}
154+
.slider::-ms-thumb {
155+
box-shadow: 0px 0px 3px rgba(43, 139, 198, 0.49), 0px 0px 0px rgba(55, 152, 212, 0.49);
156+
border: 1px solid #2b8bc6;
157+
height: 16px;
158+
width: 20px;
159+
border-radius: 16px;
160+
background: rgba(24, 125, 188, 0.93);
161+
cursor: pointer;
162+
height: 3px;
163+
}
164+
.slider:focus::-ms-fill-lower {
165+
background: #4eb5e5;
166+
}
167+
.slider:focus::-ms-fill-upper {
168+
background: #64bee8;
169+
}
170+
171+
/* Containers */
172+
.state-container h2 {
173+
text-align: center;
174+
}
175+
176+
.controls-container {
177+
display: flex;
178+
flex-flow: row nowrap;
179+
justify-content: center;
180+
}
181+
182+
.slider-container {
183+
text-align: center;
184+
width: 75%;
185+
margin: 1em auto;
186+
}

‎states.js‎

Lines changed: 121 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,121 @@
1+
var state = {
2+
contents: [],
3+
index: 0,
4+
playing: false,
5+
}
6+
var controls = {
7+
index: null,
8+
buttons: {
9+
next: null,
10+
prev: null,
11+
toggle: null,
12+
},
13+
slider: null,
14+
}
15+
16+
/////////////
17+
// Helpers //
18+
/////////////
19+
// From https://stackoverflow.com/a/37623959/1931274
20+
function onRangeChange(r, f) {
21+
var n, c, m;
22+
r.addEventListener("input", function (e) {
23+
n = 1; c = e.target.value; if (c != m) { f(e); }; m = c;
24+
});
25+
r.addEventListener("change", function (e) { if (!n) { f(e); }});
26+
}
27+
28+
//////////////
29+
// UI Logic //
30+
//////////////
31+
function setupControls() {
32+
controls.index = document.getElementById("index");
33+
34+
controls.buttons.next = document.getElementById("next");
35+
controls.buttons.next.onclick = showNext;
36+
37+
controls.buttons.prev = document.getElementById("prev");
38+
controls.buttons.prev.onclick = showPrevious;
39+
40+
controls.buttons.toggle = document.getElementById("toggle");
41+
controls.buttons.toggle.onclick = toggle;
42+
43+
controls.slider = document.getElementById("slider");
44+
controls.slider.setAttribute("max", state.contents.length - 1);
45+
onRangeChange(controls.slider, showSliderState);
46+
47+
}
48+
49+
function updateControls() {
50+
controls.slider.value = state.index;
51+
controls.index.innerHTML = state.index;
52+
53+
if (state.playing) {
54+
controls.buttons.toggle.innerHTML = "Pause";
55+
} else {
56+
controls.buttons.toggle.innerHTML = "Play";
57+
}
58+
}
59+
60+
//////////////////
61+
// UI callbacks //
62+
//////////////////
63+
function toggle() {
64+
console.log("toggle");
65+
state.playing = !state.playing;
66+
showThisState();
67+
}
68+
69+
function showNext() {
70+
console.log("next");
71+
state.playing = false;
72+
if (state.index < state.contents.length - 1) {
73+
state.index = state.index + 1;
74+
}
75+
showThisState();
76+
}
77+
78+
function showPrevious() {
79+
console.log("previous");
80+
state.playing = false;
81+
if (state.index != 0) {
82+
state.index = state.index - 1;
83+
}
84+
showThisState();
85+
}
86+
87+
function showSliderState() {
88+
console.log("slider");
89+
var value = Number(controls.slider.value);
90+
state.index = value;
91+
state.playing = false;
92+
93+
showThisState();
94+
}
95+
96+
97+
function continueIfPlaying() {
98+
if (!state.playing) {
99+
return
100+
}
101+
state.index = (state.index + 1) % state.contents.length;
102+
if (state.index == state.contents.length - 1) {
103+
state.playing = false;
104+
}
105+
showThisState();
106+
}
107+
108+
/////////////////
109+
// Entry Point //
110+
/////////////////
111+
function main() {
112+
console.log("main");
113+
prepare();
114+
setupControls();
115+
116+
state.index = 0;
117+
state.playing = false;
118+
showThisState();
119+
}
120+
121+
document.addEventListener("DOMContentLoaded", main);

‎terminal.css‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
.terminal {
2+
flex: 1;
3+
4+
display: flex;
5+
flex-direction: column;
6+
}
7+
.terminal-head {
8+
border-top-left-radius: 0.3rem;
9+
border-top-right-radius: 0.3rem;
10+
background: #3C3B3C;
11+
display: flex;
12+
padding: 0.1rem 0.3rem;
13+
}
14+
.terminal-button {
15+
height: 0.75rem;
16+
width: 0.75rem;
17+
border-radius: 0.5rem;
18+
margin: 0.25rem;
19+
background: blue;
20+
}
21+
.terminal-button--one {
22+
background: #FF5F58;
23+
}
24+
.terminal-button--two {
25+
background: #FFBD2E;
26+
}
27+
.terminal-button--three {
28+
background: #29CE42;
29+
}
30+
31+
.terminal-text {
32+
background: black;
33+
color: white;
34+
margin: 0;
35+
padding: 0.5rem;
36+
37+
border-bottom-left-radius: 0.3rem;
38+
border-bottom-right-radius: 0.3rem;
39+
40+
flex: 1;
41+
42+
box-sizing: border-box;
43+
}

‎terminal.html‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Terminal!</title>
7+
<link rel="stylesheet" href="terminal.css">
8+
<style>
9+
/* I like my eyeballs at night. */
10+
html {
11+
height: 100%;
12+
}
13+
body {
14+
height: 100%;
15+
margin: 0;
16+
padding: 1rem;
17+
display: flex;
18+
background: darkred;
19+
box-sizing: border-box;
20+
}
21+
</style>
22+
</head>
23+
<body>
24+
<div class="terminal">
25+
<div class="terminal-head">
26+
<div class="terminal-button terminal-button--one"></div>
27+
<div class="terminal-button terminal-button--two"></div>
28+
<div class="terminal-button terminal-button--three"></div>
29+
</div>
30+
<pre class="terminal-text">$ echo "This is cool"
31+
This is cool</pre>
32+
</div>
33+
</body>
34+
</html>

0 commit comments

Comments
 (0)