Hugging Face's logo

Spaces:
jisaacso219
/
SHODAN
Running

App Files Community
jisaacso219 commited on
Commit
1255cf2
·
verified ·
1 Parent(s): 7c50bc4

Update style.css

Browse files
Files changed (1) hide show
  1. style.css +89 -74
style.css CHANGED
@@ -1,100 +1,115 @@
1
  body {
2
- background-color: #000;
3
- font-family: 'Courier New', monospace;
4
- color: #00FF00;
5
- margin: 0;
6
- padding: 20px;
 
7
  }
8
 
9
- .chatlog {
10
- margin-bottom: 20px;
 
 
 
 
 
11
  }
12
 
13
- .bubble-human, .bubble-shodan {
14
- padding: 12px;
15
- border-radius: 10px;
16
- margin: 8px 0;
17
- animation: fadein 0.4s ease;
18
- max-width: 90%;
 
 
 
 
19
  }
20
 
21
- .bubble-human {
22
- background-color: #222;
23
- color: white;
24
- border: 1px solid #555;
 
 
25
  }
26
 
27
- .bubble-shodan {
28
- background-color: #0a0a0a;
29
- color: #FF00FF;
30
- border: 1px dashed #00FF00;
31
  }
32
 
33
- #thinking {
34
- font-style: italic;
35
- font-size: 1.2em;
36
- padding: 12px;
37
- color: #AAAAAA;
38
- animation: pulse 2s infinite;
39
  }
40
 
41
- .glitch-overlay {
42
- position: fixed;
43
- top: 0;
44
- left: 0;
45
- width: 100%;
46
- height: 100%;
47
- background: rgba(255, 0, 0, 0.1);
48
- z-index: 9999;
49
- pointer-events: none;
50
- animation: glitch-flicker 0.2s infinite;
51
- }
52
-
53
- @keyframes glitch-flicker {
54
- 0% { opacity: 0.2; }
55
- 50% { opacity: 0.5; }
56
- 100% { opacity: 0.2; }
57
  }
58
 
59
- .avatar-container {
60
- display: flex;
61
- justify-content: center;
62
- margin-bottom: 20px;
 
 
 
 
63
  }
64
 
65
- .shodan-avatar {
66
- width: 120px;
67
- height: 120px;
68
- background: url('shodan_face.png') no-repeat center center;
69
- background-size: contain;
70
- animation: pulse-avatar 1.2s infinite;
 
 
71
  }
72
 
73
- @keyframes pulse-avatar {
74
- 0% { transform: scale(1); opacity: 0.7; }
75
- 50% { transform: scale(1.1); opacity: 1; }
76
- 100% { transform: scale(1); opacity: 0.7; }
77
  }
78
 
79
- form {
80
- display: flex;
81
- gap: 10px;
 
 
 
 
 
 
82
  }
83
 
84
- input[type="text"] {
85
- flex-grow: 1;
86
- padding: 10px;
87
- background: #111;
88
- color: #0f0;
89
- border: 1px solid #333;
90
- font-family: monospace;
 
 
 
 
91
  }
92
 
93
- button {
94
- padding: 10px;
95
- background: #330033;
96
- color: #0f0;
97
- border: 1px solid #0f0;
98
- cursor: pointer;
99
- font-weight: bold;
 
 
 
100
  }
 
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
+ #container {
11
+ display: flex;
12
+ flex-direction: column;
13
+ justify-content: space-between;
14
+ height: 100vh;
15
+ padding: 2rem;
16
+ box-sizing: border-box;
17
  }
18
 
19
+ #chatbox {
20
+ flex: 1;
21
+ overflow-y: auto;
22
+ border: 1px solid #00ffcc;
23
+ padding: 1rem;
24
+ background-color: #020202;
25
+ box-shadow: 0 0 10px #00ffcc33;
26
+ margin-bottom: 1rem;
27
+ font-size: 1rem;
28
+ line-height: 1.6;
29
  }
30
 
31
+ .bubble {
32
+ padding: 0.75rem;
33
+ margin: 0.5rem 0;
34
+ border-radius: 0.5rem;
35
+ max-width: 80%;
36
+ animation: typeIn 0.5s ease-out;
37
  }
38
 
39
+ .user {
40
+ align-self: flex-end;
41
+ background-color: #003333;
42
+ color: #00ffff;
43
  }
44
 
45
+ .ai {
46
+ align-self: flex-start;
47
+ background-color: #111;
48
+ border: 1px solid #00ffcc;
49
+ color: #00ffcc;
 
50
  }
51
 
52
+ form {
53
+ display: flex;
54
+ gap: 1rem;
 
 
 
 
 
 
 
 
 
 
 
 
 
55
  }
56
 
57
+ input[type="text"] {
58
+ flex: 1;
59
+ padding: 0.75rem;
60
+ font-size: 1rem;
61
+ background: #001111;
62
+ color: #00ffcc;
63
+ border: 1px solid #00ffcc;
64
+ outline: none;
65
  }
66
 
67
+ button {
68
+ padding: 0.75rem 1.25rem;
69
+ background-color: #00ffcc;
70
+ border: none;
71
+ color: black;
72
+ font-weight: bold;
73
+ cursor: pointer;
74
+ transition: background 0.2s;
75
  }
76
 
77
+ button:hover {
78
+ background-color: #00ffaa;
 
 
79
  }
80
 
81
+ @keyframes typeIn {
82
+ from {
83
+ opacity: 0;
84
+ transform: translateY(5px);
85
+ }
86
+ to {
87
+ opacity: 1;
88
+ transform: translateY(0);
89
+ }
90
  }
91
 
92
+ /* Pulsing SHODAN Avatar Effect */
93
+ #avatar {
94
+ width: 150px;
95
+ height: 150px;
96
+ border: 2px solid #00ffcc;
97
+ border-radius: 50%;
98
+ animation: pulse 2s infinite;
99
+ background-size: cover;
100
+ background-position: center;
101
+ margin-bottom: 1rem;
102
+ align-self: center;
103
  }
104
 
105
+ @keyframes pulse {
106
+ 0% {
107
+ box-shadow: 0 0 5px #00ffcc;
108
+ }
109
+ 50% {
110
+ box-shadow: 0 0 25px #00ffccaa;
111
+ }
112
+ 100% {
113
+ box-shadow: 0 0 5px #00ffcc;
114
+ }
115
  }