Skip to content

Commit 89f6b96

Browse files
author
vy do
committed
more changes
1 parent d4d45f0 commit 89f6b96

1 file changed

Lines changed: 159 additions & 73 deletions

File tree

‎index.html‎

Lines changed: 159 additions & 73 deletions
Original file line numberDiff line numberDiff line change
@@ -39,8 +39,8 @@
3939
/* Header with midnight theme */
4040
header {
4141
display: flex;
42-
flex-direction: row; /* Changed from column to row */
43-
align-items: center; /* Center items vertically */
42+
flex-direction: row;
43+
align-items: center;
4444
height: auto;
4545
background: #23263a !important;
4646
backdrop-filter: blur(20px);
@@ -51,9 +51,10 @@
5151
top: 0;
5252
left: 0;
5353
width: 100%;
54-
z-index: 1000;
55-
padding: 1rem 1.5rem; /* Adjusted padding */
56-
justify-content: space-between; /* Space between brand and account links */
54+
padding: 1rem 1.5rem;
55+
justify-content: space-between;
56+
position: relative;
57+
z-index: 1001;
5758
}
5859

5960
.header-main {
@@ -71,7 +72,7 @@
7172
.brand-title {
7273
font-family: 'Rubik', 'Roboto Condensed', 'Segoe UI Bold', sans-serif !important;
7374
font-weight: 700;
74-
font-size: 3rem;
75+
font-size: 2rem;
7576
background: linear-gradient(90deg, #800000, #ff3c38);
7677
-webkit-background-clip: text;
7778
background-clip: text;
@@ -86,24 +87,25 @@
8687
.nav-slider-wrapper {
8788
display: flex;
8889
position: relative;
89-
background: #1f1f2f;
90-
border: 2px solid #444;
90+
background: #101018;
91+
border: none;
9192
border-radius: 999px;
9293
padding: 0.2rem;
9394
gap: 0.25rem;
9495
width: fit-content;
9596
margin: auto;
97+
box-shadow: 0 0 12px rgba(250, 204, 21, 0.1);
9698
}
9799

98100
.nav-tab {
99101
all: unset;
100102
position: relative;
101103
z-index: 2;
102-
padding: 0.5rem 1.2rem;
104+
padding: 0.5rem 1.3rem;
103105
font-family: 'Rubik', sans-serif;
104106
font-size: 0.95rem;
105107
font-weight: 500;
106-
color: #f0f0f0;
108+
color: #eaeaea;
107109
border-radius: 999px;
108110
cursor: pointer;
109111
transition: color 0.2s ease;
@@ -115,6 +117,7 @@
115117

116118
.nav-tab.active {
117119
color: #1a1a1a;
120+
font-weight: 600;
118121
}
119122

120123
.nav-slider-indicator {
@@ -123,7 +126,8 @@
123126
bottom: 0;
124127
left: 0;
125128
width: 0;
126-
background: #facc15;
129+
background: linear-gradient(145deg, #facc15, #ff9f0a);
130+
box-shadow: 0 0 12px rgba(250, 204, 21, 0.4);
127131
border-radius: 999px;
128132
z-index: 1;
129133
transition: all 0.3s ease;
@@ -538,37 +542,100 @@
538542
line-height: 1.2;
539543
}
540544
/* TRENDING SIDEBAR */
541-
.trending-sidebar {
542-
position: fixed;
543-
top: 10rem !important;
544-
left: 2rem;
545-
width: 250px;
546-
background: linear-gradient(to bottom right, #1a1d2e, #23263a) !important;
547-
padding: 0;
548-
border-radius: 0.75rem;
549-
border: 1px solid rgba(255, 255, 255, 0.1) !important;
550-
box-shadow:
551-
0 8px 32px rgba(0, 0, 0, 0.3),
552-
inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
553-
color: #f0f0f0 !important;
554-
font-size: 0.9rem;
555-
z-index: 1000;
556-
transition: transform 0.3s ease, opacity 0.3s ease;
557-
}
545+
.retro-window {
546+
width: 260px;
547+
border: 2px solid #facc15;
548+
background: #111827;
549+
box-shadow: 6px 6px 0px #000;
550+
font-family: 'Rubik', sans-serif;
551+
border-radius: 6px;
552+
position: fixed;
553+
top: 60px;
554+
z-index: 100;
555+
max-height: 0;
556+
overflow: hidden;
557+
transition: max-height 0.3s ease, transform 0.3s ease, opacity 0.3s ease;
558+
}
558559

559-
.trending-sidebar h3 {
560-
margin: 0 0 1rem;
561-
font-size: 1.2rem;
562-
color: #facc15 !important;
563-
text-shadow: 0 0 8px #facc15;
564-
animation: yellowFlicker 2.8s infinite;
565-
}
560+
.retro-window.open {
561+
max-height: 500px;
562+
}
566563

567-
.trending-sidebar ul {
568-
list-style: none;
569-
padding: 0;
570-
margin: 0;
571-
}
564+
.retro-window.trending {
565+
left: 32px;
566+
}
567+
568+
.retro-window.night-crew {
569+
right: 32px;
570+
}
571+
572+
.retro-titlebar {
573+
display: flex;
574+
justify-content: space-between;
575+
align-items: center;
576+
background: #1a1a2e;
577+
color: #facc15;
578+
padding: 0.6rem 1rem;
579+
font-weight: 600;
580+
font-size: 0.95rem;
581+
border-bottom: 1px solid #facc15;
582+
border-radius: 6px 6px 0 0;
583+
}
584+
585+
.retro-buttons {
586+
display: flex;
587+
gap: 0.4rem;
588+
}
589+
590+
.retro-buttons .btn {
591+
width: 12px;
592+
height: 12px;
593+
border-radius: 2px;
594+
background: #333;
595+
border: 1px solid #000;
596+
cursor: pointer;
597+
transition: transform 0.2s ease;
598+
}
599+
600+
.retro-buttons .btn:hover {
601+
transform: scale(1.1);
602+
}
603+
604+
.retro-buttons .red {
605+
background: #ff5f56;
606+
}
607+
.retro-buttons .yellow {
608+
background: #f5b13f;
609+
}
610+
.retro-buttons .green {
611+
background: #27c93f;
612+
}
613+
614+
.retro-content {
615+
padding: 1.2rem;
616+
color: #f1f1f1;
617+
font-size: 0.9rem;
618+
line-height: 1.5;
619+
}
620+
621+
.retro-window.hidden {
622+
opacity: 0;
623+
pointer-events: none;
624+
}
625+
626+
.retro-window.trending.hidden {
627+
transform: translateX(-300px);
628+
}
629+
630+
.retro-window.night-crew.hidden {
631+
transform: translateX(300px);
632+
}
633+
634+
.trending-sidebar ul {
635+
list-style: none;
636+
padding: 0;
637+
margin: 0;
638+
}
572639

573640
.trending-sidebar li {
574641
margin-bottom: 0.75rem;
@@ -1106,16 +1173,17 @@
11061173
@media (max-width: 700px) {
11071174
.trending-open-button,
11081175
.sidebar-toggle-button {
1109-
z-index: 3000 !important;
11101176
position: fixed;
11111177
min-width: 44px;
11121178
min-height: 44px;
11131179
font-size: 1.1rem;
1180+
z-index: 998;
11141181
}
11151182
.trending-sidebar,
11161183
#nightCrewWidget,
1117-
.sidebar-widget {
1118-
z-index: 2000 !important;
1184+
.sidebar-widget,
1185+
.retro-window {
1186+
z-index: 100;
11191187
}
11201188
}
11211189

@@ -1127,7 +1195,7 @@
11271195
}
11281196

11291197
#trendingSidebar {
1130-
color: #f0f0f0 !important;
1198+
display: none !important;
11311199
}
11321200

11331201
#trendingSidebar .sidebar-header {
@@ -1137,6 +1205,10 @@
11371205
font-weight: bold;
11381206
border-radius: 4px 4px 0 0;
11391207
}
1208+
1209+
#toggleTrendingButton {
1210+
display: none !important;
1211+
}
11401212
</style>
11411213
</head>
11421214
<body>
@@ -1185,30 +1257,42 @@
11851257
<img src="https://win98icons.alexmeub.com/icons/png/computer_explorer-5.png" alt="Night Crew" style="width:18px;height:18px;vertical-align:middle;margin-right:6px;">Night Crew
11861258
</button>
11871259

1188-
<div class="sidebar-widget hidden" id="nightCrewWidget">
1189-
<div class="dialog-titlebar">
1190-
<span>Night Crew</span>
1191-
<button class="dialog-close-btn" onclick="toggleSidebar()" title="Close">×</button>
1260+
<div class="retro-window night-crew hidden" id="nightCrewWidget">
1261+
<div class="retro-titlebar">
1262+
<span>🌙 Night Crew</span>
1263+
<div class="retro-buttons">
1264+
<div class="btn red" onclick="toggleSidebar()"></div>
1265+
<div class="btn yellow"></div>
1266+
<div class="btn green"></div>
1267+
</div>
1268+
</div>
1269+
<div class="retro-content">
1270+
<ul>
1271+
<li><span class="status-dot online"></span> @Venus</li>
1272+
<li><span class="status-dot online"></span> @Hijinxx</li>
1273+
<li><span class="status-dot idle"></span> @Belt181</li>
1274+
<li><span class="status-dot offline"></span> @WispEcho</li>
1275+
</ul>
11921276
</div>
1193-
<ul>
1194-
<li><span class="status-dot online"></span> @Venus</li>
1195-
<li><span class="status-dot online"></span> @Hijinxx</li>
1196-
<li><span class="status-dot idle"></span> @Belt181</li>
1197-
<li><span class="status-dot offline"></span> @WispEcho</li>
1198-
</ul>
11991277
</div>
12001278

1201-
<div class="trending-sidebar hidden" id="trendingSidebar">
1202-
<div class="dialog-titlebar">
1203-
<span>What's Trending</span>
1204-
<button class="dialog-close-btn" onclick="toggleTrending()" title="Close">×</button>
1279+
<div class="retro-window trending hidden" id="trendingSidebar">
1280+
<div class="retro-titlebar">
1281+
<span>🔥 What's Trending</span>
1282+
<div class="retro-buttons">
1283+
<div class="btn red" onclick="toggleTrending()"></div>
1284+
<div class="btn yellow"></div>
1285+
<div class="btn green"></div>
1286+
</div>
1287+
</div>
1288+
<div class="retro-content">
1289+
<ul>
1290+
<li>Valorant Night Tournament</li>
1291+
<li>New Apex Patch Notes</li>
1292+
<li>Overwatch 2 Memes</li>
1293+
<li>Looking for Teammates</li>
1294+
</ul>
12051295
</div>
1206-
<ul>
1207-
<li>Valorant Night Tournament</li>
1208-
<li>New Apex Patch Notes</li>
1209-
<li>Overwatch 2 Memes</li>
1210-
<li>Looking for Teammates</li>
1211-
</ul>
12121296
</div>
12131297

12141298
<section class="feed">
@@ -1409,7 +1493,7 @@
14091493
</div>
14101494

14111495
<footer>
1412-
<p>&copy; 2023 Noctive. All rights reserved.</p>
1496+
<p>&copy; 2025 Noctive. All rights reserved. built on silliness and a dream and a lil anger</p>
14131497
</footer>
14141498

14151499
<script src="index.js"></script>
@@ -1453,16 +1537,18 @@
14531537
}
14541538
}
14551539

1456-
function toggleSidebar() {
1457-
const sidebar = document.getElementById('nightCrewWidget');
1458-
console.log('Toggling Night Crew Widget:', sidebar);
1459-
sidebar.classList.toggle('hidden');
1540+
function toggleTrending() {
1541+
const trendingWindow = document.getElementById('trendingSidebar');
1542+
console.log('Toggling Trending Window:', trendingWindow);
1543+
trendingWindow.classList.toggle('hidden');
1544+
trendingWindow.classList.toggle('open');
14601545
}
14611546

1462-
function toggleTrending() {
1463-
const trendingSidebar = document.getElementById('trendingSidebar');
1464-
console.log('Toggling Trending Sidebar:', trendingSidebar);
1465-
trendingSidebar.classList.toggle('hidden');
1547+
function toggleSidebar() {
1548+
const nightWindow = document.getElementById('nightCrewWidget');
1549+
console.log('Toggling Night Crew Widget:', nightWindow);
1550+
nightWindow.classList.toggle('hidden');
1551+
nightWindow.classList.toggle('open');
14661552
}
14671553

14681554
// Navigation Slider

0 commit comments

Comments
 (0)