-
Notifications
You must be signed in to change notification settings - Fork 13
/
Copy pathindex.html
132 lines (132 loc) · 7.53 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
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>MainOnly</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
background-color: #333;
color: #fff;
}
.container {
text-align: left;
margin-top: 2rem;
width: 80%;
max-width: 800px;
}
.title {
font-size: 2em;
margin-bottom: 20px;
}
.description {
font-size: 1.2em;
margin-bottom: 50px;
}
.button {
display: inline-block;
padding: 10px 20px;
font-size: 1.2em;
color: #fff;
background-color: #007BFF;
border: none;
border-radius: 5px;
text-decoration: none;
}
.bookmarklet-button {
cursor: move;
}
.step {
margin-bottom: 30px;
display: flex;
}
.step-number {
font-size: 3em;
margin-right: 20px;
}
.step-content {
flex-grow: 1;
}
.step-hint {
font-size: 1.2em;
margin-bottom: 10px;
}
kbd {
display: inline-block;
padding: 2px 5px;
font-size: 0.9em;
color: #333;
background-color: #f5f5f5;
border: 1px solid #ccc;
border-radius: 3px;
}
.icon {
height: 150px;
width: 150px;
}
.title-and-icon-container {
display: flex;
justify-content: space-between;
}
.github-button {
background-color: #28a745;
}
</style>
</head>
<body>
<div class="container">
<div class="title-and-icon-container">
<div>
<div class="title">MainOnly</div>
<div class="description">A JavaScript bookmarklet designed to isolate and highlight a specific element on a webpage, effectively hiding all other elements.</div>
</div>
<img src="icon.png" alt="MainOnly Icon" class="icon">
</div>
<div class="step">
<div class="step-number">1</div>
<div class="step-content">
<div class="step-hint">Install</div>
<p>⬇️ Just drag the "mainonly" button to your bookmarks bar. </p>
<a class="button bookmarklet-button" href='javascript:(function(){document.getElementById("mainonly")&&document.dispatchEvent(new KeyboardEvent("keydown",{key:"Escape"}));var e=document.body,n=null;e.id?(n="class",e.classList.add("mainonly")):(n="id",e.id="mainonly");let t=document.head.appendChild(document.createElement("style"));t.textContent="#mainonly { outline: 2px solid red; } .mainonly { outline: 2px solid red; }";let i=document.body.appendChild(document.createElement("div"));i.className="mainonly-guide",i.innerHTML=`<p>正在选择元素。按 <kbd>Esc</kbd> 键取消选择。向下滚动，或按下 <kbd>=</kbd>/<kbd>.</kbd> 键缩小选区。向上滚动，或按下 <kbd>-</kbd>/<kbd>,</kbd> 键扩大选区。</p><p>Selecting element. Press <kbd>Esc</kbd> to cancel selection. Scroll down, or press <kbd>=</kbd>/<kbd>.</kbd> to shrink the selection. Scroll up, or press <kbd>-</kbd>/<kbd>,</kbd>, to expand the selection.</p>`;let o=document.head.appendChild(document.createElement("style"));function l(t){t instanceof HTMLElement&&("id"===n?e.removeAttribute("id"):e.classList.remove("mainonly"),(e=t).id?(n="class",e.classList.add("mainonly")):(n="id",e.id="mainonly"))}function d(e){l(e.target)}function a(i){i.preventDefault(),function n(){for(var t=e;t.parentElement;)(t=t.parentElement).classList.add("mainonly_parents")}(),"id"===n?t.textContent="* { visibility: hidden; } #mainonly, #mainonly *, .mainonly_parents { visibility: visible; }":t.textContent="* { visibility: hidden; } .mainonly, .mainonly *, .mainonly_parents { visibility: visible; }",m(),r()}function r(){i.remove(),o.remove()}function s(i){if("Escape"===i.key)t.remove(),document.removeEventListener("keydown",s),m(),r(),"id"===n?e.removeAttribute("id"):e.classList.remove("mainonly"),function e(){for(var n=document.querySelectorAll(".mainonly_parents"),t=0;t<n.length;t++)n[t].classList.remove("mainonly_parents")}();else if(","===i.key||"-"===i.key)l(e.parentElement);else if("."===i.key||"="===i.key){var o=e.querySelector(":hover");o&&l(o)}}function c(n){if(n.preventDefault(),n.deltaY<0)l(e.parentElement);else{var t=e.querySelector(":hover");t&&l(t)}}function m(){document.removeEventListener("mouseover",d),document.removeEventListener("click",a),document.removeEventListener("wheel",c)}o.textContent=`.mainonly-guide {position: fixed;top: 0;left: 50%; /* center the box horizontally */transform: translate(-50%, 0); /* center the box horizontally */padding: 0.5rem;font-size: 1rem;font-family: sans-serif;text-align: center;color: white;background-color: rgba(0, 0, 0, 0.5);border-radius: 0.5em;z-index: 999999999; kbd {display: inline-block;padding: 0.1em 0.3em;font-size: 0.8em;line-height: 1;color: #24292e;vertical-align: middle;background-color: #fafbfc;border: 1px solid #d1d5da;border-radius: 3px;box-shadow: inset 0 -1px 0 #d1d5da; }}`,document.addEventListener("mouseover",d),document.addEventListener("click",a),document.addEventListener("wheel",c,{passive:!1}),document.addEventListener("keydown",s)}())'>mainonly</a>
</div>
</div>
<div class="step">
<div class="step-number">2</div>
<div class="step-content">
<div class="step-hint">How to use</div>
<p>
<ul>
<li>Click the bookmarklet to activate.</li>
<li>Select the element to focus. This selected element will be encircled with a red outline. Use the scroll wheel or keyboard shortcut (<kbd>-</kbd> <kbd>,</kbd> for expand, <kbd>=</kbd> <kbd>.</kbd> for shrink) to adjust the selection size.</li>
<li>Once you've made a selection, click the left mouse button. All other elements will be hidden, leaving only the selected element visible.</li>
<li>Press <kbd>ESC</kbd> to reveal the hidden elements and revert the page to its original state.</li>
</ul>
</p>
</div>
</div>
<div class="step">
<div class="step-number">3</div>
<div class="step-content">
<div class="step-hint">Try it here</div>
<p>Try using the bookmarklet on this page to see how it works.</p>
</div>
</div>
<div class="step">
<div class="step-content">
<div class="step-hint">Check out the Github Repo</div>
<p>Found this useful? Or just interested in how it works? Check out the Github repo for more. (Or just add a star)</p>
<div style="text-align: center;">
<a class="button github-button" href="https://github.com/jerrylususu/mainonly">⭐ GitHub Repo</a>
<br>
<p>Made with ❤️, built using 🤖</p>
</div>
</div>
</div>
</div>
</body>
</html>