Skip to content

Instantly share code, notes, and snippets.

@usualoma

usualoma/checkboxs.html.erb

Created December 3, 2015 19:08
Show Gist options
  • Save usualoma/504a5422d3e71479315d to your computer and use it in GitHub Desktop.
Save usualoma/504a5422d3e71479315d to your computer and use it in GitHub Desktop.
Download ZIP
Raw
checkboxs.html.erb
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
<style type="text/css">
body {
user-select: none;
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
}
label {
display: block;
width: 290px;
height: 170px;
position: absolute;
z-index: 1;
background: rgba(230, 230, 230, 1);
padding-top: 110px;
text-align: center;
}
label.gameover {
background: rgba(240, 240, 240, 1);
}
<% 0.upto(9) do |i| %>
#cb-<%= i %>:checked ~ #layer-<%= i+1 %> {
z-index: <%= i+2 %>;
}
<% end %>
</style>
</head>
<body>
<form>
<% 0.upto(9) do |i| %>
<input type="checkbox" id="cb-<%= i %>" />
<% end %>
<input type="reset" id="restart" />
<label for="restart" id="layer-10" class="gameover">Game over!<br/>&lt;label for="restart" id="layer-10"&gt;</label>
<% 9.downto(0) do |i| %>
<label for="cb-<%= i %>" id="layer-<%= i %>">Tap here!<br/>&lt;label for="cb-<%= i %>" id="layer-<%= i %>"&gt;</label>
<% end %>
</form>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment