start
This commit is contained in:
+24
-19
@@ -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);}
|
||||
|
||||
Reference in New Issue
Block a user