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"><img alt="Visitor Badge" src="https://visitor-badges.glitch.me" ></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"></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 = `<img alt="Visitor Badge" src="${endpoint}&contentType=svg">` 1800 mdCode.innerHTML = `` 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.