155 lines
4.9 KiB
HTML
155 lines
4.9 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");
|
|
|
|
slider.slider({
|
|
range: "max",
|
|
min: 1,
|
|
max: 6,
|
|
value: 3,
|
|
slide: function(event, ui) {
|
|
$("#text_ad").text(getText(ui.value));
|
|
$("#amount").text(ui.value);
|
|
localStorage.setItem("sliderValue", ui.value.toString());
|
|
updateFace(ui.value);
|
|
}
|
|
});
|
|
|
|
var savedValue = localStorage.getItem("sliderValue");
|
|
if (savedValue) {
|
|
slider.slider("value", parseInt(savedValue));
|
|
$("#text_ad").text(getText(savedValue));
|
|
$("#amount").text(savedValue);
|
|
}
|
|
|
|
// Manuální spuštění funkce updateFace při načítání stránky
|
|
updateFace(slider.slider("value"));
|
|
|
|
slider.slider('pips', {
|
|
first: 'pip',
|
|
last: 'pip',
|
|
});
|
|
|
|
function updateFace(value) {
|
|
saveSliderValue(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;
|
|
}
|
|
}
|
|
|
|
function saveSliderValue(value) {
|
|
// Odeslat aktuální hodnotu posuvníku na server
|
|
$.ajax({
|
|
type: "POST",
|
|
url: "saveData.php",
|
|
data: JSON.stringify({ sliderValue: value }),
|
|
contentType: "application/json; charset=utf-8",
|
|
success: function(response) {
|
|
console.log("Slider value saved successfully!");
|
|
},
|
|
error: function(error) {
|
|
console.error("Error saving slider value:", error);
|
|
}
|
|
});
|
|
}
|
|
|
|
function removeClass() {
|
|
$(".face-wrapper").children().removeClass("case1 case2 case3 case4 case5 case6");
|
|
}
|
|
|
|
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> |