add: a few things
This commit is contained in:
parent
7af144d03c
commit
bd057ba427
4 changed files with 115 additions and 1 deletions
65
index.html
65
index.html
|
|
@ -5,10 +5,15 @@
|
|||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Timer de Course</title>
|
||||
<script src="tailwind_3.4.16"></script>
|
||||
<link rel="stylesheet" href="styles.css"> <!-- Import the external CSS file -->
|
||||
</head>
|
||||
<body class="bg-gray-100 flex flex-col items-center p-6">
|
||||
<div class="header-container">
|
||||
<h1 class="header-title">APPN Timer</h1>
|
||||
<p class="header-subtitle">Gérez vos courses facilement pour le cours d'APPN</p>
|
||||
</div>
|
||||
<div class="bg-white shadow-lg p-6 rounded-lg w-full sm:w-1/2 md:w-1/3 lg:w-1/4">
|
||||
<h1 class="text-xl font-bold mb-4 text-center">APPN Timer</h1>
|
||||
<h1 class="text-xl font-bold mb-4 text-center">Ajouter un joueur</h1>
|
||||
<div class="flex space-x-2 mb-4">
|
||||
<input id="nameInput" type="text" placeholder="Nom du joueur" class="border p-2 rounded w-full">
|
||||
<button id="addButton" class="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600">Ajouter</button>
|
||||
|
|
@ -194,5 +199,63 @@
|
|||
renderPlayers();
|
||||
});
|
||||
</script>
|
||||
|
||||
<!-- Bouton pour exporter les résultats en CSV -->
|
||||
<div class="mt-4">
|
||||
<button id="exportButton" class="bg-green-500 text-white px-4 py-2 rounded hover:bg-green-600">
|
||||
Exporter en CSV
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="mt-4">
|
||||
<button id="viewResultsButton" class="bg-purple-500 text-white px-4 py-2 rounded hover:bg-purple-600">
|
||||
Voir les résultats TODO, sort results ?
|
||||
</button>
|
||||
</div>
|
||||
|
||||
|
||||
<script>
|
||||
const exportToCSV = () => {
|
||||
const rows = [["Joueur", "Temps", "Début", "Fin"]]; // En-têtes du fichier CSV
|
||||
|
||||
// Parcourt les lignes du tableau des résultats
|
||||
Array.from(resultsTable.querySelectorAll("tr")).forEach((row) => {
|
||||
const cells = Array.from(row.querySelectorAll("td")).map((cell) => cell.textContent);
|
||||
if (cells.length > 0) {
|
||||
rows.push(cells); // Ajoute les données de chaque ligne au tableau
|
||||
}
|
||||
});
|
||||
|
||||
// Convertit les données en format CSV
|
||||
const csvContent = rows.map((row) => row.join(",")).join("\n");
|
||||
|
||||
// Crée un fichier Blob pour le téléchargement
|
||||
const blob = new Blob([csvContent], { type: "text/csv;charset=utf-8;" });
|
||||
const url = URL.createObjectURL(blob);
|
||||
|
||||
// Crée un lien de téléchargement
|
||||
const link = document.createElement("a");
|
||||
link.href = url;
|
||||
link.download = "resultats.csv";
|
||||
link.style.display = "none";
|
||||
document.body.appendChild(link);
|
||||
|
||||
// Simule un clic pour télécharger le fichier
|
||||
link.click();
|
||||
|
||||
// Nettoie le DOM
|
||||
document.body.removeChild(link);
|
||||
URL.revokeObjectURL(url);
|
||||
};
|
||||
|
||||
// Ajoute un gestionnaire d'événement au bouton d'exportation
|
||||
document.getElementById("exportButton").addEventListener("click", exportToCSV);
|
||||
</script>
|
||||
|
||||
<div class="background-container">
|
||||
<div class="left-image"></div>
|
||||
<div class="right-image"></div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
BIN
running.jpg
Normal file
BIN
running.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 391 KiB |
51
styles.css
Normal file
51
styles.css
Normal file
|
|
@ -0,0 +1,51 @@
|
|||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
height: 100vh; /* Hauteur de la fenêtre */
|
||||
overflow-y: auto; /* Permet le défilement vertical */
|
||||
}
|
||||
|
||||
.background-container {
|
||||
position: fixed; /* Fixe le fond d'écran */
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: -1; /* Place le fond derrière le contenu */
|
||||
display: flex;
|
||||
opacity: 0.5; /* Transparence pour le fond */
|
||||
}
|
||||
|
||||
.left-image {
|
||||
flex: 1; /* Prend 50% de la largeur */
|
||||
background: url('running.jpg') no-repeat center center;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
.right-image {
|
||||
flex: 1; /* Prend 50% de la largeur */
|
||||
background: url('tir.jpg') no-repeat center center;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
.header-container {
|
||||
background: linear-gradient(to right, #4caf50, #2196f3); /* Gradient background */
|
||||
color: white; /* White text */
|
||||
text-align: center; /* Center the text */
|
||||
padding: 10px; /* Add padding around the header */
|
||||
border-radius: 10px; /* Rounded corners */
|
||||
margin-bottom: 20px; /* Add spacing below the header */
|
||||
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
|
||||
}
|
||||
|
||||
.header-title {
|
||||
font-size: 2.5rem; /* Large font size for the title */
|
||||
font-weight: bold; /* Bold text */
|
||||
margin: 0; /* Remove default margin */
|
||||
}
|
||||
|
||||
.header-subtitle {
|
||||
font-size: 1.2rem; /* Smaller font size for the subtitle */
|
||||
font-weight: 300; /* Light text */
|
||||
margin: 10px 0 0; /* Add spacing above the subtitle */
|
||||
}
|
||||
BIN
tir.jpg
Normal file
BIN
tir.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 80 KiB |
Loading…
Reference in a new issue