Carousel \u0395\u03b9\u03ba\u03cc\u03bd\u03c9\u03bd<\/title>\r\n<title>\u039a\u03b9\u03bd\u03bf\u03cd\u03bc\u03b5\u03bd\u03b7 \u03a0\u03b1\u03c1\u03ac\u03b3\u03c1\u03b1\u03c6\u03bf\u03c2<\/title>\r\n<style>\r\n.datetime-box{\r\n position:fixed;\r\n top:60px;\r\n right:10px;\r\n \r\n background:red;\r\n color:white;\r\n\r\n padding:15px 25px;\r\n border-radius:14px;\r\n\r\n font-family:Arial, sans-serif;\r\n text-align:center;\r\n\r\n box-shadow:0 5px 20px rgba(0,0,0,0.3);\r\n backdrop-filter:blur(8px);\r\n}\r\n\r\n#date{\r\n font-size:16px;\r\n color:#cbd5e1;\r\n margin-bottom:5px;\r\n}\r\n\r\n#time{\r\n font-size:32px;\r\n font-weight:bold;\r\n color:#60a5fa;\r\n}\r\n*{\r\n margin:0;\r\n padding:0;\r\n box-sizing:border-box;\r\n}\r\n\r\nbody{\r\n background:#111827;\r\n display:flex;\r\n margin-top:220px;\r\n justify-content:center;\r\n align-items:center;\r\n height: 100vh;\r\n font-family:Arial, sans-serif;\r\noverflow: hidden;\r\n background: linear-gradient(\r\n to bottom,\r\n #87ceeb 0%,\r\n #bdefff 50%,\r\n #f5fdff 100%\r\n ); \r\n \r\n \r\n}\r\n\r\n.daisy {\r\n position: absolute;\r\n font-size: 40px;\r\n pointer-events: none;\r\n user-select: none; animation:\r\n fall linear forwards,\r\n sway ease-in-out infinite;\r\n }\r\n\r\n @keyframes fall {\r\n from {\r\n transform: translateY(-800px) rotate(180deg);\r\n }\r\n to {\r\n transform: translateY(calc(100vh + 150px)) rotate(360deg);\r\n }\r\n }\r\n\r\n @keyframes sway {\r\n 0%,100% {\r\n margin-left: -10px;\r\n }\r\n 50% {\r\n margin-left: 70px;\r\n }\r\n }\r\n\r\n\r\n\r\n\r\n.carousel{\r\n position:relative;\r\n width:700px;\r\n height:600px;\r\n overflow:hidden;\r\n border-radius:8px;\r\n box-shadow:0 10px 30px rgba(0,0,0,0.4);\r\n top:10px;\r\n margin-left:70px;\r\n}\r\n\r\n.slides{\r\n \r\n display:flex;\r\n width:100%;\r\n height:100%;\r\n transition:transform 0.6s ease;\r\n}\r\n\r\n.slide{\r\n \r\n width:100%;\r\n flex-shrink:0;\r\n}\r\n\r\n.slide img{\r\n \r\n \r\n position:relative;\r\n width:100%;\r\n height:100%;\r\n object-fit:cover;\r\n}\r\n\r\nbutton{\r\n position:absolute;\r\n top:50%;\r\n transform:translateY(-50%);\r\n background:rgba(0,0,0,0.5);\r\n color:white;\r\n border:none;\r\n padding:14px 18px;\r\n cursor:pointer;\r\n font-size:24px;\r\n border-radius:50%;\r\n transition:0.3s;\r\n}\r\n\r\nbutton:hover{\r\n background:rgba(0,0,0,0.8);\r\n}\r\n\r\n.prev{\r\n left:15px;\r\n}\r\n\r\n.next{\r\n right:15px;\r\n}\r\n\r\n.dots{\r\n position:absolute;\r\n bottom:20px;\r\n width:100%;\r\n display:flex;\r\n justify-content:center;\r\n gap:10px;\r\n}\r\n\r\n.dot{\r\n width:14px;\r\n height:14px;\r\n border-radius:50%;\r\n background:white;\r\n opacity:0.5;\r\n cursor:pointer;\r\n}\r\n\r\n.dot.active{\r\n opacity:1;\r\n background:#60a5fa;\r\n}\r\n\r\n\r\n\r\n.animated-text{\r\n color: orange;\r\n font-size:18px;\r\n width:50%;\r\n text-align:center;\r\n animation: floatText 3s ease-in-out infinite alternate, glow 2s infinite;\r\n display:flex;\r\n justify-content:center;\r\n align-items:center;\r\n height:15vh;\r\n margin-left:190px;\r\n background:lightblue;\r\n \r\n margin-top:180px;\r\n overflow:hidden;\r\n font-family:Arial, sans-serif;\r\n}\r\n\r\n\/* \u039a\u03af\u03bd\u03b7\u03c3\u03b7 \u03c0\u03ac\u03bd\u03c9-\u03ba\u03ac\u03c4\u03c9 *\/\r\n@keyframes floatText{\r\n from{\r\n transform: translateY(0px );\r\n color:purple;\r\n }\r\n to{\r\n transform: translateY(-20px);\r\n color: blue;\r\n }\r\n}\r\n\r\n\/* \u03a6\u03c9\u03c4\u03b5\u03b9\u03bd\u03cc \u03b5\u03c6\u03ad *\/\r\n@keyframes glow{\r\n 0%{\r\n box-shadow: 0 15 5px 10s purple;\r\n }\r\n 50%{\r\n box-shadow: 0 0 20px purple,\r\n 0 0 40px purple;\r\n }\/*#00f0ff*\/\r\n \r\n 100%{\r\n box-shadow: 0 0 5px red ;\r\n }\r\n}\r\n.scene{\r\n width:200px;\r\n height:200px;\r\n margin-left:380px;\r\n margin-top:120px;\r\n \r\n }\r\n\r\n .dice{\r\n width:100%;\r\n height:100%;\r\n position:relative;\r\n transform-style:preserve-3d;\r\n animation:spin 6s infinite linear,glowe 2s infinite;\r\n \r\n }\r\n\r\n .face{\r\n position:absolute;\r\n width:200px;\r\n height:200px;\r\n background:#ADD8E;\r\n border:4px solid #222;\r\n border-radius:20px;\r\n display:grid;\r\n padding:20px;\r\n box-shadow:0 0 20px rgba(0,0,0,0.4);\r\n }\r\n\r\n .dot{\r\n width:28px;\r\n height:28px;\r\n background:blue;\r\n border-radius:50%;\r\n align-self:center;\r\n justify-self: center;\r\n }\r\n\r\n \/* 1 *\/\r\n .front{\r\n transform:translateZ(100px);\r\n grid-template-columns:(2,1fr);\r\n background:red;\r\n \r\n }\r\n\r\n \/* 2 *\/\r\n .back{\r\n transform:rotateY(180deg) translateZ(100px);\r\n grid-template-columns:repeat(2,1fr);\r\n background:orange;\r\n \r\n }\r\n\r\n \/* 3 *\/\r\n .right{\r\n transform:rotateY(90deg) translateZ(100px);\r\n grid-template-columns:repeat(2,1fr);\r\n background:purple;\r\n }\r\n\r\n \/* 4 *\/\r\n .left{\r\n transform:rotateY(-90deg) translateZ(100px);\r\n grid-template-columns:repeat(2,1fr);\r\n background:yellow;\r\n }\r\n\r\n \/* 5 *\/\r\n .top{\r\n transform:rotateX(90deg) translateZ(100px);\r\n grid-template-columns:repeat(3,1fr);\r\n }\r\n\r\n \/* 6 *\/\r\n .bottom{\r\n transform:rotateX(-90deg) translateZ(100px);\r\n grid-template-columns:repeat(2,1fr);\r\n }\r\n\/* \u03a6\u03c9\u03c4\u03b5\u03b9\u03bd\u03cc \u03b5\u03c6\u03ad \u03b6\u03b1\u03c1\u03b9\u03bf\u03cd *\/\r\n@keyframes glowe{\r\n 0%{\r\n \r\n box-shadow: 0 15 2px grey;\r\n }\r\n 50%{\r\n \r\n box-shadow: 0 0 15px green,\r\n 0 0 35px green;\r\n }\/*#00f0ff*\/\r\n \r\n 100%{\r\n box-shadow: 0 0 5px green ;\r\n }\r\n}\r\n @keyframes spin{\r\n 0%{\r\n transform:rotateX(0deg) rotateY(0deg);\r\n }\r\n 100%{\r\n transform:rotateX(360deg) rotateY(360deg);\r\n }\r\n }\r\n\r\n #paragraph {\r\n font-size: 20px;\r\n line-height: 2.5;\r\n margin-top:90px;\r\n width: 900px;\r\n color:white;\r\n background:purple;\r\n }\r\n\r\n .cursor {\r\n border-right: 2px solid black;\r\n animation: blink 0.7s infinite;\r\n }\r\n\r\n @keyframes blink {\r\n 50% {\r\n border-color: transparent;\r\n }\r\n }\r\n<\/style>\r\n<\/head>\r\n\r\n<body>\r\n\r\n<div class=\"carousel\">\r\n\r\n <div class=\"slides\" id=\"slides\">\r\n\r\n <div class=\"slide\">\r\n <img decoding=\"async\" src=\"https:\/\/picsum.photos\/id\/1015\/1200\/700\" alt=\"\">\r\n <\/div>\r\n\r\n <div class=\"slide\">\r\n <img decoding=\"async\" src=\"https:\/\/encrypted-tbn0.gstatic.com\/images?q=tbn:ANd9GcSy2hyx9uxM-ze8HxToKKHWMpTL2m3N5m0OBriZfXpDSKCJ74E-VWbaAkgHMfv-gRyjE9ZVOn1rHfnRf0T7aMVF_plKz5O3xWl7cfflMKI&s=10\" alt=\"\">\r\n <\/div>\r\n\r\n <div class=\"slide\">\r\n <img decoding=\"async\" src=\"https:\/\/picsum.photos\/id\/1018\/1200\/700\" alt=\"\">\r\n <\/div>\r\n\r\n <div class=\"slide\">\r\n <img decoding=\"async\" src=\"https:\/\/encrypted-tbn0.gstatic.com\/images?q=tbn:ANd9GcSacfZzoW2c-cn3396CFRu-FJ14WZoAOS-oyVG7mQHtpJUZ-BKTbTdPP-Gu6NQFA0Ae6RjMoXSqmhJtBDyoRMvoYG7pFlIAO86q0a6SBIsLmA&s=10\" alt=\"\">\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n <button class=\"prev\" onclick=\"prevSlide()\">\u276e<\/button>\r\n <button class=\"next\" onclick=\"nextSlide()\">\u276f<\/button>\r\n\r\n <div class=\"dots\" id=\"dots\"><\/div>\r\n\r\n<\/div>\r\n<div class=\"datetime-box\">\r\n <div id=\"date\"><\/div>\r\n <div id=\"time\"><\/div>\r\n<\/div>\r\n<p class=\"animated-text\">\r\n hi\r\n<\/p>\r\n\r\n<p>\r\n<div class=\"scene\">\r\n <div class=\"dice\">\r\n\r\n \r\n <div class=\"face front\">\r\n <div class=\"dot\"><\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"face back\">\r\n <div class=\"dot\"><\/div>\r\n <div class=\"dot\"><\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"face right\">\r\n <div class=\"dot\"><\/div>\r\n <div><\/div>\r\n <div class=\"dot\"><\/div>\r\n <div><\/div>\r\n <div class=\"dot\"><\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"face left\">\r\n <div class=\"dot\"><\/div>\r\n <div class=\"dot\"><\/div>\r\n <div class=\"dot\"><\/div>\r\n <div class=\"dot\"><\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"face top\">\r\n <div class=\"dot\"><\/div>\r\n <div><\/div>\r\n <div class=\"dot\"><\/div>\r\n\r\n <div><\/div>\r\n <div class=\"dot\"><\/div>\r\n <div><\/div>\r\n\r\n <div class=\"dot\"><\/div>\r\n <div><\/div>\r\n <div class=\"dot\"><\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"face bottom\">\r\n <div class=\"dot\"><\/div>\r\n <div class=\"dot\"><\/div>\r\n\r\n <div class=\"dot\"><\/div>\r\n <div class=\"dot\"><\/div>\r\n\r\n <div class=\"dot\"><\/div>\r\n <div class=\"dot\"><\/div>\r\n <\/div>\r\n\r\n <\/div>\r\n<\/div> \r\n <\/p>\r\n \r\n<p id=\"paragraph\" class=\"cursor\"> <\/p>\r\n\r\n\r\n \r\n<script>\r\nconst slides = document.getElementById(\"slides\");\r\nconst totalSlides = document.querySelectorAll(\".slide\").length;\r\nconst dotsContainer = document.getElementById(\"dots\");\r\n\r\nlet index = 0;\r\n\r\n\/\/ \u03b4\u03b7\u03bc\u03b9\u03bf\u03c5\u03c1\u03b3\u03af\u03b1 dots\r\nfor(let i=0;i<totalSlides;i++){\r\n const dot = document.createElement(\"div\");\r\n dot.classList.add(\"dot\");\r\n\r\n if(i===0) dot.classList.add(\"active\");\r\n\r\n dot.addEventListener(\"click\", ()=>{\r\n index = i;\r\n updateCarousel();\r\n });\r\n\r\n dotsContainer.appendChild(dot);\r\n}\r\n\r\nfunction updateCarousel(){\r\n slides.style.transform = `translateX(-${index * 100}%)`;\r\n\r\n document.querySelectorAll(\".dot\").forEach(dot=>{\r\n dot.classList.remove(\"active\");\r\n });\r\n\r\n document.querySelectorAll(\".dot\")[index].classList.add(\"active\");\r\n}\r\n\r\nfunction nextSlide(){\r\n index++;\r\n\r\n if(index >= totalSlides){\r\n index = 0;\r\n }\r\n\r\n updateCarousel();\r\n}\r\n\r\nfunction prevSlide(){\r\n index--;\r\n\r\n if(index < 0){\r\n index = totalSlides - 1;\r\n }\r\n\r\n updateCarousel();\r\n}\r\n\r\n\/\/ auto slide\r\nsetInterval(()=>{\r\n nextSlide();\r\n},4000);\r\nfunction updateDateTime(){\r\n\r\n const now = new Date();\r\n\r\n const days = [\r\n \"\u039a\u03c5\u03c1\u03b9\u03b1\u03ba\u03ae\",\r\n \"\u0394\u03b5\u03c5\u03c4\u03ad\u03c1\u03b1\",\r\n \"\u03a4\u03c1\u03af\u03c4\u03b7\",\r\n \"\u03a4\u03b5\u03c4\u03ac\u03c1\u03c4\u03b7\",\r\n \"\u03a0\u03ad\u03bc\u03c0\u03c4\u03b7\",\r\n \"\u03a0\u03b1\u03c1\u03b1\u03c3\u03ba\u03b5\u03c5\u03ae\",\r\n \"\u03a3\u03ac\u03b2\u03b2\u03b1\u03c4\u03bf\"\r\n ];\r\n\r\n const months = [\r\n \"\u0399\u03b1\u03bd\u03bf\u03c5\u03b1\u03c1\u03af\u03bf\u03c5\",\r\n \"\u03a6\u03b5\u03b2\u03c1\u03bf\u03c5\u03b1\u03c1\u03af\u03bf\u03c5\",\r\n \"\u039c\u03b1\u03c1\u03c4\u03af\u03bf\u03c5\",\r\n \"\u0391\u03c0\u03c1\u03b9\u03bb\u03af\u03bf\u03c5\",\r\n \"\u039c\u03b1\u0390\u03bf\u03c5\",\r\n \"\u0399\u03bf\u03c5\u03bd\u03af\u03bf\u03c5\",\r\n \"\u0399\u03bf\u03c5\u03bb\u03af\u03bf\u03c5\",\r\n \"\u0391\u03c5\u03b3\u03bf\u03cd\u03c3\u03c4\u03bf\u03c5\",\r\n \"\u03a3\u03b5\u03c0\u03c4\u03b5\u03bc\u03b2\u03c1\u03af\u03bf\u03c5\",\r\n \"\u039f\u03ba\u03c4\u03c9\u03b2\u03c1\u03af\u03bf\u03c5\",\r\n \"\u039d\u03bf\u03b5\u03bc\u03b2\u03c1\u03af\u03bf\u03c5\",\r\n \"\u0394\u03b5\u03ba\u03b5\u03bc\u03b2\u03c1\u03af\u03bf\u03c5\"\r\n ];\r\n\r\n const day = days[now.getDay()];\r\n const date = now.getDate();\r\n const month = months[now.getMonth()];\r\n const year = now.getFullYear();\r\n\r\n let hours = now.getHours().toString().padStart(2,\"0\");\r\n let minutes = now.getMinutes().toString().padStart(2,\"0\");\r\n let seconds = now.getSeconds().toString().padStart(2,\"0\");\r\n\r\n document.getElementById(\"date\").innerHTML =\r\n `${day}, ${date} ${month} ${year}`;\r\n\r\n document.getElementById(\"time\").innerHTML =\r\n `${hours}:${minutes}:${seconds}`;\r\n}\r\n\r\nsetInterval(updateDateTime,1000);\r\n\r\nupdateDateTime();\r\nconst text = \"\u0391\u03c5\u03c4\u03ae \u03b7 \u03c0\u03b1\u03c1\u03ac\u03b3\u03c1\u03b1\u03c6\u03bf\u03c2 \u03c0\u03bb\u03b7\u03ba\u03c4\u03c1\u03bf\u03bb\u03bf\u03b3\u03b5\u03af\u03c4\u03b1\u03b9 \u03b1\u03c5\u03c4\u03cc\u03bc\u03b1\u03c4\u03b1 \u03c7\u03b1\u03c1\u03b1\u03ba\u03c4\u03ae\u03c1\u03b1 \u03c0\u03c1\u03bf\u03c2 \u03c7\u03b1\u03c1\u03b1\u03ba\u03c4\u03ae\u03c1\u03b1 \u03bc\u03b5 JavaScript, \u03b4\u03b7\u03bc\u03b9\u03bf\u03c5\u03c1\u03b3\u03ce\u03bd\u03c4\u03b1\u03c2 \u03ad\u03bd\u03b1 \u03b5\u03c6\u03ad \u03b3\u03c1\u03b1\u03c6\u03bf\u03bc\u03b7\u03c7\u03b1\u03bd\u03ae\u03c2.\";\r\nconst paragraph = document.getElementById(\"paragraph\");\r\n\r\n\r\n\r\nfunction typeWriter() {\r\n if (index < text.length) {\r\n paragraph.textContent += text.charAt(index);\r\n index++;\r\n setTimeout(typeWriter, 20); \/\/ \u03c4\u03b1\u03c7\u03cd\u03c4\u03b7\u03c4\u03b1 \u03c0\u03bb\u03b7\u03ba\u03c4\u03c1\u03bf\u03bb\u03cc\u03b3\u03b7\u03c3\u03b7\u03c2\r\n }\r\n}\r\n\r\ntypeWriter();\r\n\r\nfunction createDaisy() {\r\n const daisy = document.createElement('div');\r\n daisy.classList.add('daisy');\r\n\r\n \/\/ Emoji \u03bc\u03b1\u03c1\u03b3\u03b1\u03c1\u03af\u03c4\u03b1\u03c2\r\n daisy.textContent = '\u2b50';\r\n\r\n daisy.style.left = Math.random() * window.innerWidth + 'px';\r\n\r\n const size = 20 + Math.random() * 50;\r\n daisy.style.fontSize = size + 'px';\r\n\r\n const duration = 6 + Math.random() * 8;\r\n daisy.style.animationDuration =\r\n `${duration}s, ${2 + Math.random() * 3}s`;\r\n\r\n daisy.style.opacity = 0.6 + Math.random() * 0.4;\r\n\r\n document.body.appendChild(daisy);\r\n\r\n setTimeout(() => {\r\n daisy.remove();\r\n }, duration * 2000);\r\n}\r\n\r\n\/\/ \u0394\u03b7\u03bc\u03b9\u03bf\u03c5\u03c1\u03b3\u03af\u03b1 \u03bd\u03ad\u03b1\u03c2 \u03bc\u03b1\u03c1\u03b3\u03b1\u03c1\u03af\u03c4\u03b1\u03c2 \u03ba\u03ac\u03b8\u03b5 250ms\r\nsetInterval(createDaisy, 250);\r\n\r\n<\/script>\r\n\r\n<\/body>\r\n<\/html>\r\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-ebc7993 e-flex e-con-boxed e-con e-parent\" data-id=\"ebc7993\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-7c48655 e-flex e-con-boxed e-con e-parent\" data-id=\"7c48655\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"e-con e-atomic-element e-tabs-base \"\n data-id=\"0a1d048\"\n data-element_type=\"e-tabs\"\n data-e-type=\"e-tabs\"\n data-interaction-id=\"0a1d048\"\n data-interactions=\"null\"\n x-data=\"eTabs0a1d048\"\n data-e-settings=\"{"default-active-tab":"0a1d048-tab-0"}\"\n >\n <div class=\"e-con e-atomic-element e-tabs-menu-base \"\n data-id=\"cf770a0\"\n data-element_type=\"e-tabs-menu\"\n data-e-type=\"e-tabs-menu\"\n data-interaction-id=\"cf770a0\"\n data-interactions=\"null\"\n role=\"tablist\"\n ><button class=\"e-con e-atomic-element e-tab-base e--selected\"\n data-id=\"479e30f\"\n data-element_type=\"e-tab\"\n data-e-type=\"e-tab\"\n data-interaction-id=\"479e30f\"\n data-interactions=\"null\"\n role=\"tab\"\n tabindex=\"0\"\n aria-selected=\"true\"\n x-bind=\"tab\"\n x-ref=\"479e30f\"\n id=\"0a1d048-tab-0\"\n aria-controls=\"0a1d048-tab-content-0\"\n >\t\t\t<span class=\"e-paragraph-base\" data-interaction-id=\"b24edea\">Tab 1<\/span>\n\t\t<\/button>\n<button class=\"e-con e-atomic-element e-tab-base \"\n data-id=\"57a19c4\"\n data-element_type=\"e-tab\"\n data-e-type=\"e-tab\"\n data-interaction-id=\"57a19c4\"\n data-interactions=\"null\"\n role=\"tab\"\n tabindex=\"-1\"\n aria-selected=\"false\"\n x-bind=\"tab\"\n x-ref=\"57a19c4\"\n id=\"0a1d048-tab-1\"\n aria-controls=\"0a1d048-tab-content-1\"\n >\t\t\t<span class=\"e-paragraph-base\" data-interaction-id=\"0a8fd6d\">Tab 2<\/span>\n\t\t<\/button>\n<button class=\"e-con e-atomic-element e-tab-base \"\n data-id=\"1b5ac22\"\n data-element_type=\"e-tab\"\n data-e-type=\"e-tab\"\n data-interaction-id=\"1b5ac22\"\n data-interactions=\"null\"\n role=\"tab\"\n tabindex=\"-1\"\n aria-selected=\"false\"\n x-bind=\"tab\"\n x-ref=\"1b5ac22\"\n id=\"0a1d048-tab-2\"\n aria-controls=\"0a1d048-tab-content-2\"\n >\t\t\t<span class=\"e-paragraph-base\" data-interaction-id=\"2402184\">Tab 3<\/span>\n\t\t<\/button>\n<\/div>\n<div class=\"e-con e-atomic-element e-tabs-content-area-base \"\n data-id=\"e839884\"\n data-element_type=\"e-tabs-content-area\"\n data-e-type=\"e-tabs-content-area\"\n data-interaction-id=\"e839884\"\n data-interactions=\"null\"\n ><div class=\"e-con e-atomic-element e-tab-content-base e--selected\"\n data-id=\"b5ff13c\"\n data-element_type=\"e-tab-content\"\n data-e-type=\"e-tab-content\"\n data-interaction-id=\"b5ff13c\"\n data-interactions=\"null\"\n role=\"tabpanel\"\n x-bind=\"tabContent\"\n id=\"0a1d048-tab-content-0\"\n aria-labelledby=\"0a1d048-tab-0\"\n ><\/div>\n<div class=\"e-con e-atomic-element e-tab-content-base \"\n data-id=\"e357044\"\n data-element_type=\"e-tab-content\"\n data-e-type=\"e-tab-content\"\n data-interaction-id=\"e357044\"\n data-interactions=\"null\"\n role=\"tabpanel\"\n x-bind=\"tabContent\"\n id=\"0a1d048-tab-content-1\"\n aria-labelledby=\"0a1d048-tab-1\"\n hidden=\"true\" style=\"display: none;\" ><\/div>\n<div class=\"e-con e-atomic-element e-tab-content-base \"\n data-id=\"1c3bf9b\"\n data-element_type=\"e-tab-content\"\n data-e-type=\"e-tab-content\"\n data-interaction-id=\"1c3bf9b\"\n data-interactions=\"null\"\n role=\"tabpanel\"\n x-bind=\"tabContent\"\n id=\"0a1d048-tab-content-2\"\n aria-labelledby=\"0a1d048-tab-2\"\n hidden=\"true\" style=\"display: none;\" ><\/div>\n<\/div>\n\n<\/div>\n\t\t\n\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Carousel \u0395\u03b9\u03ba\u03cc\u03bd\u03c9\u03bd \u039a\u03b9\u03bd\u03bf\u03cd\u03bc\u03b5\u03bd\u03b7 \u03a0\u03b1\u03c1\u03ac\u03b3\u03c1\u03b1\u03c6\u03bf\u03c2 \u276e \u276f hi Tab 1 Tab 2 Tab 3<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"no-sidebar","site-content-layout":"","ast-site-content-layout":"full-width-container","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-24","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/informatics.val-edu.gr\/index.php?rest_route=\/wp\/v2\/pages\/24","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/informatics.val-edu.gr\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/informatics.val-edu.gr\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/informatics.val-edu.gr\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/informatics.val-edu.gr\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=24"}],"version-history":[{"count":238,"href":"https:\/\/informatics.val-edu.gr\/index.php?rest_route=\/wp\/v2\/pages\/24\/revisions"}],"predecessor-version":[{"id":532,"href":"https:\/\/informatics.val-edu.gr\/index.php?rest_route=\/wp\/v2\/pages\/24\/revisions\/532"}],"wp:attachment":[{"href":"https:\/\/informatics.val-edu.gr\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=24"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t

\n\t\t\t\t\t

\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t

\n\t\t\t\t\t

\n\t\t\t\t

\n\t\t\t\t\t\r\n\r\n\r\n\r\n\r\nCarousel \u0395\u03b9\u03ba\u03cc\u03bd\u03c9\u03bd<\/title>\r\n<title>\u039a\u03b9\u03bd\u03bf\u03cd\u03bc\u03b5\u03bd\u03b7 \u03a0\u03b1\u03c1\u03ac\u03b3\u03c1\u03b1\u03c6\u03bf\u03c2<\/title>\r\n<style>\r\n.datetime-box{\r\n position:fixed;\r\n top:60px;\r\n right:10px;\r\n \r\n background:red;\r\n color:white;\r\n\r\n padding:15px 25px;\r\n border-radius:14px;\r\n\r\n font-family:Arial, sans-serif;\r\n text-align:center;\r\n\r\n box-shadow:0 5px 20px rgba(0,0,0,0.3);\r\n backdrop-filter:blur(8px);\r\n}\r\n\r\n#date{\r\n font-size:16px;\r\n color:#cbd5e1;\r\n margin-bottom:5px;\r\n}\r\n\r\n#time{\r\n font-size:32px;\r\n font-weight:bold;\r\n color:#60a5fa;\r\n}\r\n*{\r\n margin:0;\r\n padding:0;\r\n box-sizing:border-box;\r\n}\r\n\r\nbody{\r\n background:#111827;\r\n display:flex;\r\n margin-top:220px;\r\n justify-content:center;\r\n align-items:center;\r\n height: 100vh;\r\n font-family:Arial, sans-serif;\r\noverflow: hidden;\r\n background: linear-gradient(\r\n to bottom,\r\n #87ceeb 0%,\r\n #bdefff 50%,\r\n #f5fdff 100%\r\n ); \r\n \r\n \r\n}\r\n\r\n.daisy {\r\n position: absolute;\r\n font-size: 40px;\r\n pointer-events: none;\r\n user-select: none; animation:\r\n fall linear forwards,\r\n sway ease-in-out infinite;\r\n }\r\n\r\n @keyframes fall {\r\n from {\r\n transform: translateY(-800px) rotate(180deg);\r\n }\r\n to {\r\n transform: translateY(calc(100vh + 150px)) rotate(360deg);\r\n }\r\n }\r\n\r\n @keyframes sway {\r\n 0%,100% {\r\n margin-left: -10px;\r\n }\r\n 50% {\r\n margin-left: 70px;\r\n }\r\n }\r\n\r\n\r\n\r\n\r\n.carousel{\r\n position:relative;\r\n width:700px;\r\n height:600px;\r\n overflow:hidden;\r\n border-radius:8px;\r\n box-shadow:0 10px 30px rgba(0,0,0,0.4);\r\n top:10px;\r\n margin-left:70px;\r\n}\r\n\r\n.slides{\r\n \r\n display:flex;\r\n width:100%;\r\n height:100%;\r\n transition:transform 0.6s ease;\r\n}\r\n\r\n.slide{\r\n \r\n width:100%;\r\n flex-shrink:0;\r\n}\r\n\r\n.slide img{\r\n \r\n \r\n position:relative;\r\n width:100%;\r\n height:100%;\r\n object-fit:cover;\r\n}\r\n\r\nbutton{\r\n position:absolute;\r\n top:50%;\r\n transform:translateY(-50%);\r\n background:rgba(0,0,0,0.5);\r\n color:white;\r\n border:none;\r\n padding:14px 18px;\r\n cursor:pointer;\r\n font-size:24px;\r\n border-radius:50%;\r\n transition:0.3s;\r\n}\r\n\r\nbutton:hover{\r\n background:rgba(0,0,0,0.8);\r\n}\r\n\r\n.prev{\r\n left:15px;\r\n}\r\n\r\n.next{\r\n right:15px;\r\n}\r\n\r\n.dots{\r\n position:absolute;\r\n bottom:20px;\r\n width:100%;\r\n display:flex;\r\n justify-content:center;\r\n gap:10px;\r\n}\r\n\r\n.dot{\r\n width:14px;\r\n height:14px;\r\n border-radius:50%;\r\n background:white;\r\n opacity:0.5;\r\n cursor:pointer;\r\n}\r\n\r\n.dot.active{\r\n opacity:1;\r\n background:#60a5fa;\r\n}\r\n\r\n\r\n\r\n.animated-text{\r\n color: orange;\r\n font-size:18px;\r\n width:50%;\r\n text-align:center;\r\n animation: floatText 3s ease-in-out infinite alternate, glow 2s infinite;\r\n display:flex;\r\n justify-content:center;\r\n align-items:center;\r\n height:15vh;\r\n margin-left:190px;\r\n background:lightblue;\r\n \r\n margin-top:180px;\r\n overflow:hidden;\r\n font-family:Arial, sans-serif;\r\n}\r\n\r\n\/* \u039a\u03af\u03bd\u03b7\u03c3\u03b7 \u03c0\u03ac\u03bd\u03c9-\u03ba\u03ac\u03c4\u03c9 *\/\r\n@keyframes floatText{\r\n from{\r\n transform: translateY(0px );\r\n color:purple;\r\n }\r\n to{\r\n transform: translateY(-20px);\r\n color: blue;\r\n }\r\n}\r\n\r\n\/* \u03a6\u03c9\u03c4\u03b5\u03b9\u03bd\u03cc \u03b5\u03c6\u03ad *\/\r\n@keyframes glow{\r\n 0%{\r\n box-shadow: 0 15 5px 10s purple;\r\n }\r\n 50%{\r\n box-shadow: 0 0 20px purple,\r\n 0 0 40px purple;\r\n }\/*#00f0ff*\/\r\n \r\n 100%{\r\n box-shadow: 0 0 5px red ;\r\n }\r\n}\r\n.scene{\r\n width:200px;\r\n height:200px;\r\n margin-left:380px;\r\n margin-top:120px;\r\n \r\n }\r\n\r\n .dice{\r\n width:100%;\r\n height:100%;\r\n position:relative;\r\n transform-style:preserve-3d;\r\n animation:spin 6s infinite linear,glowe 2s infinite;\r\n \r\n }\r\n\r\n .face{\r\n position:absolute;\r\n width:200px;\r\n height:200px;\r\n background:#ADD8E;\r\n border:4px solid #222;\r\n border-radius:20px;\r\n display:grid;\r\n padding:20px;\r\n box-shadow:0 0 20px rgba(0,0,0,0.4);\r\n }\r\n\r\n .dot{\r\n width:28px;\r\n height:28px;\r\n background:blue;\r\n border-radius:50%;\r\n align-self:center;\r\n justify-self: center;\r\n }\r\n\r\n \/* 1 *\/\r\n .front{\r\n transform:translateZ(100px);\r\n grid-template-columns:(2,1fr);\r\n background:red;\r\n \r\n }\r\n\r\n \/* 2 *\/\r\n .back{\r\n transform:rotateY(180deg) translateZ(100px);\r\n grid-template-columns:repeat(2,1fr);\r\n background:orange;\r\n \r\n }\r\n\r\n \/* 3 *\/\r\n .right{\r\n transform:rotateY(90deg) translateZ(100px);\r\n grid-template-columns:repeat(2,1fr);\r\n background:purple;\r\n }\r\n\r\n \/* 4 *\/\r\n .left{\r\n transform:rotateY(-90deg) translateZ(100px);\r\n grid-template-columns:repeat(2,1fr);\r\n background:yellow;\r\n }\r\n\r\n \/* 5 *\/\r\n .top{\r\n transform:rotateX(90deg) translateZ(100px);\r\n grid-template-columns:repeat(3,1fr);\r\n }\r\n\r\n \/* 6 *\/\r\n .bottom{\r\n transform:rotateX(-90deg) translateZ(100px);\r\n grid-template-columns:repeat(2,1fr);\r\n }\r\n\/* \u03a6\u03c9\u03c4\u03b5\u03b9\u03bd\u03cc \u03b5\u03c6\u03ad \u03b6\u03b1\u03c1\u03b9\u03bf\u03cd *\/\r\n@keyframes glowe{\r\n 0%{\r\n \r\n box-shadow: 0 15 2px grey;\r\n }\r\n 50%{\r\n \r\n box-shadow: 0 0 15px green,\r\n 0 0 35px green;\r\n }\/*#00f0ff*\/\r\n \r\n 100%{\r\n box-shadow: 0 0 5px green ;\r\n }\r\n}\r\n @keyframes spin{\r\n 0%{\r\n transform:rotateX(0deg) rotateY(0deg);\r\n }\r\n 100%{\r\n transform:rotateX(360deg) rotateY(360deg);\r\n }\r\n }\r\n\r\n #paragraph {\r\n font-size: 20px;\r\n line-height: 2.5;\r\n margin-top:90px;\r\n width: 900px;\r\n color:white;\r\n background:purple;\r\n }\r\n\r\n .cursor {\r\n border-right: 2px solid black;\r\n animation: blink 0.7s infinite;\r\n }\r\n\r\n @keyframes blink {\r\n 50% {\r\n border-color: transparent;\r\n }\r\n }\r\n<\/style>\r\n<\/head>\r\n\r\n<body>\r\n\r\n<div class=\"carousel\">\r\n\r\n <div class=\"slides\" id=\"slides\">\r\n\r\n <div class=\"slide\">\r\n <img decoding=\"async\" src=\"https:\/\/picsum.photos\/id\/1015\/1200\/700\" alt=\"\">\r\n <\/div>\r\n\r\n <div class=\"slide\">\r\n <img decoding=\"async\" src=\"https:\/\/encrypted-tbn0.gstatic.com\/images?q=tbn:ANd9GcSy2hyx9uxM-ze8HxToKKHWMpTL2m3N5m0OBriZfXpDSKCJ74E-VWbaAkgHMfv-gRyjE9ZVOn1rHfnRf0T7aMVF_plKz5O3xWl7cfflMKI&s=10\" alt=\"\">\r\n <\/div>\r\n\r\n <div class=\"slide\">\r\n <img decoding=\"async\" src=\"https:\/\/picsum.photos\/id\/1018\/1200\/700\" alt=\"\">\r\n <\/div>\r\n\r\n <div class=\"slide\">\r\n <img decoding=\"async\" src=\"https:\/\/encrypted-tbn0.gstatic.com\/images?q=tbn:ANd9GcSacfZzoW2c-cn3396CFRu-FJ14WZoAOS-oyVG7mQHtpJUZ-BKTbTdPP-Gu6NQFA0Ae6RjMoXSqmhJtBDyoRMvoYG7pFlIAO86q0a6SBIsLmA&s=10\" alt=\"\">\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n <button class=\"prev\" onclick=\"prevSlide()\">\u276e<\/button>\r\n <button class=\"next\" onclick=\"nextSlide()\">\u276f<\/button>\r\n\r\n <div class=\"dots\" id=\"dots\"><\/div>\r\n\r\n<\/div>\r\n<div class=\"datetime-box\">\r\n <div id=\"date\"><\/div>\r\n <div id=\"time\"><\/div>\r\n<\/div>\r\n<p class=\"animated-text\">\r\n hi\r\n<\/p>\r\n\r\n<p>\r\n<div class=\"scene\">\r\n <div class=\"dice\">\r\n\r\n \r\n <div class=\"face front\">\r\n <div class=\"dot\"><\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"face back\">\r\n <div class=\"dot\"><\/div>\r\n <div class=\"dot\"><\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"face right\">\r\n <div class=\"dot\"><\/div>\r\n <div><\/div>\r\n <div class=\"dot\"><\/div>\r\n <div><\/div>\r\n <div class=\"dot\"><\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"face left\">\r\n <div class=\"dot\"><\/div>\r\n <div class=\"dot\"><\/div>\r\n <div class=\"dot\"><\/div>\r\n <div class=\"dot\"><\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"face top\">\r\n <div class=\"dot\"><\/div>\r\n <div><\/div>\r\n <div class=\"dot\"><\/div>\r\n\r\n <div><\/div>\r\n <div class=\"dot\"><\/div>\r\n <div><\/div>\r\n\r\n <div class=\"dot\"><\/div>\r\n <div><\/div>\r\n <div class=\"dot\"><\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"face bottom\">\r\n <div class=\"dot\"><\/div>\r\n <div class=\"dot\"><\/div>\r\n\r\n <div class=\"dot\"><\/div>\r\n <div class=\"dot\"><\/div>\r\n\r\n <div class=\"dot\"><\/div>\r\n <div class=\"dot\"><\/div>\r\n <\/div>\r\n\r\n <\/div>\r\n<\/div> \r\n <\/p>\r\n \r\n<p id=\"paragraph\" class=\"cursor\"> <\/p>\r\n\r\n\r\n \r\n<script>\r\nconst slides = document.getElementById(\"slides\");\r\nconst totalSlides = document.querySelectorAll(\".slide\").length;\r\nconst dotsContainer = document.getElementById(\"dots\");\r\n\r\nlet index = 0;\r\n\r\n\/\/ \u03b4\u03b7\u03bc\u03b9\u03bf\u03c5\u03c1\u03b3\u03af\u03b1 dots\r\nfor(let i=0;i<totalSlides;i++){\r\n const dot = document.createElement(\"div\");\r\n dot.classList.add(\"dot\");\r\n\r\n if(i===0) dot.classList.add(\"active\");\r\n\r\n dot.addEventListener(\"click\", ()=>{\r\n index = i;\r\n updateCarousel();\r\n });\r\n\r\n dotsContainer.appendChild(dot);\r\n}\r\n\r\nfunction updateCarousel(){\r\n slides.style.transform = `translateX(-${index * 100}%)`;\r\n\r\n document.querySelectorAll(\".dot\").forEach(dot=>{\r\n dot.classList.remove(\"active\");\r\n });\r\n\r\n document.querySelectorAll(\".dot\")[index].classList.add(\"active\");\r\n}\r\n\r\nfunction nextSlide(){\r\n index++;\r\n\r\n if(index >= totalSlides){\r\n index = 0;\r\n }\r\n\r\n updateCarousel();\r\n}\r\n\r\nfunction prevSlide(){\r\n index--;\r\n\r\n if(index < 0){\r\n index = totalSlides - 1;\r\n }\r\n\r\n updateCarousel();\r\n}\r\n\r\n\/\/ auto slide\r\nsetInterval(()=>{\r\n nextSlide();\r\n},4000);\r\nfunction updateDateTime(){\r\n\r\n const now = new Date();\r\n\r\n const days = [\r\n \"\u039a\u03c5\u03c1\u03b9\u03b1\u03ba\u03ae\",\r\n \"\u0394\u03b5\u03c5\u03c4\u03ad\u03c1\u03b1\",\r\n \"\u03a4\u03c1\u03af\u03c4\u03b7\",\r\n \"\u03a4\u03b5\u03c4\u03ac\u03c1\u03c4\u03b7\",\r\n \"\u03a0\u03ad\u03bc\u03c0\u03c4\u03b7\",\r\n \"\u03a0\u03b1\u03c1\u03b1\u03c3\u03ba\u03b5\u03c5\u03ae\",\r\n \"\u03a3\u03ac\u03b2\u03b2\u03b1\u03c4\u03bf\"\r\n ];\r\n\r\n const months = [\r\n \"\u0399\u03b1\u03bd\u03bf\u03c5\u03b1\u03c1\u03af\u03bf\u03c5\",\r\n \"\u03a6\u03b5\u03b2\u03c1\u03bf\u03c5\u03b1\u03c1\u03af\u03bf\u03c5\",\r\n \"\u039c\u03b1\u03c1\u03c4\u03af\u03bf\u03c5\",\r\n \"\u0391\u03c0\u03c1\u03b9\u03bb\u03af\u03bf\u03c5\",\r\n \"\u039c\u03b1\u0390\u03bf\u03c5\",\r\n \"\u0399\u03bf\u03c5\u03bd\u03af\u03bf\u03c5\",\r\n \"\u0399\u03bf\u03c5\u03bb\u03af\u03bf\u03c5\",\r\n \"\u0391\u03c5\u03b3\u03bf\u03cd\u03c3\u03c4\u03bf\u03c5\",\r\n \"\u03a3\u03b5\u03c0\u03c4\u03b5\u03bc\u03b2\u03c1\u03af\u03bf\u03c5\",\r\n \"\u039f\u03ba\u03c4\u03c9\u03b2\u03c1\u03af\u03bf\u03c5\",\r\n \"\u039d\u03bf\u03b5\u03bc\u03b2\u03c1\u03af\u03bf\u03c5\",\r\n \"\u0394\u03b5\u03ba\u03b5\u03bc\u03b2\u03c1\u03af\u03bf\u03c5\"\r\n ];\r\n\r\n const day = days[now.getDay()];\r\n const date = now.getDate();\r\n const month = months[now.getMonth()];\r\n const year = now.getFullYear();\r\n\r\n let hours = now.getHours().toString().padStart(2,\"0\");\r\n let minutes = now.getMinutes().toString().padStart(2,\"0\");\r\n let seconds = now.getSeconds().toString().padStart(2,\"0\");\r\n\r\n document.getElementById(\"date\").innerHTML =\r\n `${day}, ${date} ${month} ${year}`;\r\n\r\n document.getElementById(\"time\").innerHTML =\r\n `${hours}:${minutes}:${seconds}`;\r\n}\r\n\r\nsetInterval(updateDateTime,1000);\r\n\r\nupdateDateTime();\r\nconst text = \"\u0391\u03c5\u03c4\u03ae \u03b7 \u03c0\u03b1\u03c1\u03ac\u03b3\u03c1\u03b1\u03c6\u03bf\u03c2 \u03c0\u03bb\u03b7\u03ba\u03c4\u03c1\u03bf\u03bb\u03bf\u03b3\u03b5\u03af\u03c4\u03b1\u03b9 \u03b1\u03c5\u03c4\u03cc\u03bc\u03b1\u03c4\u03b1 \u03c7\u03b1\u03c1\u03b1\u03ba\u03c4\u03ae\u03c1\u03b1 \u03c0\u03c1\u03bf\u03c2 \u03c7\u03b1\u03c1\u03b1\u03ba\u03c4\u03ae\u03c1\u03b1 \u03bc\u03b5 JavaScript, \u03b4\u03b7\u03bc\u03b9\u03bf\u03c5\u03c1\u03b3\u03ce\u03bd\u03c4\u03b1\u03c2 \u03ad\u03bd\u03b1 \u03b5\u03c6\u03ad \u03b3\u03c1\u03b1\u03c6\u03bf\u03bc\u03b7\u03c7\u03b1\u03bd\u03ae\u03c2.\";\r\nconst paragraph = document.getElementById(\"paragraph\");\r\n\r\n\r\n\r\nfunction typeWriter() {\r\n if (index < text.length) {\r\n paragraph.textContent += text.charAt(index);\r\n index++;\r\n setTimeout(typeWriter, 20); \/\/ \u03c4\u03b1\u03c7\u03cd\u03c4\u03b7\u03c4\u03b1 \u03c0\u03bb\u03b7\u03ba\u03c4\u03c1\u03bf\u03bb\u03cc\u03b3\u03b7\u03c3\u03b7\u03c2\r\n }\r\n}\r\n\r\ntypeWriter();\r\n\r\nfunction createDaisy() {\r\n const daisy = document.createElement('div');\r\n daisy.classList.add('daisy');\r\n\r\n \/\/ Emoji \u03bc\u03b1\u03c1\u03b3\u03b1\u03c1\u03af\u03c4\u03b1\u03c2\r\n daisy.textContent = '\u2b50';\r\n\r\n daisy.style.left = Math.random() * window.innerWidth + 'px';\r\n\r\n const size = 20 + Math.random() * 50;\r\n daisy.style.fontSize = size + 'px';\r\n\r\n const duration = 6 + Math.random() * 8;\r\n daisy.style.animationDuration =\r\n `${duration}s, ${2 + Math.random() * 3}s`;\r\n\r\n daisy.style.opacity = 0.6 + Math.random() * 0.4;\r\n\r\n document.body.appendChild(daisy);\r\n\r\n setTimeout(() => {\r\n daisy.remove();\r\n }, duration * 2000);\r\n}\r\n\r\n\/\/ \u0394\u03b7\u03bc\u03b9\u03bf\u03c5\u03c1\u03b3\u03af\u03b1 \u03bd\u03ad\u03b1\u03c2 \u03bc\u03b1\u03c1\u03b3\u03b1\u03c1\u03af\u03c4\u03b1\u03c2 \u03ba\u03ac\u03b8\u03b5 250ms\r\nsetInterval(createDaisy, 250);\r\n\r\n<\/script>\r\n\r\n<\/body>\r\n<\/html>\r\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-ebc7993 e-flex e-con-boxed e-con e-parent\" data-id=\"ebc7993\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-7c48655 e-flex e-con-boxed e-con e-parent\" data-id=\"7c48655\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"e-con e-atomic-element e-tabs-base \"\n data-id=\"0a1d048\"\n data-element_type=\"e-tabs\"\n data-e-type=\"e-tabs\"\n data-interaction-id=\"0a1d048\"\n data-interactions=\"null\"\n x-data=\"eTabs0a1d048\"\n data-e-settings=\"{"default-active-tab":"0a1d048-tab-0"}\"\n >\n <div class=\"e-con e-atomic-element e-tabs-menu-base \"\n data-id=\"cf770a0\"\n data-element_type=\"e-tabs-menu\"\n data-e-type=\"e-tabs-menu\"\n data-interaction-id=\"cf770a0\"\n data-interactions=\"null\"\n role=\"tablist\"\n ><button class=\"e-con e-atomic-element e-tab-base e--selected\"\n data-id=\"479e30f\"\n data-element_type=\"e-tab\"\n data-e-type=\"e-tab\"\n data-interaction-id=\"479e30f\"\n data-interactions=\"null\"\n role=\"tab\"\n tabindex=\"0\"\n aria-selected=\"true\"\n x-bind=\"tab\"\n x-ref=\"479e30f\"\n id=\"0a1d048-tab-0\"\n aria-controls=\"0a1d048-tab-content-0\"\n >\t\t\t<span class=\"e-paragraph-base\" data-interaction-id=\"b24edea\">Tab 1<\/span>\n\t\t<\/button>\n<button class=\"e-con e-atomic-element e-tab-base \"\n data-id=\"57a19c4\"\n data-element_type=\"e-tab\"\n data-e-type=\"e-tab\"\n data-interaction-id=\"57a19c4\"\n data-interactions=\"null\"\n role=\"tab\"\n tabindex=\"-1\"\n aria-selected=\"false\"\n x-bind=\"tab\"\n x-ref=\"57a19c4\"\n id=\"0a1d048-tab-1\"\n aria-controls=\"0a1d048-tab-content-1\"\n >\t\t\t<span class=\"e-paragraph-base\" data-interaction-id=\"0a8fd6d\">Tab 2<\/span>\n\t\t<\/button>\n<button class=\"e-con e-atomic-element e-tab-base \"\n data-id=\"1b5ac22\"\n data-element_type=\"e-tab\"\n data-e-type=\"e-tab\"\n data-interaction-id=\"1b5ac22\"\n data-interactions=\"null\"\n role=\"tab\"\n tabindex=\"-1\"\n aria-selected=\"false\"\n x-bind=\"tab\"\n x-ref=\"1b5ac22\"\n id=\"0a1d048-tab-2\"\n aria-controls=\"0a1d048-tab-content-2\"\n >\t\t\t<span class=\"e-paragraph-base\" data-interaction-id=\"2402184\">Tab 3<\/span>\n\t\t<\/button>\n<\/div>\n<div class=\"e-con e-atomic-element e-tabs-content-area-base \"\n data-id=\"e839884\"\n data-element_type=\"e-tabs-content-area\"\n data-e-type=\"e-tabs-content-area\"\n data-interaction-id=\"e839884\"\n data-interactions=\"null\"\n ><div class=\"e-con e-atomic-element e-tab-content-base e--selected\"\n data-id=\"b5ff13c\"\n data-element_type=\"e-tab-content\"\n data-e-type=\"e-tab-content\"\n data-interaction-id=\"b5ff13c\"\n data-interactions=\"null\"\n role=\"tabpanel\"\n x-bind=\"tabContent\"\n id=\"0a1d048-tab-content-0\"\n aria-labelledby=\"0a1d048-tab-0\"\n ><\/div>\n<div class=\"e-con e-atomic-element e-tab-content-base \"\n data-id=\"e357044\"\n data-element_type=\"e-tab-content\"\n data-e-type=\"e-tab-content\"\n data-interaction-id=\"e357044\"\n data-interactions=\"null\"\n role=\"tabpanel\"\n x-bind=\"tabContent\"\n id=\"0a1d048-tab-content-1\"\n aria-labelledby=\"0a1d048-tab-1\"\n hidden=\"true\" style=\"display: none;\" ><\/div>\n<div class=\"e-con e-atomic-element e-tab-content-base \"\n data-id=\"1c3bf9b\"\n data-element_type=\"e-tab-content\"\n data-e-type=\"e-tab-content\"\n data-interaction-id=\"1c3bf9b\"\n data-interactions=\"null\"\n role=\"tabpanel\"\n x-bind=\"tabContent\"\n id=\"0a1d048-tab-content-2\"\n aria-labelledby=\"0a1d048-tab-2\"\n hidden=\"true\" style=\"display: none;\" ><\/div>\n<\/div>\n\n<\/div>\n\t\t\n\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Carousel \u0395\u03b9\u03ba\u03cc\u03bd\u03c9\u03bd \u039a\u03b9\u03bd\u03bf\u03cd\u03bc\u03b5\u03bd\u03b7 \u03a0\u03b1\u03c1\u03ac\u03b3\u03c1\u03b1\u03c6\u03bf\u03c2 \u276e \u276f hi Tab 1 Tab 2 Tab 3<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"no-sidebar","site-content-layout":"","ast-site-content-layout":"full-width-container","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-24","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/informatics.val-edu.gr\/index.php?rest_route=\/wp\/v2\/pages\/24","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/informatics.val-edu.gr\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/informatics.val-edu.gr\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/informatics.val-edu.gr\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/informatics.val-edu.gr\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=24"}],"version-history":[{"count":238,"href":"https:\/\/informatics.val-edu.gr\/index.php?rest_route=\/wp\/v2\/pages\/24\/revisions"}],"predecessor-version":[{"id":532,"href":"https:\/\/informatics.val-edu.gr\/index.php?rest_route=\/wp\/v2\/pages\/24\/revisions\/532"}],"wp:attachment":[{"href":"https:\/\/informatics.val-edu.gr\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=24"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}