This repository has been archived by the owner on May 5, 2023. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathhelp.html
180 lines (166 loc) · 7.57 KB
/
help.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
<!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>Help</title>
<link rel="stylesheet" href="styles.css" />
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-default navbar-static-top">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">Easter Basket</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-left">
<li class="nav-item"><a href="index.html">Home</a></li>
<li class="nav-item"><a href="files.php">Files</a></li>
<li class="nav-item active"><a href="help.html">Help</a></li>
</ul>
</div>
</div>
</nav>
<div class="container">
<h1>Page Contents</h1>
<ul class="list-group">
<li class="list-group-item"><a href="#desc">Description</a></li>
<li class="list-group-item"><a href="#checklist">Checklist</a></li>
<li class="list-group-item"><a href="#css">CSS</a></li>
<li class="list-group-item"><a href="#usage">Usage</a></li>
</ul>
<h2 class="desc">Description</h2>
<p>
Adam Kraus <br />
CSC 468 - GUI Programming<br />
Due: March 30, 2023
</p>
<h2 id="checklist">Checklist</h2>
<p>✓ *Grading tags completed</p>
<!-- ✓ ✕ -->
<h3>Undo/redo pattern (tier-less)* 36</h3>
<p>
✓ a. Undo/redo OOP followed <br />
✓ b. Able to do at least 1 undo/redo for change <br />
✓ c. Able to do at least 1 undo/redo for 1 preconfigured change <br />
✓ d. Able to do at least 5 undo/redo for change <br />
✓ f. Able to do at least 5 undo/redo for 1 preconfigured change
</p>
<h3>1. Tier: Basic content 36</h3>
<p>
✓ a. All 3 pages present <br />
✓ b. Header in all pages in correct spot <br />
✓ c. Nav bar in all pages in correct spot <br />
✓ d. All interaction buttons added to main page in correct spot <br />
✓ e. Properly display the default content in main page in correct spot <br />
✓ f. At minimum, a place holder for file upload/load/download in file page in correct spot <br />
✓ h. All headings added to Help page in correct order <br />
✓ i. Help page content filled in <br />
✓ j. Within page link help page working
</p>
<h3>2a. Basic application tasks 24</h3>
<p>
✓ a. Able to change/confirm goody <br />
✓ b. Able to change basket only <br />
✓ c. New row still work <br />
✓ d. Able to delete goodies properly <br />
</p>
<h3>2b. CSS rules* 18</h3>
<p>
✓ a. Background color/image <br />
✓ b. CSS header <br />
✓ c. CSS nav bar color/image <br />
✓ d. CSS <a> rule <br />
✓ f. Content border <br />
✓ g. Help heading font change
</p>
<h3>3a More advanced main page options* 15</h3>
<p>
✓ b. Able to change toy preconfigured options <br />
✓ c. Main content area unaffected by save, and stays on page <br />
</p>
<h3>3b Tier: Files 40</h3>
<p>
✓ a. Able to save the current content (must show in file page) <br />
✓ c. Able to download at least one file (default is ok) <br />
✓ d. Able to download an application generated file <br />
✓ e. Able to upload a file <br />
✓ f. Loading a file redirects back to the main page <br />
✓ g. Loading properly displays with some file <br />
✓ h. Loading properly displays with app generated file <br />
✓ i. Able to save, download, upload, and load that same file
</p>
<h3>4 Tier: Extensions 30</h3>
<!-- DONE -->
Extension 1: 1a 5pts CSS feature
<p>
I used CSS flexbox for displaying the basket and goodies. The basket gets the whole width and each goody gets 1/6 of the width. Flexbox easily
allows me to set how items wrapped, which is done left to right, then upwards. I knew about flexbox before, and used
<a href="https://css-tricks.com/snippets/css/a-guide-to-flexbox/">CSS Flexbox Guide</a> to help. The basket and goodies are all contained within
the same flexbox.
</p>
<!-- DONE -->
Extension 2: 1b 5pts Fancy background
<p>
I made the page background a gradient using CSS, which I used <a href="https://cssgradient.io/">CSS Gradient</a> to design. It fades from
#b2bec3 to #81ecec at the bottom of the page.
</p>
<!-- DONE -->
Extension 3: 2d 10pts Drag and drop uploading
<p>
You can drag and drop files to upload them on the file management page. You can drag a file into the noted area and it will automatically be
uploaded.
</p>
<!-- DONE -->
Extension 4: 2i 5pts Standard form selections
<p>I added a combo box to select which goody is being added, and then an add egg button to add the selected goody.</p>
<!-- DONE -->
Extension 5: 3a 5pts 3 more goodies
<p>I added 2 goodies, pale and dirt eggs, and a grey basket option.</p>
<h2 id="css">CSS</h2>
<ol type="a">
<li>Background color/image</li>
<p>
<strike>
The background color for pages is set to #b2bec3, and the colors were chosen from
<a href="https://flatuicolors.com/palette/us">Color Palette</a>
</strike>
<br />
The above was before extensions. The new background is described above for Extension 2.
</p>
<li>CSS header</li>
<p>On each page there is a header made with bootstrap, and I put a custom text shadow on the text.</p>
<li>CSS nav bar color/image</li>
<p>The navigation bar background color is set to #81ecec.</p>
<li>CSS <a> rule</li>
<p>On visited links, the text is set to black.</p>
<li>Content border</li>
<p>There is a 2px solid black border around the main content of each page.</p>
<li>Help heading font change</li>
<p>The font of headings is changed to <a href="https://fonts.google.com/specimen/Oswald">Oswald</a>.</p>
</ol>
<h2 id="usage">Usage</h2>
<p>
On the main page, you can add new goodies and change the basket. If the last goody is not confirmed, it is changed, otherwise a new goody is
added. The basket can be changed at any time. You can also choose from a few presets of baskets and goodies. You can remove the last good, which
I interpreted to only be able to be done if it is unconfirmed.
<br />
You can save the current state of the basket, not including unconfirmed goodies, with a name of your choosing. After being saved, they can be
viewed on the file page.
</p>
<p>
The file page shows a place to upload files, and a list of every file currently saved. For each saved preset, you can load it, forwarding you to
the home page and setting the preset, and download the preset. The extension for files is .basket (just a text file), and is checked on file uploading. To upload a
file, you can browse for the file you want and click upload, or drag it into the noted area and it will automatically upload.
<br>
The test.basket file that is there at the start is just so I could include my /server/ directory in my submission, otherwise I couldn't include an empty
directory. It holds no purpose other than that.
</p>
<p>No known bugs</p>
</div>
</body>
</html>