mirror of
https://github.com/arthur-pbty/nsi.git
synced 2026-06-03 23:36:19 +02:00
finish project calendar
This commit is contained in:
@@ -0,0 +1,78 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Calendar</title>
|
||||
<link rel="stylesheet" href="style.css">
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<h1>Calendar</h1>
|
||||
<table>
|
||||
<tr>
|
||||
<th>$month</th>
|
||||
<th>$year</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Monday</td>
|
||||
<td>Tuesday</td>
|
||||
<td>Wednesday</td>
|
||||
<td>Thursday</td>
|
||||
<td>Friday</td>
|
||||
<td>Saturday</td>
|
||||
<td>Sunday</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<?php
|
||||
$month = $_POST['month'];
|
||||
$year = $_POST['year'];
|
||||
$nbr = 1;
|
||||
$nbrmax = 32;
|
||||
|
||||
if ($month == 1 or $month == 3 or $month == 5 or $month == 7 or $month == 8 or $month == 10 or $month == 12) {
|
||||
$nbrmax = 32;
|
||||
} elseif ($month == 2) {
|
||||
if ($year%4 == 0) {
|
||||
$nbrmax = 30;
|
||||
} else {
|
||||
$nbrmax = 29;
|
||||
}
|
||||
} else {
|
||||
$nbrmax = 31;
|
||||
}
|
||||
|
||||
if ($month<3) {
|
||||
$day = ( (int)((23*$month)/9)+5+$year+((int)($year-1)/4)-(int)(($year-1)/100)+(int)(($year-1)/400) )%7;
|
||||
} else {
|
||||
$day = ( (int)((23*$month)/9)+3+$year+(int)($year/4)-(int)($year/100)+(int)($year/400) )%7;
|
||||
}
|
||||
|
||||
for ($k=0; $k <6-$day ; $k++) {
|
||||
echo("<td></td>");
|
||||
}
|
||||
for ($i=6-$day; $i <7 ; $i++) {
|
||||
echo("<td>$nbr</td>");
|
||||
$nbr++;
|
||||
}
|
||||
|
||||
for ($i=0; $i<5 ; $i++) {
|
||||
echo("<tr>");
|
||||
for ($j=0; $j<7 ; $j++) {
|
||||
if ($nbr == $nbrmax) {
|
||||
break;
|
||||
}
|
||||
|
||||
$today = (date("j") == $nbr and date("n") == $month and date("Y") == $year) ? "class='today'" : "";
|
||||
|
||||
echo("<td $today>$nbr</td>");
|
||||
$nbr++;
|
||||
}
|
||||
echo("</tr>");
|
||||
}
|
||||
?>
|
||||
</tr>
|
||||
</table>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,11 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="fr">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Calendrier</title>
|
||||
</head>
|
||||
<body>
|
||||
<form action=""></form>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,66 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Calendar</title>
|
||||
<link rel="stylesheet" href="style.css">
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<h1>Calendar</h1>
|
||||
<form method="post" action="calendar.php">
|
||||
<label for="">Month :</label>
|
||||
<select name="month">
|
||||
<?php
|
||||
$months = [
|
||||
1 => "January",
|
||||
2 => "February",
|
||||
3 => "March",
|
||||
4 => "April",
|
||||
5 => "May",
|
||||
6 => "June",
|
||||
7 => "July",
|
||||
8 => "August",
|
||||
9 => "September",
|
||||
10 => "October",
|
||||
11 => "November",
|
||||
12 => "December"
|
||||
];
|
||||
|
||||
foreach ($months as $value => $label) {
|
||||
$selected = ($value == date("n")) ? 'selected' : '';
|
||||
echo "<option value='$value' $selected>$label</option>";
|
||||
}
|
||||
?>
|
||||
</select>
|
||||
|
||||
<label for="">Year :</label>
|
||||
<select name="year">
|
||||
<?php
|
||||
for ($i = date("Y")-100; $i <= date("Y")+100; $i++) {
|
||||
$selected = ($i == date("Y")) ? 'selected' : '';
|
||||
echo "<option value='$i' $selected>$i</option>";
|
||||
}
|
||||
?>
|
||||
</select>
|
||||
<button type="submit">Valider</button>
|
||||
</form>
|
||||
</header>
|
||||
<main>
|
||||
<section>
|
||||
<h2>Bienvenue sur le générateur de calendrier</h2>
|
||||
<p>Ce site vous permet de générer les calendriers pour différents mois en fonction de l'année que vous spécifiez. Entrez le mois et l'année dans le formulaire ci-dessus et cliquez sur "Valider" pour voir le calendrier correspondant.</p>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h2>Comment utiliser :</h2>
|
||||
<p>Entrez le mois et l'année dans les menus déroulants ci-dessus.</p>
|
||||
<p>Choisissez le mois en utilisant le premier menu déroulant. Vous pouvez sélectionner n'importe quel mois de l'année en choisissant parmi les options disponibles.</p>
|
||||
<p>Ensuite, sélectionnez l'année à partir du deuxième menu déroulant. Les années disponibles commencent par il y a 100 ans et vont jusque dans 100 ans</p>
|
||||
<p>Une fois que vous avez choisi un mois et une année, cliquez sur le bouton "Valider" pour générer le calendrier correspondant.</p>
|
||||
<p>Le calendrier généré affichera les jours de la semaine ainsi que les dates pour le mois et l'année sélectionnés.</p>
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,88 @@
|
||||
table {
|
||||
margin-top: 30px;
|
||||
border-collapse: collapse;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
th, td {
|
||||
border: 1px solid #dddddd;
|
||||
text-align: left;
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
th {
|
||||
background-color: #f2f2f2;
|
||||
}
|
||||
|
||||
.today {
|
||||
background-color: rgb(202, 0, 0);
|
||||
}
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: Arial, sans-serif;
|
||||
line-height: 1.6;
|
||||
background-color: #f4f4f4;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
header {
|
||||
background-color: #333;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
padding: 1em 0;
|
||||
}
|
||||
|
||||
header h1 {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
form {
|
||||
margin-top: 20px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
form label {
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
form input,
|
||||
form select {
|
||||
width: 100px;
|
||||
padding: 5px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
form button {
|
||||
padding: 7px 15px;
|
||||
background-color: #292929;
|
||||
color: #fff;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
main {
|
||||
max-width: 800px;
|
||||
margin: 20px auto;
|
||||
padding: 20px;
|
||||
background-color: #fff;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
main section {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
main h2 {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
main p {
|
||||
color: #555;
|
||||
}
|
||||
Reference in New Issue
Block a user