Skip to content

Commit ff54040

Browse files
PianoMan0PianoMan0
authored
Merge pull request #8 from 3kho/main
optimize images
2 parents a44e2d2 + 57b277b commit ff54040

File tree

8 files changed

+277
-279
lines changed

8 files changed

+277
-279
lines changed

‎Untitled_Artwork 26.png‎

-282 KB
Binary file not shown.

‎icon.png‎

48.3 KB
Loading

‎index.html‎

Lines changed: 147 additions & 140 deletions
Original file line numberDiff line numberDiff line change
@@ -1,153 +1,160 @@
11
<!DOCTYPE html>
22
<html lang="en">
3-
<head>
4-
<meta charset="UTF-8" />
5-
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6-
<title>Hacklet</title>
7-
<link rel="icon" href="Untitled_Artwork 26.png" type="image/png" />
8-
<link rel="apple-touch-icon" href="Untitled_Artwork 26.png" />
9-
<link rel="stylesheet" href="styles.css" />
10-
<link
11-
rel="stylesheet"
12-
href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/default.min.css"
13-
/>
14-
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
15-
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/bundle.min.js"></script>
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>Hacklet</title>
7+
<link rel="icon" href="icon.png" type="image/png" />
8+
<link rel="apple-touch-icon" href="icon.png" />
9+
<link rel="stylesheet" href="styles.css" />
10+
<link
11+
rel="stylesheet"
12+
href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/default.min.css"
13+
/>
14+
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
15+
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/bundle.min.js"></script>
1616

17-
<!-- and it's easy to individually load additional languages -->
18-
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/languages/go.min.js"></script>
17+
<!-- and it's easy to individually load additional languages -->
18+
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/languages/go.min.js"></script>
1919

20-
<script>
21-
hljs.highlightAll();
22-
</script>
23-
</head>
20+
<script>
21+
hljs.highlightAll();
22+
</script>
23+
</head>
2424

25-
<body>
26-
<div class="github-mark">
27-
<a href="https://github.com/PianoMan0/hacklet" target="_blank">
28-
<img src="github-mark.svg" alt="GitHub Mark" />
29-
</a>
30-
</div>
31-
<div class="glitch-container">
32-
<h1>Hacklet</h1>
33-
<h1>Embark on a journey to bookmark the future.</h1>
34-
<h3>
35-
Hacklet is a <a href="https://ysws.hackclub.com">YSWS</a> about
36-
Bookmarklets.
37-
</h3>
38-
<h3>Build a bookmarklet, get a domain.</h3>
39-
<a href="rules.html" style="display: inline-flex; align-items: center; gap: 5px;">
40-
<h3 style="margin: 0;">The Rules</h3>
41-
</a>
42-
<span style="font-size: 0.9em; color: gray; display: inline-flex; align-items: center; gap: 5px;"> <- click here!</span>
43-
44-
<br />
45-
<br />
46-
<h2>What is a bookmarklet?</h2>
47-
<p>
48-
A bookmarklet is a small JavaScript program stored as a browser
49-
bookmark. When clicked, it runs code to modify a webpage,
50-
extract data, or perform quick actions.
51-
</p>
52-
<br />
53-
<section
54-
id="bookmarklet-tutorial"
55-
style="padding: 20px; border: 1px solid #ccc"
56-
>
57-
<h2>How to make a Bookmarklet</h2>
58-
<ol>
59-
<li>
60-
Write a JavaScript function to perform the desired task.
61-
For example:
62-
<pre>
25+
<body>
26+
<div class="github-mark">
27+
<a href="https://github.com/PianoMan0/hacklet" target="_blank">
28+
<img src="github-mark.svg" alt="GitHub Mark" />
29+
</a>
30+
</div>
31+
<div class="glitch-container">
32+
<h1>Hacklet</h1>
33+
<h1>Embark on a journey to bookmark the future.</h1>
34+
<h3>
35+
Hacklet is a <a href="https://ysws.hackclub.com">YSWS</a> about
36+
Bookmarklets.
37+
</h3>
38+
<h3>Build a bookmarklet, get a domain.</h3>
39+
<a
40+
href="rules.html"
41+
style="display: inline-flex; align-items: center; gap: 5px"
42+
>
43+
<h3 style="margin: 0">The Rules</h3>
44+
</a>
45+
<span
46+
style="
47+
font-size: 0.9em;
48+
color: gray;
49+
display: inline-flex;
50+
align-items: center;
51+
gap: 5px;
52+
"
53+
>
54+
<- click here!</span
55+
>
56+
57+
<br />
58+
<br />
59+
<h2>What is a bookmarklet?</h2>
60+
<p>
61+
A bookmarklet is a small JavaScript program stored as a browser
62+
bookmark. When clicked, it runs code to modify a webpage, extract data,
63+
or perform quick actions.
64+
</p>
65+
<br />
66+
<section
67+
id="bookmarklet-tutorial"
68+
style="padding: 20px; border: 1px solid #ccc"
69+
>
70+
<h2>How to make a Bookmarklet</h2>
71+
<ol>
72+
<li>
73+
Write a JavaScript function to perform the desired task. For
74+
example:
75+
<pre>
6376
<code class="language-js">
6477
javascript:(function() {
6578
alert('Hello, this is a bookmarklet!');
6679
})();
6780
</code>
6881
</pre>
69-
</li>
70-
<li>
71-
Copy the code and prepend it with the `javascript:`
72-
prefix. Remove any newlines or unnecessary spaces.
73-
</li>
74-
<li>
75-
Create a new bookmark in your browser and paste the code
76-
as the URL.
77-
</li>
78-
</ol>
79-
<h3>Example Bookmarklet</h3>
80-
<p>
81-
Drag the following link to your bookmarks bar to try an
82-
example bookmarklet:
83-
<a
84-
href="javascript:(function(){alert('Hello, this is a bookmarklet!');})();"
85-
>Click Me!</a
86-
>
87-
</p>
88-
<h3>How to Use Bookmarklets</h3>
89-
<p>
90-
Simply click the bookmarklet from your bookmarks bar while
91-
on any webpage to execute the JavaScript code.
92-
</p>
93-
<img
94-
src="search_wikipedia_screenshot.png"
95-
alt="Example Image"
96-
/>
97-
</section>
82+
</li>
83+
<li>
84+
Copy the code and prepend it with the `javascript:` prefix. Remove
85+
any newlines or unnecessary spaces.
86+
</li>
87+
<li>
88+
Create a new bookmark in your browser and paste the code as the URL.
89+
</li>
90+
</ol>
91+
<h3>Example Bookmarklet</h3>
92+
<p>
93+
Drag the following link to your bookmarks bar to try an example
94+
bookmarklet:
95+
<a
96+
href="javascript:(function(){alert('Hello, this is a bookmarklet!');})();"
97+
>Click Me!</a
98+
>
99+
</p>
100+
<h3>How to Use Bookmarklets</h3>
101+
<p>
102+
Simply click the bookmarklet from your bookmarks bar while on any
103+
webpage to execute the JavaScript code.
104+
</p>
105+
<img src="ss.png" alt="Example Image" />
106+
</section>
98107

99-
<br />
100-
<br />
101-
<h2>Bookmarklet Tester</h2>
102-
<form id="bookmarklet-form">
103-
<label for="bookmarklet-code"
104-
>Enter your Bookmarklet JavaScript code:</label
105-
>
106-
<textarea id="bookmarklet-code" rows="4" cols="50"></textarea>
107-
<br />
108-
<button type="button" onclick="testBookmarklet()">
109-
Test Bookmarklet
110-
</button>
111-
</form>
112-
<br />
113-
<a
114-
href="https://github.com/pianoman0"
115-
target="_blank"
116-
class="coded-by-pianoman0"
117-
>Coded By PianoMan0</a
118-
>
119-
<p>
120-
With amazing bug fixing by
121-
<a href="https://github.com/isaacfonner">Charmunk</a>,
122-
<a href="https://saahild.com">Neon</a>!
123-
</p>
124-
</div>
125-
<script>
126-
function minifyJS(code) {
127-
try {
128-
const minified = Terser.minify_sync(code).code;
129-
return minified ? 'javascript:' + minified : code;
130-
} catch (error) {
131-
alert('Error while minifying code: ' + error.message);
132-
return code;
133-
}
134-
}
135-
function testBookmarklet() {
136-
const code = document.getElementById('bookmarklet-code').value;
137-
try {
138-
if (code.trim().startsWith('javascript:')) {
139-
const cleanCode = code.replace('javascript:', '');
140-
console.log(cleanCode, minifyJS(cleanCode));
141-
new Function(cleanCode)();
142-
} else {
143-
throw new Error(
144-
'Bookmarklet must start with "javascript:"',
145-
);
146-
}
147-
} catch (error) {
148-
alert('Error in bookmarklet code: ' + error.message);
149-
}
150-
}
151-
</script>
152-
</body>
108+
<br />
109+
<br />
110+
<h2>Bookmarklet Tester</h2>
111+
<form id="bookmarklet-form">
112+
<label for="bookmarklet-code"
113+
>Enter your Bookmarklet JavaScript code:</label
114+
>
115+
<textarea id="bookmarklet-code" rows="4" cols="50"></textarea>
116+
<br />
117+
<button type="button" onclick="testBookmarklet()">
118+
Test Bookmarklet
119+
</button>
120+
</form>
121+
<br />
122+
<a
123+
href="https://github.com/pianoman0"
124+
target="_blank"
125+
class="coded-by-pianoman0"
126+
>Coded By PianoMan0</a
127+
>
128+
<p>
129+
With amazing bug fixing by
130+
<a href="https://github.com/isaacfonner">Charmunk</a>,
131+
<a href="https://saahild.com">Neon</a>!
132+
</p>
133+
</div>
134+
<script>
135+
function minifyJS(code) {
136+
try {
137+
const minified = Terser.minify_sync(code).code;
138+
return minified ? "javascript:" + minified : code;
139+
} catch (error) {
140+
alert("Error while minifying code: " + error.message);
141+
return code;
142+
}
143+
}
144+
function testBookmarklet() {
145+
const code = document.getElementById("bookmarklet-code").value;
146+
try {
147+
if (code.trim().startsWith("javascript:")) {
148+
const cleanCode = code.replace("javascript:", "");
149+
console.log(cleanCode, minifyJS(cleanCode));
150+
new Function(cleanCode)();
151+
} else {
152+
throw new Error('Bookmarklet must start with "javascript:"');
153+
}
154+
} catch (error) {
155+
alert("Error in bookmarklet code: " + error.message);
156+
}
157+
}
158+
</script>
159+
</body>
153160
</html>

0 commit comments

Comments
 (0)