some styles

This commit is contained in:
Mark Moser 2019-02-24 04:35:56 +00:00
parent 67f267d7ab
commit 58c1e1185b
3 changed files with 64 additions and 15 deletions

10
main.rb
View File

@ -24,7 +24,6 @@ LEDS.each do |led|
IO.set_low led
end
# IO.reset
get '/' do
@led_status = led_status
@ -35,11 +34,11 @@ get '/cycle' do
clear
5.times do |i|
sleep 0.5
sleep 0.3
IO.set_high LEDS[i]
IO.set_low LEDS[i - 1]
end
sleep 0.3
clear
redirect to('/')
end
@ -51,6 +50,11 @@ get '/led/:color' do |led|
redirect to('/')
end
get '/clear' do
clear
redirect to('/')
end
def pick led
case led
when 'blue'

42
public/main.css Normal file
View File

@ -0,0 +1,42 @@
html {
box-sizing: border-box;
font-size: 16px;
}
*, *:before, *:after {
box-sizing: inherit;
}
.container {
margin: 15px auto;
max-width: 450px;
}
ul.switches {
display: flex;
margin: 0 0 15px;
padding: 0;
list-style: none;
}
.switches li {
margin: 5px;
}
.switches a {
display: inline-block;
padding: 10px;
border: 1px solid #000;
border-radius: 5px;
text-decoration: none;
color: #000;
}
.switches a:hover {
background-color: #eee;
}
.switches a.active {
background-color: #858585;
color: #eee;
}

View File

@ -3,21 +3,24 @@
<head>
<meta charset="UTF-8">
<title>LED Manager</title>
<link href="main.css" rel="stylesheet">
</head>
<body>
<div class="container">
<h1>LED Manager</h1>
<ul>
<li><a href="/cycle">Cycle 3 Times</a></li>
<li><a href="/led/blue">Blue</a></li>
<li><a href="/led/white">White</a></li>
<li><a href="/led/red">Red</a></li>
<li><a href="/led/green">Green</a></li>
<li><a href="/led/yellow">Yellow</a></li>
</ul>
<pre>
<%= led_status %>
</pre>
<ul class="switches">
<li><a href="/clear">clear</a></li>
<li><a href="/cycle">cycle test</a></li>
</ul>
<ul class="switches">
<li><a <%= (led_status[:blue]) ? 'class="active"' : "" %> href="/led/blue">blue</a></li>
<li><a <%= (led_status[:white]) ? 'class="active"' : "" %> href="/led/white">white</a></li>
<li><a <%= (led_status[:red]) ? 'class="active"' : "" %> href="/led/red">red</a></li>
<li><a <%= (led_status[:green]) ? 'class="active"' : "" %> href="/led/green">green</a></li>
<li><a <%= (led_status[:yellow]) ? 'class="active"' : "" %> href="/led/yellow">yellow</a></li>
</ul>
</div>
</body>
</html>