Init, port from CodePen

.gitignore

@@ -0,0 +1,3 @@
+.DS_Store
+node_modules
+public

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

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()]

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

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

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

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"
+  }
+}

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.

views/index.jade

@@ -0,0 +1,6 @@
+extends layout
+
+block content
+  h3 Welcome to roots!
+  :marked
+    Find tutorials and documentation at http://roots.cx : )

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()