electropositron/pangloss
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

better graphics

Browse source
This commit is contained in:
electro positron 2024-11-09 04:11:16 +01:00
parent 34fc78ad15
commit d95da5c2ee
3 changed files with 114 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
app/bethellen.otf Normal file
View file

Binary file not shown.

21
app/index.html
View file

@ -7,16 +7,27 @@
<script src="script.js"></script>
</head>
<body>
<div id="commandes">
<nav>
<!-- barre de commandes -->
<h2>Nouvelle tâche</h2>
<hr>
<label for="nom">Nom de la tâche</label>
<input type="text" id="nom" name ="nom"/>
</div>
<div>
<label for="duree">Durée de la tâche (en h)</label>
<input type="number" id="duree" name ="duree"/>
</div>
<button type="button" onclick="createtask()">Créer</button>
<button type="button" onclick="createtask()">Créer</button>
<div class="separateur"></div>
<h2>
Trier par
</h2>
<hr>
<button type="button" onclick="triduree">Durée (décroissant)</button>
</nav>
<!-- fin barre de commandes -->
<div id = "conteneur">
<!-- Les tâches sont ajoutées ici via javascript -->

103
app/style.css
View file

@ -1,12 +1,100 @@
@font-face {
font-family: bethellen;
src: url('bethellen.otf') format('opentype');
}
body{
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
background-image: url(https://t3.ftcdn.net/jpg/09/18/51/88/360_F_918518811_e0Wh732g7nIS9hsyi7ox9wWhguruEEgx.jpg);
background-size: 500px;
font-weight: 300;
font-weight: 400;
display: flex;
flex-direction: row;
margin:0;
color: rgb(75, 56, 8);
}
h2{
font-weight: 500;
margin: 0;
}
.separateur{
height: 50px;
}
hr{
border-radius: solid 1px;
border-radius: 50%;
opacity: 50%;
width: 85%;
margin-top: 5px;
margin-bottom: 15px;
}
nav{
max-width: 300px;
flex: 3;
display: flex;
flex-direction: column;
align-items: center;
min-height: 100vh;
text-align: center;
padding:15px;
background-image: url('https://img.freepik.com/free-photo/yellow-sponge-rubber-texture-background_1373-524.jpg?semt=ais_hybrid');
background-size: 300px;
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}
input{
color: inherit;
font-size: medium;
width: 80%;
padding: 8px;
border-radius: 5px;
background-color: lightyellow;
border: none;
margin-top: 5px;
margin-bottom: 25px;
box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
}
label{
margin-top: 10px;
font-weight: 400;
color: rgb(75, 56, 8);
font-size: large;
}
button{
color: inherit;
font-size: larger;
font-weight: 500;
border-radius: 5px;
min-width: 85%;
border: none;
background-color: lightyellow;
padding: 10px;
box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
}
button:hover{
background-color: yellow;
rotate:(-1deg);
-moz-transform: rotate(-1deg);
-o-transform: rotate(-1deg);
-ms-transform: rotate(-1deg);
transform: rotate(-1deg);
}
#conteneur{
margin: 20px;
flex: 7;
padding: 10px;
}
#commandes{
@ -15,21 +103,26 @@ body{
}
.tache{
font-family: bethellen;
line-height: 1.5;
display: flex;
margin:10px;
flex-direction: column;
align-items: center;
width: 200px;
height : 100px;
background-color: gold;
box-shadow: rgba(0, 0, 0, 0.1) 0px 20px 25px -5px, rgba(0, 0, 0, 0.04) 0px 10px 10px -5px;
padding: 15px;
rotate:(2deg);
-moz-transform: rotate(2deg);
-o-transform: rotate(2deg);
-ms-transform: rotate(2deg);
transform: rotate(2deg);
}
.titre_tache{
margin:0;
padding-top:10px;
text-transform:uppercase;
font-weight: 400;
text-align: center;
}