From 69b10a196a901493b68cc9efd156ae33d6993f53 Mon Sep 17 00:00:00 2001
From: www <janis1507@outlook.de>
Date: Tue, 14 Apr 2026 10:45:57 +0200
Subject: [PATCH] Add initial HTML structure for presentation

---
 index.html | 254 +++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 254 insertions(+)
 create mode 100644 index.html
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..ee72f89
--- /dev/null
+++ b/index.html
@@ -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>
