Hugging Face's logo

Spaces:
akborana4
/
test
Sleeping

App Files Community
3
test
File size: 7,090 Bytes 
c61fc87
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
914f045
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
c61fc87
914f045
c61fc87
914f045
c61fc87
 
914f045
c61fc87
 
 
 
 
 
914f045
c61fc87
914f045
 
c61fc87
 
914f045
 
c61fc87
914f045
 
 
c61fc87
914f045
 
 
c61fc87
914f045
c61fc87
 
914f045
 
c61fc87
 
 
 
914f045
 
 
 
 
 
 
 
 
 
 
 
 
 
c61fc87
914f045
 
 
 
c61fc87
 
914f045
 
 
 
 
c61fc87
914f045
 
 
 
 
c61fc87
914f045
 
 
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
 
:root{
  --bg:#0a0a0f;
  --panel:#121223;
  --panel-2:#0f1020;
  --text:#e7e7ff;
  --muted:#9aa0b3;
  --accent:#7c4dff;
  --accent-2:#00e5ff;
  --good:#00e676;
  --warn:#ffea00;
  --bad:#ff5252;
  --glass:rgba(255,255,255,0.06);
}

*{ box-sizing: border-box; }
html,body,#root{ height:100%; }
body{
  margin:0; background: radial-gradient(1200px 600px at 20% -10%, rgba(124,77,255,.25), transparent 40%),
    radial-gradient(1000px 700px at 120% 10%, rgba(0,229,255,.18), transparent 35%),
    var(--bg);
  color:var(--text); font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Arial, "Apple Color Emoji", "Segoe UI Emoji";
}

/* Responsive tweaks */
@media (max-width: 900px){
  .row { flex-direction: column; }
  .container { padding: 12px; }
  .player-header { gap: 10px; }
  .chat { height: 240px; }
}
@media (max-width: 520px){
  .now-playing .thumb { display:none; }
}

.app-shell{ display:flex; min-height:100%; flex-direction:column; }
.top-glow{ height:4px; width:100%; background: linear-gradient(90deg, var(--accent) 0%, var(--accent-2) 50%, var(--good) 100%); filter: blur(2px); }
.header{ padding:16px 20px; position:sticky; top:0; z-index:10; background: linear-gradient(180deg, rgba(10,10,15,.9), rgba(10,10,15,.5) 80%, transparent); backdrop-filter: blur(6px); border-bottom:1px solid rgba(255,255,255,.06); }
.brand{ display:flex; align-items:center; gap:10px; font-weight:700; }
.brand .logo{ width:28px; height:28px; border-radius:50%; background: radial-gradient(circle at 30% 30%, var(--accent-2), var(--accent)); box-shadow: 0 0 16px rgba(124,77,255,.6), 0 0 24px rgba(0,229,255,.4); }
.container{ max-width:1100px; margin:0 auto; padding:20px; }
.panel{ background: linear-gradient(180deg, var(--panel), var(--panel-2)); border:1px solid rgba(255,255,255,.08); border-radius:14px; padding:16px; box-shadow: 0 8px 40px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.04); }
.row{ display:flex; gap:16px; flex-wrap:wrap; }
.col{ flex:1 1 320px; min-width:320px; }

.input, .select { width:100%; padding:12px 14px; border-radius:10px; border:1px solid rgba(255,255,255,.12); background: rgba(10,10,20,.7); color:var(--text); outline:none; }
.input:focus, .select:focus { border-color: var(--accent-2); box-shadow: 0 0 0 3px rgba(0,229,255,.15); }

.btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:10px 14px; border-radius:10px; cursor:pointer; border:1px solid rgba(255,255,255,.12); background: rgba(20,20,35,.7); color:var(--text); transition: transform .08s ease, box-shadow .15s ease, background .15s ease; }
.btn:hover{ transform: translateY(-1px); box-shadow: 0 6px 16px rgba(124,77,255,.25); }
.btn.primary{ background: linear-gradient(90deg, var(--accent), var(--accent-2)); border-color: transparent; }
.btn.good{ background: linear-gradient(90deg, #00c853, #00e5ff); border-color: transparent; }
.btn.warn{ background: linear-gradient(90deg, #ff9800, #ff5252); border-color: transparent; }

.section-title{ font-weight:700; margin:0 0 10px; letter-spacing:.3px; }
.kbd{ font-family: ui-monospace, SFMono-Regular, Menlo, monospace; padding:2px 6px; border-radius:6px; background: rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.1); }

.player{ border-radius:14px; overflow:hidden; position:relative; background: rgba(0,0,0,.25); border:1px solid rgba(255,255,255,.08); }
.player-header{ display:flex; align-items:center; justify-content:space-between; padding:12px 14px; background: linear-gradient(90deg, rgba(124,77,255,.18), rgba(0,229,255,.18)); border-bottom:1px solid rgba(255,255,255,.08); flex-wrap: wrap; gap:8px; }
.player-body{ padding:12px; }

.badge{ display:inline-block; padding:4px 8px; border-radius:999px; font-size:12px; letter-spacing:.3px; background: rgba(124,77,255,.18); border:1px solid rgba(124,77,255,.35); }
.tag{ font-size:12px; opacity:.9; padding:2px 6px; border-radius:999px; border:1px solid rgba(255,255,255,.12); }

.chat{ display:flex; flex-direction:column; gap:8px; height:280px; }
.chat-log{ flex:1; overflow:auto; padding:10px; border-radius:10px; background: rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08); }
.chat-input{ display:flex; gap:8px; flex-wrap: wrap; }

.member-list{ display:flex; flex-direction:column; gap:8px; max-height:280px; overflow:auto; }
.member{ display:flex; align-items:center; gap:10px; padding:8px; border-radius:10px; background: rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08); }
.avatar{ width:28px; height:28px; border-radius:50%; background: radial-gradient(circle at 30% 30%, var(--accent-2), var(--accent)); box-shadow: 0 0 10px rgba(124,77,255,.4); }

.bar{ height:8px; background: rgba(255,255,255,.06); border-radius:999px; overflow:hidden; border:1px solid rgba(255,255,255,.08); }
.bar > span{ display:block; height:100%; background: linear-gradient(90deg, var(--accent), var(--accent-2)); }

.toast-wrap{ position:fixed; right:16px; bottom:16px; display:flex; flex-direction:column; gap:10px; z-index:9999; }
.toast{ background: rgba(15,15,30,.9); border:1px solid rgba(255,255,255,.12); color:var(--text); padding:10px 12px; border-radius:10px; min-width:220px; max-width:320px; box-shadow: 0 8px 24px rgba(0,0,0,.45); }
.toast.good{ border-color: rgba(0,230,118,.5); }
.toast.warn{ border-color: rgba(255,234,0,.5); }
.toast.bad{ border-color: rgba(255,82,82,.5); }

.modal-backdrop{ position:fixed; inset:0; background: rgba(0,0,0,.5); display:flex; align-items:center; justify-content:center; z-index: 2000; }
.modal{ width: min(520px, 92vw); background: var(--panel); border:1px solid rgba(255,255,255,.1); border-radius:14px; padding:16px; box-shadow: 0 16px 60px rgba(0,0,0,.6); }

.room-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap:12px; }
.room-card{ border:1px solid rgba(255,255,255,.1); border-radius:12px; padding:12px; background: rgba(255,255,255,.04); }

/* DJ vibe ambient overlay for players */
.ambient{
  position:absolute; inset:0; pointer-events:none;
  background: radial-gradient(600px 300px at 20% 10%, rgba(124,77,255,.15), transparent 40%),
              radial-gradient(600px 300px at 80% 90%, rgba(0,229,255,.12), transparent 40%);
  mix-blend-mode: screen;
  animation: pulse 8s ease-in-out infinite;
  opacity:.8;
}
@keyframes pulse{
  0%{ transform: scale(1); opacity:.6; }
  50%{ transform: scale(1.03); opacity:.95; }
  100%{ transform: scale(1); opacity:.6; }
}

/* Hero background using artwork with glow */
.hero-thumb{
  position:absolute; inset:0; filter: blur(40px) saturate(140%); opacity:.22;
  background-size: cover; background-position: center;
  transform: scale(1.1);
}

/* Mentions dropdown */
.mentions{
  position: absolute; background: var(--panel); border:1px solid rgba(255,255,255,.12); border-radius:10px; padding:6px;
  box-shadow: 0 8px 24px rgba(0,0,0,.45); z-index: 20; width: 220px; max-height: 220px; overflow: auto;
}
.mentions .item{ padding:6px 8px; border-radius:8px; cursor:pointer; }
.mentions .item:hover{ background: rgba(255,255,255,.08); }