Hugging Face's logo

Spaces:
ishmeet-yo
/
ISH_harry_potter_rag
Sleeping

App Files Community
ishmeet-yo commited on
Commit
bf8d320
·
verified ·
1 Parent(s): 538d8dc

Update static/style.css

Browse files
Files changed (1) hide show
  1. static/style.css +131 -7
static/style.css CHANGED
@@ -1,17 +1,141 @@
 
 
 
 
 
 
 
 
1
  body {
2
- font-family: 'Helvetica', sans-serif;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
3
  }
4
 
5
- input:focus {
6
- outline: none;
7
- border-color: #7f9cf5; /* Tailwind Indigo-300 */
8
- box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.3); /* Tailwind Indigo */
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
9
  }
10
 
11
  button {
12
- transition: all 0.2s ease-in-out;
 
 
 
 
 
 
 
13
  }
14
 
15
  button:hover {
16
- transform: scale(1.05);
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
17
  }
 
1
+ /* Base reset */
2
+ * {
3
+ margin: 0;
4
+ padding: 0;
5
+ box-sizing: border-box;
6
+ }
7
+
8
+ /* Page background */
9
  body {
10
+ min-height: 100vh;
11
+ background: radial-gradient(circle at top, #1b1b2f, #0f0f1a);
12
+ font-family: "Inter", sans-serif;
13
+ color: #e6e6f0;
14
+ }
15
+
16
+ /* Main container */
17
+ .container {
18
+ max-width: 850px;
19
+ margin: 60px auto;
20
+ padding: 40px;
21
+ }
22
+
23
+ /* Title */
24
+ h1 {
25
+ font-family: "Playfair Display", serif;
26
+ font-size: 3rem;
27
+ text-align: center;
28
+ color: #f5d78e;
29
+ letter-spacing: 1px;
30
+ }
31
+
32
+ .subtitle {
33
+ text-align: center;
34
+ margin-top: 10px;
35
+ margin-bottom: 40px;
36
+ color: #c7c7d9;
37
  }
38
 
39
+ /* Form */
40
+ form {
41
+ display: flex;
42
+ gap: 12px;
43
+ margin-bottom: 30px;
44
+ }
45
+
46
+ input {
47
+ flex: 1;
48
+ padding: 14px 16px;
49
+ border-radius: 10px;
50
+ border: none;
51
+ font-size: 1rem;
52
+ outline: none;
53
+ background: #111122;
54
+ color: #fff;
55
+ }
56
+
57
+ input::placeholder {
58
+ color: #8f8fa8;
59
  }
60
 
61
  button {
62
+ padding: 14px 24px;
63
+ border-radius: 10px;
64
+ border: none;
65
+ font-size: 1rem;
66
+ cursor: pointer;
67
+ background: linear-gradient(135deg, #f5d78e, #caa64b);
68
+ color: #1a1a1a;
69
+ font-weight: 500;
70
  }
71
 
72
  button:hover {
73
+ opacity: 0.9;
74
+ }
75
+
76
+ /* Current answer box */
77
+ .answer-box {
78
+ margin-bottom: 30px;
79
+ padding: 20px;
80
+ border-radius: 14px;
81
+ background: rgba(20, 20, 40, 0.85);
82
+ border-left: 4px solid #f5d78e;
83
+ }
84
+
85
+ /* History */
86
+ .history {
87
+ margin-top: 40px;
88
+ }
89
+
90
+ .history h2 {
91
+ font-family: "Playfair Display", serif;
92
+ color: #f5d78e;
93
+ margin-bottom: 20px;
94
+ }
95
+
96
+ /* History cards */
97
+ .history-item {
98
+ background: rgba(10, 10, 25, 0.85);
99
+ border-radius: 14px;
100
+ padding: 20px;
101
+ margin-bottom: 18px;
102
+ border-left: 3px solid rgba(245, 215, 142, 0.6);
103
+ box-shadow: inset 0 0 16px rgba(255, 215, 100, 0.04);
104
+ animation: fadeIn 0.4s ease;
105
+ }
106
+
107
+ .history-question {
108
+ font-weight: 500;
109
+ color: #f5d78e;
110
+ margin-bottom: 10px;
111
+ }
112
+
113
+ .history-answer {
114
+ font-size: 0.95rem;
115
+ line-height: 1.6;
116
+ color: #e6e6f0;
117
+ }
118
+
119
+ /* Footer */
120
+ .footer {
121
+ margin-top: 50px;
122
+ text-align: center;
123
+ font-size: 0.85rem;
124
+ color: #9a9ab3;
125
+ }
126
+
127
+ .footer span {
128
+ color: #f5d78e;
129
+ }
130
+
131
+ /* Animation */
132
+ @keyframes fadeIn {
133
+ from {
134
+ opacity: 0;
135
+ transform: translateY(6px);
136
+ }
137
+ to {
138
+ opacity: 1;
139
+ transform: translateY(0);
140
+ }
141
  }