<!DOCTYPE html>
<html lang="id">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Felixx Project</title>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" rel="stylesheet">
    <style>
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            margin: 0;
            padding: 0;
            background-color: #121212;
            color: #FFFFFF;
            transition: background-color 0.5s, color 0.5s;
            -webkit-user-select: none;
            -ms-user-select: none;
            user-select: none;
        }

        ::-webkit-scrollbar {
            position: absolute;
            width: 10px;
        }

        ::-webkit-scrollbar-track {
            background: transparent;
        }

        ::-webkit-scrollbar-thumb {
            background: #888;
            border-radius: 20px;
            ;
        }

        ::-webkit-scrollbar-thumb:hover {
            background: #555;
        }

        ::-moz-selection {
            color: white;
            background: #333;
        }

        ::selection {
            color: white;
            background: #333;
        }

        .container {
            max-width: 800px;
            margin: 40px auto;
            padding: 20px;
            background-color: rgb(30 30 30, 0.1);
            box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
            transition: all ease-in-out 0.5s;
            border-radius: 12px;
            backdrop-filter: blur(10px);
        }

        h2 {
            text-align: center;
            margin-bottom: 20px;
        }

        ul {
            list-style: none;
            padding: 0;
            margin: 0;
        }

        li {
            display: block;
            padding: 10px 15px;
            border-radius: 8px;
            margin-bottom: 10px;
            transition: background-color 0.3s, transform 0.3s;
            cursor: pointer;
            position: relative;
        }

        li:hover {
            transform: scale(1.01);
        }

        .icon {
            margin-right: 10px;
        }

        body.light-mode .file-content {
            background-color: rgb(0, 0, 0, 0.1);
            color: black;
        }

        .file-content {
            display: none;
            backdrop-filter: blur(50px);
            background-color: rgb(255, 255, 255, 0.1);
            color: #FFF;
            padding: 15px;
            border-radius: 6px;
            margin-top: 10px;
            font-family: 'Courier New', Courier, monospace;
            position: relative;
            overflow-x: auto;
            white-space: pre;
            flex-direction: column;
        }

        .file-content pre {
            white-space: pre-wrap;
            word-wrap: break-word;
            overflow-x: auto;
        }

        .file-content.show {
            display: block;
            animation: fadeIn 0.5s ease-in-out;
        }

        .file-content.typing {
            white-space: pre-wrap;
            overflow: hidden;
        }

        .file-content .buttons {
            display: flex;
            justify-content: flex-start;
            gap: 10px;
            margin-top: 10px;
        }

        .file-content.typing::after {
            content: '';
            animation: typing 1s steps(10) infinite;
        }

        .file-content .copy-btn,
        .file-content .view-raw-btn,
        .file-content .preview-btn,
        .file-content .download-btn,
        .back-btn,
        .file-content .view-video-btn {
            padding: 5px 15px;
            background: #007AFF;
            color: #FFF;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            transition: background-color 0.3s;
            margin: 5px;
        }

        .file-content .copy-btn:hover,
        .file-content .view-raw-btn:hover,
        .file-content .preview-btn:hover,
        .download-btn:hover,
        .back-btn:hover,
        .view-video-btn:hover {
            background-color: #005BBB;
        }

        .folder-container {
            margin-left: 20px;
            padding-left: 10px;
            border-left: 2px solid rgba(255, 255, 255, 0.2);
            margin-bottom: 20px;
        }

        .folder>ul {
            margin-top: 10px;
        }

        .folder>.icon {
            transition: transform 0.3s;
        }

        .folder.open>.icon {
            transform: rotate(90deg);
        }

        .highlight {
            background: #282C34;
            color: #61AFEF;
        }

        body.dark-mode {
            background-color: #121212;
            color: #FFFFFF;
        }

        body.dark-mode .container {
            background-color: rgb(30 30 30, 0.1);
        }

        body.light-mode {
            background-color: #F5F5F5;
            color: #000000;
        }

        body.light-mode .container {
            background-color: rgb(255 255 255, 0.1);
            color: black;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        }

        body.light-mode .nav button {
            color: black;
            border: black 1px solid;
        }

        body.dark-mode .nav button {
            color: white
        }

        .loading-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.6);
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 9999;
            visibility: hidden;
            opacity: 0;
            transition: visibility 0s, opacity 0.3s ease-in-out;
            backdrop-filter: blur(5px)
        }

        .loading-overlay.show {
            visibility: visible;
            animation: fadeI 1s forwards;
        }

        .loading-overlay.hide {
            animation: fadeO 1s forwards;
        }

        @keyframes fadeI {
            to {
                opacity: 1;
                visibility: visible;
            }
        }

        @keyframes fadeO {
            to {
                opacity: 0;
                visibility: hidden;
            }
        }

        .spinner {
            border: 4px solid rgba(255, 255, 255, 0.2);
            border-top: 4px solid #fff;
            border-radius: 50%;
            width: 40px;
            height: 40px;
            animation: spin 1s linear infinite;
        }

        body.light-mode .circles li {
            background: rgb(0, 0, 0, 0.5);
        }

        body.dark-mode .circles li {
            background: rgb(255, 255, 255, 0.5);
        }

        .circles {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            overflow: hidden;
            z-index: -1;
        }

        .circles li {
            position: absolute;
            display: block;
            list-style: none;
            width: 20px;
            height: 20px;
            background: rgb(255, 255, 255, 0.5);
            animation: animate 25s linear infinite;
            bottom: -200px;
            border-radius: 100px;
        }

        .circles li:nth-child(1) {
            left: 25%;
            width: 80px;
            height: 80px;
            animation-delay: 0s;
        }


        .circles li:nth-child(2) {
            left: 10%;
            width: 20px;
            height: 20px;
            animation-delay: 2s;
            animation-duration: 12s;
        }

        .circles li:nth-child(3) {
            left: 70%;
            width: 20px;
            height: 20px;
            animation-delay: 4s;
        }

        .circles li:nth-child(4) {
            left: 40%;
            width: 60px;
            height: 60px;
            animation-delay: 0s;
            animation-duration: 18s;
        }

        .circles li:nth-child(5) {
            left: 65%;
            width: 20px;
            height: 20px;
            animation-delay: 0s;
        }

        .circles li:nth-child(6) {
            left: 75%;
            width: 110px;
            height: 110px;
            animation-delay: 3s;
        }

        .circles li:nth-child(7) {
            left: 35%;
            width: 150px;
            height: 150px;
            animation-delay: 7s;
        }

        .circles li:nth-child(8) {
            left: 50%;
            width: 25px;
            height: 25px;
            animation-delay: 15s;
            animation-duration: 35s;
        }

        .circles li:nth-child(9) {
            left: 20%;
            width: 15px;
            height: 15px;
            animation-delay: 2s;
            animation-duration: 25s;
        }

        .circles li:nth-child(10) {
            left: 85%;
            width: 150px;
            height: 150px;
            animation-delay: 0s;
            animation-duration: 5ss;
        }

        .circles li:nth-child(11) {
            left: 50%;
            width: 25px;
            height: 25px;
            animation-delay: 15s;
            animation-duration: 30s
        }

        .circles li:nth-child(12) {
            left: 1%;
            width: 25px;
            height: 25px;
            animation-delay: 15s;
            animation-duration: 30s
        }

        @keyframes spin {
            0% {
                transform: rotate(0deg);
            }

            100% {
                transform: rotate(360deg);
            }
        }

        @keyframes fadeIn {
            from {
                opacity: 0;
                transform: scaleY(0.9);
            }

            to {
                opacity: 1;
                transform: scaleY(1);
            }
        }

        @keyframes typing {
            0% {
                border-right: 2px solid transparent;
            }

            50% {
                border-right: 2px solid white;
            }

            100% {
                border-right: 2px solid transparent;
            }
        }

        @keyframes rotateBorder {
            0% {
                border-image: linear-gradient(0deg, black, white) 1;
            }

            50% {
                border-image: linear-gradient(180deg, black, white) 1;
            }

            100% {
                border-image: linear-gradient(360deg, black, white) 1;
            }
        }

        hr {
            animation: width 1s forwards;
        }

        @keyframes width {
            to {
                width: 100%;
            }
        }

        .dark-mode-toggle {
            position: absolute;
            top: 20px;
            right: 20px;
            background: none;
            border: none;
            font-size: 24px;
            cursor: pointer;
            transition: transform 0.3s;
        }

        .logo {
            position: relative;
            left: 50%;
            transform: translate(-50%, 0);
        }

        .area {
            width: 100%;
            height: 100%;
        }

        .file-info {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .date {
            color: gray;
            margin-left: auto;
        }

        @keyframes animate {

            0% {
                transform: translateY(0) rotate(0deg);
                opacity: 1;
                border-radius: 0;
            }

            100% {
                transform: translateY(-1000px) rotate(720deg) scale(0.1);
                opacity: 0;
            }

        }

        .error {
            background-color: rgb(0, 0, 0, 0.3);
            backdrop-filter: blur(5px);
            width: 100%;
            height: 100%;
            z-index: 1000;
            position: fixed;
            display: flex;
            flex-wrap: wrap;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            text-align: center;
        }

        .ErrLogo {
            object-fit: fill;
            width: 300px;
        }

        .errorText {
            font-size: 50px;
            text-shadow: 0 0 20px #fff, 0 0 30px;
            transition: all ease-in-out 0.2s;
            margin: 0;
        }

        .errorDesc {
            margin: 5px;
            font-size: 30px;
            text-shadow: 0 0 20px #fff, 0 0 30px;
            filter: blur(5px);
            transition: all ease-in-out 0.2s;
        }

        .errorDesc:hover {
            filter: blur(0px);
        }

        #desc {
            font-size: 14px;
            margin-left: 10px;
            flex: 1 1 auto;
            line-height: 1.4;
        }

        @keyframes slideIn {
            from {
                transform: translateX(-50%) translateY(-100%);
            }

            to {
                transform: translateX(-50%) translateY(0);
            }
        }

        .profile {
            width: 100%;
            height: 100%;
            display: none;
            position: fixed;
            justify-content: center;
            align-items: center;
            background: rgba(0, 0, 0, 0.01);
            z-index: 1000;
        }

        .profile-card {
            background: rgba(100, 100, 100, 0.2);
            padding: 20px;
            border-radius: 10px;
            display: flex;
            align-items: center;
            gap: 15px;
            width: 350px;
            position: relative;
            backdrop-filter: blur(10px);
            box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.3);
        }

        .avatar-container {
            position: relative;
        }

        .profile-picture {
            width: 80px;
            height: 80px;
            border-radius: 50%;
            border: 2px solid white;
            object-fit: cover;
        }

        .status-indicator {
            position: absolute;
            bottom: 5px;
            right: 5px;
            width: 15px;
            height: 15px;
            border-radius: 50%;
            border: 2px solid rgb(100, 100, 100);
        }

        .status-indicator.online {
            background: #43b581;
        }

        .status-indicator.offline {
            background: #747f8d;
        }

        .status-indicator.dnd {
            background: #f04747;
        }

        .status-indicator.idle {
            background: #faa61a;
        }

        .user-info {
            flex-grow: 1;
        }

        .username {
            font-size: 22px;
            font-weight: bold;
            margin: 0;
        }

        .activity {
            font-size: 14px;
            margin: 5px 0;
            opacity: 0.8;
        }

        .nav {
            position: fixed;
            height: 50px;
            width: 100%;
            background-color: rgb(255, 255, 255, 0);
            top: 0;
            z-index: 9999;
            display: none;
            flex-wrap: wrap;
            flex-direction: row;
        }

        .nav button {
            background-color: rgb(0, 0, 0, 0);
            backdrop-filter: blur(5px);
            border: none;
            margin: 10px 10px 0 10px;
            padding: 10px;
            border-radius: 10px;
            border: white 1px solid;
            transition: background-color 0.3s;
        }

        .dark-mode-toggle {
            position: fixed;
            z-index: 99999;
        }

        @keyframes down {
            from {
                transform: translateY(-200%);
            }

            to {
                transform: translateY(0);
            }
        }

        @keyframes up {
            from {
                transform: translateY(0%);
            }

            to {
                transform: translateY(-200%);
            }
        }

        @keyframes rotateOn {
            from {
                transform: rotate(0deg);
            }

            to {
                transform: rotate(-180deg);
            }
        }

        @keyframes rotateOff {
            from {
                transform: rotate(-180deg);
            }

            to {
                transform: rotate(0deg);
            }
        }

        body.dark-mode #return {
            color: white;
        }

        body.light-mode #return {
            color: black;
        }

        #return {
            background-color: rgb(0, 0, 0, 0);
            border: none;
            font-size: 30px;
            text-shadow: 0 0 20px #fff, 0 0 30px;
            transition: all 0.3s;
            color: white;
        }

        #return:hover {
            transform: scale(1.1);
        }

        .social-media {
            width: 100%;
            height: 40px;
        }

        body.light-mode .social-media button {
            color: black;
        }

        body.dark-mode .social-media button {
            color: white;
        }

        .social-media button {
            background-color: rgb(0, 0, 0, 0);
            border: none;
            height: 100%;
            font-size: 30px;
            width: 20px;
            color: white;
            opacity: 0.5;
            transition: all 0.3s;
        }

        .tooltip {
            visibility: hidden;
            opacity: 0;
            transition: all 1s;
        }

        .social-media button:hover {
            opacity: 1;
            transform: scale(1.1);
        }

        .social-media button:hover .tooltip {
            visibility: visible;
            opacity: 1;
        }

        .tooltip {
            position: absolute;
            z-index: 1;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            font-size: 10px;
            background-color: rgb(0, 0, 0, 0);
            backdrop-filter: blur(5px);
            margin-top: 5px;
            border-radius: 5px;
        }

        .tooltiptext p {
            padding: 5px;
            margin: 0;
        }

        .whatsapp {
            width: 100%;
            position: fixed;
            height: 100%;
            align-items: center;
            display: none;
            justify-content: center;
            flex-direction: column;
            gap: 50px;
        }

        #logoWa {
            font-size: 100px;
        }

        .whatsapp button {
            background-color: rgb(100, 100, 100, 0.3);
            border: none;
            backdrop-filter: blur(5px);
            color: white;
            padding: 10px;
            border-radius: 5px;
            font-size: 20px;
            transition: all 0.3s;
        }

        .whatsapp button:hover {
            transform: scale(1.1);
        }

        body.light-mode .whatsapp button {
            color: black;
        }

        body.dark-mode .whatsapp button {
            color: white;
        }

        .intro {
            visibility: visible;
            width: 100%;
            position: fixed;
            height: 100%;
            background-color: rgb(0, 0, 0, 0);
            z-index: 9999999999999999999;
            animation: intro 0.3s forwards;
            backdrop-filter: blur(100px);
        }

        @keyframes intro {
            to {
                backdrop-filter: blur(0px);
                visibility: hidden;
            }
        }

        body.light-mode .codeBlock {
            background-color: rgb(0, 0, 0, 0.1);
            color: black;
        }

        .info {
            background-color: rgb(255, 255, 255, 0);
            width: 100%;
            height: 100%;
            position: fixed;
            display: none;
            justify-content: center;
            align-items: center;
        }

        .infoContainer {
            width: 75%;
            height: 75%;
            background-color: rgb(30, 30, 30, 0.1);
            border-radius: 50px;
            backdrop-filter: blur(10px);
            box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
        }

        .infoHeader {
            background-color: rgb(255, 255, 255, 0.1);
            position: relative;
            top: 0;
            width: 100%;
            height: 100px;
            border-radius: 50px 50px 0px 0px;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .infoHeader h1 {
            margin: 0;
            font-size: 50px;
        }

        .infoList {
            width: 100%;
            height: calc(100% - 100px);
            overflow-y: auto;
            overflow-x: hidden;
            padding: 10px;
            box-sizing: border-box;
            display: flex;
            align-items: center;
            flex-direction: column;
            gap: 10px;
        }

        .listContainer {
            width: 90%;
            background-color: rgb(255, 255, 255, 0.1);
            border-radius: 10px;
            padding: 10px;
            font-size: 10px;
        }

        body.light-mode .listContainer {
            background-color: rgb(0, 0, 0, 0.1);
        }

        body.light-mode .infoHeader {
            background-color: rgb(0, 0, 0, 0.1);
        }

        .listContainer h1 {
            margin: 0;
        }

        .pop-up {
            width: 50%;
            height: 50%;
            min-width: 350px;
            background-color: rgb(0, 0, 0, 0.5);
            backdrop-filter: blur(10px);
            position: fixed;
            z-index: 999;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            border-radius: 50px;
            box-shadow: 0 8px 16px rgba(30, 30, 30, 0.3);
            color: white;
            display: none;
            z-index: 1000000;
        }

        .pop-up h1 {
            text-align: center;
            font-size: 30px;
        }

        .pop-up p {
            margin: 10px;
            font-size: 20px;
        }

        .pop-up #x {
            position: absolute;
            right: 0px;
            border: none;
            margin: 30px;
            color: white;
            font-size: 20px;
            transition: all 0.3s;
            background-color: rgb(0, 0, 0, 0);
        }

        .pop-up #x:hover {
            transform: scale(1.2);
        }

        .pop-up .choice {
            width: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-wrap: wrap;
            flex-direction: row;
        }

        .pop-up #choice {
            background-color: rgb(255, 255, 255, 0.1);
            border: none;
            color: white;
            font-size: 20px;
            margin: 10px;
            padding: 10px;
            border-radius: 10px;
            backdrop-filter: blur(5px);
            transition: all 0.3s;
        }

        .pop-up #choice:hover {
            transform: scale(1.1);
        }

        @keyframes width {
            from {
                width: 0%;
            }

            to {
                width: 100%;
            }
        }

        @keyframes fadeOut {
            to {
                opacity: 0;
                visibility: hidden;
            }

            from {}
        }

        .signUp,
        .login {
            width: 100%;
            height: 100%;
            position: fixed;
            display: none;
            justify-content: center;
            align-items: center;
        }

        .signUpContainer,
        .loginContainer {
            width: 75%;
            height: 75%;
            background-color: rgb(200, 200, 200, 0.1);
            backdrop-filter: blur(5px);
            border-radius: 20px;
            justify-content: center;
            align-items: center;
            display: flex;
            box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
        }

        .signUpInputContainer,
        .loginInputContainer {
            width: 50%;
            position: absolute;
            right: 0;
            height: 100%;
            border-radius: 0px 20px 20px 0px;
            backdrop-filter: blur(50px);
            background-color: rgb(100, 100, 100, 0.5);
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .signUpContainer .image,
        .loginContainer .image {
            width: 75%;
            max-height: 100%;
            object-fit: contain;
            margin: 0;
        }

        .signUpInputContainer input[type='text'],
        .signUpInputContainer input[type='password'],
        .signUpInputContainer input[type='date'],
        .loginInputContainer input[type='text'],
        .loginInputContainer input[type='password'],
        .loginInputContainer input[type='date'] {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background-color: rgb(200, 200, 200, 1);
            border: none;
            width: 75%;
            height: 30px;
            border-radius: 10px;
            text-align: center;
            transition: all 0.3s;
            border-radius: black 0px solid;
        }

        .signUpInputContainer input[type='text']:hover,
        .signUpInputContainer input[type='password']:hover,
        .loginInputContainer input[type='text']:hover,
        .loginInputContainer input[type='password']:hover {
            transform: scale(1.1);
        }

        .signUpInputContainer input[type='text']:focus,
        .signUpInputContainer input[type='password']:focus,
        .loginInputContainer input[type='text']:focus,
        .loginInputContainer input[type='password']:focus {
            border-radius: black 5px solid;
        }

        .signUpContainer button,
        .loginContainer button {
            width: 75%;
            background-color: rgb(200, 200, 200, 1);
            height: 30px;
            border-radius: 10px;
            border: none;
            transition: all 0.3s;
            margin: 10px;
        }

        .signUpContainer button:hover,
        .loginContainer button:hover {
            transform: scale(1.1);
        }

        .signUpContainer p,
        .loginContainer p {
            margin-bottom: 5px;
        }

        .errorAlert {
            background-color: rgb(200, 0, 0, 0.5);
            padding: 5px;
            border-radius: 5px;
            border: red 3px solid;
            max-width: 75%;
            display: none;
        }

        .sertifikat {
            position: fixed;
            width: 100%;
            height: 100%;
            justify-content: center;
            align-items: center;
            color: black;
            display: none;
        }

        .sertifikatContainer {
            width: 70%;
            height: 80%;
            background-color: #fff;
            padding: 30px;
            border: 2px solid #ccc;
            border-radius: 10px;
            box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
            position: relative;
        }

        .sertifikatHeader {
            text-align: center;
            margin-bottom: 40px;
        }

        .sertifikatHeader h1 {
            font-size: 36px;
            margin: 0;
        }

        .sertifikatHeader p {
            font-size: 20px;
            margin: 5px 0;
        }

        .sertifikatBody {
            text-align: center;
            margin-bottom: 40px;
        }

        .sertifikatBody h2 {
            font-size: 30px;
            margin: 10px 0;
        }

        .sertifikatBody p {
            font-size: 20px;
            margin: 0;
            font-style: italic;
        }

        .sertifikatFooter {
            text-align: center;
            position: absolute;
            bottom: 30px;
            width: 100%;
        }

        .sertifikatFooter p {
            font-size: 18px;
        }

        .signature {
            margin-top: 20px;
            font-size: 18px;
            text-decoration: underline;
            font-weight: bold;
        }

        #dateIssued {
            font-weight: bold;
        }

        a {
            color: #007AFF;
        }

        .privat {
            filter: blur(10px);
            transition: all 0.3s;
        }

        .privat:hover {
            filter: blur(0px);
        }

        .no-access {
            width: 100%;
            height: 100%;
            position: fixed;
            display: none;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            text-align: center;
        }

        .no-access h1,
        .no-access p,
        .no-access h2 {
            padding: 0px 30px 0px 30px;
            max-width: 500px;
        }
    </style>
</head>

<body>
    <div class="intro"></div>
    <div class="no-access">
        <h1>Izin lokasi diperlukan</h1>
        <hr>
        <h2>Kenapa Kami Membutuhkan Lokasi Anda?</h2>
        <p>Kami membutuhkan lokasi Anda untuk memberikan pengalaman yang lebih relevan dan untuk melindungi website kami
            dari potensi ancaman, seperti serangan DDoS dan bot yang dapat melanggar Ketentuan Layanan (ToS). Dengan
            mengetahui lokasi Anda, kami dapat memastikan bahwa akses ke situs kami aman dan sah.</p>

        <h2>Bagaimana Kami Menjamin Keamanan Lokasi Anda?</h2>
        <p>Lokasi yang Anda berikan kepada kami akan dijaga keamanannya. Kami tidak menyimpan data lokasi Anda.
            Informasi lokasi yang dikirimkan hanya digunakan sebagai data sementara dan akan dihapus setelah proses
            selesai. Kami berkomitmen untuk melindungi privasi Anda dan memastikan data Anda aman selama digunakan.</p>
    </div>
    <div class="sertifikat">
        <div class="sertifikatContainer">
            <div class="sertifikatHeader">
                <h1>Sertifikat Sertifikasi Makanan Bersih</h1>
                <p>Diserahkan kepada</p>
            </div>
            <div class="sertifikatBody">
                <h2 id="namaPerusahaan"></h2>
                <p>Telah memenuhi kriteria sebagai berikut:</p>
                <ul style="font-size: 18px; text-align: left; margin-left: 40px;">
                    <li>Makanan tidak beracun</li>
                    <li>Makanan 100% bersih</li>
                    <li>Tidak ada hewan/binatang liar dalam kemasan produk</li>
                </ul>
                <p>Dan dengan ini dinyatakan telah mendapatkan Sertifikasi Makanan Bersih.</p>
            </div>
        </div>
    </div>
    <div class="signUp">
        <div class="signUpContainer">
            <div class="signUpInputContainer">
                <h1>Sign Up</h1>
                <hr>
                <p><i class="fa-solid fa-user"></i> Username:</p>
                <input id="user" type="text" placeholder="Username">
                <p><i class="fa-solid fa-key"></i> Password:</p>
                <input id="pass" type="password" placeholder="Password">
                <p><i class="fa-solid fa-calendar-days"></i> Tanggal lahir:</p>
                <input id="date" type="date" placeholder="Password">
                <button onclick="createAccount()">Buat akun</button>
                <p>Sudah punya akun?</p>
                <button onclick="window.location.href = '?login'">Login</button>
                <div class="errorAlert">Sandi wajib diisi</div>
            </div>
            <img class="image" src="//src.felixxx.my.id/Felixxx.png"></img>
        </div>
    </div>
    <div class="login">
        <div class="loginContainer">
            <div class="loginInputContainer">
                <h1>Login</h1>
                <hr>
                <p><i class="fa-solid fa-user"></i> Username:</p>
                <input type="text" placeholder="Username">
                <p><i class="fa-solid fa-key"></i> Password:</p>
                <input type="password" placeholder="Password">
                <button class="createButton">Masuk</button>
                <p>Belum punya akun?</p>
                <button onclick="window.location.href = '?sign-up'">Sign up</button>
            </div>
            <img class="image" src="//src.felixxx.my.id/Felixxx.png"></img>
        </div>
    </div>
    <div class="pop-up">
        <button id="x" onclick="document.querySelector('.pop-up').remove()" class="fa-solid fa-circle-xmark"></button>
        <h1>Notifikasi</h1>
        <p><strong>felixxx.my.id</strong> akan terlihat lebih baik dalam mode terang.</p>
        <div class="choice">
            <button onclick="choiceButtonScript('ganti')" id="choice">Ganti sekarang</button> <button
                onclick="choiceButtonScript()" id="choice">Tetap memakai mode gelap</button>
        </div>
    </div>
    <div class="info">
        <div class="infoContainer">
            <div class="infoHeader">
                <h1>Info</h1>
            </div>
            <div class="infoList">
                <div class="listContainer">
                    <h1><i class="fa-solid fa-location-dot"></i> IP kamu: <span class="privat" id="ip"></span></h1>
                </div>
                <div class="listContainer">
                    <h1><i class="fa-solid fa-map-location"></i> Lokasi kamu: <span id="lokasi"></span></h1>
                </div>
                <div class="listContainer">
                    <h1><i class="fa-solid fa-wifi"></i> Jenis koneksi yang kamu pakai: <span id="koneksi"></span></h1>
                </div>
                <div class="listContainer">
                    <h1><i class="fa-solid fa-gauge-high"></i> Kecepatan download koneksi kamu: <span id="speed"></span>
                    </h1>
                </div>
                <div class="listContainer">
                    <h1><i class="fa-solid fa-stopwatch"></i> Ping: <span id="ping"></span></h1>
                </div>
                <div class="listContainer">
                    <h1><i class="fa-solid fa-pen"></i> Terakhir diperbarui: 28/01/2025</h1>
                </div>
                <div class="listContainer">
                    <h1><i class="fa-solid fa-mobile-button"></i> UI Version: 2.5</h1>
                </div>
                <div class="listContainer">
                    <h1><i class="fa-solid fa-heart"></i> Developed with love by felixxx.my.id</h1>
                </div>
            </div>
        </div>
    </div>
    <div class="nav">
        <button onclick="navButtonInteract()" id="arrow" class="fa-solid fa-chevron-down"></button>
        <button class="fa-solid fa-house-chimney" id="home" onclick="window.location.href = '/'"> </button>
        <button class="fa-solid fa-file" id="project" onclick="window.location.href = '?file-directory'">
        </button>
        <button class="fa-solid fa-circle-info" id="project" onclick="window.location.href = '?info'">
        </button>

    </div>
    <div class="profile">
        <div class="profile-card">
            <div class="avatar-container">
                <img class="profile-picture" src="//src.felixxx.my.id/Felixxx.png" alt="Profile Picture">
                <div class="status-indicator online"></div>
            </div>
            <div class="user-info">
                <h1 class="username">felixxx.my.id 2.0</h1>
                <p class="activity">Made with love by felixxx.my.id</p>
                <div class="social-media">
                    <button class="fa-brands fa-whatsapp" onclick="window.location.href = '?whatsapp'">
                        <div class="tooltip">
                            <div class="a"><span class="tooltiptext">
                                    <p>6281292470390</p>
                                </span>
                            </div>
                        </div>
                    </button>
                </div>
            </div>
        </div>
    </div>
    <div class="whatsapp">
        <div id="logoWa" class="fa-brands fa-whatsapp"></div>
        <button onclick="window.location.href = '//wa.me/6281292470390'">Lanjut ke WhatsApp</button>
    </div>
    <div id="loadingOverlay show" class="loading-overlay">
        <div class="spinner"></div>
    </div>
    <div class="error">
        <img class="ErrLogo" src="//src.felixxx.my.id/Felixxx.png">
        <h1 class="errorText">Gagal memuat JavaScript.</h1>
        <p class="errorDesc">Terjadi kesalahan tak terduga.</p>
        <button onclick="window.location.href = '/'" id="return" class="fa-solid fa-rotate-left"> Kembali</button>
    </div>
    <button class="dark-mode-toggle" id="darkModeToggle"></button>
    <ul class="circles">
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
    <div class="container">
        <img class="logo" src="//src.felixxx.my.id/Felixxx.png" width="100px">
        <h2>Felixx Project</h2>
        <hr>
        <ul id="fileList"></ul>
    </div>


    <script src="//felixxx.my.id/ads/reloader.js"></script>
    <script src="//felixxx.my.id/notifikasi/notifikasi.js"></script>
</body>

</html>