-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
executable file
·184 lines (157 loc) · 5.85 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
<!DOCTYPE html>
<html>
<head>
<title>Loops & Purls</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">
<link href="https://fonts.googleapis.com/css?family=Delius+Unicase|Montez" rel="stylesheet">
<!-- 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>
</head>
<body class="container-fluid">
<h1>Loops & Purls</h1>
<br></br>
<!-- navbar -->
<div class="tab">
<button id="landingPageBtn" class="tablinks">Welcome</button>
<button id="aboutPageBtn" class="tablinks">About</button>
<button id="chartPageBtn" class="tablinks">Chart Maker</button>
<button id="myPatternsPageBtn" class="tablinks">Your Patterns</button>
</div>
<br></br>
<!-- div one -->
<div id="landingPage" class="tabcontent">
<div class="row">
<div class="col-md-2 sidebar">
<p id="message"></p>
<h2>Symbol Key</h2>
<ul>
<li> - : Knit</li>
<li> . : Purl</li>
<li> / : K2Tog</li>
<li> \ : SSK</li>
<li> O : Yarn Over</li>
<li> ^ : Sl1, K2Tog, PSSO</li>
</ul>
<br></br>
<button type="button" class="sign-out">Sign Out</button>
<br></br>
</div>
<div class="col-md-10 content">
<div class="row text-center">
<h3 class="col-md-12">Welcome!</h3>
</div>
<p>Sign In or Sign Up to Save Your Patterns</p>
<form id="sign-up" class="sign-up">
<fieldset>
<legend>Sign Up Below</legend>
<input class="email-textbox" type="text" name="credentials[email]" placeholder="Email">
<br><br>
<input class="pass-textbox" type="password" name="credentials[password]" placeholder="Create Password">
<br><br>
<input class="pass-confirm-textbox" type="password" name="credentials[password_confirmation]" placeholder="Confirm Password">
<br><br>
<button class="sign-up-button btn-default" id="sign-up-button" type="submit" name="submit" value="Sign Up!">Sign Up!</button>
</fieldset>
</form>
<form id="sign-in" class="sign-in">
<fieldset>
<legend>Login Below</legend>
<input class="email-textbox" type="text" name="credentials[email]" placeholder="Email">
<br><br>
<input class="pass-textbox" type="password" name="credentials[password]" placeholder="Password">
<br><br>
<button class="sign-in-button btn-default" type="submit" id="sign-in-button" name="submit" value="Sign In!">Sign In!</button>
</fieldset>
<br></br>
</form>
</div>
</div>
</div>
<div id="aboutPage" class="tabcontent">
<div class="row">
<div class="col-md-2 sidebar">
<h2>Symbol Key</h2>
<ul>
<li> - : Knit</li>
<li> . : Purl</li>
<li> / : K2Tog</li>
<li> \ : SSK</li>
<li> O : Yarn Over</li>
<li> ^ : Sl1, K2Tog, PSSO</li>
</ul>
<br></br>
<button type="button" class="sign-out">Sign Out</button>
<br></br>
</div>
<div class="col-md-10 content">
<div class="row text-center">
<h3 class="col-md-12 header">About The Site!</h3>
</div>
<br></br>
<p class="aboutpara">This web app was developed to help knitters who want to take pattern creation into their own hands! You can make a standard 10x10 graph pattern and be able to save and update it's title. Soon you can even print out your pattern into an easily readable paragraph for those who have trouble with charts. Unfortunately there is only one pattern size at the moment but soon I will add updates that add different pattern sizes and a screen shot option so you can save a copy of your pattern right to your computer! As more updates come up and new features get added please check back to see what’s in store!</p>
</div>
<br></br>
<br></br>
<br></br>
</div>
</div>
<div id="chartPage" class="tabcontent">
<div class="row">
<div class="col-md-2 sidebar">
<h2>Symbol Key</h2>
<ul>
<li> - : Knit</li>
<li> . : Purl</li>
<li> / : K2Tog</li>
<li> \ : SSK</li>
<li> O : Yarn Over</li>
<li> ^ : Sl1, K2Tog, PSSO</li>
</ul>
<br></br>
<button type="button" class="sign-out">Sign Out</button>
<br></br>
</div>
<div class="col-md-10 content">
<div class="row text-center">
<h3 class="col-md-12 header">Let's Get Designing!</h3>
</div>
<div id="empty-pattern-write-up">
</div>
<button id="compileBtn" class="btn-default" name="compilePattern" value="Compile">Compile</button>
<div id="chart" class="chart">
</div>
</div>
</div>
</div>
<div id="myPatternsPage" class="tabcontent">
<div class="row">
<div class="col-md-2 sidebar">
<h2>Symbol Key</h2>
<ul>
<li> - : Knit</li>
<li> . : Purl</li>
<li> / : K2Tog</li>
<li> \ : SSK</li>
<li> O : Yarn Over</li>
<li> ^ : Sl1, K2Tog, PSSO</li>
</ul>
<br></br>
<button type="button" class="sign-out">Sign Out</button>
<br></br>
</div>
<div class="col-md-10 content">
<div class="row text-center">
<h3 class="col-md-12 header">Here Are Your Patterns!</h3>
</div>
<div id="empty-pattern-list"></div>
</div>
</div>
</div>
<footer class="footer">
Created & Designed by Hadley Sweck (2017)
</footer>
</body>
</html>