feat: add smartboard live wallpaper to website
This commit is contained in:
parent
a166ec1ae0
commit
3d5d8c2472
GPG Key ID:
25C67A03B5666BC1
|
|
@ -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 */
|
||||
|
|
@ -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"}
|
||||
|
|
@ -0,0 +1,278 @@
|
|||
@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 {
|
||||
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 .settings-box {
|
||||
min-width: 20vw;
|
||||
margin-left: auto;
|
||||
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: relative;
|
||||
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: 100px;
|
||||
display: flex;
|
||||
align-self: center;
|
||||
}
|
||||
section#mid #timers #stopwatch .timer .min,
|
||||
section#mid #timers #stopwatch .timer .sec,
|
||||
section#mid #timers #stopwatch .timer .msec {
|
||||
width: 10vw;
|
||||
}
|
||||
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 */
|
||||
|
|
@ -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;;AAGF;EACE;;AAEA;EACE;EAGA;EACA;EACA;EACA;EACA;EACA;EACA;;AAIJ;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;;AAGA;EACE;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;;AEnKV;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;;AFwDM;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"}
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
// 2023 © Aliberk Sandıkçı
|
||||
// Temporary Development 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;
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,139 @@
|
|||
// 2023 Aliberk Sandıkçı
|
||||
|
||||
// VARIABLES
|
||||
var FlagSecond = 0;
|
||||
var FlagSettings = 0;
|
||||
var FlagTimers = 1;
|
||||
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)) {
|
||||
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");
|
||||
}
|
||||
|
||||
|
||||
// -----------------------------------------
|
||||
// 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";
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/** type: id, class
|
||||
*
|
||||
* name: id or class name
|
||||
*/
|
||||
function toggleItem(type, name) {
|
||||
switch (type) {
|
||||
case "id":
|
||||
let item = document.getElementById(name);
|
||||
if (item.style.display == "flex") {
|
||||
item.style.display = "none";
|
||||
} else {
|
||||
item.style.display = "flex";
|
||||
}
|
||||
break;
|
||||
|
||||
default:
|
||||
console.error("no toggle item except ids!");
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,91 @@
|
|||
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.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();
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
@ -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%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -0,0 +1,236 @@
|
|||
/* 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 {
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
.settings-box {
|
||||
min-width: 20vw;
|
||||
margin-left: auto;
|
||||
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: relative;
|
||||
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: 100px;
|
||||
display: flex;
|
||||
align-self: center;
|
||||
|
||||
.min,
|
||||
.sec,
|
||||
.msec {
|
||||
width: 10vw;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#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;
|
||||
}
|
||||
|
|
@ -0,0 +1,192 @@
|
|||
<!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>
|
||||
<div id="DEV" style="font-size: x-small;"></div>
|
||||
<div id="rainbow"></div>
|
||||
</section>
|
||||
|
||||
<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>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 108 KiB |
|
|
@ -0,0 +1,122 @@
|
|||
<!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" />
|
||||
|
||||
<title>iflpanel Tahta</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<!-- MAIN AREA -->
|
||||
<section id="top">
|
||||
<div class="class">
|
||||
<span class="grade">12</span>
|
||||
<span class="branch">C</span>
|
||||
</div>
|
||||
|
||||
<div class="clock">
|
||||
<h1 id="time">12.00</h1>
|
||||
</div>
|
||||
<div class="settings-box">
|
||||
<form>
|
||||
<button id="timers-button" type="button" onmouseover="toggleTimers()" onclick="toggleTimers()">⏱</button>
|
||||
<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>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr style="width: 100%; box-sizing: border-box;">
|
||||
|
||||
<!-- 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>
|
||||
</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">
|
||||
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 src="./assets/js/old_main.js"></script>
|
||||
<script src="./assets/js/old_stopwatch.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Loading…
Reference in New Issue