From 8ccca94865b5eecf9867c90a1b49beb7aa940327 Mon Sep 17 00:00:00 2001 From: Your Name Date: Sun, 1 May 2016 14:10:13 +0200 Subject: [PATCH] Init, port from CodePen --- .gitignore | 3 ++ app.coffee | 23 +++++++++++++ app.production.coffee | 16 +++++++++ assets/css/_settings.styl | 68 ++++++++++++++++++++++++++++++++++++ assets/css/master.styl | 72 +++++++++++++++++++++++++++++++++++++++ assets/img/.keep | 0 assets/js/main.coffee | 60 ++++++++++++++++++++++++++++++++ package.json | 16 +++++++++ readme.md | 17 +++++++++ views/index.jade | 6 ++++ views/layout.jade | 25 ++++++++++++++ 11 files changed, 306 insertions(+) create mode 100644 .gitignore create mode 100644 app.coffee create mode 100644 app.production.coffee create mode 100644 assets/css/_settings.styl create mode 100644 assets/css/master.styl create mode 100644 assets/img/.keep create mode 100644 assets/js/main.coffee create mode 100644 package.json create mode 100644 readme.md create mode 100644 views/index.jade create mode 100644 views/layout.jade diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..391c492 --- /dev/null +++ b/.gitignore @@ -0,0 +1,3 @@ +.DS_Store +node_modules +public \ No newline at end of file diff --git a/app.coffee b/app.coffee new file mode 100644 index 0000000..f17516a --- /dev/null +++ b/app.coffee @@ -0,0 +1,23 @@ +axis = require 'axis' +rupture = require 'rupture' +autoprefixer = require 'autoprefixer-stylus' +js_pipeline = require 'js-pipeline' +css_pipeline = require 'css-pipeline' + +module.exports = + ignores: ['readme.md', '**/layout.*', '**/_*', '.gitignore', 'ship.*conf'] + + extensions: [ + js_pipeline(files: 'assets/js/*.coffee'), + css_pipeline(files: 'assets/css/*.styl') + ] + + stylus: + use: [axis(), rupture(), autoprefixer()] + sourcemap: true + + 'coffee-script': + sourcemap: true + + jade: + pretty: true \ No newline at end of file diff --git a/app.production.coffee b/app.production.coffee new file mode 100644 index 0000000..b617a37 --- /dev/null +++ b/app.production.coffee @@ -0,0 +1,16 @@ +axis = require 'axis' +rupture = require 'rupture' +autoprefixer = require 'autoprefixer-stylus' +js_pipeline = require 'js-pipeline' +css_pipeline = require 'css-pipeline' + +module.exports = + ignores: ['readme.md', '**/layout.*', '**/_*', '.gitignore', 'ship.*conf'] + + extensions: [ + js_pipeline(files: 'assets/js/*.coffee', out: 'js/build.js', minify: true, hash: true), + css_pipeline(files: 'assets/css/*.styl', out: 'css/build.css', minify: true, hash: true) + ] + + stylus: + use: [axis(), rupture(), autoprefixer()] \ No newline at end of file diff --git a/assets/css/_settings.styl b/assets/css/_settings.styl new file mode 100644 index 0000000..21fc133 --- /dev/null +++ b/assets/css/_settings.styl @@ -0,0 +1,68 @@ +// --------------- +// Axis Settings +// Check here for updates: +// https://github.com/jenius/axis/blob/master/axis/settings.styl +// --------------- + +// Font stacks (add your own!) +$helvetica-neue = "Helvetica Neue", HelveticaNeue, Helvetica, Arial, sans-serif +$helvetica = "Helvetica Neue", Helvetica, Arial, sans-serif +$georgia = Georgia, Cambria, "Times New Roman", Times, serif +$lucidia-grande = "Lucida Grande", Tahoma, Verdana, Arial, sans-serif +$monospace = unquote("'Bitstream Vera Sans Mono', Consolas, Courier, monospace") +$verdana = Verdana, Geneva, sans-serif + +// Default font settings +$font-stack = $helvetica-neue +$font-size = 16 +$font-color = #555 + +// Colors (via http://clrs.cc - slightly modded) +$navy = #001F3F +$blue = #0074D9 +$aqua = #7FDBFF +$teal = #39CCCC +$olive = #3D9970 +$green = #2ECC40 +$lime = #01FF70 +$yellow = #FFDC00 +$orange = #FF851B +$red = #D13F19 +$maroon = #85144B +$fuchsia = #F012BE +$purple = #B10DC9 +$white = #FFFFFF +$silver = #DDDDDD +$gray = #AAAAAA +$black = #222222 + +// Use as default HTML colors +navy = $navy +blue = $blue +aqua = $aqua +teal = $teal +olive = $olive +green = $green +lime = $lime +yellow = $yellow +orange = $orange +red = $red +maroon = $maroon +fuchsia = $fuchsia +purple = $purple +white = $white +silver = $silver +gray = $gray +black = $black + +// Default color +$default-color = $blue + +// Text highlight color +$highlight-color = $blue + +// Custom image base path for axis mixins +$img-path = '/img/' + +// Ligatures +$ligatures = false \ No newline at end of file diff --git a/assets/css/master.styl b/assets/css/master.styl new file mode 100644 index 0000000..0d2516f --- /dev/null +++ b/assets/css/master.styl @@ -0,0 +1,72 @@ +@import '_settings' + +normalize-css() + +swift-out = cubic-bezier(.55,0,.1,1) +* + transition all 0.3s swift-out +@keyframes boot + 0% + opacity 0 + transform translateX(50px) scale(0.7) + 100% + opacity 1 + transform translateX(0) scale(1) + +green = #58C691 +red = #FF6B6B +grey = #556270 + +.controls + color white +body + font-family Open Sans + user-select none +.card + width 300px + margin 50px auto + border-radius 4px + overflow hidden + opacity 0 + position relative + background grey + .break& + background green + .work& + background red + .booted& + animation boot 0.4s swift-out + opacity 1 + +.controls + position absolute + bottom 15px + left 0 + width 100%s +input +button + color white + display block + float left + background transparent + border none + width 25% + border-bottom 1px solid white + padding 5px 0 + margin 0 -2px + padding 4px + text-align center + outline none +input + &:focus + border-bottom 3px solid white + margin-bottom -3px + border-radius 2px +.countdown + font-weight 300 + letter-spacing 10px + font-size 50px + padding 40px 40px 60px + text-align center + color white + overflow hidden diff --git a/assets/img/.keep b/assets/img/.keep new file mode 100644 index 0000000..e69de29 diff --git a/assets/js/main.coffee b/assets/js/main.coffee new file mode 100644 index 0000000..8130073 --- /dev/null +++ b/assets/js/main.coffee @@ -0,0 +1,60 @@ +iconLink = "http://www.wpclipart.com/food/fruit/tomato/tomato.png" +app = angular.module 'pomodoroApp', [] +app.controller 'PomodoroController', + class PomodoroController + constructor: ($scope,$interval) -> + # Ask for notifications + Notification.requestPermission (status) => + notify('Notifications enabled') + @notificationsEnabled = status is "granted" + notify = (message) -> + new Notification(message, {body: "Pomodorski", icon: iconLink}) + playAlertSound = => @audio.play() + + # setup + $scope.booted = true + $scope.running = false + $scope.break = false + $scope.workDuration = 25 + $scope.breakDuration = 5 + $scope.countDown = $scope.workDuration * 60 + @notificationsEnabled = false + @audio = new Audio('http://www.fenderrhodes.com/audio/mark1b-stage-1979-mellow.mp3') + + + # converter method + sessionDurationInSeconds = (type) -> + if type == 'work' + duration = $scope.workDuration + $scope.break = false + if type == 'break' + duration = $scope.breakDuration + $scope.break = true + duration * 60 + + # countdown method + count = -> $scope.countDown-- + + $scope.startSession = (type) => + alert('Warning: no notifications') if !@notificationsEnabled + # stop old timer and set session properties + $interval.cancel @currentSession if angular.isDefined @currentSession + $scope.countDown = sessionDurationInSeconds(type) + @currentSession = $interval count , 1000, $scope.countDown + + # when $interval has ended + @currentSession.then () => + newSessionType = if type == 'work' then 'break' else 'work' + $scope.startSession(newSessionType) + notify('Time for ' + newSessionType) + @audio.play() + $scope.running = true + +app.filter 'clockTime', -> + (totalSeconds) -> + hours = Math.floor(totalSeconds / 3600) + totalSeconds %= 3600 + minutes = Math.floor(totalSeconds / 60) + seconds = totalSeconds % 60 + seconds = "0" + seconds if seconds < 10 + minutes + ':' + seconds diff --git a/package.json b/package.json new file mode 100644 index 0000000..d1718dd --- /dev/null +++ b/package.json @@ -0,0 +1,16 @@ +{ + "name": "pomodo", + "description": "", + "dependencies": { + "autoprefixer-stylus": "0.8.x", + "axis": "0.5.x", + "coffee-script": "^1.0.0", + "css-pipeline": "0.3.x", + "jade": "^1.0.0", + "js-pipeline": "0.2.x", + "jstransformer-marked": "^1.0.0", + "marked": "0.3.x", + "rupture": "0.6.x", + "stylus": "0.52.x" + } +} \ No newline at end of file diff --git a/readme.md b/readme.md new file mode 100644 index 0000000..14f3c17 --- /dev/null +++ b/readme.md @@ -0,0 +1,17 @@ +# pomodo + + + +### Setup + +- make sure [node.js](http://nodejs.org) and [roots](http://roots.cx) are installed +- clone this repo down and `cd` into the folder +- run `npm install` +- run `roots watch` +- ??? +- get money + +### Deploying + +- If you just want to compile the production build, run `roots compile -e production` and it will build to public. +- To deploy your site with a single command, run `roots deploy -to XXX` with `XXX` being whichever [ship](https://github.com/carrot/ship#usage) deployer you want to use. \ No newline at end of file diff --git a/views/index.jade b/views/index.jade new file mode 100644 index 0000000..218e65a --- /dev/null +++ b/views/index.jade @@ -0,0 +1,6 @@ +extends layout + +block content + h3 Welcome to roots! + :marked + Find tutorials and documentation at http://roots.cx : ) \ No newline at end of file diff --git a/views/layout.jade b/views/layout.jade new file mode 100644 index 0000000..4de5cd1 --- /dev/null +++ b/views/layout.jade @@ -0,0 +1,25 @@ +doctype html +doctype html +html(ng-app="pomodoroApp") + head + link(href='http://fonts.googleapis.com/css?family=Open+Sans:400,300' rel='stylesheet' type='text/css') + title Pomodorski + meta(charset='utf8') + meta(http-equiv='X-UA-Compatible', content='IE=edge, chrome=1') + meta(name='description', content='description of your site') + meta(name='author', content= "author of the site") + //- uncomment if your site is responsive! + //- meta(name="viewport" content="width=device-width, initial-scale=1") + title= _path + != css() + script(src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js") + body + .card(ng-class="{work: !break && running, break: break && running, booted: booted}" ng-controller='PomodoroController') + .countdown {{countDown | clockTime}} + .controls + input(ng-model='workDuration' ) + input(ng-model='breakDuration') + button(ng-click="startSession('work')") Work + button(ng-click="startSession('break')") Break + // block content + != js()