-
Notifications
You must be signed in to change notification settings - Fork 1
Expand file tree
/
Copy pathweblight.html
More file actions
91 lines (81 loc) · 5.61 KB
/
weblight.html
File metadata and controls
91 lines (81 loc) · 5.61 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Spotlight Bookmarklet Installer</title>
<style>
body {
font-family: Arial, sans-serif;
background: #f4f4f4;
color: #333;
text-align: center;
padding: 40px;
}
h1 {
margin-bottom: 10px;
}
a.bookmarklet {
display: inline-block;
margin: 20px auto;
padding: 12px 20px;
background: #0077cc;
color: #fff;
text-decoration: none;
border-radius: 6px;
font-size: 16px;
}
button {
margin-top: 20px;
padding: 10px 16px;
font-size: 14px;
border: none;
border-radius: 6px;
background: #444;
color: #fff;
cursor: pointer;
}
button:active {
background: #222;
}
.instructions {
margin-top: 30px;
text-align: left;
max-width: 600px;
margin-left: auto;
margin-right: auto;
background: #fff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}
code {
background: #eee;
padding: 2px 4px;
border-radius: 3px;
}
</style>
</head>
<body>
<h1>📍 Spotlight Focus Tool</h1>
<p>Drag this blue button below to your bookmark bar:
then click it to activate, controls below
</p>
<a class="bookmarklet"
style="display:inline-block; margin:20px auto; padding:12px 20px; background-color:#0077cc; color:#ffffff; text-decoration:none; border-radius:6px; font-size:16px; font-family:Arial, sans-serif; font-weight:bold; cursor:pointer;"
href="javascript:(function(){var ID='__spotlight_combo__';var s=document.getElementById(ID);if(s){window.removeEventListener('mousemove',s.__mv,true);window.removeEventListener('keydown',s.__kd,true);s.remove();var hh=document.getElementById(ID+'_help');if(hh)hh.remove();var ds=document.getElementById(ID+'_darkstyle');if(ds)ds.remove();return;}var mode='circle',r=200,lineH=200,dim=0.6,x=innerWidth/2,y=innerHeight/2,darkMode=false,spotlightOn=true,frozen=false;function place(){if(!spotlightOn){s.style.display='none';return;}s.style.display='block';if(mode==='circle'){s.style.width=(r*2)+'px';s.style.height=(r*2)+'px';s.style.left=(x-r)+'px';s.style.top=(y-r)+'px';s.style.borderRadius='50%';}else{s.style.width='100vw';s.style.height=lineH+'px';s.style.left='0px';s.style.top=(y-lineH/2)+'px';s.style.borderRadius='0';}s.style.boxShadow='0 0 0 9999px rgba(0,0,0,'+dim+')';}function toggleDark(){darkMode=!darkMode;var ds=document.getElementById(ID+'_darkstyle');if(darkMode){if(!ds){ds=document.createElement('style');ds.id=ID+'_darkstyle';ds.innerHTML='html,body{background:#111 !important; color:#eee !important;} *{color:#eee !important; border-color:#444 !important;} div,p,span,section,article,nav,header,footer,aside,main,table,td,th,ul,ol,li{background-color:transparent !important;}';document.head.appendChild(ds);}}else{if(ds)ds.remove();}}function toggleSpotlight(){spotlightOn=!spotlightOn;place();}function mv(e){if(frozen)return;if(mode==='circle'){x=e.clientX;y=e.clientY;}else{y=e.clientY;}if(spotlightOn)place();}function kd(e){var handled=true;if(e.key==='c'||e.key==='C'){mode='circle';if(spotlightOn)place();}else if(e.key==='l'||e.key==='L'){mode='line';if(spotlightOn)place();}else if(e.key==='ArrowRight'&&!e.shiftKey){if(mode==='circle'){r=Math.min(2000,r+20);}else{lineH=Math.min(innerHeight,lineH+20);}if(spotlightOn)place();}else if(e.key==='ArrowLeft'&&!e.shiftKey){if(mode==='circle'){r=Math.max(20,r-20);}else{lineH=Math.max(20,lineH-20);}if(spotlightOn)place();}else if(e.key==='ArrowRight'&&e.shiftKey){dim=Math.min(0.98,+(dim+0.05).toFixed(2));if(spotlightOn)place();}else if(e.key==='ArrowLeft'&&e.shiftKey){dim=Math.max(0,+(dim-0.05).toFixed(2));if(spotlightOn)place();}else if(e.key==='d'||e.key==='D'){toggleDark();}else if(e.key==='s'||e.key==='S'){toggleSpotlight();}else if(e.key==='f'||e.key==='F'){frozen=!frozen;}else if(e.key==='Escape'){window.removeEventListener('mousemove',mv,true);window.removeEventListener('keydown',kd,true);s.remove();var hh=document.getElementById(ID+'_help');if(hh)hh.remove();var ds=document.getElementById(ID+'_darkstyle');if(ds)ds.remove();if(darkMode)toggleDark();}else{handled=false;}if(handled)e.preventDefault();}s=document.createElement('div');s.id=ID;var st=s.style;st.position='fixed';st.pointerEvents='none';st.zIndex='2147483647';st.background='transparent';st.transition='box-shadow 0.05s,width 0.05s,height 0.05s';document.body.appendChild(s);s.__mv=mv;s.__kd=kd;window.addEventListener('mousemove',mv,true);window.addEventListener('keydown',kd,true);place();var help=document.createElement('div');help.id=ID+'_help';help.innerHTML='<b>Spotlight Controls</b><br>C = Circle<br>L = Line<br>← / → = Resize<br>Shift+←/→ = Dimness<br>D = Dark Mode<br>S = Toggle Spotlight<br>F = Freeze Position<br>Esc = Exit';help.style.position='fixed';help.style.right='10px';help.style.bottom='10px';help.style.background='rgba(0,0,0,0.7)';help.style.color='#fff';help.style.padding='8px 10px';help.style.font='12px sans-serif';help.style.borderRadius='6px';help.style.zIndex='2147483648';document.body.appendChild(help);})();">Spotlight</a>
<div class="instructions">
<h2>Controls</h2>
<ul>
<li><b>Mouse</b> → move the spotlight</li>
<li><b>C</b> → Circle mode</li>
<li><b>L</b> → Line mode</li>
<li><b>← / →</b> → Bigger/Smaller</li>
<li><b>Shift + ←/→</b> → Darker/Lighter</li>
<li><b>D</b> → Toggle Dark Mode</li>
<li><b>S</b> → Toggle Spotlight On/Off</li>
<li><b>F</b> → Freeze Spotlight Position</li>
<li><b>Esc</b> → Exit</li>
</ul>
</div>
</body>
</html>