Skip to content

Commit

Permalink
Merge pull request #14 from danielabar/feature/13-add-intro
Browse files Browse the repository at this point in the history
Feature/13 add intro
  • Loading branch information
danielabar authored Dec 31, 2016
2 parents d49ed0f + 98aafa3 commit 4d16288
Show file tree
Hide file tree
Showing 28 changed files with 391 additions and 78 deletions.
13 changes: 6 additions & 7 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -16,13 +16,12 @@ I wanted similar features but for the web, with no need to install any software.

## Attributions

Tweet sound [Creative Commons](https://notificationsounds.com/message-tones/rvrb2-15)

Ding sound [Sampling Plus 1.0](http://soundbible.com/1424-Air-Plane-Ding.html)

Owl png [Clipart Panda](http://www.clipartpanda.com/clipart_images/owl-clipart-post-3-4374931), [Free clip art](http://www.clipartpanda.com/categories/owl-clip-art-free-cute), which I converted to SVG with [Inkscape](https://inkscape.org/en/), then lots of manual editing to make the paths useful for animation.

Checkmark SVG [Wiki Commons](https://commons.wikimedia.org/wiki/File:Echo_curation_alt_check_mark.svg)
* Tweet mp3 [Creative Commons](https://notificationsounds.com/message-tones/rvrb2-15).
* Ding mp3 [Sampling Plus 1.0](http://soundbible.com/1424-Air-Plane-Ding.html).
* Owl png [Clipart Panda](http://www.clipartpanda.com/clipart_images/owl-clipart-post-3-4374931), [Free clip art](http://www.clipartpanda.com/categories/owl-clip-art-free-cute), which I converted to SVG with [Inkscape](https://inkscape.org/en/), then lots of manual editing to make the paths useful for animation.
* Checkmark SVG [Wiki Commons](https://commons.wikimedia.org/wiki/File:Echo_curation_alt_check_mark.svg).
* Window SVG [Flaticon Basic License](https://www.shareicon.net/window-decoration-curtains-furniture-and-household-construction-and-tools-846321).
* Icons from [IcoMoon - Free](https://icomoon.io/app/#/select).

## Development

Expand Down
9 changes: 9 additions & 0 deletions css/_functions.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
// https://www.sitepoint.com/better-solution-managing-z-index-sass/

@function z($layer) {
@if not map-has-key($z-layers, $layer) {
@warn "No layer found for `#{$layer}` in $z-layers map. Property omitted.";
}

@return map-get($z-layers, $layer);
}
15 changes: 15 additions & 0 deletions css/_icon.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
.icon {
display: inline-block;
width: 1em;
height: 1em;
vertical-align: middle;
stroke-width: 0;
stroke: currentColor;
fill: currentColor;
}

// adjustments needed to make iconmoon svg icons align with text in buttons
.icon-button {
margin-right: 1px;
margin-bottom: 4px;
}
98 changes: 98 additions & 0 deletions css/_modal.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,98 @@
// https://css-tricks.com/considerations-styling-modal/

.modal-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba($settings-background, .9);
z-index: z("modalOverlay");
}

.modal {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);

width: 800px;
max-width: 100%;
height: 500px;
max-height: 100%;

background-color: $modal-body-background;
color: $modal-color;
border: 1px solid $modal-header-background;
border-radius: 4px;

box-shadow: 0 5px 15px rgba(0,0,0,.5);

z-index: z("modal");
}

.modal-header {
padding: 30px 0;
background-color: $modal-header-background;
}

.modal-title {
margin-left: 15px;
color: $modal-title;
font-size: 3rem;
}

.modal-body {
/* cover the modal */
position: absolute;
top: 40;
left: 0;
width: 100%;
height: 100%;

/* spacing as needed */
padding: 20px 50px 20px 20px;

/* let it scroll */
overflow: auto;

font-size: 2rem;
}

.modal-section {
margin-bottom: 15px;
}

.text-wrap {
float: left;
margin-right: 15px;
}

.modal-actions {
margin-top: 40px;
text-align: center;
}

.modal-start-button {
@include settings-button();
}

.accent-button {
background-color: $modal-accent;
&:hover {
background-color: darken($modal-accent, 10%);
}
}

.modal-close {
position: absolute;
cursor: pointer;
top: 10px;
right: 10px;
@include settings-button(1.1em, 5px 8px, 50%);
z-index: z("modalClose");
}

.closed {
display: none;
}
5 changes: 5 additions & 0 deletions css/_range.scss
Original file line number Diff line number Diff line change
Expand Up @@ -10,3 +10,8 @@ input[type=range]::-moz-range-track {
input[type=range]:focus::-moz-range-track {
background: #ccc;
}

input[type=range],
input[type=checkbox] {
cursor: pointer;
}
2 changes: 1 addition & 1 deletion css/_settings.scss
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@
height: 100%;
width: $settings-width;
padding: 10px;
z-index: 2;
z-index: z("sidebar");
color: $settings-color;
background-color: $settings-background;
border-right: 1px solid $settings-border;
Expand Down
13 changes: 13 additions & 0 deletions css/_vars.scss
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,12 @@ $app-background: #333333;
$app-color: darken(#fff, 5%);
$app-font-stack: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;

$modal-header-background: #333;
$modal-title: #eee;
$modal-color: #888;
$modal-body-background: #3a3a3a;
$modal-accent: #399599;

$settings-width: 330px;
$settings-color: darken($app-color, 15%);
$settings-help-color: darken($app-color, 20%);
Expand All @@ -16,3 +22,10 @@ $owl-background-color: #fbfcfc;
$owl-accent-color: #ea9f4b;
$owl-extremities-color: #967643;
$owl-dark-color: #000505;

$z-layers: (
"sidebar": 2,
"modalClose": 3,
"modalOverlay": 4,
"modal": 5
);
3 changes: 3 additions & 0 deletions css/styles.scss
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,10 @@

// app
@import 'vars';
@import 'functions';
@import 'mixins';
@import 'icon';
@import 'modal';
@import 'animation';
@import 'owl';
@import 'range';
Expand Down
Binary file added docs/9a62c3d1f3ca4b470bc4a446f5c9c9e1.mp3
Binary file not shown.
Binary file added docs/b506a66a688dd0df4b191f1ff1611c45.mp3
Binary file not shown.
47 changes: 47 additions & 0 deletions docs/bundle-58aad24c8c76be345d78.js

Large diffs are not rendered by default.

1 change: 1 addition & 0 deletions docs/bundle-58aad24c8c76be345d78.js.map

Large diffs are not rendered by default.

46 changes: 0 additions & 46 deletions docs/bundle-8181fbcbd0547906b499.js

This file was deleted.

1 change: 0 additions & 1 deletion docs/bundle-8181fbcbd0547906b499.js.map

This file was deleted.

62 changes: 57 additions & 5 deletions docs/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -8,12 +8,32 @@
<link rel="shortcut icon" href="owl.ico">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/flipclock/0.7.8/flipclock.min.css" integrity="sha256-MSeNrYhmfZbyTUAhVy7w153T7LFxQfCf/DBDjtbvZdg=" crossorigin="anonymous" />
<!-- rev'd css bundle injected here -->
<link href="/styles-8181fbcbd0547906b499.css" rel="stylesheet"></head>
<link href="/styles-58aad24c8c76be345d78.css" rel="stylesheet"></head>
<body>

<!-- icons -->
<svg style="position: absolute; width: 0; height: 0; overflow: hidden;" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<!-- settings -->
<symbol id="icon-cog" viewBox="0 0 32 32">
<title>cog</title>
<path class="path1" d="M29.181 19.070c-1.679-2.908-0.669-6.634 2.255-8.328l-3.145-5.447c-0.898 0.527-1.943 0.829-3.058 0.829-3.361 0-6.085-2.742-6.085-6.125h-6.289c0.008 1.044-0.252 2.103-0.811 3.070-1.679 2.908-5.411 3.897-8.339 2.211l-3.144 5.447c0.905 0.515 1.689 1.268 2.246 2.234 1.676 2.903 0.672 6.623-2.241 8.319l3.145 5.447c0.895-0.522 1.935-0.82 3.044-0.82 3.35 0 6.067 2.725 6.084 6.092h6.289c-0.003-1.034 0.259-2.080 0.811-3.038 1.676-2.903 5.399-3.894 8.325-2.219l3.145-5.447c-0.899-0.515-1.678-1.266-2.232-2.226zM16 22.479c-3.578 0-6.479-2.901-6.479-6.479s2.901-6.479 6.479-6.479c3.578 0 6.479 2.901 6.479 6.479s-2.901 6.479-6.479 6.479z"></path>
</symbol>
<!-- reset -->
<symbol id="icon-loop2" viewBox="0 0 32 32">
<title>loop2</title>
<path class="path1" d="M27.802 5.197c-2.925-3.194-7.13-5.197-11.803-5.197-8.837 0-16 7.163-16 16h3c0-7.18 5.82-13 13-13 3.844 0 7.298 1.669 9.678 4.322l-4.678 4.678h11v-11l-4.198 4.197z"></path>
<path class="path2" d="M29 16c0 7.18-5.82 13-13 13-3.844 0-7.298-1.669-9.678-4.322l4.678-4.678h-11v11l4.197-4.197c2.925 3.194 7.13 5.197 11.803 5.197 8.837 0 16-7.163 16-16h-3z"></path>
</symbol>
</defs>
</svg>

<!-- open sidebar -->
<div class="settings-open">
<button id="settingsOpen" class="settings-open-button">Settings</button>
<button id="settingsOpen" class="settings-open-button">
<svg class="icon icon-button icon-cog"><use xlink:href="#icon-cog"></use></svg>
<span>Settings</span>
</button>
</div>

<!-- sidebar -->
Expand Down Expand Up @@ -92,7 +112,10 @@
<!-- reset -->
<div class="settings-control">
<div class="settings-input-wrapper settings-button-wrapper">
<input type="button" id="restoreSettings" class="settings-restore-button" value="Restore Defaults"/>
<button id="restoreSettings" class="settings-restore-button">
<svg class="icon icon-button icon-cog"><use xlink:href="#icon-loop2"></use></svg>
<span>Restore Defaults</span>
</button>
</div>
</div>
</form>
Expand All @@ -118,7 +141,7 @@
</section>

<!-- messaging -->
<section class="message"></section>
<section class="message">Leave this running...</section>

<!-- main content -->
<section class="owl-wrapper">
Expand Down Expand Up @@ -230,9 +253,38 @@

</section><!--//wrapper-->

<!-- intro modal -->
<div class="modal closed" id="modal">
<button id="modalClose" class="modal-close">&#x2715;</button>
<div class="modal-header">
<h1 class="modal-title">Welcome to Eye Hoot</h1>
</div>
<div class="modal-body">
<p class="modal-section">
<img id="modalLogo" alt="owl" width="90px" class="text-wrap">
Eye Hoot reduces eye strain from computer use by reminding you to do a few easy eye exercises every 10 - 15 minutes.
</p>
<p class="modal-section">
Simply keep this tab open while you do your work.
</p>
<p class="modal-section">
When you receive a notification, click on it and follow along with the owl to do the eye exercises.
</p>
<div class="modal-actions">
<button id="modalStart" class="modal-start-button accent-button">Let's get started</button>
</div>
<!-- <p>
Don't show me again checkbox...
</p> -->
</div>
</div>

<!-- modal overlay -->
<div class="modal-overlay closed" id="modalOverlay"></div>

<!-- flipclock.reset() only works with older jquery -->
<script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flipclock/0.7.8/flipclock.min.js" integrity="sha256-zZFgUYWREnXJDw3PMQASiGmzHVL+VNfcA5eaXhipwag=" crossorigin="anonymous"></script>
<!-- rev'd js bundle injected here -->
<script type="text/javascript" src="/bundle-8181fbcbd0547906b499.js"></script></body>
<script type="text/javascript" src="/bundle-58aad24c8c76be345d78.js"></script></body>
</html>
2 changes: 2 additions & 0 deletions docs/styles-58aad24c8c76be345d78.css

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions docs/styles-58aad24c8c76be345d78.css.map

Large diffs are not rendered by default.

Loading

0 comments on commit 4d16288

Please sign in to comment.