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

add1

Browse Source
This commit is contained in:
www
2026-05-01 12:36:31 +00:00
parent 56bb14d28f
commit 07abd917dd
2 changed files with 160 additions and 178 deletions
Download Patch File Download Diff File Expand all files Collapse all files
3655db7bb80e7185ec222aa0864e9a0d,b7106cf.webp
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 82 KiB

index.html
+160 -178
View File
@@ -2,7 +2,8 @@
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My Life in Twenty Years - Ultimate Insane</title>
<title>My Life in Twenty Years</title>
<style>
body {
margin:0;
@@ -13,14 +14,64 @@ body {
justify-content:center;
align-items:center;
height:100vh;
overflow:hidden;
}
#app {
max-width:900px;
width:90%;
text-align:center;
position:relative;
width:100%;
max-width:1200px;
}
/* 3-Spalten Layout */
.slide-layout {
display:grid;
grid-template-columns: 1fr 2fr 1fr;
align-items:center;
}
/* TEXT MITTE */
.text-content {
grid-column:2;
text-align:center;
}
h1 {font-size:70px;}
h2 {font-size:45px;}
li {font-size:28px; margin:10px 0;}
ul {
padding-left:0;
list-style-position:inside;
}
/* BILDER RECHTS */
.image-container {
grid-column:3;
display:flex;
flex-wrap:wrap;
gap:10px;
justify-content:center;
align-items:center;
}
/* 🔥 ANIMATION FIX */
.image-container img {
width:auto;
height:auto;
max-width:180px;
border-radius:10px;
opacity:0;
transform: scale(0.2) translateY(80px);
transition: all 0.8s cubic-bezier(.68,-0.55,.27,1.55);
}
/* großes Bild erste Seite */
.big-image img {
max-width:400px;
}
/* Buttons */
button {
padding:10px 20px;
font-size:18px;
@@ -28,232 +79,163 @@ button {
border:none;
border-radius:8px;
cursor:pointer;
background-color:#fff;
color:#4e54c8;
font-weight:bold;
}
button:hover {background-color:#ddd;}
#progress {
margin-top:20px;
font-size:18px;
}
.slide h1,h2,li {
opacity:0;
transform:translateX(200px) scale(0.6);
}
.slide-title {
transform:translateY(-100px) scale(0.5);
opacity:0;
text-shadow: 0 0 0px #fff;
}
ul {
text-align:left;
display:inline-block;
font-size:22px;
margin:0 auto;
padding-left:20px;
}
li:hover {
transform:scale(1.3);
color:#ffd700;
text-shadow:0 0 20px #fff;
transition: all 0.3s ease;
}
.sparkle {
position:absolute;
width:5px;
height:5px;
background:yellow;
border-radius:50%;
opacity:0.8;
pointer-events:none;
animation: sparkleAnim 1s linear forwards;
}
@keyframes sparkleAnim {
0%{transform:translate(0,0) scale(1);opacity:1;}
100%{transform:translate(var(--dx),var(--dy)) scale(0);opacity:0;}
}
.unsitbar{
display: none;
text-align:center;
margin-top:10px;
font-size:20px;
}
</style>
</head>
<body>
<div id="app">
<div id="slide-container"></div>
<div>
<button id="prev" class="unsitbar">Back</button>
<button id="next" class="unsitbar">Next</button>
<div style="text-align:center;">
<button onclick="prevSlide()">Back</button>
<button onclick="nextSlide()">Next</button>
</div>
<div id="progress" class="unsitbar"></div>
<div id="progress"></div>
</div>
<script>
// --- Slides ---
const slidesData = [
{type:"title", content:"Cro"},
{type:"title", content:"Cro", images:[
"img1.jpg"
]},
{type:"list", title:"My Job", items:[
"I will work as a programmer!",
"I will love my job so much!",
"I will love my job!",
"I will earn good money!"
], images:[
"img1.jpg","img2.jpg","img3.jpg","img4.jpg","img5.jpg"
]},
{type:"list", title:"My Home", items:[
"I will live in a modern house.",
"Maybe I will live in a small city.",
"My home will be very comfortable.",
"I will have my own gaming room."
"Maybe in a small city.",
"Very comfortable."
], images:[
"img1.jpg","img2.jpg","img3.jpg","img4.jpg","img5.jpg"
]},
{type:"list", title:"My Family", items:[
"Family will be very important to me.",
"I will have my own family.!",
"Family is important.",
"I will be married.",
"I will have children."
]},
{type:"list", title:"My Free Time", items:[
"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:[
"My favourite food is kebap.",
"My favourite drink is Fanta Exotic."
]},
{type:"list", title:"The End", items:[
"Thank you for listening.",
"Do you have a Question?"
], images:[
"img1.jpg","img2.jpg","img3.jpg","img4.jpg","img5.jpg"
]}
];
// --- Variables ---
let currentSlide=0;
const container=document.getElementById('slide-container');
const progress=document.getElementById('progress');
const app=document.getElementById('app');
const bgColors=[
"#4e54c8,#8f94fb",
"#ff512f,#f09819",
"#00c6ff,#0072ff",
"#43e97b,#38f9d7",
"#ffafbd,#ffc3a0",
"#667eea,#764ba2",
"#667eea,#764ba2"
];
// --- Background animation ---
function animateBackground(){
const c=bgColors[currentSlide%bgColors.length];
document.body.style.transition="background 1s ease";
document.body.style.background=`linear-gradient(to right,${c})`;
}
// --- Sparkles ---
function createSparkle(x,y){
const s=document.createElement('div');
s.classList.add('sparkle');
s.style.left=x+'px';
s.style.top=y+'px';
s.style.setProperty('--dx',(Math.random()*200-100)+'px');
s.style.setProperty('--dy',(Math.random()*200-100)+'px');
document.body.appendChild(s);
setTimeout(()=>s.remove(),1000);
}
// --- Animate title ---
function animateTitle(el){
el.style.opacity=0;
el.style.transform="translateY(-100px) scale(0.5)";
setTimeout(()=>{
el.style.transition="all 0.8s cubic-bezier(.68,-0.55,.27,1.55)";
el.style.opacity=1;
el.style.transform="translateY(0) scale(1)";
for(let i=0;i<15;i++){
createSparkle(Math.random()*window.innerWidth, Math.random()*window.innerHeight/2);
}
},200);
}
// --- Animate items ---
function animateItems(){
const elems=container.querySelectorAll('li');
elems.forEach((el,i)=>{
el.style.opacity=0;
const dir=Math.random()>0.5?200:-200;
el.style.transform=`translateX(${dir}px) scale(0.7)`;
setTimeout(()=>{
el.style.transition="all 0.6s cubic-bezier(.68,-0.55,.27,1.55)";
el.style.opacity=1;
el.style.transform="translateX(0) scale(1)";
for(let j=0;j<5;j++){
createSparkle(el.getBoundingClientRect().left + Math.random()*50, el.getBoundingClientRect().top + Math.random()*20);
}
}, i*300+400);
});
}
// --- Render slide ---
// --- RENDER ---
function renderSlide(index){
container.innerHTML="";
const slide=slidesData[index];
const div=document.createElement('div');
div.classList.add('slide','active');
div.classList.add('slide-layout');
// TEXT
const textDiv=document.createElement('div');
textDiv.classList.add('text-content');
if(slide.type==="title"){
const h1=document.createElement('h1');
h1.textContent=slide.content;
h1.classList.add('slide-title');
div.appendChild(h1);
container.appendChild(div);
animateTitle(h1);
} else if(slide.type==="list"){
textDiv.appendChild(h1);
}
if(slide.type==="list"){
const h2=document.createElement('h2');
h2.textContent=slide.title;
div.appendChild(h2);
textDiv.appendChild(h2);
const ul=document.createElement('ul');
slide.items.forEach(item=>{
const li=document.createElement('li');
li.textContent=item;
ul.appendChild(li);
});
div.appendChild(ul);
container.appendChild(div);
animateTitle(h2);
animateItems();
textDiv.appendChild(ul);
}
// BILDER
const imgDiv=document.createElement('div');
imgDiv.classList.add('image-container');
if(index===0){
imgDiv.classList.add('big-image');
}
if(slide.images){
slide.images.forEach((src,i)=>{
const img=document.createElement('img');
img.src=src;
imgDiv.appendChild(img);
// 🔥 FIXED ANIMATION
setTimeout(()=>{
requestAnimationFrame(()=>{
img.style.opacity=1;
img.style.transform="scale(1) translateY(0)";
});
}, i*180);
});
}
div.appendChild(textDiv);
div.appendChild(imgDiv);
container.appendChild(div);
progress.textContent=`Slide ${index+1} / ${slidesData.length}`;
animateBackground();
}
// --- Buttons ---
document.getElementById('next').addEventListener('click',()=>{
if(currentSlide<slidesData.length-1) currentSlide++;
renderSlide(currentSlide);
});
document.getElementById('prev').addEventListener('click',()=>{
if(currentSlide>0) currentSlide--;
renderSlide(currentSlide);
});
// --- NAVIGATION ---
function nextSlide(){
if(currentSlide<slidesData.length-1){
currentSlide++;
renderSlide(currentSlide);
}
}
// --- Arrow keys ---
function prevSlide(){
if(currentSlide>0){
currentSlide--;
renderSlide(currentSlide);
}
}
// KEYBOARD
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);}
if(e.key==="ArrowRight") nextSlide();
if(e.key==="ArrowLeft") prevSlide();
});
// --- Touch swipe ---
let touchStartX=0;
document.addEventListener('touchstart', e=>{touchStartX=e.changedTouches[0].screenX;});
document.addEventListener('touchend', e=>{
const touchEndX=e.changedTouches[0].screenX;
if(touchEndX<touchStartX-50 && currentSlide<slidesData.length-1){currentSlide++; renderSlide(currentSlide);}
else if(touchEndX>touchStartX+50 && currentSlide>0){currentSlide--; renderSlide(currentSlide);}
});
// --- Initial render ---
// START
renderSlide(currentSlide);
</script>
</body>
</html>
</html>