diff --git a/favicon.ico b/favicon.ico
new file mode 100644
index 0000000..a9a513e
Binary files /dev/null and b/favicon.ico differ
diff --git a/horloge.html b/horloge.html
deleted file mode 100644
index 18c7abf..0000000
--- a/horloge.html
+++ /dev/null
@@ -1,47 +0,0 @@
-
-
-
- Horloge
-
-
-
-
-
-
Time
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
In Dev...
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/script.js b/script.js
index 86c9029..58f4193 100644
--- a/script.js
+++ b/script.js
@@ -1,27 +1,72 @@
-const wait_s = async ms => new Promise(done => setTimeout(done, ms));
+function Clock() {
+ let CirclesAndDate = [
+ [document.getElementsByTagName('circle')[1], new Date().getHours()/24*100,
+ `rgb(${new Date().getMinutes()/60*255},${new Date().getSeconds()/60*255}, ${new Date().getHours()/24*255})`,
+ document.getElementsByTagName('text')[0],
+ `${new Date().getHours()}h`],
+
+ [document.getElementsByTagName('circle')[3], new Date().getMinutes()/60*100,
+ `rgb(${new Date().getHours()/24*255}, ${new Date().getMinutes()/60*255}, ${new Date().getSeconds()/60*255})`,
+ document.getElementsByTagName('text')[1],
+ `${new Date().getMinutes()}m`],
+
+ [document.getElementsByTagName('circle')[5], new Date().getSeconds()/60*100,
+ `rgb(${new Date().getSeconds()/60*255}, ${new Date().getHours()/24*255}, ${new Date().getMinutes()/60*255})`,
+ document.getElementsByTagName('text')[2],
+ `${new Date().getSeconds()}s`]
+ ]
+ for (const CircleAndDate of CirclesAndDate) {
+ CircleAndDate[0].style.strokeDashoffset = 100-CircleAndDate[1]
+ CircleAndDate[0].style.stroke = CircleAndDate[2]
+ CircleAndDate[3].textContent = CircleAndDate[4]
+ }
+}
-async function Horloge() {
- const time = document.getElementById('time')
- const date = document.getElementById('date')
-
- while (true) {
- time.textContent = `${new Date().getHours()}h : ${new Date().getMinutes()}m : ${new Date().getSeconds()}s`
- date.textContent = `${new Date().getDate()}/${new Date().getDay()}/${new Date().getFullYear()}`
-
- document.getElementsByTagName('circle')[1].style.strokeDashoffset = 440-new Date().getHours()/59*440
- document.getElementsByTagName('text')[0].textContent = `${new Date().getHours()} Hours`
-
- document.getElementsByTagName('circle')[3].style.strokeDashoffset = 440-new Date().getMinutes()/59*440
- document.getElementsByTagName('text')[1].textContent = `${new Date().getMinutes()} Minutes`
+function dragElement(elmnt) {
+ var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
+ if (document.getElementsByClassName("windowDragHeader")[0]) {
+ document.getElementsByClassName("windowDragHeader")[0].onmousedown = dragMouseDown;
+ } else {
+ elmnt.onmousedown = dragMouseDown;
+ }
+
+ function dragMouseDown(e) {
+ e = e || window.event;
+ e.preventDefault();
+ pos3 = e.clientX;
+ pos4 = e.clientY;
+ document.onmouseup = closeDragElement;
+ document.onmousemove = elementDrag;
+ }
- document.getElementsByTagName('circle')[5].style.strokeDashoffset = 440-new Date().getSeconds()/59*440
- document.getElementsByTagName('text')[2].textContent = `${new Date().getSeconds()} Seconds`
+ function elementDrag(e) {
+ e = e || window.event;
+ e.preventDefault();
+ pos1 = pos3 - e.clientX;
+ pos2 = pos4 - e.clientY;
+ pos3 = e.clientX;
+ pos4 = e.clientY;
+ elmnt.style.top = (elmnt.offsetTop - pos2) + "px";
+ elmnt.style.left = (elmnt.offsetLeft - pos1) + "px";
+ }
- //document.body.style = `background-color: rgb(${new Date().getHours()/24*255}, ${new Date().getMinutes()/60*255}, ${new Date().getSeconds()/60*255})`
- await wait_s(1000)
+ function closeDragElement() {
+ document.onmouseup = null;
+ document.onmousemove = null;
}
}
-
-Horloge()
-
+
+dragElement(document.getElementsByClassName("windowDrag")[0]);
+
+let SettingWindowStatus = false
+function ToggleSetting(ele=document.getElementsByClassName('windowDrag')[0]) {
+ if (SettingWindowStatus) {
+ ele.style = "display: none;"
+ SettingWindowStatus = false
+ }
+ else {
+ ele.style = "display: flex;"
+ SettingWindowStatus = true
+ }
+}
\ No newline at end of file
diff --git a/style.css b/style.css
index 3fab050..b9db02a 100644
--- a/style.css
+++ b/style.css
@@ -1,38 +1,118 @@
* {
- background-color: #36393f;
box-sizing: border-box;
padding: 0;
margin: 0;
}
-.hidden
+body {
+ background-color: #36393f;
+}
.containerTime {
font-family: "Gill Sans", arial;
- position: absolute;
- top: 45%;
- left: 50%;
- transform: translate(-50%, -50%);
+ position: relative;
+ top: 50vh;
+ transform: translate(0%, -50%);
+ display: flex;
+ flex-direction: row;
+ justify-content: center;
+}
+
+circle {
+ stroke: lightgrey;
+ stroke-dasharray: 100;
+ fill: transparent;
+}
+
+circle:nth-child(1) {
+ stroke-width: 10;
}
-.containerDate {
- font-family: "Gill Sans", monospace, arial;
- position: absolute;
- top: 75%;
- left: 50%;
- transform: translate(-50%, -50%);
+circle:nth-child(2) {
+ stroke-width: 30;
+ stroke-linecap: round;
}
-p {
- padding: 0px;
- font-size: 5vw;
+@media (max-width: 1200px) {
+ .containerTime {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ flex-direction: column;
+ }
+ svg {
+ height: 50px;
+ }
+}
+
+@media (min-width: 2300px) {
+ .containerTime {
+ flex-direction: row;
+ }
+ circle {
+ display: none;
+ }
+}
+
+text {
+ font-family: monospace;
font-weight: bold;
color: white;
+ font-size: 3.5vw;
+}
+
+.btn{
+ border: 2px solid #736b5e;
+ border-radius: 3px;
+ color: white;
background: transparent;
+ transition: 555ms;
+ cursor: pointer;
+}
+
+.btn:hover{
+ background: rgb(85, 67, 44);
+}
+
+.btn:active{
+ transition: 0s;
+ background: rgb(45, 27, 4);
+}
+
+.windowDrag{
+ position: absolute;
+ z-index: 1;
+
+ width: 15%;
+ height: 25%;
+
+ border: 2px solid #736b5e;
+ border-radius: 3px;
+
+ color: white;
+ background-color: #181a1b;
+
+ display: none;
+ flex-direction: column;
+}
+
+.windowOption {
+ width: 100%;
+ height: 12%;
+ display: flex;
+ margin: 2% 0;
+ justify-content: center;
+}
+
+.windowDragHeader {
+ width: 80%;
+ cursor: move;
+ border: double 3px black;
+ margin-right: 5px;
+ background-color: #36393f;
}
-progress {
- height: 2.5vh;
- width: 10vw;
- margin: 0 1vw;
+.WindowContent {
+ display: flex;
+ justify-content: center;
}
\ No newline at end of file