-
Notifications
You must be signed in to change notification settings - Fork 0
/
demo.html
72 lines (71 loc) · 4.28 KB
/
demo.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
<!DOCTYPE html>
<html>
<head>
<title>ColorDevBar</title>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="colordevbar.css">
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script src="colordevbar.js" type="text/javascript"></script>
</head>
<body>
<h1>I'm an H1 using a color of the bar</h1>
<p>This is a paragraph using other palette color</p>
<em>Click on the bottom left icon</em>
<div id='devbar' class="hidden">
<ul id='colors'>
<li class='a1'>a1</li>
<li class='a2'>a2</li>
<li class='a3'>a3</li>
<li class='a4'>a4</li>
<li class='a5'>a5</li>
<li class='b1'>b1</li>
<li class='b2'>b2</li>
<li class='b3'>b3</li>
<li class='b4'>b4</li>
<li class='b5'>b5</li>
<li class='c1'>c1</li>
<li class='c2'>c2</li>
<li class='c3'>c3</li>
<li class='c4'>c4</li>
<li class='c5'>c5</li>
<li class='bw1'>bw1</li>
<li class='bw2'>bw2</li>
<li class='bw3'>bw3</li>
<li class='bw4'>bw4</li>
<li class='bw5'>bw5</li>
</ul>
</div>
<div id="bdevbar">
<a href="#">
<svg viewBox="0 0 450 450">
<rect x="141.732" y="141.732" fill="#BADE27" width="141.732" height="141.731">
<animate id="red5" begin="indefinite" fill="freeze" attributeName="fill" dur="500ms" to="#E02B14"></animate>
<animate id="normal5" begin="indefinite" fill="freeze" attributeName="fill" dur="500ms" to="#BADE27"></animate>
</rect>
<path fill="#86C171" d="M413.082,141.732H283.466v141.731h129.625c7.836-22.165,12.105-46.016,12.105-70.866
C425.196,187.748,420.918,163.9,413.082,141.732z"/>
<path fill="#FCF5B3" d="M141.732,283.465v129.626c22.166,7.836,46.016,12.105,70.866,12.105c24.851,0,48.699-4.278,70.866-12.114
V283.465H141.732z"/>
<path fill="#AE73E2" d="M12.115,283.465c21.352,60.402,69.219,108.272,129.617,129.626V283.465H12.115z">
<animate id="red4" begin="indefinite" fill="freeze" attributeName="fill" dur="500ms" to="#E02B14"></animate>
<animate id="normal4" begin="indefinite" fill="freeze" attributeName="fill" dur="500ms" to="#AE73E2"></animate>
</path>
<path fill="#BCB0E6" d="M141.732,141.732H12.106C4.27,163.898,0,187.748,0,212.598s4.278,48.699,12.114,70.866h129.618V141.732z"/>
<path fill="#A1D5D1" d="M141.732,141.731V12.114C81.33,33.466,33.459,81.334,12.106,141.732L141.732,141.731L141.732,141.731z">
<animate id="red3" begin="indefinite" fill="freeze" attributeName="fill" dur="500ms" to="#E02B14"></animate>
<animate id="normal3" begin="indefinite" fill="freeze" attributeName="fill" dur="500ms" to="#A1D5D1"></animate>
</path>
<path fill="#2E5EA9" d="M283.465,141.731V12.114C261.298,4.278,237.449,0,212.598,0S163.9,4.278,141.732,12.114v129.617H283.465z"/>
<path fill="#B8860B" d="M413.082,141.731C391.73,81.33,343.866,33.465,283.465,12.114v71.984v57.633h59.634H413.082z">
<animate id="red2" begin="indefinite" fill="freeze" attributeName="fill" dur="500ms" to="#E02B14"></animate>
<animate id="normal2" begin="indefinite" fill="freeze" attributeName="fill" dur="500ms" to="#B8860B"></animate>
</path>
<path fill="#F9C990" d="M413.091,283.465h-58.76h-70.866v70.866l0.001,58.751C343.868,391.729,391.738,343.862,413.091,283.465z">
<animate id="red1" begin="indefinite" fill="freeze" attributeName="fill" dur="500ms" to="#E02B14"></animate>
<animate id="normal1" begin="indefinite" fill="freeze" attributeName="fill" dur="500ms" to="#F9C990"></animate>
</path>
</svg>
</a>
</div>
</body>
</html>