<!DOCTYPE html>
<html lang="zh-TW">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>國立臺北商業大學 體育器材借還系統</title>
    <link rel="stylesheet" href="css/content.css">
    <link rel="icon" type="image/gif" href="https://i.imgur.com/gTvafyQ.gif">
    <script src="https://www.gstatic.com/firebasejs/9.22.2/firebase-app-compat.js"></script>
    <script src="https://www.gstatic.com/firebasejs/9.22.2/firebase-database-compat.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    </head>
<body>
    <header>
        <img src="https://i.imgur.com/gTvafyQ.gif" alt="NTUB Logo">
        <h1>單位/社團/系科學會借用登記</h1>
    </header>
    
    <div class="container">
        <form id="equipmentForm">
            <label for="education">學制</label>
            <select id="education" name="education" required>
                <option value="">請選擇</option>
                <option value="研究所">研究所</option>
                <option value="日間五專">日間五專</option>
                <option value="四間四技">日間四技</option>
                <option value="日間二技">日間二技</option>
                <option value="進修四技">進修四技</option>
                <option value="進修二技">進修二技</option>
                <option value="空院">空院</option>
            </select>

            <label for="department">單位</label>
            <select id="department" name="department" required>
                <option value="">請選擇</option>
                <option value="會計資訊">會計資訊</option>
                <option value="財務金融">財務金融</option>
                <option value="財政稅務">財政稅務</option>
                <option value="國際貿易/商務">國際貿易/商務</option>
                <option value="企業管理">企業管理</option>
                <option value="資訊管理">資訊管理</option>
                <option value="應用外語">應用外語</option>
                <option value="創新設計與經營管理">創新設計與經營管理</option>
                <option value="商業設計管理">商業設計管理</option>
                <option value="數位多媒體設計">數位多媒體設計</option>
                <option value="貿易實務法律暨談判碩士">貿易實務法律暨談判碩士</option>
                <option value="資研所">資研所</option>
                <option value="應用商學">應用商學</option>
            </select>

            <label for="name">姓名</label>
            <input type="text" id="name" name="name" placeholder="請輸入姓名" required>

            <label for="studentId">學號</label>
            <input type="text" id="studentId" name="studentId" placeholder="請輸入學號" required>

            <label for="phone">電話</label>
            <input
                type="tel"
                id="phone"
                name="phone"
                placeholder="請輸入電話"
                required
                pattern="\d{10}"
                maxlength="10"
                title="電話號碼必須為10位數字。"
            >

            <label for="borrowEquipment">借用器材</label>
            <input type="text" id="borrowEquipment" name="borrowEquipment" placeholder="請輸入借用器材名稱" required>

            <label for="borrowTime">借用時間</label>
            <input type="datetime-local" id="borrowTime" name="borrowTime" required>

            <label for="remarks">預計歸還時間</label>
            <input type="text" id="remarks" name="remarks" placeholder="請註明歸還時間" required>

            <label>借閱狀態</label>
            <div class="radio-group">
                <label><input type="radio" name="status" value="借" required> 借</label>
                <label><input type="radio" name="status" value="還"> 還</label>
            </div>

            <button type="submit">登記</button>
        </form>
    </div>
    <footer>
        國立臺北商業大學 Copyright 2024 納啟科技
    </footer>
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <script src="java/c.js"></script>
</body>
</html>
