public/index.html - master - erioxis/web-nodejs

public/index.html
201 строка6 KB
erioxis
lab11fix
15 дек 2025, 23:21
15 дек 2025, 23:2170dc7ba
<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Лабораторные работы по Node.js</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body { 
            font-family: 'Tahoma', 'Arial', sans-serif; 
            margin: 0;
            padding: 0;
            background: #008080 url('back.png') center/cover no-repeat fixed;
            color: #000;
            height: 100vh;
            overflow: hidden;
        }
        
        .desktop {
            padding: 20px;
            height: calc(100vh - 40px);
            position: relative;
        }
        
        .window {
            background-color: #ece9d8;
            border: 2px solid;
            border-top-color: #fff;
            border-left-color: #fff;
            border-right-color: #808080;
            border-bottom-color: #808080;
            padding: 3px;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 800px;
            box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.3);
        }
        
        .title-bar {
            background: linear-gradient(to right, #000080, #1084d0);
            color: white;
            padding: 3px 6px;
            font-weight: bold;
            font-size: 13px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .window-content {
            padding: 30px;
            background: #ece9d8;
            text-align: center;
        }
        
        .student-info {
            text-align: center;
            margin-bottom: 25px;
            padding: 10px;
            background: #d4d0c8;
            border: 1px solid #808080;
            font-size: 12px;
            border-radius: 2px;
        }
        
        h1 {
            color: #000080;
            text-align: center;
            margin-top: 0;
            font-size: 20px;
            margin-bottom: 30px;
            font-weight: bold;
            text-transform: uppercase;
            letter-spacing: 1px;
        }
        
        .labs-container {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 20px;
            margin: 30px 0;
        }
        
        .lab-button {
            width: 100%;
            height: 120px;
            border: 2px solid;
            border-top-color: #fff;
            border-left-color: #fff;
            border-right-color: #808080;
            border-bottom-color: #808080;
            display: flex;
            align-items: center;
            justify-content: center;
            background: linear-gradient(to bottom, #d4d0c8, #ece9d8);
            color: #000;
            text-decoration: none;
            font-size: 14px;
            font-weight: bold;
            text-align: center;
            transition: all 0.2s;
            padding: 10px;
        }
        
        .lab-button:hover {
            background: linear-gradient(to bottom, #316ac5, #245edb);
            color: white;
            border: 2px dotted #316ac5;
        }
        
        .taskbar {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            background: linear-gradient(to bottom, #245edb, #1d52c1);
            height: 30px;
            display: flex;
            align-items: center;
            padding: 0 5px;
            border-top: 1px solid #fff;
        }
        
        .start-button {
            background: linear-gradient(to bottom, #6ca035, #3d751b);
            color: white;
            padding: 4px 10px;
            border: 1px solid;
            border-top-color: #fff;
            border-left-color: #fff;
            border-right-color: #2d4f0f;
            border-bottom-color: #2d4f0f;
            font-weight: bold;
            margin-right: 10px;
            font-size: 11px;
        }
        
        .time-display {
            color: white;
            font-size: 11px;
            margin-left: auto;
            margin-right: 10px;
        }
    </style>
</head>
<body>
    <div class="desktop">
        <div class="window">
            <div class="title-bar">
                <span>Лабораторные работы по Node.js</span>
                <span style="font-family: 'Arial'; font-size: 16px;">_ □ X</span>
            </div>
            <div class="window-content">
                <div class="student-info">
                    <h2>Ярощук П. А.</h2>
                    <p>Группа: ИТ2203</p>
                </div>
                
                <h1>ЛАБОРАТОРНЫЕ РАБОТЫ ПО NODE.JS</h1>
                
                <div class="labs-container">
                    <a href="/lab7/" class="lab-button">Лабораторная №7</a>
                    <a href="/lab8/" class="lab-button">Лабораторная №8</a>
                    <a href="/lab9/" class="lab-button">Лабораторная №9</a>
                    <a href="/lab10/" class="lab-button">Лабораторная №10</a>
                    <a href="/lab11/" class="lab-button">Лабораторная №11</a>
                    <a href="/lab12/" class="lab-button">Лабораторная №12</a>
                </div>
            </div>
        </div>
    </div>
    
    <div class="taskbar">
        <div class="start-button">Пуск</div>
        <div class="time-display" id="timeDisplay"></div>
    </div>

    <script>
        function updateTime() {
            const now = new Date();
            const timeString = now.toLocaleTimeString('ru-RU', { 
                hour: '2-digit', 
                minute: '2-digit',
                second: '2-digit'
            });
            const dateString = now.toLocaleDateString('ru-RU');
            document.getElementById('timeDisplay').textContent = `${dateString} ${timeString}`;
        }
        
        updateTime();
        setInterval(updateTime, 1000);
    </script>
</body>
</html>