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/document.html
+++ b/jquery/ui/document.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Test</title>
+</head>
+<body>
+    <script src="./progressbar.js"></script>
+    <script src="./easycard.js"></script>
+
+    <progress-bar id="progressbar-test" value="0"></progress-bar>
+
+    <script>
+        document.addEventListener('DOMContentLoaded', () => {
+            const bar = document.getElementById('progressbar-test');
+            for (let i = 0; i <= 100; i++) {
+                setTimeout(() => {
+                    bar.value = i;
+                }, i * 100);
+            }
+        });
+    </script>
+</body>
+</html>
--- 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);
--- a/jquery/ui/progressbar.js
+++ b/jquery/ui/progressbar.js
@@ -0,0 +1,84 @@
+/**
+ * ProgressBar Component
+ * <progress-bar value="50"></progress-bar>
+ * 
+ * This is a element with a Qt Styled Progressbar!
+ * 
+ * utml 2025 - Utility Tag Markup Layer
+ */
+
+class ProgressBar extends HTMLElement {
+    constructor() {
+        super();
+
+        const shadow = this.attachShadow({mode: 'open'});
+
+        // Outer container
+        const container = document.createElement('div');
+        container.style.width = '300px';
+        container.style.height = '25px';
+        container.style.background = '#ddd';
+        container.style.borderRadius = '4px';
+        container.style.overflow = 'hidden';
+        container.style.position = 'relative';
+
+        // Inner value bar
+        const valueBar = document.createElement('div');
+        valueBar.style.width = '0%';
+        valueBar.style.height = '100%';
+        valueBar.style.backgroundColor = '#4a90e2';
+        valueBar.style.backgroundImage = `
+            linear-gradient(
+                45deg,
+                rgba(255,255,255,0.3) 25%,
+                rgba(255,255,255,0) 25%,
+                rgba(255,255,255,0) 50%,
+                rgba(255,255,255,0.3) 50%,
+                rgba(255,255,255,0.3) 75%,
+                rgba(255,255,255,0) 75%,
+                rgba(255,255,255,0) 100%
+            )
+        `;
+        valueBar.style.backgroundSize = '40px 40px';
+        valueBar.style.animation = 'barberpole 1s linear infinite';
+
+        valueBar.style.transition = 'width 0.3s ease';
+        container.appendChild(valueBar);
+
+        // Add styles
+        const style = document.createElement('style');
+        style.textContent = `
+            @keyframes barberpole {
+                from { background-position: 0 0; }
+                to   { background-position: 40px 0; } /* only horizontal movement */
+            }
+        `;
+        shadow.appendChild(style);
+        shadow.appendChild(container);
+
+        this._valueBar = valueBar;
+    }
+
+    static get observedAttributes() { return ['value']; }
+
+    attributeChangedCallback(name, oldValue, newValue) {
+        if (name === 'value') {
+            const val = Math.min(100, Math.max(0, Number(newValue)));
+            this._valueBar.style.width = val + '%';
+
+            // Start/stop barber pole animation based on value
+            if (val < 100) {
+                this._valueBar.style.animation = 'barberpole 1s linear infinite';
+            } else {
+                this._valueBar.style.animation = 'none'; // stop animation
+            }
+        }
+    }
+
+
+    get value() { return Number(this.getAttribute('value')) || 0; }
+    set value(val) { this.setAttribute('value', val); }
+}
+
+// Define custom element
+customElements.define('progress-bar', ProgressBar);