Esempio di codice HTML del simulatore Android

Apri nell'Editor Pubblica il Tuo Codice

Consigliato

13 June 2025

Modello di menu del ristorante HTML

HTML

<div class="notification-bar">
            <div class="time">12:00</div>
            <div class="status-icons">
                <span class="wifi"></span>
                <span class="battery"></span>
            </div>
        </div>

<div class="desktop">
            <div class="app-icon" data-app="calculator">
                <img src="calculator.png" alt="Calculator">
                <span>Calculator</span>
            </div>
        </div>

<div class="app-window" id="calculator">
            <div class="app-header">
                Calculator
                <button class="close-button">X</button>
            </div>
            <div class="app-content">
                
                <p>Это заглушка для калькулятора.</p>
            </div>
        </div>
    </div>

CSS

body {
    font-family: sans-serif;
    margin: 0;
    background-color: #f5f5f5;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}

.android-container {
    width: 360px; /* Примерная ширина Android устройства */
    height: 640px; /* Примерная высота  Android устройства */
    background-color: white;
    border: 1px solid black;
    border-radius: 20px;
    overflow: hidden; /* Важно для скрытия контента за пределами контура */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* Панель уведомлений */
.notification-bar {
    background-color: #333;
    color: white;
    padding: 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.notification-bar .status-icons span {
    margin-left: 8px; /* Отступ между иконками */
}

/* Рабочий стол */
.desktop {
    padding: 16px;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
}

.app-icon {
    width: 72px;
    margin: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    cursor: pointer;
}

.app-icon img {
    width: 48px;
    height: 48px;
    margin-bottom: 4px;
}

/* Окно приложения */
.app-window {
    position: absolute;
    top: 10%;
    left: 10%;
    width: 80%;
    height: 80%;
    background-color: white;
    border: 1px solid #ccc;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    display: none; /* Скрыто по умолчанию */
    flex-direction: column;
}

.app-window.active {
    display: flex; /* Отображаем окно если активный */
}

.app-header {
    background-color: #007bff;
    color: white;
    padding: 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #ccc;
}

.app-header .close-button {
    background-color: transparent;
    border: none;
    color: white;
    font-size: 20px;
    cursor: pointer;
}

.app-content {
    padding: 16px;
}

/* Адаптивность (пример) */
@media (max-width: 480px) {
    .android-container {
        width: 90%;
        height: auto;
    }

.desktop {
        padding: 8px;
    }

.app-icon {
        width: 64px;
        margin: 4px;
    }
}

JS

document.addEventListener('DOMContentLoaded', () => {
    const appIcons = document.querySelectorAll('.app-icon');
    const appWindow = document.getElementById('calculator'); // ID окна приложения
    const closeButton = document.querySelector('.close-button');

appIcons.forEach(icon => {
        icon.addEventListener('click', () => {
          const appName = icon.dataset.app; // Получаем имя приложения из data-аттрибута
          // Здесь можно добавить логику для открытия разных приложений, используя appName
          if (appName === 'calculator') {
               appWindow.classList.add('active'); // Показываем окно
          }
        });
    });

closeButton.addEventListener('click', () => {
        appWindow.classList.remove('active'); // Скрываем окно
    });

// Функция для обновления времени (пример)
    function updateTime() {
        const timeElement = document.querySelector('.time');
        const now = new Date();
        const hours = String(now.getHours()).padStart(2, '0');
        const minutes = String(now.getMinutes()).padStart(2, '0');
        timeElement.textContent = ${hours}:${minutes};
    }

updateTime(); // Обновляем время сразу при загрузке
    setInterval(updateTime, 60000); // Обновляем время каждую минуту

});

Esempio di codice HTML del simulatore Android

Consigliato

Un codice di Metehan

Un codice di bachir123

Modello di menu del ristorante HTML

HTML

CSS

JS

Consigliato

Un codice di Metehan

Un codice di bachir123

Modello di menu del ristorante HTML

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS