{% extends "base/base.html" %}
{% block content %}
<div class="container py-4 py-xl-5">
        <div class="row mb-5">
            <div class="col-md-8 col-xl-6 text-center mx-auto">
                <h2>欢迎来到学生寝室管理系统</h2>
                <p>管理宿舍，从此不再烦恼</p>
            </div>
        </div>
        <div class="row gy-4 row-cols-1 row-cols-md-2 row-cols-xl-3">
            <div class="col">
                <div class="card"><img class="card-img-top w-100 d-block fit-cover" style="height: 200px;" src="{{ url_for('static', filename='images/DSC00705-2.jpg') }}" width="354" height="200">
                    <div class="card-body p-4">
                        <p class="text-primary card-text mb-0">高效</p>
                        <h4 class="card-title">与众不同</h4>
                        <p class="card-text">与传统的寝室管理方式相比，我们的系统利用了先进的信息技术，提供了更高效、更便捷、更人性化的寝室管理服务，帮助学生解决生活中的各种问题，提高学校管理水平。</p>
                        <div class="d-flex">
                            <div></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col">
                <div class="card"><img class="card-img-top w-100 d-block fit-cover" style="height: 200px;" src={{ url_for('static', filename="images/寝室.jpg") }}>
                    <div class="card-body p-4">
                        <p class="text-primary card-text mb-0">多元</p>
                        <h4 class="card-title">功能至上</h4>
                        <p class="card-text">我们的系统具备多种功能，如宿舍分配、报修、公告等，通过简单易用的界面，用户可以方便地进行各种操作，满足学生和管理人员的各种需求，提高宿舍管理效率和生活质量。</p>
                        <div class="d-flex">
                            <div></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col">
                <div class="card"><img class="card-img-top w-100 d-block fit-cover" style="height: 200px;" src={{ url_for('static', filename="images/主教.jpg") }}>
                    <div class="card-body p-4">
                        <p class="text-primary card-text mb-0">开放</p>
                        <h4 class="card-title">信息共享</h4>
                        <p class="card-text">我们的系统提供API开放接口，方便学校和第三方开发者获取宿舍管理数据，进行进一步的数据分析和应用开发，促进信息共享和互通，实现更广泛的资源共享和应用创新。</p>
                        <div class="d-flex">
                            <div></div>
                        </div>
                    </div>
                </div>
            </div>
        </div><!-- Start: BS5 Jumbotron -->
        <div id="headingbackgroundimg" class="p-5 mb-4 bg-light round-3" style="margin-top: 50px;background: url({{ url_for('static', filename='images/DSC01029-3.jpg')}});background-size: cover;">
            <div class="container-fluid py-5">
                <h1 class="display-5 fw-bold" id="headinginto" style="color: var(--bs-border-color);font-family: 'Abril Fatface', serif;">非我莫属</h1>
                <p id="headingdetail" class="col-md-8 fs-4" style="color: var(--bs-light);font-family: 'Abril Fatface', serif;">如果世界上需要有一个管理学生寝室的系统......</p><a class="btn btn-primary btn-lg" role="button" id="headingbutton" href="#" style="font-size: 25px;font-family: 'Abril Fatface', serif;">进入系统</a>
            </div>
        </div><!-- End: BS5 Jumbotron -->
    </div>
{% endblock content %}