-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
216 lines (202 loc) · 9.35 KB
/
index.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
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
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
<!DOCTYPE html>
<html>
<head>
<title>Snippets Application</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Do not add `link` tags-->
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
<!-- Do not add `script` tags-->
<script src="public/vendor.js" type="text/javascript" charset="utf-8" defer></script>
<script src="public/application.js" type="text/javascript" charset="utf-8" defer></script>
<!-- Font Awesome -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
<!-- Google Fonts -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap">
<!-- Bootstrap core CSS -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet">
<!-- Material Design Bootstrap -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.19.1/css/mdb.min.css" rel="stylesheet">
</head>
<body>
<!-- blue layout front page -->
<div class="max-vh-100 first-page">
<div class="header container">
<div class="logo">
<span>
<h1>Snippets
< />
</h1>
</span>
</div>
<nav>
<!-- <li class="change-password-container"><a href="#">Change Password</a></li> -->
<li id="sign-out" class=" modal-test" data-toggle="modal" data-target="#exampleModal"> <a>Sign out</a></li>
</nav>
<!-- <button type="button" class="btn btn-primary modal-test" data-toggle="modal" data-target="#exampleModal">
Launch demo modal
</button> -->
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header bg-md text-light font-weight-bold">
<h5 class="modal-title" id="exampleModalLabel"></h5>
<button type="button" class="close text-white" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true"> You were logged out successfully.</span>
</button>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary bg-secondary" data-dismiss="modal"> Close </button>
</div>
</div>
</div>
</div>
</div>
<div class="container" id="createAccount-loginSite">
<div class="row align-items-center box-options small-container">
<!--beginning of create account-->
<div class="col-12 col-md-4 col-size z-depth-5">
<div class="container border border-light rounded p-4 col-size">
<h4>Create an account:</h4>
<form id="create-account">
<div class="form-group">
<label for="email">Email address: </label>
<input type="email" id="email" class="form-control p-4" placeholder="email" name="credentials[email]">
</div>
<div class="form-group">
<label for="password">Password: </label>
<input type="password" id="password" class="form-control p-4" placeholder="password"
name="credentials[password]">
</div>
<div class="form-group">
<label for="password_confirmation"> Confirm Password: </label>
<input type="password" id="password_confirmation" class="form-control p-4"
placeholder="confirm password" name="credentials[password_confirmation]">
</div>
<button type="submit" class="btn btn-create-account p-3"> Create Account </button>
</form>
<div class="create-account-message my-2"></div>
</div>
</div>
<!--end of create account -->
<!--begining of login form -->
<div class="col-12 col-md-6 offset-md-1 z-depth-4 py-5 yellow-square">
<div class="sign-in unauthorized my-5 container border border-light rounded p-4 col-size">
<form id="sign-in">
<h4>Login to your account:</h4>
<div class="form-group">
<label for="email">Email address: </label>
<input type="email" id="email" class="form-control p-4" placeholder="email" name="credentials[email]">
</div>
<div class="form-group">
<label for="password">Password: </label>
<input type="password" id="password" class="form-control p-4" placeholder="password"
name="credentials[password]">
</div>
<button type="submit" class="btn btn-login-account py-3 px-4"> Login </button>
</form>
<div class="sign-in-message-success mt-4"></div>
<div class="sign-in-message-error mt-4"></div>
</div>
</div>
<!--end of login form-->
</div>
</div>
</div>
<!-- beginning of page 2-->
<div class="container second-page pb-5">
<div class="user-greetings orange py-2 my-2">
<h2> Welcome to the website user</h2>
</div>
<div class="row">
<!--blabla-->
<div class="col-md-7 snippets-container z-depth-4 pt-4 pb-2 rounded-lg card-1" id="snippets">
<h4 class="py-4">Create an snippet:</h4>
<form id="create-snip">
<div class="form-group">
<label for="type">Language Type: </label>
<input type="text" id="type" class="form-control p-4"
placeholder="please enter the type of script {html, css, javascript.}" name="snippet[type]">
</div>
<div class="form-group">
<label for="information"> Information about the snippet: </label>
<input type="text" id="information" class="form-control p-4"
placeholder="please enter the information about the snippet." name="snippet[information]">
</div>
<div class="form-group">
<label for="content">Content: </label>
<textarea id="content" class="form-control p-4" placeholder="please enter the content of the script."
name="snippet[content]"></textarea>
</div>
<button type="submit" class="btn btn-create-account p-3 modal-test" data-toggle="modal"
data-target="#createsnipModal"> Create snippet </button>
<span class="create-snip-message my-4"></span>
</form>
</div>
<div class="col-md-4 offset-md-1 card-2 z-depth-4">
<div class="change-password-container authorized my-5 py-5 px-2">
<form id="change-password">
<h4 class="py-4 text-center">Change Password</h4>
<div class="form-group">
<label for="password"> Old Password: </label>
<input type="password" id="password" class="form-control p-4" placeholder="Enter your old password"
name="passwords[old]">
</div>
<div class="form-group">
<label for="password"> New Password: </label>
<input type="password" id="password" class="form-control p-4" placeholder="Please enter your new password"
name="passwords[new]">
</div>
<button type="submit" class="btn p-3 btn-change-password"> Change Password </button>
</form>
<div class="change-password-message pt-3 text-center"></div>
</div>
</div>
</div>
<!--Snippets view and search-->
<div class="allsnipMessage my-2 py-2 pl-3"></div>
<div class="updateMessage my-2 py-2 pl-3"></div>
<div class="viewOptions">
<div class="viewAll" id="snippets-cards"><a href="#"> All Snippets</a> </div>
<!-- <div class="seachSnip">Search for a snippet</div> -->
</div>
</div>
<!--grid with options goes here ... because i want to use small-container instead-->
<div class="viewFullSnips">
</div>
<div class="master-image">
<!-- user is inside the website-->
<div class="user-dashboard">
<!-- update snippet -->
<div class="container snippets-container-update" id="snippets">
<h4>Update an snippet:</h4>
<form id="update-snip">
<div class="form-group">
<label for="type">Language Type: </label>
<input type="text" id="type" class="form-control p-4"
placeholder="please enter the type of script {html, css, javascript.}" name="snippet[type]">
</div>
<div class="form-group">
<label for="information"> Information about the snippet: </label>
<input type="text" id="information" class="form-control p-4"
placeholder="please enter the information about the snippet." name="snippet[information]">
</div>
<div class="form-group">
<label for="content">Content: </label>
<textarea id="content" class="form-control p-4" placeholder="please enter the content of the script."
name="snippet[content]">
</textarea>
</div>
<button type="submit" class="btn btn-info btn-update-snip p-3" data-toggle="modal"
data-target="#basicExampleModal"> Update snippet </button>
<div class="create-snip-message my-4"></div>
</form>
</div>
</div>
</div>
<!-- End of Main Page website -->
</body>
</html>