premier commit je sais pas ce que je fais
This commit is contained in:
17
assets/bassines.json
Executable file
17
assets/bassines.json
Executable file
@@ -0,0 +1,17 @@
|
||||
{"bassines":[
|
||||
{"Nom":"Grande bassine ronde en fer","tare":6.500},
|
||||
{"Nom":"Grande bassine ronde verte","tare":2.700},
|
||||
{"Nom":"Grande bassine ronde verte","tare":2.700},
|
||||
{"Nom":"Grande bassine ronde verte","tare":2.700},
|
||||
{"Nom":"Moyenne bassine ovale en fer","tare":6.000},
|
||||
{"Nom":"Petite bassine ronde en fer","tare":2.700},
|
||||
{"Nom":"Petite bassine ronde bleue (Tonton Pierre)","tare":1.700},
|
||||
{"Nom":"Petite bassine ronde verte (JM)","tare":1.700},
|
||||
{"Nom":"Grande bassine verte","tare":2.700},
|
||||
{"Nom":"Moyenne bassine ronde (Couenne)","tare":4.900},
|
||||
{"Nom":"Grande bassine ovale en fer (Jeannot)","tare":6.000},
|
||||
{"Nom":"Caisse grise","tare":2.450},
|
||||
{"Nom":"Caisse verte","tare":2.600},
|
||||
{"Nom":"Bassine bleue (JM1)","tare":2.500},
|
||||
{"Nom":"Bassine verte (JM3)","tare":2.700}
|
||||
]}
|
||||
248
assets/style.css
Executable file
248
assets/style.css
Executable file
@@ -0,0 +1,248 @@
|
||||
/* =========================================================
|
||||
1️⃣ RESET GÉNÉRAL
|
||||
========================================================= */
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* =========================================================
|
||||
2️⃣ BASE GLOBALE
|
||||
========================================================= */
|
||||
body {
|
||||
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
|
||||
Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
|
||||
font-size: 10pt;
|
||||
padding: 3mm;
|
||||
color: #000;
|
||||
background-color: #344d59d5;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* =========================================================
|
||||
3️⃣ TABLEAUX
|
||||
========================================================= */
|
||||
table {
|
||||
margin: 2mm auto;
|
||||
width: auto;
|
||||
max-width: calc(297mm - 6mm);
|
||||
border: 2px solid #b8cbd0;
|
||||
border-radius: 7px;
|
||||
border-collapse: separate;
|
||||
border-spacing: 0;
|
||||
overflow: hidden;
|
||||
text-align: center;
|
||||
font-size: 9pt;
|
||||
}
|
||||
|
||||
table+table {
|
||||
margin-top: 1mm;
|
||||
}
|
||||
|
||||
th,
|
||||
td {
|
||||
border: 2px solid #b8cbd0;
|
||||
background-clip: padding-box;
|
||||
padding: 2px 4px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
#TableauBassines,
|
||||
#TableauRendement,
|
||||
#TableauProportions {
|
||||
background-color: #709ca7;
|
||||
}
|
||||
|
||||
#TableauTotaux {
|
||||
background-color: #137c8b;
|
||||
}
|
||||
|
||||
#TableauRendement {
|
||||
margin: 2mm auto !important;
|
||||
display: table;
|
||||
float: none !important;
|
||||
clear: both;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.form-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 0fr repeat(4, auto);
|
||||
grid-template-rows: repeat(3, auto);
|
||||
grid-column-gap: 0px;
|
||||
grid-row-gap: 0px;
|
||||
}
|
||||
|
||||
#tabProp {
|
||||
grid-area: 2 / 3 / 3 / 4;
|
||||
}
|
||||
|
||||
#button-wrapper {
|
||||
grid-area: 2 / 4 / 3 / 5;
|
||||
}
|
||||
|
||||
#tabBass {
|
||||
grid-area: 3 / 2 / 4 / 6;
|
||||
}
|
||||
|
||||
#tabTot {
|
||||
grid-area: 4 / 3 / 5 / 4;
|
||||
}
|
||||
|
||||
#tabRend {
|
||||
grid-area: 4 / 4 / 5 / 5;
|
||||
}
|
||||
|
||||
.button-wrapper {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/* =========================================================
|
||||
4️⃣ FORMULAIRES — CASES À COCHER
|
||||
========================================================= */
|
||||
|
||||
input[type="checkbox"] {
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
margin: 0 4px;
|
||||
border: 2px solid #6b6b6b;
|
||||
border-radius: 6px;
|
||||
background: #fff;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
transition: border-color 0.12s ease;
|
||||
}
|
||||
|
||||
input[type="checkbox"]::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
width: 6px;
|
||||
height: 9px;
|
||||
border: solid #000;
|
||||
border-width: 0 3px 3px 0;
|
||||
transform: translate(-50%, -80%) rotate(43deg);
|
||||
opacity: 0;
|
||||
transition: opacity 0.12s ease, transform 0.12s ease;
|
||||
}
|
||||
|
||||
input[type="checkbox"]:checked {
|
||||
border-color: #4f4f4f;
|
||||
}
|
||||
|
||||
input[type="checkbox"]:checked::after {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
input[type="checkbox"]:focus {
|
||||
outline: none;
|
||||
box-shadow: 0 0 0 3px rgba(19, 124, 139, 0.15);
|
||||
}
|
||||
|
||||
/* =========================================================
|
||||
5️⃣ BOUTONS — STYLE GOOGLE MATERIAL
|
||||
========================================================= */
|
||||
|
||||
#button-wrapper {
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
#button-wrapper .button-17 {
|
||||
justify-content: center;
|
||||
appearance: none;
|
||||
border: none;
|
||||
border-radius: 24px;
|
||||
background: #fff;
|
||||
color: #3c4043;
|
||||
font-family: "Google Sans", Roboto, Arial, sans-serif;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
letter-spacing: 0.25px;
|
||||
height: 48px;
|
||||
padding: 2px 24px;
|
||||
cursor: pointer;
|
||||
text-align: center;
|
||||
user-select: none;
|
||||
touch-action: manipulation;
|
||||
}
|
||||
|
||||
#button-wrapper .button-17:hover {
|
||||
background: #f6f9fe;
|
||||
color: #174ea6;
|
||||
box-shadow: rgba(60, 64, 67, 0.3) 0 2px 3px,
|
||||
rgba(60, 64, 67, 0.15) 0 6px 10px 4px;
|
||||
}
|
||||
|
||||
#button-wrapper .button-17:active {
|
||||
box-shadow: rgba(60, 64, 67, 0.3) 0 4px 4px,
|
||||
rgba(60, 64, 67, 0.15) 0 8px 12px 6px;
|
||||
}
|
||||
|
||||
#button-wrapper .button-17:disabled {
|
||||
cursor: default;
|
||||
opacity: 0.7;
|
||||
box-shadow: rgba(60, 64, 67, 0.3) 0 1px 3px,
|
||||
rgba(60, 64, 67, 0.15) 0 4px 8px 3px;
|
||||
}
|
||||
|
||||
/* =========================================================
|
||||
6️⃣ IMPRESSION — FORMAT A4 PAYSAGE
|
||||
========================================================= */
|
||||
@media print {
|
||||
@page {
|
||||
size: A4 landscape;
|
||||
margin: 3mm;
|
||||
}
|
||||
|
||||
html,
|
||||
body {
|
||||
width: 297mm;
|
||||
height: 210mm;
|
||||
margin: 0;
|
||||
padding: 3mm;
|
||||
background: none !important;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
table {
|
||||
font-size: 8.5pt;
|
||||
margin: 0;
|
||||
page-break-inside: avoid;
|
||||
break-inside: avoid;
|
||||
}
|
||||
|
||||
th,
|
||||
td {
|
||||
padding: 1px 3px;
|
||||
font-size: 8.5pt;
|
||||
}
|
||||
|
||||
input[type="checkbox"] {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
}
|
||||
|
||||
body>* {
|
||||
transform-origin: top left;
|
||||
transform: scale(0.94);
|
||||
}
|
||||
|
||||
/* Masquer tous les boutons et éléments non imprimables */
|
||||
.no-print{
|
||||
display: none !important;
|
||||
visibility: hidden !important;
|
||||
}
|
||||
}
|
||||
81
assets/style2.css
Executable file
81
assets/style2.css
Executable file
@@ -0,0 +1,81 @@
|
||||
body {
|
||||
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
|
||||
padding: 0px;
|
||||
background-color: #344d59d5;
|
||||
color: rgb(0, 0, 0);
|
||||
}
|
||||
td{
|
||||
min-width: 70px;
|
||||
width: max-content;
|
||||
}
|
||||
|
||||
#grandTitre {
|
||||
padding-left: 2%;
|
||||
}
|
||||
|
||||
.ligneTableauProportions{
|
||||
margin-bottom: 2%;
|
||||
}
|
||||
|
||||
#TableauProportions {
|
||||
margin-left: 2%;
|
||||
margin-top: 2%;
|
||||
}
|
||||
|
||||
#TableauProportions>tr {
|
||||
margin-bottom: 3%;
|
||||
}
|
||||
|
||||
#TableauBassines {
|
||||
margin-left: 2%;
|
||||
margin-top: 2%;
|
||||
border-collapse: collapse;
|
||||
border: 2px solid #B8CBD0;
|
||||
background-color: #709CA7;
|
||||
text-align: center;
|
||||
min-width: 150px;
|
||||
}
|
||||
|
||||
#Titres_tableau {
|
||||
background-color: #137C8B;
|
||||
border: 2px solid #B8CBD0;
|
||||
}
|
||||
.NomBassine {
|
||||
background-color: #137C8B;
|
||||
border: 2px solid #B8CBD0;
|
||||
}
|
||||
|
||||
.tdBassine {
|
||||
padding: 5px;
|
||||
border: 2px solid #B8CBD0;
|
||||
}
|
||||
|
||||
#TableauTotaux{
|
||||
text-align: center;
|
||||
margin-left: 2%;
|
||||
background-color: #137C8B;
|
||||
border-collapse: collapse;
|
||||
border: 2px solid #B8CBD0;
|
||||
}
|
||||
|
||||
.cellule_totaux{
|
||||
border: 2px solid #B8CBD0;
|
||||
min-width: 150px;
|
||||
width: max-content;
|
||||
}
|
||||
|
||||
#TableauRendement{
|
||||
text-align: center;
|
||||
margin-left: 2%;
|
||||
background-color: #709CA7;
|
||||
border-collapse: collapse;
|
||||
border: 2px solid #B8CBD0;
|
||||
}
|
||||
|
||||
.tdRendement{
|
||||
border: 2px solid #B8CBD0;
|
||||
min-width: 60px;
|
||||
width: max-content;
|
||||
padding-left: 10px;
|
||||
padding-right: 10px;
|
||||
}
|
||||
Reference in New Issue
Block a user