| 1 |
<?php |
| 2 |
if (!defined('ABSPATH')) |
| 3 |
exit; // Exit if accessed directly |
| 4 |
|
| 5 |
// Vérifier si l'utilisateur a un token JWT |
| 6 |
$jwt_token = get_option('aibui_jwt_token', ''); |
| 7 |
if (empty($jwt_token)) { |
| 8 |
echo '<div class="ai-auth-container"><div class="ai-message error">' . esc_html__('Please sign in to access your credits.', 'ai-builder') . '</div></div>'; |
| 9 |
return; |
| 10 |
} |
| 11 |
?> |
| 12 |
|
| 13 |
<div class="ai-credits-container ai-fade-in"> |
| 14 |
<!-- Header --> |
| 15 |
<div class="ai-credits-header"> |
| 16 |
<h1>AI Credits & Subscription</h1> |
| 17 |
<p>Manage your AI credits and subscription plan</p> |
| 18 |
</div> |
| 19 |
|
| 20 |
<!-- Current Status --> |
| 21 |
<div class="ai-status-section"> |
| 22 |
<div class="ai-status-card"> |
| 23 |
<div class="ai-status-icon"> |
| 24 |
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> |
| 25 |
<circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2" /> |
| 26 |
<path d="M12 6V12L16 14" stroke="currentColor" stroke-width="2" stroke-linecap="round" |
| 27 |
stroke-linejoin="round" /> |
| 28 |
</svg> |
| 29 |
</div> |
| 30 |
<div class="ai-status-content"> |
| 31 |
<h3>Current Credits</h3> |
| 32 |
<div class="ai-credits-display" id="current-credits"> |
| 33 |
<span class="ai-loading" style="display: none;"></span> |
| 34 |
Loading... |
| 35 |
</div> |
| 36 |
</div> |
| 37 |
</div> |
| 38 |
|
| 39 |
<div class="ai-status-card"> |
| 40 |
<div class="ai-status-icon"> |
| 41 |
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> |
| 42 |
<path d="M12 2L2 7L12 12L22 7L12 2Z" stroke="currentColor" stroke-width="2" |
| 43 |
stroke-linejoin="round" /> |
| 44 |
<path d="M2 17L12 22L22 17" stroke="currentColor" stroke-width="2" stroke-linejoin="round" /> |
| 45 |
<path d="M2 12L12 17L22 12" stroke="currentColor" stroke-width="2" stroke-linejoin="round" /> |
| 46 |
</svg> |
| 47 |
</div> |
| 48 |
<div class="ai-status-content"> |
| 49 |
<h3>Subscription Plan</h3> |
| 50 |
<div class="ai-plan-display" id="current-plan"> |
| 51 |
<span class="ai-loading" style="display: none;"></span> |
| 52 |
Loading... |
| 53 |
</div> |
| 54 |
</div> |
| 55 |
</div> |
| 56 |
</div> |
| 57 |
|
| 58 |
<!-- Subscription Management --> |
| 59 |
<div class="ai-section"> |
| 60 |
<div class="ai-section-header"> |
| 61 |
<h2>Subscription Management</h2> |
| 62 |
<p>Choose the perfect plan for your AI needs</p> |
| 63 |
</div> |
| 64 |
|
| 65 |
<div class="ai-subscription-actions" id="subscription-plans-container"> |
| 66 |
<!-- Plan Essential --> |
| 67 |
<div class="ai-plan-card-wrapper" data-plan="essential"> |
| 68 |
<div class="ai-plan-card ai-plan-essential"> |
| 69 |
<div class="ai-plan-badge">Essential</div> |
| 70 |
<div class="ai-plan-header"> |
| 71 |
<div class="ai-plan-title"> |
| 72 |
<h3>Essential</h3> |
| 73 |
</div> |
| 74 |
</div> |
| 75 |
|
| 76 |
<div class="ai-plan-features"> |
| 77 |
<div class="ai-feature-item"> |
| 78 |
<div class="ai-feature-icon"> |
| 79 |
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" |
| 80 |
xmlns="http://www.w3.org/2000/svg"> |
| 81 |
<path d="M20 6L9 17L4 12" stroke="currentColor" stroke-width="2.5" |
| 82 |
stroke-linecap="round" stroke-linejoin="round" /> |
| 83 |
</svg> |
| 84 |
</div> |
| 85 |
<span class="ai-feature-text">750 credits every month</span> |
| 86 |
</div> |
| 87 |
|
| 88 |
<div class="ai-feature-item"> |
| 89 |
<div class="ai-feature-icon"> |
| 90 |
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" |
| 91 |
xmlns="http://www.w3.org/2000/svg"> |
| 92 |
<path d="M20 6L9 17L4 12" stroke="currentColor" stroke-width="2.5" |
| 93 |
stroke-linecap="round" stroke-linejoin="round" /> |
| 94 |
</svg> |
| 95 |
</div> |
| 96 |
<span class="ai-feature-text">Generation of pages, blocks, images & texts</span> |
| 97 |
</div> |
| 98 |
|
| 99 |
<div class="ai-feature-item"> |
| 100 |
<div class="ai-feature-icon"> |
| 101 |
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" |
| 102 |
xmlns="http://www.w3.org/2000/svg"> |
| 103 |
<path d="M20 6L9 17L4 12" stroke="currentColor" stroke-width="2.5" |
| 104 |
stroke-linecap="round" stroke-linejoin="round" /> |
| 105 |
</svg> |
| 106 |
</div> |
| 107 |
<span class="ai-feature-text">Extra credits available on demand</span> |
| 108 |
</div> |
| 109 |
</div> |
| 110 |
|
| 111 |
<div class="ai-plan-header"> |
| 112 |
<div class="ai-plan-title"> |
| 113 |
<div class="ai-plan-price"> |
| 114 |
<span class="ai-price-amount">$9</span> |
| 115 |
<span class="ai-price-period">/month</span> |
| 116 |
</div> |
| 117 |
</div> |
| 118 |
</div> |
| 119 |
|
| 120 |
<div class="ai-plan-cta"> |
| 121 |
<button type="button" class="ai-cta-btn ai-plan-btn" data-subscription-type="essential"> |
| 122 |
<span class="ai-loading" style="display: none;"></span> |
| 123 |
<span class="btn-text">Choose Essential</span> |
| 124 |
</button> |
| 125 |
</div> |
| 126 |
</div> |
| 127 |
</div> |
| 128 |
|
| 129 |
<!-- Plan Premium --> |
| 130 |
<div class="ai-plan-card-wrapper" data-plan="premium"> |
| 131 |
<div class="ai-plan-card ai-plan-premium ai-plan-popular"> |
| 132 |
<div class="ai-plan-badge ai-plan-badge-popular">Most Popular</div> |
| 133 |
<div class="ai-plan-header"> |
| 134 |
<div class="ai-plan-title"> |
| 135 |
<h3>Premium</h3> |
| 136 |
</div> |
| 137 |
</div> |
| 138 |
|
| 139 |
<div class="ai-plan-features"> |
| 140 |
<div class="ai-feature-item"> |
| 141 |
<div class="ai-feature-icon"> |
| 142 |
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" |
| 143 |
xmlns="http://www.w3.org/2000/svg"> |
| 144 |
<path d="M20 6L9 17L4 12" stroke="currentColor" stroke-width="2.5" |
| 145 |
stroke-linecap="round" stroke-linejoin="round" /> |
| 146 |
</svg> |
| 147 |
</div> |
| 148 |
<span class="ai-feature-text">2000 credits every month</span> |
| 149 |
</div> |
| 150 |
|
| 151 |
<div class="ai-feature-item"> |
| 152 |
<div class="ai-feature-icon"> |
| 153 |
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" |
| 154 |
xmlns="http://www.w3.org/2000/svg"> |
| 155 |
<path d="M20 6L9 17L4 12" stroke="currentColor" stroke-width="2.5" |
| 156 |
stroke-linecap="round" stroke-linejoin="round" /> |
| 157 |
</svg> |
| 158 |
</div> |
| 159 |
<span class="ai-feature-text">Generation of pages, blocks, images & texts</span> |
| 160 |
</div> |
| 161 |
|
| 162 |
<div class="ai-feature-item"> |
| 163 |
<div class="ai-feature-icon"> |
| 164 |
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" |
| 165 |
xmlns="http://www.w3.org/2000/svg"> |
| 166 |
<path d="M20 6L9 17L4 12" stroke="currentColor" stroke-width="2.5" |
| 167 |
stroke-linecap="round" stroke-linejoin="round" /> |
| 168 |
</svg> |
| 169 |
</div> |
| 170 |
<span class="ai-feature-text">Extra credits available on demand</span> |
| 171 |
</div> |
| 172 |
</div> |
| 173 |
|
| 174 |
<div class="ai-plan-header"> |
| 175 |
<div class="ai-plan-title"> |
| 176 |
<div class="ai-plan-price"> |
| 177 |
<span class="ai-price-amount">$19</span> |
| 178 |
<span class="ai-price-period">/month</span> |
| 179 |
</div> |
| 180 |
</div> |
| 181 |
</div> |
| 182 |
|
| 183 |
<div class="ai-plan-cta"> |
| 184 |
<button type="button" class="ai-cta-btn ai-plan-btn" data-subscription-type="premium"> |
| 185 |
<span class="ai-loading" style="display: none;"></span> |
| 186 |
<span class="btn-text">Choose Premium</span> |
| 187 |
</button> |
| 188 |
</div> |
| 189 |
</div> |
| 190 |
</div> |
| 191 |
|
| 192 |
<!-- Plan Creator --> |
| 193 |
<div class="ai-plan-card-wrapper" data-plan="creator"> |
| 194 |
<div class="ai-plan-card ai-plan-creator"> |
| 195 |
<div class="ai-plan-badge">Creator</div> |
| 196 |
<div class="ai-plan-header"> |
| 197 |
<div class="ai-plan-title"> |
| 198 |
<h3>Creator</h3> |
| 199 |
</div> |
| 200 |
</div> |
| 201 |
|
| 202 |
<div class="ai-plan-features"> |
| 203 |
<div class="ai-feature-item"> |
| 204 |
<div class="ai-feature-icon"> |
| 205 |
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" |
| 206 |
xmlns="http://www.w3.org/2000/svg"> |
| 207 |
<path d="M20 6L9 17L4 12" stroke="currentColor" stroke-width="2.5" |
| 208 |
stroke-linecap="round" stroke-linejoin="round" /> |
| 209 |
</svg> |
| 210 |
</div> |
| 211 |
<span class="ai-feature-text">6000 credits every month</span> |
| 212 |
</div> |
| 213 |
|
| 214 |
<div class="ai-feature-item"> |
| 215 |
<div class="ai-feature-icon"> |
| 216 |
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" |
| 217 |
xmlns="http://www.w3.org/2000/svg"> |
| 218 |
<path d="M20 6L9 17L4 12" stroke="currentColor" stroke-width="2.5" |
| 219 |
stroke-linecap="round" stroke-linejoin="round" /> |
| 220 |
</svg> |
| 221 |
</div> |
| 222 |
<span class="ai-feature-text">Generation of pages, blocks, images & texts</span> |
| 223 |
</div> |
| 224 |
|
| 225 |
<div class="ai-feature-item"> |
| 226 |
<div class="ai-feature-icon"> |
| 227 |
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" |
| 228 |
xmlns="http://www.w3.org/2000/svg"> |
| 229 |
<path d="M20 6L9 17L4 12" stroke="currentColor" stroke-width="2.5" |
| 230 |
stroke-linecap="round" stroke-linejoin="round" /> |
| 231 |
</svg> |
| 232 |
</div> |
| 233 |
<span class="ai-feature-text">Extra credits available on demand</span> |
| 234 |
</div> |
| 235 |
</div> |
| 236 |
|
| 237 |
<div class="ai-plan-header"> |
| 238 |
<div class="ai-plan-title"> |
| 239 |
<div class="ai-plan-price"> |
| 240 |
<span class="ai-price-amount">$49</span> |
| 241 |
<span class="ai-price-period">/month</span> |
| 242 |
</div> |
| 243 |
</div> |
| 244 |
</div> |
| 245 |
|
| 246 |
<div class="ai-plan-cta"> |
| 247 |
<button type="button" class="ai-cta-btn ai-plan-btn" data-subscription-type="creator"> |
| 248 |
<span class="ai-loading" style="display: none;"></span> |
| 249 |
<span class="btn-text">Choose Creator</span> |
| 250 |
</button> |
| 251 |
</div> |
| 252 |
</div> |
| 253 |
</div> |
| 254 |
</div> |
| 255 |
|
| 256 |
<div class="ai-section-header" style="margin-bottom: 120px;"> |
| 257 |
</div> |
| 258 |
|
| 259 |
<!-- Cancel Subscription Button (shown when user has active subscription) --> |
| 260 |
<div class="ai-action-card" id="cancel-subscription-card" style="display: none; margin-top: 24px;"> |
| 261 |
<div class="ai-action-icon"> |
| 262 |
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> |
| 263 |
<path d="M12 2V6" stroke="currentColor" stroke-width="2" stroke-linecap="round" |
| 264 |
stroke-linejoin="round" /> |
| 265 |
<path d="M12 18V22" stroke="currentColor" stroke-width="2" stroke-linecap="round" |
| 266 |
stroke-linejoin="round" /> |
| 267 |
<path d="M4.93 4.93L7.76 7.76" stroke="currentColor" stroke-width="2" stroke-linecap="round" |
| 268 |
stroke-linejoin="round" /> |
| 269 |
<path d="M16.24 16.24L19.07 19.07" stroke="currentColor" stroke-width="2" stroke-linecap="round" |
| 270 |
stroke-linejoin="round" /> |
| 271 |
<path d="M2 12H6" stroke="currentColor" stroke-width="2" stroke-linecap="round" |
| 272 |
stroke-linejoin="round" /> |
| 273 |
<path d="M18 12H22" stroke="currentColor" stroke-width="2" stroke-linecap="round" |
| 274 |
stroke-linejoin="round" /> |
| 275 |
<path d="M4.93 19.07L7.76 16.24" stroke="currentColor" stroke-width="2" stroke-linecap="round" |
| 276 |
stroke-linejoin="round" /> |
| 277 |
<path d="M16.24 7.76L19.07 4.93" stroke="currentColor" stroke-width="2" stroke-linecap="round" |
| 278 |
stroke-linejoin="round" /> |
| 279 |
</svg> |
| 280 |
</div> |
| 281 |
<div class="ai-action-content"> |
| 282 |
<h3>Manage Subscription</h3> |
| 283 |
<p>Cancel your subscription or change your plan</p> |
| 284 |
<button type="button" class="ai-danger-btn" id="subscription-btn"> |
| 285 |
<span class="ai-loading" style="display: none;"></span> |
| 286 |
<span class="btn-text">Cancel Subscription</span> |
| 287 |
</button> |
| 288 |
</div> |
| 289 |
</div> |
| 290 |
</div> |
| 291 |
|
| 292 |
|
| 293 |
|
| 294 |
<!-- Credit Purchase --> |
| 295 |
<div class="ai-section" id="credit-purchase-section"> |
| 296 |
<div class="ai-section-header"> |
| 297 |
<h2></h2> |
| 298 |
<p></p> |
| 299 |
</div> |
| 300 |
|
| 301 |
<div class="ai-credit-actions"> |
| 302 |
<div class="ai-action-card" id="credit-purchase-card"> |
| 303 |
<div class="ai-action-icon"> |
| 304 |
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> |
| 305 |
<path d="M12 1V23" stroke="currentColor" stroke-width="2" stroke-linecap="round" |
| 306 |
stroke-linejoin="round" /> |
| 307 |
<path |
| 308 |
d="M17 5H9.5C8.57174 5 7.6815 5.36875 7.02513 6.02513C6.36875 6.6815 6 7.57174 6 8.5C6 9.42826 6.36875 10.3185 7.02513 10.9749C7.6815 11.6313 8.57174 12 9.5 12H14.5C15.4283 12 16.3185 12.3687 16.9749 13.0251C17.6313 13.6815 18 14.5717 18 15.5C18 16.4283 17.6313 17.3185 16.9749 17.9749C16.3185 18.6313 15.4283 19 14.5 19H6" |
| 309 |
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" /> |
| 310 |
</svg> |
| 311 |
</div> |
| 312 |
<div class="ai-action-content"> |
| 313 |
<h3>Purchase Credits</h3> |
| 314 |
<p>Buy credits in bulk for the best value</p> |
| 315 |
|
| 316 |
<!-- Message pour utilisateurs sans abonnement --> |
| 317 |
<div id="subscription-required-message" class="ai-subscription-required" style="display: none;"> |
| 318 |
<div class="ai-warning-icon"> |
| 319 |
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" |
| 320 |
xmlns="http://www.w3.org/2000/svg"> |
| 321 |
<path |
| 322 |
d="M10.29 3.86L1.82 18A2 2 0 0 0 3.54 21H20.46A2 2 0 0 0 22.18 18L13.71 3.86A2 2 0 0 0 10.29 3.86Z" |
| 323 |
stroke="currentColor" stroke-width="2" stroke-linecap="round" |
| 324 |
stroke-linejoin="round" /> |
| 325 |
<path d="M12 9V13" stroke="currentColor" stroke-width="2" stroke-linecap="round" |
| 326 |
stroke-linejoin="round" /> |
| 327 |
<circle cx="12" cy="17" r="1" stroke="currentColor" stroke-width="2" /> |
| 328 |
</svg> |
| 329 |
</div> |
| 330 |
<div class="ai-warning-content"> |
| 331 |
<strong>Active subscription required</strong> |
| 332 |
<p>You need an active subscription to purchase additional credits. Get a subscription first |
| 333 |
to unlock this feature.</p> |
| 334 |
</div> |
| 335 |
</div> |
| 336 |
|
| 337 |
<button type="button" class="ai-primary-btn" id="buy-credits-btn" onclick="handleCreditPurchase()"> |
| 338 |
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> |
| 339 |
<path d="M12 2V6" stroke="currentColor" stroke-width="2" stroke-linecap="round" |
| 340 |
stroke-linejoin="round" /> |
| 341 |
<path d="M12 18V22" stroke="currentColor" stroke-width="2" stroke-linecap="round" |
| 342 |
stroke-linejoin="round" /> |
| 343 |
<path d="M4.93 4.93L7.76 7.76" stroke="currentColor" stroke-width="2" stroke-linecap="round" |
| 344 |
stroke-linejoin="round" /> |
| 345 |
<path d="M16.24 16.24L19.07 19.07" stroke="currentColor" stroke-width="2" |
| 346 |
stroke-linecap="round" stroke-linejoin="round" /> |
| 347 |
<path d="M2 12H6" stroke="currentColor" stroke-width="2" stroke-linecap="round" |
| 348 |
stroke-linejoin="round" /> |
| 349 |
<path d="M18 12H22" stroke="currentColor" stroke-width="2" stroke-linecap="round" |
| 350 |
stroke-linejoin="round" /> |
| 351 |
<path d="M4.93 19.07L7.76 16.24" stroke="currentColor" stroke-width="2" |
| 352 |
stroke-linecap="round" stroke-linejoin="round" /> |
| 353 |
<path d="M16.24 7.76L19.07 4.93" stroke="currentColor" stroke-width="2" |
| 354 |
stroke-linecap="round" stroke-linejoin="round" /> |
| 355 |
</svg> |
| 356 |
Buy Credits |
| 357 |
</button> |
| 358 |
</div> |
| 359 |
</div> |
| 360 |
</div> |
| 361 |
</div> |
| 362 |
|
| 363 |
<!-- Account Management --> |
| 364 |
<div class="ai-section"> |
| 365 |
<div class="ai-section-header"> |
| 366 |
<h2>Account Management</h2> |
| 367 |
<p>Manage your billing and account settings</p> |
| 368 |
</div> |
| 369 |
|
| 370 |
<div class="ai-account-actions"> |
| 371 |
<div class="ai-action-card"> |
| 372 |
<div class="ai-action-icon"> |
| 373 |
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> |
| 374 |
<path |
| 375 |
d="M20 21V19C20 17.9391 19.5786 16.9217 18.8284 16.1716C18.0783 15.4214 17.0609 15 16 15H8C6.93913 15 5.92172 15.4214 5.17157 16.1716C4.42143 16.9217 4 17.9391 4 19V21" |
| 376 |
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" /> |
| 377 |
<circle cx="12" cy="7" r="4" stroke="currentColor" stroke-width="2" stroke-linecap="round" |
| 378 |
stroke-linejoin="round" /> |
| 379 |
</svg> |
| 380 |
</div> |
| 381 |
<div class="ai-action-content"> |
| 382 |
<h3>Stripe Account</h3> |
| 383 |
<p>Access your Stripe dashboard for billing management</p> |
| 384 |
<button type="button" class="ai-secondary-btn" onclick="handleStripeAccount()"> |
| 385 |
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> |
| 386 |
<path d="M18 13V19A2 2 0 0 1 16 21H8A2 2 0 0 1 6 19V13" stroke="currentColor" |
| 387 |
stroke-width="2" stroke-linecap="round" stroke-linejoin="round" /> |
| 388 |
<path d="M12 3V15" stroke="currentColor" stroke-width="2" stroke-linecap="round" |
| 389 |
stroke-linejoin="round" /> |
| 390 |
<path d="M9 6L12 3L15 6" stroke="currentColor" stroke-width="2" stroke-linecap="round" |
| 391 |
stroke-linejoin="round" /> |
| 392 |
</svg> |
| 393 |
View Stripe Account |
| 394 |
</button> |
| 395 |
</div> |
| 396 |
</div> |
| 397 |
</div> |
| 398 |
</div> |
| 399 |
|
| 400 |
<!-- Messages --> |
| 401 |
<div id="message-container"></div> |
| 402 |
</div> |
| 403 |
|
| 404 |
<!-- Confirmation Modal --> |
| 405 |
<div id="confirmation-modal" class="ai-modal" style="display: none;"> |
| 406 |
<div class="ai-modal-content"> |
| 407 |
<div class="ai-modal-header"> |
| 408 |
<h3>Cancel Subscription</h3> |
| 409 |
<button type="button" class="ai-modal-close" onclick="closeModal()">×</button> |
| 410 |
</div> |
| 411 |
<div class="ai-modal-body"> |
| 412 |
<p>Are you sure you want to cancel your subscription? You will lose access to monthly credits at the end of |
| 413 |
your current billing period.</p> |
| 414 |
</div> |
| 415 |
<div class="ai-modal-footer"> |
| 416 |
<button type="button" class="ai-secondary-btn" onclick="closeModal()">Keep Subscription</button> |
| 417 |
<button type="button" class="ai-danger-btn" onclick="confirmCancelSubscription()"> |
| 418 |
<span class="ai-loading" style="display: none;"></span> |
| 419 |
Yes, Cancel Subscription |
| 420 |
</button> |
| 421 |
</div> |
| 422 |
</div> |
| 423 |
</div> |
| 424 |
|
| 425 |
<style> |
| 426 |
/* Subscription Plans Container */ |
| 427 |
.ai-subscription-actions { |
| 428 |
display: grid; |
| 429 |
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); |
| 430 |
gap: 24px; |
| 431 |
margin-bottom: 24px; |
| 432 |
} |
| 433 |
|
| 434 |
.ai-plan-card-wrapper { |
| 435 |
position: relative; |
| 436 |
} |
| 437 |
|
| 438 |
/* Modern Plan Card Styles */ |
| 439 |
.ai-plan-card { |
| 440 |
--plan-accent: #4f46e5; |
| 441 |
background: #ffffff; |
| 442 |
border-radius: 16px; |
| 443 |
padding: 32px; |
| 444 |
color: #0f172a; |
| 445 |
box-shadow: 0 18px 30px rgba(15, 23, 42, 0.07); |
| 446 |
border: 1px solid #e4e8ef; |
| 447 |
position: relative; |
| 448 |
overflow: hidden; |
| 449 |
transition: all 0.3s ease; |
| 450 |
height: 100%; |
| 451 |
display: flex; |
| 452 |
flex-direction: column; |
| 453 |
} |
| 454 |
|
| 455 |
.ai-plan-card:hover { |
| 456 |
transform: translateY(-4px); |
| 457 |
box-shadow: 0 24px 45px rgba(15, 23, 42, 0.12); |
| 458 |
} |
| 459 |
|
| 460 |
.ai-plan-card::before { |
| 461 |
content: ''; |
| 462 |
position: absolute; |
| 463 |
top: 0; |
| 464 |
left: 16px; |
| 465 |
right: 16px; |
| 466 |
height: 3px; |
| 467 |
border-radius: 999px; |
| 468 |
background: linear-gradient(90deg, var(--plan-accent), rgba(79, 70, 229, 0.1)); |
| 469 |
} |
| 470 |
|
| 471 |
.ai-plan-card>* { |
| 472 |
position: relative; |
| 473 |
z-index: 1; |
| 474 |
} |
| 475 |
|
| 476 |
/* Plan Badge */ |
| 477 |
.ai-plan-badge { |
| 478 |
position: absolute; |
| 479 |
top: 18px; |
| 480 |
right: 18px; |
| 481 |
background: rgba(15, 23, 42, 0.08); |
| 482 |
color: #0f172a; |
| 483 |
padding: 6px 14px; |
| 484 |
border-radius: 999px; |
| 485 |
font-size: 11px; |
| 486 |
font-weight: 600; |
| 487 |
text-transform: uppercase; |
| 488 |
letter-spacing: 0.6px; |
| 489 |
} |
| 490 |
|
| 491 |
.ai-plan-badge-popular { |
| 492 |
background: rgba(79, 70, 229, 0.12); |
| 493 |
color: #4338ca; |
| 494 |
} |
| 495 |
|
| 496 |
/* Plan Colors */ |
| 497 |
.ai-plan-essential { |
| 498 |
--plan-accent: #1d4ed8; |
| 499 |
} |
| 500 |
|
| 501 |
.ai-plan-premium { |
| 502 |
--plan-accent: #7c3aed; |
| 503 |
} |
| 504 |
|
| 505 |
.ai-plan-creator { |
| 506 |
--plan-accent: #db2777; |
| 507 |
} |
| 508 |
|
| 509 |
.ai-plan-popular { |
| 510 |
box-shadow: 0 24px 45px rgba(76, 29, 149, 0.18); |
| 511 |
border-color: rgba(76, 29, 149, 0.2); |
| 512 |
} |
| 513 |
|
| 514 |
.ai-plan-header { |
| 515 |
text-align: center; |
| 516 |
margin-bottom: 24px; |
| 517 |
} |
| 518 |
|
| 519 |
.ai-plan-header:first-of-type { |
| 520 |
margin-top: 16px; |
| 521 |
} |
| 522 |
|
| 523 |
.ai-plan-title h3 { |
| 524 |
font-size: 26px; |
| 525 |
font-weight: 600; |
| 526 |
margin: 0 0 6px 0; |
| 527 |
color: #0f172a; |
| 528 |
} |
| 529 |
|
| 530 |
.ai-plan-price { |
| 531 |
display: flex; |
| 532 |
align-items: baseline; |
| 533 |
justify-content: center; |
| 534 |
gap: 4px; |
| 535 |
} |
| 536 |
|
| 537 |
.ai-price-amount { |
| 538 |
font-size: 38px; |
| 539 |
font-weight: 600; |
| 540 |
color: #0f172a; |
| 541 |
margin-top: 12px; |
| 542 |
} |
| 543 |
|
| 544 |
.ai-price-period { |
| 545 |
font-size: 16px; |
| 546 |
font-weight: 500; |
| 547 |
color: #6b7280; |
| 548 |
} |
| 549 |
|
| 550 |
.ai-plan-features { |
| 551 |
margin-bottom: 24px; |
| 552 |
flex-grow: 1; |
| 553 |
} |
| 554 |
|
| 555 |
.ai-feature-item { |
| 556 |
display: flex; |
| 557 |
align-items: center; |
| 558 |
gap: 12px; |
| 559 |
margin-bottom: 16px; |
| 560 |
padding: 12px 16px; |
| 561 |
background: #f8fafc; |
| 562 |
border-radius: 12px; |
| 563 |
border: 1px solid #e2e8f0; |
| 564 |
transition: all 0.3s ease; |
| 565 |
} |
| 566 |
|
| 567 |
.ai-feature-item:hover { |
| 568 |
border-color: rgba(79, 70, 229, 0.4); |
| 569 |
transform: translateX(4px); |
| 570 |
} |
| 571 |
|
| 572 |
.ai-feature-icon { |
| 573 |
flex-shrink: 0; |
| 574 |
width: 32px; |
| 575 |
height: 32px; |
| 576 |
background: rgba(79, 70, 229, 0.12); |
| 577 |
border-radius: 50%; |
| 578 |
display: flex; |
| 579 |
align-items: center; |
| 580 |
justify-content: center; |
| 581 |
color: var(--plan-accent); |
| 582 |
border: 1px solid rgba(79, 70, 229, 0.2); |
| 583 |
} |
| 584 |
|
| 585 |
.ai-feature-text { |
| 586 |
font-size: 16px; |
| 587 |
font-weight: 500; |
| 588 |
color: #0f172a; |
| 589 |
line-height: 1.4; |
| 590 |
} |
| 591 |
|
| 592 |
.ai-plan-cta { |
| 593 |
text-align: center; |
| 594 |
} |
| 595 |
|
| 596 |
.ai-cta-btn { |
| 597 |
background: var(--plan-accent); |
| 598 |
color: #fff; |
| 599 |
border: 2px solid var(--plan-accent); |
| 600 |
padding: 14px 28px; |
| 601 |
border-radius: 12px; |
| 602 |
font-size: 16px; |
| 603 |
font-weight: 600; |
| 604 |
display: inline-flex; |
| 605 |
align-items: center; |
| 606 |
justify-content: center; |
| 607 |
gap: 8px; |
| 608 |
cursor: pointer; |
| 609 |
transition: all 0.3s ease; |
| 610 |
box-shadow: 0 10px 25px rgba(79, 70, 229, 0.25); |
| 611 |
text-transform: none; |
| 612 |
letter-spacing: 0; |
| 613 |
width: 100%; |
| 614 |
backdrop-filter: none; |
| 615 |
} |
| 616 |
|
| 617 |
.ai-cta-btn:hover { |
| 618 |
background: #fff; |
| 619 |
color: var(--plan-accent); |
| 620 |
transform: translateY(-2px); |
| 621 |
box-shadow: 0 12px 30px rgba(15, 23, 42, 0.12); |
| 622 |
} |
| 623 |
|
| 624 |
.ai-cta-btn:active { |
| 625 |
transform: translateY(0); |
| 626 |
} |
| 627 |
|
| 628 |
.ai-cta-btn:disabled { |
| 629 |
opacity: 0.6; |
| 630 |
cursor: not-allowed; |
| 631 |
transform: none; |
| 632 |
} |
| 633 |
|
| 634 |
.ai-plan-btn.current-plan { |
| 635 |
background: rgba(79, 70, 229, 0.08); |
| 636 |
border-color: rgba(79, 70, 229, 0.2); |
| 637 |
cursor: default; |
| 638 |
} |
| 639 |
|
| 640 |
.ai-plan-btn.current-plan:hover { |
| 641 |
transform: none; |
| 642 |
} |
| 643 |
|
| 644 |
/* Action Card Container */ |
| 645 |
.ai-action-card { |
| 646 |
background: white; |
| 647 |
border-radius: 16px; |
| 648 |
padding: 32px; |
| 649 |
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08); |
| 650 |
border: 1px solid rgba(0, 0, 0, 0.06); |
| 651 |
transition: all 0.3s ease; |
| 652 |
} |
| 653 |
|
| 654 |
.ai-action-card:hover { |
| 655 |
transform: translateY(-4px); |
| 656 |
box-shadow: 0 16px 48px rgba(0, 0, 0, 0.12); |
| 657 |
} |
| 658 |
|
| 659 |
/* Current Plan Indicator */ |
| 660 |
.ai-plan-card-wrapper[data-current-plan="true"] .ai-plan-card { |
| 661 |
border: 3px solid rgba(255, 255, 255, 0.8); |
| 662 |
box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.3), 0 24px 48px rgba(102, 126, 234, 0.3); |
| 663 |
} |
| 664 |
|
| 665 |
/* Responsive Design */ |
| 666 |
@media (max-width: 768px) { |
| 667 |
.ai-subscription-actions { |
| 668 |
grid-template-columns: 1fr; |
| 669 |
} |
| 670 |
|
| 671 |
.ai-plan-card { |
| 672 |
padding: 24px; |
| 673 |
} |
| 674 |
|
| 675 |
.ai-price-amount { |
| 676 |
font-size: 36px; |
| 677 |
} |
| 678 |
|
| 679 |
.ai-feature-item { |
| 680 |
padding: 10px 12px; |
| 681 |
} |
| 682 |
|
| 683 |
.ai-cta-btn { |
| 684 |
padding: 12px 24px; |
| 685 |
font-size: 15px; |
| 686 |
} |
| 687 |
|
| 688 |
.ai-plan-badge { |
| 689 |
font-size: 10px; |
| 690 |
padding: 4px 8px; |
| 691 |
} |
| 692 |
} |
| 693 |
|
| 694 |
/* Animation for loading states */ |
| 695 |
.ai-loading { |
| 696 |
animation: spin 1s linear infinite; |
| 697 |
} |
| 698 |
|
| 699 |
@keyframes spin { |
| 700 |
from { |
| 701 |
transform: rotate(0deg); |
| 702 |
} |
| 703 |
|
| 704 |
to { |
| 705 |
transform: rotate(360deg); |
| 706 |
} |
| 707 |
} |
| 708 |
</style> |
