feat: add smartboard live wallpaper to website

This commit is contained in:
Aliberk Sandıkçı 2023-11-22 17:10:45 +03:00
parent a166ec1ae0
commit 3d5d8c2472
Signed by: asandikci
GPG key ID: 25C67A03B5666BC1
18 changed files with 1626 additions and 0 deletions

View file

@ -0,0 +1,23 @@
@charset "UTF-8";
/* 2023 Aliberk Sandıı*/
#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 */

View 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"}

View file

@ -0,0 +1,278 @@
@charset "UTF-8";
/* 2023 Aliberk Sandıı*/
/* 2023 Aliberk Sandıı*/
@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 */

View 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;;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"}

View file

@ -0,0 +1,2 @@
// 2023 © Aliberk Sandıı
// Temporary Development File

View file

@ -0,0 +1,120 @@
// 2023 © Aliberk Sandıı
// 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;
}
}
});
}

View file

@ -0,0 +1,139 @@
// 2023 Aliberk Sandıı
// 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;
}
}

View file

@ -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();
}

View 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;
}
}

View 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;
}

View 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);
}
}

View file

@ -0,0 +1,19 @@
/* 2023 Aliberk Sandıı*/
@keyframes rain {
0% {
background-color: white;
}
25% {
background-color: red;
}
50% {
background-color: green;
}
100% {
background-color: yellow;
}
}

View 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%);
}
}
}

View file

@ -0,0 +1,22 @@
/* 2023 Aliberk Sandıı*/
#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;
}

View file

@ -0,0 +1,236 @@
/* 2023 Aliberk Sandıı*/
@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;
}

192
iflpanel/tahta/dev.html Normal file
View file

@ -0,0 +1,192 @@
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="tr">
<head>
<!--!Copyright © 2023 Aliberk Sandıı -->
<!--!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ıı">
<!-- 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>

BIN
iflpanel/tahta/image.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 108 KiB

122
iflpanel/tahta/index.html Normal file
View file

@ -0,0 +1,122 @@
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="tr">
<head>
<!--!Copyright © 2023 Aliberk Sandıı -->
<!--!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ıı" />
<!-- 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>