<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Snapp!</title>
    <style>
        body {
            margin: 0;
            font-family: sans-serif;
        }
        .container {
            display: flex;
            flex-direction: column;
            min-height: 100vh;
        }
        .top-bar {
            background-color: #23c558;
            padding: 10px 15px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .top-bar-left {
            display: flex;
            align-items: center;
        }
        .top-bar-right {
            display: flex;
            align-items: center;
        }
        .signal-indicator {
            background-color: #ddd;
            border-radius: 10px;
            padding: 5px 10px;
            display: flex;
            align-items: center;
            margin-right: 10px;
        }
        .signal-bar {
            width: 20px;
            height: 5px;
            background-color: #fff;
            margin-left: 5px;
        }
        .menu-icon {
            width: 20px;
            height: 20px;
            background-color: #fff;
            border-radius: 5px;
            margin-right: 10px;
        }
        .pro-icon {
            width: 40px;
            height: 20px;
            background-color: #fff;
            border-radius: 10px;
            border: 2px solid #23c558;
            display: flex;
            justify-content: center;
            align-items: center;
            font-weight: bold;
            margin-right: 10px;
        }
        .vpn-icon {
            width: 20px;
            height: 20px;
            background-color: #ddd;
            border-radius: 5px;
            margin-right: 10px;
        }
        .elite-icon {
            width: 30px;
            height: 30px;
            background-color: #ddd;
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            margin-right: 10px;
        }
        .elite-text {
            font-weight: bold;
            color: #fff;
        }
        .three-dot-icon {
            width: 15px;
            height: 15px;
            background-color: #ddd;
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            margin-right: 10px;
        }
        .time-indication {
            color: #fff;
            font-weight: bold;
        }
        .battery-icon {
            width: 20px;
            height: 10px;
            background-color: #000;
            border-radius: 5px;
            margin-right: 10px;
        }
        .battery-bar {
            width: 15px;
            height: 5px;
            background-color: #fff;
            border-radius: 5px;
        }
        .category-icons {
            display: flex;
            justify-content: space-between;
            padding: 15px 0;
        }
        .category-icon {
            width: 60px;
            height: 60px;
            background-color: #fff;
            border-radius: 10px;
            border: 2px solid #ddd;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 20px;
        }
        .service-icons {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            padding: 15px 0;
        }
        .service-icon {
            width: 80px;
            height: 80px;
            background-color: #fff;
            border-radius: 10px;
            border: 2px solid #ddd;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 20px;
            margin-bottom: 15px;
        }
        .service-icon-truck {
            background-color: #23c558;
        }
        .service-icon-calendar {
            background-color: #28a7e4;
        }
        .service-icon-shopping-bag {
            background-color: #f06292;
        }
        .service-icon-airplane {
            background-color: #f44336;
        }
        .service-icon-building {
            background-color: #f44336;
        }
        .service-icon-bottle {
            background-color: #f44336;
        }
        .service-icon-stethoscope {
            background-color: #23c558;
        }
        .service-icon-steering-wheel {
            background-color: #23c558;
        }
        .service-icon-pro {
            background-color: #23c558;
        }
        .service-icon-location {
            background-color: #fff;
        }
        .service-icon-wifi {
            background-color: #28a7e4;
        }
        .service-icon-umbrella {
            background-color: #28a7e4;
        }
        .red-banner {
            background-color: #f44336;
            padding: 20px;
            border-radius: 10px;
            margin-bottom: 15px;
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        .red-banner-text {
            color: #fff;
            font-weight: bold;
            text-align: center;
        }
        .red-banner-button {
            background-color: #fff;
            border-radius: 10px;
            border: 2px solid #28a7e4;
            padding: 10px 20px;
            color: #28a7e4;
            font-weight: bold;
            margin-top: 15px;
        }
        .red-banner-suitcase {
            width: 100px;
            height: 150px;
            background-color: #f44336;
            border-radius: 10px;
            margin-bottom: 15px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }
        .red-banner-suitcase-label {
            color: #fff;
            font-weight: bold;
        }
        .red-banner-suitcase-stickers {
            width: 50px;
            height: 50px;
            background-color: #fff;
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            margin-bottom: 5px;
        }
        .red-banner-suitcase-stickers-text {
            color: #23c558;
            font-weight: bold;
        }
        .red-banner-dots {
            display: flex;
            margin-top: 15px;
        }
        .red-banner-dot {
            width: 10px;
            height: 10px;
            background-color: #ddd;
            border-radius: 50%;
            margin-right: 5px;
        }
        .category-icons-bottom {
            display: flex;
            justify-content: space-between;
            padding: 15px 0;
        }
        .category-icon-bottom {
            width: 80px;
            height: 80px;
            background-color: #fff;
            border-radius: 10px;
            border: 2px solid #ddd;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 20px;
        }
        .category-icon-bottom-car {
            background-color: #23c558;
        }
        .category-icon-bottom-shopping-basket {
            background-color: #fff;
        }
        .category-icon-bottom-fork {
            background-color: #fff;
        }
        .three-dot-icon-bottom {
            width: 10px;
            height: 10px;
            background-color: #ddd;
            border-radius: 50%;
            margin-left: 5px;
        }
        .bottom-line {
            height: 2px;
            background-color: #000;
        }
        @media (min-width: 768px) {
            .top-bar-left {
                margin-right: auto;
            }
            .category-icons {
                flex-wrap: wrap;
                justify-content: space-between;
            }
            .category-icon {
                width: 100px;
                height: 100px;
            }
            .service-icons {
                display: grid;
                grid-template-columns: repeat(5, 1fr);
                grid-gap: 15px;
            }
            .service-icon {
                width: 100px;
                height: 100px;
            }
            .red-banner {
                padding: 30px;
            }
            .red-banner-suitcase {
                width: 150px;
                height: 200px;
            }
            .category-icons-bottom {
                flex-wrap: wrap;
                justify-content: space-between;
            }
            .category-icon-bottom {
                width: 120px;
                height: 120px;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="top-bar">
            <div class="top-bar-left">
                <div class="signal-indicator">
                    <span style="color: #fff;">4.5G</span>
                    <div class="signal-bar"></div>
                </div>
                <div class="menu-icon"></div>
                <div class="pro-icon">Pro</div>
                <div class="vpn-icon"></div>
            </div>
            <div class="top-bar-right">
                <div class="battery-icon">
                    <div class="battery-bar"></div>
                </div>
                <div class="elite-icon">
                    <span class="elite-text">Elite</span>
                </div>
                <div class="three-dot-icon"></div>
                <span class="time-indication">10:23</span>
            </div>
        </div>
        <div class="category-icons">
            <div class="category-icon">
                <span style="font-size: 25px;">🏠</span>
            </div>
            <div class="category-icon">
                <span style="font-size: 25px;">💎</span>
            </div>
            <div class="category-icon">
                <span style="font-size: 25px;">🏷️</span>
            </div>
            <div class="category-icon">
                <span style="font-size: 25px;">🛒</span>
            </div>
        </div>
        <div class="service-icons">
            <div class="service-icon service-icon-truck">
                <span style="font-size: 25px;">🚚</span>
            </div>
            <div class="service-icon service-icon-calendar">
                <span style="font-size: 25px;">🗓️</span>
            </div>
            <div class="service-icon service-icon-shopping-bag">
                <span style="font-size: 25px;">🛍️</span>
            </div>
            <div class="service-icon service-icon-airplane">
                <span style="font-size: 25px;">✈️</span>
            </div>
            <div class="service-icon service-icon-building">
                <span style="font-size: 25px;">🏢</span>
            </div>
            <div class="service-icon service-icon-bottle">
                <span style="font-size: 25px;">💊</span>
            </div>
            <div class="service-icon service-icon-stethoscope">
                <span style="font-size: 25px;">🩺</span>
            </div>
            <div class="service-icon service-icon-steering-wheel">
                <span style="font-size: 25px;">🧑‍🤝‍🧑</span>
            </div>
            <div class="service-icon service-icon-pro">
                <span style="font-size: 25px;">🏢</span>
            </div>
            <div class="service-icon service-icon-location">
                <span style="font-size: 25px;">📍</span>
            </div>
            <div class="service-icon service-icon-wifi">
                <span style="font-size: 25px;">📡</span>
            </div>
            <div class="service-icon service-icon-umbrella">
                <span style="font-size: 25px;">☔</span>
            </div>
        </div>
        <div class="red-banner">
            <span class="red-banner-text" style="font-size: 18px;">بروزار هتل داخلی</span>
            <span class="red-banner-text" style="font-size: 18px;">هم هتل فصلیه. هم پرواز. سفرت رو عفیف تنبیداز!</span>
            <div class="red-banner-suitcase">
                <span class="red-banner-suitcase-label">HOTEL</span>
                <div class="red-banner-suitcase-stickers">
                    <span style="font-size: 20px;">📍</span>
                </div>
                <div class="red-banner-suitcase-stickers">
                    <span style="font-size: 20px;">📷</span>
                </div>
                <div class="red-banner-suitcase-stickers">
                    <span style="font-size: 20px;">☔</span>
                    <span class="red-banner-suitcase-stickers-text">Snapp! Trip</span>
                </div>
            </div>
            <button class="red-banner-button">شروع کنید</button>
            <div class="red-banner-dots">
                <div class="red-banner-dot"></div>
                <div class="red-banner-dot"></div>
                <div class="red-banner-dot"></div>
                <div class="red-banner-dot"></div>
            </div>
        </div>
        <div class="category-icons-bottom">
            <div class="category-icon-bottom category-icon-bottom-car">
                <span style="font-size: 25px;">🚗</span>
            </div>
            <div class="category-icon-bottom category-icon-bottom-shopping-basket">
                <span style="font-size: 25px;">🛒</span>
            </div>
            <div class="category-icon-bottom category-icon-bottom-fork">
                <span style="font-size: 25px;">🍴</span>
            </div>
            <div class="three-dot-icon-bottom"></div>
        </div>
        <div class="bottom-line"></div>
    </div>
</body>
</html> دکمه توضیحات کاملا حذف کن کد کامل یکجا درست کن بفرست و دکمه نمایشگر کد رو هم یک شکلک بهش اضافه کن بهش بخوره و رنگشم بهتر کن هماهنگ با خودش باشه