-
Notifications
You must be signed in to change notification settings - Fork 0
/
create.html
134 lines (134 loc) · 7.66 KB
/
create.html
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Moodshrooms</title>
<!-- Bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
<!-- Axios -->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css?family=Amatic+SC|Indie+Flower" rel="stylesheet">
<!-- Local Styles & Scripts -->
<link rel="stylesheet" href="styles/main.css">
<script defer src="scripts/main.js"></script>
<script defer src="scripts/pages/create.js"></script>
<script src="scripts/helpers/form-helpers.js"></script>
<script src="scripts/helpers/shroom-helpers.js"></script>
<script src="scripts/templates/shroom-card.js"></script>
<script src="scripts/templates/navbar.js"></script>
</head>
<body style='background-image: url("./images/bkgs/goran-vucicevic-180641.jpg")'>
<nav class="navbar navbar-expand-sm navbar-dark bg-success sticky-top">
<a class="navbar-brand" href="index.html">Moodshrooms</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<!-- This section is generated. -->
</div>
</nav>
<main>
<div id="bkg-credit">
<a style="background-color:black;color:white;text-decoration:none;padding:4px 6px;font-family:-apple-system, BlinkMacSystemFont, "San Francisco", "Helvetica Neue", Helvetica, Ubuntu, Roboto, Noto, "Segoe UI", Arial, sans-serif;font-size:12px;font-weight:bold;line-height:1.2;display:inline-block;border-radius:3px;" href="https://unsplash.com/@goranvuc?utm_medium=referral&utm_campaign=photographer-credit&utm_content=creditBadge" target="_blank" rel="noopener noreferrer" title="Download free do whatever you want high-resolution photos from Goran Vučićević"><span style="display:inline-block;padding:2px 3px;"><svg xmlns="http://www.w3.org/2000/svg" style="height:12px;width:auto;position:relative;vertical-align:middle;top:-1px;fill:white;" viewBox="0 0 32 32"><title></title><path d="M20.8 18.1c0 2.7-2.2 4.8-4.8 4.8s-4.8-2.1-4.8-4.8c0-2.7 2.2-4.8 4.8-4.8 2.7.1 4.8 2.2 4.8 4.8zm11.2-7.4v14.9c0 2.3-1.9 4.3-4.3 4.3h-23.4c-2.4 0-4.3-1.9-4.3-4.3v-15c0-2.3 1.9-4.3 4.3-4.3h3.7l.8-2.3c.4-1.1 1.7-2 2.9-2h8.6c1.2 0 2.5.9 2.9 2l.8 2.4h3.7c2.4 0 4.3 1.9 4.3 4.3zm-8.6 7.5c0-4.1-3.3-7.5-7.5-7.5-4.1 0-7.5 3.4-7.5 7.5s3.3 7.5 7.5 7.5c4.2-.1 7.5-3.4 7.5-7.5z"></path></svg></span><span style="display:inline-block;padding:2px 3px;">Goran Vučićević</span></a>
</div>
<br>
<div class="container">
<div class="card create-card translucent">
<h4 class="card-header">
Grow a New Moodshroom!
</h4>
<div class="container">
<div class="row">
<div class="col-md">
<div class="card-body">
<form id="create-shroom-form">
<div class="form-group">
<label for="name">'Shroom Name</label>
<input type="text" class="form-control form-control-sm" id="name" placeholder="name" required>
</div>
<div class="form-row">
<div class="form-group col-md">
<label for="cap">Cap</label>
<select class="form-control form-control-sm" id="cap">
<!-- Cap options -->
</select>
</div>
<div class="form-group col-md">
<label for="base">Stem</label>
<select class="form-control form-control-sm" id="base">
<!-- Base options -->
</select>
</div>
</div>
<div class="form-row">
<div class="form-group col-md">
<label for="eyes">Eyes</label>
<select class="form-control form-control-sm" id="eyes">
<!-- Eyes options -->
</select>
</div>
<div class="form-group col-md">
<label for="eyeballs">Eyeballs</label>
<select class="form-control form-control-sm" id="eyeballs">
<!-- Eyeball options -->
</select>
</div>
</div>
<div class="form-row">
<div class="form-group col-md">
<label for="eyebrows">Eyebrows</label>
<select class="form-control form-control-sm" id="eyebrows">
<option value="1">None</option>
<!-- Eyebrow options -->
</select>
</div>
<div class="form-group col-md">
<label for="mouth">Mouth</label>
<select class="form-control form-control-sm" id="mouth">
<option value="1">None</option>
<!-- Mouth options -->
</select>
</div>
</div>
<div class="form-group">
<label for="flourish">Detail</label>
<select class="form-control form-control-sm" id="flourish">
<option value="1">None</option>
<!-- Flourish options -->
</select>
</div>
<div class="form-row">
<div class="form-group col-md">
<label for="color1">Cap Color 1</label>
<input type="color" id="color1" value="#ffffff">
</div>
<div class="form-group col-md">
<label for="color1">Cap Color 2</label>
<input type="color" id="color2" value="#ffffff">
</div>
</div>
<div id="submit-message" class="form-row justify-content-md-center">
<button type="submit" class="btn btn-success">Create Shroom</button>
</div>
</form>
</div>
</div>
<div class="col-md-auto">
<br>
<div class="shroom-preview">
<!-- Moodshroom preview card goes here -->
</div>
<br>
</div>
</div>
</div>
</div>
</div>
<br>
</main>
</body>
</html>