forked from dragdropsite/waterpipe.js
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
executable file
·116 lines (107 loc) · 5.65 KB
/
index.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
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="lib/modernizr-2.7.2.js"></script>
<title>Smoky Backgrounds Generator - waterpipe.js</title>
<link rel="stylesheet" href="css/colpick.css">
<link rel="stylesheet" href="css/jquery.nouislider.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="wavybg-wrapper" style="width: 100%; height: 100%;">
<canvas>Your browser does not support HTML5 canvas.</canvas>
</div>
<div class="sidebar-wrapper">
<div class="intro">
<h1>waterpipe.js</h1>
<div class="created-by">by <a href="http://www.dragdropsite.com" target="_blank">dragdropsite.com</a></div>
<div class="share">
<a href="https://twitter.com/share" class="twitter-share-button" data-via="dragdropsite" data-count="none">Tweet</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
<iframe src="http://ghbtns.com/github-btn.html?user=dragdropsite&repo=waterpipe.js&type=fork" allowtransparency="true" frameborder="0" scrolling="0" width="53" height="20"></iframe>
</div>
</div>
<div style="clear:both"></div>
<div class="generator-form-wrap">
<form class="generator-params">
<h2>Smoke style</h2>
<div class="input-group">
<label for="gradientStart">Gradient start:</label>
<input type="text" id="gradientStart" name="gradientStart" value="#000000" class="color-picker gradient-start"></input>
</div>
<div class="input-group">
<label for="gradientEnd">Gradient end:</label>
<input type="text" id="gradientEnd" name="gradientEnd" class="color-picker gradient-end" value="#222222"></input>
</div>
<div class="input-group">
<label for="smokeOpacity">Opacity: <span class="value">10%</span></label>
<div class="smokeOpacity-slider"></div>
<input type="hidden" id="smokeOpacity" name="smokeOpacity" value="10" class="slider"></input>
</div>
<div class="input-group">
<label for="radiusSize">Smoke size: <span class="value">100%</span></label>
<div class="radiusSize-slider"></div>
<input type="hidden" id="radiusSize" name="radiusSize" value="100" class=""></input>
</div>
<div class="input-group">
<label for="lineWidth">Line width: <span class="value">2px</span></label>
<div class="lineWidth-slider"></div>
<input type="hidden" id="lineWidth" name="lineWidth" value="2" class=""></input>
</div>
<div class="input-group">
<label for="numCircles">Smokes #: <span class="value">1</span></label>
<div class="numCircles-slider"></div>
<input type="hidden" id="numCircles" name="numCircles" value="1" class=""></input>
</div>
<h2>Background style</h2>
<div class="input-group">
<label for="bgColorOuter">Outer color:</label>
<input type="text" id="bgColorOuter" name="bgColorOuter" class="color-picker color-outer" value="#666666"></input>
</div>
<div class="input-group">
<label for="bgColorInner">Inner color:</label>
<input type="text" id="bgColorInner" name="bgColorInner" class="color-picker color-inner" value="#ffffff"></input>
</div>
<h2>Download size</h2>
<div class="input-group">
<label for="downloadWidth">Width (px):</label>
<input type="text" id="downloadWidth" name="downloadWidth"></input>
</div>
<div class="input-group">
<label for="downloadHeight">Height (px):</label>
<input type="text" id="downloadHeight" name="downloadHeight"></input>
</div>
<h2 id="samples-section">Samples (click to generate)</h2>
<div class="input-group samples">
<a href="#" class="sample-smoke" data-id="0"><img src="img/samples/small/sample-1.jpg" alt=""></a>
<a href="#" class="sample-smoke" data-id="1"><img src="img/samples/small/sample-2.jpg" alt=""></a>
<a href="#" class="sample-smoke" data-id="2"><img src="img/samples/small/sample-3.jpg" alt=""></a>
<a href="#" class="sample-smoke" data-id="3"><img src="img/samples/small/sample-4.jpg" alt=""></a>
<a href="#" class="sample-smoke" data-id="4"><img src="img/samples/small/sample-5.jpg" alt=""></a>
<a href="#" class="sample-smoke" data-id="5"><img src="img/samples/small/sample-6.jpg" alt=""></a>
<a href="#" class="sample-smoke" data-id="6"><img src="img/samples/small/sample-7.jpg" alt=""></a>
<a href="#" class="sample-smoke" data-id="7"><img src="img/samples/small/sample-8.jpg" alt=""></a>
<a href="#" class="sample-smoke" data-id="8"><img src="img/samples/small/sample-9.jpg" alt=""</a>
<a href="#" class="sample-smoke" data-id="9"><img src="img/samples/small/sample-10.jpg" alt=""></a>
<a href="#" class="sample-smoke" data-id="10"><img src="img/samples/small/sample-11.jpg" alt=""></a>
<a href="#" class="sample-smoke" data-id="11"><img src="img/samples/small/sample-12.jpg" alt=""></a>
</div>
</form>
</div>
<div style="clear:both"></div>
<div class="buttons-wrap">
<div class="btn btn-grey btn-samples">Samples</div>
<div class="btn btn-grey btn-generate">Generate</div>
<div class="btn btn-grey btn-download">Download</div>
<div class="credits-to">Credits: <a href="http://rectangleworld.com/blog/" target="_blank">rectangleworld.com</a></div>
</div>
</div>
<script src="lib/jquery-1.11.0.min.js"></script>
<script src="lib/colpick.js"></script>
<script src="lib/jquery.nouislider.min.js"></script>
<script src="lib/jquery.nicescroll.min.js"></script>
<script src="lib/builder_scripts.js"></script>
<script src="waterpipe.js"></script>
</body>
</html>