PageSourceSearch

https://wahyu9kdl.github.io/HTML/TOOLS/visitor-badge.html

html wahyu9kdl.github.io collected 2026-10-03 10:09:17 UTC 51,719 bytes, 1,830 lines download raw bytes

1<!DOCTYPE html>
2<html lang="en">
3<!--  
4 Hai, selamat datang di proyek "Visitor Badge - Awdev Devoloper - Wahyu9kdl",
5 --------------------
6 Author : wahyu9kdl
7 Github : https://wahyu9kdl.github.io / https://www.alhikmah.my.id / https://www.awdev.eu.org
8 Email  : [email protected]
9  -->
10  <head>
11    <meta charset="UTF-8" />
12    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
13    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
14<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-pub-5407249785989200"
15     crossorigin="anonymous"></script>
15
16     
16<script async custom-element="amp-auto-ads"
17     src="https://cdn.ampproject.org/v0/amp-auto-ads-0.1.js">
18     </script>
18
19    <meta name="title" content="Visitor Badge - Generator, Maker, Badge" />
20    <meta name="description" content="Visitor Badge for your Web or Github repository." />
21    <meta name="keywords" content="visitor badge,visitor counter,badge,shields io,visitor badge feri irawan,visitor,badges,feri,irawan,github,badge views,views,counter" />
22    <meta name="robots" content="index,follow" />
23
24    <meta name="twitter:image:src" content="https://opengraph.githubassets.com/9a124e20c9bf57a6aaea96ab75bb6c1553940d8179529932b221682abdb9c1d6/feri-irawan/visitor-badge" />
25    <meta name="twitter:site" content="Visitor Badge" />
26    <meta name="twitter:card" content="summary_large_image" />
27    <meta name="twitter:title" content="Visitor Badge - Generator, Maker, Badge" />
28    <meta name="twitter:description" content="Visitor Badge for your Web or Github repository." />
29    <meta name="og:title" content="Visitor Badge - Generator, Maker, Badge" />
30    <meta name="og:description" content="Visitor Badge for your Web or Github repository." />
31    <meta name="og:image" content="https://opengraph.githubassets.com/9a124e20c9bf57a6aaea96ab75bb6c1553940d8179529932b221682abdb9c1d6/feri-irawan/visitor-badge" />
32    <meta property="og:image:alt" content="Visitor Badge for your Web or Github repository." />
33    <meta property="og:image:width" content="1200" />
34    <meta property="og:image:height" content="600" />
35    <meta property="og:site_name" content="Visitor Badge" />
36    <meta property="og:type" content="object" />
37    <meta property="og:title" content="Visitor Badge - Generator, Maker, Badge" />
38    <meta name="theme-color" content="#10b981">
39    <link rel="preconnect" href="https://fonts.googleapis.com" />
40    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
41    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet" />  
42    <link rel="apple-touch-icon" href="https://cdn.glitch.com/b57e4cca-845c-45d8-badd-fffc3393d174%2Flogo.png?v=1630917610030">
43    <link rel="shortcut icon" type="image/png" href="https://cdn.glitch.com/b57e4cca-845c-45d8-badd-fffc3393d174%2Flogo.png?v=1630917610030" />
44    <link rel="stylesheet" href="/src/css/main.css " />
45<link rel="shortcut icon" type="image/x-icon" href="https://wahyu9kdl.github.io/Aw-icon.png">
46   <!-- Global site tag (gtag.js) - Google Analytics -->
vendor: 65 bytes, lines 46-47
46
47	<script async src="https://www.googletagmanager.com/gtag/js?id=
47G-VSD8HWB5RG
vendor: 13 bytes, lines 47-48
47"></script>
48	
48<script>
49	
vendor: 132 bytes, lines 49-53
49window.dataLayer = window.dataLayer || [];
50	function gtag(){dataLayer.push(arguments);}
51	gtag('js', new Date());
52	
53	gtag('config', '
53G-VSD8HWB5RG
vendor: 5 bytes, lines 53-54
53');
54	
54</script>
54
55	
56<link href="https://ad.doubleclick.net" rel="dns-prefetch"/>
57<link href="https://pagead2.googlesyndication.com" rel="dns-prefetch"/>
58<link href="https://googleads.g.doubleclick.net" rel="dns-prefetch"/>
59<link href="https://tpc.googlesyndication.com" rel="dns-prefetch"/>
60<link href="https://adservice.google.com" rel="dns-prefetch"/>
61<link href="https://secureads.g.doubleclick.net" rel="dns-prefetch"/>
62<link href="https://www.googletagservices.com" rel="dns-prefetch"/>
63<link rel="preload" as="script" href="https://securepubads.g.doubleclick.net/tag/js/gpt.js"/>
64<meta content='zGParJOzRtyM3aQvVTqLNA' property='Google Analytics'/>	  
65<meta name="google-site-verification" content="YVxLT_hnJJLMCD3SSRuUDN6bsekh4oc_pJ9AvlOTROg" />
66	<meta name="google-adsense-account" content="ca-pub-8113726015720108">
67	  
67<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-8113726015720108"
68     crossorigin="anonymous"></script>
68
69	  
69<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-5251897355612088"
70     crossorigin="anonymous"></script>
70
71	  
71<script async custom-element="amp-auto-ads"
72        src="https://cdn.ampproject.org/v0/amp-auto-ads-0.1.js">
73</script>
73
74	  <!-- Google tag (gtag.js) -->
vendor: 64 bytes, lines 74-75
74
75<script async src="https://www.googletagmanager.com/gtag/js?id=
75G-HHJFFHD70K
vendor: 12 bytes, line 75
75"></script>
76<script>
77  
vendor: 134 bytes, lines 77-81
77window.dataLayer = window.dataLayer || [];
78  function gtag(){dataLayer.push(arguments);}
79  gtag('js', new Date());
80
81  gtag('config', '
81G-HHJFFHD70K
vendor: 4 bytes, line 81
81');
82</script>
82
83<style type="text/css">
84/*! tailwindcss v2.2.4 | MIT License | https://tailwindcss.com */
85
86/*! modern-normalize v1.1.0 | MIT License | https://github.com/sindresorhus/modern-normalize */
87
88/*
89Document
90========
91*/
92
93/**
94Use a better box model (opinionated).
95*/
96
97*,
98::before,
99::after {
100  box-sizing: border-box;
101}
102
103/**
104Use a more readable tab size (opinionated).
105*/
106
107html {
108  -moz-tab-size: 4;
109  -o-tab-size: 4;
110     tab-size: 4;
111}
112
113/**
1141. Correct the line height in all browsers.
1152. Prevent adjustments of font size after orientation changes in iOS.
116*/
117
118html {
119  line-height: 1.15;
120  /* 1 */
121  -webkit-text-size-adjust: 100%;
122  /* 2 */
123}
124
125/*
126Sections
127========
128*/
129
130/**
131Remove the margin in all browsers.
132*/
133
134body {
135  margin: 0;
136}
137
138/**
139Improve consistency of default fonts in all browsers. (https://github.com/sindresorhus/modern-normalize/issues/3)
140*/
141
142body {
143  font-family:
144		system-ui,
145		-apple-system, /* Firefox supports this but not yet `system-ui` */
146		'Segoe UI',
147		Roboto,
148		Helvetica,
149		Arial,
150		sans-serif,
151		'Apple Color Emoji',
152		'Segoe UI Emoji';
153}
154
155/*
156Grouping content
157================
158*/
159
160/**
1611. Add the correct height in Firefox.
1622. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
163*/
164
165hr {
166  height: 0;
167  /* 1 */
168  color: inherit;
169  /* 2 */
170}
171
172/*
173Text-level semantics
174====================
175*/
176
177/**
178Add the correct text decoration in Chrome, Edge, and Safari.
179*/
180
181abbr[title] {
182  -webkit-text-decoration: underline dotted;
183          text-decoration: underline dotted;
184}
185
186/**
187Add the correct font weight in Edge and Safari.
188*/
189
190b,
191strong {
192  font-weight: bolder;
193}
194
195/**
1961. Improve consistency of default fonts in all browsers. (https://github.com/sindresorhus/modern-normalize/issues/3)
1972. Correct the odd 'em' font sizing in all browsers.
198*/
199
200code,
201kbd,
202samp,
203pre {
204  font-family:
205		ui-monospace,
206		SFMono-Regular,
207		Consolas,
208		'Liberation Mono',
209		Menlo,
210		monospace;
211  /* 1 */
212  font-size: 1em;
213  /* 2 */
214}
215
216/**
217Add the correct font size in all browsers.
218*/
219
220small {
221  font-size: 80%;
222}
223
224/**
225Prevent 'sub' and 'sup' elements from affecting the line height in all browsers.
226*/
227
228sub,
229sup {
230  font-size: 75%;
231  line-height: 0;
232  position: relative;
233  vertical-align: baseline;
234}
235
236sub {
237  bottom: -0.25em;
238}
239
240sup {
241  top: -0.5em;
242}
243
244/*
245Tabular data
246============
247*/
248
249/**
2501. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
2512. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
252*/
253
254table {
255  text-indent: 0;
256  /* 1 */
257  border-color: inherit;
258  /* 2 */
259}
260
261/*
262Forms
263=====
264*/
265
266/**
2671. Change the font styles in all browsers.
2682. Remove the margin in Firefox and Safari.
269*/
270
271button,
272input,
273optgroup,
274select,
275textarea {
276  font-family: inherit;
277  /* 1 */
278  font-size: 100%;
279  /* 1 */
280  line-height: 1.15;
281  /* 1 */
282  margin: 0;
283  /* 2 */
284}
285
286/**
287Remove the inheritance of text transform in Edge and Firefox.
2881. Remove the inheritance of text transform in Firefox.
289*/
290
291button,
292select {
293  /* 1 */
294  text-transform: none;
295}
296
297/**
298Correct the inability to style clickable types in iOS and Safari.
299*/
300
301button,
302[type='button'],
303[type='reset'],
304[type='submit'] {
305  -webkit-appearance: button;
306}
307
308/**
309Remove the inner border and padding in Firefox.
310*/
311
312/**
313Restore the focus styles unset by the previous rule.
314*/
315
316/**
317Remove the additional ':invalid' styles in Firefox.
318See: https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737
319*/
320
321/**
322Remove the padding so developers are not caught out when they zero out 'fieldset' elements in all browsers.
323*/
324
325legend {
326  padding: 0;
327}
328
329/**
330Add the correct vertical alignment in Chrome and Firefox.
331*/
332
333progress {
334  vertical-align: baseline;
335}
336
337/**
338Correct the cursor style of increment and decrement buttons in Safari.
339*/
340
341/**
3421. Correct the odd appearance in Chrome and Safari.
3432. Correct the outline style in Safari.
344*/
345
346/**
347Remove the inner padding in Chrome and Safari on macOS.
348*/
349
350/**
3511. Correct the inability to style clickable types in iOS and Safari.
3522. Change font properties to 'inherit' in Safari.
353*/
354
355/*
356Interactive
357===========
358*/
359
360/*
361Add the correct display in Chrome and Safari.
362*/
363
364summary {
365  display: list-item;
366}
367
368/**
369 * Manually forked from SUIT CSS Base: https://github.com/suitcss/base
370 * A thin layer on top of normalize.css that provides a starting point more
371 * suitable for web applications.
372 */
373
374/**
375 * Removes the default spacing and border for appropriate elements.
376 */
377
378blockquote,
379dl,
380dd,
381h1,
382h2,
383h3,
384h4,
385h5,
386h6,
387hr,
388figure,
389p,
390pre {
391  margin: 0;
392}
393
394button {
395  background-color: transparent;
396  background-image: none;
397}
398
399fieldset {
400  margin: 0;
401  padding: 0;
402}
403
404ol,
405ul {
406  list-style: none;
407  margin: 0;
408  padding: 0;
409}
410
411/**
412 * Tailwind custom reset styles
413 */
414
415/**
416 * 1. Use the user's configured `sans` font-family (with Tailwind's default
417 *    sans-serif font stack as a fallback) as a sane default.
418 * 2. Use Tailwind's default "normal" line-height so the user isn't forced
419 *    to override it to ensure consistency even when using the default theme.
420 */
421
422html {
423  font-family: "Inter", sans-serif;
424  /* 1 */
425  line-height: 1.5;
426  /* 2 */
427}
428
429/**
430 * Inherit font-family and line-height from `html` so users can set them as
431 * a class directly on the `html` element.
432 */
433
434body {
435  font-family: inherit;
436  line-height: inherit;
437}
438
439/**
440 * 1. Prevent padding and border from affecting element width.
441 *
442 *    We used to set this in the html element and inherit from
443 *    the parent element for everything else. This caused issues
444 *    in shadow-dom-enhanced elements like <details> where the content
445 *    is wrapped by a div with box-sizing set to `content-box`.
446 *
447 *    https://github.com/mozdevs/cssremedy/issues/4
448 *
449 *
450 * 2. Allow adding a border to an element by just adding a border-width.
451 *
452 *    By default, the way the browser specifies that an element should have no
453 *    border is by setting it's border-style to `none` in the user-agent
454 *    stylesheet.
455 *
456 *    In order to easily add borders to elements by just setting the `border-width`
457 *    property, we change the default border-style for all elements to `solid`, and
458 *    use border-width to hide them instead. This way our `border` utilities only
459 *    need to set the `border-width` property instead of the entire `border`
460 *    shorthand, making our border utilities much more straightforward to compose.
461 *
462 *    https://github.com/tailwindcss/tailwindcss/pull/116
463 */
464
465*,
466::before,
467::after {
468  box-sizing: border-box;
469  /* 1 */
470  border-width: 0;
471  /* 2 */
472  border-style: solid;
473  /* 2 */
474  border-color: currentColor;
475  /* 2 */
476}
477
478/*
479 * Ensure horizontal rules are visible by default
480 */
481
482hr {
483  border-top-width: 1px;
484}
485
486/**
487 * Undo the `border-style: none` reset that Normalize applies to images so that
488 * our `border-{width}` utilities have the expected effect.
489 *
490 * The Normalize reset is unnecessary for us since we default the border-width
491 * to 0 on all elements.
492 *
493 * https://github.com/tailwindcss/tailwindcss/issues/362
494 */
495
496img {
497  border-style: solid;
498}
499
500textarea {
501  resize: vertical;
502}
503
504input::-moz-placeholder, textarea::-moz-placeholder {
505  opacity: 1;
506  color: #9ca3af;
507}
508
509input:-ms-input-placeholder, textarea:-ms-input-placeholder {
510  opacity: 1;
511  color: #9ca3af;
512}
513
514input::placeholder,
515textarea::placeholder {
516  opacity: 1;
517  color: #9ca3af;
518}
519
520button {
521  cursor: pointer;
522}
523
524table {
525  border-collapse: collapse;
526}
527
528h1,
529h2,
530h3,
531h4,
532h5,
533h6 {
534  font-size: inherit;
535  font-weight: inherit;
536}
537
538/**
539 * Reset links to optimize for opt-in styling instead of
540 * opt-out.
541 */
542
543a {
544  color: inherit;
545  text-decoration: inherit;
546}
547
548/**
549 * Reset form element properties that are easy to forget to
550 * style explicitly so you don't inadvertently introduce
551 * styles that deviate from your design system. These styles
552 * supplement a partial reset that is already applied by
553 * normalize.css.
554 */
555
556button,
557input,
558optgroup,
559select,
560textarea {
561  padding: 0;
562  line-height: inherit;
563  color: inherit;
564}
565
566/**
567 * Use the configured 'mono' font family for elements that
568 * are expected to be rendered with a monospace font, falling
569 * back to the system monospace stack if there is no configured
570 * 'mono' font family.
571 */
572
573pre,
574code,
575kbd,
576samp {
577  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
578}
579
580/**
581 * 1. Make replaced elements `display: block` by default as that's
582 *    the behavior you want almost all of the time. Inspired by
583 *    CSS Remedy, with `svg` added as well.
584 *
585 *    https://github.com/mozdevs/cssremedy/issues/14
586 * 
587 * 2. Add `vertical-align: middle` to align replaced elements more
588 *    sensibly by default when overriding `display` by adding a
589 *    utility like `inline`.
590 *
591 *    This can trigger a poorly considered linting error in some
592 *    tools but is included by design.
593 * 
594 *    https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210
595 */
596
597img,
598svg,
599video,
600canvas,
601audio,
602iframe,
603embed,
604object {
605  display: block;
606  /* 1 */
607  vertical-align: middle;
608  /* 2 */
609}
610
611/**
612 * Constrain images and videos to the parent width and preserve
613 * their intrinsic aspect ratio.
614 *
615 * https://github.com/mozdevs/cssremedy/issues/14
616 */
617
618img,
619video {
620  max-width: 100%;
621  height: auto;
622}
623
624*, ::before, ::after {
625  --tw-border-opacity: 1;
626  border-color: rgba(229, 231, 235, var(--tw-border-opacity));
627}
628
629[type='text'],[type='url'],[type='number'],[type='time'],textarea,select {
630  -webkit-appearance: none;
631     -moz-appearance: none;
632          appearance: none;
633  background-color: #fff;
634  border-color: #6b7280;
635  border-width: 1px;
636  border-radius: 0px;
637  padding-top: 0.5rem;
638  padding-right: 0.75rem;
639  padding-bottom: 0.5rem;
640  padding-left: 0.75rem;
641  font-size: 1rem;
642  line-height: 1.5rem;
643}
644
645[type='text']:focus, [type='url']:focus, [type='number']:focus, [type='time']:focus, textarea:focus, select:focus {
646  outline: 2px solid transparent;
647  outline-offset: 2px;
648  --tw-ring-inset: var(--tw-empty,/*!*/ /*!*/);
649  --tw-ring-offset-width: 0px;
650  --tw-ring-offset-color: #fff;
651  --tw-ring-color: #2563eb;
652  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
653  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
654  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-sha
654dow, 0 0 #0000);
655  border-color: #2563eb;
656}
657
658input::-moz-placeholder, textarea::-moz-placeholder {
659  color: #6b7280;
660  opacity: 1;
661}
662
663input:-ms-input-placeholder, textarea:-ms-input-placeholder {
664  color: #6b7280;
665  opacity: 1;
666}
667
668input::placeholder,textarea::placeholder {
669  color: #6b7280;
670  opacity: 1;
671}
672
673select {
674  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
675  background-position: right 0.5rem center;
676  background-repeat: no-repeat;
677  background-size: 1.5em 1.5em;
678  padding-right: 2.5rem;
679  -webkit-print-color-adjust: exact;
680          color-adjust: exact;
681}
682
683[type='radio'] {
684  -webkit-appearance: none;
685     -moz-appearance: none;
686          appearance: none;
687  padding: 0;
688  -webkit-print-color-adjust: exact;
689          color-adjust: exact;
690  display: inline-block;
691  vertical-align: middle;
692  background-origin: border-box;
693  -webkit-user-select: none;
694     -moz-user-select: none;
695      -ms-user-select: none;
696          user-select: none;
697  flex-shrink: 0;
698  height: 1rem;
699  width: 1rem;
700  color: #2563eb;
701  background-color: #fff;
702  border-color: #6b7280;
703  border-width: 1px;
704}
705
706[type='radio'] {
707  border-radius: 100%;
708}
709
710[type='radio']:focus {
711  outline: 2px solid transparent;
712  outline-offset: 2px;
713  --tw-ring-inset: var(--tw-empty,/*!*/ /*!*/);
714  --tw-ring-offset-width: 2px;
715  --tw-ring-offset-color: #fff;
716  --tw-ring-color: #2563eb;
717  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
718  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
719  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-sha
719dow, 0 0 #0000);
720}
721
722[type='radio']:checked {
723  border-color: transparent;
724  background-color: currentColor;
725  background-size: 100% 100%;
726  background-position: center;
727  background-repeat: no-repeat;
728}
729
730[type='radio']:checked {
731  background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e");
732}
733
734[type='radio']:checked:hover,[type='radio']:checked:focus {
735  border-color: transparent;
736  background-color: currentColor;
737}
738
739.container {
740  width: 100%;
741}
742
743@media (min-width: 640px) {
744  .container {
745    max-width: 640px;
746  }
747}
748
749@media (min-width: 768px) {
750  .container {
751    max-width: 768px;
752  }
753}
754
755@media (min-width: 1024px) {
756  .container {
757    max-width: 1024px;
758  }
759}
760
761@media (min-width: 1280px) {
762  .container {
763    max-width: 1280px;
764  }
765}
766
767@media (min-width: 1536px) {
768  .container {
769    max-width: 1536px;
770  }
771}
772
773.fixed {
774  position: fixed;
775}
776
777.absolute {
778  position: absolute;
779}
780
781.relative {
782  position: relative;
783}
784
785.z-10 {
786  z-index: 10;
787}
788
789.col-span-3 {
790  grid-column: span 3 / span 3;
791}
792
793.col-span-6 {
794  grid-column: span 6 / span 6;
795}
796
797.mx-auto {
798  margin-left: auto;
799  margin-right: auto;
800}
801
802.my-3 {
803  margin-top: 0.75rem;
804  margin-bottom: 0.75rem;
805}
806
807.mt-1 {
808  margin-top: 0.25rem;
809}
810
811.mt-3 {
812  margin-top: 0.75rem;
813}
814
815.mt-4 {
816  margin-top: 1rem;
817}
818
819.mt-5 {
820  margin-top: 1.25rem;
821}
822
823.mt-7 {
824  margin-top: 1.75rem;
825}
826
827.-mt-10 {
828  margin-top: -2.5rem;
829}
830
831.mr-4 {
832  margin-right: 1rem;
833}
834
835.mr-5 {
836  margin-right: 1.25rem;
837}
838
839.mb-4 {
840  margin-bottom: 1rem;
841}
842
843.ml-1 {
844  margin-left: 0.25rem;
845}
846
847.ml-3 {
848  margin-left: 0.75rem;
849}
850
851.block {
852  display: block;
853}
854
855.inline-block {
856  display: inline-block;
857}
858
859.flex {
860  display: flex;
861}
862
863.inline-flex {
864  display: inline-flex;
865}
866
867.table {
868  display: table;
869}
870
871.grid {
872  display: grid;
873}
874
875.hidden {
876  display: none;
877}
878
879.h-4 {
880  height: 1rem;
881}
882
883.h-full {
884  height: 100%;
885}
886
887.h-screen {
888  height: 100vh;
889}
890
891.min-h-full {
892  min-height: 100%;
893}
894
895.w-4 {
896  width: 1rem;
897}
898
899.w-full {
900  width: 100%;
901}
902
903.max-w-5xl {
904  max-width: 64rem;
905}
906
907.max-w-max {
908  max-width: -webkit-max-content;
909  max-width: -moz-max-content;
910  max-width: max-content;
911}
912
913@-webkit-keyframes spin {
914  to {
915    transform: rotate(360deg);
916  }
917}
918
919@keyframes spin {
920  to {
921    transform: rotate(360deg);
922  }
923}
924
925@-webkit-keyframes ping {
926  75%, 100% {
927    transform: scale(2);
928    opacity: 0;
929  }
930}
931
932@keyframes ping {
933  75%, 100% {
934    transform: scale(2);
935    opacity: 0;
936  }
937}
938
939@-webkit-keyframes pulse {
940  50% {
941    opacity: .5;
942  }
943}
944
945@keyframes pulse {
946  50% {
947    opacity: .5;
948  }
949}
950
951@-webkit-keyframes bounce {
952  0%, 100% {
953    transform: translateY(-25%);
954    -webkit-animation-timing-function: cubic-bezier(0.8,0,1,1);
955            animation-timing-function: cubic-bezier(0.8,0,1,1);
956  }
957
958  50% {
959    transform: none;
960    -webkit-animation-timing-function: cubic-bezier(0,0,0.2,1);
961            animation-timing-function: cubic-bezier(0,0,0.2,1);
962  }
963}
964
965@keyframes bounce {
966  0%, 100% {
967    transform: translateY(-25%);
968    -webkit-animation-timing-function: cubic-bezier(0.8,0,1,1);
969            animation-timing-function: cubic-bezier(0.8,0,1,1);
970  }
971
972  50% {
973    transform: none;
974    -webkit-animation-timing-function: cubic-bezier(0,0,0.2,1);
975            animation-timing-function: cubic-bezier(0,0,0.2,1);
976  }
977}
978
979.cursor-pointer {
980  cursor: pointer;
981}
982
983.resize {
984  resize: both;
985}
986
987.grid-cols-6 {
988  grid-template-columns: repeat(6, minmax(0, 1fr));
989}
990
991.flex-col {
992  flex-direction: column;
993}
994
995.items-center {
996  align-items: center;
997}
998
999.justify-end {
1000  justify-content: flex-end;
1001}
1002
1003.justify-center {
1004  justify-content: center;
1005}
1006
1007.justify-between {
1008  justify-content: space-between;
1009}
1010
1011.gap-3 {
1012  gap: 0.75rem;
1013}
1014
1015.rounded-md {
1016  border-radius: 0.375rem;
1017}
1018
1019.rounded-lg {
1020  border-radius: 0.5rem;
1021}
1022
1023.rounded-t-lg {
1024  border-top-left-radius: 0.5rem;
1025  border-top-right-radius: 0.5rem;
1026}
1027
1028.rounded-r-none {
1029  border-top-right-radius: 0px;
1030  border-bottom-right-radius: 0px;
1031}
1032
1033.rounded-b-lg {
1034  border-bottom-right-radius: 0.5rem;
1035  border-bottom-left-radius: 0.5rem;
1036}
1037
1038.rounded-l-none {
1039  border-top-left-radius: 0px;
1040  border-bottom-left-radius: 0px;
1041}
1042
1043.border {
1044  border-width: 1px;
1045}
1046
1047.border-b {
1048  border-bottom-width: 1px;
1049}
1050
1051.border-transparent {
1052  border-color: transparent;
1053}
1054
1055.border-gray-600 {
1056  --tw-border-opacity: 1;
1057  border-color: rgba(75, 85, 99, var(--tw-border-opacity));
1058}
1059
1060.border-green-300 {
1061  --tw-border-opacity: 1;
1062  border-color: rgba(110, 231, 183, var(--tw-border-opacity));
1063}
1064
1065.focus\:border-green-500:focus {
1066  --tw-border-opacity: 1;
1067  border-color: rgba(16, 185, 129, var(--tw-border-opacity));
1068}
1069
1070.bg-white {
1071  --tw-bg-opacity: 1;
1072  background-color: rgba(255, 255, 255, var(--tw-bg-opacity));
1073}
1074
1075.bg-gray-200 {
1076  --tw-bg-opacity: 1;
1077  background-color: rgba(229, 231, 235, var(--tw-bg-opacity));
1078}
1079
1080.bg-green-100 {
1081  --tw-bg-opacity: 1;
1082  background-color: rgba(209, 250, 229, var(--tw-bg-opacity));
1083}
1084
1085.bg-green-500 {
1086  --tw-bg-opacity: 1;
1087  background-color: rgba(16, 185, 129, var(--tw-bg-opacity));
1088}
1089
1090.hover\:bg-gray-200:hover {
1091  --tw-bg-opacity: 1;
1092  background-color: rgba(229, 231, 235, var(--tw-bg-opacity));
1093}
1094
1095.hover\:bg-green-600:hover {
1096  --tw-bg-opacity: 1;
1097  background-color: rgba(5, 150, 105, var(--tw-bg-opacity));
1098}
1099
1100.dark .dark\:bg-gray-500 {
1101  --tw-bg-opacity: 1;
1102  background-color: rgba(107, 114, 128, var(--tw-bg-opacity));
1103}
1104
1105.dark .dark\:bg-gray-700 {
1106  --tw-bg-opacity: 1;
1107  background-color: rgba(55, 65, 81, var(--tw-bg-opacity));
1108}
1109
1110.dark .dark\:bg-gray-800 {
1111  --tw-bg-opacity: 1;
1112  background-color: rgba(31, 41, 55, var(--tw-bg-opacity));
1113}
1114
1115.fill-current {
1116  fill: currentColor;
1117}
1118
1119.p-4 {
1120  padding: 1rem;
1121}
1122
1123.px-4 {
1124  padding-left: 1rem;
1125  padding-right: 1rem;
1126}
1127
1128.px-5 {
1129  padding-left: 1.25rem;
1130  padding-right: 1.25rem;
1131}
1132
1133.py-2 {
1134  padding-top: 0.5rem;
1135  padding-bottom: 0.5rem;
1136}
1137
1138.py-8 {
1139  padding-top: 2rem;
1140  padding-bottom: 2rem;
1141}
1142
1143.py-10 {
1144  padding-top: 2.5rem;
1145  padding-bottom: 2.5rem;
1146}
1147
1148.pt-5 {
1149  padding-top: 1.25rem;
1150}
1151
1152.pb-1 {
1153  padding-bottom: 0.25rem;
1154}
1155
1156.text-center {
1157  text-align: center;
1158}
1159
1160.font-sans {
1161  font-family: "Inter", sans-serif;
1162}
1163
1164.text-sm {
1165  font-size: 0.875rem;
1166  line-height: 1.25rem;
1167}
1168
1169.text-xl {
1170  font-size: 1.25rem;
1171  line-height: 1.75rem;
1172}
1173
1174.text-3xl {
1175  font-size: 1.875rem;
1176  line-height: 2.25rem;
1177}
1178
1179.text-4xl {
1180  font-size: 2.25rem;
1181  line-height: 2.5rem;
1182}
1183
1184.font-medium {
1185  font-weight: 500;
1186}
1187
1188.font-semibold {
1189  font-weight: 600;
1190}
1191
1192.font-bold {
1193  font-weight: 700;
1194}
1195
1196.uppercase {
1197  text-transform: uppercase;
1198}
1199
1200.text-white {
1201  --tw-text-opacity: 1;
1202  color: rgba(255, 255, 255, var(--tw-text-opacity));
1203}
1204
1205.text-gray-500 {
1206  --tw-text-opacity: 1;
1207  color: rgba(107, 114, 128, var(--tw-text-opacity));
1208}
1209
1210.text-gray-600 {
1211  --tw-text-opacity: 1;
1212  color: rgba(75, 85, 99, var(--tw-text-opacity));
1213}
1214
1215.text-gray-700 {
1216  --tw-text-opacity: 1;
1217  color: rgba(55, 65, 81, var(--tw-text-opacity));
1218}
1219
1220.text-gray-900 {
1221  --tw-text-opacity: 1;
1222  color: rgba(17, 24, 39, var(--tw-text-opacity));
1223}
1224
1225.text-green-500 {
1226  --tw-text-opacity: 1;
1227  color: rgba(16, 185, 129, var(--tw-text-opacity));
1228}
1229
1230.dark .dark\:text-white {
1231  --tw-text-opacity: 1;
1232  color: rgba(255, 255, 255, var(--tw-text-opacity));
1233}
1234
1235.dark .dark\:text-gray-200 {
1236  --tw-text-opacity: 1;
1237  color: rgba(229, 231, 235, var(--tw-text-opacity));
1238}
1239
1240*, ::before, ::after {
1241  --tw-shadow: 0 0 #0000;
1242}
1243
1244.shadow-sm {
1245  --tw-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
1246  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-sha
1246dow);
1247}
1248
1249.shadow {
1250  --tw-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
1251  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
1252}
1253
1254.hover\:shadow-lg:hover {
1255  --tw-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
1256  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
1257}
1258
1259.outline-none {
1260  outline: 2px solid transparent;
1261  outline-offset: 2px;
1262}
1263
1264.focus\:outline-none:focus {
1265  outline: 2px solid transparent;
1266  outline-offset: 2px;
1267}
1268
1269*, ::before, ::after {
1270  --tw-ring-inset: var(--tw-empty,/*!*/ /*!*/);
1271  --tw-ring-offset-width: 0px;
1272  --tw-ring-offset-color: #fff;
1273  --tw-ring-color: rgba(59, 130, 246, 0.5);
1274  --tw-ring-offset-shadow: 0 0 #0000;
1275  --tw-ring-shadow: 0 0 #0000;
1276}
1277
1278.focus\:ring-2:focus {
1279  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
1280  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
1281  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-sha
1281dow, 0 0 #0000);
1282}
1283
1284.focus\:ring-gray-300:focus {
1285  --tw-ring-opacity: 1;
1286  --tw-ring-color: rgba(209, 213, 219, var(--tw-ring-opacity));
1287}
1288
1289.focus\:ring-green-500:focus {
1290  --tw-ring-opacity: 1;
1291  --tw-ring-color: rgba(16, 185, 129, var(--tw-ring-opacity));
1292}
1293
1294.focus\:ring-offset-2:focus {
1295  --tw-ring-offset-width: 2px;
1296}
1297
1298.blur {
1299  --tw-blur: blur(8px);
1300}
1301
1302.duration-300 {
1303  transition-duration: 300ms;
1304}
1305
1306@media (min-width: 640px) {
1307  .sm\:m-0 {
1308    margin: 0px;
1309  }
1310
1311  .sm\:mt-0 {
1312    margin-top: 0px;
1313  }
1314
1315  .sm\:ml-4 {
1316    margin-left: 1rem;
1317  }
1318
1319  .sm\:ml-auto {
1320    margin-left: auto;
1321  }
1322
1323  .sm\:flex-row {
1324    flex-direction: row;
1325  }
1326
1327  .sm\:justify-start {
1328    justify-content: flex-start;
1329  }
1330
1331  .sm\:border-l-2 {
1332    border-left-width: 2px;
1333  }
1334
1335  .sm\:border-gray-200 {
1336    --tw-border-opacity: 1;
1337    border-color: rgba(229, 231, 235, var(--tw-border-opacity));
1338  }
1339
1340  .sm\:py-2 {
1341    padding-top: 0.5rem;
1342    padding-bottom: 0.5rem;
1343  }
1344
1345  .sm\:pl-4 {
1346    padding-left: 1rem;
1347  }
1348
1349  .sm\:text-sm {
1350    font-size: 0.875rem;
1351    line-height: 1.25rem;
1352  }
1353}
1354
1355@media (min-width: 768px) {
1356  .md\:grid {
1357    display: grid;
1358  }
1359
1360  .md\:grid-cols-6 {
1361    grid-template-columns: repeat(6, minmax(0, 1fr));
1362  }
1363
1364  .md\:justify-start {
1365    justify-content: flex-start;
1366  }
1367
1368  .md\:gap-4 {
1369    gap: 1rem;
1370  }
1371}
1372
1373@media (min-width: 1024px) {
1374  .lg\:rounded-2xl {
1375    border-radius: 1rem;
1376  }
1377
1378  .lg\:rounded-t-2xl {
1379    border-top-left-radius: 1rem;
1380    border-top-right-radius: 1rem;
1381  }
1382
1383  .lg\:rounded-b-2xl {
1384    border-bottom-right-radius: 1rem;
1385    border-bottom-left-radius: 1rem;
1386  }
1387}
1388
1389@media (min-width: 1280px) {
1390}
1391
1392@media (min-width: 1536px) {
1393}
1394</style>
1395    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/highlightjs/[email protected]/build/styles/atom-one-light.min.css" integrity="sha256-WT7iR11CrJrnAaF3o1OCW9ZhtiSfoa1LrSMlQIJenoM=" crossorigin="anonymous" />
1396    
1396<script src="https://cdn.jsdelivr.net/gh/highlightjs/[email protected]/build/highlight.min.js" integrity="sha256-mfS2sXKEV8eehy39UH7+7BwaoUaIe2TuLO2DXS+c2mI=" crossorigin="anonymous"></script>
1396
1397    
1397<script>
1398      hljs.highlightAll()
1399    </script>
1399
1400
1401    <title>Visitor Badge - Generator, Maker, Badge</title>
1402
1403    <style>
1404      * {
1405        transition-duration: 0.3s;
1406        scroll-behavior: smooth;
1407      }
1408      .jscolor-picker-shadow {
1409        --tw-shadow: 0 1px 1rem 0 rgba(0, 0, 0, 0.104);
1410        box-shadow: var(--tw-shadow) !important;
1411      }
1412      .jscolor-picker-border,
1413      .jscolor-picker-border > .jscolor-picker > div {
1414        border: none !important;
1415      }
1416      .dark .jscolor-picker-border {
1417        --tw-bg-opacity: 1;
1418        background-color: rgba(107, 114, 128, var(--tw-bg-opacity)) !important;
1419      }
1420
1421      ::-webkit-scrollbar {
1422        display: none;
1423      }
1424      .particles-js-canvas-el {
1425        position: absolute;
1426        top: 0;
1427        bottom: 0;
1428        left: 0;
1429        right: 0;
1430        z-index: 0;
1431      }
1432    </style>
1433  </head>
1434  <body class="font-sans dark:bg-gray-700">
1435    <section id="bg-particles" class="relative bg-white rounded-b-lg lg:rounded-b-2xl container max-w-5xl mx-auto p-4 h-screen min-h-full dark:bg-gray-800">
1436      <div class="relative z-10 h-full">
1437        <div class="flex justify-between px-5 pt-5">
1438          <a class="toggle-dark mr-5" href="#" onclick="darkMode()">
1439            <svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" fill="currentColor" class="bi bi-moon-fill" viewBox="0 0 16 16">
1440              <path
1441                d="M6 .278a.768.768 0 0 1 .08.858 7.208 7.208 0 0 0-.878 3.46c0 4.021 3.278 7.277 7.318 7.277.527 0 1.04-.055 1.533-.16a.787.787 0 0 1 .81.316.733.733 0 0 1-.031.893A8.349 8.349 0 0 1 8.344 16C3.734 16 0 12.286 0 7.71 0 4.266 2.114 1.312 5.124.06A.752.752 0 0 1 6 .278z"
1442              />
1443            </svg>
1444          </a>
1445          <a class="dark:text-white" href="https://wahyu9kdl.github.io/DASHBOARD/TOOLS/Notepad.html" target="_blank">
1446            <svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" fill="currentColor" class="bi bi-github fill-current" viewBox="0 0 16 16">
1447              <path
1448                d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z"
1449              />
1450            </svg>
1451          </a>
1452        </div>
1453        <div class="flex justify-center items-center h-full -mt-10">
1454          <div class="text-center dark:text-white">
1455            <h1 class="text-4xl font-bold mb-4">Visitor Badge</h1>
1456            <p>Hitung Pengunjung Web atau Repository Github dengan mudah</p>
1457            <div class="flex justify-center mt-4">
1458            
1459<img alt="Visitor Badge" src="https://visitor-badges.glitch.me?username=wahyu9kdl&repo=https://wahyu9kdl.github.io/HTML/TOOLS/visitor-badge.html&label=VISITOR&style=flat&color=%23457BFF&contentType=svg"/> </div>
1460            <div class="flex justify-center mt-4">
1461              <a
1462                class="
1463                  inline-flex
1464                  outline-none
1465                  justify-center
1466                  py-2
1467                  px-4
1468                  mr-4
1469                  border border-transparent
1470                  shadow-sm
1471                  text-sm
1472                  font-medium
1473                  rounded-md
1474                  text-white
1475                  bg-green-500
1476                  hover:bg-green-600
1477                  focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500
1478                "
1479                href="https://saweria.co/AwGroupChannel"
1480                target="_blank"
1481                >Donasi</a
1482              >
1483              <a
1484                class="
1485                  inline-flex
1486                  outline-none
1487                  justify-center
1488                  py-2
1489                  px-4
1490                  border border-transparent
1491                  shadow-sm
1492                  text-sm
1493                  font-medium
1494                  rounded-md
1495                  text-white
1496                  bg-green-500
1497                  hover:bg-green-600
1498                  focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500
1499                "
1500                href="#get-started"
1501                >Memulai</a
1502              >
1503            </div>
1504          </div>
1505        </div>
1506      </div>
1507    </section>
1508
1509    <section id="get-started" class="container max-w-5xl bg-green-100 dark:bg-gray-700 mx-auto py-10 px-4 min-h-full">
1510      <div class="max-w-max mx-auto dark:text-white">
1511        <h2 class="text-3xl mb-4 font-bold text-center">Memulai</h2>
1512        Buat badgemu sendiri dengan mudah dan cepat menggunakan pembuat berikut.
1513      </div>
1514
1515      <div class="mt-7 md:grid md:grid-cols-6 md:gap-4">
1516        <form id="badge-generator" class="col-span-3 p-4 bg-white dark:bg-gray-800 dark:text-white rounded-lg lg:rou
1516nded-2xl">
1517          <h2 class="font-semibold text-xl text-center mb-4">Pembuat</h2>
1518          <div class="grid grid-cols-6 gap-3">
1519            <div class="col-span-3">
1520              <label for="username" class="block text-sm font-medium text-gray-700 dark:text-gray-200">Nama Pengguna</label>
1521              <input
1522                type="text"
1523                name="username"
1524                id="username"
1525                autocomplete="off"
1526                class="mt-1 focus:ring-green-500 focus:border-green-500 dark:bg-gray-700 block w-full shadow-sm sm:text-sm border-green-300 hover:shadow-lg duration-300 outline-none rounded-md"
1527              />
1528            </div>
1529            <div class="col-span-3">
1530              <label for="repository" class="block text-sm font-medium text-gray-700 dark:text-gray-200">Repositori</label>
1531              <input
1532                type="text"
1533                name="repository"
1534                id="repository"
1535                autocomplete="off"
1536                class="mt-1 focus:ring-green-500 focus:border-green-500 dark:bg-gray-700 block w-full shadow-sm sm:text-sm border-green-300 hover:shadow-lg duration-300 outline-none rounded-md"
1537              />
1538            </div>
1539            <div class="col-span-6 mt-5 text-gray-700 dark:text-gray-200 text-center border-b pb-1 border-gray-600">Input Opsional</div>
1540            <div class="col-span-3">
1541              <label for="label" class="block text-sm font-medium text-gray-700 dark:text-gray-200">Label</label>
1542              <input
1543                type="text"
1544                name="label"
1545                id="label"
1546                autocomplete="off"
1547                value="VISITOR"
1548                class="mt-1 focus:ring-green-500 focus:border-green-500 dark:bg-gray-700 block w-full shadow-sm sm:text-sm border-green-300 hover:shadow-lg duration-300 outline-none rounded-md"
1549              />
1550            </div>
1551            <div class="col-span-3">
1552              <label for="label" class="block text-sm font-medium text-gray-700 dark:text-gray-200">Warna</label>
1553              <input
1554                type="text"
1555                value="#457BFF"
1556                data-jscolor="{}"
1557                name="color"
1558                id="color"
1559                autocomplete="off"
1560                class="mt-1 focus:ring-green-500 focus:border-green-500 dark:bg-gray-700 block w-full shadow-sm sm:text-sm border-green-300 hover:shadow-lg duration-300 outline-none rounded-md"
1561              />
1562            </div>
1563          </div>
1564
1565          <div class="my-3 text-sm text-gray-700 dark:text-gray-200 font-medium">Tema</div>
1566          <div class="grid grid-cols-6 gap-3">
1567            <div class="col-span-3 flex items-center">
1568              <input id="for-the-badge-badge" value="for-the-badge" name="style" type="radio" class="focus:ring-green-500 h-4 w-4 cursor-pointer text-green-500 border-green-300 outline-none duration-300" />
1569              <label for="for-the-badge-badge" class="ml-3 block text-sm font-medium text-gray-700 dark:text-gray-200"
1570                ><img src="https://img.shields.io/static/v1?label=VISITOR&message=0&color=blue&style=for-the-badge" alt="For The Badge Style"
1571              /></label>
1572            </div>
1573            <div class="col-span-3 flex items-center">
1574              <input id="plastic-badge" value="plastic" name="style" type="radio" class="focus:ring-green-500 h-4 w-4 cursor-pointer text-green-500 border-green-300 outline-none duration-300" />
1575              <label for="plastic-badge" class="ml-3 block text-sm font-medium text-gray-700 dark:text-gray-200"><img src="https://img.shields.io/static/v1?label=VISITOR&message=0&color=blue&style=plastic" alt="Plastic Style" /></label>
1576            </div>
1577            <div class="col-span-3 flex items-center">
1578              <input id="flat-square-badge" value="flat-square" name="style" type="radio" class="focus:ring-green-500 h-4 w-4 cursor-pointer text-green-500 border-green-300 outline-none duration-300" />
1579              <label for="flat-square-badge" class="ml-3 block text-sm font-medium text-gray-700 dark:text-gray-200"><img src="https://img.shields.io/static/v1?label=VISITOR&message=0&color=blue&style=flat-square" alt="Flat Square Style" /></label>
1580            </div>
1581            <div class="col-span-3 flex items-center">
1582              <input id="social-badge" value="social" name="style" type="radio" class="focus:ring-green-500 h-4 w-4 cursor-pointer text-green-500 border-green-300 outline-none duration-300" />
1583              <label for="social-badge" class="ml-3 block text-sm font-medium text-gray-700 dark:text-gray-200"><img src="https://img.shields.io/static/v1?label=VISITOR&message=0&color=blue&style=social" alt="Social Style" /></label>
1584            </div>
1585            <div class="col-span-3 flex items-center">
1586              <input id="flat-badge" value="flat" name="style" type="radio" class="focus:ring-green-500 h-4 w-4 cursor-pointer text-green-500 border-green-300 outline-none duration-300" />
1587              <label for="flat-badge" class="ml-3 block text-sm font-medium text-gray-700 dark:text-gray-200"><img src="https://img.shields.io/static/v1?label=VISITOR&message=0&color=blue&style=flat" alt="Flat Style" /></label>
1588            </div>
1589
1590            <div class="col-span-6">
1591              <label for="token" class="block font-medium text-gray-700 dark:text-gray-200">Token Akses Pribadi</label>
1592              <p class="text-sm text-gray-700 dark:text-gray-200 mb-4">
1593                Jika Anda ingin angka badge dimulai dengan angka yang sama yang ada di Views repository, silahkan tempelkan akses token pribadi Anda yang telah dibuat di Github. Lihat caranya
1594                <a class="text-green-500" target="_blank" href="https://github.com/wahyu9kdl/visitor-badge#menyamakan-angka-visitor-sesuai-dengan-views-repository">disini</a>
1595              </p>
1596              <input
1597                type="text"
1598                name="token"
1599                id="token"
1600                autocomplete="off"
1601                class="mt-1 focus:ring-green-500 focus:border-green-500 dark:bg-gray-700 block w-full shadow-sm sm:text-sm border-green-300 hover:shadow-lg duration-300 outline-none rounded-md"
1602              />
1603              <p class="text-sm mt-4">
1604                <i>Jika token yang Anda masukan tidak valid, maka angka badge akan di mulai dari nol</i>. Tapi jangan khawatir, jika angka badge Anda sebelumnya sudah banyak maka angkanya akan tetap seperti sebelumnya dan tetap bertambah
1605              </p>
1606            </div>
1607          </div>
1608
1609          <div class="flex justify-end mt-4">
1610            <button
1611              type="reset"
1612              class="
1613                inline-flex
1614                justify-center
1615                py-2
1616                px-4
1617                mr-4
1618                border border-transparent
1619                shadow-sm
1620                text-sm
1621                font-medium
1622                rounded-md
1623                text-gray-700
1624                bg-gray-200
1625                dark:bg-gray-500 dark:text-white
1626                hover:bg-gray-200
1627                focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-300
1628              "
1629            >
1630              Reset
1631            </button>
1632            <button
1633              type="submit"
1634              class="inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-green-500 hover:bg-green-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500"
1635            >
1636              Buat
1637            </button>
1638          </div>
1639        </form>
1640
1641        <div class="col-span-3 bg-white dark:bg-gray-800 dark:text-gray-200 p-4 mt-4 sm:m-0 rounded-lg lg:rou
1641nded-2xl">
1642          <h2 class="font-semibold text-xl text-center mb-4">Hasil</h2>
1643          <div id="badge-result">
1644            <img id="badge" class="mx-auto" src="https://img.shields.io/static/v1?label=VISITOR&message=0&color=blue&style=for-the-badge" alt="Visitor Badge" />
1645
1646            <div class="mx-auto mt-4">
1647              <label for="url-badge" class="text-sm text-gray-700 dark:text-gray-200">URL badge anda</label>
1648
1649              <div class="flex">
1650                <input
1651                  type="text"
1652                  name="url-badge"
1653                  id="url-badge"
1654                  autocomplete="off"
1655                  class="focus:ring-green-500 dark:bg-gray-700 rounded-r-none focus:border-green-500 block w-full shadow-sm sm:text-sm border-green-300 hover:shadow-lg duration-300 outline-none rounded-md"
1656                />
1657
1658                <button
1659                  type="button"
1660                  data-clipboard-target="#url-badge"
1661                  class="
1662                    btn-copy
1663                    inline-flex
1664                    justify-center
1665                    rounded-l-none
1666                    py-2
1667                    px-4
1668                    border border-transparent
1669                    shadow-sm
1670                    text-sm
1671                    font-medium
1672                    rounded-md
1673                    text-white
1674                    bg-green-500
1675                    hover:bg-green-600
1676                    focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500
1677                  "
1678                >
1679                  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-clipboard" viewBox="0 0 16 16">
1680                    <path d="M4 1.5H3a2 2 0 0 0-2 2V14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V3.5a2 2 0 0 0-2-2h-1v1h1a1 1 0 0 1 1 1V14a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V3.5a1 1 0 0 1 1-1h1v-1z" />
1681                    <path d="M9.5 1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5h3zm-3-1A1.5 1.5 0 0 0 5 1.5v1A1.5 1.5 0 0 0 6.5 4h3A1.5 1.5 0 0 0 11 2.5v-1A1.5 1.5 0 0 0 9.5 0h-3z" />
1682                  </svg>
1683                </button>
1684              </div>
1685
1686              <div class="text-sm mt-3">HTML</div>
1687              <pre><code id="html-code" class="language-html dark:bg-gray-700 dark:text-gray-200 rounded-md">&lt;img alt=&quot;Visitor Badge&quot; src=&quot;https://visitor-badges.glitch.me&quot; &gt;</code></pre>
1688
1689              <div class="text-sm mt-3">Markdown</div>
1690              <pre><code id="md-code" class="language-md dark:bg-gray-700 dark:text-gray-200 rounded-md">![Visitor Badge](https://visitor-badges.glitch.me)</code></pre>
1691            </div>
1692          </div>
1693        </div>
1694      </div>
1695    </section>
1696<!-- Sponsored -->
1697  <center>
1698  
1699  <div overflow=""></div>
1700  </amp-ad>
1701  </center>
1702  <!--And Sponsored -->
1703    <footer id="footer-particles" class="relative rounded-t-lg lg:rounded-t-2xl container max-w-5xl mx-auto text-gray-600 dark:bg-gray-800 dark:text-white body-font">
1704      <div class="z-10 relative container max-w-5xl px-5 py-8 flex items-center sm:flex-row flex-col">
1705        <a class="flex title-font font-medium items-center md:justify-start justify-center text-gray-900 dark:text-gray-200">
1706          <span class="ml-3 text-xl">Visitor Badge</span>
1707        </a>
1708        <p class="text-sm text-gray-500 dark:text-white sm:ml-4 sm:pl-4 sm:border-l-2 sm:border-gray-200 sm:py-2 sm:mt-0 mt-4">
1709          © 2022 Dibuat dengan
1710          <svg class="inline-block" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="rgb(255, 0, 89)" viewBox="0 0 16 16">
1711            <path fill-rule="evenodd" d="M8 1.314C12.438-3.248 23.534 4.735 8 15-7.534 4.736 3.562-3.248 8 1.314z" />
1712          </svg>
1713          <a href="https://wahyu9kdl.github.io" class="text-gray-600 dark:text-white ml-1" rel="noopener noreferrer" target="_blank">wahyu9kdl</a>
1714        </p>
1715        <span class="inline-flex sm:ml-auto sm:mt-0 mt-4 justify-center sm:justify-start">
1716          <a class="text-gray-500 dark:text-white" href="wahyu9kdl.github.io/HTML/TOOLS/visitor-badge.html" target="_blank">
1717            <svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" fill="currentColor" class="bi bi-github" viewBox="0 0 16 16">
1718              <path
1719                d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z"
1720              />
1721            </svg>
1722          </a>
1723        </span>
1724      </div>
1725    </footer>
1726
1727    
1727<script
1728      src="https://cdnjs.cloudflare.com/ajax/libs/jscolor/2.4.6/jscolor.min.js"
1729      integrity="sha512-+MYpQFxmnAHvrA8opNlNDNwC8qPiZu9i3Lb86n/H9EYugz2FB6MBRQrKpBrkyL/qQgBjWN2ctQbD9XoaVh+TUg=="
1730      crossorigin="anonymous"
1731      referrerpolicy="no-referrer"
1732    ></script>
1732
1733    
1733<script src="https://cdn.jsdelivr.net/npm/[email protected]/particles.min.js"></script>
1733
1734    
1734<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/clipboard.min.js"></script>
1734
1735    
1735<script src="/src/js/main.js"></script>
1735
1736    
1736<script type="text/javascript">
1737    // Background Particles
1738    particlesJS.load('bg-particles', '/src/js/particles.json')
1739    particlesJS.load('footer-particles', '/src/js/particles.json')
1740    
1741    //  Dark Mode
1742    if (localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
1743    darkMode()
1744    }
1745    
1746    function darkMode() {
1747    let icon = ''
1748    let toggles = document.querySelectorAll('.toggle-dark')
1749    let isDark = document.querySelector('html').classList.toggle('dark')
1750    
1751    if (isDark) {
1752    icon = `
1753    <svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" fill="currentColor" class="bi bi-sun text-white" viewBox="0 0 16 16">
1754    <path d="M8 11a3 3 0 1 1 0-6 3 3 0 0 1 0 6zm0 1a4 4 0 1 0 0-8 4 4 0 0 0 0 8zM8 0a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 0zm0 13a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 13zm8-5a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2a.5.5 0 0 1 .5.5zM3 8a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2A.5.5 0 0 1 3 8zm10.657-5.657a.5.5 0 0 1 0 .707l-1.414 1.415a.5.5 0 1 1-.707-.708l1.414-1.414a.5.5 0 0 1 .707 0zm-9.193 9.193a.5.5 0 0 1 0 .707L3.05 13.657a.5.5 0 0 1-.707-.707l1.414-1.414a.5.5 0 0 1 .707 0zm9.193 2.121a.5.5 0 0 1-.707 0l-1.414-1.414a.5.5 0 0 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .707zM4.464 4.465a.5.5 0 0 1-.707 0L2.343 3.05a.5.5 0 1 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .708z"/>
1755    </svg>`
1756    
1757    localStorage.setItem('theme', 'dark')
1758    } else {
1759    icon = `
1760    <svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" fill="currentColor" class="bi bi-moon-fill" viewBox="0 0 16 16">
1761    <path
1762    d="M6 .278a.768.768 0 0 1 .08.858 7.208 7.208 0 0 0-.878 3.46c0 4.021 3.278 7.277 7.318 7.277.527 0 1.04-.055 1.533-.16a.787.787 0 0 1 .81.316.733.733 0 0 1-.031.893A8.349 8.349 0 0 1 8.344 16C3.734 16 0 12.286 0 7.71 0 4.266 2.114 1.312 5.124.06A.752.752 0 0 1 6 .278z"
1763    />
1764    </svg>`
1765    
1766    localStorage.removeItem('theme')
1767    }
1768    
1769    toggles.forEach((toggle) => {
1770    toggle.innerHTML = icon
1771    })
1772    }
1773    
1774    // Membuat Badge
1775    const form = document.querySelector('#badge-generator')
1776    form.onsubmit = (e) => {
1777    e.preventDefault()
1778    const input = e.target.elements
1779    const username = encodeURI(input.username.value)
1780    const repository = encodeURI(input.repository.value)
1781    const label = encodeURI(input.label.value || 'VISITOR')
1782    const style = encodeURI(input.style.value || 'flat-square')
1783    const color = input.color.value.replace('#', '%23')
1784    const token = encodeURI(input.token.value || '')
1785    
1786    let endpoint = `https://visitor-badges.glitch.me?username=${username}&repo=${repository}&label=${label}&style=${style}&color=${color}`
1787    if (token !== '') {
1788    endpoint += `&token=${token}`
1789    }
1790    
1791    const urlBadge = document.querySelector('#url-badge')
1792    const badgeContainer = document.querySelector('#badge')
1793    const htmlCode = document.querySelector('#html-code')
1794    const mdCode = document.querySelector('#md-code')
1795    
1796    badgeContainer.src = endpoint + '&contentType=svg'
1797    urlBadge.value = endpoint
1798    
1799    htmlCode.innerHTML = `&lt;img alt=&quot;Visitor Badge&quot; src=&quot;${endpoint}&contentType=svg&quot;&gt;`
1800    mdCode.innerHTML = `![Visitor Badge](${endpoint}&contentType=svg)`
1801    hljs.highlightAll()
1802    }
1803    
1804    // Clipboard
1805    copy('.btn-copy')
1806    function copy(selector) {
1807    const clipboard = new ClipboardJS(selector)
1808    clipboard.on('success', function (e) {
1809    e.trigger.innerHTML = `
1810    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
1811    <path fill-rule="evenodd" d="M10.854 7.146a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708 0l-1.5-1.5a.5.5 0 1 1 .708-.708L7.5 9.793l2.646-2.647a.5.5 0 0 1 .708 0z"/>
1812    <path d="M4 1.5H3a2 2 0 0 0-2 2V14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V3.5a2 2 0 0 0-2-2h-1v1h1a1 1 0 0 1 1 1V14a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V3.5a1 1 0 0 1 1-1h1v-1z"/>
1813    <path d="M9.5 1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5h3zm-3-1A1.5 1.5 0 0 0 5 1.5v1A1.5 1.5 0 0 0 6.5 4h3A1.5 1.5 0 0 0 11 2.5v-1A1.5 1.5 0 0 0 9.5 0h-3z"/>
1814    </svg>`
1815    
1816    e.clearSelection()
1817    })
1818    
1819    clipboard.on('error', function (e) {
1820    e.trigger.innerHTML = `
1821    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="text-danger" viewBox="0 0 16 16">
1822    <path fill-rule="evenodd" d="M6.146 7.146a.5.5 0 0 1 .708 0L8 8.293l1.146-1.147a.5.5 0 1 1 .708.708
1822L8.707 9l1.147 1.146a.5.5 0 0 1-.708.708L8 9.707l-1.146 1.147a.5.5 0 0 1-.708-.708L7.293 9 6.146 7.854a.5.5 0 0 1 0-.708z"/>
1823    <path d="M4 1.5H3a2 2 0 0 0-2 2V14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V3.5a2 2 0 0 0-2-2h-1v1h1a1 1 0 0 1 1 1V14a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V3.5a1 1 0 0 1 1-1h1v-1z"/>
1824    <path d="M9.5 1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5h3zm-3-1A1.5 1.5 0 0 0 5 1.5v1A1.5 1.5 0 0 0 6.5 4h3A1.5 1.5 0 0 0 11 2.5v-1A1.5 1.5 0 0 0 9.5 0h-3z"/>
1825    </svg>`
1826    })
1827    }
1828    </script>
1828
1829  </body>
1830</html>

Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.