-
Notifications
You must be signed in to change notification settings - Fork 36
/
Copy pathsink.html
140 lines (135 loc) · 5.07 KB
/
sink.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
<!doctype html>
<html>
<head>
<title>BabelExt Kitchen Sink Demo</title>
<style>
form{margin:0;padding:0;}
fieldset{margin:1em 0;border:none;border-top:1px solid #ccc;}
legend{margin:1em 0;padding:0 .5em;color:#036;background:transparent;font-size:1.3em;font-weight:bold;}
label{float:left;width:100px;padding:0 1em;text-align:right;}
fieldset div{margin-bottom:.5em;padding:0;display:block;}
fieldset div input,fieldset div textarea{width:150px;border-top:1px solid #555;border-left:1px solid #555;border-bottom:1px solid #ccc;border-right:1px solid #ccc;padding:1px;color:#333;}
fieldset div select{padding:1px;}
div.fm-multi div{margin:5px 0;}
div.fm-multi input{width:1em;}
div.fm-multi label{display:block;width:200px;padding-left:5em;text-align:left;}
#fm-submit{clear:both;padding-top:1em;text-align:center;}
#fm-submit input{border:1px solid #333;padding:2px 1em;background:#555;color:#fff;font-size:100%;}
input:focus,textarea:focus{background:#efefef;color:#000;}
fieldset div.fm-req{font-weight:bold;}
fieldset div.fm-req label:before{content:"* ";}
body{padding:0;margin:20px;color:#333;background:#fff;font:12px arial,verdana,sans-serif;text-align:center;}
#container{margin:0 auto;padding:1em;width:350px;text-align:left;}
p#fm-intro{margin:0;}
input[type=checkbox] { width: 20px; margin-left: 94px; }
input[type=submit] { float: right; }
form { clear: both; margin-bottom: 10px; overflow: auto; }
#container {
display: none;
}
.featureContainer form {
display: none;
}
</style>
</head>
<body>
<h1>BabelExt Kitchen Sink Demos</h1>
<div id="installBabelExt">
This demonstration requires that you have the BabelExt extension installed in your browser. You can always acquire and compile the very latest from <a target="_blank" href="http://github.com/honestbleeps/BabelExt">the Github repo</a>, but you can also download compiled versions here for each browser:
<ul>
<li><a href="bin/BabelExt.crx">Chrome</a></li>
<li><a href="bin/BabelExt.xpi">Firefox</a></li>
<li><a href="bin/BabelExt.oex">Opera</a></li>
<li><a href="bin/BabelExt.safariextz">Safari</a></li>
</ul>
<h2>After installing the extension, refresh this page to see the features that BabelExt will abstract for you...</h2>
</div>
<div id="container">
<div class="featureContainer" id="save">
<form id="setValueForm">
<legend>
Save a key...
</legend>
<fieldset>
<label for="key">key</label>
<input type="text" name="key" id="setKey" value="">
</fieldset>
<fieldset>
<label for="value">value</label>
<input type="text" name="value" id="setValue" value="">
</fieldset>
<input type="submit" name="setValue" value="Set Value" id="setValueButton">
</form>
</div>
<div class="featureContainer" id="load">
<form id="getValueForm">
<legend>
Load a key...
</legend>
<fieldset>
<label for="key">key</label>
<input type="text" name="value" id="getKey" value="">
<label for="retrievedvalue">value is:</label><div id="retreivedvalue"></div>
</fieldset>
<input type="submit" name="getValue" value="Get Value" id="getValueButton">
</form>
</div>
<div class="featureContainer" id="tabCreate">
<form id="createTabForm">
<legend>
Create a tab...
</legend>
<fieldset>
<label for="url">url</label> <input type="text" name="url" id="url" value="">
<div>
<input type="checkbox" name="background" id="background" value="1"> Background
</div>
</fieldset>
<input type="submit" name="createTab" id="createTabButton" value="Create Tab">
</form>
</div>
<div class="featureContainer" id="notificationCreate">
<form id="createNotificationForm">
<legend>
Create a notification
</legend>
<fieldset>
<label for="title">title</label>
<input type="text" name="title" id="notificationTitle" value="">
</fieldset>
<fieldset>
<label for="text">text</label>
<input type="text" name="text" id="notificationText" value="">
</fieldset>
<fieldset>
<label for="text">icon (url)</label>
<input type="text" name="icon" id="notificationIcon" value="http://www.babelext.com/images/exampleicon.png">
</fieldset>
<input type="submit" name="createNotification" value="Create notification" id="createNotificationButton">
</form>
</div>
<div class="featureContainer" id="historyAdd">
<form id="historyAddForm">
<legend>
Add a URL to history
</legend>
<fieldset>
<label for="historyurl">historyurl</label> <input type="text" name="historyurl" id="historyurl" value="">
</fieldset>
<input type="submit" name="historyAdd" id="historyAddButton" value="Add To History">
</form>
</div>
<div class="featureContainer" id="cssAdd">
<form id="cssAddForm">
<legend>
Add css to the page
</legend>
<fieldset>
<label for="css">css</label> <textarea type="text" name="css" id="css" value="">input { border: 1px solid red; }</textarea>
</fieldset>
<input type="submit" name="cssAdd" id="cssAddButton" value="Add CSS to page">
</form>
</div>
</div>
</body>
</html>