178 lines
5.6 KiB
HTML
178 lines
5.6 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Slider</title>
|
|
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-ui-slider-pips/1.11.4/jquery-ui-slider-pips.min.css">
|
|
<link rel="stylesheet" href="styles/styles.css">
|
|
</head>
|
|
<body>
|
|
<div class="flexbox">
|
|
<div class="flex-item">
|
|
<div class="h_main">
|
|
<h3>A.D. mood! make my life easier</h3>
|
|
<div class="mood-box">
|
|
<div class="face-wrapper">
|
|
<div id="eyes" class="case3">
|
|
<div class="eyebrow left"></div>
|
|
<div class="eye left">
|
|
<div class="eyelid"></div>
|
|
</div>
|
|
<div class="bottomlid left"></div>
|
|
<div class="eyebrow right"></div>
|
|
<div class="eye right">
|
|
<div class="eyelid"></div>
|
|
</div>
|
|
<div class="bottomlid right"></div>
|
|
</div>
|
|
<div id="mouth" class="case3">
|
|
<div id="mouth-open"></div>
|
|
</div>
|
|
<div id="face-bg" class="case3">
|
|
<div class="face-light"></div>
|
|
<div class="cow">
|
|
🐄 <!-- Můžete nahradit ikonou krávy nebo obrázkem krávy podle potřeby -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id="amount" style="font-size: 18px;"></div>
|
|
</div>
|
|
<div class="flex-item">
|
|
<h4>jak se dneska máš pšouku?</h4>
|
|
<div id="slider"></div>
|
|
<div id="text_ad"></div>
|
|
</div>
|
|
</div></div>
|
|
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
|
|
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-ui-slider-pips/1.11.4/jquery-ui-slider-pips.min.js"></script>
|
|
<script>
|
|
$(function() {
|
|
var slider = $("#slider");
|
|
|
|
// Při načítání stránky provedeme AJAX požadavek na server
|
|
$.ajax({
|
|
type: "GET",
|
|
url: "saveData.php", // Název skriptu na serveru pro načítání dat
|
|
success: function(response) {
|
|
// Získáme hodnotu slideru ze serverových dat
|
|
var savedValue = response.sliderValue;
|
|
|
|
// Nastavíme hodnotu slideru
|
|
slider.slider("value", parseInt(savedValue));
|
|
|
|
// Aktualizujeme text a obličej podle načtené hodnoty
|
|
$("#text_ad").text(getText(savedValue));
|
|
$("#amount").text(savedValue);
|
|
updateFace(savedValue);
|
|
},
|
|
error: function(error) {
|
|
console.error(error);
|
|
}
|
|
});
|
|
|
|
// Nastavení posuvníku
|
|
slider.slider({
|
|
range: "max",
|
|
min: 1,
|
|
max: 6,
|
|
value: 3,
|
|
slide: function(event, ui) {
|
|
// Při změně slideru aktualizujeme text, obličej a ukládáme hodnotu na server
|
|
//$("#text_ad").text(getText(ui.value));
|
|
$("#amount").text(ui.value);
|
|
saveDataToServer(ui.value);
|
|
updateFace(ui.value);
|
|
}
|
|
});
|
|
|
|
// Funkce pro ukládání dat na server
|
|
function saveDataToServer(value) {
|
|
var dataToSave = {
|
|
sliderValue: value,
|
|
};
|
|
|
|
$.ajax({
|
|
type: "POST",
|
|
url: "saveData.php",
|
|
contentType: "application/json",
|
|
data: JSON.stringify(dataToSave),
|
|
success: function(response) {
|
|
console.info(response);
|
|
},
|
|
error: function(error) {
|
|
console.error(error);
|
|
}
|
|
});
|
|
}
|
|
|
|
// Manuální spuštění funkce updateFace při načítání stránky
|
|
updateFace(slider.slider("value"));
|
|
|
|
// Nastavení pips pro slider
|
|
slider.slider('pips', {
|
|
first: 'pip',
|
|
last: 'pip',
|
|
});
|
|
|
|
// Funkce pro aktualizaci obličeje
|
|
function updateFace(value) {
|
|
var face = $(".face-wrapper").children();
|
|
switch (value) {
|
|
case 1:
|
|
removeClass();
|
|
$(face).addClass("case1");
|
|
break;
|
|
case 2:
|
|
removeClass();
|
|
$(face).addClass("case2");
|
|
break;
|
|
case 3:
|
|
removeClass();
|
|
$(face).addClass("case3");
|
|
break;
|
|
case 4:
|
|
removeClass();
|
|
$(face).addClass("case4");
|
|
break;
|
|
case 5:
|
|
removeClass();
|
|
$(face).addClass("case5");
|
|
break;
|
|
case 6:
|
|
removeClass();
|
|
$(face).addClass("case6");
|
|
break;
|
|
}
|
|
}
|
|
|
|
// Funkce pro odstranění tříd
|
|
function removeClass() {
|
|
$(".face-wrapper").children().removeClass("case1 case2 case3 case4 case5 case6");
|
|
}
|
|
|
|
// Funkce pro získání textu podle hodnoty
|
|
function getText(value) {
|
|
switch (parseInt(value)) {
|
|
case 1:
|
|
return "1 test";
|
|
case 2:
|
|
return "2 test";
|
|
case 3:
|
|
return "3 test";
|
|
case 4:
|
|
return "4 test";
|
|
case 5:
|
|
return "5 test";
|
|
case 6:
|
|
return "6 test";
|
|
}
|
|
}
|
|
});
|
|
|
|
</script>
|
|
</body>
|
|
</html> |