-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathREADME.html
317 lines (284 loc) · 11.4 KB
/
README.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
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Flashcard App - Read Me</title>
<link href="https://fonts.googleapis.com/css2?family=Dancing+Script&display=swap" rel="stylesheet">
<style>
/* Global and Layout Styles */
body {
background-color: #0B0F1C;
color: #EAEAEA;
font-family: 'Arial', sans-serif;
display: flex;
flex-direction: column;
align-items: center;
min-height: 100vh;
margin: 0;
padding: 0;
overflow-x: hidden;
transition: background-color 0.3s, color 0.3s;
}
/* Header Styles */
header {
width: 100%;
background-color: #1F2A44;
padding: 10px 20px;
display: flex;
justify-content: center;
align-items: center;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
position: fixed;
top: 0;
left: 0;
z-index: 1000;
box-sizing: border-box;
}
header h1 {
margin: 0;
font-size: 1.8rem;
}
/* Main Content Styles */
.content {
margin-top: 80px; /* To account for the fixed header */
max-width: 800px;
padding: 20px;
box-sizing: border-box;
width: 100%;
}
h2 {
color: #007BFF;
border-bottom: 2px solid #0056b3;
padding-bottom: 5px;
}
p {
line-height: 1.6;
margin: 15px 0;
}
ul {
list-style-type: disc;
margin-left: 20px;
}
/* Button Styles */
.button {
padding: 10px 20px;
font-size: 1rem;
cursor: pointer;
color: #EAEAEA;
background: linear-gradient(145deg, #007BFF, #0056b3);
border: none;
border-radius: 5px;
transition: background-color 0.3s, transform 0.1s;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
text-decoration: none;
display: inline-block;
margin-top: 20px;
}
.button:hover {
background: linear-gradient(145deg, #0056b3, #004b99);
transform: translateY(-2px);
}
/* Intellectual Agreement Styles */
.intellectual-agreement {
margin-top: 40px;
padding: 20px;
background-color: #1F2A44;
border-radius: 10px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
}
.intellectual-agreement h3 {
color: #FF6347;
margin-top: 0;
}
.intellectual-agreement p {
margin: 10px 0;
}
/* Footer Styles */
footer {
padding: 20px;
text-align: left;
font-size: 0.9rem;
color: rgba(234, 234, 234, 0.6); /* Slightly opaque */
border-top: 1px solid #1F2A44;
width: 100%;
box-sizing: border-box;
}
/* Responsive Design */
@media (max-width: 600px) {
header h1 {
font-size: 1.5rem;
}
.content {
padding: 10px;
}
.intellectual-agreement {
padding: 15px;
}
}
.support-section {
background-color: #1F2A44;
border: 2px solid #007BFF;
border-radius: 10px;
padding: 2rem;
margin: 2rem 0;
box-shadow: 0 4px 15px rgba(0, 123, 255, 0.3);
}
.developer-signature {
text-align: center;
}
.coffee-options {
display: flex;
justify-content: center;
gap: 1rem;
margin: 1.5rem 0;
flex-wrap: wrap;
}
.coffee-btn {
background: linear-gradient(145deg, #007BFF, #0056b3);
color: #EAEAEA;
padding: 0.8rem 1.5rem;
border-radius: 25px;
text-decoration: none;
transition: all 0.3s ease;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
}
.coffee-btn:hover {
transform: translateY(-2px);
background: linear-gradient(145deg, #0056b3, #004b99);
text-decoration: none;
}
.dev-signature {
font-family: 'Dancing Script', cursive;
color: #007BFF;
margin-top: 1.5rem;
opacity: 0.8;
font-size: 1.2rem;
}
</style>
</head>
<body>
<!-- Header -->
<header>
<h1>Flashcard App - Read Me</h1>
</header>
<!-- Main Content -->
<div class="content">
<!-- Introduction -->
<section id="introduction">
<h2>Introduction</h2>
<p>
Welcome to the Flashcard App! This tool is designed to help users create, manage, and study flashcards efficiently. Whether you're a student preparing for exams, a professional aiming to learn new skills, or someone who enjoys organizing information, this app provides a seamless experience to enhance your learning process.
</p>
</section>
<!-- Purpose -->
<section id="purpose">
<h2>Purpose</h2>
<p>
The primary purpose of the Flashcard App is to offer a user-friendly platform for creating and interacting with flashcards. By leveraging modern web technologies, the app ensures that users can focus on learning without being bogged down by complex interfaces or unreliable performance.
</p>
</section>
<!-- Features -->
<section id="features">
<h2>Features</h2>
<ul>
<li><strong>Easy Upload:</strong> Import flashcards using various formats like XLSX, CSV, or TXT.</li>
<li><strong>Interactive Flashcards:</strong> Click or use keyboard shortcuts to flip cards and view answers.</li>
<li><strong>Favorites:</strong> Mark important flashcards as favorites for quick access.</li>
<li><strong>Progress Tracking:</strong> Monitor your learning progress with real-time statistics and progress bars.</li>
<li><strong>Backup & Restore:</strong> Safeguard your flashcard sets by backing them up as ZIP files and restoring them when needed.</li>
<li><strong>Dark Mode:</strong> Toggle between light and dark themes to suit your preference.</li>
<li><strong>Responsive Design:</strong> Access and use the app seamlessly across various devices and screen sizes.</li>
</ul>
</section>
<!-- Why It Was Created -->
<section id="why">
<h2>Why It Was Created</h2>
<p>
Learning and memorization are crucial aspects of both academic and professional growth. Traditional methods, while effective, can sometimes be monotonous and inefficient. The Flashcard App was developed to provide a dynamic and engaging way to study, making the memorization process more interactive and less time-consuming.
</p>
</section>
<!-- What It's For and What It Does -->
<section id="what-it-does">
<h2>What It's For & What It Does</h2>
<p>
The app is tailored for anyone looking to enhance their learning techniques through flashcards. It allows users to:
</p>
<ul>
<li>Create customized flashcards with questions and answers.</li>
<li>Organize flashcard sets for different subjects or topics.</li>
<li>Study flashcards interactively with flip animations.</li>
<li>Track learning progress and identify areas needing improvement.</li>
<li>Backup and restore flashcard sets to prevent data loss.</li>
</ul>
</section>
<!-- How to Use It -->
<section id="how-to-use">
<h2>How to Use It</h2>
<ol>
<li><strong>Upload Flashcards:</strong> Click on the "Upload Flashcards" button and select a file in XLSX, CSV, or TXT format containing your flashcards.</li>
<li><strong>Navigate Flashcards:</strong> Use the "Next" and "Previous" buttons or arrow keys to navigate through your flashcards.</li>
<li><strong>Flip Cards:</strong> Click on a flashcard or press the spacebar to flip it and view the answer.</li>
<li><strong>Mark Favorites:</strong> Click the "Toggle Favorite" button to mark a flashcard as a favorite for easier access.</li>
<li><strong>Track Progress:</strong> Monitor your progress with the progress bar and statistics displayed.</li>
<li><strong>Backup & Restore:</strong> Use the "Backup" button to save your flashcard sets as a ZIP file and the "Restore" button to upload previously backed-up sets.</li>
<li><strong>Toggle Dark Mode:</strong> Switch between light and dark themes using the "Toggle Dark Mode" button for a comfortable viewing experience.</li>
</ol>
</section>
<!-- Example Use Case -->
<section id="example">
<h2>Example Use Case</h2>
<p>
Imagine you're a medical student preparing for your upcoming exams. You have a vast array of terms, definitions, and processes to memorize. Using the Flashcard App, you can:
</p>
<ul>
<li>Create a flashcard set containing all necessary medical terms.</li>
<li>Regularly review the flashcards, flipping them to test your memory.</li>
<li>Mark challenging terms as favorites to focus on them more frequently.</li>
<li>Track your progress to see how many terms you've mastered.</li>
<li>Backup your flashcards to ensure you don't lose any important information.</li>
</ul>
<p>
This structured approach not only makes studying more organized but also enhances retention and confidence before your exams.
</p>
</section>
<!-- Conclusion -->
<section id="conclusion">
<h2>Conclusion</h2>
<p>
The Flashcard App is a versatile tool designed to simplify and enhance the learning process. By providing essential features in an intuitive interface, it empowers users to study smarter and achieve their educational goals more effectively.
</p>
</section>
<!-- Get Started Button -->
<a href="https://sites.google.com/view/gvtechhub-kb/technician/flash-cards" class="button">Get Started with Flashcard App</a>
</div>
<!-- Intellectual Agreement -->
<div class="content intellectual-agreement">
<h3>Intellectual Agreement</h3>
<p>
This Flashcard App is intended for internal use only. As the developer, I retain all rights to this software. You are permitted to use the tool solely as instructed and approved by me. Any copying, modification, distribution, tampering, adjustment, viewing, analysis, or interpretation of this software without explicit permission is strictly prohibited.
</p>
<p>
Usage of this tool is at my discretion, and it must be utilized solely in the manner I have outlined. Any unauthorized use may result in revocation of access privileges and potential legal action.
</p>
</div>
<!-- Support Section -->
<div class="content support-section">
<h2>Support the Developer</h2>
<div class="developer-signature">
<p>👋 Hi, I'm KayWat! I created both this tool and this documentation page to help developers like you.</p>
<p>If you find this tool valuable, consider supporting my work:</p>
<div class="coffee-options">
<a href="https://www.paypal.com/donate/?hosted_button_id=J3ABMPG6MQF3L&custom=1coffee" class="coffee-btn">☕ One Coffee ($6)</a>
<a href="https://www.paypal.com/donate/?hosted_button_id=J3ABMPG6MQF3L&custom=2coffees" class="coffee-btn">☕☕ Two Coffees ($12)</a>
<a href="https://www.paypal.com/donate/?hosted_button_id=J3ABMPG6MQF3L&custom=3coffees" class="coffee-btn">☕☕☕ Three Coffees ($24)</a>
</div>
<p class="dev-signature">Made with ❤️ by KayWat</p>
</div>
</div>
<!-- Footer -->
<footer>
This Widget Webpage Tool Is Made by Chris Loetz
</footer>
</body>
</html>