Hey. This is a site code to help out with a project "areyoufriendswithdavid", I want to make a spinoff called "areyoufriendswithsath", where it does something simillar as described in the html, except with Sathopian.


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Are You Friends with David Baszucki?</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
    <link href="https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap" rel="stylesheet">
    <style>
        body {
            font-family: 'Inter', sans-serif;
            background-image: linear-gradient(#080808 2px,transparent 0),linear-gradient(90deg,#080808 2px,transparent 0),linear-gradient(#0c0c0c 1px,transparent 0),linear-gradient(90deg,#080808 1px,#000 0);
            background-size: 100px 100px, 100px 100px, 20px 20px, 20px 20px;
            background-position: -2px -2px, -2px -2px, -1px -1px, -1px -1px;
            color: #fff;
            position: relative;
            --bs-body-font-family: 'Inter', sans-serif !important;
            --bs-border-color: rgb( 60, 60, 60 ) !important;
            --bs-body-bg: rgba(10, 10, 10, 0.7) !important;
        }
        h1 {
            font-size: x-large !important;
            margin: 0;
        }
        h4 {
            color: rgb( 180, 180, 180 );
            font-size: 12px;
        }
        a {
            text-decoration: none !important;
        }
    </style>
    <a id="user-card-template" target="_blank" href="https://www.roblox.com/users/1251734586/profile" style="display:none;padding:8px;border-radius:8px;align-items: center;filter: drop-shadow(5px 5px 10px #000000);background-color: rgb( 8,8,8 );border: 1px solid rgb( 60, 60, 60 );">
        <img class="user-thumbnail" src="" style="border-radius: 50%; width: 50px; height: 50px; margin-right: 8px;border: 1px solid rgb( 60, 60, 60 );">
        <div>
            <h3 style="margin: 0; font-size: large;" class="text-white username-text">David Baszucki</h3>
            <p style="color: rgb(180,180,180); margin:0;font-size: 13px;" class="user-info">12345 • Processed at: </p>
        </div>
    </a>
    <div id="card-arrow-template" class="w-100 my-1" style="justify-content: center;display:none;">
        <i class="bi bi-arrow-down mx-auto" style="font-size: 24px;"></i>
    </div>
    <script async src="https://www.googletagmanager.com/gtag/js?id=G-NB940RK0R6"></script>
    <script>
    window.dataLayer = window.dataLayer || [];
    function gtag(){dataLayer.push(arguments);}
    gtag('js', new Date());

    gtag('config', 'G-NB940RK0R6');
    </script>
    <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-5647909494567068"
    crossorigin="anonymous"></script>
    <script src="/static/js/main.js"></script>
    <!--
        hi! if you are reading this it probably means that you are wondering how this website works
        please ignore the messy inline css styles as this website was made in a few hours as a fun project

        the backend uses a neo4j database to store users and the friend relationships between them
        while a scraper is running in the background to spam the roblox friends api to fetch the friends of users
        who has not been processed yet, once it gets the data it stores it in the database and marks the user as processed
        and then moves onto the next unprocessed user in the database. this cycle repeats on and on until 
        it finds no more unprocessed users in the database, however it would probably take forever with the amount
        of users on roblox so some people may be left out of the database if they are really far away from david.

        made by https://github.com/PrintedScript
        note: this entire website is running on a ovhcloud vps using $200 in free credits i got lol, this website will probably be taken down next month
            unless there is really a demand for this website to stay up
    -->
</head>
<body data-bs-theme="dark">
    <div style="display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 12px;">
        <div>
            <div style="width: 100%; max-width: 30rem;border: 1px solid rgb( 60, 60, 60 );padding: 20px; border-radius: 8px;backdrop-filter: saturate(180%) blur(20px); background-color: rgba(20, 20, 20, 0.5);">
                <h1 style="text-align: center;">Are you friends with David Baszucki?</h1>
                <h4 style="text-align: center; margin-top: 6px;">Find out far away you are from being friends with <a style="color: rgb(0, 119, 255);" href="https://www.roblox.com/users/24941/profile">david.baszucki</a> on Roblox!</h4>
                <input type="text" class="form-control" placeholder="Your Roblox username" id="username1-input" style="margin-top: 12px;">
                <input type="text" class="form-control" placeholder="Other Roblox username" id="username2-input" style="margin-top: 12px;" value="david.baszucki">
                <button class="btn btn-primary w-100" style="margin-top: 12px;" id="submit-button">Find shortest path</button>
                <p class="m-0 text-danger text-center" style="font-size: 12px;font-weight: 500;display: none;" id="error-message">An error occurred, please try again later.</p>
            </div>
            <div id="path-results-container" style="width: 100%; max-width: 30rem;border: 1px solid rgb( 60, 60, 60 );padding: 20px; border-radius: 8px;backdrop-filter: saturate(180%) blur(20px); background-color: rgba(20, 20, 20, 0.5); margin-top: 20px;display: none;">
            </div>
            <div style="width: 100%; max-width: 30rem;border: 1px solid rgb( 60, 60, 60 );padding: 20px; border-radius: 8px;backdrop-filter: saturate(180%) blur(20px); background-color: rgba(20, 20, 20, 0.5); margin-top: 20px;">
                <p style="color: rgb(180, 180, 180);text-align: center;font-size: 14px;margin:0;">Users in Database: <span id="total-nodes-text" class="text-white">??,???,???</span> • Users processed: <span id="users-processed-text" class="text-white">??,???,???</span> </p>
                <p style="color: rgb(180, 180, 180);text-align: center;font-size: 14px;margin:0;">Made with <a href="https://github.com/pallets/quart" style="color: rgb(0, 119, 255);">Quart</a> and <a href="https://getbootstrap.com/" style="color: rgb(0, 119, 255);">Bootstrap</a> by <a href="https://github.com/PrintedScript" style="color: rgb(0, 119, 255);">PrintedScript</a> in a few hours</p>
                <!-- shameless plug VV -->
                <p style="color: rgb(180, 180, 180);text-align: center;font-size: 12px;margin:0;">while your here... why not support my <a href="https://www.roblox.com/games/138240997802150/cart-ride-to-infinity" style="color: rgb(0, 119, 255);">roblox game</a> or <a href="https://www.rbxservers.xyz" style="color: rgb(0, 119, 255);">website!</a></p>
            </div>
        </div>
    </div>
    <div style="position: fixed; top: 0; left: 0; right: 0; bottom: 0; backdrop-filter: saturate(180%) blur(20px); background-color: rgba(20, 20, 20, 0.5); z-index: 999; align-items: center; justify-content: center; display: none; transition: 0.4s;" id="loading-spinner">
        <div class="spinner-border" role="status">
            <span class="visually-hidden">Loading...</span>
        </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
<script defer src="https://static.cloudflareinsights.com/beacon.min.js/vcd15cbe7772f49c399c6a5babf22c1241717689176015" integrity="sha512-ZpsOmlRQV6y907TI0dKBHq9Md29nnaEIPlkf84rnaERnq6zvWvPUqr2ft8M1aS28oN72PdrCzSjY4U6VaAw1EQ==" data-cf-beacon='{"rayId":"8d48a32bfb580408","version":"2024.10.1","r":1,"token":"689fbf5f37044e0babb23bf421106b0d","serverTiming":{"name":{"cfExtPri":true,"cfL4":true,"cfSpeedBrain":true,"cfCacheStatus":true}}}' crossorigin="anonymous"></script>
</body>
</html>