File size: 4,834 Bytes
0eb5f56 |
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 141 142 143 144 145 146 147 148 149 150 151 152 |
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Capture d'écran du navigateur</title>
<link
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css"
rel="stylesheet"
/>
<style>
.loading {
display: none;
}
.screenshot-container {
max-width: 100%;
overflow-x: auto;
}
.screenshot-image {
max-width: 100%;
}
</style>
</head>
<body class="bg-gray-100 min-h-screen">
<div class="container mx-auto px-4 py-8">
<h1 class="text-3xl font-bold text-center mb-8">
Capture d'écran du navigateur
</h1>
<div class="bg-white p-6 rounded-lg shadow-md">
<form id="screenshot-form" class="mb-4">
<div class="mb-4">
<label for="url" class="block text-gray-700 font-medium mb-2"
>URL à capturer</label
>
<input
type="url"
id="url"
name="url"
value="https://huggingface.co/spaces/HuggingFaceH4/open_llm_leaderboard"
class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
required
/>
</div>
<button
type="submit"
class="w-full bg-blue-500 hover:bg-blue-600 text-white font-medium py-2 px-4 rounded-lg"
>
Prendre une capture d'écran
</button>
</form>
<div id="loading" class="loading flex justify-center items-center py-8">
<svg
class="animate-spin -ml-1 mr-3 h-8 w-8 text-blue-500"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
>
<circle
class="opacity-25"
cx="12"
cy="12"
r="10"
stroke="currentColor"
stroke-width="4"
></circle>
<path
class="opacity-75"
fill="currentColor"
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"
></path>
</svg>
<span class="text-lg text-gray-700">Capture d'écran en cours...</span>
</div>
<div
id="error"
class="hidden bg-red-100 text-red-700 p-4 rounded-lg mt-4"
></div>
<div id="screenshot" class="hidden mt-6">
<h2 class="text-xl font-semibold mb-4">Résultat :</h2>
<div class="screenshot-container border rounded-lg p-2">
<img
id="screenshot-image"
class="screenshot-image mx-auto"
src=""
alt="Capture d'écran"
/>
</div>
</div>
</div>
</div>
<script>
document
.getElementById("screenshot-form")
.addEventListener("submit", async function (e) {
e.preventDefault();
const url = document.getElementById("url").value;
const loadingEl = document.getElementById("loading");
const errorEl = document.getElementById("error");
const screenshotEl = document.getElementById("screenshot");
const screenshotImageEl = document.getElementById("screenshot-image");
// Reset UI
errorEl.classList.add("hidden");
errorEl.textContent = "";
screenshotEl.classList.add("hidden");
loadingEl.style.display = "flex";
try {
// Create form data
const formData = new FormData();
formData.append("url", url);
// Send request
const response = await fetch("/take-screenshot", {
method: "POST",
body: formData,
});
const data = await response.json();
if (response.ok && data.success) {
// Show screenshot
screenshotImageEl.src = data.screenshot_url;
screenshotEl.classList.remove("hidden");
} else {
// Show error
errorEl.textContent =
data.error ||
"Une erreur est survenue lors de la capture d'écran.";
errorEl.classList.remove("hidden");
}
} catch (error) {
// Show error
errorEl.textContent =
"Une erreur est survenue lors de la connexion au serveur.";
errorEl.classList.remove("hidden");
console.error(error);
} finally {
// Hide loading
loadingEl.style.display = "none";
}
});
</script>
</body>
</html>
|