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

[FEAT] Improved UI

Browse Source
This commit is contained in:
root
2026-01-01 00:47:28 +01:00
parent 784c95555f
commit 89d369598f
19 changed files with 1192 additions and 976 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
src/components/FileUploader.vue
View File

@@ -1,8 +1,8 @@
<template>
<div
class="relative border-3 border-dashed rounded-2xl p-8 sm:p-12 text-center transition-all duration-300 cursor-pointer group overflow-hidden"
class="relative border-3 border-dashed rounded-2xl p-8 sm:p-12 text-center cursor-pointer group overflow-hidden"
:class="{
'border-blue-400 bg-blue-50 dark:border-blue-400 dark:bg-blue-900/40 scale-[1.02]': isDragging,
'border-blue-400 bg-blue-50 dark:border-blue-400 dark:bg-blue-900/40': isDragging,
'border-gray-300 bg-gray-50/50 hover:border-blue-400 hover:bg-blue-50/80 dark:border-gray-600 dark:bg-gray-800/30 dark:hover:border-blue-400 dark:hover:bg-blue-900/30': !isDragging,
}"
@dragenter.prevent="isDragging = true"
@@ -12,12 +12,12 @@
@click="openFileDialog"
data-rybbit-event="file-upload-area"
>
<div class="absolute inset-0 bg-blue-400/0 group-hover:bg-blue-400/5 transition-all duration-300"></div>
<div class="absolute inset-0 bg-blue-400/0 group-hover:bg-blue-400/5"></div>
<input ref="fileInput" type="file" multiple accept="image/*,.json" class="hidden" @change="handleFileChange" />
<div class="relative z-10">
<div class="mb-6 transform transition-transform duration-300" :class="isDragging ? 'scale-110' : 'group-hover:scale-105'">
<div class="mb-6" :class="isDragging ? 'scale-110' : ''">
<div class="w-20 h-20 sm:w-24 sm:h-24 mx-auto mb-4 bg-blue-100 dark:bg-blue-900/50 rounded-2xl flex items-center justify-center shadow-lg">
<i class="fas fa-cloud-upload-alt text-4xl sm:text-5xl text-blue-600 dark:text-blue-400"></i>
</div>
@@ -36,7 +36,7 @@
<div class="h-px flex-1 bg-gray-300 dark:bg-gray-600"></div>
</div>
<button class="px-8 py-3.5 bg-blue-500 hover:bg-blue-600 dark:bg-blue-600 dark:hover:bg-blue-700 text-white font-semibold rounded-xl shadow-lg hover:shadow-xl transition-all transform hover:scale-105 flex items-center justify-center gap-3 mx-auto" data-rybbit-event="select-files">
<button class="px-8 py-3.5 bg-blue-500 hover:bg-blue-600 dark:bg-blue-600 dark:hover:bg-blue-700 text-white font-semibold rounded-xl shadow-lg hover:shadow-xl flex items-center justify-center gap-3 mx-auto" data-rybbit-event="select-files">
<i class="fas fa-folder-open text-lg"></i>
<span>Browse Files</span>
</button>