oldfart commited on
Commit
5e2a3f3
1 Parent(s): e5a9508

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +32 -186
index.html CHANGED
@@ -3,195 +3,41 @@
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>Image Format Converter</title>
7
- <style>
8
- body {
9
- font-family: 'Arial', sans-serif;
10
- max-width: 600px;
11
- margin: 20px auto;
12
- padding: 20px;
13
- background-color: #f4f4f4;
14
- border-radius: 10px;
15
- text-align: center;
16
- }
17
-
18
- h1 {
19
- color: #333;
20
- }
21
-
22
- form {
23
- background-color: #fff;
24
- padding: 20px;
25
- border-radius: 8px;
26
- box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
27
- }
28
-
29
- label, select, button, input {
30
- display: block;
31
- margin: 10px auto;
32
- }
33
-
34
- select, input {
35
- width: 80%;
36
- padding: 10px;
37
- border: 1px solid #ccc;
38
- border-radius: 4px;
39
- }
40
-
41
- input[type="checkbox"] {
42
- margin-right: 5px;
43
- }
44
-
45
- button {
46
- background-color: #4caf50;
47
- color: #fff;
48
- padding: 10px;
49
- border: none;
50
- border-radius: 4px;
51
- cursor: pointer;
52
- transition: background-color 0.3s ease;
53
- }
54
-
55
- button:hover {
56
- background-color: #45a049;
57
- }
58
-
59
- a {
60
- color: #2196F3;
61
- text-decoration: none;
62
- display: block;
63
- margin-top: 10px;
64
- }
65
-
66
- a:hover {
67
- text-decoration: underline;
68
- }
69
- </style>
70
  </head>
71
  <body>
72
- <h1>Image Format Converter</h1>
73
-
74
- <form id="imageForm">
75
- <label for="imageInput">Select an Image:</label>
76
- <input type="file" id="imageInput" accept="image/*" required onchange="detectImageProperties()">
77
-
78
- <p id="formatInfo">Detected Format: <span id="formatDisplay"></span></p>
79
- <p id="sizeInfo">Image Size: <span id="sizeDisplay"></span></p>
80
-
81
- <label for="targetFormat">Choose Target Format:</label>
82
- <select id="targetFormat" required>
83
- <option value="bmp">BMP</option>
84
- <option value="eps">EPS</option>
85
- <option value="gif">GIF</option>
86
- <option value="ico">ICO</option>
87
- <option value="jpeg">JPG</option>
88
- <option value="png">PNG</option>
89
- <option value="psd">PSD</option>
90
- <option value="svg+xml">SVG</option>
91
- <option value="tga">TGA</option>
92
- <option value="tiff">TIFF</option>
93
- <option value="webp">WebP</option>
94
- </select>
95
-
96
- <label for="customWidth">Custom Width (leave empty for original):</label>
97
- <input type="text" id="customWidth">
98
-
99
- <label for="customHeight">Custom Height (leave empty for original):</label>
100
- <input type="text" id="customHeight">
101
-
102
- <input type="checkbox" id="keepAspectRatio" checked>
103
- <label for="keepAspectRatio">Keep Aspect Ratio</label>
104
-
105
- <input type="checkbox" id="compressImage">
106
- <label for="compressImage">Compress Image</label>
107
-
108
- <button type="button" onclick="convertImage()">Convert</button>
109
-
110
- <a id="downloadLink" style="display: none" download="converted_image">Download Converted Image</a>
111
- </form>
112
-
113
- <script>
114
- function detectImageProperties() {
115
- const input = document.getElementById('imageInput');
116
- const formatDisplay = document.getElementById('formatDisplay');
117
- const sizeDisplay = document.getElementById('sizeDisplay');
118
-
119
- if (input.files.length > 0) {
120
- const file = input.files[0];
121
- const img = new Image();
122
- img.src = URL.createObjectURL(file);
123
-
124
- img.onload = function () {
125
- formatDisplay.textContent = file.type;
126
- sizeDisplay.textContent = `${img.width} x ${img.height} pixels`;
127
- };
128
- }
129
- }
130
-
131
- function convertImage() {
132
- const input = document.getElementById('imageInput');
133
- const targetFormat = document.getElementById('targetFormat').value;
134
- const customWidth = document.getElementById('customWidth').value;
135
- const customHeight = document.getElementById('customHeight').value;
136
- const keepAspectRatio = document.getElementById('keepAspectRatio').checked;
137
- const compressImage = document.getElementById('compressImage').checked;
138
- const formatDisplay = document.getElementById('formatDisplay');
139
- const downloadLink = document.getElementById('downloadLink');
140
-
141
- if (input.files.length > 0) {
142
- const file = input.files[0];
143
-
144
- // Display detected format
145
- formatDisplay.textContent = file.type;
146
-
147
- // Check if the target format is supported
148
- const supportedFormats = ['bmp', 'eps', 'gif', 'ico', 'jpeg', 'png', 'psd', 'svg+xml', 'tga', 'tiff', 'webp'];
149
-
150
- if (!supportedFormats.includes(targetFormat)) {
151
- alert('Unsupported target format. Please choose a supported format.');
152
- return;
153
- }
154
-
155
- // Convert and create a download link
156
- const img = new Image();
157
- img.src = URL.createObjectURL(file);
158
-
159
- img.onload = function () {
160
- const canvas = document.createElement('canvas');
161
- const ctx = canvas.getContext('2d');
162
-
163
- // Apply custom dimensions
164
- let newWidth, newHeight;
165
-
166
- if (customWidth && customHeight) {
167
- newWidth = parseInt(customWidth, 10);
168
- newHeight = parseInt(customHeight, 10);
169
-
170
- if (keepAspectRatio) {
171
- // Calculate new height to maintain aspect ratio
172
- newHeight = (img.height * newWidth) / img.width;
173
- }
174
- } else {
175
- // If custom dimensions are not provided, use original dimensions
176
- newWidth = img.width;
177
- newHeight = img.height;
178
- }
179
-
180
- canvas.width = newWidth;
181
- canvas.height = newHeight;
182
 
183
- // Draw the image on the canvas
184
- ctx.drawImage(img, 0, 0, newWidth, newHeight);
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
185
 
186
- // Convert and create a download link
187
- canvas.toBlob(function (blob) {
188
- const url = URL.createObjectURL(blob);
189
- downloadLink.href = url;
190
- downloadLink.style.display = 'block';
191
- }, `image/${targetFormat}`, compressImage ? 0.85 : 1.0); // Explicitly set the MIME type
192
- };
193
- }
194
- }
195
- </script>
196
  </body>
197
  </html>
 
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Modify Iframe Content</title>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
7
  </head>
8
  <body>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
9
 
10
+ <iframe
11
+ id="myIframe"
12
+ src="https://oldfart-pixl.hf.space"
13
+ frameborder="0"
14
+ width="850"
15
+ height="450"
16
+ onload="removeTextFromIframe();"
17
+ ></iframe>
18
+
19
+ <script>
20
+ function removeTextFromIframe() {
21
+ // Get the iframe element
22
+ var iframe = document.getElementById('myIframe');
23
+
24
+ // Check if the content inside the iframe is from the same origin
25
+ if (iframe.contentDocument) {
26
+ // Access the document inside the iframe
27
+ var iframeDoc = iframe.contentDocument || iframe.contentWindow.document;
28
+
29
+ // Modify the content as needed
30
+ var textToRemove = "nerijs/pixel-art-xl";
31
+ var iframeContent = iframeDoc.body.innerHTML;
32
+ var modifiedContent = iframeContent.replace(new RegExp(textToRemove, 'g'), '');
33
+
34
+ // Update the content inside the iframe
35
+ iframeDoc.body.innerHTML = modifiedContent;
36
+ } else {
37
+ console.error('Cannot access content inside the iframe due to cross-origin restrictions.');
38
+ }
39
+ }
40
+ </script>
41
 
 
 
 
 
 
 
 
 
 
 
42
  </body>
43
  </html>