generated from chalu/holiday-challenge-template
-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathredact.html
271 lines (264 loc) · 9.6 KB
/
redact.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
<!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>Name of chosen challenge</title>
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="style.css" />
<script
src="https://kit.fontawesome.com/cf44f28357.js"
crossorigin="anonymous"
></script>
</head>
<body>
<header class="header">
<!-- <div class="header__content"></div> -->
<div class="header__itemContainer">
<div class="header__bar header__item">
<span class="header__bar--burger"></span>
</div>
<div class="header__left header__item">
<a href="index.html"
><img class="header__logoImg" src="images/logo.svg" alt="logo"
/></a>
</div>
<nav class="header__right header__item header__nav">
<ul class="header__listContainer">
<li class="header__listItem">
<a href="redact.html" class="header__link active"
>Use redactApp</a
>
</li>
<li class="header__listItem">
<a onclick="return false" href="#contact" class="header__link"
>Contact</a
>
</li>
</ul>
</nav>
</div>
</header>
<main class="redact-section">
<div class="redact__content app__input">
<div class="redact__header">
<h1 class="redact__title">Enter your text</h1>
<p class="redact__text">
Select specific words to hide in your tweet with redactrApp
</p>
</div>
<div class="redact__body">
<div class="redact__left">
<div class="scan__words">
<i class="fa-solid fa-barcode icon"></i>
<p class="scan__words--text">
Scanned <span class="break">words</span>
</p>
</div>
<div class="execution__time">
<i class="fas fa-clock icon icon--blue"></i>
<p class="execution__time--text">
Execution <span class="break">time</span>
</p>
</div>
</div>
<div class="redact__field">
<form class="redact__form">
<textarea
rows="15"
id="input-text"
class="redact__textarea"
placeholder="Enter your text here..."
></textarea>
<!-- text to hide -->
<input
id="remove-text"
class="redact__input"
type="text"
placeholder="Enter your text to hide"
required
/>
<!-- Input your sybol text field -->
<input
id="your-symbol"
class="redact__input"
type="text"
placeholder="Enter your symbol"
required
/>
<div class="redact__btnContainer">
<button class="redact__btn resultbtn app__btn" id="resultBtn">
<span class="redact__btn--text">Redact Now</span>
<span class="redact__btn--icon">
<i class="fas fa-arrow-right"></i>
</span>
</button>
</div>
</form>
</div>
<div class="redact__right">
<div class="matched__words">
<!-- font awesome for scanner -->
<i class="fa-solid fa-circle-check icon"></i>
<p class="matched__words--text">
Matched <span class="break">words</span>
</p>
</div>
<div class="scrambled__words">
<!-- font awesome for clock -->
<i class="fa-solid fa-hand-scissors icon icon--blue"></i>
<p class="scrambled__words--text">
Scrambled <span class="break">words</span>
</p>
</div>
</div>
</div>
</div>
<div class="app__output switch">
<div class="resultbtn app__closeBtn" id="close-result-btn">
<span class="app__closeBtn--burger"></span>
</div>
<div class="app__output--content">
<div class="app__result">
<div class="app__result--left">
<div class="app__scan">
<div class="app__scan--wrap">
<p class="app__scan--text">
Scanned <span class="break">words</span>
</p>
<i class="fa-solid fa-barcode icon--green"></i>
</div>
<p class="app__scan--number">
<span class="app__scan--number--text app__totalWords"></span>
</p>
</div>
<div class="app__matched">
<div class="app__matched--wrap">
<p class="app__matched--text">
Matched <span class="break">words</span>
</p>
<i class="fa-solid fa-circle-check icon--blue"></i>
</div>
<p class="app__matched--number">
<span
class="app__matched--number--text app__totalMatch"
></span>
</p>
</div>
</div>
<div class="app__result--output">
<!-- insert text area -->
<textarea
disabled="disabled"
rows="15"
class="app__result--textarea"
placeholder=""
></textarea>
<div class="app__result--btnContainer app__copyBtn">
<span class="app__result--btn--icon">
<img src="images/copy.svg" alt="copy" />
</span>
</div>
</div>
<div class="app__result--right">
<div class="app__execution">
<div class="app__execution--wrap">
<i class="fas fa-clock icon icon--green"></i>
<p class="app__execution--text">
execution <span class="break">time</span>
</p>
</div>
<p class="app__execution--number">
<span
class="app__execution--number--text app__totalTime"
></span>
</p>
</div>
<div class="app__scrambled">
<div class="app__scrambled--wrap">
<i class="fa-solid fa-circle-check icon--blue"></i>
<p class="app__scrambled--text">
Scrambled <span class="break">words</span>
</p>
</div>
<p class="app__scrambled--number">
<span
class="app__scrambled--number--text app__totalScrambled"
></span>
</p>
</div>
</div>
</div>
<!--Share social media -->
<div class="app__result--share">
<div class="app__result--share--wrap">
<p class="app__result--share--text">
Share your result with your friends
</p>
<div class="app__result--share--icons">
<i class="fa-brands fa-telegram icon"></i>
<i class="fab fa-twitter icon"></i>
<i class="fa-brands fa-whatsapp icon"></i>
</div>
</div>
</div>
</div>
</div>
</main>
<footer id="Contact" class="footer">
<div class="footer__content">
<div id="footer__content--container">
<div>
<a href="index.html"
><img src="images/logo-footer.svg" alt="" class="footer__logo"
/></a>
</div>
<div class="footmain">
<div class="footmain__item">
<h2 class="title">Features</h2>
<ul>
<li><a href="#">Scanned Words</a></li>
<li><a href="#">Execution Time</a></li>
<li><a href="#">Scrambled Words</a></li>
<li><a href="">Matched Scrambled Words</a></li>
</ul>
</div>
<div class="footmain__item">
<h2>Support</h2>
<ul>
<li><a href="#">Account</a></li>
<li><a href="#">Help</a></li>
<li><a href="#">Contact Us</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div>
<div class="footmain__item">
<h2>Legal</h2>
<ul>
<li><a href="#">Privacy Policy</a></li>
<li><a href="#">Terms of Use</a></li>
<li><a href="#">Terms of Use</a></li>
<li><a href="#">Terms of Use</a></li>
</ul>
</div>
<div class="footmain__item">
<h2>Social Media</h2>
<ul>
<li><a href="#">Twitter</a></li>
<li><a href="#">LinkedIn</a></li>
<li><a href="#">Instagram</a></li>
<li><a href="#">Github</a></li>
</ul>
</div>
</div>
</div>
<hr class="hr" />
<summary class="copyright">Copyright 2022 ©redactrApp</summary>
</div>
</footer>
<!-- // ============= EEND DO NOT EDIT ============== // -->
<script src="index.mjs" type="module"></script>
<!-- // ============= EEND DO NOT EDIT ============== // -->
</body>
</html>