forked from bradjasper/subtle-patterns-bookmarklet
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
144 lines (110 loc) · 8.35 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
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>SubtlePatterns Bookmarklet - Preview background patterns on your website</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="SubtlePatterns Bookmarklet allows you to preview backgrounds for your website quickly and easily">
<meta name="author" content="Brad Jasper">
<link href="/subtle-patterns-bookmarklet/static/css/bootstrap.css" rel="stylesheet" type="text/css" />
<link href="/subtle-patterns-bookmarklet/static/css/bootstrap-responsive.css" rel="stylesheet" type="text/css" />
<link href="/subtle-patterns-bookmarklet/static/css/all.css" rel="stylesheet" type="text/css" />
<link href="/subtle-patterns-bookmarklet/static/css/app.css" rel="stylesheet" type="text/css" />
<!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<div class="container-narrow">
<div class="masthead">
<span class="pull-left">
<h5 class="muted">SubtlePatterns Bookmarklet</h5>
</span>
<span class="pull-right share-buttons">
<div class="addthis_toolbox addthis_default_style ">
<a class="addthis_button_facebook_like" fb:like:layout="button_count"></a>
<a class="addthis_button_tweet"></a>
<a class="addthis_button_google_plusone"></a>
<iframe src="/subtle-patterns-bookmarklet/github-btn.html?user=bradjasper&repo=subtle-patterns-bookmarklet&type=watch&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="110" height="20"></iframe>
</div>
<script type="text/javascript">var addthis_config = {"data_track_addressbar":true};</script>
<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-5082fc1917ba8beb" async="async"></script>
<!-- AddThis Button END -->
</span>
<div class="clear"></div>
</div>
<hr>
<div class="jumbotron">
<h1>Subtle­Patterns on your website</h1>
<br />
<p class="lead">Preview hundreds of great patterns from <a href="http://subtlepatterns.com">SubtlePatterns.com</a> directly on your website</p>
</div>
<div class="content">
<img src="/subtle-patterns-bookmarklet/static/img/try-it-out.png" class="try-it-out visible-desktop" />
<div class="bookmarklet_container">
</div>
<div class="bookmarklet_button">
<a class="btn btn-large btn-success" href="javascript:(function()%7Bvar%20newscript%3Ddocument.createElement(%27script%27)%3Bnewscript.type%3D%27text/javascript%27%3Bnewscript.async%3Dtrue%3Bnewscript.src%3D%27https://d2ueh8f0j2xol3.cloudfront.net/subtle-patterns-bookmarklet/static/js/all.js%3Fcb%3D%27%20%2B%20Math.random()%3B(document.getElementsByTagName(%27head%27)%5B0%5D%7C%7Cdocument.getElementsByTagName(%27body%27)%5B0%5D).appendChild(newscript)%3B%7D)()%3B">SubtlePatterns Bookmarklet
</a>
<small>Drag this to your bookmarks toolbar to preview backgrounds on any website</small>
</div>
</div>
<div class="information">
<h3>What is this? Why is it useful?</h3>
<p>Finding a good background pattern for your website can be a pain. Fortunately, <a href="http://subtlepatterns.com">SubtlePatterns</a> offers hundreds of great patterns you can use on your website for free.</p>
<p>This bookmarklet lets you preview all those background patterns directly on your website very quickly. This makes selecting a background for your website even easier!</p>
<br />
<h3>What's a bookmarklet?</h3>
<p>A bookmarklet is a special kind of bookmark that can perform a special ability. In this case it opens a small widget (like the one above) that lets you change the current website's background.</p>
<br />
<h3>Can I change where the pattern is applied?</h3>
<p>Yes, by default the background pattern is applied to the <body> element. You can use the <em>Background Selector</em> tool to change this (access this tool via the settings popup or by pressing the "s" key on your keyboard).</p>
<br />
<h3>Can I use this on the iPad?</h3>
<p>
Yes (with some exceptions). Copy and paste the code below into one of your bookmarks.</p>
<code>javascript:(function()%7Bvar%20newscript%3Ddocument.createElement(%27script%27)%3Bnewscript.type%3D%27text/javascript%27%3Bnewscript.async%3Dtrue%3Bnewscript.src%3D%27https://d2ueh8f0j2xol3.cloudfront.net/subtle-patterns-bookmarklet/static/js/all.js%3Fcb%3D%27%20%2B%20Math.random()%3B(document.getElementsByTagName(%27head%27)%5B0%5D%7C%7Cdocument.getElementsByTagName(%27body%27)%5B0%5D).appendChild(newscript)%3B%7D)()%3B</code>
<br />
<br />
<p>Visit <a href="http://iosbookmarklets.com/tutorials/subtle-patterns-bookmarklet-ipad/">iOS Bookmarklets</a> for more info.</p>
<br />
<h3>Can I use keyboard shortcuts?</h3>
<p>Yes you can! Type a question mark (shift + /) to open the keyboard shortcuts dialog. For starters, you can use your left and right arrow keys to navigate between patterns (and you can try it right now on this page).
</p>
<br />
<h3>Is there a Chrome Extension available?</h3>
<p>Yes there is, Noam Eppel created the <a href="https://github.com/cleanforestco/subtle-patterns-chrome-extension">Subtle Patterns Chrome Extension</a> which uses the bookmarklet.</p>
<br />
<h3>How can I receive updates?</h3>
<p>The bookmarklet is built so that you're always running the latest version. This means you only have to install it once and it will automatically update itself.</p>
<p>For news on what's happening, follow me on Twitter at <a href="https://twitter.com/bradjasper">@bradjasper</a></p>
<a href="https://twitter.com/bradjasper" class="twitter-follow-button" data-show-count="false" data-size="large">Follow @bradjasper</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
</div>
<div class="footer">
<ul class="pull-left">
<li>Created by <a href="https://twitter.com/bradjasper">@bradjasper</a></li>
<li>Opened sourced at <a href="https://github.com/bradjasper/subtle-patterns-bookmarklet">GitHub</a></li>
</ul>
<ul class="pull-right">
<li>Patterns from <a href="http://subtlepatterns.com">SubtlePatterns</a></li>
</ul>
<div class="clear"></div>
<p>Check out another project I made that helps you <a href="http://domaingroovy.com/?utm_source=bradjasper.com&utm_campaign=SubtlePatternsBookmarklet">find an available domain name</a></p>
</div>
</div>
<a href="https://github.com/bradjasper/subtle-patterns-bookmarklet"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_gray_6d6d6d.png" alt="Fork me on GitHub"></a>
<script src="/subtle-patterns-bookmarklet/static/js/app.min.js"></script>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-11057852-1']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
</body>
</html>