WebArea/index.html at main · HasselAssel/WebArea · 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
<!DOCTYPE html>
<html>
    <head>
        <script>
            const CACHE = "file-cache";
            const SW_URL = "sw.js";
            function loadScript(src) {
                return new Promise((resolve, reject) => {
                    const s = document.createElement("script");
                    s.src = src;
                    s.onload = resolve;
                    s.onerror = reject;
                    document.head.appendChild(s);
                });
            }
            (async () => {
                await caches.delete(CACHE);

                if (!navigator.serviceWorker.controller){
                    await navigator.serviceWorker.register(SW_URL);
                    await navigator.serviceWorker.ready;
                }

                await Promise.all([
                    loadScript("constants.js"),
                    loadScript("compress.js"),
                    loadScript("bundle_files.js"),
                    loadScript("upload_files.js"),
                    loadScript("files.js")
                ]);
                await loadScript("app.js");
            })();
        </script>

        <title>WebArea</title>
        <link rel="stylesheet" href="style.css">
        <link rel="icon" type="image/svg+xml" href='data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><rect x="13.8" y="8.6" width="36.4" height="46.8" rx="5.2" fill="none" stroke="%239fd3ff" stroke-width="5"/><line x1="20" y1="21.6" x2="44" y2="21.6" stroke="%239fd3ff" stroke-width="5"/><line x1="20" y1="32" x2="37" y2="32" stroke="%239fd3ff" stroke-width="5.2"/></svg>'>
    </head>
    <body>
        <input type="file" id="fileInput" multiple />

        <span id="status">Upload your files</span>
        <div class="button-row">
            <button class="main-btn" onclick="copyMainLink()">Copy Link</button>
            <button class="file-btn" onclick="copyFileOnlyLink()">
                Copy File-Link
                <span class="tooltip">Copies a link to only access the files</span>
            </button>
            <script>
                async function copyMainLink() {
                    const el = document.getElementById("link");
                    await copyToClipBoard(el.textContent);
                }

                async function copyFileOnlyLink() {
                    const el = document.getElementById("link");
                    const url = new URL(el.textContent);
                    const whatWillItBe = Math.random() < 0.5 ? "f" : "d";
                    url.searchParams.set(whatWillItBe, "");
                    await navigator.clipboard.writeText(url.href);
                }

                async function copyToClipBoard(content) {
                    await navigator.clipboard.writeText(content);
                }
            </script>
        </div>
        <span id="link">Here should be the domain idk why not!?!?!, should still work hopefully tho!</span>

        <button id="infoBtn" class="info-btn">Info</button>
        <div id="infoOverlay" class="overlay hidden">
            <div class="info-window">
                <button id="closeInfo" class="close-btn">x</button>
                <h2>Information</h2>
                <p>
                    WebArea lets you turn a website into a link.
                    The whole website exists within the URL.
                    Since there is limited space in the URL, try to avoid uploading images or large files and use links for resources in your code.
                </p>
                <p>
                    Upload everything necessary for your website, copy the link, and then open or share it.
                    Note that your project should not use absolute paths or nested paths (folders). As you can see, this website uses the "/WebArea/" subpath, and an absolute path would overwrite it. These issues might be fixed in the future. For more information, check out the GitHub.
                </p>
                <p>
                    The default file loaded is "index.html."
                    If this file doesn't exist, or if one of the query parameters "?f" or "?d" is added to the URL, the files will just be listed for download and not rendered. This link can be copied from the button on the right.
                </p>
                <a href="https://github.com/HasselAssel/WebArea" target="_blank" rel="noopener noreferrer">Source Code and Examples on GitHub</a>
            </div>
            <script>
                const overlay = document.getElementById("infoOverlay");
                document.getElementById("infoBtn").onclick = () => {
                    overlay.classList.remove("hidden");
                };
                document.getElementById("closeInfo").onclick = () => {
                    overlay.classList.add("hidden");
                };
                document.addEventListener("keydown", (e) => {
                    if (e.key === "Escape") {
                        overlay.classList.add("hidden");
                    }
                });
                const infoWindow = document.querySelector(".info-window");
                overlay.addEventListener("click", (e) => {
                    if (!infoWindow.contains(e.target)) {
                        overlay.classList.add("hidden");
                    }
                });
            </script>
        </div>
    </body>
</html>