Hugging Face's logo

Spaces:
jisaacso219
/
SHODAN
Running

App Files Community
jisaacso219 commited on
Commit
712ad58
·
verified ·
1 Parent(s): 57e5067

Update style.css

Browse files
Files changed (1) hide show
  1. style.css +121 -32
style.css CHANGED
@@ -1,51 +1,150 @@
 
 
1
  body {
2
- background-color: #000;
3
- color: #00ffcc;
4
- font-family: "Courier New", Courier, monospace;
5
- margin: 0;
6
- padding: 0;
7
- overflow: hidden;
8
  }
9
 
10
- /* Static/chat container, etc. (your existing rules) */
11
- #chatbox { /* … */ }
12
- .bubble {
13
- /* …your existing styles… */
14
- white-space: pre-wrap; /* preserve single spaces */
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
15
  }
16
 
 
 
 
 
 
 
 
 
 
17
 
18
- /* Avatar container */
19
  #avatar {
20
  width: 150px;
21
  height: 150px;
22
  border: 2px solid #00ffcc;
23
  border-radius: 50%;
24
  overflow: hidden;
25
- margin-bottom: 1rem;
26
  align-self: center;
27
  }
28
-
29
- /* Make the <img> cover without zoom */
30
  #avatar img {
31
  width: 100%;
32
  height: 100%;
33
  object-fit: cover;
34
  }
35
-
36
- /* Pulse only when speaking */
37
  #avatar.speaking,
38
  #avatar.speaking img {
39
  animation: pulse 2s infinite;
40
  }
41
-
42
- /* Keyframes unchanged */
43
  @keyframes pulse {
44
- 0% { box-shadow: 0 0 5px #00ffcc; transform: scale(1); }
45
- 50% { box-shadow: 0 0 25px #00ffccaa; transform: scale(1.05); }
46
  100% { box-shadow: 0 0 5px #00ffcc; transform: scale(1); }
47
  }
48
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
49
  /* Overlay for kill-phrase glitch */
50
  #overlay {
51
  position: fixed;
@@ -56,14 +155,4 @@ body {
56
  transition: opacity 0.1s ease-in-out;
57
  z-index: 9999;
58
  }
59
-
60
- @keyframes glitchFlash {
61
- 0%,100% { opacity: 0; }
62
- 10%,90% { opacity: 1; }
63
- 20%,80% { opacity: 0; }
64
- 30%,70% { opacity: 1; }
65
- 40%,60% { opacity: 0; }
66
- 50% { opacity: 1; }
67
- }
68
-
69
-
 
1
+ ```css
2
+ /* Base styles */
3
  body {
4
+ margin: 0;
5
+ padding: 0;
6
+ overflow: hidden;
7
+ font-family: "Courier New", Courier, monospace;
8
+ background: #000;
9
+ color: #00ffcc;
10
  }
11
 
12
+ /* Starfield animated background */
13
+ @keyframes starfield {
14
+ from { background-position: 0 0; }
15
+ to { background-position: -10000px 5000px; }
16
+ }
17
+ body::before {
18
+ content: '';
19
+ position: fixed;
20
+ top: 0;
21
+ left: 0;
22
+ right: 0;
23
+ bottom: 0;
24
+ background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVQIHWP4////GQAJ/wPlARZGoQAAAABJRU5ErkJggg==') repeat;
25
+ opacity: 0.2;
26
+ animation: starfield 120s linear infinite;
27
+ z-index: -2;
28
+ }
29
+
30
+ /* Header styling */
31
+ .header {
32
+ position: fixed;
33
+ top: 0;
34
+ width: 100%;
35
+ padding: 1rem 0;
36
+ background: rgba(0, 0, 0, 0.7);
37
+ box-shadow: 0 0 10px #00ffcc;
38
+ text-align: center;
39
+ z-index: 100;
40
+ }
41
+ .header h1 {
42
+ margin: 0;
43
+ font-size: 2rem;
44
+ letter-spacing: 0.3rem;
45
+ color: #00ffcc;
46
  }
47
 
48
+ /* Interface layout adjustments */
49
+ .interface {
50
+ display: flex;
51
+ flex-direction: column;
52
+ justify-content: space-between;
53
+ height: calc(100vh - 4rem);
54
+ padding: 6rem 2rem 2rem;
55
+ box-sizing: border-box;
56
+ }
57
 
58
+ /* Avatar styling */
59
  #avatar {
60
  width: 150px;
61
  height: 150px;
62
  border: 2px solid #00ffcc;
63
  border-radius: 50%;
64
  overflow: hidden;
65
+ margin: 0 auto 1rem;
66
  align-self: center;
67
  }
 
 
68
  #avatar img {
69
  width: 100%;
70
  height: 100%;
71
  object-fit: cover;
72
  }
 
 
73
  #avatar.speaking,
74
  #avatar.speaking img {
75
  animation: pulse 2s infinite;
76
  }
 
 
77
  @keyframes pulse {
78
+ 0% { box-shadow: 0 0 5px #00ffcc; transform: scale(1); }
79
+ 50% { box-shadow: 0 0 25px #00ffccaa; transform: scale(1.05); }
80
  100% { box-shadow: 0 0 5px #00ffcc; transform: scale(1); }
81
  }
82
 
83
+ /* Chatbox styling */
84
+ #chatbox {
85
+ flex: 1;
86
+ overflow-y: auto;
87
+ border: 1px solid #00ffcc;
88
+ padding: 1rem;
89
+ background-color: #020202;
90
+ box-shadow: 0 0 10px #00ffcc33;
91
+ margin-bottom: 1rem;
92
+ font-size: 1rem;
93
+ line-height: 1.6;
94
+ }
95
+
96
+ /* Message bubbles */
97
+ .bubble {
98
+ padding: 0.75rem;
99
+ margin: 0.5rem 0;
100
+ border-radius: 0.5rem;
101
+ max-width: 80%;
102
+ animation: typeIn 0.5s ease-out;
103
+ white-space: pre-wrap;
104
+ }
105
+ .bubble.user {
106
+ align-self: flex-end;
107
+ background-color: #003333;
108
+ color: #00ffff;
109
+ }
110
+ .bubble.ai {
111
+ align-self: flex-start;
112
+ background-color: #111;
113
+ border: 1px solid #00ffcc;
114
+ color: #00ffcc;
115
+ }
116
+ @keyframes typeIn {
117
+ from { opacity: 0; transform: translateY(5px); }
118
+ to { opacity: 1; transform: translateY(0); }
119
+ }
120
+
121
+ /* Input form styling */
122
+ form {
123
+ display: flex;
124
+ gap: 1rem;
125
+ }
126
+ input[type="text"] {
127
+ flex: 1;
128
+ padding: 0.75rem;
129
+ font-size: 1rem;
130
+ background: #001111;
131
+ color: #00ffcc;
132
+ border: 1px solid #00ffcc;
133
+ outline: none;
134
+ }
135
+ button {
136
+ padding: 0.75rem 1.25rem;
137
+ background-color: #00ffcc;
138
+ border: none;
139
+ color: black;
140
+ font-weight: bold;
141
+ cursor: pointer;
142
+ transition: background 0.2s;
143
+ }
144
+ button:hover {
145
+ background-color: #00ffaa;
146
+ }
147
+
148
  /* Overlay for kill-phrase glitch */
149
  #overlay {
150
  position: fixed;
 
155
  transition: opacity 0.1s ease-in-out;
156
  z-index: 9999;
157
  }
158
+ ```