..
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
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161 | <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>TShirt Designer</title>
<link
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor"
crossorigin="anonymous"
/>
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2"
crossorigin="anonymous"
></script>
<script src="https://kit.fontawesome.com/ac24e755dd.js" crossorigin="anonymous"></script>
<style>
.color-preview {
width: 2rem;
height: 2rem;
border: 1px solid black;
margin: 1px;
cursor: pointer;
}
.no-border {
border: none;
}
.no-border:hover{
border: none;
}
.wd-adjust {
width: 100%;
height: 100%;
max-height: 8rem;
max-width: 8rem;
margin-bottom: 1rem;
}
</style>
</head>
<body>
<div class="container mt-5">
<div class="page-header">
<h1 class="display-5 text-primary">Customize T-Shirt</h1>
<hr>
</div>
<div class="row mt-5">
<div class="col">
<nav>
<div class="nav nav-pills" id="nav-tab" role="tablist">
<button class="nav-link active" data-bs-toggle="tab" data-bs-target="#options" type="button" role="tab">T-Shirt Options</button>
<button class="nav-link" data-bs-toggle="tab" data-bs-target="#customize" type="button" role="tab">Customization</button>
</div>
</nav>
<div class="tab-content" id="nav-tabContent">
<div class="tab-pane fade show active" id="options" role="tabpanel" tabindex="0">
<div class="mt-3">
<p class="lead">Choose a T-Shirt Type:</p>
<select id="tshirttype" class="form-select">
<option value="old/img/crew_front.png" selected="selected">Short Sleeve</option>
<option value="old/img/mens_longsleeve_front.png">Long Sleeve</option>
<option value="old/img/mens_hoodie_front.png">Hoodies</option>
<option value="old/img/mens_tank_front.png">Tank tops</option>
</select>
</div>
<div class="mt-3">
<p class="lead">Choose a T-Shirt Color:</p>
<ul class="nav">
<li class="color-preview" data-bs-toggle="tooltip" data-bs-placement="top" title="White" style="background-color:#ffffff;"></li>
<li class="color-preview" data-bs-toggle="tooltip" data-bs-placement="top" title="Dark Heather" style="background-color:#616161;"></li>
<li class="color-preview" data-bs-toggle="tooltip" data-bs-placement="top" title="Gray" style="background-color:#f0f0f0;"></li>
<li class="color-preview" data-bs-toggle="tooltip" data-bs-placement="top" title="Charcoal" style="background-color:#5b5b5b;"></li>
<li class="color-preview" data-bs-toggle="tooltip" data-bs-placement="top" title="Black" style="background-color:#222222;"></li>
<li class="color-preview" data-bs-toggle="tooltip" data-bs-placement="top" title="Heather Orange" style="background-color:#fc8d74;"></li>
<li class="color-preview" data-bs-toggle="tooltip" data-bs-placement="top" title="Heather Dark Chocolate" style="background-color:#432d26;"></li>
<li class="color-preview" data-bs-toggle="tooltip" data-bs-placement="top" title="Salmon" style="background-color:#eead91;"></li>
<li class="color-preview" data-bs-toggle="tooltip" data-bs-placement="top" title="Chesnut" style="background-color:#806355;"></li>
<li class="color-preview" data-bs-toggle="tooltip" data-bs-placement="top" title="Dark Chocolate" style="background-color:#382d21;"></li>
<li class="color-preview" data-bs-toggle="tooltip" data-bs-placement="top" title="Citrus Yellow" style="background-color:#faef93;"></li>
<li class="color-preview" data-bs-toggle="tooltip" data-bs-placement="top" title="Avocado" style="background-color:#aeba5e;"></li>
<li class="color-preview" data-bs-toggle="tooltip" data-bs-placement="top" title="Kiwi" style="background-color:#8aa140;"></li>
<li class="color-preview" data-bs-toggle="tooltip" data-bs-placement="top" title="Irish Green" style="background-color:#1f6522;"></li>
<li class="color-preview" data-bs-toggle="tooltip" data-bs-placement="top" title="Scrub Green" style="background-color:#13afa2;"></li>
<li class="color-preview" data-bs-toggle="tooltip" data-bs-placement="top" title="Teal Ice" style="background-color:#b8d5d7;"></li>
<li class="color-preview" data-bs-toggle="tooltip" data-bs-placement="top" title="Heather Sapphire" style="background-color:#15aeda;"></li>
<li class="color-preview" data-bs-toggle="tooltip" data-bs-placement="top" title="Sky" style="background-color:#a5def8;"></li>
<li class="color-preview" data-bs-toggle="tooltip" data-bs-placement="top" title="Antique Sapphire" style="background-color:#0f77c0;"></li>
<li class="color-preview" data-bs-toggle="tooltip" data-bs-placement="top" title="Heather Navy" style="background-color:#3469b7;"></li>
<li class="color-preview" data-bs-toggle="tooltip" data-bs-placement="top" title="Cherry Red" style="background-color:#c50404;"></li>
</ul>
</div>
</div>
<div class="tab-pane fade" id="customize" role="tabpanel" tabindex="0">
<div class="mt-3">
<p class="lead">Insert Text:</p>
<div class="input-group">
<input type="text" class="form-control" aria-label="Add Text Here" placeholder="Add Text Here...">
<span class="input-group-text">
<button id="add-text" class="no-border" title="Add text"><i class="fa-solid fa-share"></i></button>
</span>
</div>
</div>
<div class="mt-3">
<p class="lead">Add Picture:</p>
<div class="row w-100 text-center">
<div class="col-6">
<img src="images/bia-andrade-PO8Woh4YBD8-unsplash.jpg" class="img-fluid mx-auto d-block wd-adjust rounded" data-bs-toggle="tooltip" data-bs-placement="bottom" alt="Patterns by Bia Andrade" title="Patterns by Bia Andrade" style="cursor:pointer;">
</div>
<div class="col-6">
<img src="images/henrik-donnestad-t2Sai-AqIpI-unsplash.jpg" class="img-fluid mx-auto d-block wd-adjust rounded" data-bs-toggle="tooltip" data-bs-placement="bottom" alt="Wave by Henrik Dønnestad" title="Wave by Henrik Dønnestad" style="cursor:pointer;">
</div>
<div class="col-6">
<img src="images/jezael-melgoza-7H77FWkK_x4-unsplash.jpg" class="img-fluid mx-auto d-block wd-adjust rounded" data-bs-toggle="tooltip" data-bs-placement="bottom" alt="Tokyo Tower by Jezael Melgoza" title="Tokyo Tower by Jezael Melgoza" style="cursor:pointer;">
</div>
<div class="col-6">
<img src="images/nasa-rTZW4f02zY8-unsplash.jpg" class="img-fluid mx-auto d-block wd-adjust rounded" data-bs-toggle="tooltip" data-bs-placement="bottom" alt="Galaxy by NASA" title="Galaxy by NASA" style="cursor:pointer;">
</div>
<div class="col-6">
<img src="images/nasa-Yj1M5riCKk4-unsplash.jpg" class="img-fluid mx-auto d-block wd-adjust rounded" data-bs-toggle="tooltip" data-bs-placement="bottom" alt="Astronaut by NASA" title="Astronaut by NASA" style="cursor:pointer;">
</div>
<div class="col-6">
<img src="images/orfeas-green-G5A5ZNjS2tE-unsplash.jpg" class="img-fluid mx-auto d-block wd-adjust rounded" data-bs-toggle="tooltip" data-bs-placement="bottom" alt="Pattens by Orfeas Green" title="Pattens by Orfeas Green" style="cursor:pointer;">
</div>
</div>
<div class="mt-3">
<label for="formFile" class="form-label">Upload Custom Picture</label>
<input class="form-control" type="file" id="formFile">
</div>
<p class="mt-3">
<em>
<small class="copyright">
Images by:
<underline><a href="https://unsplash.com/@justbia">Bia Andrade</a></underline>,
<underline><a href="https://unsplash.com/@spaceboy">Henrik Dønnestad</a></underline>,
<underline><a href="https://unsplash.com/@jezar">Jezael Melgoza</a></underline>,
<underline><a href="https://unsplash.com/@nasa">NASA</a></underline>, and
<underline><a href="https://unsplash.com/@orpheusmss">Orfeas Green</a></underline>.
All images used in this project are licensed under <a href="https://unsplash.com/license">Unsplash</a>. Please visit <a href="https://unsplash.com">unsplash.com</a> to learn more.
</small>
</em>
</p>
</div>
</div>
</div>
</div>
<div class="col-6">
T-Shirt Preview
</div>
<div class="col">
T-Shirt Price
</div>
</div>
</div>
</body>
<script>
const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]')
const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl))
</script>
</html>
|
|
