Hugging Face's logo

Spaces:
public-soiz1
/
about-blank
Running

App Files Community
about-blank
File size: 6,787 Bytes 
c3087e1
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
6ff9e57
c3087e1
 
 
 
 
6ff9e57
c3087e1
3c29abf
75d1d9b
c3087e1
 
 
 
520c1d4
c3087e1
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
6ff9e57
c3087e1
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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
 
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML Viewer</title>
    <style>
        .hidden {
            display: none;
        }
    </style>
</head>
<body>
    <h1>HTML Viewer</h1>
    <label for="modeSelect">ใƒขใƒผใƒ‰ใ‚’้ธๆŠž๏ผš</label>
    <select id="modeSelect">
        <option value="html">HTML่กจ็คบใƒขใƒผใƒ‰</option>
        <option value="url">URLใฎiframe่กจ็คบใƒขใƒผใƒ‰</option>
    </select>
    <br>
    <label for="displayTarget">่กจ็คบๅ…ˆใ‚’้ธๆŠž๏ผš</label>
    <select id="displayTarget">
        <option value="blob">blobURL</option>
        <option value="blank">about:blank</option>
    </select>

    <div id="htmlMode">
        <textarea id="htmlInput" placeholder="ใ“ใ“ใซHTMLใ‚’ๅ…ฅๅŠ›ใ—ใฆใใ ใ•ใ„" rows="10" cols="50"><!DOCTYPE html><html lang="ja"><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title> </title><style>html,body{margin:0;padding:0;overflow:hidden;width:100vw;height:100vh}</style><iframe src="https://gooberdash.winterpixel.io/" style="width:100vw;height:100vh;border:none;display:block;margin:0;padding:0"></iframe></textarea><br>
    </div>

    <div id="urlMode" class="hidden">
        <input id="urlInput" type="text" placeholder="่กจ็คบใ™ใ‚‹URLใ‚’ๅ…ฅๅŠ›ใ—ใฆใใ ใ•ใ„" list="urlOptions" size="50">
        <datalist id="urlOptions">
            <option value="https://gooberdash.winterpixel.io/">
            <option value="https://inv.nadeko.net/">
            <option value="https://gpt-free-api-alu.hf.space/jp/">
            <option value="https://gpt-free-api-interstellar.hf.space/">
        </datalist>
    </div>

    <button id="displayButton">่กจ็คบ</button>
    <button onclick="location.replace('index.html');">close</button>
    <button id="clearButton">ใ‚ฏใƒชใ‚ข</button>
    <p id="errorMessage" style="color: red;"></p>

    <script>
        const modeSelect = document.getElementById('modeSelect');
        const displayTarget = document.getElementById('displayTarget');
        const htmlMode = document.getElementById('htmlMode');
        const urlMode = document.getElementById('urlMode');
        const displayButton = document.getElementById('displayButton');
        const clearButton = document.getElementById('clearButton');
        const errorMessage = document.getElementById('errorMessage');

        modeSelect.addEventListener('change', () => {
            if (modeSelect.value === 'html') {
                htmlMode.classList.remove('hidden');
                urlMode.classList.add('hidden');
            } else if (modeSelect.value === 'url') {
                htmlMode.classList.add('hidden');
                urlMode.classList.remove('hidden');
            }
        });

        displayButton.addEventListener('click', () => {
            errorMessage.textContent = '';
            const target = displayTarget.value;

            if (modeSelect.value === 'html') {
                const htmlContent = document.getElementById('htmlInput').value;

                if (!htmlContent.trim()) {
                    errorMessage.textContent = 'HTMLใ‚’ๅ…ฅๅŠ›ใ—ใฆใใ ใ•ใ„ใ€‚';
                    return;
                }

                try {
                    if (target === 'blob') {
                        const blob = new Blob([htmlContent], { type: 'text/html' });
                        const url = URL.createObjectURL(blob);
                        const newWindow = window.open(url);
                        if (!newWindow) {
                            errorMessage.textContent = 'ๆ–ฐใ—ใ„ใ‚ฟใƒ–ใ‚’้–‹ใ‘ใพใ›ใ‚“ใงใ—ใŸใ€‚ใƒใƒƒใƒ—ใ‚ขใƒƒใƒ—ใŒใƒ–ใƒญใƒƒใ‚ฏใ•ใ‚Œใฆใ„ใ‚‹ๅฏ่ƒฝๆ€งใŒใ‚ใ‚Šใพใ™ใ€‚';
                        }
                    } else if (target === 'blank') {
                        const newWindow = window.open('about:blank');
                        if (newWindow) {
                            newWindow.document.write(htmlContent);
                            newWindow.document.close();
                        } else {
                            errorMessage.textContent = 'ๆ–ฐใ—ใ„ใ‚ฟใƒ–ใ‚’้–‹ใ‘ใพใ›ใ‚“ใงใ—ใŸใ€‚ใƒใƒƒใƒ—ใ‚ขใƒƒใƒ—ใŒใƒ–ใƒญใƒƒใ‚ฏใ•ใ‚Œใฆใ„ใ‚‹ๅฏ่ƒฝๆ€งใŒใ‚ใ‚Šใพใ™ใ€‚';
                        }
                    }
                } catch (e) {
                    errorMessage.textContent = 'ใ‚จใƒฉใƒผใŒ็™บ็”Ÿใ—ใพใ—ใŸ: ' + e.message;
                }
            } else if (modeSelect.value === 'url') {
                const url = document.getElementById('urlInput').value;

                if (!url.trim()) {
                    errorMessage.textContent = 'URLใ‚’ๅ…ฅๅŠ›ใ—ใฆใใ ใ•ใ„ใ€‚';
                    return;
                }

                try {
                    const iframeHtml = `<!DOCTYPE html><html lang="ja"><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title> </title><style>html,body{margin:0;padding:0;overflow:hidden;width:100vw;height:100vh}</style><iframe src="${url}" style="width:100vw;height:100vh;border:none;display:block;margin:0;padding:0"></iframe></html>`;
                    if (target === 'blob') {
                        const blob = new Blob([iframeHtml], { type: 'text/html' });
                        const blobUrl = URL.createObjectURL(blob);
                        const newWindow = window.open(blobUrl);
                        if (!newWindow) {
                            errorMessage.textContent = 'ๆ–ฐใ—ใ„ใ‚ฟใƒ–ใ‚’้–‹ใ‘ใพใ›ใ‚“ใงใ—ใŸใ€‚ใƒใƒƒใƒ—ใ‚ขใƒƒใƒ—ใŒใƒ–ใƒญใƒƒใ‚ฏใ•ใ‚Œใฆใ„ใ‚‹ๅฏ่ƒฝๆ€งใŒใ‚ใ‚Šใพใ™ใ€‚';
                        }
                    } else if (target === 'blank') {
                        const newWindow = window.open('about:blank');
                        if (newWindow) {
                            newWindow.document.write(iframeHtml);
                            newWindow.document.close();
                        } else {
                            errorMessage.textContent = 'ๆ–ฐใ—ใ„ใ‚ฟใƒ–ใ‚’้–‹ใ‘ใพใ›ใ‚“ใงใ—ใŸใ€‚ใƒใƒƒใƒ—ใ‚ขใƒƒใƒ—ใŒใƒ–ใƒญใƒƒใ‚ฏใ•ใ‚Œใฆใ„ใ‚‹ๅฏ่ƒฝๆ€งใŒใ‚ใ‚Šใพใ™ใ€‚';
                        }
                    }
                } catch (e) {
                    errorMessage.textContent = 'ใ‚จใƒฉใƒผใŒ็™บ็”Ÿใ—ใพใ—ใŸ: ' + e.message;
                }
            }
        });

        clearButton.addEventListener('click', () => {
            if (modeSelect.value === 'html') {
                document.getElementById('htmlInput').value = '';
            } else if (modeSelect.value === 'url') {
                document.getElementById('urlInput').value = '';
            }
            errorMessage.textContent = '';
        });
    </script>
</body>
</html>