commit 3afff1b579063559bc283bd8f83c4947dc4e103c
Author: asandikci <git@aliberksandikci.com.tr>
Date:   Sun Dec 31 10:37:32 2023 +0300

    Initial Commit

diff --git a/.gitea/ISSUE_TEMPLATE/PATH_DRAFT.md b/.gitea/ISSUE_TEMPLATE/PATH_DRAFT.md
new file mode 100644
index 0000000..f0b5445
--- /dev/null
+++ b/.gitea/ISSUE_TEMPLATE/PATH_DRAFT.md
@@ -0,0 +1,20 @@
+---
+
+name: "PATH DRAFT"
+about: "Draw a Quick Path as Draft -temporary-"
+title: "[PATH DRAFT] FEATURE/PATH NAME"
+ref: "main"
+labels:
+
+- "Kind/Feature"
+
+---
+
+### FEATURE/PATH NAME
+<!-- Explanation about your feature/path-->
+
+## PATH DRAFT
+> This Path Draft is possibly temporary, using because sometimes noting down ideas linearly is more productive. See more in Forgejo Project Tab or other Project Management Application that in use. Or you can edit this text every time for smaller Path Drafts.
+
+
+
diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..751553b
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1 @@
+*.bak
diff --git a/README.md b/README.md
new file mode 100644
index 0000000..d110af9
--- /dev/null
+++ b/README.md
@@ -0,0 +1,9 @@
+# Smart Board Tools for Educational Usage
+Developing actively for İzmir Science High School Smart Boards <br>
+Development DEMO: <a href="https://edu.iflpanel.com"> https://edu.iflpanel.com </a>
+
+## Similar Apps
+- [Digiscreen](https://ladigitale.dev/digiscreen/) / [DigiTools](https://ladigitale.dev/digitools/)
+
+## Development
+- EduBoardTools currently under in heavy development. Please see Issues, PRs and Projects pages for more information
diff --git a/assets/css/dev.css b/assets/css/dev.css
new file mode 100644
index 0000000..400f86e
--- /dev/null
+++ b/assets/css/dev.css
@@ -0,0 +1,23 @@
+@charset "UTF-8";
+/* 2023 Aliberk Sandıkçı*/
+#ders-programi {
+  display: none;
+  flex-direction: column;
+  padding: 0px 100px;
+  padding-top: 10px;
+}
+#ders-programi img {
+  max-width: 1309px;
+  max-height: 601px;
+  aspect-ratio: 1309/601;
+}
+
+.min,
+.sec,
+.msec {
+  display: flex;
+  width: 7vw;
+  justify-content: center;
+}
+
+/*# sourceMappingURL=dev.css.map */
diff --git a/assets/css/dev.css.map b/assets/css/dev.css.map
new file mode 100644
index 0000000..eed168e
--- /dev/null
+++ b/assets/css/dev.css.map
@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["../scss/dev.scss"],"names":[],"mappings":";AAAA;AAEA;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;;AAIJ;AAAA;AAAA;EAGE;EACA;EACA","file":"dev.css"}
\ No newline at end of file
diff --git a/assets/css/main.css b/assets/css/main.css
new file mode 100644
index 0000000..0898364
--- /dev/null
+++ b/assets/css/main.css
@@ -0,0 +1,293 @@
+@charset "UTF-8";
+/* 2023 Aliberk Sandıkçı*/
+/* 2023 Aliberk Sandıkçı*/
+@keyframes rain {
+  0% {
+    background-color: white;
+  }
+  25% {
+    background-color: red;
+  }
+  50% {
+    background-color: green;
+  }
+  100% {
+    background-color: yellow;
+  }
+}
+* {
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  -khtml-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  cursor: default;
+}
+
+body,
+html {
+  display: flex;
+  flex-direction: column;
+  margin: 0px;
+  height: 100%;
+  width: 100%;
+  background-color: black;
+  color: aliceblue;
+  font-family: "Montserrat", Arial, Helvetica, sans-serif;
+}
+
+section#top {
+  display: flex;
+  justify-content: space-around;
+  user-select: none;
+  width: 100%;
+  height: 100px;
+}
+section#top .class {
+  display: flex;
+  flex-direction: column;
+  column-gap: 10px;
+  margin: 5px;
+  min-width: 20vw;
+  margin-right: auto;
+  font-weight: 800;
+  font-style: oblique;
+}
+section#top .clock {
+  display: flex;
+}
+section#top .clock #time {
+  display: flex;
+  align-items: center;
+  align-self: center;
+  align-content: center;
+  justify-items: center;
+  justify-self: center;
+  justify-content: center;
+  font-size: 80px;
+}
+section#top .toolbox {
+  min-width: 20vw;
+  margin-left: auto;
+  text-align: right;
+  display: block;
+}
+section#top .toolbox button {
+  height: 30px;
+  width: 30px;
+  line-height: 20px;
+}
+section#top .settings-box {
+  min-width: min-content;
+  margin-left: 0;
+  text-align: right;
+}
+section#top .settings-box button {
+  height: 30px;
+  width: 30px;
+  line-height: 20px;
+}
+section#top .settings-box #settings {
+  display: none;
+  flex-direction: column;
+  align-items: end;
+  font-size: small;
+  margin-top: 5px;
+}
+section#top .settings-box #settings form {
+  display: flex;
+  flex-direction: column;
+  position: absolute;
+  min-width: 10vw;
+  background-color: grey;
+}
+section#top .settings-box #settings form .cell {
+  float: left;
+  display: flex;
+  flex-direction: row;
+  margin-bottom: 1vh;
+}
+section#top .settings-box #settings form .cell input[type=checkbox] {
+  appearance: none;
+  background-color: #fff;
+  margin: 0;
+  width: 1.15em;
+  height: 1.15em;
+  border: 0.15em solid darkslateblue;
+  border-radius: 0.15em;
+  transform: translateY(-0.075em);
+  display: grid;
+  place-content: center;
+  outline: 0px solid white;
+  outline-offset: 0px;
+}
+section#top .settings-box #settings form .cell input[type=checkbox]::before {
+  content: "";
+  width: 0.65em;
+  height: 0.65em;
+  transform: scale(0);
+  transition: 120ms transform ease-in-out;
+  box-shadow: inset 1em 1em green;
+  transform-origin: bottom left;
+  clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
+}
+section#top .settings-box #settings form .cell input[type=checkbox]:checked::before {
+  transform: scale(1);
+}
+section#top .settings-box #settings form .cell input[type=checkbox]:focus {
+  outline: max(2px, 0.15em) solid white;
+  outline-offset: max(2px, 0.15em);
+}
+section#top .settings-box #settings form .cell label {
+  padding-left: 5px;
+  display: block;
+  text-align: left;
+  align-self: center;
+}
+section#mid {
+  display: flex;
+  flex-direction: column;
+  text-align: center;
+  user-select: none;
+}
+section#mid #timers {
+  display: none;
+  flex-direction: column;
+}
+section#mid #timers #timers-menu ul {
+  display: flex;
+  justify-content: center;
+  padding: 0;
+}
+section#mid #timers #timers-menu ul li {
+  list-style-type: none;
+  box-sizing: border-box;
+}
+section#mid #timers #timers-menu ul li .pushable {
+  position: relative;
+  border: none;
+  background: transparent;
+  padding: 0;
+  cursor: pointer;
+  outline-offset: 4px;
+  transition: filter 250ms;
+}
+section#mid #timers #timers-menu ul li .shadow {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: hsla(0, 0%, 0%, 0.25);
+  will-change: transform;
+  transform: translateY(2px);
+  transition: transform 600ms cubic-bezier(0.3, 0.7, 0.4, 1);
+}
+section#mid #timers #timers-menu ul li .edge {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(to left, hsl(235, 84%, 26%) 0%, hsl(235, 84%, 26%) 8%, hsl(235, 84%, 26%) 92%, hsl(235, 84%, 26%) 100%);
+}
+section#mid #timers #timers-menu ul li .front {
+  display: block;
+  position: relative;
+  padding: 12px 42px;
+  color: white;
+  background: hsl(188, 88%, 29%);
+  will-change: transform;
+  transform: translateY(-4px);
+  transition: transform 600ms cubic-bezier(0.3, 0.7, 0.4, 1);
+}
+section#mid #timers #timers-menu ul li .pushable:hover {
+  filter: brightness(110%);
+}
+section#mid #timers #timers-menu ul li .pushable:hover .front {
+  transform: translateY(-6px);
+  transition: transform 250ms cubic-bezier(0.3, 0.7, 0.4, 1.5);
+}
+section#mid #timers #timers-menu ul li .pushable:active .front {
+  transform: translateY(-2px);
+  transition: transform 34ms;
+}
+section#mid #timers #timers-menu ul li .pushable:hover .shadow {
+  transform: translateY(4px);
+  transition: transform 250ms cubic-bezier(0.3, 0.7, 0.4, 1.5);
+}
+section#mid #timers #timers-menu ul li .pushable:active .shadow {
+  transform: translateY(1px);
+  transition: transform 34ms;
+}
+section#mid #timers #timers-menu ul li .pushable:focus:not(:focus-visible) {
+  outline: none;
+}
+section#mid #timers #timers-menu ul li .pushable-f .front,
+section#mid #timers #timers-menu ul li .pushable-f .edge,
+section#mid #timers #timers-menu ul li .pushable-f .shadow {
+  border-top-left-radius: 13px;
+  border-bottom-left-radius: 13px;
+}
+section#mid #timers #timers-menu ul li .pushable-f .edge {
+  background: linear-gradient(to left, hsl(235, 84%, 26%) 0%, hsl(235, 84%, 26%) 8%, hsl(235, 84%, 26%) 92%, hsl(193, 100%, 30%) 100%);
+}
+section#mid #timers #timers-menu ul li .pushable-l .front,
+section#mid #timers #timers-menu ul li .pushable-l .edge,
+section#mid #timers #timers-menu ul li .pushable-l .shadow {
+  border-top-right-radius: 13px;
+  border-bottom-right-radius: 13px;
+}
+section#mid #timers #timers-menu ul li .pushable-l .edge {
+  background: linear-gradient(to left, hsl(193, 100%, 30%) 0%, hsl(235, 84%, 26%) 8%, hsl(235, 84%, 26%) 92%, hsl(235, 84%, 26%) 100%);
+}
+section#mid #timers #timers-menu ul li .front {
+  font-size: medium;
+  font-weight: 500;
+}
+section#mid #timers #stopwatch {
+  display: none;
+  flex-direction: column;
+}
+section#mid #timers #stopwatch .timer {
+  font-size: 150px;
+  display: flex;
+  align-self: center;
+}
+section#mid #timers #stopwatch .timer .min,
+section#mid #timers #stopwatch .timer .sec,
+section#mid #timers #stopwatch .timer .msec {
+  width: 12vw;
+}
+section#mid #timers #timer {
+  display: none;
+  flex-direction: column;
+}
+section#mid #timers #timer .timer {
+  font-size: xx-large;
+}
+section#mid #yemek-listesi {
+  display: none;
+  flex-direction: column;
+}
+section#mid #animations {
+  display: none;
+  flex-direction: column;
+}
+section#bottom {
+  margin-top: auto;
+}
+section#bottom #rainbow {
+  width: 100%;
+  height: 20px;
+  animation: rain 4.72s ease infinite;
+}
+
+.kronometre {
+  text-align: center;
+  margin: auto;
+  font-size: 50px;
+}
+
+/*# sourceMappingURL=main.css.map */
diff --git a/assets/css/main.css.map b/assets/css/main.css.map
new file mode 100644
index 0000000..54b2ece
--- /dev/null
+++ b/assets/css/main.css.map
@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["../scss/main.scss","../scss/_animation.scss","../scss/_button.scss"],"names":[],"mappings":";AAAA;ACAA;AAEA;EACE;IACE;;EAGF;IACE;;EAGF;IACE;;EAGF;IACE;;;ADZJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;AAAA;EAEE;EACA;EAEA;EACA;EACA;EAEA;EACA;EACA;;;AAMA;EACE;EACA;EACA;EAEA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;;AAEA;EACE;EAGA;EACA;EACA;EACA;EACA;EACA;EACA;;AAIJ;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAIJ;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;;AAGA;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAEA;EAEE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EAEE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;;AAGF;EACE;EACA;;AAIJ;EACE;EACA;EACA;EACA;;AAWZ;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAGE;EACE;EACA;EACA;;AAEA;EAEE;EACA;;AEpLV;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA,YACE;;AAGJ;EACE;EACA;EACA;EACA;EACA;EAEA;;AAOF;EACE;EACA;EACA;EAGA;EACA;EACA;EACA;EACA,YACE;;AAGJ;EACE;;AAGF;EACE;EACA,YACE;;AAGJ;EACE;EACA;;AAGF;EACE;EACA,YACE;;AAGJ;EACE;EACA;;AAGF;EACE;;AAKA;AAAA;AAAA;EAGE;EACA;;AAGF;EACE;;AAUF;AAAA;AAAA;EAIE;EACA;;AAGF;EACE;;AFyEM;EACE;EACA;;AAOR;EACE;EACA;;AAEA;EACE;EACA;EACA;;AAEA;AAAA;AAAA;EAGE;;AAKN;EACE;EACA;;AAEA;EACE;;AAMN;EACE;EACA;;AAGF;EACE;EACA;;AAMJ;EACE;;AAEA;EACE;EACA;EACA;;;AAKN;EACE;EACA;EACA","file":"main.css"}
\ No newline at end of file
diff --git a/assets/css/not_scss.css b/assets/css/not_scss.css
new file mode 100644
index 0000000..1991330
--- /dev/null
+++ b/assets/css/not_scss.css
@@ -0,0 +1,10 @@
+.timer-action-button {
+  color: white;
+  background-color: #097a8b;
+  border-radius: 10px;
+  padding: 10px;
+  margin: 10px;
+  border-bottom-color: #0b147a;
+  border-right-color: #0b147a;
+  border-style: ridge;
+}
\ No newline at end of file
diff --git a/assets/images/bagis-qr.png b/assets/images/bagis-qr.png
new file mode 100644
index 0000000..dc5a079
Binary files /dev/null and b/assets/images/bagis-qr.png differ
diff --git a/assets/js/dev.js b/assets/js/dev.js
new file mode 100644
index 0000000..47acc79
--- /dev/null
+++ b/assets/js/dev.js
@@ -0,0 +1,2 @@
+// 2023 © Aliberk Sandıkçı
+// Temporary Development File
\ No newline at end of file
diff --git a/assets/js/initialize.js b/assets/js/initialize.js
new file mode 100644
index 0000000..84ef7e4
--- /dev/null
+++ b/assets/js/initialize.js
@@ -0,0 +1,120 @@
+// 2023 © Aliberk Sandıkçı
+// Initialize Variables / Arrays / Maps and first functions
+// Import after utils, updates, and mid js files!
+
+// CONSTANT VARIABLES
+const allButtons = [
+  "timers-button",
+  "yemekhane-button",
+  "ders-programi",
+  "animation-button",
+  "settings-button",
+  "stopwatch-button",
+  "timer-button"
+];
+
+const allCheckboxes = [
+  "chx-clockSecond",
+  "chx-timerMsec",
+  "chx-devVersion",
+  "chx-yksTimer",
+  "chx-fullscreenClock",
+  "chx-hideHeader",
+];
+
+const midItems = ["timers", "yemek-listesi", "animations", "ders-programi"];
+const timersItems = ["stopwatch", "timer"];
+
+const schoolPeriods = {
+  ["lessonStarts"]: ["08-40", "09-30", "10-20", "11-10", "12-00", "13-30", "14-20", "15-10"],
+  ["lessonEnds"]: ["09-20", "10-10", "11-00", "11-50", "12-40", "14-10", "15-00", "15-50"],
+};
+
+// VARIABLES
+var specialPeriods = {
+  ["launchStart"]: "12-40",
+  ["schoolEnds"]: "15-50",
+};
+
+var localSettings = {
+  ["local-grade"]: "Sınıf",
+  ["local-class"]: "Şube",
+}
+
+var curVals = [
+  "clockSecond",
+  "timerMsec",
+  "devVersion",
+  "yksTimer",
+  "fullscreenClock",
+  "hideHeader",
+]
+
+var curSeconds;
+var curMin;
+var curHour;
+
+const confs = new Map();
+
+FirstInitialization();
+var t = setInterval(DEVupdateSettings, 100);
+var t2 = setInterval(updateComponents, 100);
+
+
+function FirstInitialization() {
+  getVariablesToConfig();
+  getFormInputs();
+  getURLSettings();
+  updateFormInputs();
+
+  // Update Beginning Components
+  console.log(confs.get("local-grade"));
+  setToID("grade", confs.get("local-grade"), "Sınıf");
+  setToID("class", confs.get("local-class"), "Şube");
+
+  updateComponents();
+}
+
+
+function getVariablesToConfig() {
+  addObjectToConfig(localSettings, 1);
+}
+
+function getFormInputs() {
+  allCheckboxes.forEach(element => {
+    let chx = document.getElementById(element);
+    if (chx.checked) {
+      confs.set(element.slice(4), "1");
+    } else {
+      confs.set(element.slice(4), "0");
+    }
+  });
+}
+
+function getURLSettings() {
+  const queryString = window.location.search;
+  const urlParams = new URLSearchParams(queryString);
+
+  addArrayToConfig(allCheckboxes, urlParams);
+  addArrayToConfig(curVals, urlParams);
+  addObjectToConfig(localSettings, urlParams);
+  addObjectToConfig(specialPeriods, urlParams);
+}
+
+
+/**
+ * Update form inputs with local variables and user changed options
+ */
+function updateFormInputs() {
+  confs.forEach((val, key) => {
+    if (allCheckboxes.includes("chx-" + key)) {
+      if (val == "0") {
+        document.getElementById("chx-" + key).checked = false;
+      } else {
+        document.getElementById("chx-" + key).checked = true;
+      }
+    }
+  });
+}
+
+
diff --git a/assets/js/old_main.js b/assets/js/old_main.js
new file mode 100644
index 0000000..061da58
--- /dev/null
+++ b/assets/js/old_main.js
@@ -0,0 +1,299 @@
+// 2023 Aliberk Sandıkçı
+
+// VARIABLES
+var FlagSecond = 0;
+var FlagSettings = 0;
+var FlagTimers = 1;
+var FlagExtras = 1;
+var FlagTools = 1;
+var FlagFullscreen = 0;
+var FlagLargenClock = 0;
+var MidItems = ["timers", "stopwatch", "timer", "yemek-listesi", "animations"]
+
+// RUN FUNCTIONS ON START
+updateTime();
+if (FlagSettings) { toggleSettings() }
+if (FlagTimers) { toggleTimers() }
+
+// RUN FUNCTIONS PERIODICALLY
+var t = setInterval(updateTime, 1000);
+
+
+//
+// MAIN FUNCTIONS
+//
+
+function updateTime() {
+  var d = new Date();
+  var curHour = getDigits(d.getHours(), 2);
+  var curMin = getDigits(d.getMinutes(), 2);
+  var curSeconds = getDigits(d.getSeconds(), 2);
+
+  if (FlagSecond) {
+    document.getElementById("time").innerHTML = curHour + "." + curMin + "." + curSeconds;
+  } else {
+    document.getElementById("time").innerHTML = curHour + "." + curMin;
+  }
+
+  if (curHour == 12 && (curMin >= 24 && curMin <= 30) && FlagExtras == 1) {
+    document.getElementById("time").style.color = "red";
+    document.getElementById("rainbow").style.display = "inherit";
+  } else {
+    document.getElementById("time").style.color = "inherit";
+    document.getElementById("rainbow").style.display = "none";
+  }
+}
+
+function toggleClockSeconds() {
+  let chx = document.getElementById("chx-clockSecond");
+  if (chx.checked) {
+    FlagSecond = 1;
+  } else {
+    FlagSecond = 0;
+  }
+  updateTime();
+}
+
+function toggleDevVersion() {
+  let chx = document.getElementById("chx-devVersion");
+  if (chx.checked) {
+    window.location.replace("dev.html" + window.location.search);
+  } else {
+    window.location.replace("index.html" + window.location.search);
+  }
+}
+
+function toggleSettings() {
+  let settings = document.getElementById("settings");
+  console.log(settings.style.display);
+  if (settings.style.display == "flex") {
+    settings.style.display = "none";
+  } else {
+    settings.style.display = "flex";
+  }
+}
+
+function toggleTimers(typ = "display") {
+  switch (typ) {
+    case "stopwatch":
+      hideMidAll("stopwatch", "timers");
+      toggleItem("id", "stopwatch");
+      break;
+    case "timer":
+      hideMidAll("timer", "timers");
+      toggleItem("id", "timer");
+      break;
+    default: // "display"
+      hideMidAll("timers");
+      toggleItem("id", "timers");
+      break;
+  }
+}
+
+function toggleYemekListesi() {
+  hideMidAll("yemek-listesi");
+  toggleItem("id", "yemek-listesi");
+}
+
+function toggleAnimations() {
+  hideMidAll("animations");
+  toggleItem("id", "animations");
+}
+
+
+function toggleExtra() {
+  let chx = document.getElementById("chx-closeExtra");
+  if (chx.checked) {
+    FlagExtras = 0;
+  } else {
+    FlagExtras = 1;
+  }
+  updateExtras();
+
+}
+
+function toggleTools() {
+  let chx = document.getElementById("chx-closeTools");
+  if (chx.checked) {
+    FlagTools = 0;
+  } else {
+    FlagTools = 1;
+  }
+  updateToolVisibility();
+}
+
+function toggleFullscreen() {
+  let chx = document.getElementById("chx-fullscreen");
+  if (chx.checked) {
+    FlagFullscreen = 1;
+  } else {
+    FlagFullscreen = 0;
+  }
+  updateFullscreen();
+}
+
+function toggleLargenClock() {
+  let chx = document.getElementById("chx-largenClock");
+  if (chx.checked) {
+    FlagLargenClock = 1;
+  } else {
+    FlagLargenClock = 0;
+  }
+  updateClockSize();
+}
+
+function toggleExamMode() {
+  let chx = document.getElementById("chx-examMode");
+  if (chx.checked) {
+    document.getElementById("chx-largenClock").checked = true;
+    document.getElementById("chx-closeExtra").checked = true;
+    document.getElementById("chx-clockSecond").checked = true;
+    document.getElementById("chx-closeTools").checked = true;
+    // document.getElementById("chx-fullscreen").checked = true;
+    // toggleFullscreen();
+    // FIXME Try, if not works open new tab and make fullscreen automatically, when exiting fullscreen actually close tab !!!
+    toggleExtra();
+    toggleLargenClock();
+    toggleClockSeconds();
+    toggleTools();
+    document.getElementById("header-note").style.display = "block";
+  } else {
+    document.getElementById("chx-largenClock").checked = false;
+    document.getElementById("chx-closeExtra").checked = false;
+    document.getElementById("chx-clockSecond").checked = false;
+    document.getElementById("chx-closeTools").checked = false;
+    // document.getElementById("chx-fullscreen").checked = false;
+    // toggleFullscreen();
+    toggleExtra();
+    toggleLargenClock();
+    toggleClockSeconds();
+    toggleTools();
+    document.getElementById("header-note").style.display = "none";
+  }
+}
+
+// ----------------------------------------- 
+//  UTILITIES
+// 
+
+function getDigits(str, num) {
+  return ("0" + str).slice(-num);
+}
+
+/**
+ * 
+ * @param  {...any} except 
+ */
+function hideMidAll(...except) {
+  MidItems.forEach(element => {
+    if (!except.includes(element)) {
+      document.getElementById(element).style.display = "none";
+    }
+  });
+}
+
+/** 
+ * @param type id, class
+ * @param name id or class name 
+ * @param display display type
+ */
+function toggleItem(type, name, display = "default") {
+  switch (type) {
+    case "id":
+
+      // TODO AUTO display type recognizer, do not require to type display type
+
+      var targetDisplay = "flex";
+      switch (display) {
+        case "absolute":
+          targetDisplay = "absolute";
+          break;
+        case "block":
+          targetDisplay = "block";
+          break;
+        default:
+          break;
+      }
+
+      var item = document.getElementById(name);
+      if (item.style.display == targetDisplay) {
+        item.style.display = "none";
+      } else {
+        item.style.display = targetDisplay;
+      }
+      break;
+    default:
+      console.error("no toggle item except ids!");
+      break;
+  }
+}
+
+function updateFullscreen() {
+  var elem = document.documentElement;
+  if (FlagFullscreen) {
+    console.warn("FULLSCREEN");
+    /* View in fullscreen */
+
+    if (elem.requestFullscreen) {
+      elem.requestFullscreen();
+    } else if (elem.webkitRequestFullscreen) { /* Safari */
+      elem.webkitRequestFullscreen();
+    } else if (elem.msRequestFullscreen) { /* IE11 */
+      elem.msRequestFullscreen();
+    }
+
+  } else {
+    /* Close fullscreen */
+
+    if (document.exitFullscreen) {
+      document.exitFullscreen();
+    } else if (document.webkitExitFullscreen) { /* Safari */
+      document.webkitExitFullscreen();
+    } else if (document.msExitFullscreen) { /* IE11 */
+      document.msExitFullscreen();
+    }
+
+  }
+}
+
+function updateToolVisibility() {
+  var item = document.getElementsByClassName("settings-box")[0];
+  if (FlagTools) {
+    document.getElementById("toolbox").style.display = "block";
+    item.style.marginLeft = "0px";
+    item.style.minWidth = "min-content";
+  } else {
+    hideMidAll();
+    document.getElementById("toolbox").style.display = "none";
+    item.style.marginLeft = "auto";
+    item.style.minWidth = "20vw";
+  }
+}
+
+function updateExtras() {
+  var arr = document.getElementsByClassName("extraItem");
+  for (let i = 0; i < arr.length; i++) {
+    const element = arr[i];
+    if (FlagExtras) {
+      element.style.display = "inherit";
+    }
+    else {
+      element.style.display = "none";
+    }
+  }
+}
+
+function updateClockSize() {
+  let clock = document.getElementById("time");
+  let top = document.getElementById("top");
+  if (FlagLargenClock) {
+    document.getElementById("clock-divider").style.display = "none";
+    clock.style.fontSize="200px";
+    top.style.height="max-content";
+
+  } else {
+    document.getElementById("clock-divider").style.display = "block";
+    clock.style.fontSize="80px";
+    top.style.height="100px";
+  }
+}
\ No newline at end of file
diff --git a/assets/js/old_stopwatch.js b/assets/js/old_stopwatch.js
new file mode 100644
index 0000000..393dadb
--- /dev/null
+++ b/assets/js/old_stopwatch.js
@@ -0,0 +1,108 @@
+var curAction = "wait";
+var previousAction = "wait"
+var startTime = new Date();
+var curTime = new Date();
+var timeMS = 0;
+var FlagMilisecond = 1;
+var timer = document.getElementById("stopwatch").getElementsByClassName("timer")[0];
+
+tick();
+
+// NOT OPTIMIZED, place in start switch
+var t = setInterval(tick, 10);
+
+const sleep = ms => new Promise(r => setTimeout(r, ms));
+
+async function Stopwatch(action) {
+  switch (action) {
+    case "start":
+      console.log("start function started");
+      if (previousAction == "start") { break; }
+      startTime = new Date();
+      curAction = "increase";
+      tick();
+      previousAction = "start";
+      document.getElementById("start-cro").style.color = "greenyellow";
+      document.getElementById("start-cro").style.borderTopColor = "greenyellow";
+      document.getElementById("start-cro").style.borderLeftColor = "greenyellow";
+      await sleep(200);
+      document.getElementById("start-cro").style.color = "grey";
+      document.getElementById("start-cro").style.borderTopColor = "grey";
+      document.getElementById("start-cro").style.borderLeftColor = "grey";
+      break;
+    case "stop":
+      curAction = "stop";
+      tick();
+      previousAction = "stop";
+      document.getElementById("stop-cro").style.color = "red";
+      document.getElementById("stop-cro").style.borderTopColor = "red";
+      document.getElementById("stop-cro").style.borderLeftColor = "red";
+      await sleep(200);
+      document.getElementById("stop-cro").style.color = "white";
+      document.getElementById("stop-cro").style.borderTopColor = "white";
+      document.getElementById("stop-cro").style.borderLeftColor = "white";
+      document.getElementById("start-cro").style.color = "white";
+      document.getElementById("start-cro").style.borderTopColor = "white";
+      document.getElementById("start-cro").style.borderLeftColor = "white";
+      break;
+
+    default:
+      // console.error("no action (old script)");
+      break;
+  }
+}
+
+function updateMsec() {
+  timer.getElementsByClassName("msec")[0].innerHTML = getDigits(Math.floor((timeMS / 10) % 100), 2);
+}
+
+function updateSec() {
+  timer.getElementsByClassName("sec")[0].innerHTML = getDigits(Math.floor((timeMS / 1000) % 60), 2);
+}
+
+function updateMin() {
+  timer.getElementsByClassName("min")[0].innerHTML = getDigits(Math.floor((timeMS / 1000 / 60) << 0), 2);
+}
+
+
+function getDigits(str, num) {
+  return ("0" + str).slice(-num);
+}
+
+function tick() {
+  switch (curAction) {
+    case "increase":
+      curTime = new Date();
+      timeMS = (curTime.getTime() - startTime.getTime());
+      if (FlagMilisecond) {
+        updateMsec();
+      }
+      updateSec();
+      updateMin();
+      break;
+    case "stop":
+      timer.getElementsByClassName("min")[0].innerHTML = "00";
+      timer.getElementsByClassName("sec")[0].innerHTML = "00";
+      timer.getElementsByClassName("msec")[0].innerHTML = "00";
+      curAction = "wait";
+      previousAction = "stop"
+      break;
+    default:
+      // console.error("no action (old script)");
+      break;
+  }
+}
+
+function toggleTimerMsec() {
+  let chx = document.getElementById("chx-timerMsec");
+  if (chx.checked) {
+    FlagMilisecond = 1;
+    timer.getElementsByClassName("msec")[0].style.display = "flex";
+    document.getElementById("stopwatch-msec-dot").style.display = "flex";
+  } else {
+    FlagMilisecond = 0;
+    timer.getElementsByClassName("msec")[0].style.display = "none";
+    document.getElementById("stopwatch-msec-dot").style.display = "none";
+  }
+  tick();
+}
\ No newline at end of file
diff --git a/assets/js/timers.js b/assets/js/timers.js
new file mode 100644
index 0000000..307dc3a
--- /dev/null
+++ b/assets/js/timers.js
@@ -0,0 +1,81 @@
+// OLD TIMER SCRIPT !!!
+
+
+var curAction = "wait";
+var previousAction = "wait"
+var startTime = new Date();
+var curTime = new Date();
+var timeMS = 0;
+var FlagMilisecond = 1;
+var timer = document.getElementById("stopwatch").getElementsByClassName("timer")[0];
+
+tick();
+
+// NOT OPTIMIZED, place in start switch
+var t = setInterval(tick, 10);
+
+
+
+function Stopwatch(action) {
+  switch (action) {
+    case "start":
+      console.log("start function started");
+      if (previousAction == "start") { break; }
+      startTime = new Date();
+      curAction = "increase";
+      tick();
+      previousAction = "start";
+      break;
+    case "stop":
+      curAction = "stop";
+      tick();
+      previousAction = "stop";
+      break;
+
+    default:
+      console.warn("Stopwatch() is working, possible unoptimized, WIP!");
+      break;
+  }
+}
+
+function updateMsec() {
+  timer.getElementsByClassName("msec")[0].innerHTML = getDigits(Math.floor((timeMS / 10) % 100), 2);
+}
+
+function updateSec() {
+  timer.getElementsByClassName("sec")[0].innerHTML = getDigits(Math.floor((timeMS / 1000) % 60), 2);
+}
+
+function updateMin() {
+  timer.getElementsByClassName("min")[0].innerHTML = getDigits(Math.floor((timeMS / 1000 / 60) << 0), 2);
+}
+
+
+// no need, already in utils.js
+// function getDigits(str, num) {
+//   return ("0" + str).slice(-num);
+// }
+
+function tick() {
+  switch (curAction) {
+    case "increase":
+      curTime = new Date();
+      timeMS = (curTime.getTime() - startTime.getTime());
+      if (confs.get('timerMsec') == "1") {
+        updateMsec();
+      }
+      updateSec();
+      updateMin();
+      break;
+    case "stop":
+      timer.getElementsByClassName("min")[0].innerHTML = "00";
+      timer.getElementsByClassName("sec")[0].innerHTML = "00";
+      timer.getElementsByClassName("msec")[0].innerHTML = "00";
+      curAction = "wait";
+      previousAction = "stop"
+      break;
+    default:
+      console.warn("tick() is working, possible unoptimized, WIP!");
+      break;
+  }
+}
diff --git a/assets/js/updates.js b/assets/js/updates.js
new file mode 100644
index 0000000..8b4e841
--- /dev/null
+++ b/assets/js/updates.js
@@ -0,0 +1,47 @@
+/**
+ * Update components with conf variables each second
+ */
+function updateComponents() {
+  setToID("time", updateTime());
+
+  if (curHour == 12 && (curMin >= 24 && curMin <= 30)) {
+    document.getElementById("time").style.color = "red";
+    document.getElementById("rainbow").style.display = "inherit";
+  } else {
+    document.getElementById("time").style.color = "inherit";
+    document.getElementById("rainbow").style.display = "none";
+  }
+
+  let timer = document.getElementById("stopwatch").getElementsByClassName("timer")[0];
+  if (confs.get("timerMsec") == 1) {
+    timer.getElementsByClassName("msec")[0].style.display = "flex";
+    document.getElementById("stopwatch-msec-dot").style.display = "flex";
+  } else {
+    timer.getElementsByClassName("msec")[0].style.display = "none";
+    document.getElementById("stopwatch-msec-dot").style.display = "none";
+  }
+}
+
+function updateTime() {
+  var d = new Date();
+  curHour = getDigits(d.getHours(), 2);
+  curMin = getDigits(d.getMinutes(), 2);
+  curSeconds = getDigits(d.getSeconds(), 2);
+
+  if (confs.get("clockSecond") == "1") {
+    return curHour + "." + curMin + "." + curSeconds;
+  } else {
+    return curHour + "." + curMin;
+  }
+}
+
+function DEVupdateSettings() {
+  let devData =
+    "<b>confs:</b> " + JSON.stringify(confs, (key, value) => (value instanceof Map ? [...value] : value)) + "<br>" +
+    "<b>schoolPeriods:</b> " + JSON.stringify(schoolPeriods, (key, value) => (value instanceof Map ? [...value] : value)) + "<br>" +
+    "<b>specialPeriods:</b> " + JSON.stringify(specialPeriods, (key, value) => (value instanceof Map ? [...value] : value)) + "<br>" +
+    "<b>info:</b> " + navigator.userAgent + "<br>" +
+    "<b>local-settings:</b>" + (urlParams = new URLSearchParams(window.location.search)) + "<br>";
+
+  document.getElementById("DEV").innerHTML = devData;
+}
\ No newline at end of file
diff --git a/assets/js/utils.js b/assets/js/utils.js
new file mode 100644
index 0000000..5d4ce75
--- /dev/null
+++ b/assets/js/utils.js
@@ -0,0 +1,130 @@
+function getDigits(str, num) {
+  return ("0" + str).slice(-num);
+}
+
+/**
+ * 
+ * @param {Object} obj 
+ * @param {URLSearchParams} params
+ */
+function addObjectToConfig(obj, params) {
+  Object.entries(obj).forEach(element => {
+    const [key, value] = element;
+    if (params == 1) {
+      confs.set(key, value);
+    }
+    else if (params.has(key)) {
+      confs.set(key, params.get(key));
+    }
+  });
+}
+
+/**
+ * 
+ * @param {Array} arr 
+ * @param {URLSearchParams} params
+ */
+function addArrayToConfig(arr, params) {
+  arr.forEach(element => {
+    if (params.has(element)) {
+      confs.set(element, params.get(element));
+    }
+  });
+}
+
+/**
+ * 
+ * @param {string} id id to be updated
+ * @param {string} config config to update with
+ * @param {any} type type
+ */
+function setToID(id, config, type = 0) {
+  let obj = document.getElementById(id)
+  if (obj.innerHTML != config && type == 0) {
+    document.getElementById(id).innerHTML = config;
+  } else if (typeof type === 'string') {
+    if (config == type) {
+      document.getElementById(id).innerHTML = "<span style='color:red;'>" + config + "</span>";
+    } else if (config != type) {
+      document.getElementById(id).innerHTML = config;
+    }
+  }
+}
+
+/**
+ * Hides all elements with matching id in a list
+ * @param  {Array} elements element ids to hide
+ * @param  {...any} except hide elements except these
+ */
+function hideAllExcept(elements, ...except) {
+  elements.forEach(element => {
+    if (!except.includes(element)) {
+      document.getElementById(element).style.display = "none";
+    }
+  });
+}
+
+/** 
+ * @param {String} type id or class for getting elements to toggle
+ * @param {String} name id or class name
+ * @param {String} display display type, defaults to flex
+ */
+function toggleItemDisplay(type, name = "no", display = "flex") {
+  switch (type) {
+    case "auto":
+      if (name == "no") {
+        // console.log(1, event.srcElement.id); // DEPRECATED !
+        console.alert('dont use type auto for item display! WIP')
+        // get id with button/checkbox name! and auto detect
+      }
+      break;
+    case "id":
+      let item = document.getElementById(name);
+      if (item.style.display == display) {
+        item.style.display = "none";
+      } else {
+        item.style.display = display;
+      }
+      if (midItems.includes(name)) {
+        hideAllExcept(midItems, name);
+      } else if (timersItems.includes(name)) {
+        hideAllExcept(timersItems, name);
+      }
+      break;
+    default:
+      console.error("no toggle item except ids!");
+      break;
+  }
+}
+
+function toggleConf(type, name = "no") {
+  switch (type) {
+    case "auto":
+      // AUTO DETECT type, id etc.
+      alert("dont use auto for toggleConf");
+      break;
+    case "id-chx":
+      if (name != "no") {
+        let chx = document.getElementById("chx-" + name);
+        if (chx.checked) {
+          confs.set(name, 1);
+        } else {
+          confs.set(name, 0);
+        }
+      }
+      break;
+    default:
+      console.error("unvalid type");
+      break;
+  }
+}
+
+function toggleDevVersion() {
+  let chx = document.getElementById("chx-devVersion");
+
+  if (chx.checked) {
+    window.location.replace("dev.html" + window.location.search);
+  } else {
+    window.location.replace("index.html" + window.location.search);
+  }
+}
\ No newline at end of file
diff --git a/assets/pop.mp3 b/assets/pop.mp3
new file mode 100644
index 0000000..6a9260f
Binary files /dev/null and b/assets/pop.mp3 differ
diff --git a/assets/scss/_animation.scss b/assets/scss/_animation.scss
new file mode 100644
index 0000000..4783659
--- /dev/null
+++ b/assets/scss/_animation.scss
@@ -0,0 +1,19 @@
+/* 2023 Aliberk Sandıkçı*/
+
+@keyframes rain {
+  0% {
+    background-color: white;
+  }
+
+  25% {
+    background-color: red;
+  }
+
+  50% {
+    background-color: green;
+  }
+
+  100% {
+    background-color: yellow;
+  }
+}
\ No newline at end of file
diff --git a/assets/scss/_button.scss b/assets/scss/_button.scss
new file mode 100644
index 0000000..c57f944
--- /dev/null
+++ b/assets/scss/_button.scss
@@ -0,0 +1,122 @@
+// CREDIT: https://www.joshwcomeau.com/animation/3d-button/
+
+@mixin button-effect {
+  .pushable {
+    position: relative;
+    border: none;
+    background: transparent;
+    padding: 0;
+    cursor: pointer;
+    outline-offset: 4px;
+    transition: filter 250ms;
+  }
+
+  .shadow {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    // border-radius: 12px;
+    background: hsl(0deg 0% 0% / 0.25);
+    will-change: transform;
+    transform: translateY(2px);
+    transition:
+      transform 600ms cubic-bezier(.3, .7, .4, 1);
+  }
+
+  .edge {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    // border-radius: 12px;
+    background: linear-gradient(to left,
+        hsl(235, 84%, 26%) 0%,
+        hsl(235, 84%, 26%) 8%,
+        hsl(235, 84%, 26%) 92%,
+        hsl(235, 84%, 26%) 100%);
+  }
+
+  .front {
+    display: block;
+    position: relative;
+    padding: 12px 42px;
+    // border-radius: 12px;
+    // font-size: 1.25rem;
+    color: white;
+    background: hsl(188, 88%, 29%);
+    will-change: transform;
+    transform: translateY(-4px);
+    transition:
+      transform 600ms cubic-bezier(.3, .7, .4, 1);
+  }
+
+  .pushable:hover {
+    filter: brightness(110%);
+  }
+
+  .pushable:hover .front {
+    transform: translateY(-6px);
+    transition:
+      transform 250ms cubic-bezier(.3, .7, .4, 1.5);
+  }
+
+  .pushable:active .front {
+    transform: translateY(-2px);
+    transition: transform 34ms;
+  }
+
+  .pushable:hover .shadow {
+    transform: translateY(4px);
+    transition:
+      transform 250ms cubic-bezier(.3, .7, .4, 1.5);
+  }
+
+  .pushable:active .shadow {
+    transform: translateY(1px);
+    transition: transform 34ms;
+  }
+
+  .pushable:focus:not(:focus-visible) {
+    outline: none;
+  }
+
+  .pushable-f {
+
+    .front,
+    .edge,
+    .shadow {
+      border-top-left-radius: 13px;
+      border-bottom-left-radius: 13px;
+    }
+
+    .edge {
+      background: linear-gradient(to left,
+          hsl(235, 84%, 26%) 0%,
+          hsl(235, 84%, 26%) 8%,
+          hsl(235, 84%, 26%) 92%,
+          hsl(193, 100%, 30%) 100%);
+    }
+  }
+
+  .pushable-l {
+
+    .front,
+    .edge,
+    .shadow {
+
+      border-top-right-radius: 13px;
+      border-bottom-right-radius: 13px;
+    }
+
+    .edge {
+      background: linear-gradient(to left,
+          hsl(193, 100%, 30%) 0%,
+          hsl(235, 84%, 26%) 8%,
+          hsl(235, 84%, 26%) 92%,
+          hsl(235, 84%, 26%) 100%);
+    }
+  }
+}
\ No newline at end of file
diff --git a/assets/scss/dev.scss b/assets/scss/dev.scss
new file mode 100644
index 0000000..2358c9c
--- /dev/null
+++ b/assets/scss/dev.scss
@@ -0,0 +1,22 @@
+/* 2023 Aliberk Sandıkçı*/
+
+#ders-programi {
+  display: none;
+  flex-direction: column;
+  padding: 0px 100px;
+  padding-top: 10px;
+
+  img {
+    max-width: 1309px;
+    max-height: 601px;
+    aspect-ratio: 1309/601;
+  }
+}
+
+.min,
+.sec,
+.msec {
+  display:flex;
+  width: 7vw;
+  justify-content: center;
+}
\ No newline at end of file
diff --git a/assets/scss/main.scss b/assets/scss/main.scss
new file mode 100644
index 0000000..4df982e
--- /dev/null
+++ b/assets/scss/main.scss
@@ -0,0 +1,253 @@
+/* 2023 Aliberk Sandıkçı*/
+@use "button" as b;
+@use "animation" as a;
+
+* {
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  -khtml-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  cursor: default;
+}
+
+body,
+html {
+  display: flex;
+  flex-direction: column;
+
+  margin: 0px;
+  height: 100%;
+  width: 100%;
+
+  background-color: black;
+  color: aliceblue;
+  font-family: "Montserrat", Arial, Helvetica, sans-serif;
+}
+
+section {
+
+  // SECTION TOP
+  &#top {
+    display: flex;
+    justify-content: space-around;
+    user-select: none;
+
+    width: 100%;
+    height: 100px;
+
+    .class {
+      display: flex;
+      flex-direction: column;
+      column-gap: 10px;
+      margin: 5px;
+      min-width: 20vw;
+      margin-right: auto;
+      font-weight: 800;
+      font-style: oblique;
+    }
+
+    .clock {
+      display: flex;
+
+      #time {
+        display: flex;
+
+        //UNNECESSARY LINES?
+        align-items: center;
+        align-self: center;
+        align-content: center;
+        justify-items: center;
+        justify-self: center;
+        justify-content: center;
+        font-size: 80px;
+      }
+    }
+
+    .toolbox {
+      min-width: 20vw;
+      margin-left: auto;
+      text-align: right;
+      display: block;
+
+      button {
+        height: 30px;
+        width: 30px;
+        line-height: 20px;
+      }
+    }
+
+    .settings-box {
+      min-width: min-content;
+      margin-left: 0;
+      text-align: right;
+
+      button {
+        height: 30px;
+        width: 30px;
+        line-height: 20px;
+      }
+
+      #settings {
+        display: none;
+        flex-direction: column;
+        align-items: end;
+        font-size: small;
+        margin-top: 5px;
+
+
+        form {
+          display: flex;
+          flex-direction: column;
+          position: absolute;
+          min-width: 10vw;
+          background-color: grey;
+
+          .cell {
+            float: left;
+            display: flex;
+            flex-direction: row;
+            margin-bottom: 1vh;
+
+            input[type="checkbox"] {
+              //UNNECESSARY LINES?
+              appearance: none;
+              background-color: #fff;
+              margin: 0;
+              width: 1.15em;
+              height: 1.15em;
+              border: 0.15em solid darkslateblue;
+              border-radius: 0.15em;
+              transform: translateY(-0.075em);
+              display: grid;
+              place-content: center;
+              outline: 0px solid white;
+              outline-offset: 0px;
+
+              &::before {
+                //UNNECESSARY LINES?
+                content: "";
+                width: 0.65em;
+                height: 0.65em;
+                transform: scale(0);
+                transition: 120ms transform ease-in-out;
+                box-shadow: inset 1em 1em green;
+                transform-origin: bottom left;
+                clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
+              }
+
+              &:checked::before {
+                transform: scale(1);
+              }
+
+              &:focus {
+                outline: max(2px, 0.15em) solid white;
+                outline-offset: max(2px, 0.15em);
+              }
+            }
+
+            label {
+              padding-left: 5px;
+              display: block;
+              text-align: left;
+              align-self: center;
+            }
+          }
+        }
+
+
+      }
+    }
+  }
+
+  // SECTION MID
+  &#mid {
+    display: flex;
+    flex-direction: column;
+    text-align: center;
+    user-select: none;
+
+    #timers {
+      display: none;
+      flex-direction: column;
+
+      #timers-menu {
+        ul {
+          display: flex;
+          justify-content: center;
+          padding: 0;
+
+          li {
+            // padding: 1px;
+            list-style-type: none;
+            box-sizing: border-box;
+
+            @include b.button-effect;
+
+            .front {
+              font-size: medium;
+              font-weight: 500;
+            }
+          }
+        }
+
+      }
+
+      #stopwatch {
+        display: none;
+        flex-direction: column;
+
+        .timer {
+          font-size: 150px;
+          display: flex;
+          align-self: center;
+
+          .min,
+          .sec,
+          .msec {
+            width: 12vw;
+          }
+        }
+      }
+
+      #timer {
+        display: none;
+        flex-direction: column;
+
+        .timer {
+          font-size: xx-large;
+        }
+      }
+
+    }
+
+    #yemek-listesi {
+      display: none;
+      flex-direction: column;
+    }
+
+    #animations {
+      display: none;
+      flex-direction: column;
+    }
+
+  }
+
+  // SECTION BOTTOM
+  &#bottom {
+    margin-top: auto;
+
+    #rainbow {
+      width: 100%;
+      height: 20px;
+      animation: rain 4.72s ease infinite;
+    }
+  }
+}
+
+.kronometre {
+  text-align: center;
+  margin: auto;
+  font-size: 50px;
+}
\ No newline at end of file
diff --git a/dev.html b/dev.html
new file mode 100644
index 0000000..d7778ba
--- /dev/null
+++ b/dev.html
@@ -0,0 +1,220 @@
+<!DOCTYPE html>
+<html xmlns="http://www.w3.org/1999/xhtml" lang="tr">
+
+<head>
+  <!--!Copyright © 2023 Aliberk Sandıkçı -->
+  <!--!Copyright © 2023 iflpanel Developers -->
+  <meta charset="UTF-8">
+
+  <!-- Meta Content -->
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta name="description" content="iflpanel Akıllı Tahta Arkaplan Sayfası">
+  <meta name="keywords" content="iflpanel,akıllı tahta,arkaplan,tahta,board">
+  <meta name="author" content="Aliberk Sandıkçı">
+
+  <!-- CSS Files -->
+  <link rel="stylesheet" type="text/css" href="./assets/css/main.css">
+  <link rel="stylesheet" type="text/css" href="./assets/css/dev.css">
+
+
+  <title>DEV VERSION | iflpanel Tahta</title>
+</head>
+
+<body>
+  <!-- MAIN AREA -->
+  <section id="top">
+    <div class="class">
+      <span id="grade">Sınıf</span>
+      <span id="class">Şube</span>
+
+      <!-- DEV -->
+      <!-- DEV --> <span style="font-size: xx-small; line-height: 1px; color:red">(DEV VERSION)</span>
+      <!-- DEV -->
+    </div>
+
+    <div class="clock">
+      <h1 id="time">12.00</h1>
+    </div>
+    <div class="settings-box">
+      <form>
+        <button id="timers-button" type="button" onmouseover="toggleItemDisplay('id', 'timers')"
+          onclick="toggleItemDisplay('id', 'timers')">⏱</button>
+
+        <button id="yemekhane-button" type="button" onmouseover="toggleItemDisplay('id', 'yemek-listesi')"
+          onclick="toggleItemDisplay('id', 'yemek-listesi')">🍔</button>
+
+        <button id="ders-programi-buton" type="button" onmouseover="toggleItemDisplay('id', 'ders-programi')"
+          onclick="toggleItemDisplay('id', 'ders-programi')">📑</button>
+
+        <button id="animation-button" type="button" onmouseover="toggleItemDisplay('id', 'animations')"
+          onclick="toggleItemDisplay('id', 'animations')">🕹️</button>
+
+        <button id="settings-button" type="button" onmouseover="toggleItemDisplay('id', 'settings')"
+          onclick="toggleItemDisplay('id', 'settings')">⚙</button>
+      </form>
+      <div id="settings">
+        <form>
+          <div class="cell">
+            <input type="checkbox" id="chx-clockSecond" onchange="toggleConf('id-chx','clockSecond')" checked>
+            <label for="chx-clockSecond">Saniye</label>
+          </div>
+          <div class="cell">
+            <input type="checkbox" id="chx-timerMsec" onchange="toggleConf('id-chx','timerMsec')" checked>
+            <label for="chx-timerMsec">Sayaçlarda Milisaniye</label>
+          </div>
+          <div class="cell">
+            <!-- onchange="toggleOther('devVersion')" -->
+            <input type="checkbox" id="chx-devVersion" onchange="toggleDevVersion()" checked>
+            <label for="chx-devVersion" style="font-size: x-small;">Geliştirici Sürümü, <br>local-settings move!</label>
+          </div>
+          <div class="cell">
+            <input type="checkbox" id="chx-yksTimer" onchange="toggleConf('id-chx','yksTimer')">
+            <label for="chx-yksTimer">YKS Sayacı</label>
+          </div>
+          <div class="cell">
+            <input type="checkbox" id="chx-fullscreenClock" onchange="toggleConf('id-chx','fullscreenClock')">
+            <label for="chx-fullscreenClock">Tam Ekran Saat</label>
+          </div>
+          <div class="cell">
+            <input type="checkbox" id="chx-hideHeader" onchange="toggleConf('id-chx','hideHeader')">
+            <label for="chx-hideHeader">Üst Barı Gizle</label>
+          </div>
+          <div class="cell">
+            <input type="checkbox" id="chx-oneventSecond" onchange="toggleConf('id-chx','oneventSecond')">
+            <label for="chx-oneventSecond" style="font-size: x-small;">Ders Sonu/Başı Saniye Göster, <br>saniye
+              checkboxını otomatik update et!</label>
+          </div>
+          <div class="cell">
+            <input type="checkbox" id="chx-settingsMaker" onchange="toggleItemDisplay('id-chx','settingsMaker')">
+            <label for="chx-settingsMaker">Ayar Oluşturucuyu Göster</label>
+          </div>
+          <div class="cell">
+            <input type="checkbox" id="chx-mouse" onchange="toggleConf('id-chx','mouse')">
+            <label for="chx-mouse">Mouse Integrasyonu</label>
+          </div>
+        </form>
+      </div>
+    </div>
+  </section>
+
+  <hr style="width: 30%; box-sizing: border-box;">
+
+  <!-- INTERACTIVE / FUNCTIONAL AREA -->
+  <section id="mid">
+    <div id="timers">
+      <div id="timers-menu">
+        <ul>
+          <li onmouseover="toggleItemDisplay('id', 'stopwatch')" onclick="toggleItemDisplay('id', 'stopwatch')">
+            <button id="stopwatch-button" class="pushable pushable-f">
+              <span class="shadow"></span>
+              <span class="edge"></span>
+              <span class="front">
+                Kronometre
+              </span>
+            </button>
+          </li>
+          <li id="timer-button" onmouseover="toggleItemDisplay('id', 'timer')"
+            onclick="toggleItemDisplay('id', 'timer')">
+            <button class="pushable pushable-l">
+              <span class="shadow"></span>
+              <span class="edge"></span>
+              <span class="front">
+                Zamanlayıcı
+              </span>
+            </button>
+          </li>
+        </ul>
+      </div>
+      <div id="stopwatch">
+        <div class="timer">
+          <div class="min">
+            00
+          </div>
+          .
+          <div class="sec">
+            00
+          </div>
+          <span id="stopwatch-msec-dot">.</span>
+          <div class="msec">
+            00
+          </div>
+        </div>
+        <form>
+          <input type="button" id="start-cro" name="start-cro" value="Başlat" onmouseover="Stopwatch('start')"
+            onclick="Stopwatch('start')" checked>
+          <input type="button" id="stop-cro" name="stop-cro" value="Durdur ve Sıfırla" onmouseover="Stopwatch('stop')"
+            onclick="Stopwatch('stop')" checked>
+        </form>
+      </div>
+
+      <div id="timer">
+        <div class="timer">
+          00.00.00
+        </div>
+        <p>yapım aşamasında: geriye doğru sayma özelliği</p>
+      </div>
+
+    </div>
+
+    <div id="yemek-listesi">
+      <iframe src="https://ifl.meb.k12.tr/meb_iys_dosyalar/35/06/164785/dosyalar/2023_09/26212122_EKIM_YemekListesi.pdf"
+        width="90%" height="800px" style="align-self:center;"></iframe>
+      yapım aşamasında: yemekhane listesi eklenecek
+    </div>
+
+    <div id="ders-programi">
+      <img src="image.png">
+    </div>
+
+    <div id="animations">
+      yapım aşamasında: animasyonlar / oyunlar eklenecek
+    </div>
+  </section>
+
+  <!-- NON-INTERACTIVE DECORATION AREA -->
+  <section id="bottom">
+    <hr>
+    <p id="debug-area"></p>
+    <form>
+      <button id="localtest" type="button" onmouseover="Localtest(0)" onclick="Localtest(0)">TEST</button>
+      <button id="yazdir" type="button" onmouseover="Localtest(1)" onclick="Localtest(1)">Yazdır</button>
+      <button id="popsound" type="button" onmouseover="Popsound()" onclick="Popsound()">POP SOUND</button>
+    </form>
+    <div id="DEV" style="font-size: x-small;"></div>
+    <div id="rainbow"></div>
+  </section>
+
+
+  <script>
+    function Localtest(a) {
+      if (a == 0) {
+        var nowdate = new Date;
+        localStorage.setItem("localtest", nowdate);
+      }
+      if (a == 1) {
+        if (localStorage.getItem("localtest") == null) {
+          document.getElementById("debug-area").innerHTML = "ÇALIŞMIYOR :(";
+        }
+        else {
+          document.getElementById("debug-area").innerHTML = localStorage.getItem("localtest");
+        }
+      }
+    }
+
+    function Popsound() {
+      var audio = new Audio('./assets/pop.mp3');
+      audio.play();
+    }
+  </script>
+
+  <script src="./assets/js/utils.js"></script>
+  <script src="./assets/js/updates.js"></script>
+
+  <script src="./assets/js/mid.js"></script>
+
+  <script src="./assets/js/initialize.js"></script>
+
+  <script src="./assets/js/timers.js"></script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/image.png b/image.png
new file mode 100644
index 0000000..2cddc29
Binary files /dev/null and b/image.png differ
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..1c5ef8a
--- /dev/null
+++ b/index.html
@@ -0,0 +1,223 @@
+<!DOCTYPE html>
+<html xmlns="http://www.w3.org/1999/xhtml" lang="tr">
+
+<head>
+  <!--!Copyright © 2023 Aliberk Sandıkçı -->
+  <!--!Copyright © 2023 iflpanel Developers -->
+  <meta charset="UTF-8" />
+
+  <!-- Meta Content -->
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <meta name="description" content="iflpanel Akıllı Tahta Arkaplan Sayfası" />
+  <meta name="keywords" content="iflpanel,akıllı tahta,arkaplan,tahta,board" />
+  <meta name="author" content="Aliberk Sandıkçı" />
+
+  <!-- CSS Files -->
+  <link rel="stylesheet" type="text/css" href="./assets/css/main.css" />
+  <link rel="stylesheet" type="text/css" href="./assets/css/not_scss.css" />
+
+
+  <title>iflpanel Tahta</title>
+</head>
+
+<body>
+  <!-- MAIN AREA -->
+  <section id="top">
+    <div class="class">
+      <div>
+        <span class="grade">12</span> /
+        <span class="branch">C</span>
+      </div>
+      <div style="display:flex; align-content: center; align-items: center; margin-top: 10px;" class="extraItem">
+        <a href="https://asandikci.com/bagis/" target="_blank"><img src="assets/images/bagis-qr.png" width="50"></a>
+        <p style="align-self: center; font-style: normal; text-align: center; font-size: small;"> &nbsp; &#x1F448;
+          Geliştirme sürecine destek verin<br>&nbsp; &nbsp; &nbsp; (Sıradaki: <span
+            style="width: min-content; font-size: x-small;" id="sirada-yapilacaklar"></span>) </p>
+      </div>
+      <div id="header-note" style="display:none;">
+        Başarılar
+      </div>
+    </div>
+    <div class="clock">
+      <h1 id="time">12.00</h1>
+    </div>
+    <div class="toolbox" id="toolbox">
+      <form>
+        <button id="timers-button" type="button" onmouseover="toggleTimers()" onclick="toggleTimers()">⏱</button>
+      </form>
+    </div>
+    <div class="settings-box">
+      <form>
+        <button id="settings-button" type="button" onmouseover="toggleSettings()" onclick="toggleSettings()">⚙</button>
+      </form>
+      <div id="settings">
+        <form>
+          <div class="cell">
+            <input type="checkbox" id="chx-clockSecond" onchange="toggleClockSeconds()" />
+            <label for="chx-clockSecond">Saniye</label>
+          </div>
+          <div class="cell">
+            <input type="checkbox" id="chx-timerMsec" onchange="toggleTimerMsec()" checked />
+            <label for="chx-timerMsec">Sayaçlarda Milisaniye</label>
+          </div>
+          <div class="cell">
+            <input type="checkbox" id="chx-devVersion" onchange="toggleDevVersion()">
+            <label for="chx-devVersion">Geliştirici Sürümü</label>
+          </div>
+          <div class="cell">
+            <input type="checkbox" id="chx-closeExtra" onchange="toggleExtra()">
+            <label for="chx-closeExtra">Ekstra Bildirimleri Kapatın</label>
+          </div>
+          <div class="cell">
+            <input type="checkbox" id="chx-closeTools" onchange="toggleTools()">
+            <label for="chx-closeTools">Araç Çubuğunu Gizle</label>
+          </div>
+          <div class="cell">
+            <input type="checkbox" id="chx-largenClock" onchange="toggleLargenClock()">
+            <label for="chx-largenClock">Saati Büyült</label>
+          </div>
+          <div class="cell">
+            <input type="checkbox" id="chx-fullscreen" onchange="toggleFullscreen()">
+            <label for="chx-fullscreen">Tam Ekran</label>
+          </div>
+          <div class="cell">
+            <input type="checkbox" id="chx-examMode" onchange="toggleExamMode()">
+            <label for="chx-examMode"><b style="color:red;">Sınav Modu</b></label>
+          </div>
+        </form>
+      </div>
+    </div>
+  </section>
+
+  <hr style="width: 100%; box-sizing: border-box;" id="clock-divider">
+
+  <!-- INTERACTIVE / FUNCTIONAL AREA -->
+  <section id="mid">
+    <div id="timers">
+      <div id="timers-menu">
+        <ul>
+          <li onmouseover="toggleTimers('stopwatch')" onclick="toggleTimers('stopwatch')">
+            <button class="pushable pushable-f pushable-l">
+              <span class="shadow"></span>
+              <span class="edge"></span>
+              <span class="front">
+                Kronometre
+              </span>
+            </button>
+          </li>
+          <!-- <li onmouseover="toggleTimers('timer')" onclick="toggleTimers('timer')">
+            <button class="pushable pushable-l">
+              <span class="shadow"></span>
+              <span class="edge"></span>
+              <span class="front" style="padding: 1px 10px; background-color: red;">
+                Güvenli<br>Kronometre
+              </span>
+            </button>
+          </li> -->
+        </ul>
+      </div>
+      <div id="stopwatch">
+        <div class="timer">
+          <div class="min">
+            00
+          </div>
+          .
+          <div class="sec">
+            00
+          </div>
+          <span id="stopwatch-msec-dot">.</span>
+          <div class="msec">
+            00
+          </div>
+        </div>
+        <form>
+          <input class="timer-action-button" type="button" id="start-cro" name="start-cro" value="▶️ Başlat"
+            onmouseover="Stopwatch('start')" onclick="Stopwatch('start')" checked>
+          <input class="timer-action-button" type="button" id="stop-cro" name="stop-cro" value="⏸️ Durdur ve Sıfırla"
+            onmouseover="Stopwatch('stop')" onclick="Stopwatch('stop')" checked>
+        </form>
+      </div>
+
+      <div id="timer">
+        <div class="timer">
+          00.00.00
+        </div>
+        <p>Şu anda yapım aşamasında<br><b>sınav salonundaki akıllı tahta için 100% doğru kronometre</b></p>
+      </div>
+
+    </div>
+
+    <div id="yemek-listesi">
+      yapım aşamasında: yemekhane listesi eklenecek
+    </div>
+
+    <div id="animations">
+      yapım aşamasında: animasyonlar / oyunlar eklenecek
+    </div>
+  </section>
+
+  <!-- NON-INTERACTIVE DECORATION AREA -->
+  <section id="bottom">
+    <div id="rainbow"></div>
+  </section>
+
+  <script>
+
+    function b64DecodeUnicode(str) {
+      // Going backwards: from bytestream, to percent-encoding, to original string.
+      return decodeURIComponent(atob(str).split('').map(function (c) {
+        return '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2);
+      }).join(''));
+    }
+
+    var curAmount = 0
+    var goalAmount = 0;
+    let localtest = 0;
+
+    //
+    // PUBLIC DATA
+    //
+
+    let url2 = 'https://git.aliberksandikci.com.tr/api/v1/repos/asandikci.com/www/contents/public-data.json';
+    // let url2 = "http://127.0.0.1:PORT/public-data.json";
+    // localtest = 1;
+    fetch(url2)
+      .then(res => res.json())
+      .then(out => {
+        var publicjson;
+        if (localtest) {
+          publicjson = out[0]["public-todo"];
+        } else {
+          var cnt = out.content;
+          console.log("base64: " + cnt);
+          publicjson = JSON.parse(b64DecodeUnicode(cnt))[0]["public-todo"];
+        }
+
+        publicjson.sort(function (a, b) {
+          return Number(Object.keys(a)) > Number(Object.keys(b));
+        });
+        console.log(publicjson);
+
+        var curi = 0;
+        let i = 0;
+        for (i = 0; i < publicjson.length; i++) {
+          const element = Number(Object.keys(publicjson[i]));
+          if (curAmount < element) {
+            goalAmount = element;
+            curi = i;
+            break;
+          }
+        }
+        let aka = publicjson[i][goalAmount][0];
+        document.getElementById("sirada-yapilacaklar").innerHTML = aka.split("- ")[1];
+
+      })
+      .catch(err => {
+        throw err
+      });
+  </script>
+  <script src="./assets/js/old_main.js"></script>
+  <script src="./assets/js/old_stopwatch.js"></script>
+</body>
+
+</html>
\ No newline at end of file