GOATNET_BETA/index.html at main · MisterGoat/GOATNET_BETA · 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
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title>ＧＯＡＴＮＥＴ // webflasher</title>
  <link rel="icon" type="image/x-icon" href="favicon.ico">
  <style>
    :root { --neon-pink: #ff00ff; --neon-cyan: #00f3ff; }
    body {
      background: #240b36; color: var(--neon-cyan);
      font-family: 'Courier New', Courier, monospace;
      margin: 0; padding: 0; overflow: hidden;
      display: flex; justify-content: center; align-items: center; height: 100vh;
    }
    /* Animated Grid */
    .grid {
      position: absolute; width: 200%; height: 100%;
      background-image: linear-gradient(0deg, transparent 24%, rgba(0, 243, 255, 0.3) 25%, rgba(0, 243, 255, 0.3) 26%, transparent 27%, transparent 74%, rgba(0, 243, 255, 0.3) 75%, rgba(0, 243, 255, 0.3) 76%, transparent 77%, transparent), linear-gradient(90deg, transparent 24%, rgba(0, 243, 255, 0.3) 25%, rgba(0, 243, 255, 0.3) 26%, transparent 27%, transparent 74%, rgba(0, 243, 255, 0.3) 75%, rgba(0, 243, 255, 0.3) 76%, transparent 77%, transparent);
      background-size: 50px 50px; transform: perspective(500px) rotateX(45deg);
      bottom: -150px; left: -50%; animation: move 2s linear infinite; z-index: 1;
    }
    @keyframes move { from { background-position: 0 0; } to { background-position: 0 50px; } }

    .sunset {
      position: absolute; top: 15%; width: 300px; height: 300px;
      background: linear-gradient(#ff00ff, #ffcc00);
      border-radius: 50%; box-shadow: 0 0 50px #ff00ff; z-index: 2;
      display: flex; justify-content: center; align-items: center;
    }
    .sunset img {
      width: 150px; height: 150px; opacity: 0.8;
      filter: drop-shadow(0 0 10px var(--neon-cyan));
    }
    .card {
      background: rgba(20, 20, 20, 0.9); border: 2px solid var(--neon-pink);
      padding: 30px; position: relative; z-index: 10;
      box-shadow: 0 0 20px var(--neon-pink); text-align: center;
    }
    h1 { font-size: 2.5em; color: var(--neon-pink); text-shadow: 2px 2px #000; margin: 0; }

    /* Custom Vaporwave Button Style */
    esp-web-install-button {
      --esp-tools-button-color: var(--neon-pink);
      --esp-tools-button-text-color: #ffffff;
    }

    .debug-btn {
      background: var(--neon-cyan); color: #000; border: none;
      padding: 10px; cursor: pointer; font-family: inherit; font-weight: bold;
      margin-top: 10px;
    }

    .success-msg { display: none; color: #00ff00; font-weight: bold; margin-top: 15px; }
    .footer { margin-top: 20px; font-size: 0.8em; }
    a { color: var(--neon-cyan); text-decoration: none; border-bottom: 1px solid var(--neon-pink); }
  </style>
</head>
<body>
  <div class="grid"></div>
  <div class="sunset">
    <img src="favicon.ico" alt="GoatNet Logo">
  </div>

  <div class="card">
    <h1>ＧＯＡＴＮＥＴ</h1>
    <p>ＣＡＲＤＰＵＴＥＲ ＡＤＶ</p>

    <!-- Use flexbox on the container to center the button perfectly -->
    <div style="display: flex; justify-content: center; align-items: center; margin: 20px 0;">
      <esp-web-install-button manifest="manifest.json">
        <!-- The slot="activate" is CRITICAL for the button to work -->
        <button slot="activate" class="debug-btn" style="padding: 15px 30px; font-size: 1.1em;">
          ＣＯＮＮＥＣＴ ＆ ＩＮＳＴＡＬＬ
        </button>


        <button slot="show-logs" class="debug-btn">ＤＥＢＵＧ ＬＯＧＳ</button>
      </esp-web-install-button>
    </div>

    <div id="status" class="success-msg">INSTALL COMPLETE! 🐐🚀</div>

    <div class="footer">
      NEED HELP? @mrgoat ON <a href="https://counter.social" target="_blank">COUNTER.SOCIAL</a>
    </div>
  </div>

  <script
  type="module"
  src="https://unpkg.com/esp-web-tools@10/dist/web/install-button.js?module">
  crossorigin="anonymous">
  </script>
  <script>
    const btn = document.querySelector('esp-web-install-button');
    const status = document.getElementById('status');
    btn.addEventListener('install-finished', () => {
      status.style.display = 'block';
    });
  </script>
</body>

</html>