Skip to content

Commit ccf36fd

Browse files
mariojgtmariojgt
committed
updates in the UI and code refactor
1 parent 605935b commit ccf36fd

File tree

13 files changed

+2931
-873
lines changed

13 files changed

+2931
-873
lines changed

‎Publish/Resource/css/backend/app.css‎

Lines changed: 3 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -2,40 +2,9 @@
22
@source "../views";
33
@plugin "daisyui";
44

5-
@plugin "daisyui/theme" {
6-
name: "admin";
7-
default: false;
8-
prefersdark: true;
9-
color-scheme: "dark";
10-
--color-base-100: oklch(7.843% 0.123 260.87);
11-
--color-base-200: oklch(7.843% 0.123 260.87);
12-
--color-base-300: oklch(7.843% 0.123 260.87);
13-
--color-base-content: oklch(86.667% 0 0);
14-
--color-primary: oklch(54.118% 0.234 195.652);
15-
--color-primary-content: oklch(100% 0 0);
16-
--color-secondary: oklch(69.804% 0.35 156.585);
17-
--color-secondary-content: oklch(100% 0 0);
18-
--color-accent: oklch(43.137% 0.063 113.636);
19-
--color-accent-content: oklch(100% 0 0);
20-
--color-neutral: oklch(26.275% 0.101 246.364);
21-
--color-neutral-content: oklch(100% 0 0);
22-
--color-info: oklch(60.784% 0.598 210.526);
23-
--color-info-content: oklch(100% 0 0);
24-
--color-success: oklch(64.706% 0.312 170.37);
25-
--color-success-content: oklch(100% 0 0);
26-
--color-warning: oklch(58.039% 0.697 41.379);
27-
--color-warning-content: oklch(0% 0 0);
28-
--color-error: oklch(54.51% 0.634 359.453);
29-
--color-error-content: oklch(100% 0 0);
30-
--radius-selector: 0.5rem;
31-
--radius-field: 0.5rem;
32-
--radius-box: 0.25rem;
33-
--size-selector: 0.25rem;
34-
--size-field: 0.25rem;
35-
--border: 1px;
36-
--depth: 0;
37-
--noise: 0;
38-
}
5+
@plugin "daisyui" {
6+
themes: all;
7+
}
398

409
.skeleton-bg {
4110
background-color: #38A3A5;

‎Publish/Resource/js/backend/Components/Backend/Global/AdminLogo.vue‎

Whitespace-only changes.

‎Publish/Resource/js/backend/Layout/Login.vue‎

Lines changed: 79 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -1,62 +1,101 @@
11
<template>
2-
<FlashMessage />
3-
<auth-wraper :title="props.title">
4-
<template v-slot:form>
2+
<div class="min-h-screen bg-gradient-to-br from-slate-900 via-purple-900 to-slate-900 flex items-center justify-center p-4">
3+
<!-- Background Pattern -->
4+
<div class="absolute inset-0 opacity-10">
5+
<div class="absolute inset-0" style="background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,0.15) 1px, transparent 0); background-size: 20px 20px;"></div>
6+
</div>
7+
8+
<!-- Flash Message -->
9+
<FlashMessage />
10+
11+
<!-- Main Container -->
12+
<div class="relative z-10 w-full max-w-md">
13+
<!-- Card Container -->
14+
<div class="bg-white/10 backdrop-blur-lg rounded-3xl shadow-2xl border border-white/20 p-8">
15+
<!-- Header -->
16+
<div class="text-center mb-8">
17+
<div class="w-20 h-20 bg-gradient-to-r from-green-400 to-blue-500 rounded-2xl flex items-center justify-center mx-auto mb-4 shadow-2xl">
18+
<svg class="w-10 h-10 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
19+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10" />
20+
</svg>
21+
</div>
22+
<h1 class="text-3xl font-bold text-white mb-2">{{ props.title }}</h1>
23+
<p class="text-white/70">Welcome to Skeleton Admin</p>
24+
</div>
25+
26+
<!-- Form Slot -->
527
<slot name="form" />
6-
</template>
7-
<template v-slot:links>
8-
<slot name="links" />
9-
</template>
10-
</auth-wraper>
11-
<footer class="footer footer-center p-4 bg-base-300 font-bold">
12-
<div>
13-
<p>
14-
Copyright © {{ currentYear }} - All right reserved by
15-
<a target="_blank" href="https://github.com/mariojgt/skeleton-admin"
16-
>Skeleton-admin</a
17-
>
18-
</p>
28+
29+
<!-- Links Slot -->
30+
<div class="mt-8 text-center">
31+
<slot name="links" />
32+
</div>
33+
</div>
34+
35+
<!-- Footer -->
36+
<footer class="text-center mt-8 text-white/60 text-sm">
37+
<p>
38+
Copyright © {{ currentYear }} - All rights reserved by
39+
<a
40+
target="_blank"
41+
href="https://github.com/mariojgt/skeleton-admin"
42+
class="text-white/80 hover:text-white transition-colors duration-200 underline"
43+
>
44+
Skeleton Admin
45+
</a>
46+
</p>
47+
</footer>
1948
</div>
20-
</footer>
49+
</div>
2150
</template>
2251

2352
<script setup>
24-
import { watch, onMounted } from "vue";
25-
// Call the auth wrhaper compnent
26-
import AuthWraper from "@backend_components/Auth/AuthWrap.vue";
27-
import FlashMessage from "@backend_components/Backend/Global/FlashMessage.vue";
53+
import { onMounted } from "vue"
54+
import FlashMessage from "@backend_components/Backend/Global/FlashMessage.vue"
2855
2956
const props = defineProps({
3057
title: {
3158
type: String,
32-
default: "Title",
59+
default: "Sign In",
3360
},
34-
});
61+
})
3562
3663
// Load the saved theme
3764
const loadLocalStorageTheme = async () => {
38-
// Find the html element
39-
const html = document.querySelector("html");
40-
// Set a default theme
41-
html.setAttribute("data-theme", "forest");
42-
// Get the theme from the local storage
43-
const theme = localStorage.getItem("theme-backend");
44-
// if not found set the default theme
65+
const html = document.querySelector("html")
66+
html.setAttribute("data-theme", "forest")
67+
68+
const theme = localStorage.getItem("theme-backend")
4569
if (theme) {
46-
// Add the data-theme attribute
47-
html.setAttribute("data-theme", theme);
70+
html.setAttribute("data-theme", theme)
4871
} else {
49-
html.setAttribute("data-theme", "admin");
72+
html.setAttribute("data-theme", "admin")
5073
}
51-
};
74+
}
5275
53-
// On mount load the saved theme from the local storage
5476
onMounted(() => {
55-
loadLocalStorageTheme();
56-
});
77+
loadLocalStorageTheme()
78+
})
5779
58-
// Footer date
59-
const currentYear = new Date().getFullYear();
80+
const currentYear = new Date().getFullYear()
6081
</script>
6182

62-
<style></style>
83+
<style scoped>
84+
/* Gradient animation */
85+
@keyframes gradient {
86+
0% { background-position: 0% 50%; }
87+
50% { background-position: 100% 50%; }
88+
100% { background-position: 0% 50%; }
89+
}
90+
91+
.bg-gradient-to-br {
92+
background-size: 200% 200%;
93+
animation: gradient 15s ease infinite;
94+
}
95+
96+
/* Glass morphism effect */
97+
.backdrop-blur-lg {
98+
backdrop-filter: blur(16px);
99+
-webkit-backdrop-filter: blur(16px);
100+
}
101+
</style>

0 commit comments

Comments
 (0)