143 lines
9.9 KiB
HTML
143 lines
9.9 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="ru">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>UI Kit</title>
|
|
<script type="module" src="/src/uikit.js"></script>
|
|
</head>
|
|
<body>
|
|
<div id="primary-heading">
|
|
<h1>Ruby Sea Battle (Морской бой) - UI Kit</h1>
|
|
</div>
|
|
<div id="color-palette">
|
|
<div class="color-series">
|
|
<div class="color-sample" id="color-sample-primary"><span>primary - #2F80ED</span></div>
|
|
<div class="color-sample" id="color-sample-primary-dark"><span>dark primary - #1D6BD8</span></div>
|
|
<div class="color-sample" id="color-sample-primary-darker"><span>darker primary - #134C9C</span></div>
|
|
<div class="color-sample" id="color-sample-primary-light"><span>light primary - #82B3F4</span></div>
|
|
</div>
|
|
<div class="color-series">
|
|
<div class="color-sample" id="color-sample-ship"><span>ship - #1D3A5F</span></div>
|
|
</div>
|
|
<div class="color-series">
|
|
<div class="color-sample" id="color-sample-fire-fg"><span>fire fg - #F0564A</span></div>
|
|
<div class="color-sample" id="color-sample-fire-bg"><span>fire bg - #FDEEEA</span></div>
|
|
</div>
|
|
</div>
|
|
<div id="font-column">
|
|
<h1>Основной шрифт - Comfortaa</h1>
|
|
<p>Дополнительный шрифт - Nunito</p>
|
|
</div>
|
|
<div id="button-column">
|
|
<button class="btn btn-big">Большая кнопка</button>
|
|
<button class="btn btn-big" disabled>Большая кнопка</button>
|
|
<button class="btn btn-primary">Обычная кнопка</button>
|
|
<button class="btn btn-primary" disabled>Обычная кнопка</button>
|
|
<input/>
|
|
</div>
|
|
<div id="icon-column">
|
|
<h3>Значки</h3>
|
|
<div class="uikit-icon">
|
|
<svg
|
|
width="48"
|
|
height="48"
|
|
viewBox="0 0 12.7 12.7"
|
|
version="1.1"
|
|
id="svg1"
|
|
xml:space="preserve"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
xmlns:svg="http://www.w3.org/2000/svg"><defs
|
|
id="defs1" /><g
|
|
id="layer1"><path
|
|
style="opacity:1;fill:none;fill-opacity:1;stroke:#2d7ce7;stroke-width:1.20142;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
|
|
d="m 9.4816001,7.6107086 c 0,2.5748604 0,2.5748604 0,2.5748604 L 10.700616,8.9665533 Z"
|
|
id="path2" /><path
|
|
style="opacity:1;fill:none;fill-opacity:1;stroke:#2d7ce7;stroke-width:1.17434;stroke-linecap:round;stroke-dasharray:none;stroke-opacity:1"
|
|
d="m 1.9172753,3.9133276 h 1.3938432 c 0,0 0.418658,0.043751 0.7439689,0.3929024 l 3.2927061,4.3012881 c 0,0 0.3355245,0.3407588 0.6968466,0.321765 l 1.9478831,-0.00957"
|
|
id="path1" /><path
|
|
style="opacity:1;fill:none;fill-opacity:1;stroke:#2d7ce7;stroke-width:1.20138;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
|
|
d="m 9.4810176,5.2347575 c 0,-2.5749117 0,-2.5749117 0,-2.5749117 L 10.699942,3.878886 Z"
|
|
id="path3" /><path
|
|
id="path4"
|
|
style="baseline-shift:baseline;display:inline;overflow:visible;opacity:1;vector-effect:none;fill:#2d7ce7;stroke-width:1.77537;stroke-linecap:round;enable-background:accumulate;stop-color:#000000;stop-opacity:1"
|
|
d="M 7.9405757,3.3290259 C 7.2803298,3.3554207 6.9286279,3.8253665 6.9286279,3.8253665 L 6.9047744,3.8538074 6.3276981,4.6070341 7.0497314,5.5923757 7.7745171,4.6437321 c 0.01942,-0.01041 0.2210083,-0.1184824 0.240372,-0.1394525 h 9.175e-4 v -9.175e-4 -9.173e-4 h -9.175e-4 v -9.175e-4 h 0.012844 l 1.9633434,0.011009 A 0.5871519,0.5871519 0 0 0 10.580079,3.9299557 0.5871519,0.5871519 0 0 0 9.9938292,3.3400353 L 8.0763583,3.3299434 c -0.04675,-0.00246 -0.091766,-0.00268 -0.1357826,-9.175e-4 z M 4.3432533,7.2006658 3.62122,8.1428873 C 3.4547894,8.317437 3.2641018,8.3428563 3.2569921,8.3438089 H 1.9184323 A 0.5871519,0.5871519 0 0 0 1.3285117,8.9337295 0.5871519,0.5871519 0 0 0 1.9184323,9.5190627 h 1.4211304 l 0.031193,-0.00367 c 0,0 0.6339103,-0.06015 1.1137846,-0.5752412 l 0.020184,-0.021101 0.5605621,-0.7330428 z" /></g></svg>
|
|
</div>
|
|
<div class="uikit-icon">
|
|
<svg
|
|
width="48"
|
|
height="48"
|
|
viewBox="0 0 12.7 12.7"
|
|
version="1.1"
|
|
id="svg1"
|
|
xml:space="preserve"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
xmlns:svg="http://www.w3.org/2000/svg"><defs
|
|
id="defs1" /><g
|
|
id="layer1"><path
|
|
id="path5"
|
|
style="opacity:1;fill:#2e7ce6;fill-opacity:1;stroke:none;stroke-width:1.08416;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
|
|
d="M 6.4252022,1.3604252 A 5.0142231,5.0142231 0 0 0 4.4053658,1.7669016 5.0142231,5.0142231 0 0 0 1.3852295,6.7583647 5.0142231,5.0142231 0 0 0 5.1330086,11.229605 5.0142231,5.0142231 0 0 0 10.516731,9.214787 a 0.60264031,0.62944377 0 0 0 0.0552,-0.082801 5.0142231,5.0142231 0 0 0 0.0034,-0.00502 l -8.37e-4,-10e-8 A 0.60264031,0.62944377 0 0 0 10.658077,8.8091471 0.60264031,0.62944377 0 0 0 10.055053,8.1801954 0.60264031,0.62944377 0 0 0 9.5557394,8.4578709 L 9.5549026,8.4570342 A 3.7737617,3.7737617 0 0 1 5.4658845,10.028576 3.7737617,3.7737617 0 0 1 2.6456409,6.6638549 3.7737617,3.7737617 0 0 1 4.9180614,2.9068756 3.7737617,3.7737617 0 0 1 9.1977727,3.8327384 L 10.105235,3.0122582 A 5.0142231,5.0142231 0 0 0 6.4252022,1.3604252 Z" /><g
|
|
id="path7"
|
|
style="opacity:1;fill:#2e7ce6;fill-opacity:1"
|
|
transform="matrix(1.618477,0,0,1.618477,-3.9583458,-3.9271133)"><path
|
|
style="baseline-shift:baseline;display:inline;overflow:visible;vector-effect:none;fill:#2e7ce6;fill-opacity:1;stroke-linecap:round;stroke-linejoin:round;enable-background:accumulate;stop-color:#000000;stop-opacity:1"
|
|
d="m 7.4688013,5.2750743 h 1.7169465 l 7.84e-5,-1.7170584 z"
|
|
id="path8" /><path
|
|
style="baseline-shift:baseline;display:inline;overflow:visible;vector-effect:none;fill:#2e7ce6;fill-opacity:1;stroke-linecap:round;stroke-linejoin:round;enable-background:accumulate;stop-color:#000000;stop-opacity:1"
|
|
d="M 8.9589844,3.3300781 7.2421875,5.046875 A 0.3218472,0.3218472 0 0 0 7.46875,5.5976562 H 9.1855469 A 0.3218472,0.3218472 0 0 0 9.5078125,5.2753906 V 3.5585938 A 0.3218472,0.3218472 0 0 0 8.9589844,3.3300781 Z M 8.8632813,4.3359375 V 4.953125 H 8.2460938 Z"
|
|
id="path9" /></g></g></svg>
|
|
</div>
|
|
<div class="uikit-icon">
|
|
<svg
|
|
width="48"
|
|
height="48"
|
|
viewBox="0 0 12.7 12.7"
|
|
version="1.1"
|
|
id="svg1"
|
|
xml:space="preserve"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
xmlns:svg="http://www.w3.org/2000/svg"><defs
|
|
id="defs1" /><g
|
|
id="layer1"><path
|
|
id="path1"
|
|
style="opacity:1;fill:#2e7ce6;fill-opacity:1;stroke:none;stroke-width:1.18977;stroke-linecap:round;stroke-linejoin:round"
|
|
d="M 6.364411,1.3056314 C 3.434094,1.1761465 0.66784194,4.0355964 1.3766678,6.9942241 1.5206435,7.7550323 1.8471847,8.4132956 2.2978109,8.9582758 L 1.3450645,10.811716 C 1.1063907,11.51727 1.9253251,11.533333 2.3247667,11.25881 2.987044,10.967177 3.6564074,10.688919 4.3194921,10.399014 6.2349837,11.160311 8.6182151,10.880874 10.081516,9.3152071 12.209901,7.3541703 11.748602,3.5157751 9.1891877,2.1077973 8.3480535,1.5806555 7.3559439,1.3046341 6.364411,1.3056314 Z M 3.9105083,5.3852447 c 0.9063675,-0.049961 0.9924854,1.492953 0,1.4565399 -0.9517699,0.012357 -0.9501566,-1.4675934 0,-1.4565399 z m 2.485506,0 c 0.9069726,-0.049986 0.9835087,1.4933016 0,1.4565399 -0.9517699,0.012357 -0.9501566,-1.4675934 0,-1.4565399 z m 2.5338406,0 c 0.9053274,-0.048806 0.9911837,1.4918317 0,1.4565399 -0.9517699,0.012357 -0.9501567,-1.4675934 0,-1.4565399 z" /></g></svg>
|
|
</div>
|
|
<div class="uikit-icon">
|
|
<svg
|
|
width="48"
|
|
height="48"
|
|
viewBox="0 0 12.7 12.7"
|
|
version="1.1"
|
|
id="svg1"
|
|
xml:space="preserve"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
xmlns:svg="http://www.w3.org/2000/svg"><defs
|
|
id="defs1" /><g
|
|
id="layer1"><path
|
|
style="opacity:1;fill:none;fill-opacity:1;stroke:#2e7ce6;stroke-width:1.22353;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
|
|
d="m 4.5781624,2.5329363 c -1.5698311,0 -1.5698311,0 -1.5698311,0 0,0 -0.9989835,0.035679 -0.9989835,0.9989835 0,0.9633056 0,5.6371213 0,5.6371213 0,0 0.053518,0.9633059 0.9633056,0.9633059 0.9097886,0 1.6233481,0 1.6233481,0"
|
|
id="path13" /><path
|
|
style="opacity:1;fill:#2e7ce6;fill-opacity:1;stroke:none;stroke-width:1.22353;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
|
|
d="m 5.2382052,5.0482341 c 0,0 -0.6689622,-0.017839 -0.6689622,0.6689623 v 1.1506152 c 0,0 -0.017839,0.7269388 0.726939,0.7269388 H 7.7178252 V 9.36527 c 0,0 0.1156639,0.5768311 0.5573824,0.321805 0.4417183,-0.255026 2.9861964,-2.9861957 2.9861964,-2.9861957 0,0 0.458272,-0.262055 0,-0.7250177 L 8.5186582,3.2050448 c 0,0 -0.8218216,-0.6145265 -0.8218216,0.3932098 v 1.4678185 z"
|
|
id="path14" /></g></svg>
|
|
</div>
|
|
</div>
|
|
<div id="cells-demo">
|
|
<h3>Клетки игрового поля</h3>
|
|
<div class="sea-grid demo-sea-grid">
|
|
<div class="sea-cell"></div>
|
|
<div class="sea-cell miss-cell"></div>
|
|
<div class="sea-cell destroyed-ship-cell"></div>
|
|
<div class="sea-cell ship-cell"></div>
|
|
<div class="sea-cell"></div>
|
|
<div class="sea-cell destroyed-ship-cell"></div>
|
|
<div class="sea-cell damaged-ship-cell"></div>
|
|
<div class="sea-cell"></div>
|
|
<div class="sea-cell"></div>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html>
|