STEINNI
80 lines
3.2 KiB
HTML
80 lines
3.2 KiB
HTML
<style>
|
|
.chalkboard > header { background: url('/app/assets/images/cards/chalkboard.jpg'); }
|
|
.chalkboard .toolbox {
|
|
text-align: center;
|
|
}
|
|
.chalkboard .board .dummy {
|
|
display: block;
|
|
height: 0;
|
|
}
|
|
.chalkboard canvas {
|
|
width: 100%;
|
|
height: 400px;
|
|
cursor:default;
|
|
}
|
|
.chalkboard canvas.drawing {
|
|
cursor:crosshair;
|
|
}
|
|
.chalkboard .toolbox .color-sample {
|
|
display: inline-grid;
|
|
width: 20px;
|
|
height: 20px;
|
|
border: 1px solid black !important;
|
|
margin: 1px !important;
|
|
}
|
|
.chalkboard .toolbox .pen-sample {
|
|
display: inline-grid;
|
|
width: 20px;
|
|
height: 20px;
|
|
align-content: center;
|
|
justify-content: center;
|
|
border: 1px solid black !important;
|
|
margin: 1px !important;
|
|
}
|
|
.chalkboard .toolbox span.selected {
|
|
border-color: var(--eicui-base-color-accessible-focus) !important;
|
|
box-shadow: inset 0 0 0 1px var(--eicui-base-color-accessible-focus),inset 0 0 0 2px var(--eicui-base-color-grey-5);
|
|
transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
|
|
}
|
|
.chalkboard .board .users {
|
|
width: fit-content;
|
|
padding: 20px 0;
|
|
}
|
|
|
|
</style>
|
|
<article eiccard media class="chalkboard">
|
|
<header>
|
|
<h1>Magic Chalkboard</h1>
|
|
<h2>Collaborative artworks</h2>
|
|
</header>
|
|
<section>
|
|
<div class="cols-2 left top">
|
|
<div class="toolbox">
|
|
<input eicinput type="hidden" name="color" value="white" />
|
|
<input eicinput type="hidden" name="width" value="2" />
|
|
|
|
<div class="colors">
|
|
<span class="color-sample selected" data-id="white" data-value="rgba(255,255,255,1)" style="background:rgba(255,255,255,1)"></span>
|
|
<span class="color-sample" data-id="blue" data-value="rgba(0, 42, 255, 1)" style="background:rgba(0, 42, 255, 1)"></span>
|
|
<span class="color-sample" data-id="red" data-value="rgba(255, 0, 0, 1)" style="background:rgba(255, 0, 0, 1)"></span>
|
|
<span class="color-sample" data-id="yellow" data-value="rgba(255, 247, 6, 1)" style="background:rgba(255, 247, 6, 1)"></span>
|
|
<span class="color-sample" data-id="green" data-value="rgba(54, 255, 8, 1)" style="background:rgba(54, 255, 8, 1)"></span>
|
|
</div>
|
|
<hr/>
|
|
<div class="pens">
|
|
<span class="pen-sample icon-big-bullet selected" xxsmall data-value="2"></span>
|
|
<span class="pen-sample icon-big-bullet" xsmall data-value="4"></span>
|
|
<span class="pen-sample icon-big-bullet" small data-value="6"></span>
|
|
</div>
|
|
<hr/>
|
|
<button class="clear-board" eicbutton icon="icon-bin" xsmall danger></button>
|
|
<button class="dl-board" eicbutton icon="icon-download" xsmall info></button>
|
|
</div>
|
|
<div class="board">
|
|
<span class="dummy">*</span>
|
|
<canvas></canvas>
|
|
<div class="users"></div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</article> |