This commit is contained in:
www
2026-04-14 09:06:11 +00:00
parent 69b10a196a
commit 56bb14d28f
+24 -19
View File
@@ -73,52 +73,53 @@ li:hover {
0%{transform:translate(0,0) scale(1);opacity:1;}
100%{transform:translate(var(--dx),var(--dy)) scale(0);opacity:0;}
}
.unsitbar{
display: none;
}
</style>
</head>
<body>
<div id="app">
<div id="slide-container"></div>
<div>
<button id="prev">Back</button>
<button id="next">Next</button>
<button id="prev" class="unsitbar">Back</button>
<button id="next" class="unsitbar">Next</button>
</div>
<div id="progress"></div>
<div id="progress" class="unsitbar"></div>
</div>
<script>
// --- Slides ---
const slidesData = [
{type:"title", content:"My Life in Twenty Years\nBy Janis"},
{type:"title", content:"Cro"},
{type:"list", title:"My Job", items:[
"I will have an amazing job!!!",
"I will work as a programmer!!!",
"I will love my job so much!!!",
"I will earn good money!!!"
"I will work as a programmer!",
"I will love my job so much!",
"I will earn good money!"
]},
{type:"list", title:"My Home", items:[
"I will live in a modern house.",
"Maybe I will live in a big city like Berlin.",
"Maybe I will live in a small city.",
"My home will be very comfortable.",
"I will have my own gaming room and office."
"I will have my own gaming room."
]},
{type:"list", title:"My Family", items:[
"Family will be very important to me.",
"I will have my own family.!",
"I will be married.",
"I will have children.",
"I will still see my friends a lot."
"I will have children."
]},
{type:"list", title:"My Free Time", items:[
"I will be super healthy.",
"I will do sports regularly.",
"I will travel to amazing countries.",
"I will do play american football.",
"I will travel to countries.",
"I will see the world and enjoy it."
]},
{type:"list", title:"My favourite food and Drinks", items;[
{type:"list", title:"My favourite food and drinks", items:[
"My favourite food is kebap.",
"My favourite Drink is water with flavored powder"
"My favourite drink is Fanta Exotic."
]},
{type:"list", title:"the End", items;[
{type:"list", title:"The End", items:[
"Thank you for listening.",
"Do you have a Question?"
]}
@@ -136,7 +137,7 @@ const bgColors=[
"#43e97b,#38f9d7",
"#ffafbd,#ffc3a0",
"#667eea,#764ba2",
"#667eea,#8f94fb"
"#667eea,#764ba2"
];
// --- Background animation ---
@@ -233,6 +234,10 @@ document.getElementById('prev').addEventListener('click',()=>{
});
// --- Arrow keys ---
document.addEventListener('keydown', e=>{
if(e.key==="ArrowUp" && currentSlide<slidesData.length-1){currentSlide++; renderSlide(currentSlide);}
else if(e.key==="ArrowDown" && currentSlide>0){currentSlide--; renderSlide(currentSlide);}
});
document.addEventListener('keydown', e=>{
if(e.key==="ArrowRight" && currentSlide<slidesData.length-1){currentSlide++; renderSlide(currentSlide);}
else if(e.key==="ArrowLeft" && currentSlide>0){currentSlide--; renderSlide(currentSlide);}