www1-3/cro-eng
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

start

Browse Source
This commit is contained in:
www
2026-04-14 09:06:11 +00:00
parent 69b10a196a
commit 56bb14d28f
1 changed files with 24 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+24 -19
View File
@@ -73,52 +73,53 @@ li:hover {
0%{transform:translate(0,0) scale(1);opacity:1;} 0%{transform:translate(0,0) scale(1);opacity:1;}
100%{transform:translate(var(--dx),var(--dy)) scale(0);opacity:0;} 100%{transform:translate(var(--dx),var(--dy)) scale(0);opacity:0;}
} }
.unsitbar{
display: none;
}
</style> </style>
</head> </head>
<body> <body>
<div id="app"> <div id="app">
<div id="slide-container"></div> <div id="slide-container"></div>
<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>
<div id="progress"></div> <div id="progress" class="unsitbar"></div>
</div> </div>
<script> <script>
// --- Slides --- // --- Slides ---
const slidesData = [ const slidesData = [
{type:"title", content:"My Life in Twenty Years\nBy Janis"}, {type:"title", content:"Cro"},
{type:"list", title:"My Job", items:[ {type:"list", title:"My Job", items:[
"I will have an amazing job!!!", "I will work as a programmer!",
"I will work as a programmer!!!", "I will love my job so much!",
"I will love my job so much!!!", "I will earn good money!"
"I will earn good money!!!"
]}, ]},
{type:"list", title:"My Home", items:[ {type:"list", title:"My Home", items:[
"I will live in a modern house.", "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.", "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:[ {type:"list", title:"My Family", items:[
"Family will be very important to me.", "Family will be very important to me.",
"I will have my own family.!", "I will have my own family.!",
"I will be married.", "I will be married.",
"I will have children.", "I will have children."
"I will still see my friends a lot."
]}, ]},
{type:"list", title:"My Free Time", items:[ {type:"list", title:"My Free Time", items:[
"I will be super healthy.", "I will do play american football.",
"I will do sports regularly.", "I will travel to countries.",
"I will travel to amazing countries.",
"I will see the world and enjoy it." "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 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.", "Thank you for listening.",
"Do you have a Question?" "Do you have a Question?"
]} ]}
@@ -136,7 +137,7 @@ const bgColors=[
"#43e97b,#38f9d7", "#43e97b,#38f9d7",
"#ffafbd,#ffc3a0", "#ffafbd,#ffc3a0",
"#667eea,#764ba2", "#667eea,#764ba2",
"#667eea,#8f94fb" "#667eea,#764ba2"
]; ];
// --- Background animation --- // --- Background animation ---
@@ -233,6 +234,10 @@ document.getElementById('prev').addEventListener('click',()=>{
}); });
// --- Arrow keys --- // --- 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=>{ document.addEventListener('keydown', e=>{
if(e.key==="ArrowRight" && currentSlide<slidesData.length-1){currentSlide++; renderSlide(currentSlide);} if(e.key==="ArrowRight" && currentSlide<slidesData.length-1){currentSlide++; renderSlide(currentSlide);}
else if(e.key==="ArrowLeft" && currentSlide>0){currentSlide--; renderSlide(currentSlide);} else if(e.key==="ArrowLeft" && currentSlide>0){currentSlide--; renderSlide(currentSlide);}