README principal et dev-ihm
This commit is contained in:
EmmanuelTiamzon
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; }
|
||||
Reference in New Issue
Block a user