brandon/bang-web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

design improvments

Browse Source 
redesigned compose panel
added icons
added read reciept functionality
fixed dark mode
This commit is contained in:
Brandon Brunson
2025-06-07 21:08:20 -07:00
parent f2503d5ec9
commit bdcc82bc3f
6 changed files with 688 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
inbox.html
View File

@@ -12,11 +12,12 @@
<h2>bang</h2>
<nav>
<ul>
<li><button id="sidebar-inbox" class="sidebar-btn active">Inbox</button></li>
<li><button id="sidebar-sent" class="sidebar-btn">Sent</button></li>
<li><button id="sidebar-inbox" class="sidebar-btn active"><img src="icons/inbox.svg" alt="Inbox" class="sidebar-icon">Inbox</button></li>
<li><button id="sidebar-sent" class="sidebar-btn"><img src="icons/sent.svg" alt="Sent" class="sidebar-icon">Sent</button></li>
</ul>
</nav>
<button class="compose-btn" id="openComposeBtn">Compose</button>
<button class="darkmode-btn" id="toggleDarkModeBtn">Toggle Dark Mode</button>
<button class="logout-btn" onclick="logout()">Logout</button>
</aside>
<main class="main-content">
@@ -26,18 +27,15 @@
</main>
</div>
<div id="composeOverlay" class="modal-overlay" style="display:none;">
<div class="modal-content">
<h2>Compose Email</h2>
<form id="composeForm">
<input type="text" id="composeTo" placeholder="To (person!place.com)" required><br>
<input type="text" id="composeSubject" placeholder="Subject" required><br>
<textarea id="composeBody" placeholder="Message" required></textarea><br>
<button type="submit">Send</button>
<button type="button" id="closeComposeBtn">Cancel</button>
</form>
<p id="composeError" class="error"></p>
</div>
<div id="composePanel" class="compose-panel" style="display:none;">
<button type="button" id="composeCloseXBtn" style="position:absolute;top:8px;right:12px;font-size:1.5em;background:none;border:none;color:#888;cursor:pointer;line-height:1;z-index:10;" aria-label="Close">&times;</button>
<form id="composeForm">
<input type="text" id="composeTo" placeholder="To (person!place.com)" required spellcheck="false"><br>
<input type="text" id="composeSubject" placeholder="Subject" required><br>
<textarea id="composeBody" placeholder="Message" required></textarea><br>
<button type="submit">Send</button>
</form>
<p id="composeError" class="error"></p>
</div>
<script src="main.js"></script>