Initial Commit
This commit is contained in:
commit
3afff1b579
GPG key ID:
25C67A03B5666BC1
24 changed files with 2004 additions and 0 deletions
20
.gitea/ISSUE_TEMPLATE/PATH_DRAFT.md
Normal file
20
.gitea/ISSUE_TEMPLATE/PATH_DRAFT.md
Normal file
|
|
@ -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.
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
1
.gitignore
vendored
Normal file
1
.gitignore
vendored
Normal file
|
|
@ -0,0 +1 @@
|
||||||
|
*.bak
|
||||||
9
README.md
Normal file
9
README.md
Normal file
|
|
@ -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
|
||||||
23
assets/css/dev.css
Normal file
23
assets/css/dev.css
Normal file
|
|
@ -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 */
|
||||||
1
assets/css/dev.css.map
Normal file
1
assets/css/dev.css.map
Normal file
|
|
@ -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"}
|
||||||
293
assets/css/main.css
Normal file
293
assets/css/main.css
Normal file
|
|
@ -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 */
|
||||||
1
assets/css/main.css.map
Normal file
1
assets/css/main.css.map
Normal file
|
|
@ -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"}
|
||||||
10
assets/css/not_scss.css
Normal file
10
assets/css/not_scss.css
Normal file
|
|
@ -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;
|
||||||
|
}
|
||||||
BIN
assets/images/bagis-qr.png
Normal file
BIN
assets/images/bagis-qr.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 553 B |
2
assets/js/dev.js
Normal file
2
assets/js/dev.js
Normal file
|
|
@ -0,0 +1,2 @@
|
||||||
|
// 2023 © Aliberk Sandıkçı
|
||||||
|
// Temporary Development File
|
||||||
120
assets/js/initialize.js
Normal file
120
assets/js/initialize.js
Normal file
|
|
@ -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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
299
assets/js/old_main.js
Normal file
299
assets/js/old_main.js
Normal file
|
|
@ -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";
|
||||||
|
}
|
||||||
|
}
|
||||||
108
assets/js/old_stopwatch.js
Normal file
108
assets/js/old_stopwatch.js
Normal file
|
|
@ -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();
|
||||||
|
}
|
||||||
81
assets/js/timers.js
Normal file
81
assets/js/timers.js
Normal file
|
|
@ -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;
|
||||||
|
}
|
||||||
|
}
|
||||||
47
assets/js/updates.js
Normal file
47
assets/js/updates.js
Normal file
|
|
@ -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;
|
||||||
|
}
|
||||||
130
assets/js/utils.js
Normal file
130
assets/js/utils.js
Normal file
|
|
@ -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);
|
||||||
|
}
|
||||||
|
}
|
||||||
BIN
assets/pop.mp3
Normal file
BIN
assets/pop.mp3
Normal file
Binary file not shown.
19
assets/scss/_animation.scss
Normal file
19
assets/scss/_animation.scss
Normal file
|
|
@ -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;
|
||||||
|
}
|
||||||
|
}
|
||||||
122
assets/scss/_button.scss
Normal file
122
assets/scss/_button.scss
Normal file
|
|
@ -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%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
22
assets/scss/dev.scss
Normal file
22
assets/scss/dev.scss
Normal file
|
|
@ -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;
|
||||||
|
}
|
||||||
253
assets/scss/main.scss
Normal file
253
assets/scss/main.scss
Normal file
|
|
@ -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;
|
||||||
|
}
|
||||||
220
dev.html
Normal file
220
dev.html
Normal file
|
|
@ -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>
|
||||||
BIN
image.png
Normal file
BIN
image.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 108 KiB |
223
index.html
Normal file
223
index.html
Normal file
|
|
@ -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;"> 👈
|
||||||
|
Geliştirme sürecine destek verin<br> (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>
|
||||||
Loading…
Reference in a new issue