maxime/Ansible-x-Terraform
Template
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

1.0

Browse Source
This commit is contained in:
maxime
2026-04-05 20:57:18 +02:00
parent 778cc6f005
commit 2ea8032285
3 changed files with 3 additions and 73 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
ansible/modules/web/html/assets/IMG_1916(1).JPG
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 170 KiB

BIN
ansible/modules/web/html/assets/images.jpeg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 5.7 KiB

76
ansible/modules/web/html/index.html
View File

@@ -1,81 +1,11 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="fr"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Comparaison - Bébé Guépard</title> <title>Document</title>
<style>
* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: sans-serif; background: #f5f4f0; min-height: 100vh; display: flex; align-items: center; justify-content: center; }
.container { padding: 2rem 1rem; max-width: 800px; width: 100%; }
h1 { font-size: 24px; font-weight: 500; text-align: center; margin-bottom: 0.4rem; color: #111; }
.subtitle { font-size: 14px; color: #888; text-align: center; margin-bottom: 2rem; }
.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.card { background: #fff; border: 1px solid #e0ddd5; border-radius: 12px; overflow: hidden; }
.img-zone { width: 100%; aspect-ratio: 1/1; background: #f0ede6; display: flex; flex-direction: column; align-items: center; justify-content: center; cursor: pointer; position: relative; overflow: hidden; }
.img-zone img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; display: none; }
.placeholder { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.placeholder svg { opacity: 0.3; }
.placeholder span { font-size: 13px; color: #999; }
.card-label { padding: 12px 16px; border-top: 1px solid #e0ddd5; font-size: 14px; font-weight: 500; color: #333; text-align: center; }
input[type=file] { display: none; }
@media (max-width: 500px) { .grid { grid-template-columns: 1fr; } }
</style>
</head> </head>
<body> <body>
<div class="container"> La copy via ansible s'est bien passée
<h1>Tie un bebe guépard Bébé</h1>
<!--<p class="subtitle">Clique sur une zone pour uploader ta photo</p>-->
<div class="grid">
<div class="card">
<div class="img-zone" onclick="document.getElementById('input1').click()">
<div class="placeholder" id="ph1">
<svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="#aaa" stroke-width="1.5">
<circle cx="12" cy="8" r="3"/><path d="M3 21c0-4 4-7 9-7s9 3 9 7"/>
</svg>
<span>Bébé guépard</span>
</div>
<img id="img1" src="assets/images.jpeg" style="display: block;">
</div>
<div class="card-label">Bébé guépard</div>
</div>
<div class="card">
<div class="img-zone" onclick="document.getElementById('input2').click()">
<div class="placeholder" id="ph2">
<svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="#aaa" stroke-width="1.5">
<circle cx="12" cy="8" r="3"/><path d="M3 21c0-4 4-7 9-7s9 3 9 7"/>
</svg>
<span>Toi</span>
</div>
<img id="img2" src="assets/IMG_1916(1).JPG" style="display: block;">
</div>
<div class="card-label">Toi</div>
</div>
</div>
<input type="file" id="input1" accept="image/*">
<input type="file" id="input2" accept="image/*">
</div>
<script>
function setup(inputId, imgId, phId) {
document.getElementById(inputId).addEventListener('change', function(e) {
const file = e.target.files[0];
if (!file) return;
const reader = new FileReader();
reader.onload = function(ev) {
const img = document.getElementById(imgId);
img.src = ev.target.result;
img.style.display = 'block';
document.getElementById(phId).style.display = 'none';
};
reader.readAsDataURL(file);
});
}
setup('input1', 'img1', 'ph1');
setup('input2', 'img2', 'ph2');
</script>
</body> </body>
</html> </html>