Skip to content
Snippets Groups Projects
Commit 32f18dbe authored by ZHANG David's avatar ZHANG David
Browse files

Upload New File

parent 9e6d36ab
No related branches found
No related tags found
No related merge requests found
Show whitespace changes
Inline Side-by-side
Showing
with 1074 additions and 0 deletions
code/style.css 0 → 100644
+ 1074
− 0
View file @ 32f18dbe
body {
font-family:"lato";
padding-bottom:700px;
background:
linear-gradient(
rgba(135, 206, 250, 0.7), /* Bleu clair */
rgba(70, 130, 180, 0.8), /* Bleu acier */
rgba(25, 25, 112, 0.9) /* Bleu nuit */
);
background-size: cover;
}
/* Login */
#square {
position: relative;
width: 800px;
height: 450px;
display: block;
margin: auto;
background: #F3F6F8;
z-index: 3;
font-family: sans-serif;
}
#leftSquare {
width: 40%;
display: block;
margin: auto;
height: 100%;
position: absolute;
top: 0%;
left: 0%;
background:linear-gradient(
rgba(135, 206, 250, 0.7), /* Bleu clair */
rgba(70, 130, 180, 0.8), /* Bleu acier */
rgba(25, 25, 112, 0.9) /* Bleu nuit */
), url("https://images.pexels.com/photos/1852/dawn-landscape-mountains-nature.jpg?h=350&auto=compress");
background-size: cover;
border-radius: 0%;
z-index: 1;
}
#rightSquare {
width: 60%;
display: block;
margin: auto;
height: 100%;
position: absolute;
top: 0%;
right: 0%;
background:none;
background-size: cover;
border-radius: 0%;
z-index: 1;
}
#circle{
border-radius: 50%;
width: 60%;
height: 40%;
display: block;
margin: auto;
position: absolute;
top: 8%;
right: 20%;
}
.brand{
position: absolute;
display: block;
top: 38%;
left: 25%;
margin: auto;
width: 50%;
height: 60%;
z-index: 1;
}
#title{
position: absolute;
left: 1%;
right:1%;
bottom: 37%;
color: white;
font-family: sans-serif;
font-size: 20px;
font-weight: 800;
text-align: center;
z-index: 3;
}
#subtitle{
position: absolute;
left: 7%;
right:7%;
bottom: 30%;
color: white;
font-family: sans-serif;
font-size: 13px;
font-weight: 400;
text-align: center;
z-index: 3;
}
#container{
font-family: sans-serif;
margin-top: 15%;
}
.signup{
color: rgb(162, 191, 228);
font-family: sans-serif;
font-size: 2em;
font-weight: 800;
text-align: center;
text-transform: uppercase;
z-index: 3;
}
#twitter{
padding-left: 10px;
}
#footer{
display: block;
margin: auto;
color: #333333;
font-family:"lato";
font-size: 10px;
font-weight: 400;
text-align: center;
z-index: 3;
}
#terms{
cursor: pointer;
color: #FBADC1;
}
form{
padding: 20px 0;
position: relative;
}
.optin{
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
outline: 0;
border: 1px solid rgba(255, 255, 255, 0.8);
background-color: rgba(255, 255, 255, 0.8);
width: 75%;
margin: auto;
display: block;
margin-bottom: 10px;
border-radius: 3px;
padding: 10px 15px;
text-align: left;
font-size: 18px;
color: #333333;
-webkit-transition-duration: 0.25s;
transition-duration: 0.25s;
font-weight: 300;
}
.optin:hover{
background-color: rgba(255, 255, 255, 0.4);
}
.optin:focus {
background-color: white;
width: 90%;
color: #CD98E3;
}
/* Boutton login */
.button {
display: flex;
justify-content: center;
align-items: center;
padding: 10px 20px;
font-size: 16px;
margin: 20px;
color: white;
background-color: #51a3eb;
text-decoration: none;
border-radius: 5px;
cursor: pointer;
flex: 1; /* Les boutons prennent la même largeur */
}
.button:hover {
background-color: darkblue;
}
#form-container {
font-family: sans-serif;
display: flex;
flex-direction: column; /* Aligne les éléments verticalement */
align-items: center; /* Centre les éléments horizontalement */
gap: 10px; /* Espacement entre les éléments */
}
#button-container {
margin-top: 50px;
width: 200 px;
display: flex;
justify-content: center;
align-items: center;
padding: 10px 20px;
color: white;
text-decoration: none;
border-radius: 5px;
cursor: pointer;
flex: 1;
}
/* Principale */
.sidebar {
font-family: sans-serif;
width: 250px;
background-color: rgba(0, 0, 0, 0.8);
color: rgba(255, 255, 255, 0.9);
position: fixed;
height: 100vh;
padding-top: 20px;
box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.sidebar a {
display: block;
color: rgba(255, 255, 255, 0.9);
padding: 15px;
text-decoration: none;
font-size: 1em;
transition: background-color 0.3s ease;
}
.sidebar a:hover {
background-color: rgba(255, 255, 255, 0.2);
}
.sidebar h2 {
text-align: center;
margin-bottom: 20px;
}
.sidebar img {
width: 60%;
border-top: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 100px;
padding-top: 10px;
margin: 30px auto; /* Centrer horizontalement avec auto */
bottom: 10px; /* Placer l'image en bas */
left: 50%; /* Centrer horizontalement */
}
.main-content {
margin-left: 250px;
padding: 20px;
width: calc(100% - 250px);
}
.container {
max-width: 600px;
margin: 20px auto;
padding: 20px;
background: #fff;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
text-align: center;
}
h1 {
font-size: 2em;
margin-bottom: 10px;
color: #333;
font-family: sans-serif;
}
p {
font-size: 1em;
margin: 5px 0;
font-family: sans-serif;
}
h2{
font-family: sans-serif;
}
/*logout */
.logout {
background-color: #FF4B4B;
color: white;
padding: 10px 20px;
text-decoration: none;
border-radius: 5px;
margin: 20px auto;
display: block;
width: 80%;
text-align: center;
}
.logout:hover {
background-color: #cc0000;
}
.manage-sessions-page {
font-family: Arial, sans-serif;
max-width: 600px;
margin: 0 auto;
padding: 20px;
background-color: #f9f9f9;
border: 1px solid #ddd;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.manage-sessions-page h1 {
font-size: 2rem;
color: #333;
text-align: center;
margin-bottom: 20px;
}
.manage-sessions-page .success {
color: green;
font-weight: bold;
margin-bottom: 10px;
}
.manage-sessions-page .error {
color: red;
font-weight: bold;
margin-bottom: 10px;
}
.manage-sessions-page table {
width: 100%;
border-collapse: collapse;
margin-bottom: 20px;
}
.manage-sessions-page table th,
.manage-sessions-page table td {
border: 1px solid #ddd;
padding: 8px;
text-align: center;
}
.manage-sessions-page table th {
background-color: #f4f4f4;
font-weight: bold;
}
.manage-sessions-page table tr:nth-child(even) {
background-color: #f1f1f1;
}
.manage-sessions-page table tr:hover {
background-color: #f1f1f1;
}
.manage-sessions-page table tbody{
background-color: #f1f1f1;
}
.manage-sessions-page form {
display: inline;
}
.manage-sessions-page form button {
background-color: #007bff;
color: white;
border: none;
padding: 5px 10px;
border-radius: 4px;
cursor: pointer;
}
.manage-sessions-page form button:hover {
background-color: #0056b3;
}
.manage-sessions-page a {
display: inline-block;
margin-top: 20px;
text-decoration: none;
color: #007bff;
}
.manage-sessions-page a:hover {
text-decoration: underline;
}
.create-session-page {
font-family: Arial, sans-serif;
max-width: 600px;
margin: 0 auto;
padding: 20px;
background-color: #f9f9f9;
border: 1px solid #ddd;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.create-session-page h1 {
text-align: center;
font-size: 1.8rem;
color: #333;
margin-bottom: 20px;
}
.create-session-page form {
display: flex;
flex-direction: column;
gap: 15px;
}
.create-session-page label {
font-weight: bold;
margin-bottom: 5px;
color: #555;
}
.create-session-page input,
.create-session-page select {
padding: 10px;
border: 1px solid #ccc;
border-radius: 4px;
font-size: 1rem;
}
.create-session-page input:focus,
.create-session-page select:focus {
border-color: #007bff;
outline: none;
}
.create-session-page button {
background-color: #007bff;
color: white;
border: none;
padding: 10px 15px;
border-radius: 4px;
font-size: 1rem;
cursor: pointer;
}
.create-session-page button:hover {
background-color: #0056b3;
}
.create-session-page a {
text-align: center;
display: block;
margin-top: 15px;
text-decoration: none;
color: #007bff;
}
.create-session-page a:hover {
text-decoration: underline;
}
.attendance-page {
font-family: Arial, sans-serif;
margin: 0 auto;
padding: 20px;
max-width: 900px;
background-color: #f9f9f9;
color: #333;
border: 1px solid #ddd;
border-radius: 8px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
.attendance-page h1 {
text-align: center;
font-size: 2rem;
margin-bottom: 20px;
color: #2c3e50;
}
.attendance-page h2 {
font-size: 1.5rem;
color: #34495e;
margin-bottom: 10px;
}
.attendance-page p {
font-size: 1rem;
margin-bottom: 10px;
color: #555;
}
/* Table styles */
.attendance-page table {
width: 100%;
border-collapse: collapse;
margin: 20px 0;
background-color: white;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
border-radius: 8px;
overflow: hidden;
}
.attendance-page table th,
.attendance-page table td {
padding: 12px 15px;
text-align: center;
border: 1px solid #ddd;
}
.attendance-page table th {
background-color: #3498db;
color: white;
font-weight: bold;
text-transform: uppercase;
}
.attendance-page table tr:nth-child(even) {
background-color: #f2f2f2;
}
.attendance-page table tr:hover {
background-color: #eaf2f8;
}
.attendance-page table td {
font-size: 0.9rem;
}
/* Form styles */
.attendance-page select {
padding: 8px;
border: 1px solid #ccc;
border-radius: 4px;
font-size: 0.9rem;
background-color: #fff;
color: #333;
}
.attendance-page select:focus {
border-color: #3498db;
outline: none;
}
.attendance-page button {
padding: 8px 12px;
background-color: #3498db;
color: white;
border: none;
border-radius: 4px;
font-size: 0.9rem;
cursor: pointer;
transition: background-color 0.3s ease;
}
.attendance-page button:hover {
background-color: #2980b9;
}
/* Links styling */
.attendance-page .links {
text-align: center;
margin-top: 20px;
}
.attendance-page .links a {
text-decoration: none;
color: #3498db;
font-weight: bold;
font-size: 1rem;
}
.attendance-page .links a:hover {
text-decoration: underline;
}
/* Styles pour planning.php */
.planning-page{
font-family: Arial, sans-serif;
max-width: 600px;
margin: 0 auto;
padding: 20px;
background-color: #f9f9f9;
border: 1px solid #ddd;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.planning-page h1 {
text-align: center;
font-size: 2em;
color: #333;
}
.planning-page table {
width: 100%;
border-collapse: collapse;
margin-top: 20px;
}
.planning-page table th,
.planning-page table td {
font-family: sans-serif;
border: 1px solid #ddd;
text-align: center;
padding: 10px;
}
.planning-page table th {
background-color: #3498db;
color: white;
}
.planning-page table td {
min-height: 100px;
vertical-align: top;
background-color: #f9f9f9;
}
.planning-page table td span {
display: block;
background-color: #cde9f0;
margin: 5px;
padding: 5px;
border-radius: 5px;
font-size: 0.9em;
}
.planning-page .back {
display: inline-block;
margin-top: 20px;
padding: 10px 20px;
background-color: #007BFF;
color: white;
text-decoration: none;
border-radius: 5px;
text-align: center;
}
.planning-page .back:hover {
background-color: #0056b3;
}
.students-sessions-page {
font-family: Arial, sans-serif;
max-width: 900px;
margin: 0 auto;
padding: 20px;
background-color: #f9f9f9;
border: 1px solid #ddd;
border-radius: 8px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
/* Heading Style */
.students-sessions-page h1 {
text-align: center;
font-size: 2em;
color: #2c3e50;;
margin-bottom: 20px;
}
/* Table Styling */
.students-sessions-page table {
width: 100%;
border-collapse: collapse;
margin: 20px 0;
background-color: white;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
border-radius: 8px;
overflow: hidden;
}
.students-sessions-page table th,
.students-sessions-page table td {
padding: 12px 15px;
text-align: center;
border: 1px solid #ddd;
}
.students-sessions-page table th {
background-color: #007BFF;
color: white;
font-weight: bold;
text-transform: uppercase;
}
.students-sessions-page table tr:nth-child(even) {
background-color: #f2f2f2;
}
.students-sessions-page table tr:hover {
background-color: #eaf2f8;
}
.students-sessions-page table td a {
color: #007BFF;
text-decoration: none;
}
.students-sessions-page table td a:hover {
text-decoration: underline;
}
/* Message for no students */
.students-sessions-page p {
font-size: 1rem;
color: #555;
text-align: center;
}
/* Back to Dashboard Link */
/* Styles pour la classe view-session */
.view-session {
font-family: Arial, sans-serif;
max-width: 600px;
margin: 0 auto;
padding: 20px;
background-color: #f9f9f9;
border: 1px solid #ddd;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.view-session h1 {
text-align: center;
color: #333;
}
.view-session table {
width: 100%;
border-collapse: collapse;
margin-top: 20px;
}
.view-session table th, .view-session table td {
padding: 12px;
text-align: left;
border: 1px solid #ddd;
}
.view-session table th {
background-color: #f4f4f4;
}
.view-session .success {
color: green;
}
.view-session .error {
color: red;
}
.view-session a {
display: block;
text-align: center;
margin-top: 20px;
color: #007BFF;
text-decoration: none;
}
.view-session a:hover {
text-decoration: underline;
}
/* Styles pour la classe join-session */
.join-session {
font-family: Arial, sans-serif;
max-width: 600px;
margin: 0 auto;
padding: 20px;
background-color: #f9f9f9;
border: 1px solid #ddd;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.join-session h1 {
text-align: center;
color: #333;
}
.join-session form {
margin-top: 20px;
}
.join-session label {
display: block;
margin-bottom: 10px;
font-weight: bold;
}
.join-session select {
width: 100%;
padding: 10px;
margin-bottom: 20px;
border: 1px solid #ccc;
border-radius: 5px;
}
.join-session button {
padding: 10px 20px;
background-color: #007BFF;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}
.join-session button:hover {
background-color: #0056b3;
}
.join-session .success {
color: green;
}
.join-session .error {
color: red;
}
.join-session a {
display: block;
text-align: center;
margin-top: 20px;
color: #007BFF;
text-decoration: none;
}
.join-session a:hover {
text-decoration: underline;
}
/* Styles pour la classe manage-sessions-admin */
.manage-sessions-admin {
width: 90%;
margin: 0 auto;
padding: 20px;
font-family: Arial, sans-serif;
font-family: Arial, sans-serif;
max-width: 600px;
margin: 0 auto;
padding: 20px;
background-color: #f9f9f9;
border: 1px solid #ddd;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.manage-sessions-admin h1 {
text-align: center;
color: #333;
margin-bottom: 20px;
}
.manage-sessions-admin .table-container {
margin-top: 20px;
}
.manage-sessions-admin table {
width: 100%;
border-collapse: collapse;
}
.manage-sessions-admin table th, .manage-sessions-admin table td {
padding: 12px;
text-align: left;
border: 1px solid #ddd;
}
.manage-sessions-admin table th {
background-color: #f4f4f4;
}
.manage-sessions-admin .success {
color: green;
}
.manage-sessions-admin .error {
color: red;
}
.manage-sessions-admin button {
padding: 5px 10px;
background-color: #007BFF;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}
.manage-sessions-admin button:hover {
background-color: #0056b3;
}
.manage-sessions-admin a {
display: block;
text-align: center;
margin-top: 20px;
color: #007BFF;
text-decoration: none;
}
.manage-sessions-admin a:hover {
text-decoration: underline;
}
.view-report {
width: 90%;
margin: 0 auto;
padding: 20px;
font-family: Arial, sans-serif;
}
.view-report h1 {
text-align: center;
color: #333;
margin-bottom: 30px;
}
.view-report .stats {
display: flex;
justify-content: space-around;
margin-bottom: 30px;
}
.view-report .stat {
text-align: center;
background-color: #f4f4f4;
padding: 20px;
border-radius: 5px;
width: 30%;
}
.view-report .stat h2 {
font-size: 2em;
margin-bottom: 10px;
}
.view-report .stat p {
font-size: 1em;
color: #777;
}
.view-report table {
width: 100%;
border-collapse: collapse;
margin-top: 20px;
}
.view-report table th, .view-report table td {
padding: 12px;
text-align: left;
border: 1px solid #ddd;
}
.view-report table th {
background-color: #f4f4f4;
}
.view-report .status-active {
color: green;
font-weight: bold;
}
.view-report .status-inactive {
color: red;
font-weight: bold;
}
.manage-users {
font-family: Arial, sans-serif;
max-width: 600px;
margin: 0 auto;
padding: 20px;
background-color: #f9f9f9;
border: 1px solid #ddd;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
width: 90%;
margin: 0 auto;
padding: 20px;
font-family: Arial, sans-serif;
}
.manage-users h1 {
text-align: center;
color: #333;
margin-bottom: 20px;
}
.manage-users table {
width: 100%;
border-collapse: collapse;
margin-top: 20px;
}
.manage-users table th, .manage-users table td {
padding: 12px;
text-align: left;
border: 1px solid #ddd;
}
.manage-users table th {
background-color: #f4f4f4;
}
.manage-users .success {
color: green;
}
.manage-users .error {
color: red;
}
.manage-users button {
padding: 5px 10px;
background-color: #007BFF;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}
.manage-users button:hover {
background-color: #0056b3;
}
.manage-users a {
display: block;
text-align: center;
margin-top: 20px;
color: #007BFF;
text-decoration: none;
}
.manage-users a:hover {
text-decoration: underline;
}
\ No newline at end of file
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment