From 8f5dee78cf31ad84f11609ae697d53e070945147 Mon Sep 17 00:00:00 2001
From: thchazot1 <thchazot1@IUTCLINFB2003>
Date: Wed, 21 Dec 2022 21:18:45 +0100
Subject: [PATCH] ajoue de deux pages html/css

---
 Style/listStyle.css    | 126 ++++++++++++++++++++++
 Style/mycoolstyle.css  |  96 +++++++++--------
 Style/seeListStyle.css | 230 +++++++++++++++++++++++++++++++++++++++++
 Vues/accueil.php       |  73 +++++++++----
 Vues/seeList.php       |  82 +++++++++++++++
 Vues/signUp.php        |   2 +-
 index.php              |   2 +-
 7 files changed, 546 insertions(+), 65 deletions(-)
 create mode 100644 Style/listStyle.css
 create mode 100644 Style/seeListStyle.css
 create mode 100644 Vues/seeList.php

diff --git a/Style/listStyle.css b/Style/listStyle.css
new file mode 100644
index 0000000..2de5a11
--- /dev/null
+++ b/Style/listStyle.css
@@ -0,0 +1,126 @@
+body {
+    font-family: 'lato', sans-serif;
+  }
+  .container {
+    max-width: 1000px;
+    margin-left: auto;
+    margin-right: auto;
+    padding-left: 10px;
+    padding-right: 10px;
+  }
+  
+  h2 {
+    font-size: 26px;
+    margin: 20px 0;
+    text-align: center;
+  }
+  
+    li {
+      border-radius: 3px;
+      padding: 25px 30px;
+      display: flex;
+      justify-content: space-between;
+      margin-bottom: 25px;
+    }
+    .table-header {
+      background-color: #95A5A6;
+      font-size: 14px;
+      text-transform: uppercase;
+      letter-spacing: 0.03em;
+    }
+    .table-row {
+      background-color: #ffffff;
+      box-shadow: 0px 0px 9px 0px rgba(0,0,0,0.1);
+    }
+    .col-1 {
+      flex-basis: 85%;
+    }
+    .col-2 {
+      flex-basis: 15%;
+    }
+    
+    @media all and (max-width: 767px) {
+      .table-header {
+        display: none;
+      }
+      li {
+        display: block;
+      }
+      .col {
+        
+        flex-basis: 100%;
+        
+      }
+      .col {
+        display: flex;
+        padding: 10px 0;
+      }
+    }
+  
+  /* The sidebar menu */
+  .sidenav {
+    height: 100%; /* Full-height: remove this if you want "auto" height */
+    width: 160px; /* Set the width of the sidebar */
+    position: fixed; /* Fixed Sidebar (stay in place on scroll) */
+    z-index: 1; /* Stay on top */
+    top: 0; /* Stay at the top */
+    left: 0;
+    background-color: #111; /* Black */
+    overflow-x: hidden; /* Disable horizontal scroll */
+    padding-top: 20px;
+  }
+  
+  /* The navigation menu links */
+  .sidenav a {
+    padding: 6px 8px 6px 16px;
+    text-decoration: none;
+    font-size: 25px;
+    color: #818181;
+    display: block;
+  }
+  
+  /* When you mouse over the navigation links, change their color */
+  .sidenav a:hover {
+    color: #f1f1f1;
+  }
+  
+  /* Style page content */
+  .main {
+    margin-left: 160px; /* Same as the width of the sidebar */
+    padding: 0px 10px;
+  }
+  
+  /* On smaller screens, where height is less than 450px, change the style of the sidebar (less padding and a smaller font size) */
+  @media screen and (max-height: 450px) {
+    .sidenav {padding-top: 15px;}
+    .sidenav a {font-size: 18px;}
+  }
+
+
+/* Add a black background color to the top navigation */
+.topnav {
+    background-color: #333;
+    overflow: hidden;
+  }
+  
+  /* Style the links inside the navigation bar */
+  .topnav a {
+    float: right;
+    color: #f2f2f2;
+    text-align: center;
+    padding: 14px 16px;
+    text-decoration: none;
+    font-size: 17px;
+  }
+  
+  /* Change the color of links on hover */
+  .topnav a:hover {
+    background-color: #ddd;
+    color: black;
+  }
+  
+  /* Add a color to the active/current link */
+  .topnav a.active {
+    background-color: #04AA6D;
+    color: white;
+  }
\ No newline at end of file
diff --git a/Style/mycoolstyle.css b/Style/mycoolstyle.css
index 55e72ed..5652f5e 100644
--- a/Style/mycoolstyle.css
+++ b/Style/mycoolstyle.css
@@ -1,45 +1,55 @@
-body {
-    padding-left: 11em;
-    font-family: Georgia, 'Georgia', "Times New Roman",
-          Times, serif;
-    color: red;
-    background-color: powderblue }
+body{
+	margin: 0;
+	padding: 0;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	min-height: 100vh;
+	font-family: 'Jost', sans-serif;
+	background: linear-gradient(to bottom, #0f0c29, #302b63, #24243e);
+}
+.main{
+  background: red;
+  overflow: hidden;
+  background: url("https://doc-08-2c-docs.googleusercontent.com/docs/securesc/68c90smiglihng9534mvqmq1946dmis5/fo0picsp1nhiucmc0l25s29respgpr4j/1631524275000/03522360960922298374/03522360960922298374/1Sx0jhdpEpnNIydS4rnN4kHSJtU1EyWka?e=view&authuser=0&nonce=gcrocepgbb17m&user=03522360960922298374&hash=tfhgbs86ka6divo3llbvp93mg4csvb38") no-repeat center/ cover;
+  border-radius: 10px;
+  box-shadow: 5px 20px 50px #000;
+}
+  ul.navbar {
+  list-style-type: none;
+  padding: 0;
+  margin: 0;
+  position: absolute;
+  top: 2em;
+  left: 1em;
+  width: 9em }
+li {
+  margin-bottom: 2em;
+}
+h1 {
+  font-family: Helvetica, Geneva, Arial,
+        SunSans-Regular, sans-serif; 
+  text-align: center;
+}
+ul.navbar a {
+  text-decoration: none }
+a:link {
+  color: blue }
+a:visited {
+  color: darkblue }
+address {
+  margin-top: 1em;
+  padding-top: 1em;
+  border-top: thin dotted }
 
-    ul.navbar {
-    list-style-type: none;
-    padding: 0;
-    margin: 0;
-    position: absolute;
-    top: 2em;
-    left: 1em;
-    width: 9em }
-  li {
-    margin-bottom: 2em;
-  }
-  h1 {
-    font-family: Helvetica, Geneva, Arial,
-          SunSans-Regular, sans-serif; 
-    text-align: center;
-  }
-  ul.navbar a {
-    text-decoration: none }
-  a:link {
-    color: blue }
-  a:visited {
-    color: darkblue }
-  address {
-    margin-top: 1em;
-    padding-top: 1em;
-    border-top: thin dotted }
+button.connexion {
+  padding: 0;
+  margin: 0;
+  position: absolute;
+  top: 1em;
+  right: 1em;
+}
 
-  button.connexion {
-    padding: 0;
-    margin: 0;
-    position: absolute;
-    top: 1em;
-    right: 1em;
-  }
-
-  div.carouselExampleIndicators {
-    margin: auto;
-  }
\ No newline at end of file
+div.carouselExampleIndicators {
+  margin: auto;
+}
\ No newline at end of file
diff --git a/Style/seeListStyle.css b/Style/seeListStyle.css
new file mode 100644
index 0000000..a3ec539
--- /dev/null
+++ b/Style/seeListStyle.css
@@ -0,0 +1,230 @@
+body {
+  font-family: 'lato', sans-serif;
+}
+.container {
+  max-width: 1000px;
+  margin-left: auto;
+  margin-right: auto;
+  padding-left: 10px;
+  padding-right: 10px;
+}
+
+h2 {
+  font-size: 26px;
+  margin: 20px 0;
+  text-align: center;
+}
+
+  li {
+    border-radius: 3px;
+    padding: 25px 30px;
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 25px;
+  }
+  .table-header {
+    background-color: #95A5A6;
+    font-size: 14px;
+    text-transform: uppercase;
+    letter-spacing: 0.03em;
+  }
+  .table-row {
+    background-color: #ffffff;
+    box-shadow: 0px 0px 9px 0px rgba(0,0,0,0.1);
+  }
+  .col-1 {
+    flex-basis: 85%;
+  }
+  .col-2 {
+    flex-basis: 15%;
+  }
+  
+  @media all and (max-width: 767px) {
+    .table-header {
+      display: none;
+    }
+    li {
+      display: block;
+    }
+    .col {
+      
+      flex-basis: 100%;
+      
+    }
+    .col {
+      display: flex;
+      padding: 10px 0;
+    }
+  }
+
+/* The sidebar menu */
+.sidenav {
+  height: 100%; /* Full-height: remove this if you want "auto" height */
+  width: 160px; /* Set the width of the sidebar */
+  position: fixed; /* Fixed Sidebar (stay in place on scroll) */
+  z-index: 1; /* Stay on top */
+  top: 0; /* Stay at the top */
+  left: 0;
+  background-color: #111; /* Black */
+  overflow-x: hidden; /* Disable horizontal scroll */
+  padding-top: 20px;
+}
+
+/* The navigation menu links */
+.sidenav a {
+  padding: 6px 8px 6px 16px;
+  text-decoration: none;
+  font-size: 25px;
+  color: #818181;
+  display: block;
+}
+
+/* When you mouse over the navigation links, change their color */
+.sidenav a:hover {
+  color: #f1f1f1;
+}
+
+/* Style page content */
+.main {
+  margin-left: 160px; /* Same as the width of the sidebar */
+  padding: 0px 10px;
+}
+
+/* On smaller screens, where height is less than 450px, change the style of the sidebar (less padding and a smaller font size) */
+@media screen and (max-height: 450px) {
+  .sidenav {padding-top: 15px;}
+  .sidenav a {font-size: 18px;}
+}
+
+body {
+  font-family: 'lato', sans-serif;
+}
+.container {
+  max-width: 1000px;
+  margin-left: auto;
+  margin-right: auto;
+  padding-left: 10px;
+  padding-right: 10px;
+}
+
+h2 {
+  font-size: 26px;
+  margin: 20px 0;
+  text-align: center;
+}
+
+  li {
+    border-radius: 3px;
+    padding: 25px 30px;
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 25px;
+  }
+  .table-header {
+    background-color: #95A5A6;
+    font-size: 14px;
+    text-transform: uppercase;
+    letter-spacing: 0.03em;
+  }
+  .table-row {
+    background-color: #ffffff;
+    box-shadow: 0px 0px 9px 0px rgba(0,0,0,0.1);
+  }
+  .col-1 {
+    flex-basis: 20%;
+  }
+  .col-2 {
+    flex-basis: 50%;
+  }
+  .col-3 {
+    flex-basis: 15%;
+  }
+  .col-4 {
+    flex-basis: 10%;
+  }
+  
+  @media all and (max-width: 767px) {
+    .table-header {
+      display: none;
+    }
+    li {
+      display: block;
+    }
+    .col {
+      
+      flex-basis: 100%;
+      
+    }
+    .col {
+      display: flex;
+      padding: 10px 0;
+    }
+  }
+
+/* The sidebar menu */
+.sidenav {
+  height: 100%; /* Full-height: remove this if you want "auto" height */
+  width: 160px; /* Set the width of the sidebar */
+  position: fixed; /* Fixed Sidebar (stay in place on scroll) */
+  z-index: 1; /* Stay on top */
+  top: 0; /* Stay at the top */
+  left: 0;
+  background-color: #111; /* Black */
+  overflow-x: hidden; /* Disable horizontal scroll */
+  padding-top: 20px;
+}
+
+/* The navigation menu links */
+.sidenav a {
+  padding: 6px 8px 6px 16px;
+  text-decoration: none;
+  font-size: 25px;
+  color: #818181;
+  display: block;
+}
+
+/* When you mouse over the navigation links, change their color */
+.sidenav a:hover {
+  color: #f1f1f1;
+}
+
+/* Style page content */
+.main {
+  margin-left: 160px; /* Same as the width of the sidebar */
+  padding: 0px 10px;
+}
+
+/* On smaller screens, where height is less than 450px, change the style of the sidebar (less padding and a smaller font size) */
+@media screen and (max-height: 450px) {
+  .sidenav {padding-top: 15px;}
+  .sidenav a {font-size: 18px;}
+}
+
+
+/* Add a black background color to the top navigation */
+.topnav {
+  background-color: #333;
+  overflow: hidden;
+}
+
+/* Style the links inside the navigation bar */
+.topnav a {
+  float: right;
+  color: #f2f2f2;
+  text-align: center;
+  padding: 14px 16px;
+  text-decoration: none;
+  font-size: 17px;
+}
+
+/* Change the color of links on hover */
+.topnav a:hover {
+  background-color: #ddd;
+  color: black;
+}
+
+/* Add a color to the active/current link */
+.topnav a.active {
+  background-color: #04AA6D;
+  color: white;
+}
\ No newline at end of file
diff --git a/Vues/accueil.php b/Vues/accueil.php
index 41d188a..b0c9c92 100644
--- a/Vues/accueil.php
+++ b/Vues/accueil.php
@@ -3,30 +3,63 @@
 <head>
   <title>Ajouter une Liste</title>
   <link rel="stylesheet" href="Style/bootstrap.css">
+  <link rel="stylesheet" href="Style/listStyle.css">
 </head>
 
-<?php 
+<body>
+    
 
-$dataView[]=new Liste(12, "test", false, null, array());
-$dataView[]=new Liste(12, "belle bite", false, null, array());
+    <div class="sidenav">
+        <a href="#">About</a>
+        <a href="#">Services</a>
+        <a href="#">Clients</a>
+        <a href="#">Contact</a>
+    </div>
 
-if (isset($dataView)): 
-    foreach ($dataView as $list){
-?>    
+    <div class="main">
+
+    <div class="topnav">
+        <a href="#home">Se connecter</a>
+    </div>
+
+        <h2>Liste Publique</h2>
         <div class="container">
-            <div class="row">
-                <div class="col">
-                    <?php echo $list->getName(); ?>
-                </div>
-                <button class="col">
-                    Modifer la liste
-                </button>
-
-            </div>
-        </div>
-<?php
-}
 
-endif;
+            <?php 
+
+            $dataView[]=new Liste(12, "test", false, null, array());
+            $dataView[]=new Liste(12, "belle bite", false, null, array());
+
+            if (isset($dataView)): 
+            ?>
+                
+
+                <ul>
+                    <li class="table-header">
+                        <div class="col col-1">List Name</div>
+                        <div class="col col-2">See Details</div>
+                    </li> 
+
+            <?php 
+                foreach ($dataView as $list){
+            ?>    
+                <li class="table-row">
+                    <div class="col col-1" data-label="Customer Name"><?php echo $list->getName(); ?></div>
+                    <button class="col col-2">Modify</button>
+                </li>
 
-?>
+            <?php
+            }
+            ?>
+
+
+            </ul>
+
+
+            <?php
+            endif;
+
+            ?>
+        </div>
+    </div>
+</body>
diff --git a/Vues/seeList.php b/Vues/seeList.php
new file mode 100644
index 0000000..0f2131a
--- /dev/null
+++ b/Vues/seeList.php
@@ -0,0 +1,82 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>Ajouter une Liste</title>
+  <link rel="stylesheet" href="Style/bootstrap.css">
+  <link rel="stylesheet" href="Style/seeListStyle.css">
+</head>
+
+
+
+
+<div class="sidenav">
+  <a href="#">About</a>
+  <a href="#">Services</a>
+  <a href="#">Clients</a>
+  <a href="#">Contact</a>
+</div>
+
+
+
+
+<div class="main">
+  
+  <div class="topnav">
+  <a href="#home">Se connecter</a>
+  </div>
+  
+  <h2>List details</h2>
+  
+  <?php 
+
+        $tabTaches[]=new Tache(1, "wesh", "bonjour bonjour", false);
+        $tabTaches[]=new Tache(2, "wesh wesh", "au revoir", true);
+        $dataView[]=new Liste(12, "test", false, null, $tabTaches);
+        
+
+        if (isset($dataView)): 
+    ?>
+        <div class="container">
+            <ul class="responsive-table">
+                <li class="table-header">
+                    <div class="col col-1">Task name</div>
+                    <div class="col col-2">Task content</div>
+                    <div class="col col-3">Completed</div>
+                    <div class="col col-4">Modify</div>
+                </li>
+
+                <?php 
+                    foreach ($dataView[0]->getTaches() as $tache){
+                ?> 
+                
+                <li class="table-row">
+                    <div class="col col-1" data-label="Task name"><?php echo ($tache->getName())?></div>
+                    <div class="col col-2" data-label="Task content"><?php echo ($tache->getContent())?></div>
+                    <?php 
+                    if ($tache->getCompleted()){
+                    ?>
+                        <input type="checkbox" id="completed" checked class="col col-3"></input>
+                    <?php 
+                    }
+                    else{
+                    ?>
+                        <input type="checkbox" id="completed" class="col col-3"></input>
+
+                    <?php 
+                    }
+                    ?>
+
+                    <button class="col col-4" data-label="Task content">Modify</button>
+                </li>
+            
+                <?php 
+                }
+                ?>
+            </ul>
+        </div>
+
+        <?php
+        endif;
+        ?>
+    </div>
+</div>
diff --git a/Vues/signUp.php b/Vues/signUp.php
index 919592f..4e11af9 100644
--- a/Vues/signUp.php
+++ b/Vues/signUp.php
@@ -3,7 +3,7 @@
 <head>
 	<title>Slide Navbar</title>
 	<link rel="stylesheet" type="text/css" href="slide navbar style.css">
-<link href="Style/signUp.css" rel="stylesheet">
+	<link href="Style/signUp.css" rel="stylesheet">
 </head>
 <body>
 	<div class="main">  	
diff --git a/index.php b/index.php
index 05f46d7..549c339 100644
--- a/index.php
+++ b/index.php
@@ -8,7 +8,7 @@ require_once('config/Autoload.php');
 Autoload::charger();
 
 try{
-    require("Vues/accueil.php");
+    require("Vues/seeList.php");
 }
 catch( PDOException $Exception ) {
     echo 'erreur';