Multi Alarm Clock Concept, javascript android alike style<br>
by Pavel Komiagin
<a href="https://codepen.io/pavel_komiagin/full/EVRZmO" target="codepen">https://codepen.io/pavel_komiagin/full/EVRZmO</a><br>
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=2">
<link rel="apple-touch-icon" type="image/png" href="https://cpwebassets.codepen.io/assets/favicon/apple-touch-icon-5ae1a0698dcc2402e9712f7d01ed509a57814f994c660df9f7a952f3060705ee.png" />
<meta name="apple-mobile-web-app-title" content="CodePen">
<link rel="shortcut icon" type="image/x-icon" href="https://cpwebassets.codepen.io/assets/favicon/favicon-aec34940fbc1a6e787974dcd360f2c6b63348d4b1f4e06c77743096d55480f33.ico" />
<link rel="mask-icon" type="image/x-icon" href="https://cpwebassets.codepen.io/assets/favicon/logo-pin-8f3771b1072e3c38bd662872f6b673a722f4b3ca2421637d5596661b4e2132cc.svg" color="#111" />
<title>CodePen - Alarm Clock Concept</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css'>
<style>
@charset "UTF-8";
html {
height: 100%;
min-height: 500px;
}
body {
height: 100%;
margin: 0;
background-repeat: no-repeat;
background-attachment: fixed;
font-family: "Roboto", "Arial", sans-serif;
background: linear-gradient(45deg, #495082, #4e7797);
}
* {
box-sizing: border-box;
}
.clearfix::after {
content: "";
display: table;
clear: both;
}
.wrapper {
width: 100%;
height: 100%;
position: absolute;
}
.container {
background: linear-gradient(-45deg, #6e91e9, #70acee);
max-width: 400px;
width: calc(100% - 20px);
height: 650px;
left: 50%;
top: 50%;
position: absolute;
transform: translateX(-50%) translateY(-50%);
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
overflow: hidden;
}
.container .alarm_cards {
padding: 70px 20px 20px;
display: inline-block;
height: 100%;
width: 100%;
position: absolute;
}
.container .alarm_cards.hidden {
-webkit-animation: hide_alarm_cards 1s forwards;
animation: hide_alarm_cards 1s forwards;
}
.container .alarm_cards.shown {
-webkit-animation: show_alarm_cards 1.5s forwards;
animation: show_alarm_cards 1.5s forwards;
}
.container .alarm_cards .alarm_card {
border-radius: 8px 8px 8px 8px;
padding: 20px 10px 20px 20px;
position: relative;
margin: 0 auto;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
cursor: pointer;
}
.container .alarm_cards .alarm_card .time {
color: #fff;
font-size: 50px;
line-height: 62px;
font-weight: 300;
position: relative;
display: inline-block;
float: left;
margin-top: 5px;
position: relative;
}
.container .alarm_cards .alarm_card .switcher {
width: 90px;
height: 60px;
border: 2px solid #fff;
border-radius: 40px;
position: relative;
display: inline-block;
float: right;
cursor: pointer;
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2);
box-sizing: border-box;
background-color: #f04124;
}
.container .alarm_cards .alarm_card .switcher.on {
background-color: lime;
}
.container .alarm_cards .alarm_card .switcher.on::after {
transform: translateX(28px);
}
.container .alarm_cards .alarm_card .switcher::after {
content: " ";
background-color: #fff;
border-radius: 50%;
position: absolute;
transform: translateX(-2px);
top: -2px;
height: 60px;
width: 60px;
box-shadow: 0 3px 5px rgba(0, 0, 0, 0.3);
transition: transform 0.2s ease-in-out;
}
.container .alarm_cards .alarm_card .frequency {
float: left;
width: 100%;
color: #fff;
}
.container .alarm_cards .alarm_card .evenandorodd {
float: left;
width: 100%;
color: #fff;
}
.container .alarm_cards .alarm_card .frequency::before {
font-family: FontAwesome;
content: "";
font-size: 14px;
color: #fff;
margin-right: 6px;
vertical-align: top;
opacity: 0.6;
}
.container .alarm_cards .alarm_card.first {
background: linear-gradient(to right, #5c6cc1, #84a3df);
z-index: 3;
width: 100%;
}
.container .alarm_cards .alarm_card.second {
background: linear-gradient(to right, #f1c29d, #f1de94);
z-index: 2;
width: 100%;
}
.container .alarm_cards .alarm_card.third {
background: linear-gradient(to right, #8cd2d9, #afe3d1);
z-index: 1;
width: 100%;
}
.container .alarm_cards .alarm_card.fourth {
background: linear-gradient(to right, #5c6cc1, #84a3df);
z-index: 3;
width: 100%;
}
.alarm_change_card_wrapper {
width: 400px;
height: 600px;
padding: 70px 20px 20px;
position: absolute;
transform: translateX(400px);
}
.alarm_change_card_wrapper.shown {
-webkit-animation: show_alarm_change_card_wrapper 1s 0.5s forwards;
animation: show_alarm_change_card_wrapper 1s 0.5s forwards;
}
.alarm_change_card_wrapper.shown .alarm_change_card {
-webkit-animation: show_alarm_change_card 0.5s 1s forwards;
animation: show_alarm_change_card 0.5s 1s forwards;
}
.alarm_change_card_wrapper.hidden {
-webkit-animation: hide_alarm_change_card_wrapper 1s forwards;
animation: hide_alarm_change_card_wrapper 1s forwards;
}
.alarm_change_card_wrapper.hidden .alarm_change_card {
-webkit-animation: hide_alarm_change_card 0.5s forwards;
animation: hide_alarm_change_card 0.5s forwards;
}
.alarm_change_card_wrapper .alarm_change_card {
width: 100%;
height: 100%;
border-radius: 8px;
transform: scale(0.8);
opacity: 0.6;
}
.alarm_change_card_wrapper .alarm_change_card .title {
width: 100%;
padding: 10px;
border-radius: 4px;
color: rgba(0, 0, 0, 0.4);
box-shadow: 0 3px 5px rgba(0, 0, 0, 0.2);
position: relative;
font-size: 24px;
}
.alarm_change_card_wrapper .alarm_change_card .time_block .title {
background: linear-gradient(to right, #fed1a7, #feeca8);
}
.alarm_change_card_wrapper .alarm_change_card .time_block .time {
text-align: center;
padding: 5px;
background-color: #6b6ec5;
}
.alarm_change_card_wrapper .alarm_change_card .time_block .time .hours,
.alarm_change_card_wrapper .alarm_change_card .time_block .time .minutes {
display: inline-block;
color: #fff;
font-size: 42px;
}
.alarm_change_card_wrapper .alarm_change_card .time_block .time .hours .value::after {
content: ":";
margin: 0 5px;
}
.alarm_change_card_wrapper .alarm_change_card .time_block .time .hours .up,
.alarm_change_card_wrapper .alarm_change_card .time_block .time .hours .down {
margin-left: -18px;
}
.alarm_change_card_wrapper .alarm_change_card .time_block .time .up,
.alarm_change_card_wrapper .alarm_change_card .time_block .time .down {
transition: all 0.2s ease-in-out;
cursor: pointer;
line-height: 20px;
}
.alarm_change_card_wrapper .alarm_change_card .time_block .time .up:hover,
.alarm_change_card_wrapper .alarm_change_card .time_block .time .down:hover {
opacity: 0.6;
}
.alarm_change_card_wrapper .alarm_change_card .frequency_block {
border-radius: 0 0 8px 8px;
position: relative;
margin: 0 auto 20px;
}
.alarm_change_card_wrapper .alarm_change_card .frequency_block .title {
background: linear-gradient(to right, #93dccc, #9cd2f9);
}
.alarm_change_card_wrapper .alarm_change_card .frequency_block .days {
background-color: #6b6ec5;
color: lightgray;
padding: 20px;
text-align: center;
}
.alarm_change_card_wrapper .alarm_change_card .frequency_block .days .day {
display: inline-block;
width: calc((100% - 5px*6) / 7);
height: calc((100% - 5px*6) / 7);
font-size: 20px;
cursor: pointer;
line-height: 40px;
border-radius: 50%;
box-sizing: border-box;
}
.day.active {
background-color: lime;
opacity:0.5;
color: red;
}
.day.free {
color: purple;
}
.saving_button {
padding: 20px;
color: #fff;
background-color: #4c6ea5;
bottom: 0;
position: absolute;
left: 50%;
transform: translateX(-50%);
border-radius: 30px;
padding: 20px 60px;
cursor: pointer;
transition: all 0.3s linear;
}
.saving_button:hover {
color: #4c6ea5;
background-color: #fff;
}
/************ Animations ***********/
@-webkit-keyframes hide_alarm_cards {
50% {
transform: scale(0.8);
opacity: 0.6;
}
100% {
opacity: 0.6;
transform: scale(0.8) translateX(-120%);
}
}
@keyframes hide_alarm_cards {
50% {
transform: scale(0.8);
opacity: 0.6;
}
100% {
opacity: 0.6;
transform: scale(0.8) translateX(-120%);
}
}
@-webkit-keyframes show_alarm_cards {
0% {
transform: scale(0.8) translateX(-120%);
opacity: 0.6;
}
33% {
transform: scale(0.8) translateX(-120%);
opacity: 0.6;
}
66% {
transform: scale(0.8) translateX(0);
opacity: 0.6;
}
100% {
opacity: 1;
transform: scale(1) translateX(0);
}
}
@keyframes show_alarm_cards {
0% {
transform: scale(0.8) translateX(-120%);
opacity: 0.6;
}
33% {
transform: scale(0.8) translateX(-120%);
opacity: 0.6;
}
66% {
transform: scale(0.8) translateX(0);
opacity: 0.6;
}
100% {
opacity: 1;
transform: scale(1) translateX(0);
}
}
@-webkit-keyframes show_alarm_change_card_wrapper {
50% {
transform: translateX(0);
}
100% {
transform: translateX(0);
}
}
@keyframes show_alarm_change_card_wrapper {
50% {
transform: translateX(0);
}
100% {
transform: translateX(0);
}
}
@-webkit-keyframes hide_alarm_change_card_wrapper {
0% {
transform: translateX(0);
}
50% {
transform: translateX(0);
}
100% {
transform: translateX(400px);
}
}
@keyframes hide_alarm_change_card_wrapper {
0% {
transform: translateX(0);
}
50% {
transform: translateX(0);
}
100% {
transform: translateX(400px);
}
}
@-webkit-keyframes show_alarm_change_card {
100% {
opacity: 1;
transform: scale(1);
}
}
@keyframes show_alarm_change_card {
100% {
opacity: 1;
transform: scale(1);
}
}
@-webkit-keyframes hide_alarm_change_card {
0% {
opacity: 1;
transform: scale(1);
}
100% {
opacity: 0.6;
transform: scale(0.8);
}
}
@keyframes hide_alarm_change_card {
0% {
opacity: 1;
transform: scale(1);
}
100% {
opacity: 0.6;
transform: scale(0.8);
}
}
</style>
<script>
window.console = window.console || function(t) {};
</script>
<script>
if (document.location.search.match(/type=embed/gi)) {
window.parent.postMessage("resize", "*");
}
</script>
</head>
<body translate="no" >
<div class="wrapper">
<div class="container">
<div class="alarm_cards">
<div class="alarm_card first clearfix" data-index="0">
<div class="time"></div>
<div class="switcher"></div>
<div class="frequency"></div>
<div class="evenandorodd">on even and odd week numbers?</div>
</div>
<div class="alarm_card second clearfix" data-index="1">
<div class="time"></div>
<div class="switcher on"></div>
<div class="frequency"></div>
<div class="evenandorodd">on even week number?</div>
</div>
<div class="alarm_card third clearfix" data-index="2">
<div class="time"></div>
<div class="switcher"></div>
<div class="frequency"></div>
<div class="evenandorodd">on odd week number?</div>
</div>
<div class="alarm_card fourth clearfix" data-index="3">
<div class="time"></div>
<div class="switcher"></div>
<div class="frequency"></div>
<div class="evenandorodd">on even and odd week number?</div>
</div>
</div>
<div class="alarm_change_card_wrapper">
<div class="alarm_change_card">
<div class="frequency_block">
<div class="title">
WHEN?
</div>
<div class="days">
<div class="day">
Mo
</div>
<div class="day">
Tue
</div>
<div class="day">
We
</div>
<div class="day">
Th
</div>
<div class="day">
Fr
</div>
<div class="day free">
Sa
</div>
<div class="day free">
Su
</div>
</div>
</div>
<div class="time_block">
<div class="title">
on Even Odd Weeknumber?
</div>
<div class=""><br>
[ weeknumber ] == and/or == [ odd week number ]
<br><br>
</div>
</div>
<div class="time_block">
<div class="title">
WHAT TIME?
</div>
<div class="time">
<div class="hours">
<i class="up fa fa-caret-up"></i>
<div class="value">
17
</div>
<i class="down fa fa-caret-down"></i>
</div>
<div class="minutes">
<i class="up fa fa-caret-up"></i>
<div class="value">
53
</div>
<i class="down fa fa-caret-down"></i>
</div>
</div>
</div>
<div class="saving_button">
SAVE
</div>
</div>
</div>
</div>
</div>
<script src="https://cpwebassets.codepen.io/assets/common/stopExecutionOnTimeout-2c7831bb44f98c1391d6a4ffda0e1fd302503391ca806e7fcc7b9b87197aec26.js"></script>
<script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script id="rendered-js" >
(function() {
var Alarms, changeTime, currentAlarmNumber, getFrequencyText, setAlarm,
indexOf = [].indexOf;
Alarms = [];
currentAlarmNumber = null;
changeTime = function(value, max, actionType) {
if (actionType === 'increase') {
value++;
if (value > max) {
value = 0;
}
} else {
value--;
if (value < 0) {
value = max;
}
}
if (value < 10) {
value = `0${value}`;
}
return value;
};
getFrequencyText = function(frequency) {
var days;
days = ['Mo', 'Tue', 'We', 'Th', 'Fr', 'Sa', 'Su'].filter(function(element, index) {
return indexOf.call(frequency, index) >= 0;
});
if (days.length === 7) {
days = ['Everyday'];
}
if (days.length === 0) {
$( "div.frequency" ).css( "color","red" );
days = ['WARNING! NO days Activated'];
}else{
}
return days.join(' ');
};
setAlarm = function(alarmNumber, hours, minutes, frequency) {
var $alarm_card;
if (minutes < 10) {
minutes = `0${minutes}`;
}
$alarm_card = $($('.alarm_card')[alarmNumber]);
$alarm_card.find('.time').html(`${hours}:${minutes}`);
$alarm_card.find('.frequency').html(getFrequencyText(frequency));
return Alarms[alarmNumber] = {
hours: hours,
minutes: minutes,
frequency: frequency
};
};
$(function() {
$('.switcher').on('click', function(e) {
e.stopPropagation();
//$( "div.frequency" ).css( "color","gray" );
return $(this).toggleClass('on');
});
$('.alarm_card').on('click', function() {
var $day, currentAlarm, hours, minutes;
$day = $('.day');
$day.removeClass('active');
window.currentAlarmNumber = $(this).data('index');
currentAlarm = Alarms[window.currentAlarmNumber];
currentAlarm.frequency.forEach(function(value) {
return $($day[value]).addClass('active');
});
hours = currentAlarm.hours;
if (hours < 10) {
hours = `0${hours}`;
}
minutes = currentAlarm.minutes;
$('.hours .value').text(hours);
$('.minutes .value').text(minutes);
$('.alarm_cards').removeClass('shown').addClass('hidden');
return $('.alarm_change_card_wrapper').removeClass('hidden').addClass('shown');
});
$('.day').on('click', function() {
return $(this).toggleClass('active');
});
$('.saving_button').on('click', function() {
var frequency, hours, minutes;
$('.alarm_cards').removeClass('hidden').addClass('shown');
$('.alarm_change_card_wrapper').removeClass('shown').addClass('hidden');
hours = parseInt($('.hours .value').text());
minutes = parseInt($('.minutes .value').text());
frequency = [];
$('.day').each(function(index, element) {
if ($(element).hasClass('active')) {
return frequency.push(index);
}
});
return setAlarm(window.currentAlarmNumber, hours, minutes, frequency);
});
//####### Set time ########
$('.hours .up').on('click', function() {
var newHours;
newHours = changeTime(parseInt($('.hours .value').text()), 23, 'increase');
return $('.hours .value').text(newHours);
});
$('.hours .down').on('click', function() {
var newHours;
newHours = changeTime(parseInt($('.hours .value').text()), 23, 'decrease');
return $('.hours .value').text(newHours);
});
$('.minutes .up').on('click', function() {
var newMinutes;
newMinutes = changeTime(parseInt($('.minutes .value').text()), 59, 'increase');
return $('.minutes .value').text(newMinutes);
});
$('.minutes .down').on('click', function() {
var newMinutes;
newMinutes = changeTime(parseInt($('.minutes .value').text()), 59, 'decrease');
return $('.minutes .value').text(newMinutes);
});
// alarm number, hour. minute. [0....6] = days activated
setAlarm(0, 18, 0, [0, 1, 2, 3, 4, 5, 6]);
setAlarm(1, 6, 0, []);
setAlarm(2, 8, 0, [0,1, 2, 3]);
setAlarm(3, 12, 0, [3, 4, 5, 6]);
return
});
}).call(this);
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiPGFub255bW91cz4iXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUE7QUFBQSxNQUFBLE1BQUEsRUFBQSxVQUFBLEVBQUEsa0JBQUEsRUFBQSxnQkFBQSxFQUFBLFFBQUE7SUFBQTs7RUFBQSxNQUFBLEdBQVM7O0VBQ1Qsa0JBQUEsR0FBcUI7O0VBRXJCLFVBQUEsR0FBYSxRQUFBLENBQUMsS0FBRCxFQUFRLEdBQVIsRUFBYSxVQUFiLENBQUE7SUFDWCxJQUFHLFVBQUEsS0FBYyxVQUFqQjtNQUNFLEtBQUE7TUFDQSxJQUFhLEtBQUEsR0FBUSxHQUFyQjtRQUFBLEtBQUEsR0FBUSxFQUFSO09BRkY7S0FBQSxNQUFBO01BSUUsS0FBQTtNQUNBLElBQWUsS0FBQSxHQUFRLENBQXZCO1FBQUEsS0FBQSxHQUFRLElBQVI7T0FMRjs7SUFPQSxJQUF1QixLQUFBLEdBQVEsRUFBL0I7TUFBQSxLQUFBLEdBQVEsQ0FBQSxDQUFBLENBQUEsQ0FBSSxLQUFKLENBQUEsRUFBUjs7V0FDQTtFQVRXOztFQVdiLGdCQUFBLEdBQW1CLFFBQUEsQ0FBQyxTQUFELENBQUE7QUFDbkIsUUFBQTtJQUFFLElBQUEsR0FBTyxDQUFDLElBQUQsRUFBTyxLQUFQLEVBQWMsSUFBZCxFQUFvQixJQUFwQixFQUEwQixJQUExQixFQUFnQyxJQUFoQyxFQUFzQyxJQUF0QyxDQUEyQyxDQUFDLE1BQTVDLENBQW1ELFFBQUEsQ0FBQyxPQUFELEVBQVUsS0FBVixDQUFBOzBCQUMvQyxXQUFUO0lBRHdELENBQW5EO0lBR1AsSUFBdUIsSUFBSSxDQUFDLE1BQUwsS0FBZSxDQUF0QztNQUFBLElBQUEsR0FBTyxDQUFDLFVBQUQsRUFBUDs7V0FDQSxJQUFJLENBQUMsSUFBTCxDQUFVLEdBQVY7RUFMaUI7O0VBT25CLFFBQUEsR0FBVyxRQUFBLENBQUMsV0FBRCxFQUFjLEtBQWQsRUFBcUIsT0FBckIsRUFBOEIsU0FBOUIsQ0FBQTtBQUNYLFFBQUE7SUFB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bFxuXG5jaGFuZ2VUaW1lID0gKHZhbHVlLCBtYXgsIGFjdGlvblR5cGUpIC0+XG4gIGlmIGFjdGlvblR5cGUgaXMgJ2luY3JlYXNlJ1xuICAgIHZhbHVlKytcbiAgICB2YWx1ZSA9IDAgaWYgdmFsdWUgPiBtYXhcbiAgZWxzZVxuICAgIHZhbHVlLS1cbiAgICB2YWx1ZSA9IG1heCBpZiB2YWx1ZSA8IDBcblxuICB2YWx1ZSA9IFwiMCN7dmFsdWV9XCIgaWYgdmFsdWUgPCAxMFxuICB2YWx1ZVxuXG5nZXRGcmVxdWVuY3lUZXh0ID0gKGZyZXF1ZW5jeSkgLT5cbiAgZGF5cyA9IFsnTW8nLCAnVHVlJywgJ1dlJywgJ1RoJywgJ0ZyJywgJ1NhJywgJ1N1J10uZmlsdGVyIChlbGVtZW50LCBpbmRleCkgLT5cbiAgICBpbmRleCBpbiBmcmVxdWVuY3lcbiAgXG4gIGRheXMgPSBbJ0V2ZXJ5ZGF5J10gaWYgZGF5cy5sZW5ndGggaXMgN1xuICBkYXlzLmpvaW4gJyAnXG4gIFxuc2V0QWxhcm0gPSAoYWxhcm1OdW1iZXIsIGhvdXJzLCBtaW51dGVzLCBmcmVxdWVuY3kpIC0+XG4gIG1pbnV0ZXMgPSBcIjAje21pbnV0ZXN9XCIgaWYgbWludXRlcyA8IDEwXG4gICRhbGFybV9jYXJkID0gJCgkKCcuYWxhcm1fY2FyZCcpW2FsYXJtTnVtYmVyXSlcbiAgJGFsYXJtX2NhcmQuZmluZCgnLnRpbWUnKS5odG1sIFwiI3tob3Vyc306I3ttaW51dGVzfVwiXG4gICRhbGFybV9jYXJkLmZpbmQoJy5mcmVxdWVuY3knKS5odG1sIGdldEZyZXF1ZW5jeVRleHQoZnJlcXVlbmN5KVxuICAgIFxuICBBbGFybXNbYWxhcm1OdW1iZXJdID1cbiAgICBob3VyczogaG91cnNcbiAgICBtaW51dGVzOiBtaW51dGVzXG4gICAgZnJlcXVlbmN5OiBmcmVxdWVuY3lcblxuJCAtPlxuICAkKCcuc3dpdGNoZXInKS5vbiAnY2xpY2snLCAoZSkgLT5cbiAgICBlLnN0b3BQcm9wYWdhdGlvbigpXG4gICAgJChAKS50b2dnbGVDbGFzcyAnb24nXG4gIFxuICAkKCcuYWxhcm1fY2FyZCcpLm9uICdjbGljaycsIC0+XG4gICAgJGRheSA9ICQoJy5kYXknKVxuICAgICRkYXkucmVtb3ZlQ2xhc3MoJ2FjdGl2ZScpXG4gICAgXG4gICAgd2luZG93LmN1cnJlbnRBbGFybU51bWJlciA9ICQoQCkuZGF0YSgnaW5kZXgnKVxuICAgIGN1cnJlbnRBbGFybSA9IEFsYXJtc1t3aW5kb3cuY3VycmVudEFsYXJtTnVtYmVyXVxuICAgICAgICBcbiAgICBjdXJyZW50QWxhcm0uZnJlcXVlbmN5LmZvckVhY2ggKHZhbHVlKSAtPlxuICAgICAgJCgkZGF5W3ZhbHVlXSkuYWRkQ2xhc3MoJ2FjdGl2ZScpXG4gICAgXG4gICAgaG91cnMgPSBjdXJyZW50QWxhcm0uaG91cnNcbiAgICBob3VycyA9IFwiMCN7aG91cnN9XCIgaWYgaG91cnMgPCAxMFxuICAgIG1pbnV0ZXMgPSBjdXJyZW50QWxhcm0ubWludXRlc1xuICAgICQoJy5ob3VycyAudmFsdWUnKS50ZXh0KGhvdXJzKVxuICAgICQoJy5taW51dGVzIC52YWx1ZScpLnRleHQobWludXRlcylcbiAgICBcbiAgICAkKCcuYWxhcm1fY2FyZHMnKS5yZW1vdmVDbGFzcygnc2hvd24nKS5hZGRDbGFzcygnaGlkZGVuJylcbiAgICAkKCcuYWxhcm1fY2hhbmdlX2NhcmRfd3JhcHBlcicpLnJlbW92ZUNsYXNzKCdoaWRkZW4nKS5hZGRDbGFzcygnc2hvd24nKVxuICAgIFxuICAkKCcuZGF5Jykub24gJ2NsaWNrJywgLT5cbiAgICAkKEApLnRvZ2dsZUNsYXNzICdhY3RpdmUnXG4gIFxuICAkKCcuc2F2aW5nX2J1dHRvbicpLm9uICdjbGljaycsIC0+XG4gICAgJCgnLmFsYXJtX2NhcmRzJykucmVtb3ZlQ2xhc3MoJ2hpZGRlbicpLmFkZENsYXNzKCdzaG93bicpXG4gICAgJCgnLmFsYXJtX2NoYW5nZV9jYXJkX3dyYXBwZXInKS5yZW1vdmVDbGFzcygnc2hvd24nKS5hZGRDbGFzcygnaGlkZGVuJylcbiBcbiAgICBob3VycyA9IHBhcnNlSW50ICQoJy5ob3VycyAudmFsdWUnKS50ZXh0KClcbiAgICBtaW51dGVzID0gcGFyc2VJbnQgJCgnLm1pbnV0ZXMgLnZhbHVlJykudGV4dCgpXG4gICAgZnJlcXVlbmN5ID0gW11cbiAgICAkKCcuZGF5JykuZWFjaCAoaW5kZXgsIGVsZW1lbnQpIC0+XG4gICAgICBmcmVxdWVuY3kucHVzaChpbmRleCkgaWYgJChlbGVtZW50KS5oYXNDbGFzcygnYWN0aXZlJylcblxuICAgIHNldEFsYXJtKHdpbmRvdy5jdXJyZW50QWxhcm1OdW1iZXIsIGhvdXJzLCBtaW51dGVzLCBmcmVxdWVuY3kpXG4gIFxuICAjIyMjIyMjIyBTZXQgdGltZSAjIyMjIyMjI1xuICAkKCcuaG91cnMgLnVwJykub24gJ2NsaWNrJywgLT5cbiAgICBuZXdIb3VycyA9IGNoYW5nZVRpbWUgcGFyc2VJbnQoJCgnLmhvdXJzIC52YWx1ZScpLnRleHQoKSksIDIzLCAnaW5jcmVhc2UnXG4gICAgJCgnLmhvdXJzIC52YWx1ZScpLnRleHQgbmV3SG91cnNcbiAgICBcbiAgJCgnLmhvdXJzIC5kb3duJykub24gJ2NsaWNrJywgLT5cbiAgICBuZXdIb3VycyA9IGNoYW5nZVRpbWUgcGFyc2VJbnQoJCgnLmhvdXJzIC52YWx1ZScpLnRleHQoKSksIDIzLCAnZGVjcmVhc2UnXG4gICAgJCgnLmhvdXJzIC52YWx1ZScpLnRleHQgbmV3SG91cnNcbiAgICBcbiAgJCgnLm1pbnV0ZXMgLnVwJykub24gJ2NsaWNrJywgLT5cbiAgICBuZXdNaW51dGVzID0gY2hhbmdlVGltZSBwYXJzZUludCgkKCcubWludXRlcyAudmFsdWUnKS50ZXh0KCkpLCA1OSwgJ2luY3JlYXNlJ1xuICAgICQoJy5taW51dGVzIC52YWx1ZScpLnRleHQgbmV3TWludXRlc1xuICAgIFxuICAkKCcubWludXRlcyAuZG93bicpLm9uICdjbGljaycsIC0+XG4gICAgbmV3TWludXRlcyA9IGNoYW5nZVRpbWUgcGFyc2VJbnQoJCgnLm1pbnV0ZXMgLnZhbHVlJykudGV4dCgpKSwgNTksICdkZWNyZWFzZSdcbiAgICAkKCcubWludXRlcyAudmFsdWUnKS50ZXh0IG5ld01pbnV0ZXNcbiAgXG4gIHNldEFsYXJtKDAsIDE4LCAwLCBbMCwgMSwgMiwgMywgNCwgNSwgNl0pXG4gIHNldEFsYXJtKDEsIDYsIDAsIFsxLCAyLCAzXSlcbiAgc2V0QWxhcm0oMiwgMTIsIDAsIFszLCA0LCA1LCA2XSkiXX0=
//# sourceURL=coffeescript
//# sourceURL=pen.js
</script>
searching for something like this<br>
add and remove fields / alarm cards<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<center><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br>
theben schakelklok theben-timer 27 classic weektimer 2 hour per flag<br>
<img src="https://www.theben.de/ocsmedia/optimized/960x960/o11032v3%20timer%2027_en-PI.png" width="70%">
</body>
</html>