Second release

This commit is contained in:
Diogo Cordeiro 2018-04-03 09:13:42 +00:00
parent 742b86edbb
commit 11a998dd3b
24 changed files with 1157 additions and 4077 deletions

102
INSTALL Normal file
View File

@ -0,0 +1,102 @@
TABLE OF CONTENTS
=================
* Installation
- Getting the offline mode up and running
- Getting the online mode up and running
* Settings
- Number of Leds
- Show labels
- Easter Egg
- Change leds image and theme
Installation
============
Getting the offline mode up and running
---------------------------------------
Installing the basic Fun with Binary in offline mode is relatively easy.
1. Unpack the tarball you downloaded on your Web server. Usually a
command like this will work:
tar zxf funwithbinary-*.tar.gz
...which will make a funwithbinary-x.y.z subdirectory in your current
directory. (If you don't have shell access on your Web server, you
may have to unpack the tarball on your local computer and FTP the
files to the server.)
2. Move the tarball to a directory of your choosing in your Web root
directory. Usually something like this will work:
mv funwithbinary-x.y.z /var/www/funwithbinary
This will often make your Fun with Binary copy available in the funwithbinary
path of your server, like "http://example.net/funwithbinary". If you know how
to configure virtual hosts on your web server, you can try setting up
"http://funwithbinary.example.net/" or the like.
3. You should now be able to navigate to your funwithbinary site's main
directory and play :)
Getting the online mode up and running
--------------------------------------
Installing the basic Fun with Binary in offline mode is relatively easy.
1. Unpack the tarball you downloaded on your computer. Usually a
command like this will work:
tar zxf funwithbinary-*.tar.gz
...which will make a funwithbinary-x.y.z subdirectory in your current
directory.
2. Minify the style.css with https://css.github.io/csso/csso.html and replace
the line after <!-- CSS --> in the index.html with the result inside the tags
<style>*result*</style>
3. In the script.js file enable the online mode in the Game Settings section,
by changing "ONLINE_MODE = false; " to "ONLINE_MODE = true;"
4. Minify the script.js with http://lisperator.net/uglifyjs/ and replace the
line after <!-- JS --> in the index.html with the result inside the tags
<script>*result*</script>
5. Make the resulting HTM usable with the following tool:
https://github.com/CytronTechnologies/ESP8266-WiFi-Module/raw/master/convertHtml/convertHtml.jar
6. Upload the resulting code to the arduino board
7. You should now be able to play :)
Settings
========
Number of Leds
--------------
You can change the number of leds by editing the N_LEDS constant in the
Game Settings section of the script.js file. If you are using the Online Mode
you should also change the constant of the same name in the section of same name
in the server.ino file as well as adjust the LED GPIO array.
Show labels
-----------
You can change the default value of this option by editing the "show_labels"
variable in the Game Settings section of the script.js file. You can also
completely disable this feature by changing the value of HAVE_LABELS constant.
Easter Egg
----------
You can disable the easter egg by editing the EASTER_EGG constant in the
Game Settings section of the script.js file.
Change leds image and theme
---------------------------
You can change the LED_OFF and LED_ON paths in the Game Settings section of the
script.js file.

View File

@ -11,39 +11,29 @@ Further information about Fun with Binary can be found in the project home page:
## Getting Started
Fun with Binary is divided in three components, the Client, the Server, the Output.
Fun with Binary has two different modes:
- Online: Which has a little body to make everything more interactive.
- Offline: Which is more independent and can be used right away without any further technicality by accessing: [https://www.diogo.site/projects/fun_with_binary/offlinev2.html](https://www.diogo.site/projects/fun_with_binary/offlinev2.html)
### Prerequisites
### Server
### Offline Mode
For the server you need a webserver with PHP support (it can be localhost).
There are no special prerequisites for the offline mode.
### Client
### Online Mode
You can run it in the same server's webserver, although a ready to use live client was made avaiable in the folowing address:
At least: Arduino Uno with ESP8266-01, 6 leds (and 6 resistors), wires, breadboard.
```
http://diogo.site/projects/fun_with_binary/client/
```
Despite that, it might be interesting to convert it in an actual mobile app :)
### Output
For the Arduino based output you obviously need an arduino, 6 leds (from which three of them must be red and the other three of another color).
## Built With
* [Ratchet](https://github.com/twbs/ratchet) - The mobile targeted web framework used in the client
Some instruction of how to build it can be found on my blog post about this project: [https://blog.diogo.site/posts/fun-with-binary](https://blog.diogo.site/posts/fun-with-binary)
## Versioning
I use [SemVer](http://semver.org/) for versioning. For the versions available, see the tags on this repository.
I use [SemVer](http://semver.org/) for versioning. For the versions available, see the tags on this repository.
## Authors
* **Diogo Cordeiro** - *Initial work* - [Fun with Binary](https://gitlab.com/up201705417/fun-with-binary)
* **Diogo Cordeiro**
## License
@ -69,8 +59,22 @@ License along with this program, in the file "COPYING". If not, see
of using the software, and if you do not wish to share your
modifications, *YOU MAY NOT INSTALL FUN WITH BINARY*.
Additional library software has been made available (and were referenced
in the "Built With" section). All of it is Free Software and can be
distributed under liberal terms, but those terms may differ in detail
from the AGPL's particulars. See each package's license file in their
official repository for additional terms.
Additional library software has been made available. All of it is Free Software
and can be distributed under liberal terms, but those terms may differ in detail
from the AGPL's particulars. See each package's license file in their official
repository for additional terms.
## New this version
This is version 2.0 of Fun with Binary and includes the following (key) changes
from the previous one:
- Client <-> Server <-> Arduino was replaced by a Client <-> Arduino structure
- ESP8266 is now required for Access Point purposes
- Both modes have become PHP independent (mostly relevant in the offline one)
The last release, 2.0, gave us these improvements:
- Significant visual improvement
- 2 Powers Label switch functionality
- Offline mode is now lighter and more portable (no computer with webserver required anymore)

View File

@ -1,5 +0,0 @@
.slider,
.slider img {
margin-bottom: 0;
height: 150px;
}

View File

@ -1,622 +0,0 @@
/*!
* =====================================================
* Ratchet v2.0.2 (http://goratchet.com)
* Copyright 2014 Connor Sears
* Licensed under MIT (https://github.com/twbs/ratchet/blob/master/LICENSE)
*
* v2.0.2 designed by @connors.
* =====================================================
*/
body {
font-family: "Roboto", sans-serif;
font-size: 18px;
line-height: 22px;
color: #222;
}
a {
color: #33b5e5;
}
a:active {
color: #1a9bcb;
}
.content {
background-color: #f2f2f2;
}
.bar-nav ~ .content {
padding-top: 50px;
}
.bar-header-secondary ~ .content {
padding-top: 100px;
}
.bar-tab ~ .content {
padding-top: 50px;
padding-bottom: 0;
}
.bar-footer ~ .content {
padding-bottom: 50px;
}
.bar-footer-secondary ~ .content {
padding-bottom: 100px;
}
.btn {
padding: 8px 15px;
font-size: 14px;
color: #222;
background-color: #cecece;
border: 0;
border-radius: 2px;
-webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .2), inset 0 1px 0 rgba(255, 255, 255, .2), 0 1px 1px rgba(0, 0, 0, .25);
box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .2), inset 0 1px 0 rgba(255, 255, 255, .2), 0 1px 1px rgba(0, 0, 0, .25);
}
.btn:active, .btn.active {
color: #222;
background-color: #999;
border: 0;
-webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .2), inset 0 1px 0 rgba(255, 255, 255, .2);
box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .2), inset 0 1px 0 rgba(255, 255, 255, .2);
}
.btn-primary {
color: #fff;
background-color: #33b5e5;
border: 0;
}
.btn-primary:active, .btn-primary.active {
color: #fff;
background-color: #1a9bcb;
border: 0;
}
.btn-positive {
color: #fff;
background-color: #9c0;
border: 0;
}
.btn-positive:active, .btn-positive.active {
color: #fff;
background-color: #739900;
border: 0;
}
.btn-negative {
color: #fff;
background-color: #f44;
border: 0;
}
.btn-negative:active, .btn-negative.active {
color: #fff;
background-color: #f11;
border: 0;
}
.btn-outlined {
background-color: transparent;
border: 1px solid #999;
-webkit-box-shadow: none;
box-shadow: none;
}
.btn-outlined.btn-primary {
color: #33b5e5;
border: 1px solid #33b5e5;
}
.btn-outlined.btn-primary:active {
background-color: #33b5e5;
border: 1px solid #33b5e5;
}
.btn-outlined.btn-positive {
color: #9c0;
border: 1px solid #9c0;
}
.btn-outlined.btn-positive:active {
background-color: #9c0;
border: 1px solid #9c0;
}
.btn-outlined.btn-negative {
color: #f44;
border: 1px solid #f44;
}
.btn-outlined.btn-negative:active {
background-color: #f44;
border: 1px solid #f44;
}
.btn-outlined:active {
background-color: #999;
border: 1px solid #999;
-webkit-box-shadow: none;
box-shadow: none;
}
.btn-outlined.btn-primary:active, .btn-outlined.btn-positive:active, .btn-outlined.btn-negative:active {
color: #fff;
-webkit-box-shadow: none;
box-shadow: none;
}
.btn-link {
color: #33b5e5;
background-color: transparent;
border: none;
-webkit-box-shadow: none;
box-shadow: none;
}
.btn-link:active, .btn-link.active {
color: #1a9bcb;
background-color: transparent;
-webkit-box-shadow: none;
box-shadow: none;
}
.btn-block {
padding: 15px 0;
font-size: 18px;
}
.btn .badge {
background-color: rgba(0, 0, 0, .15);
}
.btn .badge.badge-inverted {
background-color: transparent;
}
.btn:active .badge {
color: #fff;
}
.bar {
height: 50px;
background-color: #ddd;
border-bottom: 1px solid #b1b1b1;
-webkit-box-shadow: inset 0 -2px 0 #d2d2d2, 0 3px 3px rgba(0, 0, 0, .07);
box-shadow: inset 0 -2px 0 #d2d2d2, 0 3px 3px rgba(0, 0, 0, .07);
}
.bar.bar-header-secondary {
top: 50px;
}
.bar.bar-footer-secondary {
bottom: 50px;
}
.bar.bar-footer-secondary-tab {
bottom: 50px;
}
.bar .bar-footer,
.bar .bar-footer-secondary,
.bar .bar-footer-secondary-tab {
border-top: 1px solid #b1b1b1;
border-bottom: 0;
-webkit-box-shadow: inset 0 -2px 0 #33b5e5;
box-shadow: inset 0 -2px 0 #33b5e5;
}
.bar-tab {
top: 0;
bottom: auto;
height: 50px;
border-top: 0;
}
.bar-tab .tab-item {
color: #929292;
}
.bar-tab .tab-item.active {
color: #33b5e5;
-webkit-box-shadow: inset 0 -2px 0 #33b5e5;
box-shadow: inset 0 -2px 0 #33b5e5;
}
.bar-tab .tab-item:active {
color: #929292;
background-color: #78c6e3;
}
.bar-tab .tab-item .icon {
top: 3px;
padding-top: 0;
padding-bottom: 0;
}
.title {
position: static;
padding-left: 15px;
font-size: 18px;
line-height: 49px;
text-align: left;
}
.bar .btn {
top: 7px;
padding-top: 10px;
padding-bottom: 10px;
}
.bar .btn-link {
top: 0;
padding: 0;
font-size: 18px;
line-height: 49px;
color: #33b5e5;
}
.bar .btn-link:active, .bar .btn-link.active {
color: #1a9bcb;
}
.bar .btn-link .icon {
top: 2px;
padding: 0;
}
.bar .btn-block {
top: 4px;
}
.bar .segmented-control {
top: 7px;
}
.bar .icon {
padding-top: 13px;
padding-bottom: 13px;
}
.bar .title .icon {
padding: 0;
}
.bar .title .icon.icon-caret {
top: 10px;
color: #777;
}
.bar input[type="search"] {
height: 35px;
}
.badge.badge-inverted {
color: #999;
background-color: transparent;
}
.badge-primary {
color: #fff;
background-color: #33b5e5;
}
.badge-primary.badge-inverted {
color: #33b5e5;
background-color: transparent;
}
.badge-positive {
color: #fff;
background-color: #9c0;
}
.badge-positive.badge-inverted {
color: #9c0;
background-color: transparent;
}
.badge-negative {
color: #fff;
background-color: #f44;
}
.badge-negative.badge-inverted {
color: #f44;
background-color: transparent;
}
.card {
background-color: transparent;
border-color: #d9d9d9;
border-radius: 2px;
}
.table-view {
background-color: transparent;
}
.table-view .table-view-cell {
border-bottom: 1px solid #d9d9d9;
}
.table-view .table-view-cell:last-child {
background-image: none;
}
.table-view .table-view-cell > a:not(.btn):active {
color: inherit;
background-color: #e0e0e0;
}
.table-view .table-view-cell > a:not(.btn):active .icon {
color: #fff;
}
.table-view .table-view-divider {
padding-top: 25px;
font-size: 12px;
font-weight: bold;
text-transform: uppercase;
background-color: transparent;
border-top: 0;
border-bottom: 2px solid #a9a9a9;
}
.table-view-cell .navigate-left > .btn,
.table-view-cell .navigate-left > .badge,
.table-view-cell .navigate-left > .toggle,
.table-view-cell .navigate-right > .btn,
.table-view-cell .navigate-right > .badge,
.table-view-cell .navigate-right > .toggle,
.table-view-cell .push-left > .btn,
.table-view-cell .push-left > .badge,
.table-view-cell .push-left > .toggle,
.table-view-cell .push-right > .btn,
.table-view-cell .push-right > .badge,
.table-view-cell .push-right > .toggle,
.table-view-cell > a .navigate-left > .btn,
.table-view-cell > a .navigate-left > .badge,
.table-view-cell > a .navigate-left > .toggle,
.table-view-cell > a .navigate-right > .btn,
.table-view-cell > a .navigate-right > .badge,
.table-view-cell > a .navigate-right > .toggle,
.table-view-cell > a .push-left > .btn,
.table-view-cell > a .push-left > .badge,
.table-view-cell > a .push-left > .toggle,
.table-view-cell > a .push-right > .btn,
.table-view-cell > a .push-right > .badge,
.table-view-cell > a .push-right > .toggle {
right: 15px;
}
select,
textarea,
input[type="text"],
input[type="search"],
input[type="password"],
input[type="datetime"],
input[type="datetime-local"],
input[type="date"],
input[type="month"],
input[type="time"],
input[type="week"],
input[type="number"],
input[type="email"],
input[type="url"],
input[type="tel"],
input[type="color"],
.input-group {
height: 40px;
padding: 10px 15px;
border: 1px solid rgba(0, 0, 0, .2);
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .1);
box-shadow: 0 1px 1px rgba(0, 0, 0, .1);
}
input[type="search"] {
border-radius: 2px;
}
select,
textarea,
.input-group {
height: auto;
}
.input-group {
padding: 0;
border: 0;
}
.input-group input {
border: 0;
border-bottom: 1px solid #d9d9d9;
-webkit-box-shadow: none;
box-shadow: none;
}
.input-group input:last-child {
background-image: none;
}
.input-row {
height: 40px;
border-bottom: 1px solid #d9d9d9;
}
.input-row label {
padding-top: 10px;
padding-bottom: 10px;
}
.input-row label + input {
background-image: none;
border-bottom: 0;
}
.segmented-control {
font-size: 14px;
background-color: #cecece;
border: 0;
border-radius: 2px;
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .25);
box-shadow: 0 1px 1px rgba(0, 0, 0, .25);
}
.segmented-control .control-item {
padding-top: 10px;
padding-bottom: 10px;
color: #222;
border-left: 1px solid #999;
-webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .2), inset 0 1px 0 rgba(255, 255, 255, .2);
box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .2), inset 0 1px 0 rgba(255, 255, 255, .2);
}
.segmented-control .control-item:first-child {
border-left-width: 0;
}
.segmented-control .control-item:active, .segmented-control .control-item.active {
background-color: #999;
}
.segmented-control-primary {
border: 0;
}
.segmented-control-primary .control-item {
color: #fff;
border-color: inherit;
}
.segmented-control-primary .control-item:active, .segmented-control-primary .control-item.active {
color: #fff;
background-color: #33b5e5;
}
.segmented-control-positive {
border: 0;
}
.segmented-control-positive .control-item {
color: #fff;
border-color: inherit;
}
.segmented-control-positive .control-item:active, .segmented-control-positive .control-item.active {
color: #fff;
background-color: #9c0;
}
.segmented-control-negative {
border: 0;
}
.segmented-control-negative .control-item {
color: #fff;
border-color: inherit;
}
.segmented-control-negative .control-item:active, .segmented-control-negative .control-item.active {
color: #fff;
background-color: #f44;
}
.popover {
top: 47px;
left: 15px;
width: 200px;
margin-left: 0;
border: 1px solid #9b9b9b;
border-radius: 0;
-webkit-box-shadow: 0 0 3px rgba(0, 0, 0, .2);
box-shadow: 0 0 3px rgba(0, 0, 0, .2);
-webkit-transition: -webkit-transform .1s ease-in-out, opacity .2s ease-in-out;
-moz-transition: -moz-transform .1s ease-in-out, opacity .2s ease-in-out;
transition: transform .1s ease-in-out, opacity .2s ease-in-out;
-webkit-transform: scale(.75);
-ms-transform: scale(.75);
transform: scale(.75);
}
.popover:before {
display: none;
}
.popover.visible {
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
.backdrop {
background-color: transparent;
}
.popover .bar {
border-radius: 0;
}
.popover .bar-nav ~ .table-view {
padding-top: 50px;
}
.popover .table-view {
border-radius: 12px;
}
.toggle {
width: 104px;
height: 28px;
background-color: #d7d7d7;
border: 2px solid #d7d7d7;
border-radius: 0;
}
.toggle .toggle-handle {
top: 0;
left: 0;
width: 50px;
height: 24px;
background-color: #bebebe;
border: 1px solid #b5b5b5;
border-radius: 2px;
-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), inset 0 -1px 0 rgba(0, 0, 0, .1);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), inset 0 -1px 0 rgba(0, 0, 0, .1);
}
.toggle:before {
top: 1px;
right: auto;
left: 11px;
z-index: 3;
color: #fff;
}
.toggle.active {
background-color: #d7d7d7;
border: 2px solid #d7d7d7;
}
.toggle.active .toggle-handle {
margin-right: 2px;
background-color: #33b5e5;
border-color: #33b5e5;
-webkit-transform: translate3d(50px, 0, 0);
-ms-transform: translate3d(50px, 0, 0);
transform: translate3d(50px, 0, 0);
}
.toggle.active:before {
right: 14px;
left: auto;
color: #fff;
}
.navigate-left:after,
.push-left:after {
content: '';
}
.navigate-right:after,
.push-right:after {
content: '';
}
.icon-caret:before {
content: '\e800';
}
.icon-down:before,
.icon-down-nav:before {
content: '\e801';
}
.icon-download:before {
content: '\e802';
}
.icon-left:before,
.icon-left-nav:before {
content: '\e803';
}
.icon-more-vertical:before {
content: '\e804';
}
.icon-more:before {
content: '\e805';
}
.icon-right:before,
.icon-right-nav:before {
content: '\e806';
}
.icon-search:before {
content: '\e807';
}
.icon-share:before {
content: '\e808';
}
.icon-up:before,
.icon-up-nav:before {
content: '\e809';
}

File diff suppressed because one or more lines are too long

View File

@ -1,471 +0,0 @@
/*!
* =====================================================
* Ratchet v2.0.2 (http://goratchet.com)
* Copyright 2014 Connor Sears
* Licensed under MIT (https://github.com/twbs/ratchet/blob/master/LICENSE)
*
* v2.0.2 designed by @connors.
* =====================================================
*/
a {
color: #007aff;
}
a:active {
color: #0062cc;
}
.content {
background-color: #efeff4;
}
.h5, h5,
.h6, h6,
p {
color: #8f8f94;
}
.h5, h5,
.h6, h6 {
font-weight: normal;
text-transform: uppercase;
}
.btn {
color: #929292;
background-color: rgba(247, 247, 247, .98);
border: 1px solid #929292;
-webkit-transition: all;
-moz-transition: all;
transition: all;
-webkit-transition-timing-function: linear;
-moz-transition-timing-function: linear;
transition-timing-function: linear;
-webkit-transition-duration: .2s;
-moz-transition-duration: .2s;
transition-duration: .2s;
}
.btn:active, .btn.active {
color: #fff;
background-color: #929292;
}
.btn-primary {
color: #fff;
background-color: #007aff;
border: 1px solid #007aff;
}
.btn-primary:active, .btn-primary.active {
background-color: #0062cc;
border: 1px solid #0062cc;
}
.btn-positive {
color: #fff;
background-color: #4cd964;
border: 1px solid #4cd964;
}
.btn-positive:active, .btn-positive.active {
background-color: #2ac845;
border: 1px solid #2ac845;
}
.btn-negative {
color: #fff;
background-color: #dd524d;
border: 1px solid #dd524d;
}
.btn-negative:active, .btn-negative.active {
background-color: #cf2d28;
border: 1px solid #cf2d28;
}
.btn-outlined {
background-color: transparent;
}
.btn-outlined.btn-primary {
color: #007aff;
}
.btn-outlined.btn-positive {
color: #4cd964;
}
.btn-outlined.btn-negative {
color: #dd524d;
}
.btn-outlined.btn-primary:active, .btn-outlined.btn-positive:active, .btn-outlined.btn-negative:active {
color: #fff;
}
.btn-link {
color: #007aff;
background-color: transparent;
border: none;
}
.btn-link:active, .btn-link.active {
color: #0062cc;
background-color: transparent;
}
.btn .badge {
background-color: rgba(0, 0, 0, .15);
}
.btn .badge.badge-inverted {
background-color: transparent;
}
.btn:active .badge {
color: #fff;
}
.bar {
background-color: rgba(247, 247, 247, .98);
border-bottom: 0;
-webkit-box-shadow: 0 0 1px rgba(0, 0, 0, .85);
box-shadow: 0 0 1px rgba(0, 0, 0, .85);
}
.bar.bar-header-secondary {
top: 44px;
}
.bar.bar-footer-secondary {
bottom: 44px;
}
.bar.bar-footer-secondary-tab {
bottom: 50px;
}
.bar.bar-footer, .bar.bar-footer-secondary, .bar.bar-footer-secondary-tab {
border-top: 0;
}
.bar-tab {
border-top: 0;
}
.tab-item {
color: #929292;
}
.tab-item.active, .tab-item:active {
color: #007aff;
}
.bar-nav .btn-link {
color: #007aff;
}
.bar-nav .btn-link:active {
color: #007aff;
opacity: .6;
}
.badge.badge-inverted {
color: #929292;
background-color: transparent;
}
.badge-primary {
color: #fff;
background-color: #007aff;
}
.badge-primary.badge-inverted {
color: #007aff;
background-color: transparent;
}
.badge-positive {
color: #fff;
background-color: #4cd964;
}
.badge-positive.badge-inverted {
color: #4cd964;
background-color: transparent;
}
.badge-negative {
color: #fff;
background-color: #dd524d;
}
.badge-negative.badge-inverted {
color: #dd524d;
background-color: transparent;
}
.card .table-view {
background-image: none;
}
.card .table-view-cell:last-child {
background-image: none;
}
.table-view {
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='1'><rect fill='#c8c7cc' x='0' y='0' width='100%' height='0.5'/></svg>"), url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='1'><rect fill='#c8c7cc' x='0' y='0' width='100%' height='0.5'/></svg>");
background-repeat: no-repeat;
background-position: 0 100%, 0 0;
border-top: 0;
border-bottom: 0;
}
.table-view .table-view-cell {
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='1'><rect fill='#c8c7cc' x='0' y='0' width='100%' height='0.5'/></svg>");
background-repeat: no-repeat;
background-position: 15px 100%;
border-bottom: 0;
}
.table-view .table-view-cell:last-child {
background-image: none;
}
.table-view .table-view-cell > a:not(.btn):active {
color: inherit;
}
.table-view .table-view-divider {
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='1'><rect fill='#c8c7cc' x='0' y='0' width='100%' height='0.5'/></svg>"), url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='1'><rect fill='#c8c7cc' x='0' y='0' width='100%' height='0.5'/></svg>");
background-repeat: no-repeat;
background-position: 0 100%, 0 0;
border-top: 0;
border-bottom: 0;
}
select,
textarea,
input[type="text"],
input[type="search"],
input[type="password"],
input[type="datetime"],
input[type="datetime-local"],
input[type="date"],
input[type="month"],
input[type="time"],
input[type="week"],
input[type="number"],
input[type="email"],
input[type="url"],
input[type="tel"],
input[type="color"],
.input-group {
height: 40px;
padding: 10px 15px;
border: 1px solid rgba(0, 0, 0, .2);
}
input[type="search"] {
height: 34px;
text-align: center;
background-color: rgba(0, 0, 0, .1);
border: 0;
border-radius: 6px;
}
input[type="search"]:focus {
text-align: left;
}
select,
textarea,
.input-group {
height: auto;
}
.input-group {
padding: 0;
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='1'><rect fill='#c8c7cc' x='0' y='0' width='100%' height='0.5'/></svg>"), url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='1'><rect fill='#c8c7cc' x='0' y='0' width='100%' height='0.5'/></svg>");
background-repeat: no-repeat;
background-position: 0 100%, 0 0;
border: 0;
}
.input-group input {
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='1'><rect fill='#c8c7cc' x='0' y='0' width='100%' height='0.5'/></svg>");
background-repeat: no-repeat;
background-position: 15px 100%;
border: 0;
}
.input-group input:last-child {
background-image: none;
}
.input-row {
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='1'><rect fill='#c8c7cc' x='0' y='0' width='100%' height='0.5'/></svg>");
background-repeat: no-repeat;
background-position: 15px 100%;
border-bottom: 0;
}
.input-row:last-child,
.input-row label + input {
background-image: none;
}
.segmented-control {
background-color: transparent;
border: 1px solid #929292;
}
.segmented-control .control-item {
color: #929292;
border-color: #929292;
-webkit-transition: background-color .1s linear;
-moz-transition: background-color .1s linear;
transition: background-color .1s linear;
}
.segmented-control .control-item:active {
background-color: #ebebeb;
}
.segmented-control .control-item.active {
color: #fff;
background-color: #929292;
}
.segmented-control-primary {
border: 1px solid #007aff;
}
.segmented-control-primary .control-item {
color: #007aff;
border-color: inherit;
}
.segmented-control-primary .control-item:active {
background-color: #b3d7ff;
}
.segmented-control-primary .control-item.active {
color: #fff;
background-color: #007aff;
}
.segmented-control-positive {
border: 1px solid #4cd964;
}
.segmented-control-positive .control-item {
color: #4cd964;
border-color: inherit;
}
.segmented-control-positive .control-item:active {
background-color: #dff8e3;
}
.segmented-control-positive .control-item.active {
color: #fff;
background-color: #4cd964;
}
.segmented-control-negative {
border: 1px solid #dd524d;
}
.segmented-control-negative .control-item {
color: #dd524d;
border-color: inherit;
}
.segmented-control-negative .control-item:active {
background-color: #fae4e3;
}
.segmented-control-negative .control-item.active {
color: #fff;
background-color: #dd524d;
}
.popover {
border-radius: 12px;
-webkit-transition: -webkit-transform .2s ease-in-out, opacity .2s ease-in-out;
-moz-transition: -webkit-transform .2s ease-in-out, opacity .2s ease-in-out;
transition: -webkit-transform .2s ease-in-out, opacity .2s ease-in-out;
}
.popover:before {
border-bottom: 15px solid rgba(247, 247, 247, .98);
}
.popover .bar {
-webkit-box-shadow: none;
box-shadow: none;
}
.popover .bar-nav {
border-bottom: 1px solid rgba(0, 0, 0, .15);
}
.popover .table-view {
background-image: none;
border-radius: 12px;
}
.modal {
-webkit-transition-timing-function: cubic-bezier(.1, .5, .1, 1);
-moz-transition-timing-function: cubic-bezier(.1, .5, .1, 1);
transition-timing-function: cubic-bezier(.1, .5, .1, 1);
}
.modal.active {
-webkit-transition-timing-function: cubic-bezier(.1, .5, .1, 1);
-moz-transition-timing-function: cubic-bezier(.1, .5, .1, 1);
transition-timing-function: cubic-bezier(.1, .5, .1, 1);
}
.toggle {
width: 47px;
border: 2px solid #e6e6e6;
-webkit-box-shadow: inset 0 0 0 0 #e1e1e1;
box-shadow: inset 0 0 0 0 #e1e1e1;
-webkit-transition-duration: .2s;
-moz-transition-duration: .2s;
transition-duration: .2s;
-webkit-transition-property: box-shadow, border;
-moz-transition-property: box-shadow, border;
transition-property: box-shadow, border;
}
.toggle .toggle-handle {
border: 1px solid rgba(0, 0, 0, .2);
-webkit-box-shadow: 0 3px 3px rgba(0, 0, 0, .08);
box-shadow: 0 3px 3px rgba(0, 0, 0, .08);
-webkit-transition-property: -webkit-transform, border, width;
-moz-transition-property: -moz-transform, border, width;
transition-property: transform, border, width;
}
.toggle:before {
display: none;
}
.toggle.active {
background-color: transparent;
border: 2px solid #4cd964;
-webkit-box-shadow: inset 0 0 0 13px #4cd964;
box-shadow: inset 0 0 0 13px #4cd964;
}
.toggle.active .toggle-handle {
-webkit-transform: translate3d(17px, 0, 0);
-ms-transform: translate3d(17px, 0, 0);
transform: translate3d(17px, 0, 0);
}
.toggle.active .toggle-handle {
border-color: #4cd964;
}
.content.fade {
-webkit-transition: opacity .2s ease-in-out;
-moz-transition: opacity .2s ease-in-out;
transition: opacity .2s ease-in-out;
}
.content.sliding {
-webkit-transition-timing-function: cubic-bezier(.1, .5, .1, 1);
-moz-transition-timing-function: cubic-bezier(.1, .5, .1, 1);
transition-timing-function: cubic-bezier(.1, .5, .1, 1);
}
.content.sliding.sliding-in, .content.sliding.right:not([class*="sliding-in"]) {
-webkit-animation-name: fadeOverlay;
-moz-animation-name: fadeOverlay;
animation-name: fadeOverlay;
-webkit-animation-duration: .4s;
-moz-animation-duration: .4s;
animation-duration: .4s;
}
.content.sliding.right:not([class*="sliding-in"]) {
-webkit-animation-direction: reverse;
-moz-animation-direction: reverse;
animation-direction: reverse;
}
.content.sliding.left {
-webkit-transform: translate3d(-20%, 0, 0);
-ms-transform: translate3d(-20%, 0, 0);
transform: translate3d(-20%, 0, 0);
}
@-webkit-keyframes fadeOverlay {
from {
-webkit-box-shadow: 0 0 10px transparent, -320px 0 0 transparent;
box-shadow: 0 0 10px transparent, -320px 0 0 transparent;
}
to {
-webkit-box-shadow: 0 0 10px rgba(0, 0, 0, .3), -320px 0 0 rgba(0, 0, 0, .1);
box-shadow: 0 0 10px rgba(0, 0, 0, .3), -320px 0 0 rgba(0, 0, 0, .1);
}
}

File diff suppressed because one or more lines are too long

File diff suppressed because it is too large Load Diff

File diff suppressed because one or more lines are too long

View File

@ -1,61 +0,0 @@
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg">
<metadata>Copyright (C) 2014 by original authors @ fontello.com</metadata>
<defs>
<font id="ratchicons" horiz-adv-x="1000" >
<font-face font-family="ratchicons" font-weight="400" font-stretch="normal" units-per-em="1000" ascent="850" descent="-150" />
<missing-glyph horiz-adv-x="1000" />
<glyph glyph-name="and-caret" unicode="&#xe800;" d="m313 225l375 0v376" horiz-adv-x="1000" />
<glyph glyph-name="up-nav" unicode="&#xe81f;" d="m65 146l81-83l354 372l353-372l81 83l-434 456l-435-456z" horiz-adv-x="1000" />
<glyph glyph-name="and-download" unicode="&#xe802;" d="m875 38h-750v62h750v-62z m-312 375v250h-125v-250h-125l187-250l188 250h-125z" horiz-adv-x="1000" />
<glyph glyph-name="and-left" unicode="&#xe803;" d="m306 349l325 373l67-59l-273-314l273-315l-67-59l-325 373l0 1z" horiz-adv-x="1000" />
<glyph glyph-name="and-more-vertical" unicode="&#xe804;" d="m406-25v188h188v-188h-188z m0 563h188v188h-188v-188z m188-281v188h-188v-188h188z" horiz-adv-x="1000" />
<glyph glyph-name="and-more" unicode="&#xe805;" d="m125 444h188v-187h-188v187z m563 0v-187h187v187h-187z m-281-187h187v187h-187v-187z" horiz-adv-x="1000" />
<glyph glyph-name="and-right" unicode="&#xe806;" d="m698 348l-325-373l-67 59l274 315l-274 314l68 59l324-373l0-1z" horiz-adv-x="1000" />
<glyph glyph-name="and-search" unicode="&#xe807;" d="m928 51l-167 167c-17 17-47 15-66-4l-3-3l-69 69c42 54 67 121 67 194c0 173-140 313-314 313s-313-140-313-313s140-314 313-314c71 0 137 24 190 64l69-70c-18-19-19-48-2-65l166-166c17-17 47-16 66 4l59 58c19 19 21 49 4 66z m-801 423c0 137 112 249 249 249s249-112 249-249s-111-249-249-249s-249 111-249 249z" horiz-adv-x="1000" />
<glyph glyph-name="and-share" unicode="&#xe808;" d="m728 215c-33 0-63-14-84-36l-263 153c1 6 2 12 2 18c0 6-1 12-2 18l263 152c21-23 51-37 84-37c62 0 113 51 113 113s-51 114-113 114s-114-51-114-114c0-7 1-14 2-21l-261-150c-21 23-51 38-85 38c-63 0-114-50-114-113s51-113 114-113c33 0 64 15 85 38l261-151c-1-7-2-14-2-22c0-62 51-113 114-113s113 51 113 113s-51 113-113 113z" horiz-adv-x="1000" />
<glyph glyph-name="and-up" unicode="&#xe809;" d="m500 548l374-325l-59-67l-315 273l-314-273l-59 67l373 325l0 0z" horiz-adv-x="1000" />
<glyph glyph-name="back" unicode="&#xe80a;" d="m500 174l-313 176l313 176m312-352l-312 176l312 176" horiz-adv-x="1000" />
<glyph glyph-name="down" unicode="&#xe820;" d="m941 479l-124 127l-317-315l-318 315l-124-127l442-441l441 441z" horiz-adv-x="1000" />
<glyph glyph-name="gear" unicode="&#xe821;" d="m820 274l118 40l0 72l-118 40c-8 34-22 67-40 97l55 111l-51 51l-111-55c-30 18-62 32-97 40l-39 118l-73 0l-40-118c-34-8-67-22-97-40l-111 55l-51-51l55-111c-18-30-32-62-40-97l-117-39l0-73l117-40c9-34 22-67 41-96l-56-111l52-52l111 56c29-19 62-32 96-40l40-119l73 0l39 119c35 8 67 21 97 40l111-56l51 52l-55 111c18 29 32 62 40 96z m-320-174c-139 0-251 112-251 251s112 250 251 250s250-112 250-250s-112-251-250-251z" horiz-adv-x="1000" />
<glyph glyph-name="left" unicode="&#xe822;" d="m628-91l127 123l-314 318l314 318l-127 124l-441-442l441-441z" horiz-adv-x="1000" />
<glyph glyph-name="list" unicode="&#xe823;" d="m1000 632h-750v-62l750-1v63z m0-314v63h-750v-63h750z m-750-187v-61h750v61h-750z m-250 406l125 1v125l-125 0v-126z m0-249h125v125h-125v-125z m0-250h125v125h-125v-125z" horiz-adv-x="1000" />
<glyph glyph-name="pages" unicode="&#xe824;" d="m63 601v-689h687l0 688l-687 1z m625-63v-563h-563v563h563z m-500 250v-125h62v62h625v-625l-62 0v-62h125v750h-750z" horiz-adv-x="1000" />
<glyph glyph-name="refresh" unicode="&#xe825;" d="m813 288c-28-145-161-250-313-250c-172 0-312 139-312 312c0 173 141 312 312 313v-98l221 129l-221 128v-95c0-2 0-2 0-2c-206 0-375-167-375-375s169-375 375-375c187 0 347 133 375 313h-62z" horiz-adv-x="1000" />
<glyph glyph-name="right" unicode="&#xe826;" d="m372 792l-127-124l314-318l-314-318l127-123l441 441l-441 442z" horiz-adv-x="1000" />
<glyph glyph-name="sound" unicode="&#xe827;" d="m825-22c-2 0-3 0-5 0l-16 7c0 0 0 0 0 1c-5 1-8 3-10 6c-1 3-1 7 1 12c1 1 22 40 43 101c20 58 44 147 44 244c0 98-24 186-44 243c-21 61-42 100-43 102c-4 11-2 15 8 21l17 8c2 1 5 2 7 2c7 0 12-5 17-16c1-2 2-4 4-8c10-19 32-63 52-125c25-78 37-156 37-232c0-94-24-182-44-240c-22-63-44-104-45-104l-1-2c-5-11-9-20-22-20c0 0 0 0 0 0z m-574 248c0 0-1 0-1 0h-186v248h186c0 0 1 0 1 0l248 173v-595l-248 174z m474-124c-2 0-4 0-6 0l-16 8c0 0 0 0 0 0c-5 1-8 3-9 6c-2 3-2 7 0 12c1 1 16 26 30 64c14 37 30 94 30 157c0 65-16 121-30 157c-14 38-29 62-30 63c-4 11-2 15 9 21l15 8c3 1 5 2 8 2c6 0 12-5 17-16c1-3 3-6 5-11c17-31 61-115 61-229c0-63-16-120-30-156c-16-39-31-64-31-64c0 0 0 0 0 0l-1-2c-6-11-10-20-22-20c0 0 0 0 0 0z m-84 127c-2 0-4 0-6 0l-15 7c0 1 0 1 0 1c-5 1-8 3-9 6c-2 3-2 7 0 12c0 0 20 43 20 94c0 53-20 91-21 93c-4 11-2 16 9 21l15 8c3 1 5 2 8 2c6 0 12-5 17-16c1-3 3-6 4-9c10-19 23-45 23-104c0-33-21-91-22-93l-1-2c-6-11-10-20-22-20c0 0 0 0 0 0z" horiz-adv-x="1000" />
<glyph glyph-name="sound2" unicode="&#xe828;" d="m251 226c0 0-1 0-1 0h-186v248h186c0 0 1 0 1 0l248 173v-595l-248 174z m474-124c-2 0-4 0-6 0l-16 8c0 0 0 0 0 0c-5 1-8 3-9 6c-2 3-2 7 0 12c1 1 16 26 30 64c14 37 30 94 30 157c0 65-16 121-30 157c-14 38-29 62-30 63c-4 11-2 15 9 21l15 8c3 1 5 2 8 2c6 0 12-5 17-16c1-3 3-6 5-11c17-31 61-115 61-229c0-63-16-120-30-156c-16-39-31-64-31-64c0 0 0 0 0 0l-1-2c-6-11-10-20-22-20c0 0 0 0 0 0z m-84 127c-2 0-4 0-6 0l-15 7c0 1 0 1 0 1c-5 1-8 3-9 6c-2 3-2 7 0 12c0 0 20 43 20 94c0 53-20 91-21 93c-4 11-2 16 9 21l15 8c3 1 5 2 8 2c6 0 12-5 17-16c1-3 3-6 4-9c10-19 23-45 23-104c0-33-21-91-22-93l-1-2c-6-11-10-20-22-20c0 0 0 0 0 0z" horiz-adv-x="1000" />
<glyph glyph-name="sound3" unicode="&#xe80b;" d="m251 226c0 0-1 0-1 0h-186v248h186c0 0 1 0 1 0l248 173v-595l-248 174z m390 3c-2 0-4 0-6 0l-15 7c0 1 0 1 0 1c-5 1-8 3-9 6c-2 3-2 7 0 12c0 0 20 43 20 94c0 53-20 91-21 93c-4 11-2 16 9 21l15 8c3 1 5 2 8 2c6 0 12-5 17-16c1-3 3-6 4-9c10-19 23-45 23-104c0-33-21-91-22-93l-1-2c-6-11-10-20-22-20c0 0 0 0 0 0z" horiz-adv-x="1000" />
<glyph glyph-name="sound4" unicode="&#xe80c;" d="m251 226c0 0-1 0-1 0h-186v248h186c0 0 1 0 1 0l248 173v-595l-248 174z" horiz-adv-x="1000" />
<glyph glyph-name="up" unicode="&#xe80d;" d="m58 222l124-126l318 314l317-314l124 126l-441 441l-442-441z" horiz-adv-x="1000" />
<glyph glyph-name="bars" unicode="&#xe80e;" d="m875 632h-750v-62l750-1l0 63l0 0z m0-314v63h-750v-63h750z m-750-187v-61h750v61h-750z" horiz-adv-x="1000" />
<glyph glyph-name="caret" unicode="&#xe80f;" d="m438 475h-125l187-250l188 250h-125" horiz-adv-x="1000" />
<glyph glyph-name="and-down" unicode="&#xe801;" d="m500 156l-373 325l59 67l314-273l315 273l59-67l-374-325l0 0z" horiz-adv-x="1000" />
<glyph glyph-name="close" unicode="&#xe811;" d="m213 593l530-530l43 44l-529 530l-44-44l0 0z m530 44l-530-530l43-44l531 530l-44 44l0 0z" horiz-adv-x="1000" />
<glyph glyph-name="code" unicode="&#xe812;" d="m680 608l-74-72l184-186l-184-185l74-73l257 258l-257 258z m-360-516l74 72l-184 186l184 186l-74 72l-258-258l258-258z" horiz-adv-x="1000" />
<glyph glyph-name="compose" unicode="&#xe813;" d="m890 651l-405-404l-110-22l22 110l404 405l17-17l-405-404l56-56l404 405l17-17z m15 16l20 20c14 13 14 35 0 48l-40 40c-13 14-35 14-48 0l-20-20m-4-272v-445h-625v625h440l63 62h-566v-750h750v570l-62-62z" horiz-adv-x="1000" />
<glyph glyph-name="down-nav" unicode="&#xe814;" d="m934 537l-81 83l-354-372l-353 372l-81-83l435-455l434 455z" horiz-adv-x="1000" />
<glyph glyph-name="download" unicode="&#xe815;" d="m875 538h-187v-63h125v-500h-625v500h125v63h-188v-626h750v626z m-344-323v635l-62 0v-635l-115 112l-41-39l187-188l188 188l-42 40l-115-113z" horiz-adv-x="1000" />
<glyph glyph-name="edit" unicode="&#xe829;" d="m749 511l-404-404l-110-22l22 110l404 404l16-16l-404-405l56-55l404 404l16-16z m16 16l20 20c14 13 14 35 0 48l-40 40c-13 14-35 14-48 0l-20-20" horiz-adv-x="1000" />
<glyph glyph-name="forward" unicode="&#xe82a;" d="m500 526l313-176l-313-176m-312 352l312-176l-312-176" horiz-adv-x="1000" />
<glyph glyph-name="home" unicode="&#xe82b;" d="m939 350l-438 438l0 0l0 0l-438-438l48-47l54 54v-444h16h51h168h47h109h46h168h55h12v444l54-54l48 47z m-501-370v245h125v-245h-125z m332 444v-444h-161v291h-16h-30h-125h-34h-12v-291h-160v444h0l269 269l269-269h0z" horiz-adv-x="1000" />
<glyph glyph-name="info" unicode="&#xe82c;" d="m500 725c-207 0-375-168-375-375s168-375 375-375s375 168 375 375s-168 375-375 375z m63-625h-125v313h125v-313z m-63 375c-34 0-62 28-62 63c0 34 28 62 62 62s63-28 63-62c0-35-28-63-63-63z" horiz-adv-x="1000" />
<glyph glyph-name="left-nav" unicode="&#xe82d;" d="m663-84l83 81l-372 354l372 354l-83 81l-455-435l455-435z" horiz-adv-x="1000" />
<glyph glyph-name="more-vertical" unicode="&#xe82e;" d="m500 163c52 0 94-42 94-94c0-52-42-94-94-94s-94 42-94 94c0 52 42 94 94 94z m-94 468c0-51 42-93 94-93s94 42 94 93s-42 94-94 94s-94-42-94-94z m0-281c0-52 42-94 94-94s94 42 94 94s-42 94-94 94s-94-42-94-94z" horiz-adv-x="1000" />
<glyph glyph-name="more" unicode="&#xe82f;" d="m313 350c0-52-42-94-94-94s-94 42-94 94s42 94 94 94s94-42 94-94z m468 94c-52 0-93-42-93-94s41-94 93-94s94 42 94 94s-42 94-94 94z m-281 0c-52 0-94-42-94-94c0-52 42-94 94-94s94 42 94 94c0 52-42 94-94 94z" horiz-adv-x="1000" />
<glyph glyph-name="pause" unicode="&#xe830;" d="m438 37h-188v625h188v-625z m312 1h-187v625h187v-625z" horiz-adv-x="1000" />
<glyph glyph-name="person" unicode="&#xe832;" d="m501 847c-275 0-497-222-497-497s222-496 497-496s496 222 496 496s-222 497-496 497z m315-801c-25 11-53 26-79 28c-149 12-152 43-152 106c0 47 30 8 52 118c8 36 15 29 36 95c13 47-12 41-12 41s8 35 12 72c10 96-32 187-175 187c-64 0-94-27-133-57c-41-32-55-76-44-130c7-39 21-77 12-72c0 0-22 6-12-41c21-59 32-59 38-95c18-107 47-70 53-118c6-63-7-94-148-106c-25-2-55-16-79-27c-76 79-123 186-123 303c0 242 197 439 439 439s438-197 438-439c0-118-47-226-123-304z" horiz-adv-x="1000" />
<glyph glyph-name="play" unicode="&#xe816;" d="m250 663l567-313l-567-312" horiz-adv-x="1000" />
<glyph glyph-name="plus" unicode="&#xe817;" d="m469 725v-750h61l1 750l-62 0l0 0z m406-344h-750v-61l750-1l0 62l0 0z" horiz-adv-x="1000" />
<glyph glyph-name="right-nav" unicode="&#xe818;" d="m291 786l-83-81l372-354l-372-354l83-81l455 435l-455 435z" horiz-adv-x="1000" />
<glyph glyph-name="search" unicode="&#xe819;" d="m935-10l-279 279c39 54 62 120 62 191c0 181-147 328-328 328s-327-147-327-328s147-327 327-327c71 0 136 22 190 61l279-280l76 76z m-808 470c0 146 118 263 263 263s264-117 264-263s-118-263-264-263s-263 118-263 263z" horiz-adv-x="1000" />
<glyph glyph-name="share" unicode="&#xe81a;" d="m875 538h-187v-63h125v-500h-625v500h125v63h-188v-626h750v626z m-406 197v-572h62v572l115-112l42 40l-188 187l-187-187l41-41l115 113z" horiz-adv-x="1000" />
<glyph glyph-name="star-filled" unicode="&#xe81b;" d="m500 812l116-354l371 0l-300-218l115-353l-301 218l-300-218l114 353l-300 218l371 0l114 354z" horiz-adv-x="1000" />
<glyph glyph-name="star" unicode="&#xe81c;" d="m987 458l-372 0l-115 354l-114-354l-371 0l301-218l-115-353l301 218l299-218l-115 353l301 218z m-252-478l-234 174l-234-174l99 274l-252 171l295 0l92 290l91-290l296 0l-253-175l100-270z" horiz-adv-x="1000" />
<glyph glyph-name="stop" unicode="&#xe81d;" d="m812 37h-625v625h625v-625z" horiz-adv-x="1000" />
<glyph glyph-name="trash" unicode="&#xe81e;" d="m875 725h-250c0 22 0 50 0 62c0 18-15 34-34 34h-182c-19 0-34-16-34-34c0-14 0-41 0-62h-250v-63h69l57-715c0-19 16-34 34-34h432c19 0 34 15 34 34l58 715h66v63z m-459 33c0 14 11 25 24 25h120c13 0 24-11 24-25c0-6 0-20 0-33h-168c0 12 0 26 0 33z m287-757c0-15-11-26-26-26h-355c-14 0-25 11-25 26l-42 661h490l-42-661z m-273 37h-47l-39 562l46 0l40-562z m187 0l-46 0l39 562l47 0l-40-562z m-94 0h-47v562h47v-562z" horiz-adv-x="1000" />
<glyph glyph-name="check" unicode="&#xe810;" d="m857 537l-81 83l-354-372l-135 128l-81-83l216-211l435 455z" horiz-adv-x="1000" />
</font>
</defs>
</svg>

Before

Width:  |  Height:  |  Size: 12 KiB

View File

@ -1,164 +0,0 @@
<!--
Fun with Binary - a fun way of introducing binary
Copyright (C) 2018, Diogo Cordeiro.
This program is free software: you can redistribute it and/or modify
it under the terms of the GNU Affero General Public License as published by
the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.
This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU Affero General Public License for more details.
You should have received a copy of the GNU Affero General Public License
along with this program. If not, see <http://www.gnu.org/licenses/>.
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Fun with Binary</title>
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<!-- Roboto -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:400,500,700">
<link rel="stylesheet" href="css/ratchet.min.css">
<link rel="stylesheet" href="css/ratchet-theme-android.min.css">
<link rel="stylesheet" href="css/app.css">
<script src="js/ratchet.min.js"></script>
</head>
<body onload="start_game()">
<header class="bar bar-nav">
<a class="icon icon-compose pull-right" href="#networkModal"></a>
<h1 class="title">
Have fun with Binary
</h1>
</header>
<div class="content">
<style>
.led {
width: auto;
height: auto;
max-width: 50%;
max-height: 50%;
}
</style>
<div id="statement"></div>
<img class="led" id="led0" onclick="change_state(0)" src="pic_bulboff.gif">
<img class="led" id="led1" onclick="change_state(1)" src="pic_bulboff.gif">
<img class="led" id="led2" onclick="change_state(2)" src="pic_bulboff.gif">
<img class="led" id="led3" onclick="change_state(3)" src="pic_bulboff.gif">
<img class="led" id="led4" onclick="change_state(4)" src="pic_bulboff.gif">
<img class="led" id="led5" onclick="change_state(5)" src="pic_bulboff.gif">
<div id="result"></div>
<input type="button" onclick="end_game()" value="That's it!" id="play_button">
<p>Made with love by <a href="https://www.diogo.site/">Diogo Cordeiro</a></p>
</div>
<script>
// URL for server communication
URL = "http://localhost";
/**
* Turn current answer bits accordingly
*/
function change_state(led_id)
{
let image = document.getElementById("led"+led_id);
if (image.src.match("bulbon"))
image.src = "pic_bulboff.gif";
else
image.src = "pic_bulbon.gif";
let xhttp = new XMLHttpRequest();
xhttp.open("GET", URL+"?change_state="+led_id+"&t=" + Math.random(), true);
xhttp.send();
}
/**
* Starts game
*/
function start_game()
{
let xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function()
{
if (this.readyState == 4 && this.status == 200)
document.getElementById("statement").innerHTML = "Write "+this.responseText+" in binary :)";
};
xhttp.open("GET", URL+"?start&t=" + Math.random(), true);
xhttp.send();
}
/**
* Prepares everything for a new game
*/
function restart_game()
{
document.getElementById("result").innerHTML = "";
start_game();
for (let led_id = 0; led_id <= 5; led_id++)
{
let image = document.getElementById("led"+led_id);
image.src = "pic_bulboff.gif";
}
document.getElementById("play_button").onclick=end_game;
document.getElementById("play_button").value="That's it!";
}
/**
* Compares the given answer with the right answer and tells the result
*/
function end_game()
{
let xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function()
{
if (this.readyState == 4 && this.status == 200)
document.getElementById("result").innerHTML = this.responseText;
};
xhttp.open("GET", URL+"?end&t=" + Math.random(), true);
xhttp.send();
document.getElementById("play_button").onclick=restart_game;
document.getElementById("play_button").value="Play again!";
}
/**
* Sets the URL for server communication
*/
function setURL()
{
URL = document.getElementById("new_url").value;
}
</script>
<!-- Network modal -->
<div id="networkModal" class="modal">
<header class="bar bar-nav">