TC
/
RemdesKVM


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142
							<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>DezuKVM | Dashboard</title>
        <meta name="csrf_token" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="icon" type="image/png" href="/favicon.png">
        <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fomantic-ui/2.9.4/semantic.min.css" integrity="sha512-ySrYzxj+EI1e9xj/kRYqeDL5l1wW0IWY8pzHNTIZ+vc1D3Z14UDNPbwup4yOUmlRemYjgUXsUZ/xvCQU2ThEAw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
        <script src="https://cdnjs.cloudflare.com/ajax/libs/fomantic-ui/2.9.4/semantic.min.js" integrity="sha512-Y/wIVu+S+XJsDL7I+nL50kAVFLMqSdvuLqF2vMoRqiMkmvcqFjEpEgeu6Rx8tpZXKp77J8OUpMKy0m3jLYhbbw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
        
        <style>
            body {
                margin: 0;
                height: 100vh;
                font-family: 'Segoe UI', Arial, sans-serif;
                background: #f9fafb;
                color: #222;
            }
            .main-layout {
                display: flex;
                height: 100vh;
            }
            .sidebar {
                width: 100px;
                background: #f4f5f7; /* Changed from #222 to a whitish grey */
                color: #222; /* Changed from #fff to dark text */
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                border-right: 1px solid #e0e1e2;
            }
            .sidebar .menu-top {
                padding: 32px 0 0 0;
                display: flex;
                flex-direction: column;
                align-items: center;
            }
            .sidebar .logo {
                width: 64px;
                height: 64px;
                margin-bottom: 32px;
                border-radius: 12px;
                display: flex;
                align-items: center;
                justify-content: center;
                overflow: hidden;
            }
            .sidebar .logo img {
                width: 48px;
                height: 48px;
                object-fit: contain;
            }
            .sidebar .menu-options {
                width: 100%;
            }
            .sidebar .menu-options .item {
                padding: 16px 32px;
                cursor: pointer;
                transition: background 0.2s;
                font-size: 1.1em;
                color: #222;
            }
            .sidebar .menu-options .item:hover,
            .sidebar .menu-options .item.active {
                background: #e9ecef; /* Lighter hover/active background */
            }
            .sidebar .menu-bottom {
                background: #f0f1f3; /* Lighter than sidebar */
                padding: 24px 0 24px 0;
                display: flex;
                flex-direction: column;
                align-items: center;
            }
            .sidebar .menu-bottom .item {
                color: #555;
                padding: 12px 32px;
                width: 100%;
                text-align: center;
                cursor: pointer;
                border-radius: 6px;
                margin-bottom: 8px;
                transition: background 0.2s, color 0.2s;
            }
            .sidebar .menu-bottom .item:hover {
                background: #e9ecef;
                color: #222;
            }
            .content {
                flex: 1;
                background: #f9fafb;
                padding: 32px;
                overflow-y: auto;
            }
            @media (prefers-color-scheme: dark) {
                body, .content {
                    background: #181a1b;
                    color: #eee;
                }
                .sidebar {
                    background: #181818;
                    color: #fff;
                }
                .sidebar .menu-bottom {
                    background: #222;
                }
                .sidebar .menu-options .item:hover,
                .sidebar .menu-options .item.active {
                    background: #222;
                }
            }
        </style>
    </head>
    <body>
        <div class="main-layout">
            <nav class="sidebar">
                <div>
                    <div class="menu-top">
                        <div class="logo">
                            <img src="img/logo.png" alt="Logo">
                        </div>
                        <div class="menu-options">
                            <div class="item active">Dashboard</div>
                            <div class="item">Servers</div>
                            <div class="item">Storage</div>
                            <div class="item">Network</div>
                            <div class="item">Users</div>
                        </div>
                    </div>
                </div>
                <div class="menu-bottom">
                    <div class="item"><i class="cog icon"></i> Settings</div>
                    <div class="item"><i class="sign-out icon"></i> Logout</div>
                </div>
            </nav>
            <main class="content">
                <!-- Main content goes here -->
            </main>
        </div>
    </body>
</html>