-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
144 lines (135 loc) · 6.01 KB
/
index.html
File metadata and controls
144 lines (135 loc) · 6.01 KB
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">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bookmarklet Generator</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link
href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap"
rel="stylesheet">
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.16/codemirror.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.16/theme/monokai.min.css">
</head>
<body>
<a href="#main-content" class="skip-link">Skip to main content</a>
<div class="container">
<header>
<h1>Bookmarklet Generator</h1>
<p>Transform your JavaScript code into powerful browser bookmarks</p>
<div class="header-info">
<p class="description">
Create custom bookmarklets that can modify webpages, extract data, automate tasks, and add new
functionality to any website.
Simply write JavaScript code, and we'll generate a draggable bookmark for you.
</p>
<div class="quick-links">
<a href="https://github.com/peterbenoit/bookmarklet-generator" target="_blank" rel="noopener"
class="github-link">
📚 View on GitHub
</a>
<button type="button" class="help-toggle" onclick="toggleHelp()" aria-expanded="false"
aria-controls="help-section">
❓ How to Use
</button>
</div>
</div>
</header>
<section id="help-section" class="help-section hidden" aria-labelledby="help-heading">
<h2 id="help-heading">How to Create and Use Bookmarklets</h2>
<div class="help-content">
<div class="help-step">
<h3>1. Write Your Code</h3>
<p>Enter JavaScript code in the editor below. Your code will run on any webpage when the bookmarklet
is clicked.</p>
</div>
<div class="help-step">
<h3>2. Add Libraries (Optional)</h3>
<p>Include external JavaScript or CSS libraries like jQuery, Lodash, or custom stylesheets. Enter
one URL per line.</p>
</div>
<div class="help-step">
<h3>3. Name Your Bookmarklet</h3>
<p>Give your bookmarklet a descriptive name that will appear in your bookmarks bar.</p>
</div>
<div class="help-step">
<h3>4. Install the Bookmarklet</h3>
<p>Drag the generated blue link to your bookmarks bar, or right-click and select "Add to bookmarks".
</p>
</div>
<div class="help-step">
<h3>5. Use It Anywhere</h3>
<p>Click your bookmarklet on any webpage to execute your JavaScript code!</p>
</div>
</div>
<div class="example-section">
<h3>Example Ideas</h3>
<ul class="example-list">
<li><strong>Highlight Links:</strong> Make all links on a page stand out with colored backgrounds
</li>
<li><strong>Extract Data:</strong> Collect email addresses, phone numbers, or other information from
pages</li>
<li><strong>Dark Mode:</strong> Toggle dark mode on any website</li>
<li><strong>Word Count:</strong> Count words and characters on any page</li>
<li><strong>Remove Ads:</strong> Hide advertisements and distracting elements</li>
<li><strong>Auto-fill Forms:</strong> Quickly fill out repetitive forms</li>
</ul>
</div>
</section>
<main id="main-content" class="app-layout">
<section class="code-section" aria-labelledby="code-section-heading">
<h2 id="code-section-heading" class="sr-only">JavaScript Code Editor</h2>
<label for="code-editor">JavaScript Code:</label>
<div id="code-editor"></div>
<div id="error-display" class="error-panel hidden" role="alert" aria-live="polite"></div>
</section>
<aside class="controls-section">
<section class="name-section" aria-labelledby="name-section-heading">
<h2 id="name-section-heading" class="sr-only">Bookmarklet Name</h2>
<label for="bookmarklet-name">Bookmarklet Name:</label>
<input type="text" id="bookmarklet-name" placeholder="Custom Bookmarklet"
aria-describedby="name-input-help" maxlength="100">
<div id="name-input-help" class="sr-only">
Enter a name for your bookmarklet. This will be displayed when you save it to your bookmarks.
</div>
</section>
<section class="libraries-section" aria-labelledby="libraries-section-heading">
<h2 id="libraries-section-heading" class="sr-only">External Libraries</h2>
<label for="bookmarklet-libraries">External Libraries (optional):</label>
<textarea id="bookmarklet-libraries" placeholder="Enter library URLs, one per line
(JS and CSS supported)" aria-describedby="libraries-input-help" rows="4"></textarea>
<div id="libraries-input-help" class="sr-only">
Enter URLs of external JavaScript and CSS libraries to load before your code executes. One URL
per
line.
</div>
</section>
<section class="output-section" aria-labelledby="output-section-heading">
<h2 id="output-section-heading">Generated Bookmarklet:</h2>
<div id="bookmarklet-output" class="output-display" role="region" aria-live="polite"
aria-label="Generated bookmarklet result">
<p class="placeholder">Enter JavaScript code to generate a bookmarklet</p>
</div>
</section>
</aside>
</main>
</div>
<!-- Modal for viewing generated code -->
<div id="code-modal" class="modal" role="dialog" aria-labelledby="modal-title" aria-hidden="true">
<div class="modal-content">
<div class="modal-header">
<h3 id="modal-title">Generated Bookmarklet Code</h3>
<button class="modal-close" aria-label="Close modal">×</button>
</div>
<div class="modal-body">
<pre id="modal-code-content"><code></code></pre>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.16/codemirror.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.16/mode/javascript/javascript.min.js"></script>
<script src="script.js"></script>
</body>
</html>