Fork: 0
root / gnexus-welcome-page
Transfer to URL with SHA Find file
Newer
Older
gnexus-welcome-page / index.php
@eugene-sukhodolskiy eugene-sukhodolskiy on 13 Dec 6 KB Added info about disks
Raw Blame History 
<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>GNexus Welcome page</title>
    <link rel="shortcut icon" href="resources/fav.png" type="image/png">
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');
        
        * {
            padding: 0;
            margin: 0;
        }

        body {
            font-family: "Roboto", sans-serif;
            font-weight: 400;
            font-style: normal;
        }

        .container {
            width: 100%;
            max-width: 800px;
            margin: auto;
            margin-top: 10%;
            box-sizing: border-box;
            padding: 30px 20px;
        }

        img {
            max-width: 100%;
        }

        .header {
            width: 100%;
        }

        .logo {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 10px;
        }

        .logo img {
            width: 150px;
            margin-bottom: 15px;
        }

        .sitename {
            text-align: center;
        }

        .subname {
            max-width: 320px;
            text-align: center;
        }

        .services {
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
            flex-wrap: wrap;
            gap: 40px;
            margin-top: 60px;
        }

        .services .item {
            max-width: 250px;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 20px;
            transition-duration: .2s;
        }

        .services .item:hover {
            opacity: .6;
        }

        .services a {
            text-decoration: none;
            color: inherit;
        }

        .services .item img {
            width: 120px;
            height: 120px;
            object-fit: cover;
            border-radius: 100%;
        }

        .footer {
            text-align: center;
            margin-top: 80px;
            font-size: 14px;
            opacity: .6;
        }

        .float-info-btn {
            position: fixed;
            bottom: 20px;
            right: 20px;
            width: 40px;
            height: 40px;
            cursor: pointer;
            z-index: 20;
            background-color: #fff;
            border-radius: 100%;
        }

        .float-info-btn svg {
            width: 100%;
            height: 100%;
            display: none;
        }

        .float-info-btn:not(.active) svg:first-child {
            display: block;
        }

        .float-info-btn.active svg:last-child {
            display: block;
        }

        .info-popup {
            position: fixed;
            background-color: #fefefe;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            display: none;
            z-index: 10;
            overflow-y: auto;
        }

        .info-popup .content {
            width: 100%;
            max-width: 500px;
            margin: 40px auto;
            padding: 10px;
            box-sizing: border-box;
        }

        td, th {
            padding: 5px;
        }
    </style>
</head>
<body>

    <div class="info-popup">
        <div class="content"></div>
    </div>
    <div class="float-info-btn">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M11,9H13V7H11M12,20C7.59,20 4,16.41 4,12C4,7.59 7.59,4 12,4C16.41,4 20,7.59 20,12C20,16.41 16.41,20 12,20M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M11,17H13V11H11V17Z" /></svg>

        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12,20C7.59,20 4,16.41 4,12C4,7.59 7.59,4 12,4C16.41,4 20,7.59 20,12C20,16.41 16.41,20 12,20M12,2C6.47,2 2,6.47 2,12C2,17.53 6.47,22 12,22C17.53,22 22,17.53 22,12C22,6.47 17.53,2 12,2M14.59,8L12,10.59L9.41,8L8,9.41L10.59,12L8,14.59L9.41,16L12,13.41L14.59,16L16,14.59L13.41,12L16,9.41L14.59,8Z" /></svg>
    </div>

    <div class="container">
        <header class="header">
            <div class="logo">
                <img src="resources/logo.png" alt="GNexus Logo">
                <h1 class="sitename">Приветствую в GNexus!</h1>
                <span class="subname">Это приватное пространство, если ты не участник, <strong>уходи!</strong></span>
            </div>
        </header>
        
        <div class="services">
            <a href="https://cloud.gnexus.space">
                <div class="item">
                    <img src="resources/cloud.png" alt="GNexus Cloud">
                    <div class="service-name">GNexus Cloud</div>
                </div>
            </a>

            <a href="https://gnexus.space/blog">
                <div class="item">
                    <img src="resources/blog.png" alt="GNexus Blog">
                    <div class="service-name">GNexus Blog</div>
                </div>
            </a>

            <a href="https://jellyfin.gnexus.space">
                <div class="item">
                    <img src="resources/jellyfin.png" alt="Jellyfin">
                    <div class="service-name">Jellyfin</div>
                </div>
            </a>

            <a href="https://transmission.gnexus.space">
                <div class="item">
                    <img src="resources/transmission.png" alt="Transmission">
                    <div class="service-name">Transmission</div>
                </div>
            </a>

            <a href="https://anicusi.gnexus.space">
                <div class="item">
                    <img src="resources/anicusi.png" alt="Anicusi">
                    <div class="service-name">Anicusi</div>
                </div>
            </a>

            <a href="https://git.gnexus.space">
                <div class="item">
                    <img src="resources/gitbucket.png" alt="Git Bucket">
                    <div class="service-name">Git Bucket</div>
                </div>
            </a>
        </div>
        
        <footer class="footer">
            <p>&copy; 2024</p>
        </footer>
    </div>

    <?php
        $disksSpaceInfo = file_get_contents("http://192.168.68.210:3001/api/disk-space");
    ?>

    <script>
        const disksSpaceInfo = JSON.parse(`<?= $disksSpaceInfo ?>`); 
    </script>

    <script src="main.js"></script>
</body>
</html>