Hugging Face's logo

Spaces:
simar007
/
web-scraper
Running

App Files Community
simar007 commited on
Commit
be150e9
·
verified ·
1 Parent(s): 1d65625

Update static/style.css

Browse files
Files changed (1) hide show
  1. static/style.css +175 -173
static/style.css CHANGED
@@ -1,173 +1,175 @@
1
- /* ------------------------------------------
2
- 🌐 Web Content Extractor - Modern Glass Style
3
- -------------------------------------------*/
4
-
5
- :root {
6
- --bg: #020b17;
7
- --card: rgba(255, 255, 255, 0.05);
8
- --accent1: #00ffcc;
9
- --accent2: #00c6ff;
10
- --muted: #d8e4f0;
11
- --text: #e6eef8;
12
- --error: #ff4444;
13
- --radius: 12px;
14
- font-family: 'Segoe UI', Roboto, sans-serif;
15
- }
16
-
17
- body {
18
- margin: 0;
19
- padding: 0;
20
- background: radial-gradient(circle at 20% 30%, #0a1a2a, #010810 80%);
21
- color: var(--text);
22
- min-height: 100vh;
23
- display: flex;
24
- justify-content: center;
25
- align-items: flex-start;
26
- padding-top: 40px;
27
- }
28
-
29
- /* ------------------------------
30
- Container
31
- -------------------------------*/
32
- .container {
33
- width: 90%;
34
- max-width: 800px;
35
- background: rgba(255, 255, 255, 0.04);
36
- border-radius: var(--radius);
37
- padding: 30px 40px;
38
- box-shadow: 0 8px 40px rgba(0, 0, 0, 0.6);
39
- backdrop-filter: blur(10px);
40
- border: 1px solid rgba(255, 255, 255, 0.08);
41
- }
42
-
43
- /* ------------------------------
44
- Header & Inputs
45
- -------------------------------*/
46
- h1 {
47
- text-align: center;
48
- margin-bottom: 24px;
49
- font-size: 30px;
50
- background: linear-gradient(90deg, var(--accent1), var(--accent2));
51
- -webkit-background-clip: text;
52
- -webkit-text-fill-color: transparent;
53
- }
54
-
55
- .form-section {
56
- display: flex;
57
- flex-direction: column;
58
- gap: 12px;
59
- align-items: center;
60
- margin-bottom: 24px;
61
- }
62
-
63
- input {
64
- width: 100%;
65
- padding: 12px;
66
- border-radius: var(--radius);
67
- border: none;
68
- outline: none;
69
- background: rgba(255, 255, 255, 0.08);
70
- color: var(--text);
71
- font-size: 15px;
72
- }
73
-
74
- button {
75
- background: linear-gradient(90deg, var(--accent1), var(--accent2));
76
- color: #001219;
77
- font-weight: 700;
78
- border: none;
79
- border-radius: var(--radius);
80
- padding: 12px 24px;
81
- cursor: pointer;
82
- transition: all 0.25s ease;
83
- }
84
-
85
- button:hover {
86
- transform: translateY(-2px);
87
- box-shadow: 0 4px 16px rgba(0, 255, 204, 0.4);
88
- }
89
-
90
- /* ------------------------------
91
- Result Box
92
- -------------------------------*/
93
- #result-box {
94
- background: var(--card);
95
- padding: 20px;
96
- border-radius: var(--radius);
97
- margin-top: 20px;
98
- border: 1px solid rgba(255, 255, 255, 0.05);
99
- }
100
-
101
- #output p {
102
- background: rgba(255, 255, 255, 0.03);
103
- padding: 8px 10px;
104
- border-radius: 8px;
105
- margin: 6px 0;
106
- line-height: 1.4;
107
- }
108
-
109
- .error {
110
- background: rgba(255, 50, 50, 0.15);
111
- border-left: 4px solid var(--error);
112
- color: #ffbfbf;
113
- padding: 10px;
114
- border-radius: var(--radius);
115
- margin-top: 10px;
116
- }
117
-
118
- /* ------------------------------
119
- Analysis Section
120
- -------------------------------*/
121
- #analysis-box {
122
- background: rgba(255, 255, 255, 0.05);
123
- padding: 20px;
124
- border-radius: var(--radius);
125
- margin-top: 20px;
126
- border: 1px solid rgba(255, 255, 255, 0.06);
127
- }
128
-
129
- #analysis-box h3 {
130
- color: var(--accent1);
131
- margin-top: 0;
132
- }
133
-
134
- #analysis-box p {
135
- margin: 6px 0;
136
- }
137
-
138
- #topWords {
139
- list-style: none;
140
- padding: 0;
141
- display: flex;
142
- flex-wrap: wrap;
143
- gap: 8px;
144
- }
145
-
146
- #topWords li {
147
- background: rgba(255, 255, 255, 0.08);
148
- padding: 6px 10px;
149
- border-radius: 20px;
150
- font-size: 14px;
151
- color: var(--accent1);
152
- }
153
-
154
- /* ------------------------------
155
- Utility
156
- -------------------------------*/
157
- .hidden {
158
- display: none;
159
- }
160
-
161
- @media (max-width: 600px) {
162
- .container {
163
- padding: 20px;
164
- }
165
-
166
- h1 {
167
- font-size: 24px;
168
- }
169
-
170
- button {
171
- width: 100%;
172
- }
173
- }
 
 
 
1
+ /* ------------------------------------------
2
+ 🌌 Web Content Extractor - Cyber Neon Purple Theme
3
+ -------------------------------------------*/
4
+
5
+ :root {
6
+ --bg: #0a0014;
7
+ --card: rgba(255, 255, 255, 0.05);
8
+ --accent1: #d94eff;
9
+ --accent2: #7a00ff;
10
+ --muted: #c8b6ff;
11
+ --text: #f3e9ff;
12
+ --error: #ff3366;
13
+ --radius: 12px;
14
+ font-family: 'Segoe UI', Roboto, sans-serif;
15
+ }
16
+
17
+ body {
18
+ margin: 0;
19
+ padding: 0;
20
+ background: radial-gradient(circle at 30% 30%, #1a0033, #060011 80%);
21
+ color: var(--text);
22
+ min-height: 100vh;
23
+ display: flex;
24
+ justify-content: center;
25
+ align-items: flex-start;
26
+ padding-top: 40px;
27
+ }
28
+
29
+ /* ------------------------------
30
+ Container
31
+ -------------------------------*/
32
+ .container {
33
+ width: 90%;
34
+ max-width: 800px;
35
+ background: rgba(255, 255, 255, 0.04);
36
+ border-radius: var(--radius);
37
+ padding: 30px 40px;
38
+ box-shadow: 0 8px 40px rgba(128, 0, 255, 0.4);
39
+ backdrop-filter: blur(10px);
40
+ border: 1px solid rgba(255, 255, 255, 0.08);
41
+ }
42
+
43
+ /* ------------------------------
44
+ Header & Inputs
45
+ -------------------------------*/
46
+ h1 {
47
+ text-align: center;
48
+ margin-bottom: 24px;
49
+ font-size: 30px;
50
+ background: linear-gradient(90deg, var(--accent1), var(--accent2));
51
+ -webkit-background-clip: text;
52
+ -webkit-text-fill-color: transparent;
53
+ }
54
+
55
+ .form-section {
56
+ display: flex;
57
+ flex-direction: column;
58
+ gap: 12px;
59
+ align-items: center;
60
+ margin-bottom: 24px;
61
+ }
62
+
63
+ input {
64
+ width: 100%;
65
+ padding: 12px;
66
+ border-radius: var(--radius);
67
+ border: none;
68
+ outline: none;
69
+ background: rgba(255, 255, 255, 0.08);
70
+ color: var(--text);
71
+ font-size: 15px;
72
+ }
73
+
74
+ button {
75
+ background: linear-gradient(90deg, var(--accent1), var(--accent2));
76
+ color: #0a0014;
77
+ font-weight: 700;
78
+ border: none;
79
+ border-radius: var(--radius);
80
+ padding: 12px 24px;
81
+ cursor: pointer;
82
+ transition: all 0.25s ease;
83
+ text-transform: uppercase;
84
+ letter-spacing: 1px;
85
+ }
86
+
87
+ button:hover {
88
+ transform: translateY(-2px);
89
+ box-shadow: 0 4px 16px rgba(217, 78, 255, 0.5);
90
+ }
91
+
92
+ /* ------------------------------
93
+ Result Box
94
+ -------------------------------*/
95
+ #result-box {
96
+ background: var(--card);
97
+ padding: 20px;
98
+ border-radius: var(--radius);
99
+ margin-top: 20px;
100
+ border: 1px solid rgba(255, 255, 255, 0.05);
101
+ }
102
+
103
+ #output p {
104
+ background: rgba(255, 255, 255, 0.03);
105
+ padding: 8px 10px;
106
+ border-radius: 8px;
107
+ margin: 6px 0;
108
+ line-height: 1.4;
109
+ }
110
+
111
+ .error {
112
+ background: rgba(255, 50, 100, 0.15);
113
+ border-left: 4px solid var(--error);
114
+ color: #ffc2d0;
115
+ padding: 10px;
116
+ border-radius: var(--radius);
117
+ margin-top: 10px;
118
+ }
119
+
120
+ /* ------------------------------
121
+ Analysis Section
122
+ -------------------------------*/
123
+ #analysis-box {
124
+ background: rgba(255, 255, 255, 0.05);
125
+ padding: 20px;
126
+ border-radius: var(--radius);
127
+ margin-top: 20px;
128
+ border: 1px solid rgba(255, 255, 255, 0.06);
129
+ }
130
+
131
+ #analysis-box h3 {
132
+ color: var(--accent1);
133
+ margin-top: 0;
134
+ }
135
+
136
+ #analysis-box p {
137
+ margin: 6px 0;
138
+ }
139
+
140
+ #topWords {
141
+ list-style: none;
142
+ padding: 0;
143
+ display: flex;
144
+ flex-wrap: wrap;
145
+ gap: 8px;
146
+ }
147
+
148
+ #topWords li {
149
+ background: rgba(255, 255, 255, 0.08);
150
+ padding: 6px 10px;
151
+ border-radius: 20px;
152
+ font-size: 14px;
153
+ color: var(--accent1);
154
+ }
155
+
156
+ /* ------------------------------
157
+ Utility
158
+ -------------------------------*/
159
+ .hidden {
160
+ display: none;
161
+ }
162
+
163
+ @media (max-width: 600px) {
164
+ .container {
165
+ padding: 20px;
166
+ }
167
+
168
+ h1 {
169
+ font-size: 24px;
170
+ }
171
+
172
+ button {
173
+ width: 100%;
174
+ }
175
+ }