README principal et dev-ihm
This commit is contained in:
EmmanuelTiamzon
BIN
DEV-IHM/TP/TP-BUT2FA-IHM.tar
Normal file
BIN
DEV-IHM/TP/TP-BUT2FA-IHM.tar
Normal file
Binary file not shown.
BIN
DEV-IHM/TP/TP-WireFrame.tar
Normal file
BIN
DEV-IHM/TP/TP-WireFrame.tar
Normal file
Binary file not shown.
BIN
DEV-IHM/TP/TP-WireFrame/BUT2-IHM-exoWireframe.pdf
Normal file
BIN
DEV-IHM/TP/TP-WireFrame/BUT2-IHM-exoWireframe.pdf
Normal file
Binary file not shown.
BIN
DEV-IHM/TP/TP-WireFrame/IMG_8010.jpeg
Normal file
BIN
DEV-IHM/TP/TP-WireFrame/IMG_8010.jpeg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 88 KiB |
BIN
DEV-IHM/TP/TP-WireFrame/IMG_8011.jpeg
Normal file
BIN
DEV-IHM/TP/TP-WireFrame/IMG_8011.jpeg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 86 KiB |
BIN
DEV-IHM/TP/TP-WireFrame/IMG_8012.jpeg
Normal file
BIN
DEV-IHM/TP/TP-WireFrame/IMG_8012.jpeg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 114 KiB |
111
DEV-IHM/TP/TP-WireFrame/index.html
Normal file
111
DEV-IHM/TP/TP-WireFrame/index.html
Normal file
@@ -0,0 +1,111 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1" />
|
||||
<title>Bibliothèque</title>
|
||||
<!-- Link to main stylesheet -->
|
||||
<link rel="stylesheet" href="style.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="page">
|
||||
<!-- Top section containing left panel, separator, right panel -->
|
||||
<div class="top-area">
|
||||
<!-- Left panel: search + cards -->
|
||||
<div class="left-panel">
|
||||
<!-- Search bar and filter -->
|
||||
<div class="search-row">
|
||||
<div class="fake-search"></div>
|
||||
<div class="fake-filter"></div>
|
||||
</div>
|
||||
<!-- Main cards grid (4 columns x 2 rows) -->
|
||||
<div class="grid-4x2">
|
||||
<div class="big-card">
|
||||
<div class="cross"></div>
|
||||
<div class="line"></div>
|
||||
<div class="line"></div>
|
||||
</div>
|
||||
<div class="big-card">
|
||||
<div class="cross"></div>
|
||||
<div class="line"></div>
|
||||
<div class="line"></div>
|
||||
</div>
|
||||
<div class="big-card">
|
||||
<div class="cross"></div>
|
||||
<div class="line"></div>
|
||||
<div class="line"></div>
|
||||
</div>
|
||||
<div class="big-card">
|
||||
<div class="cross"></div>
|
||||
<div class="line"></div>
|
||||
<div class="line"></div>
|
||||
</div>
|
||||
<div class="big-card">
|
||||
<div class="cross"></div>
|
||||
<div class="line"></div>
|
||||
<div class="line"></div>
|
||||
</div>
|
||||
<div class="big-card">
|
||||
<div class="cross"></div>
|
||||
<div class="line"></div>
|
||||
<div class="line"></div>
|
||||
</div>
|
||||
<div class="big-card">
|
||||
<div class="cross"></div>
|
||||
<div class="line"></div>
|
||||
<div class="line"></div>
|
||||
</div>
|
||||
<div class="big-card">
|
||||
<div class="cross"></div>
|
||||
<div class="line"></div>
|
||||
<div class="line"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Vertical separator between panels -->
|
||||
<div class="vertical-separator"></div>
|
||||
<!-- Right panel: library grid -->
|
||||
<div class="right-panel">
|
||||
<!-- Library header (title + add button) vertically centered -->
|
||||
<div class="library-header">
|
||||
<div class="library-header-title">Ma Bibliothèque</div>
|
||||
<div class="fake-add"></div>
|
||||
</div>
|
||||
<!-- Library cards grid (2 columns x 3 rows) -->
|
||||
<div class="library-list">
|
||||
<div class="small-card">
|
||||
<div class="cross"></div>
|
||||
<div class="line"></div>
|
||||
<div class="line"></div>
|
||||
</div>
|
||||
<div class="small-card">
|
||||
<div class="cross"></div>
|
||||
<div class="line"></div>
|
||||
<div class="line"></div>
|
||||
</div>
|
||||
<div class="small-card">
|
||||
<div class="cross"></div>
|
||||
<div class="line"></div>
|
||||
<div class="line"></div>
|
||||
</div>
|
||||
<div class="small-card">
|
||||
<div class="cross"></div>
|
||||
<div class="line"></div>
|
||||
<div class="line"></div>
|
||||
</div>
|
||||
<div class="small-card">
|
||||
<div class="cross"></div>
|
||||
<div class="line"></div>
|
||||
<div class="line"></div>
|
||||
</div>
|
||||
<div class="small-card">
|
||||
<div class="cross"></div>
|
||||
<div class="line"></div>
|
||||
<div class="line"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
214
DEV-IHM/TP/TP-WireFrame/style.css
Normal file
214
DEV-IHM/TP/TP-WireFrame/style.css
Normal file
@@ -0,0 +1,214 @@
|
||||
/* Reset box model and remove default margin/padding */
|
||||
* { box-sizing: border-box; margin: 0; padding: 0; }
|
||||
|
||||
html, body {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
/* Main body styling */
|
||||
body {
|
||||
font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial;
|
||||
background: #ededed;
|
||||
min-height: 100vh;
|
||||
min-width: 100vw;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
/* Main container ("post-it" effect) */
|
||||
.page {
|
||||
width: 96vw;
|
||||
height: 92vh;
|
||||
padding: 2vw;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 8px 20px rgba(0,0,0,0.08);
|
||||
background: #ededed;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
/* Top area: left and right panels */
|
||||
.top-area {
|
||||
display: flex;
|
||||
gap: 32px;
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
/* Vertical separator between panels */
|
||||
.vertical-separator {
|
||||
width: 2px;
|
||||
background: #bbb;
|
||||
border-radius: 2px;
|
||||
align-self: stretch;
|
||||
margin: 0 24px;
|
||||
}
|
||||
|
||||
/* Left panel: search bar + grid */
|
||||
.left-panel {
|
||||
flex: 2.2;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 22px;
|
||||
height: 100%;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
/* Search bar and filter icon row */
|
||||
.search-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 14px;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.fake-search {
|
||||
flex: 1;
|
||||
height: 40px;
|
||||
border: 2px solid #333;
|
||||
border-radius: 8px;
|
||||
background: white;
|
||||
}
|
||||
|
||||
/* Fake filter icon styling */
|
||||
.fake-filter {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 30px;
|
||||
border: 2px solid #333;
|
||||
background: white;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
/* Grid: 4 columns x 2 rows for main cards */
|
||||
.grid-4x2 {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
grid-template-rows: repeat(2, 1fr);
|
||||
gap: 32px;
|
||||
width: 100%;
|
||||
height: 60vh;
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
/* Main card styling */
|
||||
.big-card {
|
||||
background: white;
|
||||
border: 2px solid #333;
|
||||
border-radius: 10px;
|
||||
position: relative;
|
||||
min-width: 0;
|
||||
min-height: 0;
|
||||
aspect-ratio: 3/4;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
overflow: hidden;
|
||||
max-width: 95%;
|
||||
max-height: 95%;
|
||||
}
|
||||
|
||||
/* Wireframe lines under main cards */
|
||||
.big-card .line {
|
||||
width: 80%;
|
||||
height: 2px;
|
||||
background: #222;
|
||||
margin: 0 0 8px 0;
|
||||
border-radius: 2px;
|
||||
}
|
||||
.big-card .line:last-child { margin-bottom: 16px; }
|
||||
|
||||
/* Right panel: library section */
|
||||
.right-panel {
|
||||
flex: 1.1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/* Vertical header for the library */
|
||||
.library-header {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
|
||||
.library-header-title {
|
||||
font-size: 1.1rem;
|
||||
font-weight: bold;
|
||||
background: #ededed;
|
||||
padding: 6px 18px;
|
||||
}
|
||||
|
||||
/* Fake add button styling */
|
||||
.fake-add {
|
||||
width: 42px;
|
||||
height: 42px;
|
||||
border-radius: 50%;
|
||||
border: 2px solid #333;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-weight: 700;
|
||||
font-size: 24px;
|
||||
background: white;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.fake-add::after {
|
||||
content: "+";
|
||||
position: absolute;
|
||||
top: 50%; left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
color: #333;
|
||||
}
|
||||
|
||||
/* Library grid: 2 columns x 3 rows for small cards */
|
||||
.library-list {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
grid-template-rows: repeat(3, 1fr);
|
||||
gap: 32px;
|
||||
width: 80%;
|
||||
height: 70vh;
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
/* Small card styling (vertical) for library */
|
||||
.small-card {
|
||||
background: white;
|
||||
border: 2px solid #333;
|
||||
border-radius: 8px;
|
||||
position: relative;
|
||||
min-width: 0;
|
||||
min-height: 0;
|
||||
aspect-ratio: 3/4;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
overflow: hidden;
|
||||
max-width: 95%;
|
||||
max-height: 95%;
|
||||
}
|
||||
|
||||
/* Wireframe lines under small cards */
|
||||
.small-card .line {
|
||||
width: 70%;
|
||||
height: 2px;
|
||||
background: #222;
|
||||
margin: 0 0 4px 0;
|
||||
border-radius: 2px;
|
||||
}
|
||||
.small-card .line:last-child { margin-bottom: 10px; }
|
||||
BIN
DEV-IHM/TP/TP/BUT2-IHM-TP.pdf
Normal file
BIN
DEV-IHM/TP/TP/BUT2-IHM-TP.pdf
Normal file
Binary file not shown.
BIN
DEV-IHM/TP/TP/TP04_web90s/06. The Heretic Anthem.mp3
Normal file
BIN
DEV-IHM/TP/TP/TP04_web90s/06. The Heretic Anthem.mp3
Normal file
Binary file not shown.
BIN
DEV-IHM/TP/TP/TP04_web90s/eau.gif
Normal file
BIN
DEV-IHM/TP/TP/TP04_web90s/eau.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 493 KiB |
46
DEV-IHM/TP/TP/TP04_web90s/index.html
Normal file
46
DEV-IHM/TP/TP/TP04_web90s/index.html
Normal file
@@ -0,0 +1,46 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Bienvenue chez Slipknot Fan Zone</title>
|
||||
<link rel="stylesheet" href="style.css">
|
||||
</head>
|
||||
<body background="metal.gif" text="#00FF00" link="#FF00FF" vlink="#FFFF00" alink="#FF0000">
|
||||
<embed src="06. The Heretic Anthem.mp3" autostart="true" loop="true" hidden="true">
|
||||
|
||||
<center>
|
||||
<h1 style="font-family: 'Comic Sans MS'; font-size: 40px;">🔥 Slipknot Fan Zone 🔥</h1>
|
||||
<img src="slipknot.gif" alt="Slipknot en action">
|
||||
</center>
|
||||
|
||||
<table border="3" width="90%" align="center" bgcolor="#000000">
|
||||
<tr>
|
||||
<td width="30%" valign="top">
|
||||
<h2 style="font-family: Arial;">🎭 Membres du groupe</h2>
|
||||
<ul>
|
||||
<li>Corey Taylor</li>
|
||||
<li>Jim Root</li>
|
||||
<li>Shawn Crahan</li>
|
||||
<li>Sid Wilson</li>
|
||||
<li>Craig Jones</li>
|
||||
<li>Joey Jordison</li>
|
||||
<li>Chris Fehn</li>
|
||||
<li>Paul Gray</li>
|
||||
<li>Josh Brainard</li>
|
||||
</ul>
|
||||
<img src="eau.gif" alt="Effet eau style 1998">
|
||||
</td>
|
||||
<td width="70%" valign="top">
|
||||
<h2 style="font-family: 'Times New Roman';">📀 À propos</h2>
|
||||
<p>Slipknot est un groupe de metal américain fondé en 1995. Leur style brutal, leurs masques et leur énergie scénique les rendent uniques dans le monde du metal.</p>
|
||||
<p>Albums cultes : <b>Iowa</b>, <b>Vol. 3</b>, <b>We Are Not Your Kind</b></p>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<center>
|
||||
<p style="font-family: 'Comic Sans MS'; font-size: 20px;">Merci de ta visite 🤘</p>
|
||||
</center>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
BIN
DEV-IHM/TP/TP/TP04_web90s/metal.gif
Normal file
BIN
DEV-IHM/TP/TP/TP04_web90s/metal.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 887 KiB |
BIN
DEV-IHM/TP/TP/TP04_web90s/slipknot.gif
Normal file
BIN
DEV-IHM/TP/TP/TP04_web90s/slipknot.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.0 MiB |
16
DEV-IHM/TP/TP/TP04_web90s/style.css
Normal file
16
DEV-IHM/TP/TP/TP04_web90s/style.css
Normal file
@@ -0,0 +1,16 @@
|
||||
body {
|
||||
background-repeat: repeat;
|
||||
background-color: #000000;
|
||||
}
|
||||
|
||||
h1, h2, p, ul {
|
||||
color: #00FF00;
|
||||
}
|
||||
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
td {
|
||||
padding: 15px;
|
||||
}
|
||||
50
DEV-IHM/TP/TP/TP05/index.html
Normal file
50
DEV-IHM/TP/TP/TP05/index.html
Normal file
@@ -0,0 +1,50 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="fr">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Comparaison Flat vs Skeuo - Connexion</title>
|
||||
<link rel="stylesheet" href="style.css">
|
||||
</head>
|
||||
<body>
|
||||
<h1>Flat Design vs Skeuomorphisme</h1>
|
||||
<div class="container-forms">
|
||||
|
||||
<!-- Flat Form -->
|
||||
<section class="login-section flat">
|
||||
<h2>Flat Design</h2>
|
||||
<form>
|
||||
<div class="login-form">
|
||||
<label for="email-flat">Enter your email:</label>
|
||||
<input type="email" name="email-xxx" id="email-xxx" required>
|
||||
</div>
|
||||
<div class="login-form">
|
||||
<label for="password-flat">Enter your password:</label>
|
||||
<input type="password" name="password-flat" id="password-flat">
|
||||
</div>
|
||||
<div class="login-form">
|
||||
<input type="submit" value="Send">
|
||||
</div>
|
||||
</form>
|
||||
</section>
|
||||
|
||||
<!-- Skeuomorphisme Form -->
|
||||
<section class="login-section skeuo">
|
||||
<h2>Skeuomorphisme</h2>
|
||||
<form>
|
||||
<div class="login-form">
|
||||
<label for="email-skeuo">Enter your email:</label>
|
||||
<input type="email" name="email-xxx" id="email-skeuo" required>
|
||||
</div>
|
||||
<div class="login-form">
|
||||
<label for="password-skeuo">Enter your password:</label>
|
||||
<input type="password" name="password-skeuo" id="password-skeuo">
|
||||
</div>
|
||||
<div class="login-form">
|
||||
<input type="submit" value="Send">
|
||||
</div>
|
||||
</form>
|
||||
</section>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
157
DEV-IHM/TP/TP/TP05/style.css
Normal file
157
DEV-IHM/TP/TP/TP05/style.css
Normal file
@@ -0,0 +1,157 @@
|
||||
body {
|
||||
background: #f7f8fa;
|
||||
font-family: 'Segoe UI', Arial, sans-serif;
|
||||
color: #222;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
h1 {
|
||||
text-align: center;
|
||||
margin-top: 32px;
|
||||
margin-bottom: 34px;
|
||||
font-size: 2rem;
|
||||
color: #355;
|
||||
letter-spacing: 0.02em;
|
||||
}
|
||||
|
||||
.container-forms {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
gap: 42px;
|
||||
margin-bottom: 60px;
|
||||
}
|
||||
|
||||
.login-section {
|
||||
width: 350px;
|
||||
min-width: 300px;
|
||||
box-sizing: border-box;
|
||||
margin-bottom: 18px;
|
||||
padding: 26px 22px 22px 22px;
|
||||
border-radius: 18px;
|
||||
box-shadow: none;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.login-section h2 {
|
||||
text-align: center;
|
||||
margin-bottom: 20px;
|
||||
font-size: 1.3rem;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.01em;
|
||||
}
|
||||
|
||||
.login-form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.login-form:last-child {
|
||||
align-items: center;
|
||||
margin-top: 12px;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
/* FLAT DESIGN */
|
||||
.login-section.flat {
|
||||
background: #fff;
|
||||
border: 2px solid #e5eaf1;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.login-section.flat label {
|
||||
font-size: 1rem;
|
||||
font-weight: 500;
|
||||
margin-bottom: 2px;
|
||||
color: #3b3b3b;
|
||||
}
|
||||
|
||||
.login-section.flat input[type="email"],
|
||||
.login-section.flat input[type="password"] {
|
||||
padding: 10px 12px;
|
||||
border: 2px solid #e5e5e5;
|
||||
border-radius: 10px;
|
||||
background: #f5f7fa;
|
||||
font-size: 1rem;
|
||||
outline: none;
|
||||
color: #222;
|
||||
transition: border-color 0.15s;
|
||||
}
|
||||
|
||||
.login-section.flat input[type="email"]:focus,
|
||||
.login-section.flat input[type="password"]:focus {
|
||||
border-color: #339af0;
|
||||
}
|
||||
|
||||
.login-section.flat input[type="submit"] {
|
||||
background: #339af0;
|
||||
color: #fff;
|
||||
border: none;
|
||||
padding: 12px 36px;
|
||||
border-radius: 10px;
|
||||
font-size: 1.1rem;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.2s;
|
||||
}
|
||||
|
||||
.login-section.flat input[type="submit"]:hover {
|
||||
background: #2275c7;
|
||||
}
|
||||
|
||||
/* SKEUOMORPHISME */
|
||||
.login-section.skeuo {
|
||||
background: url('https://www.transparenttextures.com/patterns/wood.png'), #e0cda9;
|
||||
border: 1px solid #d0b077;
|
||||
box-shadow: 0 8px 24px rgba(90, 56, 16, 0.16);
|
||||
border-radius: 22px;
|
||||
}
|
||||
|
||||
.login-section.skeuo label {
|
||||
font-size: 1.06rem;
|
||||
font-weight: 600;
|
||||
margin-bottom: 2px;
|
||||
color: #8b6b3a;
|
||||
text-shadow: 0 1px 0 #fff9e6;
|
||||
}
|
||||
|
||||
.login-section.skeuo input[type="email"],
|
||||
.login-section.skeuo input[type="password"] {
|
||||
padding: 12px 16px;
|
||||
border: none;
|
||||
border-radius: 14px;
|
||||
background: #f5e6c9;
|
||||
font-size: 1rem;
|
||||
color: #4a3a1a;
|
||||
box-shadow: inset 2px 3px 10px #d7c3a3, inset -2px -2px 8px #fff8e1;
|
||||
outline: none;
|
||||
transition: box-shadow 0.15s;
|
||||
}
|
||||
|
||||
.login-section.skeuo input[type="email"]:focus,
|
||||
.login-section.skeuo input[type="password"]:focus {
|
||||
box-shadow: 0 0 0 2px #b08d4b, inset 2px 3px 10px #d7c3a3;
|
||||
}
|
||||
|
||||
.login-section.skeuo input[type="submit"] {
|
||||
background: linear-gradient(180deg, #ffe7b4 0%, #dcb97d 100%);
|
||||
color: #906a2b;
|
||||
border: 1px solid #b08d4b;
|
||||
padding: 14px 40px;
|
||||
border-radius: 14px;
|
||||
font-size: 1.15rem;
|
||||
font-weight: 700;
|
||||
cursor: pointer;
|
||||
box-shadow: 0 3px 0 #b08d4b, 0 8px 20px rgba(132, 108, 61, 0.12);
|
||||
transition: background 0.2s, box-shadow 0.15s;
|
||||
}
|
||||
|
||||
.login-section.skeuo input[type="submit"]:hover {
|
||||
background: linear-gradient(180deg, #ffe7b4 0%, #b08d4b 100%);
|
||||
box-shadow: 0 6px 0 #906a2b, 0 12px 30px rgba(132, 108, 61, 0.22);
|
||||
}
|
||||
|
Before Width: | Height: | Size: 127 KiB After Width: | Height: | Size: 127 KiB |
45
DEV-IHM/TP/TP/TP08/CRITIQUE.md
Normal file
45
DEV-IHM/TP/TP/TP08/CRITIQUE.md
Normal file
@@ -0,0 +1,45 @@
|
||||
|
||||
|
||||
|
||||
# CRITIQUE DU CODE DE LA CARTE PRODUIT
|
||||
|
||||
## 1. Qualité du code
|
||||
|
||||
Le code initial fourni par l’IA **n’était pas parfaitement structuré**. Le HTML et le CSS étaient combinés dans un seul fichier, ce qui rendait le code **difficile à maintenir et peu modulable**. Certaines sections étaient répétitives et manquaient de clarté, notamment le slider et les images.
|
||||
|
||||
Malgré ces défauts, la **structure de base était fonctionnelle et compréhensible**, ce qui m’a permis de l’améliorer sans repartir de zéro. J’ai donc séparé le HTML et le CSS dans des fichiers distincts pour rendre le code plus **propre, modulable et facile à réutiliser**, conformément aux bonnes pratiques que nous avons apprises.
|
||||
|
||||
---
|
||||
|
||||
## 2. Esthétique et fonctionnalité de l’UI
|
||||
|
||||
L’interface utilisateur est **globalement esthétique et fonctionnelle** :
|
||||
|
||||
- La carte est **visuellement agréable**, avec des bords arrondis et un design clair.
|
||||
- Le composant est **responsive**, s’adaptant correctement à différentes tailles d’écran.
|
||||
- J’ai ajouté des **effets d’ombre et de relief au survol**, pour améliorer la perception de profondeur et le rendu interactif.
|
||||
- Le **slider** a aussi été corrigé pour que toutes les images du produit soient affichées correctement et que la navigation via les flèches soit intuitive, sur le code généré par l'IA, quand on slidait à gauche c'etais l'image de droite qui etait visible et inversement (donc probleme de cohérence).
|
||||
|
||||
En résumé, l’UI fonctionne bien et est agréable à utiliser, même si certains éléments comme le compteur d’images n’ont pas été intégrés pour simplifier le code final.
|
||||
|
||||
---
|
||||
|
||||
## 3. Modifications manuelles
|
||||
|
||||
Pour obtenir un résultat conforme à mes attentes, j’ai dû :
|
||||
|
||||
- Séparer le HTML et le CSS pour améliorer la lisibilité et la modularité.
|
||||
- Corriger le **slider** afin que toutes les images s’affichent correctement et que les flèches naviguent dans le sens attendu.
|
||||
- Créer un **dossier `img`** pour organiser les images du produit de manière structurée.
|
||||
- Ajouter des **ombres et des effets de relief au survol** pour rendre la carte plus dynamique.
|
||||
- Nettoyer et simplifier certaines sections répétitives ou complexes pour rendre le code plus lisible et facile à maintenir.
|
||||
- Ajuster la **position verticale de la carte** pour qu’elle soit centrée sur la page et visuellement harmonieuse.
|
||||
|
||||
---
|
||||
|
||||
## 4. Gain de temps
|
||||
|
||||
L’utilisation de l’IA a permis un **gain de temps considérable (70%)** par rapport à un codage complet depuis zéro. La structure initiale était déjà présente et fonctionnelle : il a suffi de **corriger, réorganiser et améliorer certains détails** pour obtenir un résultat propre et professionnel.
|
||||
|
||||
Cette expérience montre que l’IA est un outil extrêmement utile, mais **elle ne remplace pas l’expertise humaine** : un bon développeur sait détecter les problèmes, structurer le code et l’adapter pour obtenir un résultat optimal, alors qu’un développeur moins expérimenté pourrait ne pas identifier les limites ou erreurs du code généré par l’IA.
|
||||
|
||||
BIN
DEV-IHM/TP/TP/TP08/Correction_code/img/img1.jpg
Normal file
BIN
DEV-IHM/TP/TP/TP08/Correction_code/img/img1.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 40 KiB |
BIN
DEV-IHM/TP/TP/TP08/Correction_code/img/img2.jpeg
Normal file
BIN
DEV-IHM/TP/TP/TP08/Correction_code/img/img2.jpeg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 201 KiB |
BIN
DEV-IHM/TP/TP/TP08/Correction_code/img/img3.jpeg
Normal file
BIN
DEV-IHM/TP/TP/TP08/Correction_code/img/img3.jpeg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.1 KiB |
76
DEV-IHM/TP/TP/TP08/Correction_code/index.html
Normal file
76
DEV-IHM/TP/TP/TP08/Correction_code/index.html
Normal file
@@ -0,0 +1,76 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="fr">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Carte produit</title>
|
||||
<link rel="stylesheet" href="style.css">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<article class="card">
|
||||
|
||||
<!-- Radio buttons -->
|
||||
<input type="radio" name="slider" id="slide1" checked>
|
||||
<input type="radio" name="slider" id="slide2">
|
||||
<input type="radio" name="slider" id="slide3">
|
||||
|
||||
<!-- Slider -->
|
||||
<div class="slider">
|
||||
<div class="slides">
|
||||
<img src="img/img1.jpg" alt="Image 1" class="slide">
|
||||
<img src="img/img2.jpeg" alt="Image 2" class="slide">
|
||||
<img src="img/img3.jpeg" alt="Image 3" class="slide">
|
||||
</div>
|
||||
|
||||
<!-- Flèches gauche/droite -->
|
||||
<label for="slide3" class="prev slide1">❮</label>
|
||||
<label for="slide2" class="next slide1">❯</label>
|
||||
|
||||
<label for="slide1" class="prev slide2">❮</label>
|
||||
<label for="slide3" class="next slide2">❯</label>
|
||||
|
||||
<label for="slide2" class="prev slide3">❮</label>
|
||||
<label for="slide1" class="next slide3">❯</label>
|
||||
|
||||
<!-- Compteur -->
|
||||
<div class="counter">1/3</div>
|
||||
</div>
|
||||
|
||||
<!-- Contenu produit -->
|
||||
<div class="card-content">
|
||||
<h3 class="card-title">Sneakers Nimbus X</h3>
|
||||
<div class="flex justify-between items-center">
|
||||
<!-- Note -->
|
||||
<!-- Note : 4 sur 5 -->
|
||||
<div class="card-stars flex gap-1" aria-label="Note : 4 sur 5">
|
||||
<!-- 4 étoiles jaunes -->
|
||||
<svg viewBox="0 0 20 20" fill="currentColor" class="text-yellow-400 h-5 w-5">
|
||||
<path d="M9.05 2.93l1.07 3.29h3.46l-2.8 2.03 1.07 3.29-2.8-2.04-2.8 2.04 1.07-3.29-2.8-2.03h3.46z"/>
|
||||
</svg>
|
||||
<svg viewBox="0 0 20 20" fill="currentColor" class="text-yellow-400 h-5 w-5">
|
||||
<path d="M9.05 2.93l1.07 3.29h3.46l-2.8 2.03 1.07 3.29-2.8-2.04-2.8 2.04 1.07-3.29-2.8-2.03h3.46z"/>
|
||||
</svg>
|
||||
<svg viewBox="0 0 20 20" fill="currentColor" class="text-yellow-400 h-5 w-5">
|
||||
<path d="M9.05 2.93l1.07 3.29h3.46l-2.8 2.03 1.07 3.29-2.8-2.04-2.8 2.04 1.07-3.29-2.8-2.03h3.46z"/>
|
||||
</svg>
|
||||
<svg viewBox="0 0 20 20" fill="currentColor" class="text-yellow-400 h-5 w-5">
|
||||
<path d="M9.05 2.93l1.07 3.29h3.46l-2.8 2.03 1.07 3.29-2.8-2.04-2.8 2.04 1.07-3.29-2.8-2.03h3.46z"/>
|
||||
</svg>
|
||||
<!-- 1 étoile grise -->
|
||||
<svg viewBox="0 0 20 20" fill="currentColor" class="text-gray-300 h-5 w-5">
|
||||
<path d="M9.05 2.93l1.07 3.29h3.46l-2.8 2.03 1.07 3.29-2.8-2.04-2.8 2.04 1.07-3.29-2.8-2.03h3.46z"/>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
|
||||
<p class="card-price">129,90 €</p>
|
||||
</div>
|
||||
|
||||
<button class="card-button">Ajouter au panier</button>
|
||||
</div>
|
||||
|
||||
</article>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
97
DEV-IHM/TP/TP/TP08/Correction_code/style.css
Normal file
97
DEV-IHM/TP/TP/TP08/Correction_code/style.css
Normal file
@@ -0,0 +1,97 @@
|
||||
/* Base */
|
||||
body {
|
||||
font-family: sans-serif;
|
||||
background-color: #f9fafb;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: flex-start; /* pour pouvoir ajuster le margin-top */
|
||||
padding: 2rem;
|
||||
}
|
||||
|
||||
/* Descendre la carte vers le milieu */
|
||||
.card {
|
||||
max-width: 24rem;
|
||||
background-color: white;
|
||||
border-radius: 1.5rem;
|
||||
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
|
||||
overflow: hidden;
|
||||
transition: transform 0.3s, box-shadow 0.3s;
|
||||
margin-top: 8rem; /* ajuste la position verticale */
|
||||
}
|
||||
.card:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 8px 20px rgba(0,0,0,0.15);
|
||||
}
|
||||
|
||||
/* Slider */
|
||||
.slider { position: relative; overflow: hidden; height: 16rem; }
|
||||
.slides { display: flex; transition: transform 0.5s ease-in-out; }
|
||||
.slide { min-width: 100%; object-fit: cover; height: 16rem; }
|
||||
|
||||
/* Radio buttons */
|
||||
input[name="slider"] { display: none; }
|
||||
|
||||
/* Slider dynamique */
|
||||
#slide1:checked ~ .slider .slides { transform: translateX(0%); }
|
||||
#slide2:checked ~ .slider .slides { transform: translateX(-100%); }
|
||||
#slide3:checked ~ .slider .slides { transform: translateX(-200%); }
|
||||
|
||||
/* Flèches */
|
||||
.prev, .next {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
background: rgba(255,255,255,0.9);
|
||||
width: 2rem; height: 2rem;
|
||||
display: none;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
border-radius: 9999px;
|
||||
cursor: pointer;
|
||||
font-weight: bold;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
/* Affichage flèches selon slide */
|
||||
#slide1:checked ~ .slider label.prev.slide1,
|
||||
#slide1:checked ~ .slider label.next.slide1,
|
||||
#slide2:checked ~ .slider label.prev.slide2,
|
||||
#slide2:checked ~ .slider label.next.slide2,
|
||||
#slide3:checked ~ .slider label.prev.slide3,
|
||||
#slide3:checked ~ .slider label.next.slide3 {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.prev { left: 0.5rem; }
|
||||
.next { right: 0.5rem; }
|
||||
|
||||
/* Compteur */
|
||||
.counter {
|
||||
position: absolute;
|
||||
bottom: 0.5rem;
|
||||
right: 0.5rem;
|
||||
background: rgba(0,0,0,0.6);
|
||||
color: white;
|
||||
padding: 0.25rem 0.5rem;
|
||||
border-radius: 9999px;
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
|
||||
/* Contenu produit */
|
||||
.card-content { padding: 1rem; }
|
||||
.card-title { font-size: 1.125rem; font-weight: 600; color: #111827; }
|
||||
.card-price { font-size: 1.125rem; font-weight: 600; color: #111827; }
|
||||
.card-stars svg { height: 1.25rem; width: 1.25rem; }
|
||||
.card-button {
|
||||
width: 100%;
|
||||
background-color: #4f46e5;
|
||||
color: white;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 500;
|
||||
padding: 0.625rem;
|
||||
border-radius: 0.75rem;
|
||||
margin-top: 0.5rem;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.3s;
|
||||
}
|
||||
.card-button:hover { background-color: #4338ca; }
|
||||
82
DEV-IHM/TP/TP/TP08/genere_ia.html
Normal file
82
DEV-IHM/TP/TP/TP08/genere_ia.html
Normal file
@@ -0,0 +1,82 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="fr">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Carte produit – Slider CSS</title>
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<style>
|
||||
/* Slider */
|
||||
.slider { position: relative; overflow: hidden; height: 16rem; }
|
||||
.slides { display: flex; transition: transform 0.5s ease-in-out; }
|
||||
.slide { min-width: 100%; }
|
||||
input[name="slider"] { display: none; }
|
||||
|
||||
/* Changement des slides via :checked */
|
||||
#slide1:checked ~ .slider .slides { transform: translateX(0%); }
|
||||
#slide2:checked ~ .slider .slides { transform: translateX(-100%); }
|
||||
#slide3:checked ~ .slider .slides { transform: translateX(-200%); }
|
||||
|
||||
/* Flèches CSS */
|
||||
.prev, .next {
|
||||
position: absolute; top: 50%; transform: translateY(-50%);
|
||||
background: rgba(255,255,255,0.8); width: 2rem; height: 2rem;
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
border-radius: 9999px; cursor: pointer; font-weight: bold;
|
||||
}
|
||||
.prev { left: 0.5rem; }
|
||||
.next { right: 0.5rem; }
|
||||
|
||||
/* Compteur */
|
||||
.counter { position: absolute; bottom: 0.5rem; right: 0.5rem;
|
||||
background: rgba(0,0,0,0.6); color: white; padding: 0.25rem 0.5rem;
|
||||
border-radius: 9999px; font-size: 0.75rem; }
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-gray-50 min-h-screen flex items-center justify-center p-6">
|
||||
|
||||
<article class="group w-full max-w-sm rounded-2xl bg-white ring-1 ring-gray-200 shadow-sm hover:shadow-lg transition hover:-translate-y-0.5">
|
||||
|
||||
<!-- Radio buttons pour le slider -->
|
||||
<input type="radio" name="slider" id="slide1" checked>
|
||||
<input type="radio" name="slider" id="slide2">
|
||||
<input type="radio" name="slider" id="slide3">
|
||||
|
||||
<!-- Slider -->
|
||||
<div class="slider relative overflow-hidden rounded-t-2xl">
|
||||
<div class="slides flex">
|
||||
<img src="https://picsum.photos/seed/shoe1/800/600" alt="Sneakers Nimbus X - Image 1" class="slide object-cover h-64 w-full">
|
||||
<img src="https://picsum.photos/seed/shoe2/800/600" alt="Sneakers Nimbus X - Image 2" class="slide object-cover h-64 w-full">
|
||||
<img src="https://picsum.photos/seed/shoe3/800/600" alt="Sneakers Nimbus X - Image 3" class="slide object-cover h-64 w-full">
|
||||
</div>
|
||||
|
||||
<!-- Flèches pour changer l'image -->
|
||||
<label for="slide3" class="prev">❮</label>
|
||||
<label for="slide2" class="next">❯</label>
|
||||
<div class="counter">1/3</div>
|
||||
</div>
|
||||
|
||||
<!-- Contenu -->
|
||||
<div class="p-4 space-y-3">
|
||||
<h3 class="text-lg font-semibold text-gray-900">Sneakers Nimbus X</h3>
|
||||
|
||||
<div class="flex items-center justify-between">
|
||||
<!-- Note -->
|
||||
<div class="flex items-center gap-1" aria-label="Note : 4 sur 5">
|
||||
<svg class="h-5 w-5 text-yellow-400" viewBox="0 0 20 20"><path fill="currentColor" d="M9.05 2.93c.3-.92 1.6-.92 1.9 0l1.07 3.29a1 1 0 0 0 .95.69h3.46c.97 0 1.37 1.24.59 1.81l-2.8 2.03a1 1 0 0 0-.36 1.12l1.07 3.29c.3.92-.76 1.69-1.54 1.12l-2.8-2.04a1 1 0 0 0-1.18 0l-2.8 2.04c-.78.57-1.84-.2-1.54-1.12l1.07-3.29a1 1 0 0 0-.36-1.12L2.88 8.72c-.78-.57-.38-1.81.59-1.81h3.46a1 1 0 0 0 .95-.69l1.07-3.29Z"/></svg>
|
||||
<svg class="h-5 w-5 text-yellow-400" viewBox="0 0 20 20"><path fill="currentColor" d="M9.05 2.93c.3-.92 1.6-.92 1.9 0l1.07 3.29a1 1 0 0 0 .95.69h3.46c.97 0 1.37 1.24.59 1.81l-2.8 2.03a1 1 0 0 0-.36 1.12l1.07 3.29c.3.92-.76 1.69-1.54 1.12l-2.8-2.04a1 1 0 0 0-1.18 0l-2.8 2.04c-.78.57-1.84-.2-1.54-1.12l1.07-3.29a1 1 0 0 0-.36-1.12L2.88 8.72c-.78-.57-.38-1.81.59-1.81h3.46a1 1 0 0 0 .95-.69l1.07-3.29Z"/></svg>
|
||||
<svg class="h-5 w-5 text-yellow-400" viewBox="0 0 20 20"><path fill="currentColor" d="M9.05 2.93c.3-.92 1.6-.92 1.9 0l1.07 3.29a1 1 0 0 0 .95.69h3.46c.97 0 1.37 1.24.59 1.81l-2.8 2.03a1 1 0 0 0-.36 1.12l1.07 3.29c.3.92-.76 1.69-1.54 1.12l-2.8-2.04a1 1 0 0 0-1.18 0l-2.8 2.04c-.78.57-1.84-.2-1.54-1.12l1.07-3.29a1 1 0 0 0-.36-1.12L2.88 8.72c-.78-.57-.38-1.81.59-1.81h3.46a1 1 0 0 0 .95-.69l1.07-3.29Z"/></svg>
|
||||
<svg class="h-5 w-5 text-yellow-400" viewBox="0 0 20 20"><path fill="currentColor" d="M9.05 2.93c.3-.92 1.6-.92 1.9 0l1.07 3.29a1 1 0 0 0 .95.69h3.46c.97 0 1.37 1.24.59 1.81l-2.8 2.03a1 1 0 0 0-.36 1.12l1.07 3.29c.3.92-.76 1.69-1.54 1.12l-2.8-2.04a1 1 0 0 0-1.18 0l-2.8 2.04c-.78.57-1.84-.2-1.54-1.12l1.07-3.29a1 1 0 0 0-.36-1.12L2.88 8.72c-.78-.57-.38-1.81.59-1.81h3.46a1 1 0 0 0 .95-.69l1.07-3.29Z"/></svg>
|
||||
<svg class="h-5 w-5 text-gray-300" viewBox="0 0 20 20"><path fill="currentColor" d="M9.05 2.93c.3-.92 1.6-.92 1.9 0l1.07 3.29a1 1 0 0 0 .95.69h3.46c.97 0 1.37 1.24.59 1.81l-2.8 2.03a1 1 0 0 0-.36 1.12l1.07 3.29c.3.92-.76 1.69-1.54 1.12l-2.8-2.04a1 1 0 0 0-1.18 0l-2.8 2.04c-.78.57-1.84-.2-1.54-1.12l1.07-3.29a1 1 0 0 0-.36-1.12L2.88 8.72c-.78-.57-.38-1.81.59-1.81h3.46a1 1 0 0 0 .95-.69l1.07-3.29Z"/></svg>
|
||||
</div>
|
||||
|
||||
<p class="text-lg font-semibold text-gray-900">129,90 €</p>
|
||||
</div>
|
||||
|
||||
<button class="w-full rounded-xl bg-indigo-600 text-white text-sm font-medium py-2.5 hover:bg-indigo-700">Ajouter au panier</button>
|
||||
</div>
|
||||
|
||||
</article>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
24
README.md
Normal file
24
README.md
Normal file
@@ -0,0 +1,24 @@
|
||||
# DEV Repository
|
||||
|
||||
Ce dépôt contient tous mes cours, TP, et contrôles machines réalisés dans le cadre de mon BUT Informatique. Les fichiers sont organisés par modules et par thématiques, comme suit :
|
||||
|
||||
## Structure du dépôt
|
||||
|
||||
- **DEV-IHM** : Contient les travaux pratiques et wireframes liés à l'IHM (Interface Homme-Machine).
|
||||
- **DEV.1.1** : Cours et TP de développement en C, incluant des exercices sur les structures, les piles et files, et l'allocation dynamique.
|
||||
- **DEV.1.2** : Contient des fichiers HTML, CSS, et des scripts en C pour des projets divers.
|
||||
- **DEV.2.1** : Cours avancés et TP en développement, incluant des projets en Java et des tests.
|
||||
- **DEV.2.2** : Travaux pratiques supplémentaires pour approfondir les concepts vus en cours.
|
||||
- **DEV.2.3** : Suite des TP et projets pour renforcer les compétences en développement.
|
||||
- **DEV.3.1** : Cours et TP avancés, en java alliant base de données en ligne et code.
|
||||
|
||||
## Contenu par langage
|
||||
|
||||
- **C** : Structures, piles et files, allocation dynamique, et autres concepts fondamentaux.
|
||||
- **HTML/CSS** : Création de pages web statiques et stylisées.
|
||||
- **Java** : Concepts avancés de programmation orientée objet.
|
||||
- **PHP** : Scripts pour le développement web dynamique.
|
||||
|
||||
## Auteur
|
||||
|
||||
Ce dépôt a été créé par Emmanuel SRIVASTAVA-TIAMZON dans le cadre du BUT Informatique.
|
||||
Reference in New Issue
Block a user