Hugging Face's logo

Spaces:
dev-haresh
/
nexus-ai
Sleeping

App Files Community
nexus-ai
File size: 3,435 Bytes
7ee22ad
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
*{ margin:0; padding:0; box-sizing:border-box; font-family:Segoe UI; }
body{
  background:#020617;
  overflow:hidden;
  color:white;
}

.bg{
  position:fixed; inset:0;
  background:
    radial-gradient(circle at center, rgba(34,197,94,0.12), transparent 40%),
    radial-gradient(circle at top left, rgba(59,130,246,0.08), transparent 30%);
  z-index:-1;
}

.core-container{
  width:100%;
  height:100vh;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
}

.back-btn{
  position:absolute;
  top:30px;
  left:30px;
  text-decoration:none;
  color:white;
  padding:14px 20px;
  border-radius:18px;
  background:rgba(255,255,255,0.05);
  border:1px solid rgba(255,255,255,0.05);
  transition:0.2s;
}
.back-btn:hover{
  background:rgba(34,197,94,0.12);
  border-color:rgba(34,197,94,0.2);
}

.orb-wrapper{
  display:flex;
  flex-direction:column;
  align-items:center;
}

.orb{
  width:260px;
  height:260px;
  border-radius:50%;
  display:flex;
  justify-content:center;
  align-items:center;
  position:relative;
  background:radial-gradient(circle at top, #4ade80, #14532d);
  box-shadow:0 0 120px rgba(34,197,94,0.45), 0 0 260px rgba(34,197,94,0.12);
  transition:0.4s;
}

.orb-core{
  width:55%;
  height:55%;
  border-radius:50%;
  background:rgba(255,255,255,0.15);
  backdrop-filter:blur(20px);
}

.orb.idle{ animation:idleFloat 4s ease-in-out infinite; }
.orb.thinking{ animation:thinkingPulse 1s infinite; }
.orb.listening{ animation:listeningExpand 0.8s infinite; }
.orb.generating{ animation:generatingEnergy 0.6s infinite; }

@keyframes idleFloat{
  0%{ transform:translateY(0px); }
  50%{ transform:translateY(-14px); }
  100%{ transform:translateY(0px); }
}
@keyframes thinkingPulse{
  0%{ transform:scale(1); }
  50%{ transform:scale(1.08); }
  100%{ transform:scale(1); }
}
@keyframes listeningExpand{
  0%{ transform:scale(1); }
  50%{ transform:scale(1.15); }
  100%{ transform:scale(1); }
}
@keyframes generatingEnergy{
  0%{ transform:scale(1); filter:hue-rotate(0deg); }
  50%{ transform:scale(1.12); filter:hue-rotate(40deg); }
  100%{ transform:scale(1); filter:hue-rotate(0deg); }
}

.orb-status{
  margin-top:25px;
  letter-spacing:4px;
  color:rgba(255,255,255,0.65);
}

.controls{
  display:flex;
  gap:18px;
  margin-top:50px;
  flex-wrap:wrap;
  justify-content:center;
}
.controls button{
  padding:14px 22px;
  border:none;
  border-radius:18px;
  cursor:pointer;
  background:rgba(255,255,255,0.06);
  color:white;
  transition:0.25s;
  font-size:14px;
}
.controls button:hover{
  background:rgba(34,197,94,0.18);
  transform:translateY(-2px);
}

@media(max-width:600px){
  .orb{ width:180px; height:180px; }
  .controls{ gap:12px; }
  .controls button{ padding:12px 18px; font-size:13px; }
  .back-btn{ top:16px; left:16px; padding:10px 16px; }
}

body.dark{ background:#020617; }
body.emerald{ background:#021b12; }
body.emerald .orb{ background:radial-gradient(circle at top, #4ade80, #14532d); }
body.blue{ background:#07111f; }
body.blue .orb{ background:radial-gradient(circle at top, #60a5fa, #1e3a5f); box-shadow:0 0 120px rgba(59,130,246,0.3); }
body.purple{ background:#13071f; }
body.purple .orb{ background:radial-gradient(circle at top, #a855f7, #3b0764); box-shadow:0 0 120px rgba(168,85,247,0.3); }
body.red{ background:#1f0707; }
body.red .orb{ background:radial-gradient(circle at top, #ef4444, #450a0a); box-shadow:0 0 120px rgba(239,68,68,0.3); }