WordPress.org
Get WordPress

Plugin Directory

Changeset 3275744


Ignore:
Timestamp:
04/17/2025 11:29:51 AM (11 months ago)
Author:
codeisartnet
Message:

update

Location:
codeart-units-converter
Files:
16 added
8 deleted
3 edited
28 copied

Legend:

Unmodified
Added
Removed

  • codeart-units-converter/tags/2.6.0/codeart-units-converter.php

    r3275632 r3275744  
    1010 * Text Domain: codeart-units-converter
    1111 * Domain Path: /i18n/languages/
    12  * Version: 2.5.0
     12 * Version: 2.6.0
    1313 * Tested up to: 6.8.0
    1414 */
    … …  
    1919}
    2020
    21 $codeart_units_converter_version = '2.4.0';
     21$codeart_units_converter_version = '2.6.0';
    2222
    2323/**
    … …  
    118118//force
    119119include_once plugin_dir_path(__FILE__) . 'include/converter/force/force.php';
    120 
    121 
    122 
    123 
     120//angle
     121include_once plugin_dir_path(__FILE__) . 'include/converter/angle/angle.php';
     122//frequency
     123include_once plugin_dir_path(__FILE__) . 'include/converter/frequency/frequency.php';
     124//fuel economy
     125include_once plugin_dir_path(__FILE__) . 'include/converter/fuel-economy/fuel-economy.php';
     126//density
     127include_once plugin_dir_path(__FILE__) . 'include/converter/density/density.php';
    124128
    125129

  • codeart-units-converter/tags/2.6.0/readme.txt

    r3275632 r3275744  
    66Requires PHP: 7.0
    77Tested up to: 6.8.0
    8 Stable tag: 2.5.0
     8Stable tag: 2.6.0
    99License: GPLv3
    1010License URI: https://www.gnu.org/licenses/gpl-3.0.html

  • codeart-units-converter/tags/2.6.0/templates/admin/about.htm

    r3275583 r3275744  
    11<style>
    22     :root {
    3         --primary-color: #3b82f6;
    4         --secondary-color: #1e3a8a;
    5         --background-color: #f8fafc;
    6         --card-background: #ffffff;
    7         --text-color: #1f2937;
    8         --text-muted: #4b5563;
    9         /* Darkened for better contrast */
    10         --border-color: #e5e7eb;
    11         --shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
     3        --primary-color: #2563eb;
     4        --secondary-color: #1e40af;
     5        --accent-color: #10b981;
     6        --background-color: #f1f5f9;
     7        --card-background: rgba(255, 255, 255, 0.95);
     8        --text-color: #111827;
     9        --text-muted: #6b7280;
     10        --border-color: #d1d5db;
     11        --shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
     12        --shadow-hover: 0 10px 30px rgba(0, 0, 0, 0.15);
    1213        --transition: all 0.3s ease;
    1314        --spacing-sm: 8px;
    … …  
    1516        --spacing-lg: 24px;
    1617        --spacing-xl: 32px;
    17         --radius: 10px;
    18         /* Standardized border radius */
    19     }
    20     /* Dark mode support */
     18        --radius: 12px;
     19        --font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
     20    }
    2121   
    2222    @media (prefers-color-scheme: dark) {
    2323         :root {
    2424            --background-color: #1f2937;
    25             --card-background: #374151;
    26             --text-color: #f8fafc;
     25            --card-background: rgba(55, 65, 81, 0.9);
     26            --text-color: #f9fafb;
    2727            --text-muted: #d1d5db;
    2828            --border-color: #4b5563;
    29         }
    30         .codeart-table tr:hover {
    31             background: #4b5563;
     29            --shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
     30        }
     31    }
     32   
     33    body {
     34        margin: 0;
     35        font-family: var(--font-family);
     36        background: var(--background-color);
     37        animation: fadeIn 0.5s ease-in;
     38    }
     39   
     40    @keyframes fadeIn {
     41        from {
     42            opacity: 0;
     43        }
     44        to {
     45            opacity: 1;
    3246        }
    3347    }
    3448   
    3549    .codeart-dashboard {
    36         background: var(--background-color);
    3750        padding: var(--spacing-xl);
    3851        max-width: 1280px;
    3952        margin: 20px auto;
    40         font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    41         line-height: 1.5;
     53        position: relative;
    4254    }
    4355   
    4456    .codeart-dashboard h1 {
    45         font-size: 2.25rem;
    46         /* Increased for better hierarchy */
     57        font-size: 2.5rem;
    4758        font-weight: 700;
    4859        color: #ffffff;
    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);
     60        background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
     61        padding: var(--spacing-lg);
    5262        border-radius: var(--radius);
    5363        text-align: center;
    5464        margin-bottom: var(--spacing-xl);
    5565        box-shadow: var(--shadow);
    56         transition: var(--transition);
    57         letter-spacing: 0.02em;
     66        position: sticky;
     67        top: 0;
     68        z-index: 10;
     69        backdrop-filter: blur(5px);
    5870    }
    5971   
    6072    .codeart-dashboard h2 {
    61         font-size: 1.75rem;
     73        font-size: 1.875rem;
    6274        font-weight: 600;
    6375        color: var(--text-color);
    6476        margin: var(--spacing-xl) 0 var(--spacing-md);
    65         position: relative;
    6677        display: flex;
    6778        justify-content: space-between;
    … …  
    7182    .codeart-dashboard h2::after {
    7283        content: '';
    73         width: 60px;
    74         height: 3px;
     84        width: 80px;
     85        height: 4px;
    7586        background: var(--primary-color);
    7687        position: absolute;
    77         bottom: -8px;
     88        bottom: -10px;
    7889        left: 0;
    7990    }
    8091   
    8192    .codeart-dashboard p {
    82         font-size: 1rem;
     93        font-size: 1.1rem;
    8394        color: var(--text-muted);
    8495        margin-bottom: var(--spacing-lg);
     96        line-height: 1.8;
    8597    }
    8698   
    … …  
    89101        font-weight: 600;
    90102    }
    91     /* Search Bar */
    92103   
    93104    .search-bar {
    … …  
    98109        font-size: 1rem;
    99110        margin-bottom: var(--spacing-lg);
    100     }
    101     /* Card Layout */
     111        background: var(--card-background);
     112        transition: var(--transition);
     113        padding-left: 40px;
     114    }
     115   
     116    .search-bar:focus {
     117        outline: none;
     118        border-color: var(--primary-color);
     119        box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.2);
     120    }
     121   
     122    .search-bar::before {
     123        content: '\f002';
     124        font-family: 'Font Awesome 6 Free';
     125        font-weight: 900;
     126        position: absolute;
     127        left: 12px;
     128        top: 50%;
     129        transform: translateY(-50%);
     130        color: var(--text-muted);
     131    }
    102132   
    103133    .codeart-section {
    … …  
    108138        margin-bottom: var(--spacing-xl);
    109139        transition: var(--transition);
     140        backdrop-filter: blur(10px);
     141        animation: slideUp 0.5s ease;
     142    }
     143   
     144    @keyframes slideUp {
     145        from {
     146            transform: translateY(20px);
     147            opacity: 0;
     148        }
     149        to {
     150            transform: translateY(0);
     151            opacity: 1;
     152        }
    110153    }
    111154   
    112155    .codeart-section:hover {
    113         transform: translateY(-4px);
    114         box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
     156        transform: translateY(-6px);
     157        box-shadow: var(--shadow-hover);
    115158    }
    116159   
    … …  
    124167        color: var(--primary-color);
    125168        cursor: pointer;
    126         font-size: 0.9rem;
     169        font-size: 0.95rem;
    127170        padding: var(--spacing-sm);
     171        transition: var(--transition);
    128172    }
    129173   
    130174    .toggle-btn:hover {
     175        color: var(--secondary-color);
    131176        text-decoration: underline;
    132177    }
    133     /* Table Styling */
    134    
    135     .codeart-table {
    136         width: 100%;
    137         border-collapse: collapse;
     178   
     179    .dropdown-list {
    138180        margin-top: var(--spacing-md);
    139         background: var(--card-background);
     181    }
     182   
     183    .dropdown-item {
     184        margin-bottom: var(--spacing-sm);
    140185        border-radius: var(--radius);
    141186        overflow: hidden;
    142     }
    143    
    144     .codeart-table th,
    145     .codeart-table td {
     187        background: var(--card-background);
     188        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
     189        transition: var(--transition);
     190    }
     191   
     192    .dropdown-header {
     193        display: flex;
     194        align-items: center;
     195        justify-content: space-between;
    146196        padding: var(--spacing-md);
    147         text-align: left;
    148         font-size: 0.95rem;
     197        background: var(--background-color);
     198        cursor: pointer;
     199        font-size: 1rem;
     200        font-weight: 500;
    149201        color: var(--text-color);
    150     }
    151    
    152     .codeart-table th {
    153         background: var(--background-color);
    154         font-weight: 600;
    155         border-bottom: 2px solid var(--border-color);
    156     }
    157    
    158     .codeart-table td {
    159         border-bottom: 1px solid var(--border-color);
    160         color: var(--text-muted);
    161     }
    162    
    163     .codeart-table tr:last-child td {
    164         border-bottom: none;
    165     }
    166    
    167     .codeart-table tr:hover {
    168         background: #dbeafe;
    169         /* More distinct hover */
    170         border-left: 3px solid var(--primary-color);
    171     }
    172    
    173     .codeart-table .description {
     202        transition: var(--transition);
     203    }
     204   
     205    .dropdown-header:hover {
     206        background: rgba(37, 99, 235, 0.1);
     207    }
     208   
     209    .dropdown-header i {
     210        margin-right: var(--spacing-sm);
     211    }
     212   
     213    .dropdown-header .fa-chevron-down {
     214        transition: transform 0.3s ease;
     215    }
     216   
     217    .dropdown-header[aria-expanded="true"] .fa-chevron-down {
     218        transform: rotate(180deg);
     219    }
     220   
     221    .dropdown-content {
     222        padding: var(--spacing-md);
     223        display: none;
     224        background: var(--card-background);
     225    }
     226   
     227    .dropdown-content[aria-hidden="false"] {
     228        display: block;
     229    }
     230   
     231    .dropdown-content p {
    174232        font-size: 0.9rem;
    175233        color: var(--text-muted);
    176         font-style: normal;
     234        margin: 0 0 var(--spacing-md);
     235    }
     236   
     237    .shortcode-group {
     238        display: flex;
     239        gap: var(--spacing-md);
     240        flex-wrap: wrap;
     241    }
     242   
     243    .shortcode-item {
     244        flex: 1;
     245        min-width: 200px;
     246    }
     247   
     248    .shortcode-item strong {
     249        font-size: 0.95rem;
     250        display: block;
     251        margin-bottom: var(--spacing-sm);
    177252    }
    178253   
    179254    .copyable {
    180255        cursor: pointer;
    181         background: #f1f5f9;
    182         padding: 4px 8px;
    183         border-radius: 4px;
     256        background: #e5e7eb;
     257        padding: 6px 10px;
     258        border-radius: 6px;
    184259        display: inline-block;
     260        transition: var(--transition);
     261        font-size: 0.9rem;
     262    }
     263   
     264    .copyable:hover {
     265        background: #d1d5db;
    185266    }
    186267   
    … …  
    189270        color: #fff;
    190271        border: none;
    191         padding: 6px 12px;
    192         border-radius: 6px;
     272        padding: 8px 16px;
     273        border-radius: 8px;
    193274        cursor: pointer;
    194         font-size: 0.85rem;
     275        font-size: 0.9rem;
    195276        margin-left: var(--spacing-sm);
     277        position: relative;
     278        transition: var(--transition);
    196279    }
    197280   
    198281    .copy-btn:hover {
    199282        background: var(--secondary-color);
    200     }
    201     /* Buttons and Links */
    202    
    203     .codeart-dashboard .action-link {
     283        transform: scale(1.05);
     284    }
     285   
     286    .copy-btn[data-copied="true"]::after {
     287        content: 'Copied!';
     288        position: absolute;
     289        top: -30px;
     290        left: 50%;
     291        transform: translateX(-50%);
     292        background: var(--accent-color);
     293        color: #fff;
     294        padding: 4px 8px;
     295        border-radius: 4px;
     296        font-size: 0.8rem;
     297        opacity: 1;
     298        transition: opacity 0.3s ease;
     299    }
     300   
     301    .action-link {
    204302        display: inline-flex;
    205303        align-items: center;
    206304        background: var(--primary-color);
    207305        color: #ffffff;
    208         padding: 14px 28px;
     306        padding: 16px 32px;
    209307        border-radius: var(--radius);
    210308        text-decoration: none;
    211309        font-weight: 500;
    212         font-size: 1.1rem;
     310        font-size: 1.2rem;
    213311        transition: var(--transition);
    214312        margin-top: var(--spacing-md);
    215     }
    216    
    217     .codeart-dashboard .action-link:hover {
     313        box-shadow: var(--shadow);
     314    }
     315   
     316    .action-link:hover {
    218317        background: var(--secondary-color);
    219         transform: translateY(-2px);
    220         box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    221     }
    222    
    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 {
     318        transform: translateY(-4px);
     319        box-shadow: var(--shadow-hover);
     320    }
     321   
     322    .action-link:focus {
     323        outline: 3px solid var(--primary-color);
     324        outline-offset: 3px;
     325    }
     326   
     327    .action-link:disabled {
    229328        background: var(--text-muted);
    230329        cursor: not-allowed;
    … …  
    233332    }
    234333   
    235     .codeart-dashboard .action-link svg {
     334    .action-link svg {
    236335        margin-left: var(--spacing-sm);
    237         width: 16px;
    238         height: 16px;
    239     }
    240     /* Responsive Design */
     336        width: 18px;
     337        height: 18px;
     338    }
    241339   
    242340    @media screen and (max-width: 768px) {
    … …  
    245343        }
    246344        .codeart-dashboard h1 {
    247             font-size: 2rem;
     345            font-size: 2.25rem;
    248346            padding: var(--spacing-md);
    249347        }
    250348        .codeart-dashboard h2 {
    251             font-size: 1.5rem;
    252         }
    253         .codeart-table th,
    254         .codeart-table td {
     349            font-size: 1.75rem;
     350        }
     351        .dropdown-header {
     352            font-size: 0.95rem;
     353            padding: var(--spacing-sm);
     354        }
     355        .dropdown-content {
     356            padding: var(--spacing-sm);
     357        }
     358        .shortcode-group {
     359            flex-direction: column;
     360            gap: var(--spacing-sm);
     361        }
     362        .action-link {
     363            padding: 14px 28px;
     364            font-size: 1.1rem;
     365        }
     366    }
     367   
     368    @media screen and (max-width: 480px) {
     369        .dropdown-item {
     370            margin-bottom: var(--spacing-md);
     371        }
     372        .dropdown-header {
     373            font-size: 0.9rem;
     374        }
     375        .dropdown-content p {
    255376            font-size: 0.85rem;
    256             padding: var(--spacing-sm);
    257         }
    258         .codeart-section {
    259             padding: var(--spacing-md);
    260         }
    261         .codeart-dashboard .action-link {
    262             padding: 16px 32px;
    263             min-height: 48px;
    264         }
    265     }
    266    
    267     @media screen and (max-width: 480px) {
    268         .codeart-table {
    269             display: block;
    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);
    293         }
    294         .codeart-dashboard .action-link {
     377        }
     378        .copyable {
     379            font-size: 0.85rem;
     380        }
     381        .copy-btn {
     382            padding: 6px 12px;
     383            font-size: 0.85rem;
     384        }
     385        .action-link {
    295386            width: 100%;
    296387            justify-content: center;
    297             padding: 16px;
     388            padding: 14px;
    298389        }
    299390    }
    300391</style>
     392
    301393
    302394<div class="codeart-dashboard">
    303395    <h1>CodeArt Units Converter – Dashboard</h1>
    304396
    305     <input type="text" class="search-bar" placeholder="Search converters or calculators..." />
     397    <input type="text" class="search-bar" placeholder="Search converters or calculators..." aria-label="Search converters or calculators" />
    306398
    307399    <div class="codeart-section">
    … …  
    312404
    313405    <div class="codeart-section">
    314         <h2>Converters <button class="toggle-btn" aria-expanded="true">Hide</button></h2>
     406        <h2>Converters <button class="toggle-btn" aria-expanded="true" aria-label="Toggle converters section">Hide</button></h2>
    315407        <div class="section-content">
    316408            <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                     <tr>
    363                         <td data-label="Converter">Length</td>
    364                         <td data-label="Shortcode">
    365                             <strong>Table</strong><br>
    366                             <code class="copyable">[codeart_units_converter_converters type='length' style='table']</code>
    367                             <button class="copy-btn">Copy</button><br>
    368                             <strong>List</strong><br>
    369                             <code class="copyable">[codeart_units_converter_converters type='length' style='list']</code>
    370                             <button class="copy-btn">Copy</button>
    371                         </td>
    372                         <td data-label="Description" class="description">Converts between meters, kilometers, miles, feet, inches, and more.</td>
    373                     </tr>
    374                     <tr>
    375                         <td data-label="Converter">Temperature</td>
    376                         <td data-label="Shortcode">
    377                             <strong>Table</strong><br>
    378                             <code class="copyable">[codeart_units_converter_converters type='temperature' style='table']</code>
    379                             <button class="copy-btn">Copy</button><br>
    380                             <strong>List</strong><br>
    381                             <code class="copyable">[codeart_units_converter_converters type='temperature' style='list']</code>
    382                             <button class="copy-btn">Copy</button>
    383                         </td>
    384                         <td data-label="Description" class="description">Converts between Celsius, Fahrenheit, and Kelvin.</td>
    385                     </tr>
    386                     <tr>
    387                         <td data-label="Converter">Volume</td>
    388                         <td data-label="Shortcode">
    389                             <strong>Table</strong><br>
    390                             <code class="copyable">[codeart_units_converter_converters type='volume' style='table']</code>
    391                             <button class="copy-btn">Copy</button><br>
    392                             <strong>List</strong><br>
    393                             <code class="copyable">[codeart_units_converter_converters type='volume' style='list']</code>
    394                             <button class="copy-btn">Copy</button>
    395                         </td>
    396                         <td data-label="Description" class="description">Converts between liters, milliliters, gallons, cups, and more.</td>
    397                     </tr>
    398                     <tr>
    399                         <td data-label="Converter">Time</td>
    400                         <td data-label="Shortcode">
    401                             <strong>Table</strong><br>
    402                             <code class="copyable">[codeart_units_converter_converters type='time' style='table']</code>
    403                             <button class="copy-btn">Copy</button><br>
    404                             <strong>List</strong><br>
    405                             <code class="copyable">[codeart_units_converter_converters type='time' style='list']</code>
    406                             <button class="copy-btn">Copy</button>
    407                         </td>
    408                         <td data-label="Description" class="description">Converts between seconds, minutes, hours, days, and weeks.</td>
    409                     </tr>
    410 
    411                 </tbody>
    412             </table>
     409            <div class="dropdown-list">
     410                <div class="dropdown-item">
     411                    <div class="dropdown-header" aria-expanded="false" role="button" tabindex="0">
     412                        <span><i class="fas fa-weight-scale"></i> Weight</span>
     413                        <i class="fas fa-chevron-down"></i>
     414                    </div>
     415                    <div class="dropdown-content" aria-hidden="true">
     416                        <p>Converts between units like kilograms, pounds, ounces, and grams.</p>
     417                        <div class="shortcode-group">
     418                            <div class="shortcode-item">
     419                                <strong>Table</strong>
     420                                <code class="copyable">[codeart_units_converter_converters type='weight' style='table']</code>
     421                                <button class="copy-btn" aria-label="Copy weight table shortcode">Copy</button>
     422                            </div>
     423                            <div class="shortcode-item">
     424                                <strong>List</strong>
     425                                <code class="copyable">[codeart_units_converter_converters type='weight' style='list']</code>
     426                                <button class="copy-btn" aria-label="Copy weight list shortcode">Copy</button>
     427                            </div>
     428                        </div>
     429                    </div>
     430                </div>
     431                <div class="dropdown-item">
     432                    <div class="dropdown-header" aria-expanded="false" role="button" tabindex="0">
     433                        <span><i class="fas fa-tachometer-alt"></i> Speed</span>
     434                        <i class="fas fa-chevron-down"></i>
     435                    </div>
     436                    <div class="dropdown-content" aria-hidden="true">
     437                        <p>Converts between meters per second, kilometers per hour, miles per hour, and knots.</p>
     438                        <div class="shortcode-group">
     439                            <div class="shortcode-item">
     440                                <strong>Table</strong>
     441                                <code class="copyable">[codeart_units_converter_converters type='speed' style='table']</code>
     442                                <button class="copy-btn" aria-label="Copy speed table shortcode">Copy</button>
     443                            </div>
     444                            <div class="shortcode-item">
     445                                <strong>List</strong>
     446                                <code class="copyable">[codeart_units_converter_converters type='speed' style='list']</code>
     447                                <button class="copy-btn" aria-label="Copy speed list shortcode">Copy</button>
     448                            </div>
     449                        </div>
     450                    </div>
     451                </div>
     452                <div class="dropdown-item">
     453                    <div class="dropdown-header" aria-expanded="false" role="button" tabindex="0">
     454                        <span><i class="fas fa-ruler-combined"></i> Area</span>
     455                        <i class="fas fa-chevron-down"></i>
     456                    </div>
     457                    <div class="dropdown-content" aria-hidden="true">
     458                        <p>Converts between square meters, square feet, acres, and square kilometers.</p>
     459                        <div class="shortcode-group">
     460                            <div class="shortcode-item">
     461                                <strong>Table</strong>
     462                                <code class="copyable">[codeart_units_converter_converters type='area' style='table']</code>
     463                                <button class="copy-btn" aria-label="Copy area table shortcode">Copy</button>
     464                            </div>
     465                            <div class="shortcode-item">
     466                                <strong>List</strong>
     467                                <code class="copyable">[codeart_units_converter_converters type='area' style='list']</code>
     468                                <button class="copy-btn" aria-label="Copy area list shortcode">Copy</button>
     469                            </div>
     470                        </div>
     471                    </div>
     472                </div>
     473                <div class="dropdown-item">
     474                    <div class="dropdown-header" aria-expanded="false" role="button" tabindex="0">
     475                        <span><i class="fas fa-ruler"></i> Length</span>
     476                        <i class="fas fa-chevron-down"></i>
     477                    </div>
     478                    <div class="dropdown-content" aria-hidden="true">
     479                        <p>Converts between meters, kilometers, miles, feet, inches, and more.</p>
     480                        <div class="shortcode-group">
     481                            <div class="shortcode-item">
     482                                <strong>Table</strong>
     483                                <code class="copyable">[codeart_units_converter_converters type='length' style='table']</code>
     484                                <button class="copy-btn" aria-label="Copy length table shortcode">Copy</button>
     485                            </div>
     486                            <div class="shortcode-item">
     487                                <strong>List</strong>
     488                                <code class="copyable">[codeart_units_converter_converters type='length' style='list']</code>
     489                                <button class="copy-btn" aria-label="Copy length list shortcode">Copy</button>
     490                            </div>
     491                        </div>
     492                    </div>
     493                </div>
     494                <div class="dropdown-item">
     495                    <div class="dropdown-header" aria-expanded="false" role="button" tabindex="0">
     496                        <span><i class="fas fa-thermometer-half"></i> Temperature</span>
     497                        <i class="fas fa-chevron-down"></i>
     498                    </div>
     499                    <div class="dropdown-content" aria-hidden="true">
     500                        <p>Converts between Celsius, Fahrenheit, and Kelvin.</p>
     501                        <div class="shortcode-group">
     502                            <div class="shortcode-item">
     503                                <strong>Table</strong>
     504                                <code class="copyable">[codeart_units_converter_converters type='temperature' style='table']</code>
     505                                <button class="copy-btn" aria-label="Copy temperature table shortcode">Copy</button>
     506                            </div>
     507                            <div class="shortcode-item">
     508                                <strong>List</strong>
     509                                <code class="copyable">[codeart_units_converter_converters type='temperature' style='list']</code>
     510                                <button class="copy-btn" aria-label="Copy temperature list shortcode">Copy</button>
     511                            </div>
     512                        </div>
     513                    </div>
     514                </div>
     515                <div class="dropdown-item">
     516                    <div class="dropdown-header" aria-expanded="false" role="button" tabindex="0">
     517                        <span><i class="fas fa-wine-bottle"></i> Volume</span>
     518                        <i class="fas fa-chevron-down"></i>
     519                    </div>
     520                    <div class="dropdown-content" aria-hidden="true">
     521                        <p>Converts between liters, milliliters, gallons, cups, and more.</p>
     522                        <div class="shortcode-group">
     523                            <div class="shortcode-item">
     524                                <strong>Table</strong>
     525                                <code class="copyable">[codeart_units_converter_converters type='volume' style='table']</code>
     526                                <button class="copy-btn" aria-label="Copy volume table shortcode">Copy</button>
     527                            </div>
     528                            <div class="shortcode-item">
     529                                <strong>List</strong>
     530                                <code class="copyable">[codeart_units_converter_converters type='volume' style='list']</code>
     531                                <button class="copy-btn" aria-label="Copy volume list shortcode">Copy</button>
     532                            </div>
     533                        </div>
     534                    </div>
     535                </div>
     536                <div class="dropdown-item">
     537                    <div class="dropdown-header" aria-expanded="false" role="button" tabindex="0">
     538                        <span><i class="fas fa-clock"></i> Time</span>
     539                        <i class="fas fa-chevron-down"></i>
     540                    </div>
     541                    <div class="dropdown-content" aria-hidden="true">
     542                        <p>Converts between seconds, minutes, hours, days, and weeks.</p>
     543                        <div class="shortcode-group">
     544                            <div class="shortcode-item">
     545                                <strong>Table</strong>
     546                                <code class="copyable">[codeart_units_converter_converters type='time' style='table']</code>
     547                                <button class="copy-btn" aria-label="Copy time table shortcode">Copy</button>
     548                            </div>
     549                            <div class="shortcode-item">
     550                                <strong>List</strong>
     551                                <code class="copyable">[codeart_units_converter_converters type='time' style='list']</code>
     552                                <button class="copy-btn" aria-label="Copy time list shortcode">Copy</button>
     553                            </div>
     554                        </div>
     555                    </div>
     556                </div>
     557                <div class="dropdown-item">
     558                    <div class="dropdown-header" aria-expanded="false" role="button" tabindex="0">
     559                        <span><i class="fas fa-hdd"></i> Digital Storage</span>
     560                        <i class="fas fa-chevron-down"></i>
     561                    </div>
     562                    <div class="dropdown-content" aria-hidden="true">
     563                        <p>Converts between bits, bytes, kilobytes, megabytes, gigabytes, and terabytes.</p>
     564                        <div class="shortcode-group">
     565                            <div class="shortcode-item">
     566                                <strong>Table</strong>
     567                                <code class="copyable">[codeart_units_converter_converters type='digital_storage' style='table']</code>
     568                                <button class="copy-btn" aria-label="Copy digital storage table shortcode">Copy</button>
     569                            </div>
     570                            <div class="shortcode-item">
     571                                <strong>List</strong>
     572                                <code class="copyable">[codeart_units_converter_converters type='digital_storage' style='list']</code>
     573                                <button class="copy-btn" aria-label="Copy digital storage list shortcode">Copy</button>
     574                            </div>
     575                        </div>
     576                    </div>
     577                </div>
     578                <div class="dropdown-item">
     579                    <div class="dropdown-header" aria-expanded="false" role="button" tabindex="0">
     580                        <span><i class="fas fa-bolt"></i> Energy</span>
     581                        <i class="fas fa-chevron-down"></i>
     582                    </div>
     583                    <div class="dropdown-content" aria-hidden="true">
     584                        <p>Converts between joules, kilojoules, watt-hours, and calories.</p>
     585                        <div class="shortcode-group">
     586                            <div class="shortcode-item">
     587                                <strong>Table</strong>
     588                                <code class="copyable">[codeart_units_converter_converters type='energy' style='table']</code>
     589                                <button class="copy-btn" aria-label="Copy energy table shortcode">Copy</button>
     590                            </div>
     591                            <div class="shortcode-item">
     592                                <strong>List</strong>
     593                                <code class="copyable">[codeart_units_converter_converters type='energy' style='list']</code>
     594                                <button class="copy-btn" aria-label="Copy energy list shortcode">Copy</button>
     595                            </div>
     596                        </div>
     597                    </div>
     598                </div>
     599                <div class="dropdown-item">
     600                    <div class="dropdown-header" aria-expanded="false" role="button" tabindex="0">
     601                        <span><i class="fas fa-plug"></i> Power</span>
     602                        <i class="fas fa-chevron-down"></i>
     603                    </div>
     604                    <div class="dropdown-content" aria-hidden="true">
     605                        <p>Converts between watts, kilowatts, horsepower, and joules per second.</p>
     606                        <div class="shortcode-group">
     607                            <div class="shortcode-item">
     608                                <strong>Table</strong>
     609                                <code class="copyable">[codeart_units_converter_converters type='power' style='table']</code>
     610                                <button class="copy-btn" aria-label="Copy power table shortcode">Copy</button>
     611                            </div>
     612                            <div class="shortcode-item">
     613                                <strong>List</strong>
     614                                <code class="copyable">[codeart_units_converter_converters type='power' style='list']</code>
     615                                <button class="copy-btn" aria-label="Copy power list shortcode">Copy</button>
     616                            </div>
     617                        </div>
     618                    </div>
     619                </div>
     620                <div class="dropdown-item">
     621                    <div class="dropdown-header" aria-expanded="false" role="button" tabindex="0">
     622                        <span><i class="fas fa-compress-arrows-alt"></i> Pressure</span>
     623                        <i class="fas fa-chevron-down"></i>
     624                    </div>
     625                    <div class="dropdown-content" aria-hidden="true">
     626                        <p>Converts between pascals, atmospheres, bars, and psi.</p>
     627                        <div class="shortcode-group">
     628                            <div class="shortcode-item">
     629                                <strong>Table</strong>
     630                                <code class="copyable">[codeart_units_converter_converters type='pressure' style='table']</code>
     631                                <button class="copy-btn" aria-label="Copy pressure table shortcode">Copy</button>
     632                            </div>
     633                            <div class="shortcode-item">
     634                                <strong>List</strong>
     635                                <code class="copyable">[codeart_units_converter_converters type='pressure' style='list']</code>
     636                                <button class="copy-btn" aria-label="Copy pressure list shortcode">Copy</button>
     637                            </div>
     638                        </div>
     639                    </div>
     640                </div>
     641                <div class="dropdown-item">
     642                    <div class="dropdown-header" aria-expanded="false" role="button" tabindex="0">
     643                        <span><i class="fas fa-dumbbell"></i> Force</span>
     644                        <i class="fas fa-chevron-down"></i>
     645                    </div>
     646                    <div class="dropdown-content" aria-hidden="true">
     647                        <p>Converts between newtons, pounds-force, and dynes.</p>
     648                        <div class="shortcode-group">
     649                            <div class="shortcode-item">
     650                                <strong>Table</strong>
     651                                <code class="copyable">[codeart_units_converter_converters type='force' style='table']</code>
     652                                <button class="copy-btn" aria-label="Copy force table shortcode">Copy</button>
     653                            </div>
     654                            <div class="shortcode-item">
     655                                <strong>List</strong>
     656                                <code class="copyable">[codeart_units_converter_converters type='force' style='list']</code>
     657                                <button class="copy-btn" aria-label="Copy force list shortcode">Copy</button>
     658                            </div>
     659                        </div>
     660                    </div>
     661                </div>
     662                <div class="dropdown-item">
     663                    <div class="dropdown-header" aria-expanded="false" role="button" tabindex="0">
     664                        <span><i class="fas fa-protractor"></i> Angle</span>
     665                        <i class="fas fa-chevron-down"></i>
     666                    </div>
     667                    <div class="dropdown-content" aria-hidden="true">
     668                        <p>Converts between degrees, radians, and gradians.</p>
     669                        <div class="shortcode-group">
     670                            <div class="shortcode-item">
     671                                <strong>Table</strong>
     672                                <code class="copyable">[codeart_units_converter_converters type='angle' style='table']</code>
     673                                <button class="copy-btn" aria-label="Copy angle table shortcode">Copy</button>
     674                            </div>
     675                            <div class="shortcode-item">
     676                                <strong>List</strong>
     677                                <code class="copyable">[codeart_units_converter_converters type='angle' style='list']</code>
     678                                <button class="copy-btn" aria-label="Copy angle list shortcode">Copy</button>
     679                            </div>
     680                        </div>
     681                    </div>
     682                </div>
     683                <div class="dropdown-item">
     684                    <div class="dropdown-header" aria-expanded="false" role="button" tabindex="0">
     685                        <span><i class="fas fa-wave-square"></i> Frequency</span>
     686                        <i class="fas fa-chevron-down"></i>
     687                    </div>
     688                    <div class="dropdown-content" aria-hidden="true">
     689                        <p>Converts between hertz, kilohertz, megahertz, and gigahertz.</p>
     690                        <div class="shortcode-group">
     691                            <div class="shortcode-item">
     692                                <strong>Table</strong>
     693                                <code class="copyable">[codeart_units_converter_converters type='frequency' style='table']</code>
     694                                <button class="copy-btn" aria-label="Copy frequency table shortcode">Copy</button>
     695                            </div>
     696                            <div class="shortcode-item">
     697                                <strong>List</strong>
     698                                <code class="copyable">[codeart_units_converter_converters type='frequency' style='list']</code>
     699                                <button class="copy-btn" aria-label="Copy frequency list shortcode">Copy</button>
     700                            </div>
     701                        </div>
     702                    </div>
     703                </div>
     704                <div class="dropdown-item">
     705                    <div class="dropdown-header" aria-expanded="false" role="button" tabindex="0">
     706                        <span><i class="fas fa-gas-pump"></i> Fuel Economy</span>
     707                        <i class="fas fa-chevron-down"></i>
     708                    </div>
     709                    <div class="dropdown-content" aria-hidden="true">
     710                        <p>Converts between miles per gallon, liters per 100 kilometers, and kilometers per liter.</p>
     711                        <div class="shortcode-group">
     712                            <div class="shortcode-item">
     713                                <strong>Table</strong>
     714                                <code class="copyable">[codeart_units_converter_converters type='fuel_economy' style='table']</code>
     715                                <button class="copy-btn" aria-label="Copy fuel economy table shortcode">Copy</button>
     716                            </div>
     717                            <div class="shortcode-item">
     718                                <strong>List</strong>
     719                                <code class="copyable">[codeart_units_converter_converters type='fuel_economy' style='list']</code>
     720                                <button class="copy-btn" aria-label="Copy fuel economy list shortcode">Copy</button>
     721                            </div>
     722                        </div>
     723                    </div>
     724                </div>
     725                <div class="dropdown-item">
     726                    <div class="dropdown-header" aria-expanded="false" role="button" tabindex="0">
     727                        <span><i class="fas fa-cubes"></i> Density</span>
     728                        <i class="fas fa-chevron-down"></i>
     729                    </div>
     730                    <div class="dropdown-content" aria-hidden="true">
     731                        <p>Converts between kilograms per cubic meter, grams per cubic centimeter, and pounds per cubic foot.
     732                        </p>
     733                        <div class="shortcode-group">
     734                            <div class="shortcode-item">
     735                                <strong>Table</strong>
     736                                <code class="copyable">[codeart_units_converter_converters type='density' style='table']</code>
     737                                <button class="copy-btn" aria-label="Copy density table shortcode">Copy</button>
     738                            </div>
     739                            <div class="shortcode-item">
     740                                <strong>List</strong>
     741                                <code class="copyable">[codeart_units_converter_converters type='density' style='list']</code>
     742                                <button class="copy-btn" aria-label="Copy density list shortcode">Copy</button>
     743                            </div>
     744                        </div>
     745                    </div>
     746                </div>
     747            </div>
    413748        </div>
    414749    </div>
    415750
    416751    <div class="codeart-section">
    417         <h2>Calculators <button class="toggle-btn" aria-expanded="true">Hide</button></h2>
     752        <h2>Calculators <button class="toggle-btn" aria-expanded="true" aria-label="Toggle calculators section">Hide</button></h2>
    418753        <div class="section-content">
    419754            <p>Embed these calculators for quick arithmetic or advanced computations:</p>
    420             <table class="codeart-table" role="grid">
    421                 <thead>
    422                     <tr>
    423                         <th scope="col">Calculator</th>
    424                         <th scope="col">Shortcode</th>
    425                         <th scope="col">Description</th>
    426                     </tr>
    427                 </thead>
    428                 <tbody>
    429                     <tr>
    430                         <td data-label="Calculator">Basic Calculator</td>
    431                         <td data-label="Shortcode">
    432                             <code class="copyable">[codeart_units_converter_basic_calculator]</code>
    433                             <button class="copy-btn">Copy</button>
    434                         </td>
    435                         <td data-label="Description" class="description">A user-friendly calculator for addition, subtraction, multiplication, and division.</td>
    436                     </tr>
    437                     <tr>
    438                         <td data-label="Calculator">Scientific Calculator</td>
    439                         <td data-label="Shortcode">
    440                             <code class="copyable">[codeart_units_converter_scientific_calculator]</code>
    441                             <button class="copy-btn">Copy</button>
    442                         </td>
    443                         <td data-label="Description" class="description">Supports trigonometric functions, logarithms, exponentiation, and more.</td>
    444                     </tr>
    445                 </tbody>
    446             </table>
     755            <div class="dropdown-list">
     756                <div class="dropdown-item">
     757                    <div class="dropdown-header" aria-expanded="false" role="button" tabindex="0">
     758                        <span><i class="fas fa-calculator"></i> Basic Calculator</span>
     759                        <i class="fas fa-chevron-down"></i>
     760                    </div>
     761                    <div class="dropdown-content" aria-hidden="true">
     762                        <p>A user-friendly calculator for addition, subtraction, multiplication, and division.</p>
     763                        <div class="shortcode-group">
     764                            <div class="shortcode-item">
     765                                <code class="copyable">[codeart_units_converter_basic_calculator]</code>
     766                                <button class="copy-btn" aria-label="Copy basic calculator shortcode">Copy</button>
     767                            </div>
     768                        </div>
     769                    </div>
     770                </div>
     771                <div class="dropdown-item">
     772                    <div class="dropdown-header" aria-expanded="false" role="button" tabindex="0">
     773                        <span><i class="fas fa-square-root-alt"></i> Scientific Calculator</span>
     774                        <i class="fas fa-chevron-down"></i>
     775                    </div>
     776                    <div class="dropdown-content" aria-hidden="true">
     777                        <p>Supports trigonometric functions, logarithms, exponentiation, and more.</p>
     778                        <div class="shortcode-group">
     779                            <div class="shortcode-item">
     780                                <code class="copyable">[codeart_units_converter_scientific_calculator]</code>
     781                                <button class="copy-btn" aria-label="Copy scientific calculator shortcode">Copy</button>
     782                            </div>
     783                        </div>
     784                    </div>
     785                </div>
     786            </div>
    447787        </div>
    448788    </div>
    … …  
    450790    <a href="#" class="action-link" aria-label="Open Shortcodes Manager for CodeArt Units Converter">
    451791        Shortcodes Manager
    452         <svg fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" title="Arrow icon">
     792        <svg fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"
     793            title="Arrow icon">
    453794            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
    454795        </svg>
    … …  
    457798
    458799<script>
     800    // Shared Keyboard Accessibility Function
     801    function handleKeyboardActivation(element, callback) {
     802        element.addEventListener('keypress', (e) => {
     803            if (e.key === 'Enter' || e.key === ' ') {
     804                e.preventDefault();
     805                callback();
     806            }
     807        });
     808    }
     809
    459810    // Copy to Clipboard
    460811    document.querySelectorAll('.copy-btn').forEach(btn => {
    461812        btn.addEventListener('click', () => {
    462813            const code = btn.previousElementSibling.textContent;
    463             navigator.clipboard.writeText(code);
    464             btn.textContent = 'Copied!';
    465             setTimeout(() => btn.textContent = 'Copy', 2000);
     814            navigator.clipboard.writeText(code).then(() => {
     815                btn.setAttribute('data-copied', 'true');
     816                btn.textContent = 'Copied!';
     817                setTimeout(() => {
     818                    btn.setAttribute('data-copied', 'false');
     819                    btn.textContent = 'Copy';
     820                }, 2000);
     821            });
    466822        });
     823        handleKeyboardActivation(btn, () => btn.click());
    467824    });
    468825
    … …  
    476833            btn.textContent = isExpanded ? 'Hide' : 'Show';
    477834        });
     835        handleKeyboardActivation(btn, () => btn.click());
     836    });
     837
     838    // Dropdown Toggle
     839    document.querySelectorAll('.dropdown-header').forEach(header => {
     840        header.addEventListener('click', () => {
     841            const content = header.nextElementSibling;
     842            const isExpanded = header.getAttribute('aria-expanded') === 'true';
     843            header.setAttribute('aria-expanded', !isExpanded);
     844            content.setAttribute('aria-hidden', isExpanded);
     845        });
     846        handleKeyboardActivation(header, () => header.click());
    478847    });
    479848
    … …  
    481850    document.querySelector('.search-bar').addEventListener('input', (e) => {
    482851        const term = e.target.value.toLowerCase();
    483         document.querySelectorAll('.codeart-section').forEach(section => {
    484             const text = section.textContent.toLowerCase();
    485             section.style.display = text.includes(term) ? 'block' : 'none';
     852        document.querySelectorAll('.dropdown-item').forEach(item => {
     853            const text = item.textContent.toLowerCase();
     854            item.style.display = text.includes(term) ? 'block' : 'none';
    486855        });
    487856    });
     857
     858    // Action Link Keyboard Accessibility
     859    document.querySelectorAll('.action-link').forEach(link => {
     860        handleKeyboardActivation(link, () => link.click());
     861    });
    488862</script>

  • codeart-units-converter/trunk/codeart-units-converter.php

    r3275632 r3275744  
    1010 * Text Domain: codeart-units-converter
    1111 * Domain Path: /i18n/languages/
    12  * Version: 2.5.0
     12 * Version: 2.6.0
    1313 * Tested up to: 6.8.0
    1414 */
    … …  
    1919}
    2020
    21 $codeart_units_converter_version = '2.4.0';
     21$codeart_units_converter_version = '2.6.0';
    2222
    2323/**
    … …  
    118118//force
    119119include_once plugin_dir_path(__FILE__) . 'include/converter/force/force.php';
    120 
    121 
    122 
    123 
     120//angle
     121include_once plugin_dir_path(__FILE__) . 'include/converter/angle/angle.php';
     122//frequency
     123include_once plugin_dir_path(__FILE__) . 'include/converter/frequency/frequency.php';
     124//fuel economy
     125include_once plugin_dir_path(__FILE__) . 'include/converter/fuel-economy/fuel-economy.php';
     126//density
     127include_once plugin_dir_path(__FILE__) . 'include/converter/density/density.php';
    124128
    125129

  • codeart-units-converter/trunk/readme.txt

    r3275632 r3275744  
    66Requires PHP: 7.0
    77Tested up to: 6.8.0
    8 Stable tag: 2.5.0
     8Stable tag: 2.6.0
    99License: GPLv3
    1010License URI: https://www.gnu.org/licenses/gpl-3.0.html

  • codeart-units-converter/trunk/templates/admin/about.htm

    r3275583 r3275744  
    11<style>
    22     :root {
    3         --primary-color: #3b82f6;
    4         --secondary-color: #1e3a8a;
    5         --background-color: #f8fafc;
    6         --card-background: #ffffff;
    7         --text-color: #1f2937;
    8         --text-muted: #4b5563;
    9         /* Darkened for better contrast */
    10         --border-color: #e5e7eb;
    11         --shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
     3        --primary-color: #2563eb;
     4        --secondary-color: #1e40af;
     5        --accent-color: #10b981;
     6        --background-color: #f1f5f9;
     7        --card-background: rgba(255, 255, 255, 0.95);
     8        --text-color: #111827;
     9        --text-muted: #6b7280;
     10        --border-color: #d1d5db;
     11        --shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
     12        --shadow-hover: 0 10px 30px rgba(0, 0, 0, 0.15);
    1213        --transition: all 0.3s ease;
    1314        --spacing-sm: 8px;
    … …  
    1516        --spacing-lg: 24px;
    1617        --spacing-xl: 32px;
    17         --radius: 10px;
    18         /* Standardized border radius */
    19     }
    20     /* Dark mode support */
     18        --radius: 12px;
     19        --font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
     20    }
    2121   
    2222    @media (prefers-color-scheme: dark) {
    2323         :root {
    2424            --background-color: #1f2937;
    25             --card-background: #374151;
    26             --text-color: #f8fafc;
     25            --card-background: rgba(55, 65, 81, 0.9);
     26            --text-color: #f9fafb;
    2727            --text-muted: #d1d5db;
    2828            --border-color: #4b5563;
    29         }
    30         .codeart-table tr:hover {
    31             background: #4b5563;
     29            --shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
     30        }
     31    }
     32   
     33    body {
     34        margin: 0;
     35        font-family: var(--font-family);
     36        background: var(--background-color);
     37        animation: fadeIn 0.5s ease-in;
     38    }
     39   
     40    @keyframes fadeIn {
     41        from {
     42            opacity: 0;
     43        }
     44        to {
     45            opacity: 1;
    3246        }
    3347    }
    3448   
    3549    .codeart-dashboard {
    36         background: var(--background-color);
    3750        padding: var(--spacing-xl);
    3851        max-width: 1280px;
    3952        margin: 20px auto;
    40         font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    41         line-height: 1.5;
     53        position: relative;
    4254    }
    4355   
    4456    .codeart-dashboard h1 {
    45         font-size: 2.25rem;
    46         /* Increased for better hierarchy */
     57        font-size: 2.5rem;
    4758        font-weight: 700;
    4859        color: #ffffff;
    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);
     60        background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
     61        padding: var(--spacing-lg);
    5262        border-radius: var(--radius);
    5363        text-align: center;
    5464        margin-bottom: var(--spacing-xl);
    5565        box-shadow: var(--shadow);
    56         transition: var(--transition);
    57         letter-spacing: 0.02em;
     66        position: sticky;
     67        top: 0;
     68        z-index: 10;
     69        backdrop-filter: blur(5px);
    5870    }
    5971   
    6072    .codeart-dashboard h2 {
    61         font-size: 1.75rem;
     73        font-size: 1.875rem;
    6274        font-weight: 600;
    6375        color: var(--text-color);
    6476        margin: var(--spacing-xl) 0 var(--spacing-md);
    65         position: relative;
    6677        display: flex;
    6778        justify-content: space-between;
    … …  
    7182    .codeart-dashboard h2::after {
    7283        content: '';
    73         width: 60px;
    74         height: 3px;
     84        width: 80px;
     85        height: 4px;
    7586        background: var(--primary-color);
    7687        position: absolute;
    77         bottom: -8px;
     88        bottom: -10px;
    7889        left: 0;
    7990    }
    8091   
    8192    .codeart-dashboard p {
    82         font-size: 1rem;
     93        font-size: 1.1rem;
    8394        color: var(--text-muted);
    8495        margin-bottom: var(--spacing-lg);
     96        line-height: 1.8;
    8597    }
    8698   
    … …  
    89101        font-weight: 600;
    90102    }
    91     /* Search Bar */
    92103   
    93104    .search-bar {
    … …  
    98109        font-size: 1rem;
    99110        margin-bottom: var(--spacing-lg);
    100     }
    101     /* Card Layout */
     111        background: var(--card-background);
     112        transition: var(--transition);
     113        padding-left: 40px;
     114    }
     115   
     116    .search-bar:focus {
     117        outline: none;
     118        border-color: var(--primary-color);
     119        box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.2);
     120    }
     121   
     122    .search-bar::before {
     123        content: '\f002';
     124        font-family: 'Font Awesome 6 Free';
     125        font-weight: 900;
     126        position: absolute;
     127        left: 12px;
     128        top: 50%;
     129        transform: translateY(-50%);
     130        color: var(--text-muted);
     131    }
    102132   
    103133    .codeart-section {
    … …  
    108138        margin-bottom: var(--spacing-xl);
    109139        transition: var(--transition);
     140        backdrop-filter: blur(10px);
     141        animation: slideUp 0.5s ease;
     142    }
     143   
     144    @keyframes slideUp {
     145        from {
     146            transform: translateY(20px);
     147            opacity: 0;
     148        }
     149        to {
     150            transform: translateY(0);
     151            opacity: 1;
     152        }
    110153    }
    111154   
    112155    .codeart-section:hover {
    113         transform: translateY(-4px);
    114         box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
     156        transform: translateY(-6px);
     157        box-shadow: var(--shadow-hover);
    115158    }
    116159   
    … …  
    124167        color: var(--primary-color);
    125168        cursor: pointer;
    126         font-size: 0.9rem;
     169        font-size: 0.95rem;
    127170        padding: var(--spacing-sm);
     171        transition: var(--transition);
    128172    }
    129173   
    130174    .toggle-btn:hover {
     175        color: var(--secondary-color);
    131176        text-decoration: underline;
    132177    }
    133     /* Table Styling */
    134    
    135     .codeart-table {
    136         width: 100%;
    137         border-collapse: collapse;
     178   
     179    .dropdown-list {
    138180        margin-top: var(--spacing-md);
    139         background: var(--card-background);
     181    }
     182   
     183    .dropdown-item {
     184        margin-bottom: var(--spacing-sm);
    140185        border-radius: var(--radius);
    141186        overflow: hidden;
    142     }
    143    
    144     .codeart-table th,
    145     .codeart-table td {
     187        background: var(--card-background);
     188        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
     189        transition: var(--transition);
     190    }
     191   
     192    .dropdown-header {
     193        display: flex;
     194        align-items: center;
     195        justify-content: space-between;
    146196        padding: var(--spacing-md);
    147         text-align: left;
    148         font-size: 0.95rem;
     197        background: var(--background-color);
     198        cursor: pointer;
     199        font-size: 1rem;
     200        font-weight: 500;
    149201        color: var(--text-color);
    150     }
    151    
    152     .codeart-table th {
    153         background: var(--background-color);
    154         font-weight: 600;
    155         border-bottom: 2px solid var(--border-color);
    156     }
    157    
    158     .codeart-table td {
    159         border-bottom: 1px solid var(--border-color);
    160         color: var(--text-muted);
    161     }
    162    
    163     .codeart-table tr:last-child td {
    164         border-bottom: none;
    165     }
    166    
    167     .codeart-table tr:hover {
    168         background: #dbeafe;
    169         /* More distinct hover */
    170         border-left: 3px solid var(--primary-color);
    171     }
    172    
    173     .codeart-table .description {
     202        transition: var(--transition);
     203    }
     204   
     205    .dropdown-header:hover {
     206        background: rgba(37, 99, 235, 0.1);
     207    }
     208   
     209    .dropdown-header i {
     210        margin-right: var(--spacing-sm);
     211    }
     212   
     213    .dropdown-header .fa-chevron-down {
     214        transition: transform 0.3s ease;
     215    }
     216   
     217    .dropdown-header[aria-expanded="true"] .fa-chevron-down {
     218        transform: rotate(180deg);
     219    }
     220   
     221    .dropdown-content {
     222        padding: var(--spacing-md);
     223        display: none;
     224        background: var(--card-background);
     225    }
     226   
     227    .dropdown-content[aria-hidden="false"] {
     228        display: block;
     229    }
     230   
     231    .dropdown-content p {
    174232        font-size: 0.9rem;
    175233        color: var(--text-muted);
    176         font-style: normal;
     234        margin: 0 0 var(--spacing-md);
     235    }
     236   
     237    .shortcode-group {
     238        display: flex;
     239        gap: var(--spacing-md);
     240        flex-wrap: wrap;
     241    }
     242   
     243    .shortcode-item {
     244        flex: 1;
     245        min-width: 200px;
     246    }
     247   
     248    .shortcode-item strong {
     249        font-size: 0.95rem;
     250        display: block;
     251        margin-bottom: var(--spacing-sm);
    177252    }
    178253   
    179254    .copyable {
    180255        cursor: pointer;
    181         background: #f1f5f9;
    182         padding: 4px 8px;
    183         border-radius: 4px;
     256        background: #e5e7eb;
     257        padding: 6px 10px;
     258        border-radius: 6px;
    184259        display: inline-block;
     260        transition: var(--transition);
     261        font-size: 0.9rem;
     262    }
     263   
     264    .copyable:hover {
     265        background: #d1d5db;
    185266    }
    186267   
    … …  
    189270        color: #fff;
    190271        border: none;
    191         padding: 6px 12px;
    192         border-radius: 6px;
     272        padding: 8px 16px;
     273        border-radius: 8px;
    193274        cursor: pointer;
    194         font-size: 0.85rem;
     275        font-size: 0.9rem;
    195276        margin-left: var(--spacing-sm);
     277        position: relative;
     278        transition: var(--transition);
    196279    }
    197280   
    198281    .copy-btn:hover {
    199282        background: var(--secondary-color);
    200     }
    201     /* Buttons and Links */
    202    
    203     .codeart-dashboard .action-link {
     283        transform: scale(1.05);
     284    }
     285   
     286    .copy-btn[data-copied="true"]::after {
     287        content: 'Copied!';
     288        position: absolute;
     289        top: -30px;
     290        left: 50%;
     291        transform: translateX(-50%);
     292        background: var(--accent-color);
     293        color: #fff;
     294        padding: 4px 8px;
     295        border-radius: 4px;
     296        font-size: 0.8rem;
     297        opacity: 1;
     298        transition: opacity 0.3s ease;
     299    }
     300   
     301    .action-link {
    204302        display: inline-flex;
    205303        align-items: center;
    206304        background: var(--primary-color);
    207305        color: #ffffff;
    208         padding: 14px 28px;
     306        padding: 16px 32px;
    209307        border-radius: var(--radius);
    210308        text-decoration: none;
    211309        font-weight: 500;
    212         font-size: 1.1rem;
     310        font-size: 1.2rem;
    213311        transition: var(--transition);
    214312        margin-top: var(--spacing-md);
    215     }
    216    
    217     .codeart-dashboard .action-link:hover {
     313        box-shadow: var(--shadow);
     314    }
     315   
     316    .action-link:hover {
    218317        background: var(--secondary-color);
    219         transform: translateY(-2px);
    220         box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    221     }
    222    
    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 {
     318        transform: translateY(-4px);
     319        box-shadow: var(--shadow-hover);
     320    }
     321   
     322    .action-link:focus {
     323        outline: 3px solid var(--primary-color);
     324        outline-offset: 3px;
     325    }
     326   
     327    .action-link:disabled {
    229328        background: var(--text-muted);
    230329        cursor: not-allowed;
    … …  
    233332    }
    234333   
    235     .codeart-dashboard .action-link svg {
     334    .action-link svg {
    236335        margin-left: var(--spacing-sm);
    237         width: 16px;
    238         height: 16px;
    239     }
    240     /* Responsive Design */
     336        width: 18px;
     337        height: 18px;
     338    }
    241339   
    242340    @media screen and (max-width: 768px) {
    … …  
    245343        }
    246344        .codeart-dashboard h1 {
    247             font-size: 2rem;
     345            font-size: 2.25rem;
    248346            padding: var(--spacing-md);
    249347        }
    250348        .codeart-dashboard h2 {
    251             font-size: 1.5rem;
    252         }
    253         .codeart-table th,
    254         .codeart-table td {
     349            font-size: 1.75rem;
     350        }
     351        .dropdown-header {
     352            font-size: 0.95rem;
     353            padding: var(--spacing-sm);
     354        }
     355        .dropdown-content {
     356            padding: var(--spacing-sm);
     357        }
     358        .shortcode-group {
     359            flex-direction: column;
     360            gap: var(--spacing-sm);
     361        }
     362        .action-link {
     363            padding: 14px 28px;
     364            font-size: 1.1rem;
     365        }
     366    }
     367   
     368    @media screen and (max-width: 480px) {
     369        .dropdown-item {
     370            margin-bottom: var(--spacing-md);
     371        }
     372        .dropdown-header {
     373            font-size: 0.9rem;
     374        }
     375        .dropdown-content p {
    255376            font-size: 0.85rem;
    256             padding: var(--spacing-sm);
    257         }
    258         .codeart-section {
    259             padding: var(--spacing-md);
    260         }
    261         .codeart-dashboard .action-link {
    262             padding: 16px 32px;
    263             min-height: 48px;
    264         }
    265     }
    266    
    267     @media screen and (max-width: 480px) {
    268         .codeart-table {
    269             display: block;
    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);
    293         }
    294         .codeart-dashboard .action-link {
     377        }
     378        .copyable {
     379            font-size: 0.85rem;
     380        }
     381        .copy-btn {
     382            padding: 6px 12px;
     383            font-size: 0.85rem;
     384        }
     385        .action-link {
    295386            width: 100%;
    296387            justify-content: center;
    297             padding: 16px;
     388            padding: 14px;
    298389        }
    299390    }
    300391</style>
     392
    301393
    302394<div class="codeart-dashboard">
    303395    <h1>CodeArt Units Converter – Dashboard</h1>
    304396
    305     <input type="text" class="search-bar" placeholder="Search converters or calculators..." />
     397    <input type="text" class="search-bar" placeholder="Search converters or calculators..." aria-label="Search converters or calculators" />
    306398
    307399    <div class="codeart-section">
    … …  
    312404
    313405    <div class="codeart-section">
    314         <h2>Converters <button class="toggle-btn" aria-expanded="true">Hide</button></h2>
     406        <h2>Converters <button class="toggle-btn" aria-expanded="true" aria-label="Toggle converters section">Hide</button></h2>
    315407        <div class="section-content">
    316408            <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                     <tr>
    363                         <td data-label="Converter">Length</td>
    364                         <td data-label="Shortcode">
    365                             <strong>Table</strong><br>
    366                             <code class="copyable">[codeart_units_converter_converters type='length' style='table']</code>
    367                             <button class="copy-btn">Copy</button><br>
    368                             <strong>List</strong><br>
    369                             <code class="copyable">[codeart_units_converter_converters type='length' style='list']</code>
    370                             <button class="copy-btn">Copy</button>
    371                         </td>
    372                         <td data-label="Description" class="description">Converts between meters, kilometers, miles, feet, inches, and more.</td>
    373                     </tr>
    374                     <tr>
    375                         <td data-label="Converter">Temperature</td>
    376                         <td data-label="Shortcode">
    377                             <strong>Table</strong><br>
    378                             <code class="copyable">[codeart_units_converter_converters type='temperature' style='table']</code>
    379                             <button class="copy-btn">Copy</button><br>
    380                             <strong>List</strong><br>
    381                             <code class="copyable">[codeart_units_converter_converters type='temperature' style='list']</code>
    382                             <button class="copy-btn">Copy</button>
    383                         </td>
    384                         <td data-label="Description" class="description">Converts between Celsius, Fahrenheit, and Kelvin.</td>
    385                     </tr>
    386                     <tr>
    387                         <td data-label="Converter">Volume</td>
    388                         <td data-label="Shortcode">
    389                             <strong>Table</strong><br>
    390                             <code class="copyable">[codeart_units_converter_converters type='volume' style='table']</code>
    391                             <button class="copy-btn">Copy</button><br>
    392                             <strong>List</strong><br>
    393                             <code class="copyable">[codeart_units_converter_converters type='volume' style='list']</code>
    394                             <button class="copy-btn">Copy</button>
    395                         </td>
    396                         <td data-label="Description" class="description">Converts between liters, milliliters, gallons, cups, and more.</td>
    397                     </tr>
    398                     <tr>
    399                         <td data-label="Converter">Time</td>
    400                         <td data-label="Shortcode">
    401                             <strong>Table</strong><br>
    402                             <code class="copyable">[codeart_units_converter_converters type='time' style='table']</code>
    403                             <button class="copy-btn">Copy</button><br>
    404                             <strong>List</strong><br>
    405                             <code class="copyable">[codeart_units_converter_converters type='time' style='list']</code>
    406                             <button class="copy-btn">Copy</button>
    407                         </td>
    408                         <td data-label="Description" class="description">Converts between seconds, minutes, hours, days, and weeks.</td>
    409                     </tr>
    410 
    411                 </tbody>
    412             </table>
     409            <div class="dropdown-list">
     410                <div class="dropdown-item">
     411                    <div class="dropdown-header" aria-expanded="false" role="button" tabindex="0">
     412                        <span><i class="fas fa-weight-scale"></i> Weight</span>
     413                        <i class="fas fa-chevron-down"></i>
     414                    </div>
     415                    <div class="dropdown-content" aria-hidden="true">
     416                        <p>Converts between units like kilograms, pounds, ounces, and grams.</p>
     417                        <div class="shortcode-group">
     418                            <div class="shortcode-item">
     419                                <strong>Table</strong>
     420                                <code class="copyable">[codeart_units_converter_converters type='weight' style='table']</code>
     421                                <button class="copy-btn" aria-label="Copy weight table shortcode">Copy</button>
     422                            </div>
     423                            <div class="shortcode-item">
     424                                <strong>List</strong>
     425                                <code class="copyable">[codeart_units_converter_converters type='weight' style='list']</code>
     426                                <button class="copy-btn" aria-label="Copy weight list shortcode">Copy</button>
     427                            </div>
     428                        </div>
     429                    </div>
     430                </div>
     431                <div class="dropdown-item">
     432                    <div class="dropdown-header" aria-expanded="false" role="button" tabindex="0">
     433                        <span><i class="fas fa-tachometer-alt"></i> Speed</span>
     434                        <i class="fas fa-chevron-down"></i>
     435                    </div>
     436                    <div class="dropdown-content" aria-hidden="true">
     437                        <p>Converts between meters per second, kilometers per hour, miles per hour, and knots.</p>
     438                        <div class="shortcode-group">
     439                            <div class="shortcode-item">
     440                                <strong>Table</strong>
     441                                <code class="copyable">[codeart_units_converter_converters type='speed' style='table']</code>
     442                                <button class="copy-btn" aria-label="Copy speed table shortcode">Copy</button>
     443                            </div>
     444                            <div class="shortcode-item">
     445                                <strong>List</strong>
     446                                <code class="copyable">[codeart_units_converter_converters type='speed' style='list']</code>
     447                                <button class="copy-btn" aria-label="Copy speed list shortcode">Copy</button>
     448                            </div>
     449                        </div>
     450                    </div>
     451                </div>
     452                <div class="dropdown-item">
     453                    <div class="dropdown-header" aria-expanded="false" role="button" tabindex="0">
     454                        <span><i class="fas fa-ruler-combined"></i> Area</span>
     455                        <i class="fas fa-chevron-down"></i>
     456                    </div>
     457                    <div class="dropdown-content" aria-hidden="true">
     458                        <p>Converts between square meters, square feet, acres, and square kilometers.</p>
     459                        <div class="shortcode-group">
     460                            <div class="shortcode-item">
     461                                <strong>Table</strong>
     462                                <code class="copyable">[codeart_units_converter_converters type='area' style='table']</code>
     463                                <button class="copy-btn" aria-label="Copy area table shortcode">Copy</button>
     464                            </div>
     465                            <div class="shortcode-item">
     466                                <strong>List</strong>
     467                                <code class="copyable">[codeart_units_converter_converters type='area' style='list']</code>
     468                                <button class="copy-btn" aria-label="Copy area list shortcode">Copy</button>
     469                            </div>
     470                        </div>
     471                    </div>
     472                </div>
     473                <div class="dropdown-item">
     474                    <div class="dropdown-header" aria-expanded="false" role="button" tabindex="0">
     475                        <span><i class="fas fa-ruler"></i> Length</span>
     476                        <i class="fas fa-chevron-down"></i>
     477                    </div>
     478                    <div class="dropdown-content" aria-hidden="true">
     479                        <p>Converts between meters, kilometers, miles, feet, inches, and more.</p>
     480                        <div class="shortcode-group">
     481                            <div class="shortcode-item">
     482                                <strong>Table</strong>
     483                                <code class="copyable">[codeart_units_converter_converters type='length' style='table']</code>
     484                                <button class="copy-btn" aria-label="Copy length table shortcode">Copy</button>
     485                            </div>
     486                            <div class="shortcode-item">
     487                                <strong>List</strong>
     488                                <code class="copyable">[codeart_units_converter_converters type='length' style='list']</code>
     489                                <button class="copy-btn" aria-label="Copy length list shortcode">Copy</button>
     490                            </div>
     491                        </div>
     492                    </div>
     493                </div>
     494                <div class="dropdown-item">
     495                    <div class="dropdown-header" aria-expanded="false" role="button" tabindex="0">
     496                        <span><i class="fas fa-thermometer-half"></i> Temperature</span>
     497                        <i class="fas fa-chevron-down"></i>
     498                    </div>
     499                    <div class="dropdown-content" aria-hidden="true">
     500                        <p>Converts between Celsius, Fahrenheit, and Kelvin.</p>
     501                        <div class="shortcode-group">
     502                            <div class="shortcode-item">
     503                                <strong>Table</strong>
     504                                <code class="copyable">[codeart_units_converter_converters type='temperature' style='table']</code>
     505                                <button class="copy-btn" aria-label="Copy temperature table shortcode">Copy</button>
     506                            </div>
     507                            <div class="shortcode-item">
     508                                <strong>List</strong>
     509                                <code class="copyable">[codeart_units_converter_converters type='temperature' style='list']</code>
     510                                <button class="copy-btn" aria-label="Copy temperature list shortcode">Copy</button>
     511                            </div>
     512                        </div>
     513                    </div>
     514                </div>
     515                <div class="dropdown-item">
     516                    <div class="dropdown-header" aria-expanded="false" role="button" tabindex="0">
     517                        <span><i class="fas fa-wine-bottle"></i> Volume</span>
     518                        <i class="fas fa-chevron-down"></i>
     519                    </div>
     520                    <div class="dropdown-content" aria-hidden="true">
     521                        <p>Converts between liters, milliliters, gallons, cups, and more.</p>
     522                        <div class="shortcode-group">
     523                            <div class="shortcode-item">
     524                                <strong>Table</strong>
     525                                <code class="copyable">[codeart_units_converter_converters type='volume' style='table']</code>
     526                                <button class="copy-btn" aria-label="Copy volume table shortcode">Copy</button>
     527                            </div>
     528                            <div class="shortcode-item">
     529                                <strong>List</strong>
     530                                <code class="copyable">[codeart_units_converter_converters type='volume' style='list']</code>
     531                                <button class="copy-btn" aria-label="Copy volume list shortcode">Copy</button>
     532                            </div>
     533                        </div>
     534                    </div>
     535                </div>
     536                <div class="dropdown-item">
     537                    <div class="dropdown-header" aria-expanded="false" role="button" tabindex="0">
     538                        <span><i class="fas fa-clock"></i> Time</span>
     539                        <i class="fas fa-chevron-down"></i>
     540                    </div>
     541                    <div class="dropdown-content" aria-hidden="true">
     542                        <p>Converts between seconds, minutes, hours, days, and weeks.</p>
     543                        <div class="shortcode-group">
     544                            <div class="shortcode-item">
     545                                <strong>Table</strong>
     546                                <code class="copyable">[codeart_units_converter_converters type='time' style='table']</code>
     547                                <button class="copy-btn" aria-label="Copy time table shortcode">Copy</button>
     548                            </div>
     549                            <div class="shortcode-item">
     550                                <strong>List</strong>
     551                                <code class="copyable">[codeart_units_converter_converters type='time' style='list']</code>
     552                                <button class="copy-btn" aria-label="Copy time list shortcode">Copy</button>
     553                            </div>
     554                        </div>
     555                    </div>
     556                </div>
     557                <div class="dropdown-item">
     558                    <div class="dropdown-header" aria-expanded="false" role="button" tabindex="0">
     559                        <span><i class="fas fa-hdd"></i> Digital Storage</span>
     560                        <i class="fas fa-chevron-down"></i>
     561                    </div>
     562                    <div class="dropdown-content" aria-hidden="true">
     563                        <p>Converts between bits, bytes, kilobytes, megabytes, gigabytes, and terabytes.</p>
     564                        <div class="shortcode-group">
     565                            <div class="shortcode-item">
     566                                <strong>Table</strong>
     567                                <code class="copyable">[codeart_units_converter_converters type='digital_storage' style='table']</code>
     568                                <button class="copy-btn" aria-label="Copy digital storage table shortcode">Copy</button>
     569                            </div>
     570                            <div class="shortcode-item">
     571                                <strong>List</strong>
     572                                <code class="copyable">[codeart_units_converter_converters type='digital_storage' style='list']</code>
     573                                <button class="copy-btn" aria-label="Copy digital storage list shortcode">Copy</button>
     574                            </div>
     575                        </div>
     576                    </div>
     577                </div>
     578                <div class="dropdown-item">
     579                    <div class="dropdown-header" aria-expanded="false" role="button" tabindex="0">
     580                        <span><i class="fas fa-bolt"></i> Energy</span>
     581                        <i class="fas fa-chevron-down"></i>
     582                    </div>
     583                    <div class="dropdown-content" aria-hidden="true">
     584                        <p>Converts between joules, kilojoules, watt-hours, and calories.</p>
     585                        <div class="shortcode-group">
     586                            <div class="shortcode-item">
     587                                <strong>Table</strong>
     588                                <code class="copyable">[codeart_units_converter_converters type='energy' style='table']</code>
     589                                <button class="copy-btn" aria-label="Copy energy table shortcode">Copy</button>
     590                            </div>
     591                            <div class="shortcode-item">
     592                                <strong>List</strong>
     593                                <code class="copyable">[codeart_units_converter_converters type='energy' style='list']</code>
     594                                <button class="copy-btn" aria-label="Copy energy list shortcode">Copy</button>
     595                            </div>
     596                        </div>
     597                    </div>
     598                </div>
     599                <div class="dropdown-item">
     600                    <div class="dropdown-header" aria-expanded="false" role="button" tabindex="0">
     601                        <span><i class="fas fa-plug"></i> Power</span>
     602                        <i class="fas fa-chevron-down"></i>
     603                    </div>
     604                    <div class="dropdown-content" aria-hidden="true">
     605                        <p>Converts between watts, kilowatts, horsepower, and joules per second.</p>
     606                        <div class="shortcode-group">
     607                            <div class="shortcode-item">
     608                                <strong>Table</strong>
     609                                <code class="copyable">[codeart_units_converter_converters type='power' style='table']</code>
     610                                <button class="copy-btn" aria-label="Copy power table shortcode">Copy</button>
     611                            </div>
     612                            <div class="shortcode-item">
     613                                <strong>List</strong>
     614                                <code class="copyable">[codeart_units_converter_converters type='power' style='list']</code>
     615                                <button class="copy-btn" aria-label="Copy power list shortcode">Copy</button>
     616                            </div>
     617                        </div>
     618                    </div>
     619                </div>
     620                <div class="dropdown-item">
     621                    <div class="dropdown-header" aria-expanded="false" role="button" tabindex="0">
     622                        <span><i class="fas fa-compress-arrows-alt"></i> Pressure</span>
     623                        <i class="fas fa-chevron-down"></i>
     624                    </div>
     625                    <div class="dropdown-content" aria-hidden="true">
     626                        <p>Converts between pascals, atmospheres, bars, and psi.</p>
     627                        <div class="shortcode-group">
     628                            <div class="shortcode-item">
     629                                <strong>Table</strong>
     630                                <code class="copyable">[codeart_units_converter_converters type='pressure' style='table']</code>
     631                                <button class="copy-btn" aria-label="Copy pressure table shortcode">Copy</button>
     632                            </div>
     633                            <div class="shortcode-item">
     634                                <strong>List</strong>
     635                                <code class="copyable">[codeart_units_converter_converters type='pressure' style='list']</code>
     636                                <button class="copy-btn" aria-label="Copy pressure list shortcode">Copy</button>
     637                            </div>
     638                        </div>
     639                    </div>
     640                </div>
     641                <div class="dropdown-item">
     642                    <div class="dropdown-header" aria-expanded="false" role="button" tabindex="0">
     643                        <span><i class="fas fa-dumbbell"></i> Force</span>
     644                        <i class="fas fa-chevron-down"></i>
     645                    </div>
     646                    <div class="dropdown-content" aria-hidden="true">
     647                        <p>Converts between newtons, pounds-force, and dynes.</p>
     648                        <div class="shortcode-group">
     649                            <div class="shortcode-item">
     650                                <strong>Table</strong>
     651                                <code class="copyable">[codeart_units_converter_converters type='force' style='table']</code>
     652                                <button class="copy-btn" aria-label="Copy force table shortcode">Copy</button>
     653                            </div>
     654                            <div class="shortcode-item">
     655                                <strong>List</strong>
     656                                <code class="copyable">[codeart_units_converter_converters type='force' style='list']</code>
     657                                <button class="copy-btn" aria-label="Copy force list shortcode">Copy</button>
     658                            </div>
     659                        </div>
     660                    </div>
     661                </div>
     662                <div class="dropdown-item">
     663                    <div class="dropdown-header" aria-expanded="false" role="button" tabindex="0">
     664                        <span><i class="fas fa-protractor"></i> Angle</span>
     665                        <i class="fas fa-chevron-down"></i>
     666                    </div>
     667                    <div class="dropdown-content" aria-hidden="true">
     668                        <p>Converts between degrees, radians, and gradians.</p>
     669                        <div class="shortcode-group">
     670                            <div class="shortcode-item">
     671                                <strong>Table</strong>
     672                                <code class="copyable">[codeart_units_converter_converters type='angle' style='table']</code>
     673                                <button class="copy-btn" aria-label="Copy angle table shortcode">Copy</button>
     674                            </div>
     675                            <div class="shortcode-item">
     676                                <strong>List</strong>
     677                                <code class="copyable">[codeart_units_converter_converters type='angle' style='list']</code>
     678                                <button class="copy-btn" aria-label="Copy angle list shortcode">Copy</button>
     679                            </div>
     680                        </div>
     681                    </div>
     682                </div>
     683                <div class="dropdown-item">
     684                    <div class="dropdown-header" aria-expanded="false" role="button" tabindex="0">
     685                        <span><i class="fas fa-wave-square"></i> Frequency</span>
     686                        <i class="fas fa-chevron-down"></i>
     687                    </div>
     688                    <div class="dropdown-content" aria-hidden="true">
     689                        <p>Converts between hertz, kilohertz, megahertz, and gigahertz.</p>
     690                        <div class="shortcode-group">
     691                            <div class="shortcode-item">
     692                                <strong>Table</strong>
     693                                <code class="copyable">[codeart_units_converter_converters type='frequency' style='table']</code>
     694                                <button class="copy-btn" aria-label="Copy frequency table shortcode">Copy</button>
     695                            </div>
     696                            <div class="shortcode-item">
     697                                <strong>List</strong>
     698                                <code class="copyable">[codeart_units_converter_converters type='frequency' style='list']</code>
     699                                <button class="copy-btn" aria-label="Copy frequency list shortcode">Copy</button>
     700                            </div>
     701                        </div>
     702                    </div>
     703                </div>
     704                <div class="dropdown-item">
     705                    <div class="dropdown-header" aria-expanded="false" role="button" tabindex="0">
     706                        <span><i class="fas fa-gas-pump"></i> Fuel Economy</span>
     707                        <i class="fas fa-chevron-down"></i>
     708                    </div>
     709                    <div class="dropdown-content" aria-hidden="true">
     710                        <p>Converts between miles per gallon, liters per 100 kilometers, and kilometers per liter.</p>
     711                        <div class="shortcode-group">
     712                            <div class="shortcode-item">
     713                                <strong>Table</strong>
     714                                <code class="copyable">[codeart_units_converter_converters type='fuel_economy' style='table']</code>
     715                                <button class="copy-btn" aria-label="Copy fuel economy table shortcode">Copy</button>
     716                            </div>
     717                            <div class="shortcode-item">
     718                                <strong>List</strong>
     719                                <code class="copyable">[codeart_units_converter_converters type='fuel_economy' style='list']</code>
     720                                <button class="copy-btn" aria-label="Copy fuel economy list shortcode">Copy</button>
     721                            </div>
     722                        </div>
     723                    </div>
     724                </div>
     725                <div class="dropdown-item">
     726                    <div class="dropdown-header" aria-expanded="false" role="button" tabindex="0">
     727                        <span><i class="fas fa-cubes"></i> Density</span>
     728                        <i class="fas fa-chevron-down"></i>
     729                    </div>
     730                    <div class="dropdown-content" aria-hidden="true">
     731                        <p>Converts between kilograms per cubic meter, grams per cubic centimeter, and pounds per cubic foot.
     732                        </p>
     733                        <div class="shortcode-group">
     734                            <div class="shortcode-item">
     735                                <strong>Table</strong>
     736                                <code class="copyable">[codeart_units_converter_converters type='density' style='table']</code>
     737                                <button class="copy-btn" aria-label="Copy density table shortcode">Copy</button>
     738                            </div>
     739                            <div class="shortcode-item">
     740                                <strong>List</strong>
     741                                <code class="copyable">[codeart_units_converter_converters type='density' style='list']</code>
     742                                <button class="copy-btn" aria-label="Copy density list shortcode">Copy</button>
     743                            </div>
     744                        </div>
     745                    </div>
     746                </div>
     747            </div>
    413748        </div>
    414749    </div>
    415750
    416751    <div class="codeart-section">
    417         <h2>Calculators <button class="toggle-btn" aria-expanded="true">Hide</button></h2>
     752        <h2>Calculators <button class="toggle-btn" aria-expanded="true" aria-label="Toggle calculators section">Hide</button></h2>
    418753        <div class="section-content">
    419754            <p>Embed these calculators for quick arithmetic or advanced computations:</p>
    420             <table class="codeart-table" role="grid">
    421                 <thead>
    422                     <tr>
    423                         <th scope="col">Calculator</th>
    424                         <th scope="col">Shortcode</th>
    425                         <th scope="col">Description</th>
    426                     </tr>
    427                 </thead>
    428                 <tbody>
    429                     <tr>
    430                         <td data-label="Calculator">Basic Calculator</td>
    431                         <td data-label="Shortcode">
    432                             <code class="copyable">[codeart_units_converter_basic_calculator]</code>
    433                             <button class="copy-btn">Copy</button>
    434                         </td>
    435                         <td data-label="Description" class="description">A user-friendly calculator for addition, subtraction, multiplication, and division.</td>
    436                     </tr>
    437                     <tr>
    438                         <td data-label="Calculator">Scientific Calculator</td>
    439                         <td data-label="Shortcode">
    440                             <code class="copyable">[codeart_units_converter_scientific_calculator]</code>
    441                             <button class="copy-btn">Copy</button>
    442                         </td>
    443                         <td data-label="Description" class="description">Supports trigonometric functions, logarithms, exponentiation, and more.</td>
    444                     </tr>
    445                 </tbody>
    446             </table>
     755            <div class="dropdown-list">
     756                <div class="dropdown-item">
     757                    <div class="dropdown-header" aria-expanded="false" role="button" tabindex="0">
     758                        <span><i class="fas fa-calculator"></i> Basic Calculator</span>
     759                        <i class="fas fa-chevron-down"></i>
     760                    </div>
     761                    <div class="dropdown-content" aria-hidden="true">
     762                        <p>A user-friendly calculator for addition, subtraction, multiplication, and division.</p>
     763                        <div class="shortcode-group">
     764                            <div class="shortcode-item">
     765                                <code class="copyable">[codeart_units_converter_basic_calculator]</code>
     766                                <button class="copy-btn" aria-label="Copy basic calculator shortcode">Copy</button>
     767                            </div>
     768                        </div>
     769                    </div>
     770                </div>
     771                <div class="dropdown-item">
     772                    <div class="dropdown-header" aria-expanded="false" role="button" tabindex="0">
     773                        <span><i class="fas fa-square-root-alt"></i> Scientific Calculator</span>
     774                        <i class="fas fa-chevron-down"></i>
     775                    </div>
     776                    <div class="dropdown-content" aria-hidden="true">
     777                        <p>Supports trigonometric functions, logarithms, exponentiation, and more.</p>
     778                        <div class="shortcode-group">
     779                            <div class="shortcode-item">
     780                                <code class="copyable">[codeart_units_converter_scientific_calculator]</code>
     781                                <button class="copy-btn" aria-label="Copy scientific calculator shortcode">Copy</button>
     782                            </div>
     783                        </div>
     784                    </div>
     785                </div>
     786            </div>
    447787        </div>
    448788    </div>
    … …  
    450790    <a href="#" class="action-link" aria-label="Open Shortcodes Manager for CodeArt Units Converter">
    451791        Shortcodes Manager
    452         <svg fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" title="Arrow icon">
     792        <svg fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"
     793            title="Arrow icon">
    453794            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
    454795        </svg>
    … …  
    457798
    458799<script>
     800    // Shared Keyboard Accessibility Function
     801    function handleKeyboardActivation(element, callback) {
     802        element.addEventListener('keypress', (e) => {
     803            if (e.key === 'Enter' || e.key === ' ') {
     804                e.preventDefault();
     805                callback();
     806            }
     807        });
     808    }
     809
    459810    // Copy to Clipboard
    460811    document.querySelectorAll('.copy-btn').forEach(btn => {
    461812        btn.addEventListener('click', () => {
    462813            const code = btn.previousElementSibling.textContent;
    463             navigator.clipboard.writeText(code);
    464             btn.textContent = 'Copied!';
    465             setTimeout(() => btn.textContent = 'Copy', 2000);
     814            navigator.clipboard.writeText(code).then(() => {
     815                btn.setAttribute('data-copied', 'true');
     816                btn.textContent = 'Copied!';
     817                setTimeout(() => {
     818                    btn.setAttribute('data-copied', 'false');
     819                    btn.textContent = 'Copy';
     820                }, 2000);
     821            });
    466822        });
     823        handleKeyboardActivation(btn, () => btn.click());
    467824    });
    468825
    … …  
    476833            btn.textContent = isExpanded ? 'Hide' : 'Show';
    477834        });
     835        handleKeyboardActivation(btn, () => btn.click());
     836    });
     837
     838    // Dropdown Toggle
     839    document.querySelectorAll('.dropdown-header').forEach(header => {
     840        header.addEventListener('click', () => {
     841            const content = header.nextElementSibling;
     842            const isExpanded = header.getAttribute('aria-expanded') === 'true';
     843            header.setAttribute('aria-expanded', !isExpanded);
     844            content.setAttribute('aria-hidden', isExpanded);
     845        });
     846        handleKeyboardActivation(header, () => header.click());
    478847    });
    479848
    … …  
    481850    document.querySelector('.search-bar').addEventListener('input', (e) => {
    482851        const term = e.target.value.toLowerCase();
    483         document.querySelectorAll('.codeart-section').forEach(section => {
    484             const text = section.textContent.toLowerCase();
    485             section.style.display = text.includes(term) ? 'block' : 'none';
     852        document.querySelectorAll('.dropdown-item').forEach(item => {
     853            const text = item.textContent.toLowerCase();
     854            item.style.display = text.includes(term) ? 'block' : 'none';
    486855        });
    487856    });
     857
     858    // Action Link Keyboard Accessibility
     859    document.querySelectorAll('.action-link').forEach(link => {
     860        handleKeyboardActivation(link, () => link.click());
     861    });
    488862</script>
Note: See TracChangeset for help on using the changeset viewer.