Plugin Directory

Changeset 3274842


Ignore:
Timestamp:
04/16/2025 02:16:29 PM (10 months ago)
Author:
codeisartnet
Message:

update

Location:
codeart-units-converter
Files:
8 deleted
4 edited
17 copied

Legend:

Unmodified
Added
Removed
  • codeart-units-converter/tags/2.4.0/codeart-units-converter.php

    r3274766 r3274842  
    1010 * Text Domain: codeart-units-converter
    1111 * Domain Path: /i18n/languages/
    12  * Version: 2.3.0
     12 * Version: 2.4.0
    1313 * Tested up to: 6.8.0
    1414 */
     
    1919}
    2020
    21 $codeart_units_converter_version = '2.3.0';
     21$codeart_units_converter_version = '2.4.0';
    2222
    2323/**
  • codeart-units-converter/tags/2.4.0/readme.txt

    r3274766 r3274842  
    66Requires PHP: 7.0
    77Tested up to: 6.8.0
    8 Stable tag: 2.3.0
     8Stable tag: 2.4.0
    99License: GPLv3
    1010License URI: https://www.gnu.org/licenses/gpl-3.0.html
  • codeart-units-converter/tags/2.4.0/templates/admin/about.htm

    r3271766 r3274842  
    66        --card-background: #ffffff;
    77        --text-color: #1f2937;
    8         --text-muted: #6b7280;
     8        --text-muted: #4b5563;
     9        /* Darkened for better contrast */
    910        --border-color: #e5e7eb;
    1011        --shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    1112        --transition: all 0.3s ease;
     13        --spacing-sm: 8px;
     14        --spacing-md: 16px;
     15        --spacing-lg: 24px;
     16        --spacing-xl: 32px;
     17        --radius: 10px;
     18        /* Standardized border radius */
     19    }
     20    /* Dark mode support */
     21   
     22    @media (prefers-color-scheme: dark) {
     23         :root {
     24            --background-color: #1f2937;
     25            --card-background: #374151;
     26            --text-color: #f8fafc;
     27            --text-muted: #d1d5db;
     28            --border-color: #4b5563;
     29        }
     30        .codeart-table tr:hover {
     31            background: #4b5563;
     32        }
    1233    }
    1334   
    1435    .codeart-dashboard {
    1536        background: var(--background-color);
    16         padding: 40px;
     37        padding: var(--spacing-xl);
    1738        max-width: 1280px;
    1839        margin: 20px auto;
     
    2243   
    2344    .codeart-dashboard h1 {
    24         font-size: 2.0rem;
     45        font-size: 2.25rem;
     46        /* Increased for better hierarchy */
    2547        font-weight: 700;
    2648        color: #ffffff;
    27         background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    28         padding: 12px;
    29         border-radius: 12px;
     49        background: linear-gradient(135deg, rgba(59, 130, 246, 0.9), rgba(30, 58, 138, 0.9));
     50        /* Softer gradient */
     51        padding: var(--spacing-md) var(--spacing-lg);
     52        border-radius: var(--radius);
    3053        text-align: center;
    31         margin-bottom: 32px;
     54        margin-bottom: var(--spacing-xl);
    3255        box-shadow: var(--shadow);
    3356        transition: var(--transition);
     57        letter-spacing: 0.02em;
    3458    }
    3559   
     
    3862        font-weight: 600;
    3963        color: var(--text-color);
    40         margin: 40px 0 16px;
     64        margin: var(--spacing-xl) 0 var(--spacing-md);
    4165        position: relative;
     66        display: flex;
     67        justify-content: space-between;
     68        align-items: center;
    4269    }
    4370   
     
    5582        font-size: 1rem;
    5683        color: var(--text-muted);
    57         margin-bottom: 24px;
    58     }
    59    
    60     .codeart-dashboard b {
     84        margin-bottom: var(--spacing-lg);
     85    }
     86   
     87    .codeart-dashboard strong {
    6188        color: var(--text-color);
    6289        font-weight: 600;
    6390    }
     91    /* Search Bar */
     92   
     93    .search-bar {
     94        width: 100%;
     95        padding: var(--spacing-md);
     96        border: 1px solid var(--border-color);
     97        border-radius: var(--radius);
     98        font-size: 1rem;
     99        margin-bottom: var(--spacing-lg);
     100    }
    64101    /* Card Layout */
    65102   
    66103    .codeart-section {
    67104        background: var(--card-background);
    68         padding: 24px;
    69         border-radius: 12px;
     105        padding: var(--spacing-lg);
     106        border-radius: var(--radius);
    70107        box-shadow: var(--shadow);
    71         margin-bottom: 32px;
     108        margin-bottom: var(--spacing-xl);
    72109        transition: var(--transition);
    73110    }
     
    77114        box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
    78115    }
     116   
     117    .section-content[hidden] {
     118        display: none;
     119    }
     120   
     121    .toggle-btn {
     122        background: none;
     123        border: none;
     124        color: var(--primary-color);
     125        cursor: pointer;
     126        font-size: 0.9rem;
     127        padding: var(--spacing-sm);
     128    }
     129   
     130    .toggle-btn:hover {
     131        text-decoration: underline;
     132    }
    79133    /* Table Styling */
    80134   
     
    82136        width: 100%;
    83137        border-collapse: collapse;
    84         margin-top: 16px;
     138        margin-top: var(--spacing-md);
    85139        background: var(--card-background);
    86         border-radius: 8px;
     140        border-radius: var(--radius);
    87141        overflow: hidden;
    88142    }
     
    90144    .codeart-table th,
    91145    .codeart-table td {
    92         padding: 16px;
     146        padding: var(--spacing-md);
    93147        text-align: left;
    94148        font-size: 0.95rem;
     
    99153        background: var(--background-color);
    100154        font-weight: 600;
    101         color: var(--text-color);
    102155        border-bottom: 2px solid var(--border-color);
    103156    }
     
    113166   
    114167    .codeart-table tr:hover {
    115         background: #eff6ff;
     168        background: #dbeafe;
     169        /* More distinct hover */
     170        border-left: 3px solid var(--primary-color);
    116171    }
    117172   
     
    120175        color: var(--text-muted);
    121176        font-style: normal;
     177    }
     178   
     179    .copyable {
     180        cursor: pointer;
     181        background: #f1f5f9;
     182        padding: 4px 8px;
     183        border-radius: 4px;
     184        display: inline-block;
     185    }
     186   
     187    .copy-btn {
     188        background: var(--primary-color);
     189        color: #fff;
     190        border: none;
     191        padding: 6px 12px;
     192        border-radius: 6px;
     193        cursor: pointer;
     194        font-size: 0.85rem;
     195        margin-left: var(--spacing-sm);
     196    }
     197   
     198    .copy-btn:hover {
     199        background: var(--secondary-color);
    122200    }
    123201    /* Buttons and Links */
     
    128206        background: var(--primary-color);
    129207        color: #ffffff;
    130         padding: 12px 24px;
    131         border-radius: 8px;
     208        padding: 14px 28px;
     209        border-radius: var(--radius);
    132210        text-decoration: none;
    133211        font-weight: 500;
    134         font-size: 1rem;
     212        font-size: 1.1rem;
    135213        transition: var(--transition);
    136         margin-top: 16px;
     214        margin-top: var(--spacing-md);
    137215    }
    138216   
     
    143221    }
    144222   
     223    .codeart-dashboard .action-link:focus {
     224        outline: 2px solid var(--primary-color);
     225        outline-offset: 2px;
     226    }
     227   
     228    .codeart-dashboard .action-link:disabled {
     229        background: var(--text-muted);
     230        cursor: not-allowed;
     231        transform: none;
     232        box-shadow: none;
     233    }
     234   
    145235    .codeart-dashboard .action-link svg {
    146         margin-left: 8px;
     236        margin-left: var(--spacing-sm);
    147237        width: 16px;
    148238        height: 16px;
     
    152242    @media screen and (max-width: 768px) {
    153243        .codeart-dashboard {
    154             padding: 24px;
     244            padding: var(--spacing-lg);
    155245        }
    156246        .codeart-dashboard h1 {
    157             font-size: 1.75rem;
    158             padding: 16px;
     247            font-size: 2rem;
     248            padding: var(--spacing-md);
    159249        }
    160250        .codeart-dashboard h2 {
     
    164254        .codeart-table td {
    165255            font-size: 0.85rem;
    166             padding: 12px;
     256            padding: var(--spacing-sm);
    167257        }
    168258        .codeart-section {
    169             padding: 16px;
     259            padding: var(--spacing-md);
     260        }
     261        .codeart-dashboard .action-link {
     262            padding: 16px 32px;
     263            min-height: 48px;
    170264        }
    171265    }
     
    174268        .codeart-table {
    175269            display: block;
    176             overflow-x: auto;
     270        }
     271        .codeart-table thead {
     272            display: none;
     273        }
     274        .codeart-table tr {
     275            display: block;
     276            margin-bottom: var(--spacing-lg);
     277            border: 1px solid var(--border-color);
     278            border-radius: var(--radius);
     279            padding: var(--spacing-md);
     280        }
     281        .codeart-table td {
     282            display: block;
     283            text-align: left;
     284            padding: var(--spacing-sm) 0;
     285            border: none;
     286        }
     287        .codeart-table td::before {
     288            content: attr(data-label);
     289            font-weight: 600;
     290            color: var(--text-color);
     291            display: block;
     292            margin-bottom: var(--spacing-sm);
    177293        }
    178294        .codeart-dashboard .action-link {
    179295            width: 100%;
    180296            justify-content: center;
     297            padding: 16px;
    181298        }
    182299    }
     
    186303    <h1>CodeArt Units Converter – Dashboard</h1>
    187304
     305    <input type="text" class="search-bar" placeholder="Search converters or calculators..." />
     306
    188307    <div class="codeart-section">
    189         <p>Welcome to <strong>CodeArt Units Converter</strong>! Easily integrate powerful unit converters and calculators into your WordPress site using simple shortcodes.</p>
     308        <div class="section-content">
     309            <p>Welcome to <strong>CodeArt Units Converter</strong>! Easily integrate powerful unit converters and calculators into your WordPress site using simple shortcodes.</p>
     310        </div>
    190311    </div>
    191312
    192313    <div class="codeart-section">
    193         <h2>Converters</h2>
    194         <p>Add these shortcodes to any page or post to display unit converters:</p>
    195         <table class="codeart-table" role="grid">
    196             <thead>
    197                 <tr>
    198                     <th scope="col">Converter</th>
    199                     <th scope="col">Shortcode</th>
    200                     <th scope="col">Description</th>
    201                 </tr>
    202             </thead>
    203             <tbody>
    204                 <tr>
    205                     <td>Weight</td>
    206                     <td><code>[codeart_units_converter_weight]</code></td>
    207                     <td class="description">Converts between units like kilograms, pounds, ounces, and grams.</td>
    208                 </tr>
    209                 <tr>
    210                     <td>Speed</td>
    211                     <td><code>[codeart_units_converter_speed]</code></td>
    212                     <td class="description">Converts between meters per second, kilometers per hour, miles per hour, and knots.</td>
    213                 </tr>
    214                 <tr>
    215                     <td>Area</td>
    216                     <td><code>[codeart_units_converter_area]</code></td>
    217                     <td class="description">Converts between square meters, square feet, acres, and square kilometers.</td>
    218                 </tr>
    219             </tbody>
    220         </table>
     314        <h2>Converters <button class="toggle-btn" aria-expanded="true">Hide</button></h2>
     315        <div class="section-content">
     316            <p>Add these shortcodes to any page or post to display unit converters:</p>
     317            <table class="codeart-table" role="grid">
     318                <thead>
     319                    <tr>
     320                        <th scope="col">Converter</th>
     321                        <th scope="col">Shortcode</th>
     322                        <th scope="col">Description</th>
     323                    </tr>
     324                </thead>
     325                <tbody>
     326                    <tr>
     327                        <td data-label="Converter">Weight</td>
     328                        <td data-label="Shortcode">
     329                            <strong>Table</strong><br>
     330                            <code class="copyable">[codeart_units_converter_converters type='weight' style='table']</code>
     331                            <button class="copy-btn">Copy</button><br>
     332                            <strong>List</strong><br>
     333                            <code class="copyable">[codeart_units_converter_converters type='weight' style='list']</code>
     334                            <button class="copy-btn">Copy</button>
     335                        </td>
     336                        <td data-label="Description" class="description">Converts between units like kilograms, pounds, ounces, and grams.</td>
     337                    </tr>
     338                    <tr>
     339                        <td data-label="Converter">Speed</td>
     340                        <td data-label="Shortcode">
     341                            <strong>Table</strong><br>
     342                            <code class="copyable">[codeart_units_converter_converters type='speed' style='table']</code>
     343                            <button class="copy-btn">Copy</button><br>
     344                            <strong>List</strong><br>
     345                            <code class="copyable">[codeart_units_converter_converters type='speed' style='list']</code>
     346                            <button class="copy-btn">Copy</button>
     347                        </td>
     348                        <td data-label="Description" class="description">Converts between meters per second, kilometers per hour, miles per hour, and knots.</td>
     349                    </tr>
     350                    <tr>
     351                        <td data-label="Converter">Area</td>
     352                        <td data-label="Shortcode">
     353                            <strong>Table</strong><br>
     354                            <code class="copyable">[codeart_units_converter_converters type='area' style='table']</code>
     355                            <button class="copy-btn">Copy</button><br>
     356                            <strong>List</strong><br>
     357                            <code class="copyable">[codeart_units_converter_converters type='area' style='list']</code>
     358                            <button class="copy-btn">Copy</button>
     359                        </td>
     360                        <td data-label="Description" class="description">Converts between square meters, square feet, acres, and square kilometers.</td>
     361                    </tr>
     362                </tbody>
     363            </table>
     364        </div>
    221365    </div>
    222366
    223367    <div class="codeart-section">
    224         <h2>Calculators</h2>
    225         <p>Embed these calculators for quick arithmetic or advanced computations:</p>
    226         <table class="codeart-table" role="grid">
    227             <thead>
    228                 <tr>
    229                     <th scope="col">Calculator</th>
    230                     <th scope="col">Shortcode</th>
    231                     <th scope="col">Description</th>
    232                 </tr>
    233             </thead>
    234             <tbody>
    235                 <tr>
    236                     <td>Basic Calculator</td>
    237                     <td><code>[codeart_units_converter_basic_calculator]</code></td>
    238                     <td class="description">A user-friendly calculator for addition, subtraction, multiplication, and division.</td>
    239                 </tr>
    240                 <tr>
    241                     <td>Scientific Calculator</td>
    242                     <td><code>[codeart_units_converter_scientific_calculator]</code></td>
    243                     <td class="description">Supports trigonometric functions, logarithms, exponentiation, and more.</td>
    244                 </tr>
    245             </tbody>
    246         </table>
     368        <h2>Calculators <button class="toggle-btn" aria-expanded="true">Hide</button></h2>
     369        <div class="section-content">
     370            <p>Embed these calculators for quick arithmetic or advanced computations:</p>
     371            <table class="codeart-table" role="grid">
     372                <thead>
     373                    <tr>
     374                        <th scope="col">Calculator</th>
     375                        <th scope="col">Shortcode</th>
     376                        <th scope="col">Description</th>
     377                    </tr>
     378                </thead>
     379                <tbody>
     380                    <tr>
     381                        <td data-label="Calculator">Basic Calculator</td>
     382                        <td data-label="Shortcode">
     383                            <code class="copyable">[codeart_units_converter_basic_calculator]</code>
     384                            <button class="copy-btn">Copy</button>
     385                        </td>
     386                        <td data-label="Description" class="description">A user-friendly calculator for addition, subtraction, multiplication, and division.</td>
     387                    </tr>
     388                    <tr>
     389                        <td data-label="Calculator">Scientific Calculator</td>
     390                        <td data-label="Shortcode">
     391                            <code class="copyable">[codeart_units_converter_scientific_calculator]</code>
     392                            <button class="copy-btn">Copy</button>
     393                        </td>
     394                        <td data-label="Description" class="description">Supports trigonometric functions, logarithms, exponentiation, and more.</td>
     395                    </tr>
     396                </tbody>
     397            </table>
     398        </div>
    247399    </div>
    248400
    249     <a href="#" class="action-link">
     401    <a href="#" class="action-link" aria-label="Open Shortcodes Manager for CodeArt Units Converter">
    250402        Shortcodes Manager
    251         <svg fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
     403        <svg fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" title="Arrow icon">
    252404            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
    253405        </svg>
    254406    </a>
    255 
    256407</div>
     408
     409<script>
     410    // Copy to Clipboard
     411    document.querySelectorAll('.copy-btn').forEach(btn => {
     412        btn.addEventListener('click', () => {
     413            const code = btn.previousElementSibling.textContent;
     414            navigator.clipboard.writeText(code);
     415            btn.textContent = 'Copied!';
     416            setTimeout(() => btn.textContent = 'Copy', 2000);
     417        });
     418    });
     419
     420    // Collapsible Sections
     421    document.querySelectorAll('.toggle-btn').forEach(btn => {
     422        btn.addEventListener('click', () => {
     423            const content = btn.closest('.codeart-section').querySelector('.section-content');
     424            content.toggleAttribute('hidden');
     425            const isExpanded = !content.hasAttribute('hidden');
     426            btn.setAttribute('aria-expanded', isExpanded);
     427            btn.textContent = isExpanded ? 'Hide' : 'Show';
     428        });
     429    });
     430
     431    // Search Functionality
     432    document.querySelector('.search-bar').addEventListener('input', (e) => {
     433        const term = e.target.value.toLowerCase();
     434        document.querySelectorAll('.codeart-section').forEach(section => {
     435            const text = section.textContent.toLowerCase();
     436            section.style.display = text.includes(term) ? 'block' : 'none';
     437        });
     438    });
     439</script>
  • codeart-units-converter/trunk/codeart-units-converter.php

    r3274766 r3274842  
    1010 * Text Domain: codeart-units-converter
    1111 * Domain Path: /i18n/languages/
    12  * Version: 2.3.0
     12 * Version: 2.4.0
    1313 * Tested up to: 6.8.0
    1414 */
     
    1919}
    2020
    21 $codeart_units_converter_version = '2.3.0';
     21$codeart_units_converter_version = '2.4.0';
    2222
    2323/**
  • codeart-units-converter/trunk/readme.txt

    r3274766 r3274842  
    66Requires PHP: 7.0
    77Tested up to: 6.8.0
    8 Stable tag: 2.3.0
     8Stable tag: 2.4.0
    99License: GPLv3
    1010License URI: https://www.gnu.org/licenses/gpl-3.0.html
  • codeart-units-converter/trunk/templates/admin/about.htm

    r3271766 r3274842  
    66        --card-background: #ffffff;
    77        --text-color: #1f2937;
    8         --text-muted: #6b7280;
     8        --text-muted: #4b5563;
     9        /* Darkened for better contrast */
    910        --border-color: #e5e7eb;
    1011        --shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    1112        --transition: all 0.3s ease;
     13        --spacing-sm: 8px;
     14        --spacing-md: 16px;
     15        --spacing-lg: 24px;
     16        --spacing-xl: 32px;
     17        --radius: 10px;
     18        /* Standardized border radius */
     19    }
     20    /* Dark mode support */
     21   
     22    @media (prefers-color-scheme: dark) {
     23         :root {
     24            --background-color: #1f2937;
     25            --card-background: #374151;
     26            --text-color: #f8fafc;
     27            --text-muted: #d1d5db;
     28            --border-color: #4b5563;
     29        }
     30        .codeart-table tr:hover {
     31            background: #4b5563;
     32        }
    1233    }
    1334   
    1435    .codeart-dashboard {
    1536        background: var(--background-color);
    16         padding: 40px;
     37        padding: var(--spacing-xl);
    1738        max-width: 1280px;
    1839        margin: 20px auto;
     
    2243   
    2344    .codeart-dashboard h1 {
    24         font-size: 2.0rem;
     45        font-size: 2.25rem;
     46        /* Increased for better hierarchy */
    2547        font-weight: 700;
    2648        color: #ffffff;
    27         background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    28         padding: 12px;
    29         border-radius: 12px;
     49        background: linear-gradient(135deg, rgba(59, 130, 246, 0.9), rgba(30, 58, 138, 0.9));
     50        /* Softer gradient */
     51        padding: var(--spacing-md) var(--spacing-lg);
     52        border-radius: var(--radius);
    3053        text-align: center;
    31         margin-bottom: 32px;
     54        margin-bottom: var(--spacing-xl);
    3255        box-shadow: var(--shadow);
    3356        transition: var(--transition);
     57        letter-spacing: 0.02em;
    3458    }
    3559   
     
    3862        font-weight: 600;
    3963        color: var(--text-color);
    40         margin: 40px 0 16px;
     64        margin: var(--spacing-xl) 0 var(--spacing-md);
    4165        position: relative;
     66        display: flex;
     67        justify-content: space-between;
     68        align-items: center;
    4269    }
    4370   
     
    5582        font-size: 1rem;
    5683        color: var(--text-muted);
    57         margin-bottom: 24px;
    58     }
    59    
    60     .codeart-dashboard b {
     84        margin-bottom: var(--spacing-lg);
     85    }
     86   
     87    .codeart-dashboard strong {
    6188        color: var(--text-color);
    6289        font-weight: 600;
    6390    }
     91    /* Search Bar */
     92   
     93    .search-bar {
     94        width: 100%;
     95        padding: var(--spacing-md);
     96        border: 1px solid var(--border-color);
     97        border-radius: var(--radius);
     98        font-size: 1rem;
     99        margin-bottom: var(--spacing-lg);
     100    }
    64101    /* Card Layout */
    65102   
    66103    .codeart-section {
    67104        background: var(--card-background);
    68         padding: 24px;
    69         border-radius: 12px;
     105        padding: var(--spacing-lg);
     106        border-radius: var(--radius);
    70107        box-shadow: var(--shadow);
    71         margin-bottom: 32px;
     108        margin-bottom: var(--spacing-xl);
    72109        transition: var(--transition);
    73110    }
     
    77114        box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
    78115    }
     116   
     117    .section-content[hidden] {
     118        display: none;
     119    }
     120   
     121    .toggle-btn {
     122        background: none;
     123        border: none;
     124        color: var(--primary-color);
     125        cursor: pointer;
     126        font-size: 0.9rem;
     127        padding: var(--spacing-sm);
     128    }
     129   
     130    .toggle-btn:hover {
     131        text-decoration: underline;
     132    }
    79133    /* Table Styling */
    80134   
     
    82136        width: 100%;
    83137        border-collapse: collapse;
    84         margin-top: 16px;
     138        margin-top: var(--spacing-md);
    85139        background: var(--card-background);
    86         border-radius: 8px;
     140        border-radius: var(--radius);
    87141        overflow: hidden;
    88142    }
     
    90144    .codeart-table th,
    91145    .codeart-table td {
    92         padding: 16px;
     146        padding: var(--spacing-md);
    93147        text-align: left;
    94148        font-size: 0.95rem;
     
    99153        background: var(--background-color);
    100154        font-weight: 600;
    101         color: var(--text-color);
    102155        border-bottom: 2px solid var(--border-color);
    103156    }
     
    113166   
    114167    .codeart-table tr:hover {
    115         background: #eff6ff;
     168        background: #dbeafe;
     169        /* More distinct hover */
     170        border-left: 3px solid var(--primary-color);
    116171    }
    117172   
     
    120175        color: var(--text-muted);
    121176        font-style: normal;
     177    }
     178   
     179    .copyable {
     180        cursor: pointer;
     181        background: #f1f5f9;
     182        padding: 4px 8px;
     183        border-radius: 4px;
     184        display: inline-block;
     185    }
     186   
     187    .copy-btn {
     188        background: var(--primary-color);
     189        color: #fff;
     190        border: none;
     191        padding: 6px 12px;
     192        border-radius: 6px;
     193        cursor: pointer;
     194        font-size: 0.85rem;
     195        margin-left: var(--spacing-sm);
     196    }
     197   
     198    .copy-btn:hover {
     199        background: var(--secondary-color);
    122200    }
    123201    /* Buttons and Links */
     
    128206        background: var(--primary-color);
    129207        color: #ffffff;
    130         padding: 12px 24px;
    131         border-radius: 8px;
     208        padding: 14px 28px;
     209        border-radius: var(--radius);
    132210        text-decoration: none;
    133211        font-weight: 500;
    134         font-size: 1rem;
     212        font-size: 1.1rem;
    135213        transition: var(--transition);
    136         margin-top: 16px;
     214        margin-top: var(--spacing-md);
    137215    }
    138216   
     
    143221    }
    144222   
     223    .codeart-dashboard .action-link:focus {
     224        outline: 2px solid var(--primary-color);
     225        outline-offset: 2px;
     226    }
     227   
     228    .codeart-dashboard .action-link:disabled {
     229        background: var(--text-muted);
     230        cursor: not-allowed;
     231        transform: none;
     232        box-shadow: none;
     233    }
     234   
    145235    .codeart-dashboard .action-link svg {
    146         margin-left: 8px;
     236        margin-left: var(--spacing-sm);
    147237        width: 16px;
    148238        height: 16px;
     
    152242    @media screen and (max-width: 768px) {
    153243        .codeart-dashboard {
    154             padding: 24px;
     244            padding: var(--spacing-lg);
    155245        }
    156246        .codeart-dashboard h1 {
    157             font-size: 1.75rem;
    158             padding: 16px;
     247            font-size: 2rem;
     248            padding: var(--spacing-md);
    159249        }
    160250        .codeart-dashboard h2 {
     
    164254        .codeart-table td {
    165255            font-size: 0.85rem;
    166             padding: 12px;
     256            padding: var(--spacing-sm);
    167257        }
    168258        .codeart-section {
    169             padding: 16px;
     259            padding: var(--spacing-md);
     260        }
     261        .codeart-dashboard .action-link {
     262            padding: 16px 32px;
     263            min-height: 48px;
    170264        }
    171265    }
     
    174268        .codeart-table {
    175269            display: block;
    176             overflow-x: auto;
     270        }
     271        .codeart-table thead {
     272            display: none;
     273        }
     274        .codeart-table tr {
     275            display: block;
     276            margin-bottom: var(--spacing-lg);
     277            border: 1px solid var(--border-color);
     278            border-radius: var(--radius);
     279            padding: var(--spacing-md);
     280        }
     281        .codeart-table td {
     282            display: block;
     283            text-align: left;
     284            padding: var(--spacing-sm) 0;
     285            border: none;
     286        }
     287        .codeart-table td::before {
     288            content: attr(data-label);
     289            font-weight: 600;
     290            color: var(--text-color);
     291            display: block;
     292            margin-bottom: var(--spacing-sm);
    177293        }
    178294        .codeart-dashboard .action-link {
    179295            width: 100%;
    180296            justify-content: center;
     297            padding: 16px;
    181298        }
    182299    }
     
    186303    <h1>CodeArt Units Converter – Dashboard</h1>
    187304
     305    <input type="text" class="search-bar" placeholder="Search converters or calculators..." />
     306
    188307    <div class="codeart-section">
    189         <p>Welcome to <strong>CodeArt Units Converter</strong>! Easily integrate powerful unit converters and calculators into your WordPress site using simple shortcodes.</p>
     308        <div class="section-content">
     309            <p>Welcome to <strong>CodeArt Units Converter</strong>! Easily integrate powerful unit converters and calculators into your WordPress site using simple shortcodes.</p>
     310        </div>
    190311    </div>
    191312
    192313    <div class="codeart-section">
    193         <h2>Converters</h2>
    194         <p>Add these shortcodes to any page or post to display unit converters:</p>
    195         <table class="codeart-table" role="grid">
    196             <thead>
    197                 <tr>
    198                     <th scope="col">Converter</th>
    199                     <th scope="col">Shortcode</th>
    200                     <th scope="col">Description</th>
    201                 </tr>
    202             </thead>
    203             <tbody>
    204                 <tr>
    205                     <td>Weight</td>
    206                     <td><code>[codeart_units_converter_weight]</code></td>
    207                     <td class="description">Converts between units like kilograms, pounds, ounces, and grams.</td>
    208                 </tr>
    209                 <tr>
    210                     <td>Speed</td>
    211                     <td><code>[codeart_units_converter_speed]</code></td>
    212                     <td class="description">Converts between meters per second, kilometers per hour, miles per hour, and knots.</td>
    213                 </tr>
    214                 <tr>
    215                     <td>Area</td>
    216                     <td><code>[codeart_units_converter_area]</code></td>
    217                     <td class="description">Converts between square meters, square feet, acres, and square kilometers.</td>
    218                 </tr>
    219             </tbody>
    220         </table>
     314        <h2>Converters <button class="toggle-btn" aria-expanded="true">Hide</button></h2>
     315        <div class="section-content">
     316            <p>Add these shortcodes to any page or post to display unit converters:</p>
     317            <table class="codeart-table" role="grid">
     318                <thead>
     319                    <tr>
     320                        <th scope="col">Converter</th>
     321                        <th scope="col">Shortcode</th>
     322                        <th scope="col">Description</th>
     323                    </tr>
     324                </thead>
     325                <tbody>
     326                    <tr>
     327                        <td data-label="Converter">Weight</td>
     328                        <td data-label="Shortcode">
     329                            <strong>Table</strong><br>
     330                            <code class="copyable">[codeart_units_converter_converters type='weight' style='table']</code>
     331                            <button class="copy-btn">Copy</button><br>
     332                            <strong>List</strong><br>
     333                            <code class="copyable">[codeart_units_converter_converters type='weight' style='list']</code>
     334                            <button class="copy-btn">Copy</button>
     335                        </td>
     336                        <td data-label="Description" class="description">Converts between units like kilograms, pounds, ounces, and grams.</td>
     337                    </tr>
     338                    <tr>
     339                        <td data-label="Converter">Speed</td>
     340                        <td data-label="Shortcode">
     341                            <strong>Table</strong><br>
     342                            <code class="copyable">[codeart_units_converter_converters type='speed' style='table']</code>
     343                            <button class="copy-btn">Copy</button><br>
     344                            <strong>List</strong><br>
     345                            <code class="copyable">[codeart_units_converter_converters type='speed' style='list']</code>
     346                            <button class="copy-btn">Copy</button>
     347                        </td>
     348                        <td data-label="Description" class="description">Converts between meters per second, kilometers per hour, miles per hour, and knots.</td>
     349                    </tr>
     350                    <tr>
     351                        <td data-label="Converter">Area</td>
     352                        <td data-label="Shortcode">
     353                            <strong>Table</strong><br>
     354                            <code class="copyable">[codeart_units_converter_converters type='area' style='table']</code>
     355                            <button class="copy-btn">Copy</button><br>
     356                            <strong>List</strong><br>
     357                            <code class="copyable">[codeart_units_converter_converters type='area' style='list']</code>
     358                            <button class="copy-btn">Copy</button>
     359                        </td>
     360                        <td data-label="Description" class="description">Converts between square meters, square feet, acres, and square kilometers.</td>
     361                    </tr>
     362                </tbody>
     363            </table>
     364        </div>
    221365    </div>
    222366
    223367    <div class="codeart-section">
    224         <h2>Calculators</h2>
    225         <p>Embed these calculators for quick arithmetic or advanced computations:</p>
    226         <table class="codeart-table" role="grid">
    227             <thead>
    228                 <tr>
    229                     <th scope="col">Calculator</th>
    230                     <th scope="col">Shortcode</th>
    231                     <th scope="col">Description</th>
    232                 </tr>
    233             </thead>
    234             <tbody>
    235                 <tr>
    236                     <td>Basic Calculator</td>
    237                     <td><code>[codeart_units_converter_basic_calculator]</code></td>
    238                     <td class="description">A user-friendly calculator for addition, subtraction, multiplication, and division.</td>
    239                 </tr>
    240                 <tr>
    241                     <td>Scientific Calculator</td>
    242                     <td><code>[codeart_units_converter_scientific_calculator]</code></td>
    243                     <td class="description">Supports trigonometric functions, logarithms, exponentiation, and more.</td>
    244                 </tr>
    245             </tbody>
    246         </table>
     368        <h2>Calculators <button class="toggle-btn" aria-expanded="true">Hide</button></h2>
     369        <div class="section-content">
     370            <p>Embed these calculators for quick arithmetic or advanced computations:</p>
     371            <table class="codeart-table" role="grid">
     372                <thead>
     373                    <tr>
     374                        <th scope="col">Calculator</th>
     375                        <th scope="col">Shortcode</th>
     376                        <th scope="col">Description</th>
     377                    </tr>
     378                </thead>
     379                <tbody>
     380                    <tr>
     381                        <td data-label="Calculator">Basic Calculator</td>
     382                        <td data-label="Shortcode">
     383                            <code class="copyable">[codeart_units_converter_basic_calculator]</code>
     384                            <button class="copy-btn">Copy</button>
     385                        </td>
     386                        <td data-label="Description" class="description">A user-friendly calculator for addition, subtraction, multiplication, and division.</td>
     387                    </tr>
     388                    <tr>
     389                        <td data-label="Calculator">Scientific Calculator</td>
     390                        <td data-label="Shortcode">
     391                            <code class="copyable">[codeart_units_converter_scientific_calculator]</code>
     392                            <button class="copy-btn">Copy</button>
     393                        </td>
     394                        <td data-label="Description" class="description">Supports trigonometric functions, logarithms, exponentiation, and more.</td>
     395                    </tr>
     396                </tbody>
     397            </table>
     398        </div>
    247399    </div>
    248400
    249     <a href="#" class="action-link">
     401    <a href="#" class="action-link" aria-label="Open Shortcodes Manager for CodeArt Units Converter">
    250402        Shortcodes Manager
    251         <svg fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
     403        <svg fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" title="Arrow icon">
    252404            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
    253405        </svg>
    254406    </a>
    255 
    256407</div>
     408
     409<script>
     410    // Copy to Clipboard
     411    document.querySelectorAll('.copy-btn').forEach(btn => {
     412        btn.addEventListener('click', () => {
     413            const code = btn.previousElementSibling.textContent;
     414            navigator.clipboard.writeText(code);
     415            btn.textContent = 'Copied!';
     416            setTimeout(() => btn.textContent = 'Copy', 2000);
     417        });
     418    });
     419
     420    // Collapsible Sections
     421    document.querySelectorAll('.toggle-btn').forEach(btn => {
     422        btn.addEventListener('click', () => {
     423            const content = btn.closest('.codeart-section').querySelector('.section-content');
     424            content.toggleAttribute('hidden');
     425            const isExpanded = !content.hasAttribute('hidden');
     426            btn.setAttribute('aria-expanded', isExpanded);
     427            btn.textContent = isExpanded ? 'Hide' : 'Show';
     428        });
     429    });
     430
     431    // Search Functionality
     432    document.querySelector('.search-bar').addEventListener('input', (e) => {
     433        const term = e.target.value.toLowerCase();
     434        document.querySelectorAll('.codeart-section').forEach(section => {
     435            const text = section.textContent.toLowerCase();
     436            section.style.display = text.includes(term) ? 'block' : 'none';
     437        });
     438    });
     439</script>
Note: See TracChangeset for help on using the changeset viewer.