-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
265 lines (236 loc) · 12.8 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
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Primary Meta Tags -->
<title>Spotlight.js</title>
<meta name="title" content="Spotlight.js">
<meta name="description"
content="Interactive walkthroughs, key feature spotlights, in-app guidance, & additional resources to support users in navigating & understanding the product.">
<meta name="keywords"
content="spotlight, popover, overlay, tour, walkthrough, product-tour, features-introduction, javascript-library">
<meta name="robots" content="index, follow">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="language" content="English">
<meta name="revisit-after" content="15 days">
<meta name="author" content="Tanish Raj">
<!-- Open Graph / Facebook -->
<meta property="og:type" content="website" />
<meta property="og:url" content="https://cttricks.com/" />
<meta property="og:title" content="Spotlight.js" />
<meta property="og:description"
content="Interactive walkthroughs, key feature spotlights, in-app guidance, & additional resources to support users in navigating & understanding the product." />
<meta property="og:image" content="https://raw.githubusercontent.com/cttricks/spotlight.js/v0.1-beta/docs/assets/img/spotlight-js-banner.png" />
<link rel="icon" href="./docs/assets/img/favicon.png">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="./docs/assets/css/home.css">
</head>
<body>
<header>
<div class="container-lg">
<div class="row">
<div class="col-8">
<div class="site-info">
<!--
Spotlight
Getting Started
This is just one example, be sure to consult the documentation for additional use cases and examples.
-->
<div>
<h1>Spotlight.js</h1>
<p>
Interactive walkthroughs, key feature spotlights, in-app guidance, and additional
resources to support users in navigating and understanding the product seamlessly.
</p>
<div>
<button type="spotlight-button:start">Start Demo Tour</button>
<button type="link" link="./docs">Documentation</button>
</div>
</div>
</div>
</div>
<div class="col-4">
<img src="./docs/assets/img/spotlight-js-logo.webp" class="rounded float-end site-icon"
alt="Spotlight.js">
</div>
</div>
</div>
</header>
<!-- Spotlight; Universal Highlighting; This tool allows you to highlight virtually anything, including images, text, SVGs, div, spans, list items, and more. -->
<section class="hl-section container-lg">
<span>Cross-Browser Compatibility</span>
<span>Mobile-Friendly</span>
<span>Highly Customizable</span>
<span>Lightweight</span>
<span>No External Dependencies</span>
<span>Rich in Features</span>
<span>Open Source (MIT Licensed)</span>
<span>JavaScript-Based</span>
<span>User-Friendly</span>
<span>Comprehensive Overview</span>
</section>
<section class="container-lg">
<div class="row gap-4 mt-2">
<div class="col about-lib">
<div class="icon">
<svg class="h-6 w-6" stroke="currentColor" fill="none" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4">
</path>
</svg>
</div>
<h3>Easy to Use</h3>
<p>
A streamlined API that simplifies the development of advanced onboarding experiences for your
products. It's a lightweight solution at just 10kB, with no external dependencies required.
</p>
</div>
<div class="col about-lib">
<div class="icon">
<svg class="h-6 w-6" stroke="currentColor" fill="none" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z">
</path>
<path d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
</svg>
</div>
<h3>Customizable</h3>
<p>
versatile configuration options, allowing you to customize every aspect of your product onboarding
and each step of your tour. With its flexibility, you can create a seamless user experience tailored
to your needs.
</p>
</div>
<div class="col about-lib">
<div class="icon">
<svg class="h-6 w-6" stroke="currentColor" fill="none" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M9 12l2 2 4-4M7.835 4.697a3.42 3.42 0 001.946-.806 3.42 3.42 0 014.438 0 3.42 3.42 0 001.946.806 3.42 3.42 0 013.138 3.138 3.42 3.42 0 00.806 1.946 3.42 3.42 0 010 4.438 3.42 3.42 0 00-.806 1.946 3.42 3.42 0 01-3.138 3.138 3.42 3.42 0 00-1.946.806 3.42 3.42 0 01-4.438 0 3.42 3.42 0 00-1.946-.806 3.42 3.42 0 01-3.138-3.138 3.42 3.42 0 00-.806-1.946 3.42 3.42 0 010-4.438 3.42 3.42 0 00.806-1.946 3.42 3.42 0 013.138-3.138z">
</path>
</svg>
</div>
<h3>Open-source</h3>
<p>
Spotlight.js is free and open-source, available under the MIT license. It's designed for easy
integration, allowing you to quickly add it to your projects with confidence. Also you are free to
modify and use it as needed.
</p>
</div>
</div>
</section>
<section class="container-lg mt-4 pt-4">
<h2>#Examples</h2>
<p class="mt-2">
These are just a few examples, you can find additional details
<a href="./docs" target="_self">in the documentation</a>.
</p>
<!-- Spotlight; Examples; Here are some examples to provide you with a general idea. -->
<div class="exmaples">
<button data-style="highlight-only">Highlight Only</button>
<button data-style="confirm-before-exit">Confirm on Exit</button>
<button data-style="change-overlay-color">Overlay Color</button>
<!-- Spotlight; ./docs/assets/img/demo-tour/custom-popup.webp; Use pictures, GIFs, and more in your explanations. -->
<button data-style="popover-with-img">Popover with Image</button>
<!-- Spotlight; Spotlight JS includes an <strong>onEvent</strong> callback that captures and emits all events from start to finish. -->
<button data-style="event-listener">Event Listener</button>
</div>
<p class="mt-4">
Additional features are planned for future updates. If you have any suggestions, feel free to
<a href="https://github.com/cttricks/spotlight.js/discussions" target="_blank">start a discussion</a> on our
GitHub repository.
</p>
</section>
<div class="hr-line"></div>
<section class="container-lg github-starts">
<div class="text-center">
<h2>Unlock the full potential of your web projects</h2>
<p class="mt-4 pb-2">
This lightweight, easy-to-integrate library is designed to enhance your user onboarding
experience. If you find it useful, don't forget to star the project on GitHub and help spread the word.
Your support fuels future development and improvements!
</p>
<div class="my-4 py-2">
<button type="link" target="_blank" link="https://github.com/cttricks/spotlight.js">
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" class="-ml-1 fill-current mr-1"
viewBox="0 0 14 15">
<path
d="m7 11.152-4.114 2.303.918-4.625L.342 5.628l4.683-.555L7 .792l1.975 4.281 4.683.555-3.463 3.202.92 4.624z" />
</svg>
<!-- TODO: Add GitHub API to fetch & display starts in real-time -->
<span>0</span>
GitHub Stars</button>
<button type="link" link="./docs">Start Using Spotlight.js</button>
</div>
</div>
</section>
<footer class="py-4 mt-4">
<div>
<span>MIT Licensed © </span>
<span>•</span>
<a target="_blank" href="https://github.com/cttricks/spotlight.js">
GitHub
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 16 16">
<path fill="#fdba20"
d="M1.523.38H15.62v14.096h-2.286V4.283L2.332 15.284.715 13.668 11.717 2.667H1.523z" />
</svg>
</a>
<a target="_blank" href="https://www.linkedin.com/in/tanishraj/">
LinkedIn
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 16 16">
<path fill="#fdba20"
d="M1.523.38H15.62v14.096h-2.286V4.283L2.332 15.284.715 13.668 11.717 2.667H1.523z" />
</svg>
</a>
<a target="_blank" href="https://dly.to/utDQ7EBQn6W">
Daily.dev
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 16 16">
<path fill="#fdba20"
d="M1.523.38H15.62v14.096h-2.286V4.283L2.332 15.284.715 13.668 11.717 2.667H1.523z" />
</svg>
</a>
</div>
</footer>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"></script>
<script type="module">
// Let's Start with
import { spotlight } from './dist/spotlight.min.js';
const Spotlight = await spotlight();
// Event Handler
Spotlight.addEventListener('exit', (e) => {
Spotlight.setCover({ hex: '#000000', alpha: 0.5 });
});
// Below codes are to handel the events of this page Only
document.querySelector('footer span').innerHTML += new Date().getFullYear();
const handelButtonClickWithLinkAttr = (e) => {
window.open((e.getAttribute('link') ?? '#'), (e.getAttribute('target') ?? '_self'));
};
document.body.addEventListener('click', (e) => {
if ((e.target.getAttribute('type') ?? '') === 'link') return handelButtonClickWithLinkAttr(e.target);
let toggle = e.target.getAttribute('data-style');
if (!toggle) return;
e.preventDefault();
switch (toggle) {
case 'highlight-only':
Spotlight.start({ from: 3, highlightOnly: true });
break;
case 'confirm-before-exit':
Spotlight.start({ from: 3, highlightOnly: true, confirmOnExit: true });
break;
case 'change-overlay-color':
Spotlight.setCover({ hex: '#bfff5c', alpha: 0.5 });
Spotlight.start({ from: 3, highlightOnly: true });
break;
case 'popover-with-img':
Spotlight.start({ from: 4 });
break;
case 'event-listener':
Spotlight.start({ from: 5 });
break;
default:
console.log(`${toggle} is not a toggle event`);
}
});
</script>
</body>
</html>