-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
137 lines (117 loc) · 6.93 KB
/
index.html
File metadata and controls
137 lines (117 loc) · 6.93 KB
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AI Autocorrect Tool</title>
<!-- Google Font -->
<style>
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
</style>
<!-- Link to your local CSS file -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- Background Animation Container -->
<div class="gradient-bg"></div>
<div id="particles-container"></div>
<!-- Main Container -->
<div class="main-card">
<!-- Header -->
<div class="header-container">
<svg class="header-icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" d="M9.813 15.904L9 18.75l-.813-2.846a4.5 4.5 0 00-3.09-3.09L2.25 12l2.846-.813a4.5 4.5 0 003.09-3.09L9 5.25l.813 2.846a4.5 4.5 0 003.09 3.09L15.75 12l-2.846.813a4.5 4.5 0 00-3.09 3.09zM18.259 8.715L18 9.75l-.259-1.035a3.375 3.375 0 00-2.455-2.456L14.25 6l1.036-.259a3.375 3.375 0 002.455-2.456L18 2.25l.259 1.035a3.375 3.375 0 002.456 2.456L21.75 6l-1.035.259a3.375 3.375 0 00-2.456 2.456zM16.894 20.567L16.5 21.75l-.394-1.183a2.25 2.25 0 00-1.423-1.423L13.5 18.75l1.183-.394a2.25 2.25 0 001.423-1.423L16.5 15.75l.394 1.183a2.25 2.25 0 001.423 1.423l1.183.394-1.183.394a2.25 2.25 0 00-1.423 1.423z" />
</svg>
<h1 class="header-title">
<span>AI-Driven</span> <span>AutoCorrect</span> <span>Tool</span>
</h1>
</div>
<!-- Subtitle -->
<p class="subheader">
<span>Correct</span> <span>grammar</span> <span>and</span> <span>spelling</span> <span>in</span> <span>your</span> <span>emails,</span> <span>letters,</span> <span>and</span> <span>documents</span>.
</p>
<!-- Error Message Box -->
<div id="error-message" class="hidden" role="alert">
<strong>Error: </strong>
<span id="error-text">Something went wrong.</span>
</div>
<div>
<!-- Input Column -->
<div>
<label for="input-text">Let Me Test It. <span>😋</span></label>
<textarea id="input-text" rows="10" placeholder="Paste your text here..."></textarea>
<div id="input-display" class="hidden"></div>
</div>
<!-- Button Container -->
<div class="button-container">
<!-- Correct Button -->
<button id="correct-btn" class="button">
<!-- Check Icon in a box -->
<span id="check-icon-box" class="icon-box">
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 16 16">
<path d="M10.97 4.97a.75.75 0 0 1 1.07 1.05l-3.99 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425a.267.267 0 0 1 .02-.022z"/>
</svg>
</span>
<!-- Loader SVG -->
<svg id="loader" class="hidden" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
</svg>
<span id="correct-btn-text">Correct Text</span>
</button>
<!-- Clear Button -->
<button id="clear-btn" class="button hidden">
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 16 16">
<path d="M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0V6z"/>
<path fill-rule="evenodd" d="M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1v1zM4.118 4 4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4H4.118zM2.5 3V2h11v1h-11z"/>
</svg>
Clear
</button>
</div>
<!-- Output Column -->
<div id="output-container" class="hidden">
<div class="output-header">
<label for="output-text">Corrected Text. <span> 👇</span></label>
<!-- Copy Button -->
<button id="copy-btn" class="hidden">
<span class="copy-icon"><b>⋉</b></span>
<span>Copy</span>
</button>
</div>
<!-- Copy success message -->
<span id="copy-msg" class="hidden">Copied to Clipboard!</span>
<!-- Output textarea -->
<textarea id="output-text" rows="8" readonly placeholder="Corrections will appear here..."></textarea>
<!-- NEW: Tone Changer Section -->
<div id="tone-changer-container" class="hidden">
<label class="tone-label">
✨ Change Tone
<!-- Tone-specific loader -->
<svg id="tone-loader" class="hidden" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
</svg>
</label>
<div class="button-container tone-buttons">
<button id="btn-professional" class="button button-secondary">
<span class="tone-icon">💼</span> Make Professional
</button>
<button id="btn-friendly" class="button button-secondary">
<span class="tone-icon">😊</span> Make Friendlier
</button>
<button id="btn-concise" class="button button-secondary">
<span class="tone-icon">✂️</span> Make Concise
</button>
</div>
</div>
</div>
</div>
<!-- Footer -->
<p class="footer">
Designed by Ar.®
</p>
</div>
<!-- Link to your frontend JavaScript file -->
<script src="script.js"></script>
</body>
</html>