Spaces:
Sleeping
Sleeping
update
Browse files- templates/index.html +10 -10
templates/index.html
CHANGED
@@ -1,9 +1,9 @@
|
|
1 |
<!DOCTYPE html>
|
2 |
-
<html lang="
|
3 |
<head>
|
4 |
<meta charset="UTF-8" />
|
5 |
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
6 |
-
<title>
|
7 |
<link
|
8 |
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css"
|
9 |
rel="stylesheet"
|
@@ -24,7 +24,7 @@
|
|
24 |
<body class="bg-gray-100 min-h-screen">
|
25 |
<div class="container mx-auto px-4 py-8">
|
26 |
<h1 class="text-3xl font-bold text-center mb-8">
|
27 |
-
|
28 |
</h1>
|
29 |
|
30 |
<div class="bg-white p-6 rounded-lg shadow-md">
|
@@ -37,7 +37,7 @@
|
|
37 |
type="url"
|
38 |
id="url"
|
39 |
name="url"
|
40 |
-
value="https://
|
41 |
class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
|
42 |
required
|
43 |
/>
|
@@ -46,7 +46,7 @@
|
|
46 |
type="submit"
|
47 |
class="w-full bg-blue-500 hover:bg-blue-600 text-white font-medium py-2 px-4 rounded-lg"
|
48 |
>
|
49 |
-
|
50 |
</button>
|
51 |
</form>
|
52 |
|
@@ -71,7 +71,7 @@
|
|
71 |
d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
|
72 |
></path>
|
73 |
</svg>
|
74 |
-
<span class="text-lg text-gray-700">
|
75 |
</div>
|
76 |
|
77 |
<div
|
@@ -80,13 +80,13 @@
|
|
80 |
></div>
|
81 |
|
82 |
<div id="screenshot" class="hidden mt-6">
|
83 |
-
<h2 class="text-xl font-semibold mb-4">
|
84 |
<div class="screenshot-container border rounded-lg p-2">
|
85 |
<img
|
86 |
id="screenshot-image"
|
87 |
class="screenshot-image mx-auto"
|
88 |
src=""
|
89 |
-
alt="
|
90 |
/>
|
91 |
</div>
|
92 |
</div>
|
@@ -132,13 +132,13 @@
|
|
132 |
// Show error
|
133 |
errorEl.textContent =
|
134 |
data.error ||
|
135 |
-
"
|
136 |
errorEl.classList.remove("hidden");
|
137 |
}
|
138 |
} catch (error) {
|
139 |
// Show error
|
140 |
errorEl.textContent =
|
141 |
-
"
|
142 |
errorEl.classList.remove("hidden");
|
143 |
console.error(error);
|
144 |
} finally {
|
|
|
1 |
<!DOCTYPE html>
|
2 |
+
<html lang="en">
|
3 |
<head>
|
4 |
<meta charset="UTF-8" />
|
5 |
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
6 |
+
<title>Browser Screenshot Tool</title>
|
7 |
<link
|
8 |
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css"
|
9 |
rel="stylesheet"
|
|
|
24 |
<body class="bg-gray-100 min-h-screen">
|
25 |
<div class="container mx-auto px-4 py-8">
|
26 |
<h1 class="text-3xl font-bold text-center mb-8">
|
27 |
+
Browser Screenshot Tool
|
28 |
</h1>
|
29 |
|
30 |
<div class="bg-white p-6 rounded-lg shadow-md">
|
|
|
37 |
type="url"
|
38 |
id="url"
|
39 |
name="url"
|
40 |
+
value="https://google.com"
|
41 |
class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
|
42 |
required
|
43 |
/>
|
|
|
46 |
type="submit"
|
47 |
class="w-full bg-blue-500 hover:bg-blue-600 text-white font-medium py-2 px-4 rounded-lg"
|
48 |
>
|
49 |
+
Take Screenshot
|
50 |
</button>
|
51 |
</form>
|
52 |
|
|
|
71 |
d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
|
72 |
></path>
|
73 |
</svg>
|
74 |
+
<span class="text-lg text-gray-700">Taking screenshot...</span>
|
75 |
</div>
|
76 |
|
77 |
<div
|
|
|
80 |
></div>
|
81 |
|
82 |
<div id="screenshot" class="hidden mt-6">
|
83 |
+
<h2 class="text-xl font-semibold mb-4">Result:</h2>
|
84 |
<div class="screenshot-container border rounded-lg p-2">
|
85 |
<img
|
86 |
id="screenshot-image"
|
87 |
class="screenshot-image mx-auto"
|
88 |
src=""
|
89 |
+
alt="Screenshot"
|
90 |
/>
|
91 |
</div>
|
92 |
</div>
|
|
|
132 |
// Show error
|
133 |
errorEl.textContent =
|
134 |
data.error ||
|
135 |
+
"An error occurred while capturing the screenshot.";
|
136 |
errorEl.classList.remove("hidden");
|
137 |
}
|
138 |
} catch (error) {
|
139 |
// Show error
|
140 |
errorEl.textContent =
|
141 |
+
"An error occurred while connecting to the server.";
|
142 |
errorEl.classList.remove("hidden");
|
143 |
console.error(error);
|
144 |
} finally {
|