Add initial HTML structure for presentation
This commit is contained in:
GitHub
+254
@@ -0,0 +1,254 @@
|
||||
<!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;}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app">
|
||||
<div id="slide-container"></div>
|
||||
<div>
|
||||
<button id="prev">Back</button>
|
||||
<button id="next">Next</button>
|
||||
</div>
|
||||
<div id="progress"></div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// --- Slides ---
|
||||
const slidesData = [
|
||||
{type:"title", content:"My Life in Twenty Years\nBy Janis"},
|
||||
{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!!!"
|
||||
]},
|
||||
{type:"list", title:"My Home", items:[
|
||||
"I will live in a modern house.",
|
||||
"Maybe I will live in a big city like Berlin.",
|
||||
"My home will be very comfortable.",
|
||||
"I will have my own gaming room and office."
|
||||
]},
|
||||
{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."
|
||||
]},
|
||||
{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 see the world and enjoy it."
|
||||
]},
|
||||
{type:"list", title:"My favourite food and Drinks", items;[
|
||||
"My favourite food is kebap.",
|
||||
"My favourite Drink is water with flavored powder"
|
||||
]},
|
||||
{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,#8f94fb"
|
||||
];
|
||||
|
||||
// --- 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==="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>
|
||||
Reference in New Issue
Block a user