randogoth/gsmol
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: restyle the ui in gmail's design language

Browse source
This commit is contained in:
randogoth 2026-09-26 16:52:40 +03:00
parent a6b972fec9
commit 9842302c50
3 changed files with 288 additions and 132 deletions
Download patch file Download diff file Expand all files Collapse all files

32
web/index.html
View file

@ -7,14 +7,15 @@
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h1>smol mail</h1>
<div id="account" class="account"></div>
<nav class="actions">
<header class="topbar">
<div class="brand">smol mail</div>
<input id="search" class="search" placeholder="search mail" spellcheck="false">
<div class="top-actions">
<button id="fetch">fetch</button>
<button id="write">write</button>
<button id="settings-open">settings</button>
</nav>
<div id="account" class="account"></div>
<div id="avatar" class="avatar"></div>
</div>
</header>
<main id="setup" class="setup" hidden>
@ -29,10 +30,13 @@
</main>
<main id="app" hidden>
<nav id="folders" class="folders">
<button data-folder="inbox" class="active">inbox</button>
<button data-folder="sent">sent</button>
<button data-folder="contacts">contacts</button>
<nav class="rail">
<button id="write" class="compose">compose</button>
<div id="folders">
<button data-folder="inbox" class="active">inbox <span id="count-inbox" class="count"></span></button>
<button data-folder="sent">sent</button>
<button data-folder="contacts">contacts</button>
</div>
</nav>
<section id="list" class="list"></section>
<article id="view" class="view"><p class="placeholder">select a message</p></article>
@ -40,9 +44,9 @@
<dialog id="compose">
<form id="compose-form" method="dialog">
<label>to <input name="to" required spellcheck="false" placeholder="alice@example.org or smol://…"></label>
<label>subject <input name="subject" spellcheck="false"></label>
<textarea name="body" rows="12"></textarea>
<input name="to" required spellcheck="false" placeholder="to: alice@example.org or smol://…">
<input name="subject" spellcheck="false" placeholder="subject">
<textarea name="body" rows="12" placeholder="message"></textarea>
<footer>
<label class="anon"><input type="checkbox" name="anonymous"> anonymous — omit my address</label>
<span id="compose-error" class="error"></span>
@ -87,7 +91,7 @@
<footer><button id="settings-close">close</button></footer>
</dialog>
<div id="status" class="status"></div>
<div id="status" class="toast" hidden></div>
<script type="module" src="js/app.js"></script>
</body>
</html>