Ejemplo de código HTML del simulador de Android

36 mironovbogdan341

Abrir en el editor Publica tu código

Ejemplo de código HTML del simulador de Android

Recomendado

21 October 2025

Ejemplo de plantilla HTML básica

29 June 2025

Plantilla HTML para blog y podcast en turco

25 November 2025

Juego de combinación de palos - Código fuente del juego HTML5

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); // Обновляем время каждую минуту

});

Recomendado

Ejemplo de plantilla HTML básica

Plantilla HTML para blog y podcast en turco

Juego de combinación de palos - Código fuente del juego HTML5

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS