قم بتحويل هذا الكود الى flutter ```<!doctype html>
<html lang="ar" dir="rtl">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>د. محمد علي - إختصاص أسنان</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" integrity="sha512-sV1WcTj5ebWvBeq6RZ5tgiYpG5nXKp2b0EJYvRy7E9R4BO9jE8bXy3zACz3rEQMdvaTU+wVxvXC8iJTJAWvFjg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <style>
        /* إعدادات عامة */
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background-color: #f5f5f5;
            color: #333;
            line-height: 1.6;
        }
        a {
            text-decoration: none;
            color: inherit;
        }
        /* رأس الصفحة */
        header {
            background: linear-gradient(rgba(75, 0, 130, 0.8), rgba(75, 0, 130, 0.8)), url("https://picsum.photos/1200/400") no-repeat center center/cover;
            color: #fff;
            padding: 40px 20px;
            height:280px
        }
        header h1 {
            font-size: 2.5em;
            margin-bottom: 10px;
        }
        header p {
            font-size: 1.1em;
            margin-bottom: 5px;
        }
        header .cta-button {
            margin-top: 15px;
            padding: 10px 20px;
            font-size: 1em;
            background-color: #ff5722;
            color: #fff;
            border: none;
            border-radius: 25px;
            cursor: pointer;
            transition: background-color 0.3s ease;
            float: left;
        }
        header .cta-button:hover {
            background-color: #e64a19;
        }
        /* الأقسام الرئيسية */
        main {
            padding: 20px;
            max-width: 1200px;
            margin: 0 auto;
        }
        section {
            margin-bottom: 40px;
        }
        section h2 {
            font-size: 1.8em;
            margin-bottom: 20px;
            color: #4b0082;
            border-bottom: 2px solid #4b0082;
            display: inline-block;
            padding-bottom: 5px;
        }
        /* بطاقات الحجوزات */
        .cards-container {
            display: flex;
            flex-wrap: wrap;
            gap: 20px;
        }
        .card {
            background-color: #fff;
            border-radius: 10px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.1);
            padding: 20px;
            flex: 1 1 300px;
            display: flex;
            flex-direction: row;
            align-items: end;
            justify-content: space-between;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }
        .card:hover {
            transform: translateY(-5px);
            box-shadow: 0 8px 20px rgba(0,0,0,0.2);
        }
        .card h3 {
            margin-bottom: 10px;
            color: #4b0082;
        }
        .card p {
            margin-bottom: 8px;
            color: #555;
        }
        .card .status {
            display: inline-block;
            background-color: #009900;
            color: #fff;
            padding: 5px 10px;
            border-radius: 20px;
            font-size: 0.9em;
        }
        .card .actions {
            margin-top: 15px;
            display: flex;
            gap: 10px;
        }
        .card .actions button {
            flex: 1;
            padding: 5px 15px;
            border: none;
            border-radius: 20px;
            cursor: pointer;
            transition: background-color 0.3s ease;
            color: #fff;
            font-size: 0.9em;
        }
        .card .actions .edit-btn {
            background-color: #ffc107;
        }
        .card .actions .edit-btn:hover {
            background-color: #e0a800;
        }
        .card .actions .cancel-btn {
            background-color: #dc3545;
        }
        .card .actions .cancel-btn:hover {
            background-color: #c82333;
        }
        /* بطاقات الخدمات */
        .shops-container {
            display: flex;
            flex-wrap: wrap;
            gap: 20px;
        }
        .shop {
            background-color: #fff;
            border-radius: 10px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.1);
            overflow: hidden;
            flex: 1 1 300px;
            display: flex;
            flex-direction: column;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }
        .shop:hover {
            transform: translateY(-5px);
            box-shadow: 0 8px 20px rgba(0,0,0,0.2);
        }
        .shop img {
            width: 100%;
            height: 200px;
            object-fit: cover;
        }
        .shop .shop-content {
            padding: 15px;
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }
        .shop h3 {
            color: #4b0082;
            margin-bottom: 10px;
            font-size: 1.2em;
        }
        .shop .price {
            font-size: 1em;
            color: #ffffff;
            margin-bottom: 15px;
        }
        .shop .book-button {
            padding: 5px 15px;
            background-color: #4b0082;
            color: #fff;
            border: none;
            border-radius: 20px;
            cursor: pointer;
            transition: background-color 0.3s ease;
        }
        .shop .footer {display: flex;justify-content: space-between}
        .shop .book-button:hover {
            background-color: #3700b3;
        }
        /* تذييل الصفحة */
        footer {
            background-color: #4b0082;
            color: #fff;
            text-align: center;
            padding: 15px 10px;
        }
        /* استجابة أفضل للشاشات الصغيرة */
        @media (max-width: 768px) {
            header h1 {
                font-size: 2em;
            }
            section h2 {
                font-size: 1.5em;
            }
        }
    </style>
</head>
<body>
    <header>
        <h1>د. محمد علي</h1>
        <p>إختصاص أسنان</p>
        <p>قطاع 28، شارع نعمة الريفي، مقابل مصرف الطيف الإسلامي الإهلي</p>
        <p>من السبت إلى الخميس — من 4 مساءً إلى 12 مساءً</p>
        <button class="cta-button"><i class="fa fa-calendar-alt"></i> حجز موعد</button>
    </header>
    <main>
        <section>
            <h2>الحجوزات النشطة</h2>
            <div class="cards-container">
                <div class="card">
                    <div class="card-content">
                        <h3>اسم المراجع: محمد علي</h3>
                        <p>رقم هاتف: 07712345678</p>
                        <p>تاريخ الحجز: اليوم</p>
                        <p>نوع الحجز: قلع سن</p>
                        <p>حالة الحجز: <span class="status">في الإنتظار</span></p>
                    </div>
                    <div class="actions">
                        <button class="edit-btn"><i class="fa fa-edit"></i> تعديل</button>
                        <button class="cancel-btn"><i class="fa fa-trash"></i> إلغاء</button>
                    </div>
                </div>
                <!-- يمكنك إضافة المزيد من بطاقات الحجوزات هنا -->
            </div>
        </section>
        <section>
            <h2>الخدمات</h2>
            <div class="shops-container">
                <div class="shop">
                    <img src="https://picsum.photos/400/250" alt="حشوة سن">
                    <div class="shop-content">
                        <h3>حشوة سن</h3>
                        <div class="footer">
                        <p class="price">250,000 د.ع</p>
                        <button class="book-button"><i class="fa fa-book"></i> حجز</button>
                    </div>
                    </div>
                </div>
                <div class="shop">
                    <img src="https://picsum.photos/400/250" alt="قلع سن">
                    <div class="shop-content">
                        <h3>قلع سن</h3>
                        <div class="footer">
                        <p class="price">15,000 د.ع</p>
                        <button class="book-button"><i class="fa fa-book"></i> حجز</button>
                    </div>
                    </div>
                </div>
                <!-- يمكنك إضافة المزيد من بطاقات الخدمات هنا -->
            </div>
        </section>
    </main>
    <footer>
        <p>© 2021-2024 د. محمد علي. جميع الحقوق محفوظة.</p>
    </footer>
</body>
</html>```