source: interfejs/request-access.html

main
Last change on this file was 69f2a41, checked in by Klimentina Efremova <klimentina08642@…>, 7 months ago

Initial commit
  • Property mode set to 100644
File size: 8.5 KB
Line 
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>Request Access - Handcraft Marketplace</title>
7 <link rel="stylesheet" href="style.css">
8</head>
9<body>
10<header>
11 <div class="logo-container">
12 <img src="../images/administrative/logo.jpg" alt="Handcraft Marketplace Logo" onerror="this.style.display='none'">
13 <h1>🎨 Handcraft Marketplace</h1>
14 </div>
15 <nav>
16 <ul>
17 <li><a href="index.html">Home</a></li>
18 <li><a href="products.html">Products</a></li>
19 <li><a href="login.html">Login</a></li>
20 <li><a href="register.html">Register</a></li>
21 </ul>
22 </nav>
23</header>
24
25<main>
26 <div class="form-container">
27 <h2>Request Access</h2>
28 <p class="form-subtitle">Fill out this form to request access to the Handcraft Marketplace platform</p>
29
30 <form id="access-request-form" class="form">
31 <h3>Personal Information</h3>
32
33 <div class="form-row">
34 <div class="form-group">
35 <label for="first-name">First Name *</label>
36 <input type="text" id="first-name" required>
37 </div>
38
39 <div class="form-group">
40 <label for="last-name">Last Name *</label>
41 <input type="text" id="last-name" required>
42 </div>
43 </div>
44
45 <div class="form-group">
46 <label for="email">Email *</label>
47 <input type="email" id="email" required>
48 </div>
49
50 <div class="form-group">
51 <label for="phone">Phone Number</label>
52 <input type="tel" id="phone">
53 </div>
54
55 <h3>Request Type</h3>
56
57 <div class="form-group">
58 <label for="request-type">I want to: *</label>
59 <select id="request-type" required>
60 <option value="">Select an option</option>
61 <option value="seller">Become a Seller (Open a Store)</option>
62 <option value="employee">Work as an Employee in a Store</option>
63 <option value="partner">Become a Partner</option>
64 <option value="other">Other</option>
65 </select>
66 </div>
67
68 <div id="seller-details" style="display: none;">
69 <h4>Store Information</h4>
70
71 <div class="form-group">
72 <label for="store-name">Proposed Store Name</label>
73 <input type="text" id="store-name">
74 </div>
75
76 <div class="form-group">
77 <label for="store-description">Store Description</label>
78 <textarea id="store-description" rows="3"></textarea>
79 </div>
80
81 <div class="form-group">
82 <label for="product-type">What type of products will you sell?</label>
83 <textarea id="product-type" rows="2"></textarea>
84 </div>
85 </div>
86
87 <div id="employee-details" style="display: none;">
88 <h4>Employment Information</h4>
89
90 <div class="form-group">
91 <label for="store-select">Select Store</label>
92 <select id="store-select">
93 <option value="">Select a store</option>
94 </select>
95 </div>
96
97 <div class="form-group">
98 <label for="position">Desired Position</label>
99 <input type="text" id="position" placeholder="e.g., Sales Assistant, Craftsman">
100 </div>
101
102 <div class="form-group">
103 <label for="experience">Relevant Experience</label>
104 <textarea id="experience" rows="3"></textarea>
105 </div>
106 </div>
107
108 <div id="other-details" style="display: none;">
109 <h4>Additional Information</h4>
110
111 <div class="form-group">
112 <label for="other-description">Please describe your request</label>
113 <textarea id="other-description" rows="4"></textarea>
114 </div>
115 </div>
116
117 <h3>Additional Information</h3>
118
119 <div class="form-group">
120 <label for="message">Message (Optional)</label>
121 <textarea id="message" rows="4" placeholder="Tell us more about why you want to join Handcraft Marketplace..."></textarea>
122 </div>
123
124 <div class="form-group checkbox">
125 <input type="checkbox" id="terms" required>
126 <label for="terms">I agree to the Terms and Conditions *</label>
127 </div>
128
129 <div class="form-group checkbox">
130 <input type="checkbox" id="newsletter">
131 <label for="newsletter">I'd like to receive updates about Handcraft Marketplace</label>
132 </div>
133
134 <button type="submit" class="btn-primary btn-full">Submit Request</button>
135 </form>
136
137 <div class="form-footer">
138 <p>Already have an account? <a href="login.html">Login here</a></p>
139 <p>Want to register directly? <a href="register.html">Register as client</a> or <a href="register-store.html">Open a store</a></p>
140 </div>
141 </div>
142</main>
143
144<div id="success-modal" class="modal" style="display: none;">
145 <div class="modal-content">
146 <span class="close">&times;</span>
147 <h2>Request Submitted!</h2>
148 <p>Thank you for your interest in Handcraft Marketplace.</p>
149 <p>We'll review your request and get back to you within 2-3 business days.</p>
150 <p>A confirmation email has been sent to your email address.</p>
151 <div style="margin-top: 2rem;">
152 <a href="index.html" class="btn-primary">Return to Home</a>
153 </div>
154 </div>
155</div>
156
157<footer>
158 <div class="footer-content">
159 <div class="footer-section">
160 <h3>Handcraft Marketplace</h3>
161 <p>Join our community</p>
162 </div>
163 <div class="footer-section">
164 <h3>Quick Links</h3>
165 <ul>
166 <li><a href="index.html">Home</a></li>
167 <li><a href="products.html">Products</a></li>
168 </ul>
169 </div>
170 </div>
171 <div class="footer-bottom">
172 <p>&copy; 2025 Handcraft Marketplace. All rights reserved.</p>
173 </div>
174</footer>
175
176<script src="script.js"></script>
177<script>
178 document.addEventListener('DOMContentLoaded', () => {
179 const requestType = document.getElementById('request-type');
180
181 // Load stores for employee selection
182 loadStores();
183
184 // Show/hide relevant sections based on request type
185 requestType.addEventListener('change', (e) => {
186 const type = e.target.value;
187
188 document.getElementById('seller-details').style.display = type === 'seller' ? 'block' : 'none';
189 document.getElementById('employee-details').style.display = type === 'employee' ? 'block' : 'none';
190 document.getElementById('other-details').style.display = type === 'other' ? 'block' : 'none';
191 });
192
193 // Form submission
194 document.getElementById('access-request-form').addEventListener('submit', (e) => {
195 e.preventDefault();
196
197 const firstName = document.getElementById('first-name').value;
198 const lastName = document.getElementById('last-name').value;
199 const email = document.getElementById('email').value;
200 const type = document.getElementById('request-type').value;
201
202 if (!type) {
203 alert('Please select a request type');
204 return;
205 }
206
207 // Validate email
208 const emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
209 if (!emailRegex.test(email)) {
210 alert('Please enter a valid email address');
211 return;
212 }
213
214 // Here you would send the request to the server
215 console.log('Access request:', {
216 firstName,
217 lastName,
218 email,
219 type,
220 phone: document.getElementById('phone').value,
221 message: document.getElementById('message').value
222 });
223
224 // Show success modal
225 document.getElementById('success-modal').style.display = 'block';
226
227 // Reset form
228 e.target.reset();
229 document.getElementById('seller-details').style.display = 'none';
230 document.getElementById('employee-details').style.display = 'none';
231 document.getElementById('other-details').style.display = 'none';
232 });
233 });
234
235 async function loadStores() {
236 try {
237 const response = await fetch('/api/stores');
238 const data = await response.json();
239
240 if (data.success) {
241 const select = document.getElementById('store-select');
242 select.innerHTML = '<option value="">Select a store</option>' +
243 data.stores.map(store =>
244 `<option value="${store.store_id}">${store.name}</option>`
245 ).join('');
246 }
247 } catch (error) {
248 console.error('Error loading stores:', error);
249 }
250 }
251
252 // Close modal functionality
253 document.querySelectorAll('.modal .close').forEach(closeBtn => {
254 closeBtn.addEventListener('click', () => {
255 closeBtn.closest('.modal').style.display = 'none';
256 });
257 });
258
259 window.addEventListener('click', (event) => {
260 if (event.target.classList.contains('modal')) {
261 event.target.style.display = 'none';
262 }
263 });
264</script>
265</body>
266</html>
Note: See TracBrowser for help on using the repository browser.