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"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>My Life in Twenty Years - Ultimate Insane</title> <title>My Life in Twenty Years</title>
<style> <style>
body { body {
margin:0; margin:0;
@@ -13,14 +14,64 @@ body {
justify-content:center; justify-content:center;
align-items:center; align-items:center;
height:100vh; height:100vh;
overflow:hidden;
} }
#app { #app {
max-width:900px; width:100%;
width:90%; max-width:1200px;
text-align:center;
position:relative;
} }
/* 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 { button {
padding:10px 20px; padding:10px 20px;
font-size:18px; font-size:18px;
@@ -28,232 +79,163 @@ button {
border:none; border:none;
border-radius:8px; border-radius:8px;
cursor:pointer; cursor:pointer;
background-color:#fff;
color:#4e54c8;
font-weight:bold;
} }
button:hover {background-color:#ddd;}
#progress { #progress {
margin-top:20px; text-align:center;
font-size:18px; margin-top:10px;
} font-size:20px;
.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;
} }
</style> </style>
</head> </head>
<body> <body>
<div id="app"> <div id="app">
<div id="slide-container"></div> <div id="slide-container"></div>
<div>
<div style="text-align:center;">
<button id="prev" class="unsitbar">Back</button> <button onclick="prevSlide()">Back</button>
<button id="next" class="unsitbar">Next</button> <button onclick="nextSlide()">Next</button>
</div> </div>
<div id="progress" class="unsitbar"></div>
<div id="progress"></div>
</div> </div>
<script> <script>
// --- Slides --- // --- Slides ---
const slidesData = [ const slidesData = [
{type:"title", content:"Cro"},
{type:"title", content:"Cro", images:[
"img1.jpg"
]},
{type:"list", title:"My Job", items:[ {type:"list", title:"My Job", items:[
"I will work as a programmer!", "I will work as a programmer!",
"I will love my job so much!", "I will love my job!",
"I will earn good money!" "I will earn good money!"
], images:[
"img1.jpg","img2.jpg","img3.jpg","img4.jpg","img5.jpg"
]}, ]},
{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 small city.", "Maybe in a small city.",
"My home will be very comfortable.", "Very comfortable."
"I will have my own gaming room." ], images:[
"img1.jpg","img2.jpg","img3.jpg","img4.jpg","img5.jpg"
]}, ]},
{type:"list", title:"My Family", items:[ {type:"list", title:"My Family", items:[
"Family will be very important to me.", "Family is important.",
"I will have my own family.!",
"I will be married.", "I will be married.",
"I will have children." "I will have children."
]}, ], images:[
{type:"list", title:"My Free Time", items:[ "img1.jpg","img2.jpg","img3.jpg","img4.jpg","img5.jpg"
"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?"
]} ]}
]; ];
// --- Variables ---
let currentSlide=0; let currentSlide=0;
const container=document.getElementById('slide-container'); const container=document.getElementById('slide-container');
const progress=document.getElementById('progress'); 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 --- // --- RENDER ---
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 ---
function renderSlide(index){ function renderSlide(index){
container.innerHTML=""; container.innerHTML="";
const slide=slidesData[index]; const slide=slidesData[index];
const div=document.createElement('div'); 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"){ if(slide.type==="title"){
const h1=document.createElement('h1'); const h1=document.createElement('h1');
h1.textContent=slide.content; h1.textContent=slide.content;
h1.classList.add('slide-title'); textDiv.appendChild(h1);
div.appendChild(h1); }
container.appendChild(div);
animateTitle(h1); if(slide.type==="list"){
} else if(slide.type==="list"){
const h2=document.createElement('h2'); const h2=document.createElement('h2');
h2.textContent=slide.title; h2.textContent=slide.title;
div.appendChild(h2); textDiv.appendChild(h2);
const ul=document.createElement('ul'); const ul=document.createElement('ul');
slide.items.forEach(item=>{ slide.items.forEach(item=>{
const li=document.createElement('li'); const li=document.createElement('li');
li.textContent=item; li.textContent=item;
ul.appendChild(li); ul.appendChild(li);
}); });
div.appendChild(ul);
container.appendChild(div); textDiv.appendChild(ul);
animateTitle(h2);
animateItems();
} }
// 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}`; progress.textContent=`Slide ${index+1} / ${slidesData.length}`;
animateBackground();
} }
// --- Buttons --- // --- NAVIGATION ---
document.getElementById('next').addEventListener('click',()=>{ function nextSlide(){
if(currentSlide<slidesData.length-1) currentSlide++; if(currentSlide<slidesData.length-1){
renderSlide(currentSlide); currentSlide++;
}); renderSlide(currentSlide);
document.getElementById('prev').addEventListener('click',()=>{ }
if(currentSlide>0) currentSlide--; }
renderSlide(currentSlide);
});
// --- Arrow keys --- function prevSlide(){
if(currentSlide>0){
currentSlide--;
renderSlide(currentSlide);
}
}
// KEYBOARD
document.addEventListener('keydown', e=>{ document.addEventListener('keydown', e=>{
if(e.key==="ArrowUp" && currentSlide<slidesData.length-1){currentSlide++; renderSlide(currentSlide);} if(e.key==="ArrowRight") nextSlide();
else if(e.key==="ArrowDown" && currentSlide>0){currentSlide--; renderSlide(currentSlide);} if(e.key==="ArrowLeft") prevSlide();
});
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);}
}); });
// --- Touch swipe --- // START
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 ---
renderSlide(currentSlide); renderSlide(currentSlide);
</script> </script>
</body> </body>
</html> </html>