root/spritesheet-generator
2
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[FEAT] Enhance UI

Browse Source
This commit is contained in:
root
2025-11-25 18:42:32 +01:00
parent 9717ab9575
commit 4bbe797d9b
1 changed files with 25 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
src/App.vue
View File

@@ -1,7 +1,7 @@
<template>
<div class="min-h-screen lg:h-screen flex flex-col p-4 sm:p-8 bg-slate-50 dark:bg-gray-950 transition-colors duration-300">
<div class="flex flex-col flex-1 lg:overflow-hidden">
<header class="mb-4 sm:mb-6">
<header class="mb-4 sm:mb-3">
<div class="flex flex-col sm:flex-row justify-between items-center gap-4 mb-6">
<div class="text-center sm:text-left">
<h1 class="text-3xl sm:text-5xl font-bold text-gray-900 dark:text-gray-100 tracking-tight mb-2">Spritesheet generator</h1>
@@ -49,6 +49,28 @@
</div>
</header>
<div class="flex-shrink-0 p-3 mb-3 bg-gradient-to-r from-blue-50 to-purple-50 dark:from-gray-800 dark:to-gray-700 border border-blue-200 dark:border-gray-600 rounded-2xl">
<div class="flex flex-col sm:flex-row items-center justify-between gap-2">
<div class="flex items-center gap-2 text-center sm:text-left">
<i class="text-lg text-blue-600 dark:text-blue-400 fas fa-ad"></i>
<span class="text-sm font-semibold text-gray-800 dark:text-gray-100">Your ad here</span>
<span class="hidden sm:inline text-xs text-gray-600 dark:text-gray-400">- Reach thousands of game developers and creative professionals</span>
</div>
<div class="flex gap-2">
<a href="mailto:root@adhd.sh" class="inline-flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium text-white bg-blue-600 hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-600 rounded transition-all">
<i class="text-xs fas fa-envelope"></i>
<span class="hidden sm:inline">root@adhd.sh</span>
<span class="sm:hidden">Email</span>
</a>
<a href="https://discord.gg/JTev3nzeDa" target="_blank" class="inline-flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium text-white bg-indigo-600 hover:bg-indigo-700 dark:bg-indigo-500 dark:hover:bg-indigo-600 rounded transition-all">
<i class="text-xs fab fa-discord"></i>
<span class="hidden sm:inline">nu11ed</span>
<span class="sm:hidden">Discord</span>
</a>
</div>
</div>
</div>
<main class="flex flex-col flex-1 bg-white/90 dark:bg-gray-800/90 backdrop-blur-sm rounded-3xl shadow-xl border border-gray-200/50 dark:border-gray-700/50 lg:overflow-hidden transition-all duration-300">
<!-- Welcome state -->
<div v-if="!layers.some(l => l.sprites.length)" class="p-6 sm:p-10 overflow-y-auto">
@@ -271,6 +293,7 @@
<div class="flex gap-1 p-2">
<button
@click="activeTab = 'canvas'"
class="border-gray-600 border"
:class="[
'flex items-center gap-2 px-4 py-2 text-sm font-medium rounded-lg transition-all cursor-pointer',
activeTab === 'canvas' ? 'bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 shadow-sm' : 'text-gray-600 dark:text-gray-400 hover:bg-white/50 dark:hover:bg-gray-800/50',
@@ -281,6 +304,7 @@
</button>
<button
@click="activeTab = 'preview'"
class="border-gray-600 border"
:class="[
'flex items-center gap-2 px-4 py-2 text-sm font-medium rounded-lg transition-all cursor-pointer',
activeTab === 'preview' ? 'bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 shadow-sm' : 'text-gray-600 dark:text-gray-400 hover:bg-white/50 dark:hover:bg-gray-800/50',
@@ -305,28 +329,6 @@
</div>
</div>
</main>
<div class="flex-shrink-0 p-3 mt-3 bg-gradient-to-r from-blue-50 to-purple-50 dark:from-gray-800 dark:to-gray-700 border border-blue-200 dark:border-gray-600 rounded-lg">
<div class="flex flex-col sm:flex-row items-center justify-between gap-2">
<div class="flex items-center gap-2 text-center sm:text-left">
<i class="text-lg text-blue-600 dark:text-blue-400 fas fa-ad"></i>
<span class="text-sm font-semibold text-gray-800 dark:text-gray-100">Your ad here</span>
<span class="hidden sm:inline text-xs text-gray-600 dark:text-gray-400">- Reach thousands of game developers and creative professionals</span>
</div>
<div class="flex gap-2">
<a href="mailto:root@adhd.sh" class="inline-flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium text-white bg-blue-600 hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-600 rounded transition-all">
<i class="text-xs fas fa-envelope"></i>
<span class="hidden sm:inline">root@adhd.sh</span>
<span class="sm:hidden">Email</span>
</a>
<a href="https://discord.gg/JTev3nzeDa" target="_blank" class="inline-flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium text-white bg-indigo-600 hover:bg-indigo-700 dark:bg-indigo-500 dark:hover:bg-indigo-600 rounded transition-all">
<i class="text-xs fab fa-discord"></i>
<span class="hidden sm:inline">nu11ed</span>
<span class="sm:hidden">Discord</span>
</a>
</div>
</div>
</div>
</div>
<HelpModal :is-open="isHelpModalOpen" @close="closeHelpModal" />