-
Notifications
You must be signed in to change notification settings - Fork 6
/
Copy pathindex.html
107 lines (101 loc) · 12.3 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
<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS Terminal</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="shortcut icon" type="image/png"
href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAndJREFUOMuNkr1LXEEUxX8zb3b3ze7KopDCJFVIqRBilUKCNgFZNFVAAmthJWJvVsQiTf4HQdBaEKwsFgL5kKR4YJr0msDDoMmukfF9zUya7INAIDlw4XIunHvu4Yq9vb2Ndrv9Qmtd4x9wzuG9xzmHMSY5Ojp6yfn5+Tf/n3DOeeect9Z6a60/PT09F8aY5ODgoLa7u8vMzAz/g16vx8bGBhMTE4kckk/abcbv3sUYgzGGZrPJ+vo6xhharRadTqec9Xq94SleAl4IwVW/z6PHj3nW6ZAVBdPT02xtbRHHMSsrK2W/vLxMt9slTVOMMVYCSCl5//YtH4+PuTU+TpplNBoNoigijmM2NzfpdrvEcczq6ipLS0ukaUpRFF4JIRBCMDs3h/We50+f8uP7d968fk0URUxNTbG9vc3Ozg5xHBNFEbOzs6ytrQEgkiQxh4eHenFxEaUUrVaLe/fvM/HgAQL48O4dd27f5uTkBABjDFdXV+zv7zM5OflTCSGQUmKtxVpLv9/n8vKSL2dnCCEYDAZ8OTujKAqyLCPLMgC893jvUcMQAbTWhGHIz8GAz58+IaVEACMjI+R5TpZlJEmCMQbnHABKSokQAq01jUaDMAwJw5BKpUIQBABYa8nznDRNkVL+6WAYotYarTX1ep0wDKlWqyilSoEsy1BKIYTAe18+lRqqhWFYCtTrdWq1GkEQIISgKIpyu/cea23pQjnnaDabzM/Ply5qtdpfT0iShJubG5IkQSmFcw5xfX39VQhxx1pLURR/1L+40dHR02BhYSEYGxt7+NtSDuRALqUsKwiCXCmVK6XySqWSV6vVXGs9uLi4ePULSRiabTd6gRQAAAAASUVORK5CYII=">
<style>
body {
font-size: 16px;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
line-height: 1.5;
margin-bottom: 5em;
}
main {
max-width: 50em;
margin: 0 auto;
}
h1,
h2,
h3,
.center {
text-align: center;
}
#css-terminal-bookmarklet {
padding: .25em;
display: inline-block;
background-color: #eee;
border: 1px solid #ccc;
border-radius: 3px;
color: #000;
text-decoration: none;
}
</style>
<script>
if (!localStorage.getItem("css-terminal")) {
localStorage.setItem("css-terminal", "/*%20Add%20CSS%20here%21%20*/%0Abody%20%7B%0A%20%20background%3A%20pink%3B%0A%20%20font-family%3A%20monospace%3B%0A%7D%0A%0A/*%20Go%20wild%21%20*/%0A%0A%0A%0A%0A%0A%0A/*%0AKeyboard%20shortcuts%20%28on%20Mac%29%0A%20%20Apply%20styles%3A%20Command%20+%20Enter%0A%20%20Focus%20terminal%3A%20Ctrl%20+%20/%0A%20%20Edit%20content%3A%20Ctrl%20+%20.%0A*/")
}
</script>
</head>
<body>
<main>
<h1>CSS Terminal</h1>
<p>CSS Terminal is a bookmarklet that allows you to inject CSS rules directly into a live web page. It's handy
for rapid CSS development, prototyping and debugging.</p>
<p class="center">
Wanna see it in action? <br>Click here 👇
</p>
<p class="center">
<a id="css-terminal-bookmarklet"
href="javascript:(function%20()%20%7B%20var%20terminal%20%3D%20document.getElementById(%22css-terminal%22)%3B%20if%20(!terminal)%20%7B%20var%20keymap%20%3D%20%7B%20enter%3A%2013%2C%20escape%3A%2027%2C%20semicolon%3A%20186%2C%20forwardSlash%3A%20191%2C%20period%3A%20190%20%7D%3B%20var%20body%20%3D%20document.getElementsByTagName(%22body%22)%5B0%5D%3B%20var%20previousStyles%20%3D%20unescape(localStorage.getItem(%22css-terminal%22)%20%7C%7C%20%22%22)%3B%20%20%20%20%20%20%20%20%2F*%20utility%20function%20for%20creating%20a%20new%20DOM%20element%20*%2F%20%20%20%20%20%20%20%20var%20newElement%20%3D%20(tagname%2C%20props)%20%3D%3E%20%7B%20var%20el%20%3D%20document.createElement(tagname)%3B%20for%20(var%20i%20in%20props)%20%7B%20el%5Bi%5D%20%3D%20props%5Bi%5D%3B%20%7D%20return%20el%20%7D%3B%20var%20terminal%20%3D%20newElement(%22textarea%22%2C%20%7B%20id%3A%20%22css-terminal%22%2C%20value%3A%20previousStyles%2C%20autocorrect%3A%20%22off%22%2C%20autocapitalize%3A%20%22off%22%20%7D)%3B%20var%20terminalStyles%20%3D%20newElement(%22style%22%2C%20%7B%20id%3A%20%22css-terminal-css%22%2C%20innerHTML%3A%20%60%23css-terminal%20%7B%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20background%3A%20transparent%20url('data%3Aimage%2Fpng%3Bbase64%2CiVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8%2F9hAAAAAXNSR0IArs4c6QAAAndJREFUOMuNkr1LXEEUxX8zb3b3ze7KopDCJFVIqRBilUKCNgFZNFVAAmthJWJvVsQiTf4HQdBaEKwsFgL5kKR4YJr0msDDoMmukfF9zUya7INAIDlw4XIunHvu4Yq9vb2Ndrv9Qmtd4x9wzuG9xzmHMSY5Ojp6yfn5%2BTf%2Fn3DOeeect9Z6a60%2FPT09F8aY5ODgoLa7u8vMzAz%2Fg16vx8bGBhMTE4kckk%2Fabcbv3sUYgzGGZrPJ%2Bvo6xhharRadTqec9Xq94SleAl4IwVW%2Fz6PHj3nW6ZAVBdPT02xtbRHHMSsrK2W%2FvLxMt9slTVOMMVYCSCl5%2F%2FYtH4%2BPuTU%2BTpplNBoNoigijmM2NzfpdrvEcczq6ipLS0ukaUpRFF4JIRBCMDs3h%2FWe50%2Bf8uP7d968fk0URUxNTbG9vc3Ozg5xHBNFEbOzs6ytrQEgkiQxh4eHenFxEaUUrVaLe%2FfvM%2FHgAQL48O4dd27f5uTkBABjDFdXV%2Bzv7zM5OflTCSGQUmKtxVpLv9%2Fn8vKSL2dnCCEYDAZ8OTujKAqyLCPLMgC893jvUcMQAbTWhGHIz8GAz58%2BIaVEACMjI%2BR5TpZlJEmCMQbnHABKSokQAq01jUaDMAwJw5BKpUIQBABYa8nznDRNkVL%2B6WAYotYarTX1ep0wDKlWqyilSoEsy1BKIYTAe18%2BlRqqhWFYCtTrdWq1GkEQIISgKIpyu%2Fcea23pQjnnaDabzM%2FPly5qtdpfT0iShJubG5IkQSmFcw5xfX39VQhxx1pLURR%2F1L%2B40dHR02BhYSEYGxt7%2BNtSDuRALqUsKwiCXCmVK6XySqWSV6vVXGs9uLi4ePULSRiabTd6gRQAAAAASUVORK5CYII%3D')%20no-repeat%20top%20right%3B%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20font-family%3A%20monospace%3B%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20position%3A%20fixed%3B%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20top%3A%200%3B%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20right%3A%200%3B%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20color%3A%20transparent%3B%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20z-index%3A%20100000%3B%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20border%3A%200%3B%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20width%3A%2032px%3B%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20height%3A%2032px%3B%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20max-height%3A%2032px%3B%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20overflow%3A%20hidden%3B%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20cursor%3A%20pointer%3B%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20resize%3A%20none%3B%20%20%20%20%20%20%20%20%20%20%20%20%7D%20%20%20%20%20%20%20%20%20%20%20%20%20%23css-terminal%3Afocus%20%7B%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20background%3A%20rgba(0%2C0%2C0%2C.75)%3B%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20border%3A%202px%20solid%20rgba(0%2C0%2C0%2C.1)%3B%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20color%3A%20white%3B%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20cursor%3A%20text%3B%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20height%3A%2025em%3B%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20max-height%3A%20none%3B%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20width%3A%2040em%3B%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20outline%3A%20none%3B%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20overflow%3A%20auto%3B%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20padding%3A%20.25em%3B%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20resize%3A%20both%3B%20%20%20%20%20%20%20%20%20%20%20%20%7D%60%20%7D)%3B%20var%20terminalOutput%20%3D%20newElement(%22style%22%2C%20%7B%20id%3A%20%22css-terminal-output%22%2C%20innerHTML%3A%20previousStyles%20%7D)%3B%20body.appendChild(terminalStyles)%3B%20body.appendChild(terminal)%3B%20body.appendChild(terminalOutput)%3B%20terminal.addEventListener(%22keydown%22%2C%20function%20(evt)%20%7B%20evt.stopPropagation()%3B%20var%20keyCode%20%3D%20evt.keyCode%3B%20if%20(keyCode%20%3D%3D%3D%20keymap.enter%20%7C%7C%20keyCode%20%3D%3D%3D%20keymap.semicolon%20%26%26%20!evt.shiftKey)%20%7B%20terminalOutput.innerHTML%20%3D%20this.value%3B%20localStorage.setItem(%22css-terminal%22%2C%20escape(this.value))%3B%20%7D%20if%20(keymap.escape%20%3D%3D%3D%20keyCode%20%7C%7C%20evt.ctrlKey%20%26%26%20keyCode%20%3D%3D%3D%20keymap.forwardSlash)%20%7B%20return%20terminal.blur()%3B%20%7D%20%7D%2C%20true)%3B%20window.addEventListener(%22keydown%22%2C%20function%20(%7B%20keyCode%2C%20ctrlKey%20%7D)%20%7B%20%20%20%20%20%20%20%20%20%20%20%20%2F*%20ctrl%20%2B%20%2F%20activation%20shortcut%20*%2F%20%20%20%20%20%20%20%20%20%20%20%20if%20(ctrlKey%20%26%26%20keyCode%20%3D%3D%3D%20keymap.forwardSlash)%20%7B%20terminal.focus()%3B%20%7D%20%20%20%20%20%20%20%20%20%20%20%20%2F*%20ctrl%20%2B%20.%20to%20make%20an%20element%20contenteditable%20*%2F%20%20%20%20%20%20%20%20%20%20%20%20if%20(ctrlKey%20%26%26%20keyCode%20%3D%3D%3D%20keymap.period)%20%7B%20body.addEventListener(%22click%22%2C%20makeContenteditable%2C%20true)%3B%20%7D%20%7D)%3B%20function%20makeContenteditable(evt)%20%7B%20evt.preventDefault()%3B%20evt.stopPropagation()%3B%20evt.target.setAttribute(%22contenteditable%22%2C%20true)%3B%20evt.target.focus()%3B%20%20%20%20%20%20%20%20%20%20%20%20%2F*%20Clean%20up%20event%20listeners%20*%2F%20%20%20%20%20%20%20%20%20%20%20%20body.removeEventListener(%22click%22%2C%20makeContenteditable%2C%20true)%3B%20evt.target.addEventListener(%22blur%22%2C%20function%20disableContentEditable()%20%7B%20evt.target.removeAttribute(%22contenteditable%22)%3B%20evt.target.removeEventListener(%22blur%22%2C%20disableContentEditable)%3B%20%7D)%3B%20%7D%20%7D%20terminal.focus()%3B%20%7D)()%3B">CSS
Terminal</a>
</p>
<p>
Write CSS in the terminal (the dark gray box) and those styles will be applied to the page.
</p>
<h2 id="install"">Install</h2>
<p>
You can install the CSS Terminal bookmarklet in your browser by dragging the CSS
Terminal link above 👆 to your browser's bookmarks toolbar. You may need to first make
the toolbar visible by clicking View -> Always Show Bookmarks Bar or pressing
<code>Command+Shift+B</code>.
</p>
<h2 id="usage">Usage Notes</h2>
<p>
Once you've added the bookmarklet to your bookmarks toolbar, you can click the CSS Terminal bookmark
to activate it on any website you visit. Write CSS in the terminal and those styles will be applied to the
page when you enter a semicolon or hit the <code>Enter</code> key. You can also hit
<code>Command+Enter</code> (on Mac) or <code>Ctrl+Enter</code> to apply the styles.
</p>
<p>
Pressing <code>Esc</code> or <code>Tab</code> will collapse the terminal. You can reactivate the
terminal by clicking the bookmark again, clicking the <img
src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAndJREFUOMuNkr1LXEEUxX8zb3b3ze7KopDCJFVIqRBilUKCNgFZNFVAAmthJWJvVsQiTf4HQdBaEKwsFgL5kKR4YJr0msDDoMmukfF9zUya7INAIDlw4XIunHvu4Yq9vb2Ndrv9Qmtd4x9wzuG9xzmHMSY5Ojp6yfn5+Tf/n3DOeeect9Z6a60/PT09F8aY5ODgoLa7u8vMzAz/g16vx8bGBhMTE4kckk/abcbv3sUYgzGGZrPJ+vo6xhharRadTqec9Xq94SleAl4IwVW/z6PHj3nW6ZAVBdPT02xtbRHHMSsrK2W/vLxMt9slTVOMMVYCSCl5//YtH4+PuTU+TpplNBoNoigijmM2NzfpdrvEcczq6ipLS0ukaUpRFF4JIRBCMDs3h/We50+f8uP7d968fk0URUxNTbG9vc3Ozg5xHBNFEbOzs6ytrQEgkiQxh4eHenFxEaUUrVaLe/fvM/HgAQL48O4dd27f5uTkBABjDFdXV+zv7zM5OflTCSGQUmKtxVpLv9/n8vKSL2dnCCEYDAZ8OTujKAqyLCPLMgC893jvUcMQAbTWhGHIz8GAz58+IaVEACMjI+R5TpZlJEmCMQbnHABKSokQAq01jUaDMAwJw5BKpUIQBABYa8nznDRNkVL+6WAYotYarTX1ep0wDKlWqyilSoEsy1BKIYTAe18+lRqqhWFYCtTrdWq1GkEQIISgKIpyu/cea23pQjnnaDabzM/Ply5qtdpfT0iShJubG5IkQSmFcw5xfX39VQhxx1pLURR/1L+40dHR02BhYSEYGxt7+NtSDuRALqUsKwiCXCmVK6XySqWSV6vVXGs9uLi4ePULSRiabTd6gRQAAAAASUVORK5CYII="
alt="CSS Terminal">
icon in the top right corner of the page, or pressing the keyboard shortcut <code>Ctrl+/</code>.
</p>
<p>
If you reload/refresh your page, your custom CSS rules will no longer apply. However, when you reactivate
the terminal, your last set of rules are reapplied and you can continue editing.
</p>
<p>
The CSS Terminal uses local storage to save your custom CSS on a per site basis. This means
that it will store your custom styles for ajaxian.com seperate from alistapart.com.
</p>
<p>
To quickly prototype content changes, press <code>Ctrl+.</code> and click on the part of
the page you'd like to change. CSS Terminal will make that element's content editable.
Note: these content edits are *not* persisted; they will be lost when the page is reloaded.
</p>
<h2 id="about">
About CSS Terminal
</h2>
<p>
The CSS Terminal bookmarklet was written by Ben Barber and is released under the MIT License.
The <a href="https://github.com/barberboy/css-terminal">source code and project page</a> are hosted on <a
href="https://github.com/">GitHub</a>.
</p>
</main>
</body>
</html>