BloodBond/request.html at master · Sandraa16012007/BloodBond · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Request Blood - BloodBond</title>
    <link rel="stylesheet" href="styles/request-styles.css">
    <link rel="stylesheet" href="styles/styles.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Do+Hyeon&display=swap" rel="stylesheet">
    <link rel="icon" type="image/png" href="assets/logo-favicon.png">
</head>

<body>
    <!-- Navigation -->
    <nav>
        <div class="logo">
            <div class="logo-icon"><img src="assets/logo.png" alt="Logo"></div>
            <span>BloodBond</span>
        </div>
        <div class="nav-right">
            <ul class="nav-links">
                <li><a href="#home">Home</a></li>
                <li><a href="#about">About</a></li>
            </ul>
            <div class="nav-buttons">
                <a href="index.html" class="btn btn-logout">Logout</a>
            </div>
        </div>
    </nav>

    <!-- Main Container -->
    <div class="container">
        <a href="dashboard.html" class="back-button">Back to Dashboard</a>

        <div class="form-card">
            <div class="form-header">
                <div class="header-icon">❤️</div>
                <div class="header-text">
                    <h1>Request Blood</h1>
                    <p>Fill in the details to find donors</p>
                </div>
            </div>

            <form class="form-content" id="requestForm">
                <div class="form-group">
                    <label for="bloodGroup">Blood Group Needed <span class="required">*</span></label>
                    <select id="bloodGroup" class="form-select" required>
                        <option value="">Select blood group</option>
                        <option value="A+">A+</option>
                        <option value="A-">A-</option>
                        <option value="B+">B+</option>
                        <option value="B-">B-</option>
                        <option value="AB+">AB+</option>
                        <option value="AB-">AB-</option>
                        <option value="O+">O+</option>
                        <option value="O-">O-</option>
                    </select>
                </div>

                <div class="form-group">
                    <label for="urgency">Urgency Level <span class="required">*</span></label>
                    <select id="urgency" class="form-select" required>
                        <option value="">Select urgency level</option>
                        <option value="critical">Critical (Immediate)</option>
                        <option value="high">High (Within 24 hours)</option>
                        <option value="medium">Medium (Within 3 days)</option>
                        <option value="low">Low (Within a week)</option>
                    </select>
                </div>

                <div class="form-group">
                    <label for="hospital">Hospital / Medical Center <span class="required">*</span></label>
                    <input type="text" id="hospital" class="form-input" placeholder="Enter hospital name" required>
                </div>

                <div class="form-group">
                    <label for="location">Location *</label>
                    <div class="location-wrapper">
                        <input type="text" id="location" class="form-input" placeholder="Click the button to get location" readonly required>
                        <button type="button" class="getLocationBtn">📍 Get My Location</button>
                    </div>
                </div>

                <div class="form-group">
                    <label for="additional">Additional Information</label>
                    <textarea id="additional" class="form-textarea"
                        placeholder="Any additional details that might help donors..."></textarea>
                </div>

                <div class="alert-box">
                    <strong>Note:</strong>
                    <p>Your request will be shared with nearby donors matching your requirements. Please ensure all
                        information is accurate.</p>
                </div>

                <div class="form-actions">
                    <button type="submit" class="btn-submit" id="submitBtn">Submit Request</button>
                    <button type="button" class="btn-cancel" id="cancelBtn">Cancel</button>
                </div>
            </form>
        </div>
    </div>

    <!-- Footer -->
    <footer id="about">
        <div class="footer-content">
            <div>
                <div class="footer-logo">
                    <span>BloodBond</span>
                </div>
                <p class="footer-desc">Connecting blood donors with those in need. Every donation saves lives.</p>
            </div>
            <div class="footer-section">
                <h4>Quick Links</h4>
                <ul class="footer-links">
                    <li><a href="#home">Home</a></li>
                    <li><a href="#about">About Us</a></li>
                    <li><a href="#register">Register</a></li>
                </ul>
            </div>
            <div class="footer-section">
                <h4>Legal</h4>
                <ul class="footer-links">
                    <li><a href="#privacy">Privacy Policy</a></li>
                    <li><a href="#terms">Terms of Service</a></li>
                    <li><a href="#contact">Contact Us</a></li>
                </ul>
            </div>
        </div>
        <div class="footer-bottom">
            <p>&copy; 2025 BloodBond. All rights reserved.</p>
        </div>
    </footer>

    <script type="module" src="scripts/script.js"></script>
</body>

</html>