VirnaTwo · VirnaTwo · Jan 25, 2022 · Jan 25, 2022 · Jan 25, 2022 · Jan 25, 2022
diff --git a/favicon.ico b/favicon.ico
diff --git a/horloge.html b/horloge.html
diff --git a/image.jpg b/image.jpg
diff --git a/index.html b/index.html
@@ -0,0 +1,61 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<title>Clock</title>
+	<link rel="icon" type="image/x-icon" href="favicon.ico">
+
+	<meta property="og:title" content="Graphic Clock"/>
+	<meta property="og:url" content="https://virnatwo.github.io/Clock/" />
+	<meta property="og:image" content="https://virnatwo.github.io/Clock/image.jpg"/>
+
+	<meta name="theme-color" content="#dc143c"/>
+
+    <link rel="stylesheet" type="text/css" href="style.css">
+</head>
+<body onload="Clock(); setInterval(Clock, 1000)">
+	<button id="settingbtn" class="btn" style="width: 5%; height: 25px; opacity: 5%;" onclick="ToggleSetting()">Setting</button>
+
+	<div class="windowDrag">
+		<div class="windowOption">
+			<div class="windowDragHeader"></div>
+			<button class="btn" style="width: 15%; height: 150%;" onclick="ToggleSetting()">X</button>
+		</div>
+
+		<div class="WindowContent">
+			<div class="WindowContentColor"><br>
+				<label>Color</label>
+				<h1>In Dev...</h1>
+			</div>
+		</div>
+
+	</div>
+
+	<div class="containerTime">
+		<svg width="400" height="400">
+			<g transform="rotate(-90 100 100)">
+				<circle r="7.5vw" cx="0" cy="50%" pathLength="100"></circle>
+				<circle r="7.5vw" cx="0" cy="50%" pathLength="100"></circle>
+			</g>
+			<text x="50%" y="50%" dominant-baseline="central" text-anchor="middle">5</text>
+		</svg>
+
+		<svg width="400" height="400">
+			<g transform="rotate(-90 100 100)">
+				<circle r="7.5vw" cx="0" cy="50%" pathLength="100"></circle>
+				<circle r="7.5vw" cx="0" cy="50%" pathLength="100"></circle>
+			</g>
+			<text x="50%" y="50%" dominant-baseline="central" text-anchor="middle">50</text>
+		</svg>
+
+		<svg width="400" height="400">
+			<g transform="rotate(-90 100 100)">
+				<circle r="7.5vw" cx="0" cy="50%" pathLength="100"></circle>
+				<circle r="7.5vw" cx="0" cy="50%" pathLength="100"></circle>
+			</g>
+			<text x="50%" y="50%" dominant-baseline="central" text-anchor="middle">050</text>
+		</svg>
+	</div>
+
+	<script src="script.js"></script>
+</body>
+</html>
diff --git 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
+	}
+}
diff --git 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;
 }