Hugging Face's logo

Spaces:
KingNish
/
Voicee
Running

App Files Community
4
KingNish commited on
Commit
3ed536d
•
1 Parent(s): 761f591

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +1 -165
index.html CHANGED
@@ -5,171 +5,7 @@
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
  <title>Voice Assistant</title>
7
  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;700&display=swap" rel="stylesheet">
8
- <style>
9
- :root {
10
- --primary-color: #4a90e2;
11
- --secondary-color: #f39c12;
12
- --background-color: #f0f4f8;
13
- --card-bg-color: #ffffff;
14
- --text-color: #333333;
15
- --border-color: #e0e0e0;
16
- }
17
-
18
- body {
19
- font-family: 'Roboto', sans-serif;
20
- background-color: var(--background-color);
21
- color: var(--text-color);
22
- margin: 0;
23
- padding: 0;
24
- display: flex;
25
- justify-content: center;
26
- align-items: center;
27
- min-height: 100vh;
28
- }
29
-
30
- .container {
31
- width: 90%;
32
- max-width: 800px;
33
- }
34
-
35
- .voice-assistant-card {
36
- background-color: var(--card-bg-color);
37
- border-radius: 20px;
38
- box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
39
- padding: 40px;
40
- text-align: center;
41
- }
42
-
43
- .title {
44
- font-size: 2.5rem;
45
- font-weight: 700;
46
- margin-bottom: 20px;
47
- color: var(--primary-color);
48
- }
49
-
50
- #responseTime {
51
- font-size: 0.9rem;
52
- color: #777;
53
- margin-bottom: 20px;
54
- }
55
-
56
- .indicator-wrapper {
57
- display: flex;
58
- justify-content: space-around;
59
- margin-bottom: 30px;
60
- }
61
-
62
- .indicator {
63
- display: flex;
64
- align-items: center;
65
- padding: 10px 20px;
66
- border-radius: 50px;
67
- font-size: 1rem;
68
- color: #fff;
69
- transition: all 0.3s ease;
70
- }
71
-
72
- .indicator svg {
73
- margin-right: 8px;
74
- }
75
-
76
- #userIndicator {
77
- background-color: var(--primary-color);
78
- }
79
-
80
- #aiIndicator {
81
- background-color: var(--secondary-color);
82
- }
83
-
84
- #startStopButton {
85
- background-color: #38cb96;
86
- color: #fff;
87
- border: none;
88
- padding: 15px 30px;
89
- font-size: 1.2rem;
90
- border-radius: 50px;
91
- cursor: pointer;
92
- transition: all 0.3s ease;
93
- display: flex;
94
- align-items: center;
95
- justify-content: center;
96
- margin: 0 auto 30px;
97
- }
98
-
99
- #startStopButton:hover {
100
- background-color: #1e9b6e;
101
- transform: translateY(-2px);
102
- box-shadow: 0 5px 15px rgba(74, 144, 226, 0.3);
103
- }
104
-
105
- #startStopButton svg {
106
- margin-right: 10px;
107
- }
108
-
109
- .settings {
110
- display: grid;
111
- grid-template-columns: 1fr 1fr 1.5fr;
112
- gap: 20px;
113
- margin-bottom: 30px;
114
- }
115
-
116
- .setting {
117
- text-align: left;
118
- position: relative;
119
- /* Added for tooltip positioning */
120
- }
121
-
122
- .setting label {
123
- display: block;
124
- margin-bottom: 5px;
125
- font-weight: 700;
126
- color: var(--text-color);
127
- }
128
-
129
- select,
130
- input[type="password"] {
131
- width: 100%;
132
- padding: 10px;
133
- border: 1px solid var(--border-color);
134
- border-radius: 5px;
135
- font-size: 1rem;
136
- background-color: #fff;
137
- color: var(--text-color);
138
- }
139
-
140
- .tooltip {
141
- display: none;
142
- position: absolute;
143
- background-color: #333;
144
- color: #fff;
145
- padding: 5px;
146
- border-radius: 5px;
147
- font-size: 0.8rem;
148
- }
149
-
150
- .setting:hover .tooltip {
151
- display: block;
152
- /* Show tooltip on hover */
153
- }
154
-
155
- #transcript {
156
- background-color: #f9f9f9;
157
- border-radius: 10px;
158
- padding: 20px;
159
- margin-top: 30px;
160
- text-align: left;
161
- font-family: 'Courier New', monospace;
162
- white-space: pre-wrap;
163
- max-height: 200px;
164
- overflow-y: auto;
165
- }
166
-
167
- @media (max-width: 600px) {
168
- .settings {
169
- grid-template-columns: 1fr;
170
- }
171
- }
172
- </style>
173
  </head>
174
  <body>
175
  <div class="container">
 
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
  <title>Voice Assistant</title>
7
  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;700&display=swap" rel="stylesheet">
8
+ <link href="styles.css" rel="stylesheet">
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
9
  </head>
10
  <body>
11
  <div class="container">