-
Notifications
You must be signed in to change notification settings - Fork 164
/
panel.html
163 lines (151 loc) · 8.31 KB
/
panel.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
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
<!DOCTYPE html>
<html lang="en">
<head>
<title>SnappySnippet</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="css/bootstrap/css/bootstrap.css" rel="stylesheet">
<link href="css/css/flat-ui.css" rel="stylesheet">
<link href="css/panel.css" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="row" id='main-button-row'>
<div class="col-xs-12">
<div id='error-box'>
<div class='alert alert-danger'><p><span class="fui-cross"></span> <strong>Error!</strong> <span class='error-message'></span></p></div>
</div>
<button id='create' class='btn btn-primary'><span class='fui-gear'></span> Create a snippet from inspected element</button>
</div>
</div>
<div class="row" id='textareas-row'>
<div class="col-xs-6">
<span class="label label-warning">HTML</span>
<textarea id='html' readonly class="form-control input-sm"></textarea>
</div>
<div class="col-xs-6">
<span class="label label-warning">CSS</span>
<textarea id='css' readonly class="form-control input-sm"></textarea>
</div>
</div>
<div class="row">
<div class="panel-group col-xs-12" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#settings">
<span class="fui-list"></span> Settings
</a>
</h4>
</div>
<div id="settings" class="panel-collapse collapse">
<div class="accordion-inner">
<ul>
<li><label class="checkbox">
<input type='checkbox' checked="checked" id='properties-clean-up'/> Keep only shorthand
properties (e.g. keeps "border", but removes "border-width")
</label></li>
<li><label class="checkbox">
<input type='checkbox' checked="checked" id='remove-default-values'/> Remove properties
with default browser values
</label></li>
<li><label class="checkbox">
<input type='checkbox' checked="checked" id='remove-webkit-properties'/> Remove
properties prefixed with "-webkit"
</label></li>
<li><label class="checkbox">
<input type='checkbox' checked="checked" id='combine-same-rules'/> Combine same rules
together
</label></li>
<li><label class="checkbox">
<input type='checkbox' checked="checked" id='fix-html-indentation'/> Format and clean up
HTML
</label></li>
<li><label class="checkbox">
<input type='checkbox' id='include-ancestors'/> Include ancestor elements in the snippet
</label></li>
<li>
<div class="form-group">
Prefix all CSS IDs with <input type='text' class="form-control" id='id-prefix' placeholder="prefix_"/>
</div>
</li>
</ul>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#about">
<span class="fui-heart"></span> Get help, give feedback & about
</a>
</h4>
</div>
<div id="about" class="panel-collapse collapse">
<ul>
<li>You can report errors, request new features and fork the code on <a href="https://github.com/kdzwinel/SnappySnippet" target="_blank">GitHub</a>.</li>
<li>Projects used:
<a href="http://getbootstrap.com" target="_blank">Bootstrap</a>,
<a href="http://designmodo.github.io/Flat-UI/" target="_blank">Flat-UI</a>,
<a href="https://code.google.com/p/jquery-clean/" target="_blank">jquery-clean</a>
</li>
<li>Inspiration: <a href="http://stackoverflow.com/questions/4911338/tools-to-selectively-copy-htmlcssjs-from-existing-sites" target="_blank">StackOverflow question by qntmfred</a></li>
<li>Author: Konrad Dzwinel (<a href="mailto:[email protected]" target="_blank">mail me!</a>)</li>
</ul>
</div>
</div>
</div>
</div>
<div class="row" id='export-buttons-row'>
<div class="col-xs-4">
<form action="https://codepen.io/pen/define" method="POST" target="_blank" id='codepen-form'>
<input type="hidden" name="data" value=''/>
<button type='submit' class='btn btn-primary'><span class="fui-mail"></span> Send to CodePen</button>
</form>
</div>
<div class="col-xs-4">
<form action="https://jsbin.com/?html,css,output" method="POST" target="_blank" id='jsbin-form'>
<input type="hidden" name="html" value=''/>
<input type="hidden" name="css" value=''/>
<button type='submit' class='btn btn-primary'><span class="fui-mail"></span> Send to JS Bin</button>
</form>
</div>
<div class="col-xs-4">
<form action="https://jsfiddle.net/api/post/library/pure/" method="POST" target="_blank" id='jsfiddle-form'>
<input type="hidden" name="html" value=''/>
<input type="hidden" name="css" value=''/>
<button type='submit' class='btn btn-primary'><span class="fui-mail"></span> Send to jsFiddle</button>
</form>
</div>
</div>
</div>
<div id="social-buttons">
<a href='http://www.facebook.com/plugins/like.php?href=https%3A%2F%2Fchrome.google.com%2Fwebstore%2Fdetail%2Fsnappysnippet%2Fblfngdefapoapkcdibbdkigpeaffgcil&width=450&height=80&colorscheme=light&layout=standard&action=like&show_faces=true&send=true' target='_blank'>
Like it on FB
</a>
<iframe src="http://ghbtns.com/github-btn.html?user=kdzwinel&repo=SnappySnippet&type=watch&count=true&size=small"
style="background-color: transparent; border: none; overflow:hidden" width="90" height="20"></iframe>
<a href="https://twitter.com/share" class="twitter-share-button"
data-url="https://chrome.google.com/webstore/detail/snappysnippet/blfngdefapoapkcdibbdkigpeaffgcil"
data-text="SnappySnippet - Chrome extension for creating HTML+CSS snippets."
data-count="horizontal"> </a>
</div>
<div id='loader'>
<div class='alert alert-warning'><p><span class="fui-time"></span> <strong>Please wait.</strong> Creating a snapshot...</p></div>
<div class='alert alert-warning'><p><span class="fui-time"></span> <strong>Please wait.</strong> Processing...</p></div>
</div>
<script src="css/js/jquery-1.8.3.min.js"></script>
<script src="css/js/bootstrap.min.js"></script>
<script src="css/js/flatui-checkbox.js"></script>
<script src='js/libs/jquery.htmlClean.js'></script>
<script src='js/tools/CSSStringifier.js'></script>
<script src='js/tools/SameRulesCombiner.js'></script>
<script src='js/filters/DefaultValueFilter.js'></script>
<script src='js/filters/ShorthandPropertyFilter.js'></script>
<script src='js/filters/WebkitPropertiesFilter.js'></script>
<script src='js/tools/Snapshooter.js'></script>
<script src='js/tools/InspectedContext.js'></script>
<script src='js/panel.js'></script>
<script src="https://platform.twitter.com/widgets.js"></script>
</body>
</html>