Skip to content

GitLab

Commit 535de366 authored by Zéfling's avatar Zéfling 🎨
Browse files

new design for the demo

parent b6ef36d8
Hide whitespace changes
Inline Side-by-side
Showing with 264 additions and 116 deletions
src/app/app.component.html
View file @ 535de366
......@@ -3,98 +3,99 @@
<main>
<form>
<fieldset>
<fieldset class="source-fieldset">
<legend>Base</legend>
<label>Color : <input type="text"
<label>Color: <input type="text"
[(value)]="baseColor"
(change)="baseColor = $event.target.value"
placeholder="black, #000, rgb(0,0,0), hsl(0,0%,0%)"
title="black, #000, rgb(0,0,0), hsl(0,0%,0%)"></label>
<div [style.background-color]="baseColor">&nbsp;</div>
<div class="source"
*ngIf="baseColor">
<div [style.background-color]="baseColor">&nbsp;</div>
</div>
</fieldset>
<fieldset>
<fieldset class="additionnal">
<legend>Additionnal</legend>
<div class="additionnal">
<div class="luminosity">
<label> <span>Luminosity [-1; 1]:</span><input type="number"
min="-1.000"
max="1.000"
step="0.001"
[value]="luminosity"
(change)="luminosity = $event.target.value"></label>
</div>
<div class="red">
<label><span>Red [-256; 256]:</span><input type="number"
min="-256"
max="256"
step="1"
[value]="red"
(change)="red = $event.target.value"></label>
</div>
<div class="green">
<label><span>Green [-256; 256]:</span><input type="number"
min="-255"
max="256"
step="1"
[value]="green"
(change)="green = $event.target.value"></label>
</div>
<div class="blue">
<label><span>Blue [-256; 256]:</span><input type="number"
min="-255"
max="256"
step="1"
[value]="blue"
(change)="blue = $event.target.value"></label>
</div>
<div class="hue">
<label><span>Hue [-360; 360]°:</span><input type="number"
max="-360"
max="360"
step="1"
[value]="hue"
(change)="hue = $event.target.value"></label>
</div>
<div class="saturation">
<label><span>Saluration [-100; 100]%:</span><input type="number"
min="-100"
max="100"
step="1"
[value]="saturation"
(change)="saturation = $event.target.value"></label>
</div>
<div class="value">
<label><span>Value [-100; 100]%:</span><input type="number"
min="-100"
max="100"
step="1"
[value]="value"
(change)="value = $event.target.value"></label>
</div>
<div class="maskColor">
<label><span>Mask color:</span><input type="text"
[value]="maskColor"
(change)="maskColor = $event.target.value"
placeholder="black, #000, rgb(0,0,0), hsl(0,0%,0%)"
title="black, #000, rgb(0,0,0), hsl(0,0%,0%)"></label>
</div>
<div class="maskOpacity">
<label><span>+ Mask opacity [0; 1]:</span><input type="number"
min="0"
max="1"
step="0.001"
[value]="maskOpacity"
(change)="maskOpacity = $event.target.value"></label>
</div>
<div class="alpha">
<label><span>Alpha [-1; 1]:</span><input type="number"
min="-1.000"
max="1.000"
step="0.001"
[value]="alpha"
(change)="alpha = $event.target.value"></label>
</div>
<div class="luminosity">
<label> <span>Luminosity [-1; 1]:</span><input type="number"
min="-1.000"
max="1.000"
step="0.001"
[value]="luminosity"
(change)="luminosity = $event.target.value"></label>
</div>
<div class="red">
<label><span>Red [-256; 256]:</span><input type="number"
min="-256"
max="256"
step="1"
[value]="red"
(change)="red = $event.target.value"></label>
</div>
<div class="green">
<label><span>Green [-256; 256]:</span><input type="number"
min="-255"
max="256"
step="1"
[value]="green"
(change)="green = $event.target.value"></label>
</div>
<div class="blue">
<label><span>Blue [-256; 256]:</span><input type="number"
min="-255"
max="256"
step="1"
[value]="blue"
(change)="blue = $event.target.value"></label>
</div>
<div class="hue">
<label><span>Hue [-360; 360]°:</span><input type="number"
max="-360"
max="360"
step="1"
[value]="hue"
(change)="hue = $event.target.value"></label>
</div>
<div class="saturation">
<label><span>Saluration [-100; 100]%:</span><input type="number"
min="-100"
max="100"
step="1"
[value]="saturation"
(change)="saturation = $event.target.value"></label>
</div>
<div class="value">
<label><span>Value [-100; 100]%:</span><input type="number"
min="-100"
max="100"
step="1"
[value]="value"
(change)="value = $event.target.value"></label>
</div>
<div class="maskColor">
<label><span>Mask color:</span><input type="text"
[value]="maskColor"
(change)="maskColor = $event.target.value"
placeholder="black, #000, rgb(0,0,0), hsl(0,0%,0%)"
title="black, #000, rgb(0,0,0), hsl(0,0%,0%)"></label>
</div>
<div class="maskOpacity">
<label><span>+ Mask opacity [0; 1]:</span><input type="number"
min="0"
max="1"
step="0.001"
[value]="maskOpacity"
(change)="maskOpacity = $event.target.value"></label>
</div>
<div class="alpha">
<label><span>Alpha [-1; 1]:</span><input type="number"
min="-1.000"
max="1.000"
step="0.001"
[value]="alpha"
(change)="alpha = $event.target.value"></label>
</div>
<div class="button">
<button type="button"
......@@ -103,21 +104,33 @@
</fieldset>
</form>
<aside>
<fieldset>
<fieldset class="result-fieldset">
<legend>Result</legend>
<div [style.background-image]="gradient">
&nbsp;</div>
<div>
HEX : {{colorHex || '--'}}
<div [style.background-color]="colorHex">&nbsp;</div>
<div class="result">
<div [style.background-image]="gradient">
&nbsp;
</div>
</div>
<div class="value-result">
<span>Hexa:</span>
<textarea readonly>{{colorHex || '--'}}</textarea>
<div class="result">
<div [style.background-color]="colorHex">&nbsp;</div>
</div>
</div>
<div>
RGB : {{colorRgb || '--'}}
<div [style.background-color]="colorRgb">&nbsp;</div>
<div class="value-result">
<span>RGB:</span>
<textarea readonly>{{colorRgb || '--'}}</textarea>
<div class="result">
<div [style.background-color]="colorRgb">&nbsp;</div>
</div>
</div>
<div>
HSL : {{colorHsl || '--'}}
<div [style.background-color]="colorHsl">&nbsp;</div>
<div class="value-result">
<span>HSL:</span>
<textarea readonly>{{colorHsl || '--'}}</textarea>
<div class="result">
<div [style.background-color]="colorHsl">&nbsp;</div>
</div>
</div>
</fieldset>
</aside>
......@@ -148,4 +161,8 @@
<code>hsl(0, 0%, 0%, 0.1)</code>,
<code>hsla(0, 0%, 0%, .1)</code>,
<code>hsla(0 0% 0%, .1)</code>
</ul>
\ No newline at end of file
</ul>
<footer>
<a href="https://git.ikilote.net/angular/coloration">Source code</a>
</footer>
\ No newline at end of file
src/app/app.component.scss
View file @ 535de366
::ng-deep {
:root {
--checkerboard-bg : linear-gradient(45deg, #888 25%, transparent 25%, transparent 75%, #888 75%), linear-gradient(45deg, #888 25%, transparent 25%, transparent 75%, #888 75%);
--rainbow-bg: linear-gradient(90deg, #ff2400, #e81d1d, #e8b71d, #e3e81d, #1de840, #1ddde8, #2b1de8, #dd00f3, #dd00f3);
}
body {
background: #111;
color: white;
font-family: sans;
}
* {
box-sizing: border-box;
}
}
main {
display: flex;
}
form {
flex: 3;
flex: 4;
}
aside {
......@@ -17,10 +34,12 @@ aside {
display: grid;
width: 100%;
grid-template:
"lum . alpha " 35px
"red green blue " 35px
"hue sat value " 35px
"color opacity . " 35px / 1fr 1fr 1fr;
"lum . alpha " 35px
"red green blue " 35px
"hue sat value " 35px
"color opacity . " 35px
"button button button " 70px / 1fr 1fr 1fr;
gap: 13px 0;
label {
display:flex;
......@@ -33,9 +52,102 @@ aside {
}
input {
width: 120px;
width: 150px;
}
}
fieldset {
margin-top: 20px;
background-color: #222;
border: 0;
box-shadow: 0 0 4px -1px #555;
}
legend {
position: relative;
top: -10px;
font-weight: bold;
left: -5px;
}
input,
textarea {
color: #AAA;
background: #111;
border: 1px solid #444;
line-height: 30px;
padding: 0 10px;
&[type="number"] {
text-align: right;
}
}
textarea {
height: 34px;
resize: none;
}
button {
background-color: #ac6666;
border: 0;
padding: 10px 30px;
color: white;
font-weight: bold;
border-radius: 30px;
box-shadow: 2px 2px 5px #661d0c;
transition: all 0.4s;
&:hover {
background-color: #8a5252;
}
&:action {
background-color: #bd8585;
}
}
.source-fieldset {
display: flex;
}
.source {
flex: 1;
margin-left: 50px;
}
.source,
.result {
background-color: #ddd;
background-image: var(--checkerboard-bg);
background-size: 10px 10px;
background-position: 0 0, 5px 5px;
display: flex;
border: 1px solid rgb(81, 81, 81);
border-radius: 4px;
overflow: hidden;
div {
flex:1
}
}
}
.value-result {
display: grid;
grid-template:
'name value' auto
'show show ' auto / 55px 1fr;
& > span {
grid-area: name;
}
& > textarea {
grid-area: value;
}
& > div {
grid-area: show;
}
}
.luminosity { grid-area: lum; span::before{ background:linear-gradient(90deg, black, white)}}
.maskColor { grid-area: color;}
......@@ -43,23 +155,36 @@ aside {
.red { grid-area: red; span::before{ background: red;}}
.green { grid-area: green; span::before{ background: green;}}
.blue { grid-area: blue; span::before{ background: blue;}}
.hue {grid-area: hue; span::before{ background: linear-gradient(90deg, #ff2400, #e81d1d, #e8b71d, #e3e81d, #1de840, #1ddde8, #2b1de8, #dd00f3, #dd00f3);}}
.saturation { grid-area: sat; span::before{ background:linear-gradient(90deg, #808080, red)}}
.value{ grid-area: value; span::before{ background:linear-gradient(90deg, black, white)}}
.alpha{ grid-area: alpha; span::before{ background-color: #ddd; background-image: linear-gradient(45deg, #888 25%, transparent 25%, transparent 75%, #888 75%), linear-gradient(45deg, #888 25%, transparent 25%, transparent 75%, #888 75%); background-size: 5px 5px; background-position: 0 0, 2px 2px;}}
.hue {grid-area: hue; span::before{ background: var(--rainbow-bg);}}
.saturation { grid-area: sat; span::before{ background:linear-gradient(90deg, #808080, red);}}
.value{ grid-area: value; span::before{ background:linear-gradient(90deg, black, white);}}
.alpha{ grid-area: alpha; span::before{ background-color: #ddd; background-image: var(--checkerboard-bg);background-size: 6px 6px; background-position: 0 0, 3px 3px;}}
.luminosity, .red, .green, .blue, .hue, .saturation, .value, .alpha {
span::before {
content: ' ';
display: inline-block;
height: 10px;
width: 10px;
height: 14px;
width: 14px;
border: 1px solid black;
margin-right: 3px;
position: relative;
top: 2px;
}
}
.button {
text-align: center;
padding-top: 10px;
display: flex;
align-items: center;
justify-content: center;
grid-area: button;
}
.result {
margin: 9px;
height: 42px;
}
a {
color: aliceblue;
}
\ No newline at end of file
src/index.html
View file @ 535de366
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>ColorationDemo</title>
<base href="/">
<base href="./">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<meta name="viewport"
content="width=device-width, initial-scale=1">
<link rel="icon"
type="image/x-icon"
href="favicon.ico">
</head>
<body>
<app-root></app-root>
</body>
</html>
</html>
\ No newline at end of file
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment