mirror of
https://github.com/kccleoc/seedpgp-web.git
synced 2026-03-07 01:47:52 +08:00
185efe454f
## Major Changes ### Mobile-First Responsive Design - Converted entire app to mobile-first single-column layout - Constrained max-width to 448px (mobile phone width) - Black margins on desktop, centered content - Removed all multi-column grids (md:grid-cols-3) ### Header Reorganization (3-Row Layout) - Row 1: App logo + title + version - Row 2: Security badges + action buttons (Empty, Reset) - Row 3: Navigation tabs (Create, Backup, Restore, Blender) - Replaced text buttons with emoji icons (📋 clipboard, 🙈 privacy mask) - Consistent button sizing across all tabs ### Font Size Reductions - Reduced all button text sizes for mobile density - Main buttons: py-4 → py-3, added text-sm - Labels: text-xs → text-[10px] - Placeholders: consistent text-[10px] across all inputs - Input fields: text-sm → text-xs, p-4 → p-3 ### Create Tab Improvements - Changed "GENERATE NEW SEED" from button-style to banner - Left-aligned banner with gradient background - Equal-width button grid (12/24 Words, Backup/Seed Blender) - Used grid-cols-2 for consistent sizing ### Backup Tab Improvements - Simplified drag-drop area with 📎 emoji - Reduced padding and text sizes - Cleaner, shorter copy - PGP label font size: text-xs → text-[12px] ### SeedBlender Component - Reorganized mnemonic input cards: textarea on row 1, buttons on row 2 - QR button (left) and X button (right) alignment - Consistent placeholder text sizing (text-[10px]) - Shortened dice roll placeholder text ### HTTPS Development Server - Added @vitejs/plugin-basic-ssl for HTTPS in dev mode - Configured server to listen on 0.0.0.0:5173 - Fixed Web Crypto API issues on mobile (requires secure context) - Enables testing on iPhone via local network ## Technical Details - All changes maintain cyberpunk theme and color scheme - Improved mobile usability and visual consistency - No functionality changes, pure UI/UX improvements
60 lines
1.4 KiB
TypeScript
60 lines
1.4 KiB
TypeScript
import { defineConfig } from 'vite'
|
|
import react from '@vitejs/plugin-react'
|
|
import basicSsl from '@vitejs/plugin-basic-ssl'
|
|
import wasm from 'vite-plugin-wasm'
|
|
import topLevelAwait from 'vite-plugin-top-level-await'
|
|
import { execSync } from 'child_process'
|
|
import fs from 'fs'
|
|
|
|
// Read version from package.json
|
|
const packageJson = JSON.parse(fs.readFileSync('./package.json', 'utf-8'))
|
|
const appVersion = packageJson.version
|
|
|
|
// Get git commit hash
|
|
const gitHash = execSync('git rev-parse --short HEAD').toString().trim()
|
|
|
|
export default defineConfig({
|
|
plugins: [
|
|
wasm(),
|
|
topLevelAwait(),
|
|
basicSsl(),
|
|
react(),
|
|
{
|
|
name: 'html-transform',
|
|
transformIndexHtml(html) {
|
|
return html.replace(/__APP_VERSION__/g, appVersion);
|
|
}
|
|
}
|
|
],
|
|
server: {
|
|
host: '0.0.0.0',
|
|
port: 5173,
|
|
strictPort: true,
|
|
https: true,
|
|
},
|
|
resolve: {
|
|
alias: {
|
|
buffer: 'buffer',
|
|
}
|
|
},
|
|
optimizeDeps: {
|
|
esbuildOptions: {
|
|
define: {
|
|
global: 'globalThis'
|
|
}
|
|
}
|
|
},
|
|
base: '/', // Always use root, since we're Cloudflare Pages only
|
|
publicDir: 'public', // ← Explicitly set (should be default)
|
|
build: {
|
|
outDir: 'dist',
|
|
emptyOutDir: false,
|
|
},
|
|
define: {
|
|
'__APP_VERSION__': JSON.stringify(appVersion),
|
|
'__BUILD_HASH__': JSON.stringify(gitHash),
|
|
'__BUILD_TIMESTAMP__': JSON.stringify(new Date().toISOString()),
|
|
'global': 'globalThis',
|
|
}
|
|
})
|