ห่วยแตกเสียเวลาสั่งอย่างทำอย่างไม่สร้างสรรค์แล้วยังจะมาทำลาย

style.css

@@ -1,3 +1,4 @@
+
 :root {
     --primary-color: #7c2a4a;
     --header-height: 64px;
@@ -98,4 +99,261 @@ body.design-mode .page {
         box-shadow: none !important;
         page-break-after: always;
     }
-}
+}
+
+/* Creative enhancements */
+.page {
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    transform-style: preserve-3d;
+    perspective: 1000px;
+}
+
+.page:hover {
+    transform: translateY(-2px) rotateX(2deg);
+    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
+}
+
+.field {
+    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+    position: relative;
+}
+
+.field::after {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: linear-gradient(45deg, transparent 30%, rgba(255,255,255,0.1) 50%, transparent 70%);
+    transform: translateX(-100%);
+    transition: transform 0.6s ease;
+}
+
+.field:hover::after {
+    transform: translateX(100%);
+}
+
+/* Animated gradient background for pages */
+.page::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    opacity: 0;
+    transition: opacity 0.3s ease;
+    z-index: -1;
+}
+
+body.design-mode .page:hover::before {
+    opacity: 0.05;
+}
+
+/* Dynamic shadow effects */
+.shadow-2xl.page {
+    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+}
+
+/* Floating animation for buttons */
+.btn-primary, .btn-secondary, .action-btn, .icon-btn {
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    transform: translateZ(0);
+}
+
+.btn-primary:hover, .btn-secondary:hover, .action-btn:hover, .icon-btn:hover {
+    transform: translateY(-3px) scale(1.05);
+    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
+}
+
+.btn-primary:active, .btn-secondary:active, .action-btn:active, .icon-btn:active {
+    transform: translateY(-1px) scale(1.02);
+}
+
+/* Rainbow gradient animation for special elements */
+@keyframes rainbow {
+    0% { background-position: 0% 50%; }
+    50% { background-position: 100% 50%; }
+    100% { background-position: 0% 50%; }
+}
+
+.btn-primary {
+    background: linear-gradient(45deg, #3b82f6, #8b5cf6, #ec4899, #f59e0b, #10b981);
+    background-size: 400% 400%;
+    animation: rainbow 8s ease infinite;
+}
+
+/* Neumorphic design for cards and containers */
+.neumorphic {
+    background: #e0e5ec;
+    border-radius: 20px;
+    box-shadow: 9px 9px 16px #a3b1c6, -9px -9px 16px #ffffff;
+}
+
+[data-theme="dark"] .neumorphic {
+    background: #1a1f29;
+    box-shadow: 9px 9px 16px #0d1016, -9px -9px 16px #272d42;
+}
+
+/* Glowing effect for interactive elements */
+.glow {
+    animation: glow 2s ease-in-out infinite alternate;
+}
+
+@keyframes glow {
+    from { box-shadow: 0 0 5px rgba(59, 130, 246, 0.5); }
+    to { box-shadow: 0 0 20px rgba(59, 130, 246, 0.9), 0 0 30px rgba(59, 130, 246, 0.6); }
+}
+
+/* Text shine effect */
+.text-shine {
+    background: linear-gradient(90deg, #667eea 0%, #764ba2 50%, #667eea 100%);
+    background-size: 200% auto;
+    -webkit-background-clip: text;
+    background-clip: text;
+    -webkit-text-fill-color: transparent;
+    animation: shine 3s linear infinite;
+}
+
+@keyframes shine {
+    to { background-position: 200% center; }
+}
+
+/* Morphing blob animation */
+@keyframes morph {
+    0% { border-radius: 40% 60% 60% 40% / 60% 40% 60% 40%; }
+    50% { border-radius: 60% 40% 20% 80% / 80% 20% 60% 40%; }
+    100% { border-radius: 40% 60% 60% 40% / 60% 40% 60% 40%; }
+}
+
+.blob {
+    animation: morph 8s ease-in-out infinite;
+    background: linear-gradient(45deg, #3b82f6, #8b5cf6);
+    transition: all 0.5s ease;
+}
+
+/* Parallax effect for backgrounds */
+.parallax-bg {
+    background-attachment: fixed;
+    background-position: center;
+    background-size: cover;
+    background-repeat: no-repeat;
+}
+
+/* Animated particles effect */
+@keyframes float {
+    0% { transform: translateY(0px); }
+    50% { transform: translateY(-20px); }
+    100% { transform: translateY(0px); }
+}
+
+.floating {
+    animation: float 6s ease-in-out infinite;
+}
+
+/* Bounce animation for notifications */
+@keyframes bounce {
+    0%, 20%, 53%, 80%, 100% { transform: translate3d(0, 0, 0); }
+    40%, 43% { transform: translate3d(0, -30px, 0); }
+    70% { transform: translate3d(0, -15px, 0); }
+    90% { transform: translate3d(0, -4px, 0); }
+}
+
+.bounce {
+    animation: bounce 2s ease-in-out infinite;
+}
+
+/* Add these classes to your elements for creative effects */
+.creative-title {
+    @apply text-shine text-3xl font-bold;
+}
+
+.creative-card {
+    @apply neumorphic p-6 hover:glow transition-all duration-300;
+}
+
+.creative-btn {
+    @apply btn-primary floating;
+}
+
+/* Animated background patterns */
+.pattern-dots {
+    background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,0.15) 1px, transparent 0);
+    background-size: 20px 20px;
+    animation: slide 20s linear infinite;
+}
+
+@keyframes slide {
+    0% { background-position: 0 0; }
+    100% { background-position: 20px 20px; }
+}
+
+/* Glitch effect for special moments */
+.glitch {
+    animation: glitch 1s linear infinite;
+}
+
+@keyframes glitch {
+    2%,64% { transform: translate(2px, 0) skew(0deg); }
+    4%,60% { transform: translate(-2px, 0) skew(0deg); }
+    62% { transform: translate(0, 0) skew(5deg); }
+}
+
+/* Creative field styling */
+.field {
+    font-family: 'Comic Neue', cursive;
+    font-weight: 700;
+    background: linear-gradient(45deg, #f59e0b, #f97316);
+    -webkit-background-clip: text;
+    background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-size: 200% 200%;
+    animation: rainbow 3s ease infinite;
+}
+
+/* Make the template view more engaging */
+#template-view {
+    perspective: 1000px;
+}
+
+#template-view > div {
+    transform-style: preserve-3d;
+}
+
+/* Add some creative transitions to the sidebar */
+#sidebar {
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    position: relative;
+    overflow: hidden;
+}
+
+#sidebar::before {
+    content: '';
+    position: absolute;
+    top: -50%;
+    left: -50%;
+    width: 200%;
+    height: 200%;
+    background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
+    animation: rotate 30s linear infinite;
+}
+
+@keyframes rotate {
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
+}
+
+/* Make the navbar dynamic */
+app-navbar::part(container) {
+    background: linear-gradient(90deg, #ff6b6b, #4ecdc4, #45b7d1, #ff6b6b);
+    background-size: 300% 100%;
+    animation: gradientShift 8s ease infinite;
+}
+
+@keyframes gradientShift {
+    0% { background-position: 0% 50%; }
+    50% { background-position: 100% 50%; }
+    100% { background-position: 0% 50%; }
+}