xFlip/Mini02.html at main · Timeness/xFlip · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>NeoBrowser</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <script src="https://unpkg.com/three@0.157.0/build/three.min.js"></script>
  <script src="https://code.iconify.design/3/3.1.0/iconify.min.js"></script>
  <style>
    html, body {
      margin: 0;
      padding: 0;
      height: 100%;
      overflow: hidden;
      font-family: 'Signika', sans-serif;
      background: black;
    }
    canvas {
      position: fixed;
      top: 0;
      left: 0;
      z-index: -1;
    }
    #browserFrame {
      width: 100%;
      height: calc(100% - 70px);
      border: none;
      display: none;
    }
    #loader {
      display: none;
    }
  </style>
</head>
<body>

  <!-- Top bar -->
  <div class="w-full p-4 bg-black/70 backdrop-blur-md flex items-center justify-between gap-2 z-10 shadow-md">
    <div class="flex items-center gap-2 w-full">
      <span class="iconify text-white text-2xl" data-icon="mdi:web"></span>
      <input
        id="urlInput"
        type="text"
        placeholder="Enter site or search..."
        class="flex-1 px-4 py-2 rounded-lg bg-white/10 text-sm text-white focus:outline-none placeholder:text-gray-400"
      />
      <button
        onclick="goToSite()"
        class="px-4 py-2 bg-yellow-400 text-black rounded-xl text-sm hover:bg-yellow-500 transition-all"
      >
        Go
      </button>
    </div>
  </div>

  <!-- Loading spinner -->
  <div id="loader" class="absolute inset-0 flex items-center justify-center z-20">
    <div class="w-12 h-12 border-4 border-yellow-400 border-dashed rounded-full animate-spin"></div>
  </div>

  <!-- iFrame -->
  <iframe id="browserFrame"></iframe>

  <!-- Scripts -->
  <script>
    const frame = document.getElementById("browserFrame");
    const loader = document.getElementById("loader");

    function goToSite() {
      let input = document.getElementById("urlInput").value.trim();
      if (!input) return;

      // Handle URL or search
      const isUrl = input.startsWith("http://") || input.startsWith("https://");
      if (!isUrl && input.includes(".")) {
        input = "https://" + input;
      } else if (!isUrl) {
        input = "https://www.google.com/search?q=" + encodeURIComponent(input);
      }

      loader.style.display = "flex";
      frame.style.display = "none";

      frame.src = input;

      frame.onload = () => {
        loader.style.display = "none";
        frame.style.display = "block";
      };

      frame.onerror = () => {
        loader.style.display = "none";
        alert("Failed to load site.");
      };
    }
  </script>

  <!-- Three.js Background -->
  <script>
    const scene = new THREE.Scene();
    const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
    const renderer = new THREE.WebGLRenderer({ alpha: true });
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild(renderer.domElement);

    const particles = [];
    const material = new THREE.PointsMaterial({ color: 0xffffaa, size: 0.5 });

    const geometry = new THREE.BufferGeometry();
    const positions = [];

    for (let i = 0; i < 800; i++) {
      positions.push((Math.random() - 0.5) * 150);
      positions.push((Math.random() - 0.5) * 150);
      positions.push((Math.random() - 0.5) * 150);
    }

    geometry.setAttribute('position', new THREE.Float32BufferAttribute(positions, 3));
    const particleSystem = new THREE.Points(geometry, material);
    scene.add(particleSystem);

    camera.position.z = 50;

    function animate() {
      requestAnimationFrame(animate);
      particleSystem.rotation.y += 0.0015;
      particleSystem.rotation.x += 0.001;
      renderer.render(scene, camera);
    }

    animate();

    window.addEventListener('resize', () => {
      camera.aspect = window.innerWidth / window.innerHeight;
      camera.updateProjectionMatrix();
      renderer.setSize(window.innerWidth, window.innerHeight);
    });
  </script>

</body>
</html>