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 includes JSX processing.

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

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

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

              
                <div class="pomodoros" id="app" :class="[{'is-play': isPlay}, {'relax': curMission.state === 2}]">
  <div class="l-panel">
    <div class="l-block">
      <div class="add-mission-block c-pointer">
        <input class="word" type="text" placeholder="ADD A NEW MISSION..." 
               v-on:keypress.enter="addMission" v-model="missionTitle"/>
        <h5 class="add" @click="addMission">+</h5>
      </div>
      <div v-if="missionList.length">
        <div class="play-panel">
          <div class="play-block" >
            <div class="play-icon">
              <i class="material-icons c-pointer" @click="setPlay" 
                 v-if="!isPlay">play_arrow</i>
              <i class="material-icons c-pointer" @click="setPlay" v-else>pause</i>
              <div class="dot"></div>
            </div>
          </div>
        </div>
        <div class="now-to-do">
          <div class="left">
            <div class="check" :class="{done: curMission.state === 3}"></div>
          </div>
          <div class="right">
            <p>{{curMission.title}}</p>
            <div class="process-bar">
              <div class="process"></div>
              <div class="process"></div>
              <div class="process"></div>
              <div class="process"></div>
              <div class="process"></div>
            </div>
          </div>
        </div>
        <div class="now-time">
          {{showTime(curMission.time)}}
        </div>
        <div class="to-do-list">
          <ul>
            <li class="to-do-block" v-show="mIndex !== 0 && (mIndex < 4 || showAll)" 
                v-for="(mission, mIndex) in missionList">
              <div>
                <div class="check" :class="{done: mission.state === 3}"></div>
              </div>
              <p class="text">{{mission.title}}</p>
              <div>
                <i class="material-icons c-pointer" @click="choseMission(mission, mIndex)" 
                   :disabled="mission.state === 3">play_circle_outline</i>
              </div>
            </li>
            <li class="text-right text-more" v-show="missionList.length > 4">
              <span class="c-pointer" v-if="!showAll" @click="showAll = !showAll">MORE</span>
              <span class="c-pointer" v-else @click="showAll = !showAll">LESS</span>
            </li>
          </ul>
        </div>
      </div>
      
    </div>
  </div>
  <div class="r-panel">
    <div class="menu-bar text-right w-100">
      <div class="icon to-do-list">
        <i class="material-icons">list</i>
      </div>
      <div class="icon analystics">
        <i class="material-icons">insert_chart</i>
      </div>
      <div class="icon ringtones">
        <i class="material-icons">library_music</i>
      </div>
    </div>
    <div class="logo">
      <h4 class="mb-0">POMODORO</h4>
    </div>
  </div>
</div>
              
            
!

CSS

              
                $b-blue: #E5F3FF
$d-blue: #003164
$l-blue: #00A7FF
$l-pink: #FFEDF7
$d-pink: #FF4384
$d-blank: 48px
*  
  // border: 1px solid black
  position: relative
  box-sizing: border-box
  letter-spacing: 0.4px
  padding: 0
  margin: 0
html, body
  margin: 0px
  height: 100% !important
  min-height: 100% !important
  padding: 0px
body
  display: flex
  justify-content: center
  background-color: $l-pink
  color: rgba(255, 255, 255, 0.95)
  font-size: 16px
  letter-spacing: 1px
*:not(i)
  font-family: 'Roboto' !important
[disabled]
  cursor: auto
  pointer-events: none
i
  top: 2px
p
  color: $d-blue
input:focus
  outline: none
.c-pointer
  cursor: pointer
.text-right
  text-align: right
.pomodoros
  height: 100%
  width: 100%
  display: flex
  .l-panel
    flex: 1
    padding: $d-blank 30% $d-blank $d-blank
    .l-block
      max-width: 445px
    .add-mission-block
      display: flex
      color: $d-pink
      background-color: white
      .word, .add
        padding: 15px
        margin: 0px
        font-weight: bolder
      .word
        width: 100%
        border: none
      ::placeholder
        color: $d-pink
        font-style: italic
    .now-to-do
      padding-top: 20%
      display: flex 
      .left
        .check
          border: 2px solid $d-blue
          width: $d-blank
          height: $d-blank
          border-radius: 50%
          &.done::after
            content: ''
            display: block
            width: calc(100% - 10px)
            height: calc(100% - 10px)
            background-color: $d-blue
            border-radius: 50%
            left: 50%
            top: 50%
            transform: translate(-50%, -50%)
            position: relative
      .right
        width: 100%
        padding-left: 16px
        p 
          font-weight: bolder
          line-height: 28px
          margin: 0
        .process-bar
          display: flex
          margin-top: 4px
          .process
            width: 12px
            height: 12px
            border: 1px
            background: $d-blue
            border-radius: 50%
            margin-right: 8px
    .now-time
      line-height: 176px
      font-size: 176px
      color: $d-pink
      font-weight: bolder
      padding: 30px 0px 20% 0px
    .to-do-list
      color: $d-blue
      ul
        padding: 0
        list-style-type: none
        .to-do-block
          display: flex
          justify-content: space-between
          align-items: center
          padding: 10px 0px
          border-bottom: 1px solid rgba($d-blue, 20%)
          .check
            width: 22px
            height: 22px
            border: 2px solid $d-blue
            border-radius: 50%
            &.done::after
              content: ''
              display: block
              width: calc(100% - 5px)
              height: calc(100% - 5px)
              background-color: $d-blue
              border-radius: 50%
              left: 50%
              top: 50%
              transform: translate(-50%, -50%)
              position: relative
          .text
            width: 100%
            font-weight: bolder
            margin: 0
            padding-left: 15px
    .text-more
      color: $d-pink
      margin-top: 10px
      font-weight: bolder
  .r-panel
    flex: 1
    max-width: 450px
    background-color: $d-blue
    color: #ffffff
    .menu-bar
      position: absolute
      right: $d-blank
      top: $d-blank
    .icon
      margin-bottom: $d-blank
      .material-icons
        font-size: 36px
    .logo
      position: absolute
      font-size: 24px
      bottom: $d-blank
      right: $d-blank
      h4
        transform: rotate(90deg)translate(-30px, -65px)
        font-weight: bolder
        line-height: 36px
  .play-panel
    z-index: 3
    max-width: 540px
    max-height: 540px
    height: 35vw
    width: 35vw
    position: absolute
    left: calc(160% - 150px)
    top: 5vh
    .play-block
      width: 100%
      height: 100%
      background-color: $d-pink
      border-radius: 50%
    .play-block::before
      content: ""
      display: block
      border: 5px solid $d-pink
      width: calc(100% + 20px)
      height: calc(100% + 20px)
      border-radius: 50%
      position: relative
      left: 50%
      top: 50%
      transform: translate(-50%, -50%)
    .play-block::after
      content: ""
      display: block
      background-color: white
      width: 20%
      height: 20%
      position: absolute
      border-radius: 50%
      left: 50%
      top: 50%
      transform: translate(-50%, -50%)
    .play-icon
      color: $d-pink
      position: absolute
      left: 50%
      top: 50%
      transform: translate(-50%, -50%)
      z-index: 2
      &.relax i
        color: $l-blue
      i
        font-size: 80px
      .dot
        width: 10px
        height: 10px
        position: absolute
        background-color: white
        right: -20px
        bottom: -10%
.relax
  background-color: $b-blue
  .play-panel 
    .play-block
      background-color: $l-blue
      .play-icon i
          color: $l-blue
    .play-block::before
      border: 5px solid $l-blue
  .l-panel
    background-color: $b-blue
    .add-mission-block
      color: $l-blue
      .word::placeholder
        color: $l-blue
    .now-time
      color: $l-blue
    .text-more
      color: $l-blue
.is-play
  .play-panel 
    .play-block
      background-color: white
      .dot
      .play-icon 
        i
          color: white
        .dot
          background-color: $d-pink
    .play-block::before
      border: 5px solid $d-pink
    .play-block::after
      background-color: $d-pink
.is-play.relax
  .play-panel 
    .play-block
      background-color: white
      .dot
      .play-icon 
        i
          color: white
        .dot
          background-color: $l-blue
    .play-block::before
      border: 5px solid $l-blue
    .play-block::after
      background-color: $l-blue
@media screen and (max-width: 991px)
  .pomodoros
    .l-panel
      .now-time
        font-size: 145px
    .r-panel
      .menu-bar
        display: none
    .play-panel 
      left: calc(130% - 50px) 
      .play-icon
        i
          font-size: 50px
@media screen and (max-width: 767px)
  .pomodoros
    display: block
    .l-panel
      padding: $d-blank
      .l-block
        max-width: 100%
      .now-time
        padding-bottom: 0px
      .now-to-do
        padding-top: 30%
    .r-panel
      display: none
    .play-panel
      position: relative
      left: calc(50% - 17.5vw)
      top: 50px
      .play-icon
        i
          font-size: 30px
              
            
!

JS

              
                var app = new Vue ({
  el: '#app',
  data () {
    return {
      stateList: [
        { label: '工作', value: 1 },
        { label: '休息', value: 2 },
        { label: '完成', value: 3 }
      ],
      missionList: [],
      missionTitle: '',
      showAll: false,
      isPlay: false,
      timeLost: ''
    }
  },
  methods: {
    playSound (type) {
      var rSound = 'https://www.pacdv.com/sounds/voices/come-on-1.wav'
      var wSound = 'https://www.pacdv.com/sounds/voices/ooooh.wav'
      var radio = ''
      if (type === 'relax') {
        radio = new Audio(rSound)
      } 
      else if (type === 'work') {
        radio = new Audio(wSound)
      }
      radio.play()
    },
    choseMission (mission, index) {
      /*
      if (this.isPlay) {
        // alert
      } else {
        // switch mission
      }
      */
      console.log(mission)
      this.missionList.splice(index, 1)
      this.missionList.unshift(mission)
    },
    setTime () {
      var self = this
      var curMission = this.missionList[0]
      var nTime = curMission.time
      this.timeLost = setTimeout(function () {
        nTime = nTime - 1
        self.missionList[0].time  = nTime
        if (nTime === 0 && curMission.state === 1) {
          nTime = 300 // 5分鐘
          self.missionList[0].time  = nTime
          self.setTime()
          curMission.state = 2
          self.playSound('relax')
        } else if (nTime === 0 && curMission.state === 2) {
          curMission.state = 3
          let done = self.missionList.shift()
          self.missionList.push(done)
          self.isPlay = false
          self.playSound('work')
          if (self.missionList.length) self.setPlay()
        } else if (curMission.state !== 3) {
          self.setTime()
        }
      }, 1000)
    },
    setPlay () {
      this.isPlay = !this.isPlay
      if (this.isPlay && this.curMission.time) this.setTime()
      else clearTimeout(this.timeLost)
    },
    showTime (time) {
      console.log(time)
      if (time) {
        var newTime = moment.utc(time * 1000).format('mm:ss')
        return newTime
      }
      return '00:00'
    },
    addMission () {
      var mission = {
        done: false,
        title: this.missionTitle,
        time: 1500,
        state: 1
      }
      if (!this.missionTitle) mission.title = 'ADD A NEW MISSION'
      this.missionList.push(mission)
      this.missionTitle = ''
    }
  },
  computed: {
    curMission () {
      if (this.missionList.length) return this.missionList[0]
      return {
        state: 0
      }
    }
  }
})
              
            
!
999px

Console