एंड्रॉइड सिम्युलेटर HTML कोड उदाहरण

अनुशंसित

12 June 2025

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

});

एंड्रॉइड सिम्युलेटर HTML कोड उदाहरण

अनुशंसित

मेटे का एक कोड

SVG तीर के साथ HTML अगला बटन

लेबदेव द्वारा एक कोड

HTML

CSS

JS

अनुशंसित

मेटे का एक कोड

SVG तीर के साथ HTML अगला बटन

लेबदेव द्वारा एक कोड

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS