Hugging Face's logo

Spaces:
eaglelandsonce
/
DOGE_Hackathon
Running

App Files Community
eaglelandsonce commited on
Commit
f4bd5aa
·
verified ·
1 Parent(s): 0aec9c9

Update style.css

Browse files
Files changed (1) hide show
  1. style.css +135 -45
style.css CHANGED
@@ -1,85 +1,175 @@
1
- body {
 
2
  margin: 0;
3
- font-family: Arial, sans-serif;
 
4
  }
5
-
6
- .container {
7
  display: flex;
8
- flex-direction: column;
9
- height: 100vh;
10
- width: 100%;
 
11
  }
12
 
13
- .top-bar {
 
 
14
  background-color: #333;
15
  color: white;
 
 
 
 
 
 
 
 
16
  text-align: center;
17
- padding: 10px;
 
 
 
 
 
 
 
 
18
  }
19
 
20
- .main {
21
- display: flex;
22
  flex: 1;
 
 
 
 
 
23
  }
24
-
25
- .side-bar {
26
- width: 100px;
 
27
  background-color: #444;
 
 
 
 
28
  display: flex;
29
- flex-direction: column;
30
  align-items: center;
31
  justify-content: space-between;
32
- padding: 20px;
33
  }
34
-
35
- .side-bar button {
 
 
 
 
 
 
 
36
  background-color: #666;
37
  color: white;
38
  border: none;
39
- margin: 10px 0;
40
  padding: 10px;
 
41
  cursor: pointer;
42
- text-align: center;
43
  }
44
-
45
- .nav-buttons {
46
- margin-top: auto;
 
 
 
47
  }
48
-
49
  .content {
50
  flex: 1;
51
  display: flex;
52
  justify-content: center;
53
  align-items: center;
54
- background-color: #eee;
55
  position: relative;
 
56
  }
57
-
58
- #content-area {
59
- width: 80%;
60
- height: 80%;
61
- position: relative;
62
- overflow: hidden;
63
  }
64
 
65
- #slide-image {
66
- width: 100%;
67
- height: 100%;
68
- object-fit: cover;
69
- }
70
-
71
- #slide-text {
72
  position: absolute;
73
- background-color: rgba(0, 0, 0, 0.7);
74
- color: white;
75
- padding: 20px;
 
 
 
 
 
76
  display: none;
 
 
 
77
  width: 100%;
78
- height: 100%;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
79
  }
80
 
81
- #slide-video {
 
 
 
 
 
 
 
 
 
 
82
  display: none;
83
- width: 100%;
84
- height: 100%;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
85
  }
 
1
+ /* General styling */
2
+ * {
3
  margin: 0;
4
+ padding: 0;
5
+ box-sizing: border-box;
6
  }
7
+ body {
8
+ font-family: Arial, sans-serif;
9
  display: flex;
10
+ flex-direction: row;
11
+ min-height: 100vh;
12
+ background-color: #000;
13
+ color: #fff;
14
  }
15
 
16
+ /* Sidebar styling */
17
+ .sidebar {
18
+ width: 60px;
19
  background-color: #333;
20
  color: white;
21
+ display: flex;
22
+ flex-direction: column;
23
+ align-items: center;
24
+ padding: 10px 0;
25
+ }
26
+ .prompt-icon {
27
+ margin-top: 100px;
28
+ cursor: pointer;
29
  text-align: center;
30
+ }
31
+ .prompt-icon img {
32
+ width: 32px;
33
+ height: 32px;
34
+ margin-bottom: 5px;
35
+ }
36
+ .prompt-icon span {
37
+ font-size: 12px;
38
+ display: block;
39
  }
40
 
41
+ /* Main content styling */
42
+ .container {
43
  flex: 1;
44
+ position: relative;
45
+ display: flex;
46
+ flex-direction: column;
47
+ align-items: center;
48
+ justify-content: center;
49
  }
50
+ .top-bar {
51
+ position: absolute;
52
+ top: 0;
53
+ width: 100%;
54
  background-color: #444;
55
+ color: white;
56
+ text-align: center;
57
+ padding: 10px;
58
+ z-index: 10;
59
  display: flex;
 
60
  align-items: center;
61
  justify-content: space-between;
 
62
  }
63
+ .top-bar h1 {
64
+ flex: 1;
65
+ text-align: center;
66
+ }
67
+ .nav-buttons {
68
+ display: flex;
69
+ gap: 10px;
70
+ }
71
+ .nav-buttons button {
72
  background-color: #666;
73
  color: white;
74
  border: none;
 
75
  padding: 10px;
76
+ font-size: 18px;
77
  cursor: pointer;
 
78
  }
79
+ .nav-buttons button:hover {
80
+ background-color: #888;
81
+ }
82
+ .main {
83
+ display: flex;
84
+ height: 100%;
85
  }
 
86
  .content {
87
  flex: 1;
88
  display: flex;
89
  justify-content: center;
90
  align-items: center;
 
91
  position: relative;
92
+ background-color: #000;
93
  }
94
+ .content img {
95
+ max-width: 100%;
96
+ max-height: 100%;
97
+ object-fit: contain;
98
+ display: block;
 
99
  }
100
 
101
+ /* Prompt box styling */
102
+ .prompt-box {
 
 
 
 
 
103
  position: absolute;
104
+ top: 10%;
105
+ left: 10%;
106
+ background-color: rgba(255, 255, 255, 0.9);
107
+ color: #333;
108
+ padding: 15px;
109
+ border: 1px solid #ccc;
110
+ border-radius: 5px;
111
+ box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
112
  display: none;
113
+ z-index: 20;
114
+ }
115
+ .prompt-box textarea {
116
  width: 100%;
117
+ height: 60px;
118
+ margin-bottom: 10px;
119
+ padding: 10px;
120
+ font-size: 14px;
121
+ border: 1px solid #ccc;
122
+ border-radius: 5px;
123
+ }
124
+ .prompt-box button {
125
+ padding: 5px 10px;
126
+ font-size: 14px;
127
+ background-color: #007bff;
128
+ color: white;
129
+ border: none;
130
+ border-radius: 5px;
131
+ cursor: pointer;
132
  }
133
 
134
+ /* Response box styling */
135
+ .response-box {
136
+ position: absolute;
137
+ top: 30%;
138
+ left: 10%;
139
+ background-color: rgba(255, 255, 255, 0.9);
140
+ color: #333;
141
+ padding: 15px;
142
+ border: 1px solid #ccc;
143
+ border-radius: 5px;
144
+ box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
145
  display: none;
146
+ z-index: 20;
147
+ }
148
+ .response-box h1, .response-box h2, .response-box h3 {
149
+ color: #007bff;
150
+ }
151
+ .response-box p {
152
+ font-size: 16px;
153
+ line-height: 1.5;
154
+ }
155
+ .response-box ul {
156
+ margin: 10px 0;
157
+ padding-left: 20px;
158
+ }
159
+ .response-box ul li {
160
+ list-style-type: disc;
161
+ margin-bottom: 5px;
162
+ }
163
+ .response-box a {
164
+ color: #007bff;
165
+ text-decoration: none;
166
+ }
167
+ .response-box a:hover {
168
+ text-decoration: underline;
169
+ }
170
+ .response-box code {
171
+ font-family: monospace;
172
+ background-color: #f0f0f0;
173
+ padding: 2px 4px;
174
+ border-radius: 3px;
175
  }