examples/examples/geosimcities/public/index.html at 9b2dc5b4238c3fa322a4f20d677ff850b1e51b10 · netlify/examples · 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
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>GeoCities Browser</title>
    <style>
      body,
      html {
        margin: 0;
        padding: 0;
        height: 100%;
        font-family: Arial, sans-serif;
      }
      #browser {
        display: flex;
        flex-direction: column;
        height: 100%;
      }
      #address-bar {
        padding: 10px;
        background-color: #f0f0f0;
      }
      #address-input {
        width: 100%;
        padding: 5px;
      }
      #content {
        flex-grow: 1;
        border: none;
      }
    </style>
  </head>
  <body>
    <div id="browser">
      <div id="address-bar">
        <input type="text" id="address-input" placeholder="Enter URL" />
      </div>
      <iframe
        id="content"
        src="/geocities?url=https%3A%2F%2Fmathias-biilmann.geocities.com"
      ></iframe>
    </div>

    <script>
      const addressInput = document.getElementById("address-input");
      const content = document.getElementById("content");
      const url = new URL(window.location.href).searchParams.get("url");

      addressInput.value = url
        ? decodeURIComponent(url)
        : "https://mathias-biilmann.geocities.com";
      if (url) {
        content.src = `/geocities?url=${url}`;
      }

      addressInput.addEventListener("keypress", function (e) {
        if (e.key === "Enter") {
          const url = encodeURIComponent(this.value);
          content.src = `/geocities?url=${url}`;
        }
      });

      content.addEventListener("load", function () {
        const iframeUrl = new URL(this.contentWindow.location.href);
        const originalUrl = decodeURIComponent(
          iframeUrl.searchParams.get("url")
        );

        document.title = this.contentDocument.title;
        addressInput.value = originalUrl;
        history.pushState(
          {},
          document.title,
          `/?url=${encodeURIComponent(originalUrl)}`
        );
      });
    </script>
  </body>
</html>