Hugging Face's logo

Spaces:
AZILS
/
puter
Running

App Files Community
Zain437 commited on
Commit
aecb32e
·
verified ·
1 Parent(s): 6417b9c

Update style.css

Browse files
Files changed (1) hide show
  1. style.css +41 -105
style.css CHANGED
@@ -1,128 +1,64 @@
1
- body {
2
- font-family: "Segoe UI", Arial, sans-serif;
3
- background: #f4f7fb;
4
  margin: 0;
5
  padding: 0;
6
- display: flex;
7
- justify-content: center;
8
- align-items: center;
9
- height: 100vh;
10
- }
11
-
12
- #app {
13
- width: 90%;
14
- max-width: 700px;
15
- background: white;
16
- border-radius: 12px;
17
- box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
18
- overflow: hidden;
19
- display: flex;
20
- flex-direction: column;
21
  }
22
 
23
- header {
24
- background: #007bff;
25
- color: white;
26
  display: flex;
27
- justify-content: space-between;
28
  align-items: center;
29
- padding: 12px 20px;
30
- }
31
-
32
- header h1 {
33
- margin: 0;
34
- font-size: 1.2rem;
35
- }
36
-
37
- header button {
38
- background: #fff;
39
- color: #007bff;
40
- border: none;
41
- border-radius: 6px;
42
- padding: 6px 12px;
43
- cursor: pointer;
44
- font-weight: 600;
45
- transition: 0.2s;
46
- }
47
-
48
- header button:hover {
49
- background: #e6f0ff;
50
  }
51
 
52
- #chat-container {
53
- flex: 1;
54
- display: flex;
55
- flex-direction: column;
56
- padding: 15px;
 
 
 
57
  }
58
 
59
- #messages {
60
- flex: 1;
61
- overflow-y: auto;
62
  margin-bottom: 10px;
63
- padding: 10px;
64
- background: #fafafa;
65
- border-radius: 8px;
66
- border: 1px solid #eee;
67
- }
68
-
69
- .message {
70
- background: #007bff;
71
- color: white;
72
- padding: 8px 12px;
73
- border-radius: 10px;
74
- margin-bottom: 8px;
75
- max-width: 80%;
76
- word-wrap: break-word;
77
- align-self: flex-start;
78
  }
79
 
80
- .user-message {
81
- background: #e0f7fa;
82
- color: #333;
83
- align-self: flex-end;
84
- }
85
-
86
- #chat-input {
87
- display: flex;
88
- gap: 10px;
89
- }
90
-
91
- #chat-input input {
92
- flex: 1;
93
- padding: 10px;
94
- border-radius: 6px;
95
- border: 1px solid #ccc;
96
- font-size: 1rem;
97
  }
98
 
99
- #chat-input button {
100
- background: #007bff;
101
- color: white;
102
  border: none;
103
- padding: 10px 16px;
104
- border-radius: 6px;
 
 
105
  cursor: pointer;
106
- transition: 0.2s;
107
  }
108
 
109
- #chat-input button:hover {
110
- background: #0056b3;
111
  }
112
 
113
- footer {
114
- background: #f9f9f9;
115
- padding: 10px;
116
- text-align: center;
 
 
117
  font-size: 0.9rem;
118
- color: #555;
119
- }
120
-
121
- footer a {
122
- color: #007bff;
123
- text-decoration: none;
124
- }
125
-
126
- footer a:hover {
127
- text-decoration: underline;
128
  }
 
1
+ /* Reset */
2
+ * {
 
3
  margin: 0;
4
  padding: 0;
5
+ box-sizing: border-box;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
6
  }
7
 
8
+ body {
9
+ font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
 
10
  display: flex;
 
11
  align-items: center;
12
+ justify-content: center;
13
+ min-height: 100vh;
14
+ background: linear-gradient(135deg, #1a1a2e, #16213e);
15
+ color: #eee;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
16
  }
17
 
18
+ .container {
19
+ text-align: center;
20
+ padding: 40px;
21
+ background: rgba(255, 255, 255, 0.05);
22
+ border-radius: 16px;
23
+ box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
24
+ max-width: 420px;
25
+ width: 90%;
26
  }
27
 
28
+ h1 {
29
+ font-size: 1.8rem;
 
30
  margin-bottom: 10px;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
31
  }
32
 
33
+ .desc {
34
+ opacity: 0.8;
35
+ margin-bottom: 30px;
36
+ font-size: 0.95rem;
 
 
 
 
 
 
 
 
 
 
 
 
 
37
  }
38
 
39
+ button {
40
+ background: #4f46e5;
 
41
  border: none;
42
+ color: white;
43
+ padding: 12px 22px;
44
+ font-size: 1rem;
45
+ border-radius: 10px;
46
  cursor: pointer;
47
+ transition: background 0.25s ease;
48
  }
49
 
50
+ button:hover {
51
+ background: #6366f1;
52
  }
53
 
54
+ pre {
55
+ text-align: left;
56
+ background: rgba(255, 255, 255, 0.1);
57
+ padding: 16px;
58
+ border-radius: 10px;
59
+ margin-top: 25px;
60
  font-size: 0.9rem;
61
+ word-break: break-word;
62
+ max-height: 300px;
63
+ overflow-y: auto;
 
 
 
 
 
 
 
64
  }