-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathcustomize.html
More file actions
127 lines (113 loc) · 6.47 KB
/
customize.html
File metadata and controls
127 lines (113 loc) · 6.47 KB
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Customize - Happy Ending</title>
<link rel="stylesheet" href="custumize.css">
<link rel="shortcut icon" href="https://res.cloudinary.com/drkmgpcad/image/upload/v1726841328/rahjpg3k7mdtnow4ttux.png" type="image/x-icon">
<link href="https://fonts.googleapis.com/css2?family=Beau+Rivage&display=swap" rel="stylesheet">
</head>
<body>
<header>
<div>
<a class="logo-div" href="index.php" target="_self" onclick="showLoadingScreen('Loading...')"><img src="https://res.cloudinary.com/drkmgpcad/image/upload/v1726841328/rahjpg3k7mdtnow4ttux.png" alt="Logo">
<h1>Happy Ending</h1>
</a>
</div>
<div id="search-container">
<input type="text" id="search-query" placeholder="Search...">
</div>
<!-- Navigation Bar -->
<div class="navbar">
<div class="icons">
<span class="cart-icon"><a href="#"><img src="https://res.cloudinary.com/doka2wyj0/image/upload/v1727418587/ja/icon/fmeramy6bvccj6kd8fjk.png" alt="Cart" id="cartIcon"></a></span>
<div class="profile-dropdown">
<span class="profile-icon"><a href="#"><img src="https://res.cloudinary.com/doka2wyj0/image/upload/v1727418591/ja/icon/bichy1ftsupn7ddpzqlu.png" alt="User Icon" id="userIcon"></a></span>
<span class="username"><a href="#" id="usernameLink">Username</a></span>
<ul class="dropdown-menu" id="dropdownMenu">
<li><a href="#">My Account</a></li>
<li class="divider"></li>
<li><a href="#">My Purchases</a></li>
<li class="divider"></li>
<li><a href="#">Logout</a></li>
</ul>
</div>
</div>
</div>
</header>
<main>
<section class="customize-container">
<h2>Customize:</h2>
<form action="#" method="post">
<div class="form-section">
<div class="left-column">
<div class="form-group">
<label>Size:</label>
<div class="checkbox-group">
<label><input type="checkbox" name="size" value="Extra Small"> Extra Small</label>
<label><input type="checkbox" name="size" value="Small"> Small</label>
<label><input type="checkbox" name="size" value="Medium"> Medium</label>
<label><input type="checkbox" name="size" value="Large"> Large</label>
<label><input type="checkbox" name="size" value="Extra Large"> Extra Large</label>
</div>
</div>
<div class="form-group">
<label>Color:</label>
<div class="color-selection">
<label for="inside-color">Inside:</label>
<select name="inside-color" id="inside-color">
<option value="" disabled selected>Choose a color</option>
<option value="Red">Red</option>
<option value="Blue">Blue</option>
<option value="Green">Green</option>
</select>
<label for="outside-color">Outside:</label>
<select name="outside-color" id="outside-color">
<option value="" disabled selected>Choose a color</option>
<option value="Red">Red</option>
<option value="Blue">Blue</option>
<option value="Green">Green</option>
</select>
</div>
</div>
</div>
<div class="right-column">
<div class="form-group">
<label>Cover:</label>
<div class="checkbox-group">
<label><input type="checkbox" name="cover" value="Full"> Full</label>
<label><input type="checkbox" name="cover" value="Half"> Half</label>
</div>
</div>
<div class="form-group">
<label for="note">Note:</label>
<textarea id="note" name="note" rows="4" placeholder="Enter additional notes..."></textarea>
</div>
<div class="form-group image-selector">
<label for="file-input" class="btn-save select-image-button">Select Image</label>
<input type="file" id="file-input" accept=".jpg, .jpeg, .png" style="display: none;">
<div class="file-info">
<p>File size: maximum 2MB<br>File extension: JPEG, PNG</p>
</div>
</div>
<div class="form-group save-button-container">
<button type="submit" class="btn-save">Save</button>
</div>
</form>
</section>
</main>
<footer>
<p class="copyright">© 2024 Happy Ending. All rights reserved.</p>
<nav>
<ul>
<li class="about-us"><a href="#">ABOUT US</a></li>
<li><a href="www.facebook.com" target="_blank"><img class="icons-picture" src="https://res.cloudinary.com/drkmgpcad/image/upload/v1724068194/angoienw2wu8c1aqdrge.png" alt="FB-logo"></a></li>
<li><a href="www.instagram.com" target="_blank"><img class="icons-picture" src="https://res.cloudinary.com/drkmgpcad/image/upload/v1726891138/zzzgspgokfq1sbc9sjmu.webp" alt="IG-logo"></a></li>
<li><a href="www.x.com" target="_blank"><img class="icons-picture" src="https://res.cloudinary.com/drkmgpcad/image/upload/v1726890890/edvvrnyg1wewlm1onmzs.png" alt="X-logo"></a></li>
</ul>
</nav>
</footer>
<script src="template.js"></script>
</body>
</html>