Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel is required to process package imports. If you need a different preprocessor remove all packages first.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

HTML

              
                <!--
  All the Polymer paper-* and core-* elements have been imported here for you. Prototype away! 
-->

<!-- Let's build a countdown clock -->
  <paper-tabs selected="0">
  
    <paper-tab onclick="stuff(0);">Timer</paper-tab>
    <paper-tab onclick="stuff(1);">Countdown</paper-tab>
    <paper-tab onclick="stuff(2);">Clock</paper-tab>
    
  </paper-tabs>

<!--
  <select onchange="change();">
    <option value="cross-fade-all" selected>cross-fade-all</option>
    <option value="slide-from-right">slide-from-right</option>
  </select>
-->

 <core-animated-pages  transitions="slide-from-right">
    <section>
      <div layout vertical center center-justified style="background:#B4E0E1;">
        <div><flip-clock displayMode="timer" commandButtons="true"></flip-clock></div>
      </div>
    </section>
    <section>
      <div layout vertical center center-justified style="background:#F9B24F;">
        <div><flip-clock displayMode="countdown" startFrom="20" commandButtons="true"></flip-clock></div>
      </div>
    </section>
    <section>
      <div layout vertical center center-justified style="background:#E61875">
        <div><flip-clock></flip-clock></div>
      </div>
    </section>
   <!--
    <section>
      <div layout vertical center center-justified style="background:orange;">
        <div>4</div>
      </div>
    </section>
    <section>
      <div layout vertical center center-justified style="background:green;">
        <div>5</div>
      </div>
    </section>
-->
  </core-animated-pages>

<!--- More custom stuff -->



<!--
A flip clock, timer and countdown made with Polymer

##### Example

    <flip-clock></flip-clock>

@element flip-clock
@blurb A flip clock, timer and countdown made with Polymer
@status alpha
@homepage https://Granze.github.io/flip-clock
-->
<polymer-element name="flip-clock" attributes="displayMode commandButtons showSeconds startFrom auto">

  <template>

    <style>
      :host {
  display: block;
}

:host #clock {
  font-size: 0;
  font-family: RobotoDraft, 'Helvetica Neue', Helvetica, Arial;
  font-weight: bold;
}

:host #clock * {
  font-size: 70px;
}

      /*
:host #clock > span {
  position: relative;
  display: inline-block;
  margin-right: 10px;
  padding: 5px 15px;
  border-radius: 4px;
  color: #fff;
  box-shadow: 1px 1px 1px #555;
  background-color: #333;
  background: -webkit-linear-gradient(top, #333 0%, #444 50%, #333 51%, #222 100%);
  background: linear-gradient(to bottom, #333 0%,#444 50%,#333 51%,#222 100%);
}

:host #clock > span:after {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
  height: 3px;
  background-color: #111;
}

:host #clock > b {
  color: #333;
  margin-right: 10px;
}

:host .btn {
  margin: 20px 10px 10px 10px;
  padding: 5px 10px;
  border: 1px solid #000;
  border-radius: 2px;
  cursor: pointer;
  color: #dedede;
  background-color: #333;
}
  */
      
  :host paper-button {
    font-size: 20px;
  }
      
    :host paper-button.colored {
      color: #4285f4;
      fill: #4285f4;
    }

    :host paper-button[raisedButton].colored {
      background: #4285f4;
      color: #fff;
    }

    :host paper-button[raisedButton].colored #ripple,
    :hsot paper-button[raisedButton].colored::shadow #ripple {
      color: #2a56c6;
    }

    :host paper-button[raisedButton].colored #focusBg,
    :host paper-button[raisedButton].colored::shadow #focusBg {
      background: #3367d6;
    }
    </style>

    <content>

      <div id="clock">
        <span id="hours0">{{time[0]}}</span><span id="hours1">{{time[1]}}</span>
        <b>:</b>
        <span id="minutes0">{{time[2]}}</span><span id="minutes1">{{time[3]}}</span>

        <template if="{{showSeconds}}">
          <b>:</b>
          <span id="seconds0">{{time[4]}}</span><span id="seconds1">{{time[5]}}</span>
        </template>

      </div>
      
      <template if="{{displayMode == 'countdown'}}">
        <input type="number" value="{{time}}">
        <!--
        <input type="number" value="{{time[0]}}"><input type="number" value="{{time[1]}}">:
        <input type="number" value="{{time[2]}}"><input type="number" value="{{time[3]}}">:
       <input type="number" value="{{time[4]}}"><input type="number" value="{{time[5]}}">
-->
      </template>

      <template if="{{commandButtons && displayMode !== 'clock'}}">
        <!--
        <button class="toggle btn" on-click="{{startCount}}" disabled?="{{isRunning}}">Start </button>
        -->
        <paper-button raisedButton class="colored" on-click="{{startCount}}" disabled?="{{isRunning}}" label="start"></paper-button>
        <!--
        <button class="toggle btn" on-click="{{stopCount}}">Stop</button>
        -->
            <paper-button raisedButton class="colored" on-click="{{stopCount}}" label="Stop"></paper-button>     
<!--
        <button class="reset btn" on-click="{{resetCount}}">Reset</button>-->
        
        <paper-button raisedButton class="colored" on-click="{{resetCount}}">Reset</paper-button>
      </template>

    </content>

  </template>

  <script>

    Polymer('flip-clock', {
      /**
       * The `displayMode` attribute determine the kind of clock to display.
       *
       * @attribute displayMode
       * @type string
       * @default clock
       * @options clock, countdown, timer
       */
      displayMode: 'clock', 

      /**
       * Display start/stop and reset buttons
       *
       * @attribute commandButtons
       * @type bool
       */
      commandButtons: false,

      /**
       * Show or hide seconds
       *
       * @attribute showSeconds
       * @type bool
       * @default true
       */
      showSeconds: true,

      /**
       * Set the minutes to start from for the countdown mode
       *
       * @attribute startFrom
       * @type int
       * @default null
       */
      startFrom: null,

      /**
       * String containing the digits displayed in the flip clock
       *
       * @attribute time
       * @type string
       * @default '000000'
       */
      time: '000000',

      /**
       * Set the hours, minutes and seconds in the timer
       *
       * @attribute timer
       * @type string
       */
      timer: null,

      /**
       * Auto start timer and/or countdown
       *
       * @attribute auto
       * @type bool
       */
      auto: false,

      /**
       * Track if the timer (or the countdown) is running or not
       *
       * @attribute isRunning
       * @type bool
       */
      isRunning: false,

      /**
       * The `createClock` method start a clock that display the current time.
       *
       * @method createClock
       */
      createClock: function() {
        this.time = moment().format('HHmmss');
        this.async(this.createClock, null, 1000);
      },

      /**
       * The `createTimer` method create a timer
       *
       * @method createTimer
       */
      createTimer: function() {
        if(this.isRunning) {
          this.time = this.timer.add('s', 1).format('HHmmss');
          this.async(this.createTimer, null, 1000);
        }
      },

      /**
       * The `createCountdown` method create a countdown
       *
       * @method createCountdown
       */
      createCountdown: function() {
        if(this.isRunning) {
          if(this.time > 0) {
            this.time = this.timer.subtract('s', 1).format('HHmmss');
            this.async(this.createCountdown, null, 1000);
          }
        }
      },
      /**
       * The `startCount` method does no work at this time.
       *
       * @method startCount
       */
      startCount: function() {
        if(!this.timer) {
          this.timer = moment().hours(0).minutes(this.startFrom || 0).seconds(0);
        }
        this.isRunning = true;
        this.startFrom ? this.createCountdown() : this.createTimer();
      },

      /**
       * The `stopCount` stop the running timer or countdown
       *
       * @method stopCount
       */
      stopCount: function() {
        this.isRunning = false;
      },

      /**
       * The `resetCount` reset che counter
       *
       * @method resetCount
       */
      resetCount: function() {
        this.isRunning = false;
        this.time = this.startFrom ? '00' + this.startFrom + '00' : '000000';
        this.timer = null;
      },
      created: function() {
        this.resetCount();
      },
      ready: function() {
        switch(this.displayMode) {
          case 'timer':
            if(this.auto === true) {
              this.startCount();
            }
            break;
          case 'countdown':
            if(this.auto === true) {
              this.createCountdown();
            }
            break;
          default:
            this.createClock();
        }
        if(this.startFrom) {
          this.time = '00' + this.startFrom + '00';
        }
      }
    });

  </script>

</polymer-element>

<!--https://granze.github.io/flip-clock/components/flip-clock/demo.html-->
              
            
!

CSS

              
                body {
   font-family: RobotoDraft, 'Helvetica Neue', Helvetica, Arial;
  margin:0;
}


core-animated-pages {
  position: absolute;
  top: 50px;
  right: 0;
  bottom: 0;
  left: 0;
  font-size: 72px;
  overflow: hidden;
}

section > div {
  height: 100%;
  color: white;
}

/*tabs*/
 paper-tabs, core-toolbar {
      background-color: #00bcd4;
      color: #fff;
      box-shadow: 0px 3px 2px rgba(0, 0, 0, 0.2);
    }
    
    core-toolbar paper-tabs {
      box-shadow: none;
    }
    
    paper-tabs[noink][nobar] paper-tab.core-selected {
      color: #ffff8d;
    }
    
    paper-tabs.transparent-teal {
      background-color: transparent;
      color: #00bcd4;
      box-shadow: none;
    }
    
    paper-tabs.transparent-teal::shadow #selectionBar {
      background-color: #00bcd4;
    }
    
    paper-tabs.transparent-teal paper-tab::shadow #ink {
      color: #00bcd4;
    }
    
    paper-button {
      margin: 1em;
      width: 10em;
    }


              
            
!

JS

              
                    function change() {
      var s = document.querySelector('select');
      document.querySelector('core-animated-pages').transitions = document.querySelector('select').options[s.selectedIndex].value;
    }

    function stuff(page) {
      var p = document.querySelector('core-animated-pages');
      p.selected = page;

    }
              
            
!
999px

Console