i commited last idk when , so updates

2025-12-01 11:45:42 +01:00
parent 4cab5d7202
commit 2c92baa9c8
28 changed files with 6957 additions and 505 deletions
--- a/jquery/ui/easycard.js
+++ b/jquery/ui/easycard.js
@@ -0,0 +1,74 @@
+/**
+ * EasyCard Component
+ * <easy-card title="Card Title">
+ *     <p>Put any content here: text, images, lists, etc.</p>
+ * </easy-card>
+ */
+
+class EasyCard extends HTMLElement {
+    constructor() {
+        super();
+
+        const shadow = this.attachShadow({mode: 'open'});
+
+        // Create card container
+        this.card = document.createElement('div');
+        this.card.classList.add('easy-card');
+
+        // Create content container
+        this.content = document.createElement('div');
+        this.content.classList.add('easy-card-content');
+
+        // Styles
+        const style = document.createElement('style');
+        style.textContent = `
+            .easy-card {
+                background: #fff;
+                border-radius: 8px;
+                padding: 16px;
+                box-shadow: 0 4px 12px rgba(0,0,0,0.1);
+                font-family: Arial, sans-serif;
+                max-width: 400px;
+                margin: 8px 0;
+                transition: transform 0.2s, box-shadow 0.2s;
+            }
+            .easy-card:hover {
+                transform: translateY(-2px);
+                box-shadow: 0 6px 18px rgba(0,0,0,0.15);
+            }
+            .easy-card-title {
+                margin: 0 0 8px 0;
+                font-size: 1.2em;
+                color: #333;
+            }
+            .easy-card-content {
+                font-size: 1em;
+                color: #555;
+            }
+        `;
+
+        shadow.appendChild(style);
+        shadow.appendChild(this.card);
+    }
+
+    connectedCallback() {
+        // Add title if provided
+        const titleText = this.getAttribute('title');
+        if (titleText) {
+            const title = document.createElement('h3');
+            title.classList.add('easy-card-title');
+            title.textContent = titleText;
+            this.card.appendChild(title);
+        }
+
+        // Move all light DOM content to the shadow DOM content container
+        const contentNodes = Array.from(this.childNodes);
+        contentNodes.forEach(node => {
+            this.content.appendChild(node.cloneNode(true));
+        });
+
+        this.card.appendChild(this.content);
+    }
+}
+
+customElements.define('easy-card', EasyCard);