diff --git a/assets/tones/beethoven.mp3 b/assets/tones/beethoven.mp3
new file mode 100644
index 0000000..19af526
Binary files /dev/null and b/assets/tones/beethoven.mp3 differ
diff --git a/assets/tones/megalo.mp3 b/assets/tones/megalo.mp3
new file mode 100644
index 0000000..18c6990
Binary files /dev/null and b/assets/tones/megalo.mp3 differ
diff --git a/assets/tones/none.mp3 b/assets/tones/none.mp3
new file mode 100644
index 0000000..4d66e68
Binary files /dev/null and b/assets/tones/none.mp3 differ
diff --git a/assets/tones/ringer.mp3 b/assets/tones/ringer.mp3
new file mode 100644
index 0000000..3644290
Binary files /dev/null and b/assets/tones/ringer.mp3 differ
diff --git a/assets/tones/sweet.mp3 b/assets/tones/sweet.mp3
new file mode 100644
index 0000000..e092df3
Binary files /dev/null and b/assets/tones/sweet.mp3 differ
diff --git a/assets/tone.mp3 b/assets/tones/tone.mp3
similarity index 100%
rename from assets/tone.mp3
rename to assets/tones/tone.mp3
diff --git a/assets/tones/twinkle.mp3 b/assets/tones/twinkle.mp3
new file mode 100644
index 0000000..71f63fc
Binary files /dev/null and b/assets/tones/twinkle.mp3 differ
diff --git a/assets/tones/violin.mp3 b/assets/tones/violin.mp3
new file mode 100644
index 0000000..a088fb8
Binary files /dev/null and b/assets/tones/violin.mp3 differ
diff --git a/canvas.js b/canvas.js
index e38731d..2802a78 100644
--- a/canvas.js
+++ b/canvas.js
@@ -1,4 +1,4 @@
-var tone = new Audio("./assets/tone.mp3");
+var tone = new Audio();
document.querySelectorAll(".clock").forEach((clock) => {
var canvas = clock.querySelector("canvas");
@@ -130,11 +130,19 @@ function updateTimer() {
setInterval(() => {
document.querySelectorAll(".timer-enabled:not(.timer-paused)").forEach((clock, i) => {
var timer = clock.dataset.time;
+ var bool = clock.dataset.ctp == "true";
clock.dataset.time--;
+ if (bool) {
+ document.querySelector(".poplight .press").classList.remove("popped");
+ }
if (timer <= 0) {
clock.classList.remove("timer-enabled");
+ tone.src = "./assets/tones/" + clock.dataset.tone + ".mp3";
tone.currentTime = 0;
tone.play();
+ if (bool) {
+ document.querySelector(".poplight .press").classList.add("popped");
+ }
}
});
updateTimer();
diff --git a/index.html b/index.html
index c78516a..d16f3f5 100644
--- a/index.html
+++ b/index.html
@@ -6,27 +6,32 @@
- Clock
+ FunnyClock²
+
+
+
@@ -35,14 +40,13 @@
-->
-
Welcome!
-
Feel free to take some notes.
-
+
+
@@ -143,7 +147,25 @@
Configure Timer
diff --git a/jqtp.js b/jqtp.js
new file mode 100644
index 0000000..31272ce
--- /dev/null
+++ b/jqtp.js
@@ -0,0 +1,11 @@
+/*!
+ * jQuery UI Touch Punch 0.2.3
+ *
+ * Copyright 2011–2014, Dave Furfero
+ * Dual licensed under the MIT or GPL Version 2 licenses.
+ *
+ * Depends:
+ * jquery.ui.widget.js
+ * jquery.ui.mouse.js
+ */
+!function(a){function f(a,b){if(!(a.originalEvent.touches.length>1)){a.preventDefault();var c=a.originalEvent.changedTouches[0],d=document.createEvent("MouseEvents");d.initMouseEvent(b,!0,!0,window,1,c.screenX,c.screenY,c.clientX,c.clientY,!1,!1,!1,!1,0,null),a.target.dispatchEvent(d)}}if(a.support.touch="ontouchend"in document,a.support.touch){var e,b=a.ui.mouse.prototype,c=b._mouseInit,d=b._mouseDestroy;b._touchStart=function(a){var b=this;!e&&b._mouseCapture(a.originalEvent.changedTouches[0])&&(e=!0,b._touchMoved=!1,f(a,"mouseover"),f(a,"mousemove"),f(a,"mousedown"))},b._touchMove=function(a){e&&(this._touchMoved=!0,f(a,"mousemove"))},b._touchEnd=function(a){e&&(f(a,"mouseup"),f(a,"mouseout"),this._touchMoved||f(a,"click"),e=!1)},b._mouseInit=function(){var b=this;b.element.bind({touchstart:a.proxy(b,"_touchStart"),touchmove:a.proxy(b,"_touchMove"),touchend:a.proxy(b,"_touchEnd")}),c.call(b)},b._mouseDestroy=function(){var b=this;b.element.unbind({touchstart:a.proxy(b,"_touchStart"),touchmove:a.proxy(b,"_touchMove"),touchend:a.proxy(b,"_touchEnd")}),d.call(b)}}}(jQuery);
\ No newline at end of file
diff --git a/styles/clock.css b/styles/clock.css
index a448004..eb7f2ca 100644
--- a/styles/clock.css
+++ b/styles/clock.css
@@ -1,7 +1,7 @@
.body {
width: calc(100vw - 64px);
- height: 100vh;
+ height: 100%;
position: fixed;
left: 64px;
top: 0;
@@ -11,7 +11,7 @@
overflow-y: auto;
}
-.body .clock, .body .timer {
+.body .clock, .body .timer, .body .noteobject {
width: 100%;
min-height: max-content;
border-radius: 8px;
@@ -24,7 +24,7 @@
zoom: 1.25;
}
-.body .clock::before, .body .timer::before {
+.body .clock::before, .body .timer::before, .body .noteobject::before {
content: "";
background-color: #FFFFFF40;
position: absolute;
@@ -50,7 +50,7 @@
-.body .clock h1, .body .timer h1 {
+.body .clock h1, .body .timer h1, .body .noteobject h1 {
margin: 0;
margin-top: 16px;
padding: 0;
@@ -61,12 +61,12 @@
-.body .clock div.labels, .body .timer div.labels {
+.body .clock div.labels, .body .timer div.labels, .body .noteobject div.labels {
display: inline-block;
vertical-align: middle;
}
-.body .clock div.labels *, .body .timer div.labels * {
+.body .clock div.labels *, .body .timer div.labels *, .body .noteobject div.labels * {
margin: 0;
padding: 0;
color: var(--foreground);
@@ -75,7 +75,7 @@
vertical-align: middle;
}
-.body .clock div.labels .timezone, .body .timer div.labels .timezone {
+.body .clock div.labels .timezone, .body .timer div.labels .timezone, .body .noteobject div.labels .timezone {
color: #888888;
}
@@ -103,6 +103,7 @@ textarea {
.deleteclock {
margin-top: 16px;
+ min-width: 32px;
width: 32px;
height: 32px;
padding: 0;
@@ -127,6 +128,7 @@ textarea {
.normalclock {
margin-top: 16px;
+ min-width: 32px;
width: 32px;
height: 32px;
padding: 0;
diff --git a/styles/dialog.css b/styles/dialog.css
index 3aac45d..3ed514a 100644
--- a/styles/dialog.css
+++ b/styles/dialog.css
@@ -130,4 +130,35 @@ input[type="radio"]:focus + label {
border-radius: 4px;
background-color: #00000040;
color: var(--foreground);
+}
+
+.checkobject input[type="text"] {
+ width: 100%;
+ margin: 8px 0;
+ box-sizing: border-box;
+ height: max-content;
+ max-height: 100%;
+ padding: 8px;
+ border: none;
+ border-radius: 4px;
+ font-size: 48px;
+ background-color: #00000040;
+ color: var(--foreground);
+}
+
+.checkobject {
+ display: flex;
+ gap: 12px;
+ flex-direction: row;
+ display: flex;
+ flex-direction: row;
+ flex-wrap: nowrap;
+ justify-content: flex-start;
+ align-content: space-around;
+ align-items: center;
+}
+
+.checkobject .deleteclock {
+ padding: 0;
+ margin: 0;
}
\ No newline at end of file
diff --git a/styles/style.css b/styles/style.css
index 58f28d5..e7fcc2a 100644
--- a/styles/style.css
+++ b/styles/style.css
@@ -14,17 +14,25 @@ body {
background-position: center;
opacity: 0.35;
position: fixed;
- height: 100%;
- width: 100%;
+ height: 100vh;
+ width: 100vw;
+}
+
+#backconstrain {
+ position: fixed;
+ height: calc(100vh - 80px);
+ width: calc(100vw - 36px);
+ left: 20px;
+ top: 64px;
}
* {
- font-family: 'Courier New', Courier, monospace;
+ font-family: monospace;
}
.header {
width: 64px;
- height: 100vh;
+ height: 100%;
position: fixed;
left: 0;
top: 0;
@@ -130,7 +138,7 @@ body {
position: absolute;
display: inline-block;
content: attr(data-title);
- font-family: 'Courier New', Courier, monospace;
+ font-family: monospace;
font-size: 12px;
height: 12px;
box-sizing: content-box;
@@ -191,11 +199,10 @@ sep {
position: fixed;
right: 16px;
bottom: 16px;
- width: 128px;
- height: 128px;
+ width: 192px;
+ height: 192px;
transition: bottom 0.125s;
z-index: 9;
- zoom: 1.25;
}
.poplight.hidden {
@@ -206,7 +213,7 @@ sep {
position: absolute;
width: 32px;
height: 32px;
- right: -0px;
+ right: 48px;
top: -48px;
margin: 0;
padding: 0;
@@ -220,7 +227,7 @@ sep {
position: absolute;
display: inline-block;
content: attr(data-title);
- font-family: 'Courier New', Courier, monospace;
+ font-family: monospace;
font-size: 12px;
height: 12px;
box-sizing: content-box;
@@ -260,20 +267,20 @@ sep {
right: 0;
width: 100%;
height: 100%;
- border-radius: 64px;
+ border-radius: 96px;
background-color: #808080;
overflow: hidden;
border: none;
- font-size: 64px;
+ font-size: 96px;
transition: top 0.125s, right 0.125s, width 0.125s, height 0.125s, background-color 0.125s, color 0.125s, font-size 0.125s;
}
.poplight.hidden button.press {
top: -48px;
- right: 48px;
+ right: 96px;
width: 32px;
height: 32px;
- border-radius: 64px;
+ border-radius: 128px;
font-size: 24px;
color: transparent;
}
@@ -290,7 +297,7 @@ sep {
flex-direction: column;
justify-content: center;
align-items: center;
- border-radius: 64px;
+ border-radius: 128px;
top: 0;
left: 0;
width: 100%;
@@ -308,4 +315,20 @@ sep {
.poplight button.press.popped::after {
content: "phonelink_off";
+}
+
+.poplight .drag {
+ position: absolute;
+ width: 32px;
+ height: 32px;
+ right: 0;
+ top: -48px;
+ margin: 0;
+ padding: 4px;
+ border: none;
+ border-radius: 16px;
+ box-sizing: border-box;
+ user-select: none;
+ background-color: transparent;
+ color: var(--foreground);
}
\ No newline at end of file