Mlcavalho1andClaude Sonnet 4.6
c327d5c970
Implementa o sistema visual Arcade Neon do neon-handoff/ em todo o app: - tokens.css: tokens --fc-*, utilities (fc-pixel/mono/body/glow), form inputs/buttons globais - AppHud.vue: HUD persistente com LV/XP/META + nav chips por rota - BottomNav.vue: nav mobile com 5 rotas - NeonPanel.vue, CharacterSprite.vue, XPBar.vue, HUDStat.vue: componentes base - MonthSwitcher.vue, LevelUpModal.vue - HomeView, CharacterView, TransactionsView, ImportView, CategoriesView, AccountsView, SettingsView: reescritos com Arcade Neon - sprites PNG (lv01–lv15) + sprite-data.json: cosméticos com temas de cor - game.ts: equippedTheme getter para merge de cores do cosmético equipado - 008_cosmetics.sql: seeds alinhados com sprite-data.json Co-Authored-By: Claude Sonnet 4.6 <[email protected]>
36 lines
1.2 KiB
Vue
36 lines
1.2 KiB
Vue
<template>
|
|
<nav class="fc-bottom-nav">
|
|
<RouterLink to="/" class="fc-bottom-nav__item fc-pixel">HOME</RouterLink>
|
|
<RouterLink to="/transacoes" class="fc-bottom-nav__item fc-pixel">TX</RouterLink>
|
|
<RouterLink to="/importar" class="fc-bottom-nav__item fc-pixel add">+</RouterLink>
|
|
<RouterLink to="/personagem" class="fc-bottom-nav__item fc-pixel">PERS.</RouterLink>
|
|
<RouterLink to="/contas" class="fc-bottom-nav__item fc-pixel">¤</RouterLink>
|
|
</nav>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.fc-bottom-nav {
|
|
display: none;
|
|
position: fixed; bottom: 0; left: 0; right: 0;
|
|
background: var(--fc-bg-panel);
|
|
border-top: 2px solid var(--fc-panel-edge);
|
|
z-index: 100;
|
|
padding: 0 4px env(safe-area-inset-bottom);
|
|
}
|
|
.fc-bottom-nav__item {
|
|
flex: 1; display: flex; align-items: center; justify-content: center;
|
|
padding: 12px 4px;
|
|
font-size: 7px; color: var(--fc-text-dim);
|
|
text-decoration: none;
|
|
transition: color .12s;
|
|
}
|
|
.fc-bottom-nav__item.router-link-active { color: var(--fc-accent-2); }
|
|
.fc-bottom-nav__item.add {
|
|
font-size: 18px; color: var(--fc-accent);
|
|
text-shadow: 0 0 8px var(--fc-accent);
|
|
}
|
|
@media (max-width: 767px) {
|
|
.fc-bottom-nav { display: flex; }
|
|
}
|
|
</style>
|