WordPress.org
Get WordPress

Plugin Directory

Changeset 3403366


Ignore:
Timestamp:
11/26/2025 01:05:34 PM (3 months ago)
Author:
allaccessible
Message:

redo onboaridng

Location:
allaccessible
Files:
2 edited

Legend:

Unmodified
Added
Removed

  • allaccessible/tags/2.0.2/inc/OnboardingWizard.php

    r3402056 r3403366  
    9898                    <!-- Step 1: Welcome -->
    9999                    <div id="wizard-step-1" class="wizard-step aacx-bg-white aacx-rounded-2xl aacx-shadow-2xl aacx-p-12 aacx-text-center">
    100                         <div class="aacx-mb-8">
    101                             <img src="<?php echo esc_url(AACB_IMG . 'bug.svg'); ?>" alt="AllAccessible" style="width: 100px; height: 100px;" class="aacx-mx-auto">
     100                        <div class="aacx-mb-6">
     101                            <img src="<?php echo esc_url(AACB_IMG . 'bug.svg'); ?>" alt="AllAccessible" style="width: 80px; height: 80px;" class="aacx-mx-auto">
    102102                        </div>
    103103
    104                         <h1 class="aacx-text-5xl aacx-font-black aacx-text-aacx-slate-900 aacx-mb-4">
     104                        <h1 class="aacx-text-4xl aacx-font-black aacx-text-aacx-slate-900 aacx-mb-3">
    105105                            <?php _e('Welcome to AllAccessible!', 'allaccessible'); ?>
    106106                        </h1>
    107107
    108                         <p class="aacx-text-xl aacx-text-aacx-slate-600 aacx-mb-10 aacx-max-w-2xl aacx-mx-auto">
    109                             <?php _e('Make your WordPress site accessible to everyone with our AI-powered accessibility solution. Let\'s get you set up in under 2 minutes.', 'allaccessible'); ?>
     108                        <p class="aacx-text-lg aacx-text-aacx-slate-600 aacx-mb-10 aacx-max-w-xl aacx-mx-auto">
     109                            <?php _e('Make your WordPress site accessible to everyone. Choose how you\'d like to get started:', 'allaccessible'); ?>
    110110                        </p>
    111111
    112                         <div class="aacx-flex aacx-justify-center aacx-gap-4">
    113                             <button
     112                        <!-- Three Option Cards -->
     113                        <div class="aacx-grid aacx-grid-cols-1 md:aacx-grid-cols-3 aacx-gap-4 aacx-max-w-4xl aacx-mx-auto">
     114
     115                            <!-- Option 1: Create Account (Recommended) -->
     116                            <div
    114117                                onclick="aacbWizardNext(2)"
    115                                 class="aacx-px-8 aacx-py-4 aacx-bg-aacx-primary-600 aacx-text-white aacx-rounded-xl aacx-font-bold aacx-text-lg aacx-shadow-xl hover:aacx-bg-aacx-primary-700 hover:aacx-shadow-2xl hover:-aacx-translate-y-1 aacx-transition-all aacx-duration-200">
    116                                 <?php _e('Get Started', 'allaccessible'); ?> →
    117                             </button>
    118 
    119                             <button
     118                                class="aacx-relative aacx-border-2 aacx-border-aacx-primary-500 aacx-rounded-xl aacx-p-6 aacx-cursor-pointer hover:aacx-shadow-lg hover:-aacx-translate-y-1 aacx-transition-all aacx-duration-200 aacx-bg-aacx-primary-50">
     119                                <div class="aacx-absolute aacx-top-0 aacx-right-0 aacx-bg-aacx-secondary-600 aacx-text-white aacx-px-3 aacx-py-1 aacx-rounded-bl-lg aacx-rounded-tr-xl aacx-text-xs aacx-font-bold">
     120                                    <?php _e('Recommended', 'allaccessible'); ?>
     121                                </div>
     122                                <div class="aacx-mb-4 aacx-mt-2">
     123                                    <div class="aacx-w-12 aacx-h-12 aacx-bg-aacx-primary-600 aacx-rounded-full aacx-flex aacx-items-center aacx-justify-center aacx-mx-auto">
     124                                        <svg class="aacx-w-6 aacx-h-6 aacx-text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
     125                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"/>
     126                                        </svg>
     127                                    </div>
     128                                </div>
     129                                <h3 class="aacx-text-lg aacx-font-bold aacx-text-aacx-slate-900 aacx-mb-2">
     130                                    <?php _e('Create Account', 'allaccessible'); ?>
     131                                </h3>
     132                                <p class="aacx-text-sm aacx-text-aacx-slate-600 aacx-mb-4">
     133                                    <?php _e('Set up a new AllAccessible account with access to all features, dashboard, and AI tools.', 'allaccessible'); ?>
     134                                </p>
     135                                <span class="aacx-inline-flex aacx-items-center aacx-text-aacx-primary-600 aacx-font-semibold aacx-text-sm">
     136                                    <?php _e('Get Started', 'allaccessible'); ?> →
     137                                </span>
     138                            </div>
     139
     140                            <!-- Option 2: Connect Existing Account -->
     141                            <div
     142                                onclick="aacbWizardNext(4)"
     143                                class="aacx-border-2 aacx-border-aacx-slate-200 aacx-rounded-xl aacx-p-6 aacx-cursor-pointer hover:aacx-border-aacx-primary-300 hover:aacx-shadow-lg hover:-aacx-translate-y-1 aacx-transition-all aacx-duration-200">
     144                                <div class="aacx-mb-4">
     145                                    <div class="aacx-w-12 aacx-h-12 aacx-bg-aacx-slate-100 aacx-rounded-full aacx-flex aacx-items-center aacx-justify-center aacx-mx-auto">
     146                                        <svg class="aacx-w-6 aacx-h-6 aacx-text-aacx-slate-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
     147                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1"/>
     148                                        </svg>
     149                                    </div>
     150                                </div>
     151                                <h3 class="aacx-text-lg aacx-font-bold aacx-text-aacx-slate-900 aacx-mb-2">
     152                                    <?php _e('Connect Account', 'allaccessible'); ?>
     153                                </h3>
     154                                <p class="aacx-text-sm aacx-text-aacx-slate-600 aacx-mb-4">
     155                                    <?php _e('Already have an AllAccessible account? Link this site to your existing account.', 'allaccessible'); ?>
     156                                </p>
     157                                <span class="aacx-inline-flex aacx-items-center aacx-text-aacx-primary-600 aacx-font-semibold aacx-text-sm">
     158                                    <?php _e('Link Account', 'allaccessible'); ?> →
     159                                </span>
     160                            </div>
     161
     162                            <!-- Option 3: Skip (Limited Free Widget) -->
     163                            <div
    120164                                onclick="aacbWizardSkip()"
    121                                 class="aacx-px-6 aacx-py-4 aacx-border-2 aacx-border-aacx-gray-300 aacx-text-aacx-slate-600 aacx-rounded-xl aacx-font-semibold hover:aacx-bg-aacx-gray-50 hover:aacx-text-aacx-slate-900 aacx-transition-all">
    122                                 <?php _e('Skip for now', 'allaccessible'); ?>
    123                             </button>
     165                                class="aacx-border-2 aacx-border-aacx-slate-200 aacx-rounded-xl aacx-p-6 aacx-cursor-pointer hover:aacx-border-aacx-slate-300 hover:aacx-shadow-md aacx-transition-all aacx-duration-200 aacx-bg-aacx-slate-50">
     166                                <div class="aacx-mb-4">
     167                                    <div class="aacx-w-12 aacx-h-12 aacx-bg-aacx-slate-200 aacx-rounded-full aacx-flex aacx-items-center aacx-justify-center aacx-mx-auto">
     168                                        <svg class="aacx-w-6 aacx-h-6 aacx-text-aacx-slate-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
     169                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 9l3 3m0 0l-3 3m3-3H8m13 0a9 9 0 11-18 0 9 9 0 0118 0z"/>
     170                                        </svg>
     171                                    </div>
     172                                </div>
     173                                <h3 class="aacx-text-lg aacx-font-bold aacx-text-aacx-slate-700 aacx-mb-2">
     174                                    <?php _e('Skip for Now', 'allaccessible'); ?>
     175                                </h3>
     176                                <p class="aacx-text-sm aacx-text-aacx-slate-500 aacx-mb-4">
     177                                    <?php _e('Use a basic widget without an account. Very limited features, no dashboard access.', 'allaccessible'); ?>
     178                                </p>
     179                                <span class="aacx-inline-flex aacx-items-center aacx-text-aacx-slate-500 aacx-font-semibold aacx-text-sm">
     180                                    <?php _e('Skip Setup', 'allaccessible'); ?> →
     181                                </span>
     182                            </div>
     183
    124184                        </div>
    125185                    </div>

  • allaccessible/trunk/inc/OnboardingWizard.php

    r3401054 r3403366  
    9898                    <!-- Step 1: Welcome -->
    9999                    <div id="wizard-step-1" class="wizard-step aacx-bg-white aacx-rounded-2xl aacx-shadow-2xl aacx-p-12 aacx-text-center">
    100                         <div class="aacx-mb-8">
    101                             <img src="<?php echo esc_url(AACB_IMG . 'bug.svg'); ?>" alt="AllAccessible" style="width: 100px; height: 100px;" class="aacx-mx-auto">
     100                        <div class="aacx-mb-6">
     101                            <img src="<?php echo esc_url(AACB_IMG . 'bug.svg'); ?>" alt="AllAccessible" style="width: 80px; height: 80px;" class="aacx-mx-auto">
    102102                        </div>
    103103
    104                         <h1 class="aacx-text-5xl aacx-font-black aacx-text-aacx-slate-900 aacx-mb-4">
     104                        <h1 class="aacx-text-4xl aacx-font-black aacx-text-aacx-slate-900 aacx-mb-3">
    105105                            <?php _e('Welcome to AllAccessible!', 'allaccessible'); ?>
    106106                        </h1>
    107107
    108                         <p class="aacx-text-xl aacx-text-aacx-slate-600 aacx-mb-10 aacx-max-w-2xl aacx-mx-auto">
    109                             <?php _e('Make your WordPress site accessible to everyone with our AI-powered accessibility solution. Let\'s get you set up in under 2 minutes.', 'allaccessible'); ?>
     108                        <p class="aacx-text-lg aacx-text-aacx-slate-600 aacx-mb-10 aacx-max-w-xl aacx-mx-auto">
     109                            <?php _e('Make your WordPress site accessible to everyone. Choose how you\'d like to get started:', 'allaccessible'); ?>
    110110                        </p>
    111111
    112                         <div class="aacx-flex aacx-justify-center aacx-gap-4">
    113                             <button
     112                        <!-- Three Option Cards -->
     113                        <div class="aacx-grid aacx-grid-cols-1 md:aacx-grid-cols-3 aacx-gap-4 aacx-max-w-4xl aacx-mx-auto">
     114
     115                            <!-- Option 1: Create Account (Recommended) -->
     116                            <div
    114117                                onclick="aacbWizardNext(2)"
    115                                 class="aacx-px-8 aacx-py-4 aacx-bg-aacx-primary-600 aacx-text-white aacx-rounded-xl aacx-font-bold aacx-text-lg aacx-shadow-xl hover:aacx-bg-aacx-primary-700 hover:aacx-shadow-2xl hover:-aacx-translate-y-1 aacx-transition-all aacx-duration-200">
    116                                 <?php _e('Get Started', 'allaccessible'); ?> →
    117                             </button>
    118 
    119                             <button
     118                                class="aacx-relative aacx-border-2 aacx-border-aacx-primary-500 aacx-rounded-xl aacx-p-6 aacx-cursor-pointer hover:aacx-shadow-lg hover:-aacx-translate-y-1 aacx-transition-all aacx-duration-200 aacx-bg-aacx-primary-50">
     119                                <div class="aacx-absolute aacx-top-0 aacx-right-0 aacx-bg-aacx-secondary-600 aacx-text-white aacx-px-3 aacx-py-1 aacx-rounded-bl-lg aacx-rounded-tr-xl aacx-text-xs aacx-font-bold">
     120                                    <?php _e('Recommended', 'allaccessible'); ?>
     121                                </div>
     122                                <div class="aacx-mb-4 aacx-mt-2">
     123                                    <div class="aacx-w-12 aacx-h-12 aacx-bg-aacx-primary-600 aacx-rounded-full aacx-flex aacx-items-center aacx-justify-center aacx-mx-auto">
     124                                        <svg class="aacx-w-6 aacx-h-6 aacx-text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
     125                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"/>
     126                                        </svg>
     127                                    </div>
     128                                </div>
     129                                <h3 class="aacx-text-lg aacx-font-bold aacx-text-aacx-slate-900 aacx-mb-2">
     130                                    <?php _e('Create Account', 'allaccessible'); ?>
     131                                </h3>
     132                                <p class="aacx-text-sm aacx-text-aacx-slate-600 aacx-mb-4">
     133                                    <?php _e('Set up a new AllAccessible account with access to all features, dashboard, and AI tools.', 'allaccessible'); ?>
     134                                </p>
     135                                <span class="aacx-inline-flex aacx-items-center aacx-text-aacx-primary-600 aacx-font-semibold aacx-text-sm">
     136                                    <?php _e('Get Started', 'allaccessible'); ?> →
     137                                </span>
     138                            </div>
     139
     140                            <!-- Option 2: Connect Existing Account -->
     141                            <div
     142                                onclick="aacbWizardNext(4)"
     143                                class="aacx-border-2 aacx-border-aacx-slate-200 aacx-rounded-xl aacx-p-6 aacx-cursor-pointer hover:aacx-border-aacx-primary-300 hover:aacx-shadow-lg hover:-aacx-translate-y-1 aacx-transition-all aacx-duration-200">
     144                                <div class="aacx-mb-4">
     145                                    <div class="aacx-w-12 aacx-h-12 aacx-bg-aacx-slate-100 aacx-rounded-full aacx-flex aacx-items-center aacx-justify-center aacx-mx-auto">
     146                                        <svg class="aacx-w-6 aacx-h-6 aacx-text-aacx-slate-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
     147                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1"/>
     148                                        </svg>
     149                                    </div>
     150                                </div>
     151                                <h3 class="aacx-text-lg aacx-font-bold aacx-text-aacx-slate-900 aacx-mb-2">
     152                                    <?php _e('Connect Account', 'allaccessible'); ?>
     153                                </h3>
     154                                <p class="aacx-text-sm aacx-text-aacx-slate-600 aacx-mb-4">
     155                                    <?php _e('Already have an AllAccessible account? Link this site to your existing account.', 'allaccessible'); ?>
     156                                </p>
     157                                <span class="aacx-inline-flex aacx-items-center aacx-text-aacx-primary-600 aacx-font-semibold aacx-text-sm">
     158                                    <?php _e('Link Account', 'allaccessible'); ?> →
     159                                </span>
     160                            </div>
     161
     162                            <!-- Option 3: Skip (Limited Free Widget) -->
     163                            <div
    120164                                onclick="aacbWizardSkip()"
    121                                 class="aacx-px-6 aacx-py-4 aacx-border-2 aacx-border-aacx-gray-300 aacx-text-aacx-slate-600 aacx-rounded-xl aacx-font-semibold hover:aacx-bg-aacx-gray-50 hover:aacx-text-aacx-slate-900 aacx-transition-all">
    122                                 <?php _e('Skip for now', 'allaccessible'); ?>
    123                             </button>
     165                                class="aacx-border-2 aacx-border-aacx-slate-200 aacx-rounded-xl aacx-p-6 aacx-cursor-pointer hover:aacx-border-aacx-slate-300 hover:aacx-shadow-md aacx-transition-all aacx-duration-200 aacx-bg-aacx-slate-50">
     166                                <div class="aacx-mb-4">
     167                                    <div class="aacx-w-12 aacx-h-12 aacx-bg-aacx-slate-200 aacx-rounded-full aacx-flex aacx-items-center aacx-justify-center aacx-mx-auto">
     168                                        <svg class="aacx-w-6 aacx-h-6 aacx-text-aacx-slate-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
     169                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 9l3 3m0 0l-3 3m3-3H8m13 0a9 9 0 11-18 0 9 9 0 0118 0z"/>
     170                                        </svg>
     171                                    </div>
     172                                </div>
     173                                <h3 class="aacx-text-lg aacx-font-bold aacx-text-aacx-slate-700 aacx-mb-2">
     174                                    <?php _e('Skip for Now', 'allaccessible'); ?>
     175                                </h3>
     176                                <p class="aacx-text-sm aacx-text-aacx-slate-500 aacx-mb-4">
     177                                    <?php _e('Use a basic widget without an account. Very limited features, no dashboard access.', 'allaccessible'); ?>
     178                                </p>
     179                                <span class="aacx-inline-flex aacx-items-center aacx-text-aacx-slate-500 aacx-font-semibold aacx-text-sm">
     180                                    <?php _e('Skip Setup', 'allaccessible'); ?> →
     181                                </span>
     182                            </div>
     183
    124184                        </div>
    125185                    </div>
Note: See TracChangeset for help on using the changeset viewer.