some styles
This commit is contained in:
parent
67f267d7ab
commit
58c1e1185b
10
main.rb
10
main.rb
@ -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
42
public/main.css
Normal 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;
|
||||
}
|
@ -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>
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user