vulbyteDotCom/commissions.html at main · vulbyte/vulbyteDotCom · 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
142
143
144
145
146
147
148
149
150
151
152
153
154
<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>commisions | vulbyte</title>
	<script src='/client_management.js' type="module"></script>
</head>

<body>
	<h1 class="marquee">commissions - </h1>
	<p>this is meant to be a cute little tool to help you get a commission and poke around around with what you might
		want!</p>
	<p>PLEASE NOTE: THIS IS JUST FOR ESTIMATION, THE PRICE IS NOT MEANT TO BE FINAL</p>
	<br>
	<br>
	<br>

	<fieldset id="art_style_selection">
		<style>
			.art_style_preview {
				width: 100% !important;
				overflow: hidden;
			}

			.art_style_preview>img {
				image-rendering: optimizeSpeed;
				object-fit: fill !important;
			}

			#art_style_slection>div>div>h6 {
				min-height: 2em;
			}

			#art_style_selection>div>div {
				aspect-ratio: 1/1;
				border: solid 0.5vw #555;
				border-radius: 1vw;
				margin-bottom: 0.25em;
				margin-top: 0.25em;
				margin-left: 0.25em;
				margin-right: 0.25em;
				overflow: hidden;
				width: 20vw;
				height: 35vw;
			}

			#art_style_selection>div>div>p {
				text-align: center;
				margin: auto;
				width: 100%;
			}

			.art_style_selection_title {
				height: 2.5em !important;
			}
		</style>
		<legend>to start off, let's select
			the art style you'd like:</legend>

		<div style=" display:flex; flex-direction:row; justify-content:space-around; width:80%; margin: auto; ">

			<div id="digital_2d_preview">
				<div class="art_style_preview">
					<img src="https://pbs.twimg.com/media/FgHrjyraAAA1kmI?format=jpg&name=large" alt="digital 2d art"
						style="width:25vw; height:20vw; transform:translateY(1em)">
				</div>
				<h6 class="art_style_selection_title" style="margin:auto;">digital 2d art</h6>
				<p>starting at $20</p>
				<input type="radio" style="margin: auto; width:100%; margin-top:1em; user-select:none;">
			</div>


			<div id="traditional_2d_preview">
				<div class="art_style_preview">
					<img
						src="https://cdnb.artstation.com/p/assets/images/images/034/774/359/large/insert-eti5qw-vcamyjgg.jpg?1613177828"
						alt="traditional 2d" style="transform:translateY(-3vw); height:35vw; width:20vw;">
				</div>
				<h6 class="art_style_selection_title" style="margin:auto">trad 2d art</h6>
				<p>starting at $40</p>
				<input type="radio" style="margin: auto; width:100%; margin-top:1em; user-select:none;">
			</div>

			<div id="digital_3d_preview">
				<div class="art_style_preview">
					<img
						src="https://yt3.ggpht.com/VW8zaggWr4YUkz5SdXQyMhB9BuV4ouEi4j1ZbVqWoJfScQ_mQz_wFA0tAB6G9ygO_rzQIXMjqsDj=s1358-c-fcrop64=1,10dc0000ef23ffff-rw-nd-v1"
						alt="digital 3d art" style="transform:translateY(2vw); height:20vw; width:20vw;">
				</div>
				<h6 class="art_style_selection_title" style="margin:auto;">digital 3d art</h6>
				<p>starting at $60</p>
				<input type="radio" style="margin: auto; width:100%; margin-top:1em; user-select:none;">
			</div>

			<div id="more coming soon">
				<div class="art_style_preview">
					<p style="font-size:100px; margin:auto; width:100%; text-align:center;">?</p>
				</div>
				<h6 class="art_style_selection_title" style="margin:auto;">more coming soon</h6>
			</div>

			<script type="module">
				function GEBI(string) {return document.getElementById(string)};

				let previews = {
					d_2d_p: GEBI("digital_2d_preview"),
					t_2d_p: GEBI("traditional_2d_preview"),
					d_3d_p: GEBI("digital_3d_preview"),
				}
				let selections = Object.values(previews);

				let inputs = [];
				let new_elems;
				for (let i = 0; i < selections.length; ++i) {
					new_elems = selections[i].getElementsByTagName("input");
					console.log(new_elems);
					for (let j = 0; j < new_elems.length; ++j) {
						inputs.push(new_elems[j]);
					}
				}
				console.log(inputs);

				//add event listener to each elem
				for (let i = 0; i < Object.keys(previews).length; ++i) {
					let elem = Object.values(previews)[i];
					elem.addEventListener('click', (e) => {
						console.log('input clicked');

						console.log(inputs);
						let other_elem;
						//add on click behavior
						for (let j = 0; j < inputs.length; ++j) {
							if (j == i) {
								console.log("leaviing input: " + inputs[j] + " checked [ij: " + i + j);
								inputs[j].checked = true;
								break;
							}
							inputs[j].checked = false;
						}
					});
				}


			</script>
		</div>
	</fieldset>
	<div>
	</div>
</body>

</html>