Skip to content

Commit bfe138e

Browse files
aishitecreateaishitecreate
authored
Integrated Sidebar Fixes, UI Changes
1 parent 624d0e5 commit bfe138e

File tree

1 file changed

+121
-79
lines changed

1 file changed

+121
-79
lines changed

‎index.html‎

Lines changed: 121 additions & 79 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,8 @@
22
<html lang="en">
33
<head>
44
<meta charset="UTF-8">
5-
<title>POBFUS | Integrated Ticker Build</title>
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>POBFUS | Millennial Elite 1.13.100</title>
67
<style>
78
:root {
89
--gh-bg: #0d1117;
@@ -15,80 +16,88 @@
1516
--p-gold: #ffcc00;
1617
}
1718

18-
body {
19-
background-color: #010409;
20-
color: #c9d1d9;
21-
font-family: "Arial", sans-serif;
22-
margin: 0;
19+
* { box-sizing: border-box; }
20+
body, html { margin: 0; padding: 0; background-color: #010409; color: #c9d1d9; font-family: "Segoe UI", Arial, sans-serif; scroll-behavior: smooth; }
21+
22+
/* --- LANDING SECTION --- */
23+
.welcome-screen {
24+
height: 100vh;
2325
display: flex;
2426
flex-direction: column;
25-
height: 100vh;
26-
overflow: hidden;
27+
justify-content: center;
28+
align-items: center;
29+
text-align: center;
30+
background: radial-gradient(circle at center, #0d1117 0%, #010409 100%);
31+
padding: 20px;
2732
}
2833

34+
.welcome-screen h1 { font-size: 3rem; margin: 0; color: #fff; letter-spacing: -1px; }
35+
.welcome-screen p { color: #8b949e; max-width: 600px; line-height: 1.6; }
36+
.scroll-hint { margin-top: 50px; color: var(--p-gold); font-size: 12px; font-weight: bold; animation: bounce 2s infinite; }
37+
38+
@keyframes bounce { 0%, 20%, 50%, 80%, 100% {transform: translateY(0);} 40% {transform: translateY(-10px);} 60% {transform: translateY(-5px);} }
39+
40+
/* --- MAIN APP CONTAINER --- */
41+
.app-wrapper { height: 100vh; display: flex; flex-direction: column; border-top: 1px solid var(--gh-border); }
42+
2943
header {
3044
background: var(--gh-bg);
3145
border-bottom: 1px solid var(--gh-border);
3246
padding: 0 15px;
3347
display: flex;
3448
align-items: center;
35-
justify-content: space-between;
3649
height: 48px;
3750
flex-shrink: 0;
3851
}
3952

4053
.app-container { display: flex; flex: 1; overflow: hidden; }
4154

55+
/* SIDEBAR CONTROLS */
4256
aside {
43-
width: 240px;
57+
width: 280px;
4458
background: var(--gh-sidebar);
4559
border-right: 1px solid var(--gh-border);
4660
display: flex;
4761
flex-direction: column;
4862
overflow-y: auto;
63+
flex-shrink: 0;
4964
}
5065

51-
.sidebar-section { padding: 15px; border-bottom: 1px solid var(--gh-border); }
52-
.sidebar-section h4 { margin: 0 0 10px 0; color: #555; text-transform: uppercase; font-size: 11px; font-weight: bold; }
66+
.sidebar-section { padding: 20px; border-bottom: 1px solid var(--gh-border); }
67+
.sidebar-section h4 { margin: 0 0 15px 0; color: #555; text-transform: uppercase; font-size: 10px; letter-spacing: 1px; }
5368

54-
.workspace { display: flex; flex-direction: column; flex: 1; overflow: hidden; }
69+
.btn-block {
70+
width: 100%;
71+
padding: 12px;
72+
margin-bottom: 10px;
73+
border-radius: 6px;
74+
font-weight: bold;
75+
cursor: pointer;
76+
border: 1px solid transparent;
77+
font-size: 12px;
78+
transition: 0.2s;
79+
}
80+
.btn-primary { background: #238636; color: white; }
81+
.btn-primary:hover { background: #2ea043; }
82+
.btn-outline { background: transparent; border-color: var(--gh-border); color: #c9d1d9; }
83+
.btn-outline:hover { background: #30363d; }
84+
85+
.workspace { display: flex; flex-direction: column; flex: 1; min-width: 0; }
5586

56-
/* INTEGRATED TOPBAR TIMER */
5787
.ticker-bar {
5888
background: #1c2128;
5989
border-bottom: 1px solid var(--gh-border);
60-
padding: 4px 15px;
61-
display: flex;
62-
align-items: center;
63-
justify-content: center;
64-
gap: 20px;
65-
flex-shrink: 0;
66-
}
67-
68-
#status-ticker {
69-
font-size: 12px;
70-
font-weight: bold;
71-
min-width: 250px;
90+
padding: 10px;
7291
text-align: center;
73-
}
74-
75-
.override-btn {
76-
background: #21262d;
77-
border: 1px solid var(--gh-border);
78-
color: #8b949e;
79-
font-size: 10px;
80-
padding: 4px 10px;
81-
border-radius: 4px;
82-
cursor: pointer;
92+
font-family: monospace;
93+
font-size: 12px;
8394
font-weight: bold;
84-
transition: 0.2s;
8595
}
86-
.override-btn.active-bmas { border-color: var(--p-red); color: var(--p-red); }
87-
.override-btn.active-mday { border-color: var(--p-gold); color: var(--p-gold); }
8896

89-
.editors { display: flex; flex: 1; border-bottom: 1px solid var(--gh-border); }
97+
/* EDITORS */
98+
.editors { display: flex; flex: 1; min-height: 0; }
9099
.pane { flex: 1; display: flex; flex-direction: column; border-right: 1px solid var(--gh-border); }
91-
.pane-label { background: #0d1117; padding: 6px 15px; font-size: 11px; color: #555; font-weight: bold; }
100+
.pane-label { background: #0d1117; padding: 8px 15px; font-size: 11px; color: #555; font-weight: bold; border-bottom: 1px solid var(--gh-border); }
92101

93102
textarea {
94103
flex: 1;
@@ -102,50 +111,83 @@
102111
color: var(--p-blue);
103112
}
104113

105-
.log-house-container { height: 240px; display: flex; flex-direction: column; flex-shrink: 0; }
106-
#log-roof { background: #333; height: 30px; display: flex; align-items: center; padding: 0 15px; font-size: 11px; font-weight: bold; transition: 0.5s; border-bottom: 2px solid #000; }
107-
#steve-logs { flex: 1; background: var(--rbx-log-bg); overflow-y: scroll; padding: 10px; font-size: 13px; }
114+
/* LOG DOCK */
115+
.log-dock { height: 220px; background: var(--rbx-log-bg); border-top: 2px solid #333; display: flex; flex-direction: column; }
116+
.log-header { background: #2a2a2a; height: 32px; display: flex; align-items: center; padding: 0 10px; gap: 15px; }
117+
.log-tab { font-size: 11px; font-weight: bold; color: #8b949e; cursor: pointer; }
118+
.log-tab.active { color: #fff; border-bottom: 2px solid var(--p-gold); }
119+
.log-body { flex: 1; overflow-y: auto; padding: 10px; font-size: 13px; }
108120
</style>
109121
</head>
110122
<body>
111123

112-
<header>
113-
<div class="header-brand">
114-
<span style="font-weight:bold;">POBFUS <span style="font-weight:normal; color:#444;">1.13.100</span></span>
115-
</div>
116-
<button style="background:#238636; color:white; border:none; padding:6px 18px; border-radius:4px; cursor:pointer; font-weight:bold;" onclick="_011._dl()">EXECUTE</button>
117-
</header>
118-
119-
<div class="app-container">
120-
<aside>
121-
<div class="sidebar-section">
122-
<h4>Update Archives</h4>
123-
<div style="color:#8b949e; margin-bottom:4px;">v1.13.100 (Stable)</div>
124-
<div style="color:#444; text-decoration: line-through;">v0.7 (Deprecated)</div>
125-
</div>
126-
<div class="sidebar-section">
127-
<h4>Household</h4>
128-
<div style="color:#c9d1d9; cursor:pointer; margin-bottom:8px;" onclick="_011._remote()">📺 TV Remote</div>
129-
<div style="color:#444;">Guest Room (PH House)</div>
130-
</div>
131-
</aside>
124+
<section class="welcome-screen">
125+
<div style="color: var(--p-gold); font-weight: bold; margin-bottom: 10px;">V1.13.100</div>
126+
<h1>POBFUS ELITE</h1>
127+
<p>From v0.1 Bytecode to the Millennial Build. Professional-grade Lua obfuscation inspired by the heritage of Iron Lung and the Pilot's vision.</p>
128+
<button class="btn-block btn-primary" style="width: 200px;" onclick="document.getElementById('main-app').scrollIntoView()">ENTER WORKSPACE</button>
129+
<div class="scroll-hint">SCROLL TO OPERATE ▼</div>
130+
</section>
131+
132+
<div class="app-wrapper" id="main-app">
133+
<header>
134+
<div style="font-weight: bold; font-size: 14px;">POBFUS <span style="color:#555">MILLENNIAL</span></div>
135+
<div id="status-ticker" style="margin-left: auto; color: var(--p-red);">SYNCING...</div>
136+
</header>
137+
138+
<div class="app-container">
139+
<aside>
140+
<div class="sidebar-section">
141+
<h4>Core Operations</h4>
142+
<button class="btn-block btn-primary" onclick="_011._transform()">TRANSFORM SOURCE</button>
143+
<button class="btn-block btn-outline" onclick="_011._dl()">DOWNLOAD BUILD</button>
144+
</div>
145+
146+
<div class="sidebar-section">
147+
<h4>Technical Heritage</h4>
148+
<div style="font-size: 11px; line-height: 1.5; color: #8b949e;">
149+
<b style="color: var(--p-blue);">v0.1</b>: Bytecode Alpha<br>
150+
<b style="color: var(--p-gold);">v0.7</b>: Iron Lung Era<br>
151+
<b style="color: var(--p-green);">v1.13.100</b>: Elite Millennial
152+
</div>
153+
</div>
132154

133-
<div class="workspace">
134-
<div class="ticker-bar">
135-
<button id="btn-bmas" class="override-btn" onclick="_011.toggle('bmas')">BYTESMAS OVERRIDE</button>
136-
<div id="status-ticker">INIT...</div>
137-
<button id="btn-mday" class="override-btn" onclick="_011.toggle('mday')">MILLENNIAL DAY OVERRIDE</button>
138-
</div>
155+
<div class="sidebar-section">
156+
<h4>Heritage Repos</h4>
157+
<div style="font-size: 10px; color: #58a6ff;">
158+
github.com/steveroblox/pobfus<br>
159+
github.com/legacy-lua/iron-lung
160+
</div>
161+
</div>
139162

140-
<div class="editors">
141-
<div class="pane">
142-
<div class="pane-label">SOURCE.LUA</div>
143-
<textarea id="input" spellcheck="false" placeholder="-- Input code..."></textarea>
163+
<div class="sidebar-section" style="margin-top: auto; border: none;">
164+
<p style="font-size: 10px; font-style: italic; color: var(--p-gold);">Special thanks to all predecessors.</p>
144165
</div>
145-
<div class="pane">
146-
<div class="pane-label">OBFUSCATED.LUA</div>
147-
<textarea id="output-view" readonly placeholder="-- Awaiting..."></textarea>
166+
</aside>
167+
168+
<div class="workspace">
169+
<div class="editors">
170+
<div class="pane">
171+
<div class="pane-label">SOURCE.LUA</div>
172+
<textarea id="input" placeholder="-- Paste source code here..."></textarea>
173+
</div>
174+
<div class="pane">
175+
<div class="pane-label">ELITE_OUTPUT.LUA</div>
176+
<textarea id="output-view" readonly placeholder="-- Transformed code will appear here..."></textarea>
177+
</div>
178+
</div>
179+
180+
<div class="log-dock">
181+
<div class="log-header">
182+
<div id="tab-sys" class="log-tab active" onclick="_011.switchTab('sys')">OUTPUT</div>
183+
<div id="tab-chat" class="log-tab" onclick="_011.switchTab('chat')">FAMILY CHAT</div>
184+
</div>
185+
<div id="steve-logs" class="log-body"></div>
148186
</div>
149187
</div>
150-
151-
<div class
188+
</div>
189+
</div>
190+
191+
<script src="script.js"></script>
192+
</body>
193+
</html>

0 commit comments

Comments
 (0)