Hugging Face's logo

Spaces:
mgbam
/
Synthetic_Biology
Sleeping

App Files Community
mgbam commited on
Commit
8960c55
·
verified ·
1 Parent(s): 7716bcb

Update genesis/static/style.css

Browse files
Files changed (1) hide show
  1. genesis/static/style.css +84 -44
genesis/static/style.css CHANGED
@@ -1,64 +1,104 @@
1
- :root {
2
- --green: #00ff9d;
3
- --orange: #ff9900;
4
- --bg-dark: #0a0a0a;
5
- }
6
-
7
  body, html {
8
  margin: 0;
9
  padding: 0;
10
- overflow: hidden;
11
- background-color: var(--bg-dark);
12
  font-family: 'Orbitron', sans-serif;
 
 
 
13
  }
14
 
15
- .fullscreen-bg {
16
- position: relative;
17
- width: 100vw;
 
 
 
18
  height: 100vh;
19
- background: radial-gradient(circle at center, #001a12, #000000);
 
20
  }
21
 
22
- #molecule-canvas {
23
- position: absolute;
24
- top: 0; left: 0;
25
- width: 100%; height: 100%;
26
- z-index: 0;
 
27
  }
28
 
29
- .centered {
30
- position: absolute;
31
- top: 50%; left: 50%;
32
- transform: translate(-50%, -50%);
33
- text-align: center;
34
- z-index: 1;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
35
  }
36
 
37
- .title {
38
- font-size: 3em;
39
- color: var(--green);
40
- text-shadow: 0 0 20px var(--green);
 
 
 
41
  }
42
 
43
- #enter-btn {
44
- padding: 15px 40px;
45
- font-size: 1.5em;
46
- background: var(--green);
47
- color: black;
48
- border: none;
49
- cursor: pointer;
50
- border-radius: 8px;
51
- box-shadow: 0 0 20px var(--green);
52
- animation: pulse 1.5s infinite;
 
53
  }
54
 
55
- #enter-btn:hover {
56
- background: var(--orange);
57
- box-shadow: 0 0 20px var(--orange);
 
 
 
 
 
 
 
 
 
 
 
 
 
58
  }
59
 
60
- @keyframes pulse {
61
- 0% { box-shadow: 0 0 10px var(--green); }
62
- 50% { box-shadow: 0 0 30px var(--green); }
63
- 100% { box-shadow: 0 0 10px var(--green); }
 
 
 
 
 
 
64
  }
 
1
+ /* ==== GLOBAL BIOTECH THEME ==== */
 
 
 
 
 
2
  body, html {
3
  margin: 0;
4
  padding: 0;
 
 
5
  font-family: 'Orbitron', sans-serif;
6
+ background-color: #0a0f0a;
7
+ color: #d9ffd9;
8
+ overflow: hidden;
9
  }
10
 
11
+ /* ==== FULLSCREEN LANDING ==== */
12
+ .landing-container {
13
+ display: flex;
14
+ flex-direction: column;
15
+ justify-content: center;
16
+ align-items: center;
17
  height: 100vh;
18
+ background: radial-gradient(circle at center, #001a00 0%, #000 100%);
19
+ position: relative;
20
  }
21
 
22
+ .landing-title {
23
+ font-size: 3rem;
24
+ text-align: center;
25
+ color: #00ff88;
26
+ text-shadow: 0 0 20px #00ff88, 0 0 40px #00ffaa;
27
+ margin-bottom: 50px;
28
  }
29
 
30
+ /* ==== ENTER THE LAB BUTTON ==== */
31
+ .enter-btn {
32
+ padding: 20px 40px;
33
+ font-size: 1.5rem;
34
+ border: none;
35
+ border-radius: 50px;
36
+ background: linear-gradient(90deg, #00ff88, #ffaa00);
37
+ color: #000;
38
+ cursor: pointer;
39
+ animation: pulse 2s infinite;
40
+ box-shadow: 0 0 20px #00ff88, 0 0 40px #ffaa00;
41
+ transition: transform 0.2s ease-in-out;
42
+ }
43
+ .enter-btn:hover {
44
+ transform: scale(1.1);
45
+ }
46
+
47
+ /* Button Glow Animation */
48
+ @keyframes pulse {
49
+ 0% { box-shadow: 0 0 10px #00ff88, 0 0 20px #ffaa00; }
50
+ 50% { box-shadow: 0 0 30px #00ff88, 0 0 60px #ffaa00; }
51
+ 100% { box-shadow: 0 0 10px #00ff88, 0 0 20px #ffaa00; }
52
  }
53
 
54
+ /* ==== DASHBOARD ==== */
55
+ .dashboard {
56
+ display: none;
57
+ padding: 20px;
58
+ height: 100vh;
59
+ background-color: #0a0f0a;
60
+ overflow-y: auto;
61
  }
62
 
63
+ /* Panel styling */
64
+ .panel {
65
+ border: 1px solid #00ff88;
66
+ padding: 15px;
67
+ border-radius: 10px;
68
+ margin-bottom: 20px;
69
+ background-color: rgba(0, 26, 0, 0.7);
70
+ box-shadow: 0 0 10px #00ff88;
71
+ }
72
+ .panel h2 {
73
+ color: #ffaa00;
74
  }
75
 
76
+ /* Tabs */
77
+ .tab-container {
78
+ display: flex;
79
+ gap: 10px;
80
+ margin-bottom: 20px;
81
+ }
82
+ .tab {
83
+ padding: 10px 20px;
84
+ background: rgba(0, 255, 136, 0.1);
85
+ border: 1px solid #00ff88;
86
+ border-radius: 5px;
87
+ cursor: pointer;
88
+ transition: background 0.3s;
89
+ }
90
+ .tab:hover {
91
+ background: rgba(0, 255, 136, 0.3);
92
  }
93
 
94
+ /* Scrollbars */
95
+ ::-webkit-scrollbar {
96
+ width: 8px;
97
+ }
98
+ ::-webkit-scrollbar-thumb {
99
+ background-color: #00ff88;
100
+ border-radius: 4px;
101
+ }
102
+ ::-webkit-scrollbar-track {
103
+ background-color: #001a00;
104
  }