2024-01-03 17:39:53 +03:00
<! DOCTYPE html >
< html >
< head >
< meta charset = " UTF-8 " >
< meta name = " viewport " content = " width=device-width, initial-scale=1.0 " >
2024-01-06 13:27:14 +03:00
< meta name = " description " content = " İzmir Fen Lisesi için Yurdle " >
< meta name = " keywords " content = " yurdle,wordle,ifl,izmirfen " >
2024-01-03 17:39:53 +03:00
< meta name = " author " content = " Aliberk Sandı kçı " >
< link rel = " stylesheet " href = " /assets/css/main.css " >
2024-01-07 03:27:44 +03:00
< link rel = " stylesheet " href = " /assets/css/yurdle.css " >
2024-01-03 17:39:53 +03:00
2024-01-06 13:27:14 +03:00
< title > Yurdle | İFL </ title >
2024-01-03 17:39:53 +03:00
</ head >
< body >
< div class = " main-scrollable " >
< header class = " centered " >
2024-01-06 13:27:14 +03:00
< h1 class = " centered " > Yurdle </ h1 >
2024-01-03 17:39:53 +03:00
</ header >
< article class = " sections " >
2024-01-07 03:27:44 +03:00
< div class = " section " style = " height: max-content;
min - height : 100 vh ; " >
2024-01-07 00:37:32 +03:00
< form class = " centered " style = " margin-top: 10vh; " action = " index.php " method = " post " >
2024-01-06 11:47:58 +03:00
< label style = " margin-bottom:1vh; " for = " mainInput " > Yurtlu Öğrencinin İsmini Giriniz </ label >
2024-01-07 15:35:18 +03:00
< div class = " autocomplete " >< input style = " width:80%; " class = " input " type = " text " id = " mainInput " name = " mainInput " placeholder = " İsim Soyisim " />< input style = " width:20%; " class = " input " type = " submit " value = " Dene " /></ div >
2024-01-03 17:39:53 +03:00
</ form >
2024-01-07 15:35:18 +03:00
< div id = " tebriks " style = " display: none; " >
2024-01-07 03:27:44 +03:00
</ div >
2024-01-07 00:37:32 +03:00
< div id = " tahminler " >
2024-01-07 03:27:44 +03:00
2024-01-07 00:37:32 +03:00
</ div >
2024-01-07 03:27:44 +03:00
< div id = " notices " >
</ div >
2024-01-07 15:35:18 +03:00
< div id = " tsparticles " ></ div >
2024-01-07 03:27:44 +03:00
< hr style = " width: 100%; box-sizing: border-box; " >
2024-01-13 01:00:39 +03:00
< div style = " margin-top:5px;text-align:center; " > < b > Dünün Şanslı Kişisi :</ b > < span id = " previous-person " >< i > yükleniyor </ i ></ span ></ div >
< hr style = " width: 100%; box-sizing: border-box; " >
< div id = " sorumli " style = " margin-top:5px;text-align:center; " > Veri Sorumlusu : < b > Ömer Arda Muratoğlu </ b >< br > Her türlü kaldı rı lması nı , eklenmesini ve / veya değiştirilmesi istediğiniz veriler için kendisi ile iletişime geçiniz !</ div >
< hr style = " width: 100%; box-sizing: border-box; " >
2024-01-07 21:37:14 +03:00
< div style = " margin-top:5px;text-align:center; " > Fikir için < b > Cem Deniz Akdeniz </ b > ' e Teşekkürler !</ div >
2024-01-07 03:27:44 +03:00
< hr style = " width: 100%; box-sizing: border-box; " >
2024-01-07 00:37:32 +03:00
< div style = " text-align:center; " > Son veri güncelleme : < span id = " latest-data " ></ span >
</ div >
2024-01-03 17:39:53 +03:00
</ div >
2024-01-10 19:06:33 +03:00
< div style = " text-align: center;align-self:center;background-color: darkblue;border-radius:10px; padding:1px; " >< a style = " color: orange;font-weight:800; " href = " https://asandikci.com/bagis/ " > 👉 Bana Bi ' Kahve Ismarla ☕ </ a ></ div >
2024-01-03 17:39:53 +03:00
</ article >
< footer >
< div class = " copyright " style = " text-align: center; " > 2024 🄯 < a href = " https://asandikci.com/ " > Aliberk Sandı kçı </ a ></ div >
</ footer >
</ div >
</ body >
2024-01-07 15:35:18 +03:00
< script >
function callConfetti () {
const duration = 10 * 1000 ,
animationEnd = Date . now () + duration ,
defaults = {
startVelocity : 30 ,
spread : 360 ,
ticks : 60 ,
zIndex : 0
};
function randomInRange ( min , max ) {
return Math . random () * ( max - min ) + min ;
}
const interval = setInterval ( function () {
const timeLeft = animationEnd - Date . now ();
if ( timeLeft <= 0 ) {
return clearInterval ( interval );
}
const particleCount = 50 * ( timeLeft / duration );
// since particles fall down, start a bit higher than random
confetti (
Object . assign ({}, defaults , {
particleCount ,
origin : {
x : randomInRange ( 0.1 , 0.3 ),
y : Math . random () - 0.2
},
})
);
confetti (
Object . assign ({}, defaults , {
particleCount ,
origin : {
x : randomInRange ( 0.7 , 0.9 ),
y : Math . random () - 0.2
},
})
);
}, 250 );
}
</ script >
2024-01-07 16:46:33 +03:00
< script >
function updateData () {
xmlHttp = new XMLHttpRequest ();
2024-01-08 19:05:46 +03:00
xmlHttp . onreadystatechange = function () {
2024-01-10 19:06:33 +03:00
if ( this . readyState == 4 && this . status == 200 ) {
var response = xmlHttp . responseText
if ( response . includes ( " parseError " )) {
2024-05-16 15:09:40 +03:00
console . error ( " VERİLER YANLIŞ ŞEKİLDE GİRİLMİŞ, LÜTFEN ifl/YurdleBackend PROJESİNDEKİ VERİ DOSYASINI KONTROL EDİNİZ " );
2024-01-10 19:06:33 +03:00
console . warn ( response );
} else if ( response . includes ( " fileError " )) {
console . error ( " VERİ DOSYASI SUNUCUDA BULUNAMADI, SUNUCUYU KONTROL EDİNİZ " );
console . warn ( response );
} else if ( response . includes ( " success " )) {
console . info ( " VERİLER BAŞARIYLA GÜNCELLENDİ " )
} else {
console . warn ( " VERİ GÜNCELLENİRKEN BİR HATA OLUŞTU, SAYFAYI YENİLEMEYİ DENEYİN " );
2024-01-08 19:05:46 +03:00
}
2024-01-10 19:06:33 +03:00
}
2024-01-08 19:05:46 +03:00
};
2024-01-07 16:46:33 +03:00
params = " updateData=yes " ;
xmlHttp . open ( " POST " , " src/server.php " , true );
xmlHttp . setRequestHeader ( 'Content-type' , 'application/x-www-form-urlencoded' );
xmlHttp . send ( params );
flag = true ;
2024-01-08 19:05:46 +03:00
return ;
2024-01-07 16:46:33 +03:00
}
2024-01-13 01:00:39 +03:00
function getPreviousData () {
xmlHttp = new XMLHttpRequest ();
xmlHttp . onreadystatechange = function () {
if ( this . readyState == 4 && this . status == 200 ) {
var response = xmlHttp . responseText ;
document . getElementById ( " previous-person " ) . innerHTML = " <b style='color:red';> " + response + " </b> " ;
console . debug ( " Dünün Şanslı Kişisi: " + response );
}
};
params = " getPreviousPerson=yes " ;
xmlHttp . open ( " POST " , " src/server.php " , true );
xmlHttp . setRequestHeader ( 'Content-type' , 'application/x-www-form-urlencoded' );
xmlHttp . send ( params );
flag = true ;
}
2024-01-07 16:46:33 +03:00
</ script >
2024-01-07 00:37:32 +03:00
< script >
function isSameDay ( a , b ) {
return a . toDateString () == b . toDateString ();
}
2024-01-13 01:00:39 +03:00
getPreviousData ();
2024-01-07 03:27:44 +03:00
if ( localStorage . getItem ( " win " ) == null ) {
localStorage . setItem ( " win " , " none " );
}
2024-01-07 15:35:18 +03:00
flagConf = 1 ;
2024-01-07 03:27:44 +03:00
document . getElementById ( " tebriks " ) . style . display = " none " ;
if ( localStorage . getItem ( " win " ) != null && localStorage . getItem ( " win " ) === " winned " ) {
document . getElementById ( " tebriks " ) . style . display = " block " ;
document . getElementById ( " tebriks " ) . innerHTML = " Tebrikler, günün şanslı kişisini buldun! "
2024-01-07 15:35:18 +03:00
flagConf = 0 ;
2024-01-07 03:27:44 +03:00
}
2024-01-07 00:37:32 +03:00
// LOCAL STORAGE AND GUESS HANDLING
date = new Date ();
if ( localStorage . getItem ( " latest_visit " ) === null ) {
localStorage . setItem ( " latest_visit " , date );
} else {
latest_visit = localStorage . getItem ( " latest_visit " );
if ( isSameDay ( new Date ( latest_visit ), date )) {
2024-01-07 12:47:16 +03:00
console . debug ( " Kullanı cı Son Girişi İle Aynı Günde " );
2024-01-07 00:37:32 +03:00
} else {
2024-01-07 12:47:16 +03:00
console . debug ( " Kullanı cı Farklı Bir Günde Giriş Yaptı , Statlar Sı fı rlanı yor " );
2024-01-07 00:37:32 +03:00
localStorage . removeItem ( " guesses " );
2024-01-07 12:47:16 +03:00
localStorage . removeItem ( " latest_guess " );
localStorage . removeItem ( " win " );
2024-01-07 16:27:11 +03:00
document . getElementById ( " tebriks " ) . style . display = " none " ;
2024-01-07 00:37:32 +03:00
}
localStorage . setItem ( " latest_visit " , date );
}
2024-01-07 12:47:16 +03:00
< ? php include __DIR__ . '/src/server.php' ; ?>
2024-01-07 13:15:08 +03:00
2024-01-07 00:37:32 +03:00
current_guess = " <?php
if ( $_POST [ 'mainInput' ] != null ) {
echo htmlspecialchars ( $_POST [ 'mainInput' ]);
}
?> ";
flagSame = 0 ;
if ( localStorage . getItem ( " latest_guess " ) != null ) {
if ( current_guess == localStorage . getItem ( " latest_guess " )) {
2024-01-07 12:47:16 +03:00
console . warn ( " EN SON TAHMININIZ ILE ŞIMDIKI AYNI !!! (veya sayfayı yenilemiş/geri gelmiş de olabilirsiniz) " )
2024-01-07 00:37:32 +03:00
flagSame = 1 ;
}
localStorage . setItem ( " latest_guess " , current_guess );
} else {
localStorage . setItem ( " latest_guess " , current_guess );
}
const persons = < ? php echo json_encode ( getAllPersonNames (), JSON_UNESCAPED_UNICODE ) ?> ;
if ( persons . includes ( current_guess ) == false ) {
flagSame = 1 ;
}
var gj = JSON . parse ( '{"Guesses":[], "Values":[]}' ); // guess json
if ( localStorage . getItem ( " guesses " ) != null ) {
2024-01-07 12:47:16 +03:00
console . debug ( " Local Storage Succesfully Get! " );
2024-01-07 00:37:32 +03:00
gj = JSON . parse ( localStorage . getItem ( " guesses " ));
}
if ( current_guess != " " && flagSame == 0 ) {
gj [ " Guesses " ] . push ( current_guess );
2024-01-07 12:47:16 +03:00
console . debug ( " Denenen Kişi: " + current_guess );
2024-01-07 03:27:44 +03:00
gj [ " Values " ] . push ( < ? php if ( $_POST [ 'mainInput' ] != null ) {
2024-01-07 00:37:32 +03:00
$inner_cg = htmlspecialchars ( $_POST [ 'mainInput' ]);
2024-01-07 12:47:16 +03:00
echo " ' " . json_encode ( comparePerson ( reversePerson ( $inner_cg )), JSON_UNESCAPED_UNICODE ) . " ' " ;
2024-01-07 00:37:32 +03:00
}
2024-01-07 12:47:16 +03:00
?> );
2024-01-07 00:37:32 +03:00
localStorage . setItem ( " guesses " , JSON . stringify ( gj ));
}
2024-01-07 03:27:44 +03:00
const criterias = < ? php echo json_encode ( getAllCriterias (), JSON_UNESCAPED_UNICODE ) ?> ;
var crit_num = 0 ;
var true_num = 0 ;
var innerFlag = true ;
2024-01-07 00:37:32 +03:00
if ( gj [ " Guesses " ] . length > 0 ) {
point = document . getElementById ( " tahminler " );
const table = document . createElement ( " table " );
const tr = document . createElement ( " tr " );
2024-01-07 03:27:44 +03:00
table . classList . add ( " guess-table " );
tr . classList . add ( " guess-tr " );
table . appendChild ( tr );
2024-01-07 00:37:32 +03:00
point . appendChild ( table );
for ( const key in criterias ) {
2024-01-07 03:27:44 +03:00
const th = document . createElement ( " th " );
const th_text = document . createTextNode ( criterias [ key ]);
th . classList . add ( " guess-th " );
th . appendChild ( th_text );
tr . appendChild ( th );
2024-01-07 00:37:32 +03:00
}
2024-01-15 17:24:01 +03:00
// REVIEW Daha optimize ve karı şı k olmayacak şekilde yazı labilir
2024-01-07 00:37:32 +03:00
for ( let i = gj [ " Guesses " ] . length - 1 ; i >= 0 ; i -- ) {
2024-01-07 03:27:44 +03:00
// revit = gj["Guesses"].length - i - 1;
const tr = document . createElement ( " tr " );
tr . classList . add ( " guess-tr " );
table . appendChild ( tr );
indata = JSON . parse ( gj [ " Values " ][ i ]);
2024-01-07 12:47:16 +03:00
// console.warn(indata);
2024-01-07 03:27:44 +03:00
for ( const key in criterias ) {
if ( innerFlag ) crit_num ++ ;
const td = document . createElement ( " td " );
const td_text = document . createTextNode ( indata [ key ][ 1 ]);
2024-01-07 21:37:14 +03:00
2024-01-15 17:24:01 +03:00
// FIXME isim_soyisim renkli olması n diye kontrol yapı lı yor ama bu durumda isim soyisim haricinde diğer tüm özellikleri aynı olan başka biri daha olursa onu da doğru sayar !!!
2024-01-07 03:27:44 +03:00
if ( key != " isim_soyisim " ) {
2024-01-08 17:45:50 +03:00
if ( i == gj [ " Guesses " ] . length - 1 && flagSame == 0 ) {
2024-01-07 21:37:14 +03:00
td . classList . add ( " latest-guess " );
}
2024-01-07 03:27:44 +03:00
switch ( indata [ key ][ 0 ]) {
case 0 :
td . classList . add ( " type0 " );
break ;
case 1 :
td . classList . add ( " type1 " );
break ;
case 2 :
td . classList . add ( " type2 " );
if ( innerFlag ) true_num ++ ;
break ;
case 10 :
td . classList . add ( " type10 " );
break ;
case 12 :
td . classList . add ( " type12 " );
break ;
}
}
td . classList . add ( " guess-td " );
td . appendChild ( td_text );
tr . appendChild ( td );
}
innerFlag = false ;
}
}
2024-01-07 00:37:32 +03:00
2024-01-07 21:37:14 +03:00
var lat = document . getElementsByClassName ( " latest-guess " );
var le = lat . length ;
function delay ( time ) {
return new Promise ( resolve => setTimeout ( resolve , time ));
}
async function delayeffect () {
for ( let i = 0 ; i < lat . length ; i ++ ) {
const element = lat [ i ];
await delay ( 750 );
2024-01-08 17:45:50 +03:00
element . classList . toggle ( 'fade' );
2024-01-07 21:37:14 +03:00
}
}
delayeffect ();
async function yepwin () {
await delay ( 5000 );
2024-01-07 03:27:44 +03:00
document . getElementById ( " tebriks " ) . style . display = " block " ;
document . getElementById ( " tebriks " ) . innerHTML = " Tebrikler, günün şanslı kişisini buldun! "
localStorage . setItem ( " win " , " winned " );
2024-01-07 15:35:18 +03:00
if ( flagConf ) {
callConfetti ();
}
2024-01-07 03:27:44 +03:00
}
2024-01-07 21:37:14 +03:00
// console.log(gj);
if ( crit_num == ( true_num + 1 )) // +1 isim_soyisim sayı lmadı ğı için
{
yepwin ();
}
2024-01-07 00:37:32 +03:00
2024-01-07 03:27:44 +03:00
// NOTICES
notices = JSON . parse ( '<?php echo json_encode(getAllNotices(), JSON_UNESCAPED_UNICODE); ?>' );
tmpflag = true ;
notic = document . getElementById ( " notices " );
if ( notices . length > 1 ) {
notic . style . marginTop = " auto " ;
document . getElementById ( " sorumli " ) . style . marginTop = " 1px " ;
2024-01-07 00:37:32 +03:00
}
2024-01-07 03:27:44 +03:00
notices . forEach ( element => {
if ( tmpflag == true ) {
tmpflag = false ;
} else {
innot = document . createElement ( " p " );
innot . classList . add ( " innot " );
2024-01-07 16:21:35 +03:00
innot_text = element ;
innot . innerHTML = innot_text ;
2024-01-07 03:27:44 +03:00
notic . appendChild ( innot );
}
});
2024-01-07 00:37:32 +03:00
</ script >
< script >
// UPDATES
const updates = < ? php echo json_encode ( sendDataDate ()) ?> ;
document . getElementById ( " latest-data " ) . innerHTML = updates [ 0 ];
2024-01-07 12:47:16 +03:00
console . info ( " Günün Kişisi, Son Güncelleme Zamanı : " + updates [ 1 ]);
2024-01-07 00:37:32 +03:00
/// AUTOCOMPLETE ///
// TODO maybe fuzzy search: https://www.lucaspaganini.com/academy/autocomplete-with-fuzzy-search-and-fuse-js
// https://www.fusejs.io/
function autocomplete ( inp , arr ) {
/* the autocomplete function takes two arguments ,
the text field element and an array of possible autocompleted values :*/
var currentFocus ;
/*execute a function when someone writes in the text field:*/
inp . addEventListener ( " input " , function ( e ) {
var a , b , i , val = this . value ;
/*close any already open lists of autocompleted values*/
closeAllLists ();
if ( ! val ) {
return false ;
}
currentFocus = - 1 ;
/*create a DIV element that will contain the items (values):*/
a = document . createElement ( " DIV " );
a . setAttribute ( " id " , this . id + " autocomplete-list " );
a . setAttribute ( " class " , " autocomplete-items " );
/*append the DIV element as a child of the autocomplete container:*/
this . parentNode . appendChild ( a );
/*for each item in the array...*/
for ( i = 0 ; i < arr . length ; i ++ ) {
/*check if the item starts with the same letters as the text field value:*/
if ( arr [ i ] . substr ( 0 , val . length ) . toUpperCase () == val . toUpperCase ()) {
/*create a DIV element for each matching element:*/
b = document . createElement ( " DIV " );
/*make the matching letters bold:*/
b . innerHTML = " <strong> " + arr [ i ] . substr ( 0 , val . length ) + " </strong> " ;
b . innerHTML += arr [ i ] . substr ( val . length );
/*insert a input field that will hold the current array item's value:*/
b . innerHTML += " <input type='hidden' value=' " + arr [ i ] + " '> " ;
/*execute a function when someone clicks on the item value (DIV element):*/
b . addEventListener ( " click " , function ( e ) {
/*insert the value for the autocomplete text field:*/
inp . value = this . getElementsByTagName ( " input " )[ 0 ] . value ;
/* close the list of autocompleted values ,
( or any other open lists of autocompleted values :*/
closeAllLists ();
});
a . appendChild ( b );
}
}
});
/*execute a function presses a key on the keyboard:*/
inp . addEventListener ( " keydown " , function ( e ) {
var x = document . getElementById ( this . id + " autocomplete-list " );
if ( x ) x = x . getElementsByTagName ( " div " );
if ( e . keyCode == 40 ) {
/* If the arrow DOWN key is pressed ,
increase the currentFocus variable :*/
currentFocus ++ ;
/*and and make the current item more visible:*/
addActive ( x );
} else if ( e . keyCode == 38 ) { //up
/* If the arrow UP key is pressed ,
decrease the currentFocus variable :*/
currentFocus -- ;
/*and and make the current item more visible:*/
addActive ( x );
} else if ( e . keyCode == 13 ) {
/*If the ENTER key is pressed, prevent the form from being submitted,*/
e . preventDefault ();
if ( currentFocus > - 1 ) {
/*and simulate a click on the "active" item:*/
if ( x ) x [ currentFocus ] . click ();
}
}
});
function addActive ( x ) {
/*a function to classify an item as "active":*/
if ( ! x ) return false ;
/*start by removing the "active" class on all items:*/
removeActive ( x );
if ( currentFocus >= x . length ) currentFocus = 0 ;
if ( currentFocus < 0 ) currentFocus = ( x . length - 1 );
/*add class "autocomplete-active":*/
x [ currentFocus ] . classList . add ( " autocomplete-active " );
}
function removeActive ( x ) {
/*a function to remove the "active" class from all autocomplete items:*/
for ( var i = 0 ; i < x . length ; i ++ ) {
x [ i ] . classList . remove ( " autocomplete-active " );
}
}
function closeAllLists ( elmnt ) {
/* close all autocomplete lists in the document ,
except the one passed as an argument :*/
var x = document . getElementsByClassName ( " autocomplete-items " );
for ( var i = 0 ; i < x . length ; i ++ ) {
if ( elmnt != x [ i ] && elmnt != inp ) {
x [ i ] . parentNode . removeChild ( x [ i ]);
}
}
}
/*execute a function when someone clicks in the document:*/
document . addEventListener ( " click " , function ( e ) {
closeAllLists ( e . target );
});
}
2024-01-07 03:27:44 +03:00
const persons2 = < ? php echo json_encode ( getAllPersonNames (), JSON_UNESCAPED_UNICODE ) ?> ;
2024-01-10 19:06:33 +03:00
persons2 . sort ();
2024-01-07 03:27:44 +03:00
autocomplete ( document . getElementById ( " mainInput " ), persons2 );
2024-01-07 00:37:32 +03:00
</ script >
2024-01-10 19:06:33 +03:00
< script >
var t = setInterval ( tick , 1000 );
2024-01-13 01:00:39 +03:00
function tick () {
2024-01-10 19:06:33 +03:00
var curTime = new Date ();
2024-01-13 01:00:39 +03:00
if ( curTime . getHours () == 0 && curTime . getMinutes () == 0 && curTime . getSeconds () > 1 && curTime . getSeconds () < 3 ) {
2024-01-10 19:06:33 +03:00
console . debug ( " Kullanı cı nı n Ekranı Açı kken Farklı Bir Güne Geçiş Yapı ldı , Statlar Sı fı rlanı yor ve Kullanı cı Bilgilendiriliyor " );
localStorage . removeItem ( " guesses " );
localStorage . removeItem ( " latest_guess " );
localStorage . removeItem ( " win " );
document . getElementById ( " tebriks " ) . style . display = " none " ;
document . getElementById ( " tahminler " ) . innerHTML = " <h2 style='text-align:center;'>Gece Yarı sı nı Geçtiniz, Lütfen Sayfayı Yenile<span style='color:red;'>ME</span>den direkt yeni tahminizde bulununuz👆</h2><p style='text-align:center;'>Kullanı cı nı n cihazı nı n saati baz alı nmı ştı r, sunucunun yenilenmesi için birkaç saniye daha beklemeniz gerekebilir</p> "
}
}
</ script >
2024-01-07 15:35:18 +03:00
< script src = " https://cdn.jsdelivr.net/npm/@tsparticles/confetti@3.0.3/tsparticles.confetti.bundle.min.js " ></ script >
2024-01-03 17:39:53 +03:00
2024-01-10 19:06:33 +03:00
</ html >