Update index.html

2025-11-23 21:57:34 +00:00
parent 6771c9221e
commit f9bb71393f
1 changed files with 187 additions and 0 deletions
--- a/index.html
+++ b/index.html
@@ -0,0 +1,187 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8" />
+<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+<title>Minecraft ClickGUI Concept</title>
+<style>
+  body {
+    margin: 0;
+    padding: 0;
+    background: #000 url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200"><rect width="200" height="200" fill="black"/><path d="M0 0 L200 200 M200 0 L0 200" stroke="%23111111" stroke-width="6"/></svg>') repeat;
+    height: 100vh;
+    font-family: Arial, sans-serif;
+    color: white;
+    user-select: none;
+  }
+
+  .panel {
+    position: absolute;
+    border: 1px solid red;
+    background: rgba(60, 0, 0, 0.35);
+    backdrop-filter: blur(7px);
+    border-radius: 0;
+    width: 250px;
+    z-index: 1;
+  }
+
+  .title-box {
+    position: absolute;
+    top: -21px;
+    left: -1px;
+    padding: 2px 5px;
+    background: red;
+    color: white;
+    font-size: 14px;
+    font-weight: bold;
+    border-radius: 0;
+    text-align: left;
+    z-index: 3;
+  }
+
+  .module {
+    position: relative;
+    padding: 6px 8px;
+    margin: 3px 0;
+    cursor: pointer;
+    font-size: 14px;
+    transition: background 0.3s ease;
+  }
+  .module.enabled {
+    background: rgba(255,0,0,0.3);
+  }
+
+  .module .tracer-start {
+    position: absolute;
+    right: 10px;
+    top: 50%;
+    width: 6px;
+    height: 6px;
+    background: red;
+    transform: translateY(-50%);
+    z-index: 3;
+  }
+
+  .tracer {
+    position: absolute;
+    height: 2px;
+    background: red;
+    transform-origin: left center;
+    z-index: 2 !important;
+  }
+</style>
+</head>
+<body>
+
+<div class="panel" id="modulesPanel" style="top:50px; left:50px; z-index:2;">
+  <div class="title-box">Modules</div>
+  <div class="module" data-module="Fly">Fly<div class="tracer-start"></div></div>
+  <div class="module" data-module="KillAura">KillAura<div class="tracer-start"></div></div>
+  <div class="module" data-module="ESP">ESP<div class="tracer-start"></div></div>
+  <div class="module" data-module="Speed">Speed<div class="tracer-start"></div></div>
+</div>
+
+<div id="windows"></div>
+<div id="tracers"></div>
+
+<script>
+function makeDraggable(el, onMove) {
+  let offsetX=0, offsetY=0;
+  el.addEventListener('mousedown', (e)=>{
+    if(e.target.classList.contains('module') || e.target.classList.contains('tracer-start')) return;
+    offsetX=e.clientX - el.offsetLeft;
+    offsetY=e.clientY - el.offsetTop;
+    const moveHandler=(ev)=>{
+      el.style.left=ev.clientX - offsetX + 'px';
+      el.style.top=ev.clientY - offsetY + 'px';
+      if(onMove) onMove();
+      Object.values(openModuleWindows).forEach(({mod,tracer})=>updateTracer(mod,tracer));
+    };
+    const upHandler=()=>{
+      document.removeEventListener('mousemove', moveHandler);
+      document.removeEventListener('mouseup', upHandler);
+    };
+    document.addEventListener('mousemove', moveHandler);
+    document.addEventListener('mouseup', upHandler);
+  });
+}
+
+document.querySelectorAll('.panel').forEach(p=>makeDraggable(p));
+
+const windows = document.getElementById('windows');
+const tracers = document.getElementById('tracers');
+const openModuleWindows = {};
+
+function updateTracer(mod,tracer){
+  const startEl = mod.querySelector('.tracer-start');
+  const modRect = startEl.getBoundingClientRect();
+  const winRect = openModuleWindows[mod.dataset.module].win.getBoundingClientRect();
+  const title = openModuleWindows[mod.dataset.module].win.querySelector('.title-box');
+  const titleRect = title.getBoundingClientRect();
+
+  const startX = modRect.left + startEl.offsetWidth/2;
+  const startY = modRect.top + startEl.offsetHeight/2;
+  const endX = titleRect.left + titleRect.width/2;
+  const endY = titleRect.top + titleRect.height/2;
+
+  const dx = endX - startX;
+  const dy = endY - startY;
+  const length = Math.sqrt(dx*dx + dy*dy);
+  const angle = Math.atan2(dy, dx) * 180 / Math.PI;
+
+  tracer.style.left = startX + 'px';
+  tracer.style.top = startY + 'px';
+  tracer.style.width = length + 'px';
+  tracer.style.height = '2px';
+  tracer.style.transform = 'rotate('+angle+'deg)';
+  tracer.style.backgroundColor='red';
+  tracer.style.zIndex='0';
+}
+
+function createModuleWindow(mod) {
+  const moduleName = mod.dataset.module;
+  if(openModuleWindows[moduleName]) return;
+
+  const newWin = document.createElement('div');
+  newWin.className = 'panel';
+  newWin.style.top='100px';
+  newWin.style.left='300px';
+  newWin.style.zIndex='3';
+
+  const title = document.createElement('div');
+  title.className='title-box';
+  title.textContent=moduleName;
+
+  const content=document.createElement('p');
+  content.textContent=moduleName+' settings...';
+
+  newWin.appendChild(title);
+  newWin.appendChild(content);
+  windows.appendChild(newWin);
+
+  const tracer = document.createElement('div');
+  tracer.className='tracer';
+  tracers.appendChild(tracer);
+
+  openModuleWindows[moduleName]={win:newWin,tracer:tracer,mod:mod};
+
+  makeDraggable(newWin, ()=>updateTracer(mod,tracer));
+  makeDraggable(document.getElementById('modulesPanel'), ()=>{
+    Object.values(openModuleWindows).forEach(({mod,tracer})=>updateTracer(mod,tracer));
+  });
+
+  updateTracer(mod,tracer);
+}
+
+document.querySelectorAll('.module').forEach(mod=>{
+  mod.onclick=(e)=>{
+    if(e.button===0) {
+      mod.classList.toggle('enabled');
+      mod.style.transition='background 0.3s ease';
+    }
+  };
+  mod.oncontextmenu=(e)=>{e.preventDefault(); createModuleWindow(mod);};
+});
+</script>
+</body>
+</html>