260 lines
6.8 KiB
HTML
260 lines
6.8 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>My Life in Twenty Years - Ultimate Insane</title>
|
|
<style>
|
|
body {
|
|
margin:0;
|
|
font-family:Arial,sans-serif;
|
|
background:linear-gradient(to right,#4e54c8,#8f94fb);
|
|
color:white;
|
|
display:flex;
|
|
justify-content:center;
|
|
align-items:center;
|
|
height:100vh;
|
|
overflow:hidden;
|
|
}
|
|
#app {
|
|
max-width:900px;
|
|
width:90%;
|
|
text-align:center;
|
|
position:relative;
|
|
}
|
|
button {
|
|
padding:10px 20px;
|
|
font-size:18px;
|
|
margin:10px;
|
|
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;
|
|
}
|
|
</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>
|
|
<div id="progress" class="unsitbar"></div>
|
|
</div>
|
|
|
|
<script>
|
|
// --- Slides ---
|
|
const slidesData = [
|
|
{type:"title", content:"Cro"},
|
|
{type:"list", title:"My Job", items:[
|
|
"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 small city.",
|
|
"My home will be very comfortable.",
|
|
"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."
|
|
]},
|
|
{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?"
|
|
]}
|
|
];
|
|
|
|
// --- 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 ---
|
|
function renderSlide(index){
|
|
container.innerHTML="";
|
|
const slide=slidesData[index];
|
|
const div=document.createElement('div');
|
|
div.classList.add('slide','active');
|
|
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"){
|
|
const h2=document.createElement('h2');
|
|
h2.textContent=slide.title;
|
|
div.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();
|
|
}
|
|
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);
|
|
});
|
|
|
|
// --- 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);}
|
|
});
|
|
|
|
// --- 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 ---
|
|
renderSlide(currentSlide);
|
|
</script>
|
|
</body>
|
|
</html>
|