File manager - Edit - /home/webapp69.cm.in.th/u69319090036/Shop/guide.php
Back
<?php // guide.php - Comprehensive User Guide Page require_once 'db_connect.php'; renderHeader(__('guide_page_title')); ?> <div class="max-w-4xl mx-auto my-8 px-4"> <!-- Hero Header Banner --> <div class="text-center mb-10 bg-gradient-to-r from-orange-50 via-rose-50 to-amber-50 p-8 sm:p-12 rounded-3xl border border-orange-100/80 shadow-sm relative overflow-hidden"> <div class="relative z-10"> <span class="inline-flex items-center gap-2 px-3.5 py-1.5 bg-white text-orange-600 text-xs font-black uppercase tracking-widest rounded-full shadow-sm mb-4 border border-orange-100"> <svg class="w-3.5 h-3.5 text-orange-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"/></svg> <?php echo __('guide_badge'); ?> </span> <h1 class="text-3xl sm:text-4xl font-extrabold text-gray-900 tracking-tight leading-tight mb-3"> <?php echo __('guide_heading'); ?> </h1> <p class="text-gray-600 text-sm sm:text-base max-w-xl mx-auto leading-relaxed"> <?php echo __('guide_subheading'); ?> </p> </div> </div> <!-- Tab Navigation --> <div class="flex bg-gray-100 p-1.5 rounded-2xl mb-8 gap-1.5 text-sm font-bold shadow-inner max-w-lg mx-auto"> <button onclick="switchGuideTab('buyer')" id="gtab-btn-buyer" class="flex-1 py-3 px-4 rounded-xl transition-all bg-white shadow-sm text-orange-600"> <?php echo __('guide_tab_buyer'); ?> </button> <button onclick="switchGuideTab('seller')" id="gtab-btn-seller" class="flex-1 py-3 px-4 rounded-xl transition-all text-gray-500 hover:text-gray-800"> <?php echo __('guide_tab_seller'); ?> </button> <button onclick="switchGuideTab('faq')" id="gtab-btn-faq" class="flex-1 py-3 px-4 rounded-xl transition-all text-gray-500 hover:text-gray-800"> <?php echo __('guide_tab_faq'); ?> </button> </div> <!-- Section 1: For Buyers --> <div id="gtab-buyer" class="space-y-6"> <div class="bg-white p-6 sm:p-8 rounded-3xl border border-gray-100 shadow-sm space-y-6"> <div class="flex items-center gap-3 border-b border-gray-100 pb-4"> <div class="w-10 h-10 bg-orange-50 text-orange-600 rounded-xl flex items-center justify-center"> <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 11V7a4 4 0 00-8 0v4M5 11h14l1 12H4L5 11z"/></svg> </div> <h2 class="text-xl font-bold text-gray-900"><?php echo __('guide_tab_buyer'); ?></h2> </div> <div class="grid grid-cols-1 sm:grid-cols-2 gap-6"> <!-- Buyer Card 1 --> <div class="bg-gray-50/70 p-5 rounded-2xl border border-gray-100 hover:border-orange-200 transition-colors"> <div class="w-8 h-8 bg-white text-orange-500 rounded-lg flex items-center justify-center border border-gray-100 mb-3"> <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/></svg> </div> <h3 class="font-bold text-gray-900 text-base mb-1.5"><?php echo __('guide_b1_title'); ?></h3> <p class="text-xs text-gray-600 leading-relaxed"><?php echo __('guide_b1_desc'); ?></p> </div> <!-- Buyer Card 2 --> <div class="bg-gray-50/70 p-5 rounded-2xl border border-gray-100 hover:border-orange-200 transition-colors"> <div class="w-8 h-8 bg-white text-orange-500 rounded-lg flex items-center justify-center border border-gray-100 mb-3"> <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5h12M9 3v2m1.048 9.5A18.022 18.022 0 016.412 9m6.088 9h7M11 21l5-10 5 10M12.751 5C11.783 10.77 8.07 15.61 3 18.129"/></svg> </div> <h3 class="font-bold text-gray-900 text-base mb-1.5"><?php echo __('guide_b2_title'); ?></h3> <p class="text-xs text-gray-600 leading-relaxed"><?php echo __('guide_b2_desc'); ?></p> </div> <!-- Buyer Card 3 --> <div class="bg-gray-50/70 p-5 rounded-2xl border border-gray-100 hover:border-orange-200 transition-colors"> <div class="w-8 h-8 bg-white text-orange-500 rounded-lg flex items-center justify-center border border-gray-100 mb-3"> <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/></svg> </div> <h3 class="font-bold text-gray-900 text-base mb-1.5"><?php echo __('guide_b3_title'); ?></h3> <p class="text-xs text-gray-600 leading-relaxed"><?php echo __('guide_b3_title_desc'); ?></p> </div> <!-- Buyer Card 4 --> <div class="bg-gray-50/70 p-5 rounded-2xl border border-gray-100 hover:border-orange-200 transition-colors"> <div class="w-8 h-8 bg-white text-orange-500 rounded-lg flex items-center justify-center border border-gray-100 mb-3"> <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z"/></svg> </div> <h3 class="font-bold text-gray-900 text-base mb-1.5"><?php echo __('guide_b4_title'); ?></h3> <p class="text-xs text-gray-600 leading-relaxed"><?php echo __('guide_b4_desc'); ?></p> </div> </div> <div class="pt-4 border-t border-gray-100 text-center"> <a href="index.php" class="inline-flex items-center gap-2 px-6 py-3 bg-gradient-to-r from-orange-500 to-rose-500 text-white font-bold rounded-xl text-xs shadow hover:shadow-md transition-all"> Browse Marketplace Now </a> </div> </div> </div> <!-- Section 2: For Sellers --> <div id="gtab-seller" class="hidden space-y-6"> <div class="bg-white p-6 sm:p-8 rounded-3xl border border-gray-100 shadow-sm space-y-6"> <div class="flex items-center gap-3 border-b border-gray-100 pb-4"> <div class="w-10 h-10 bg-orange-50 text-orange-600 rounded-xl flex items-center justify-center"> <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"/></svg> </div> <h2 class="text-xl font-bold text-gray-900"><?php echo __('guide_tab_seller'); ?></h2> </div> <div class="grid grid-cols-1 sm:grid-cols-3 gap-6"> <!-- Seller Card 1 --> <div class="bg-orange-50/50 p-5 rounded-2xl border border-orange-100"> <div class="w-8 h-8 bg-white text-orange-600 rounded-lg flex items-center justify-center border border-orange-100 mb-3"> <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7h12m0 0l-4-4m4 4l-4 4m0 6H4m0 0l4 4m-4-4l4-4"/></svg> </div> <h3 class="font-bold text-gray-900 text-base mb-1.5"><?php echo __('guide_s1_title'); ?></h3> <p class="text-xs text-gray-600 leading-relaxed"><?php echo __('guide_s1_desc'); ?></p> </div> <!-- Seller Card 2 --> <div class="bg-orange-50/50 p-5 rounded-2xl border border-orange-100"> <div class="w-8 h-8 bg-white text-orange-600 rounded-lg flex items-center justify-center border border-orange-100 mb-3"> <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4"/></svg> </div> <h3 class="font-bold text-gray-900 text-base mb-1.5"><?php echo __('guide_s2_title'); ?></h3> <p class="text-xs text-gray-600 leading-relaxed"><?php echo __('guide_s2_desc'); ?></p> </div> <!-- Seller Card 3 --> <div class="bg-orange-50/50 p-5 rounded-2xl border border-orange-100"> <div class="w-8 h-8 bg-white text-orange-600 rounded-lg flex items-center justify-center border border-orange-100 mb-3"> <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg> </div> <h3 class="font-bold text-gray-900 text-base mb-1.5"><?php echo __('guide_s3_title'); ?></h3> <p class="text-xs text-gray-600 leading-relaxed"><?php echo __('guide_s3_desc'); ?></p> </div> </div> <div class="pt-4 border-t border-gray-100 text-center"> <a href="sell.php" class="inline-flex items-center gap-2 px-6 py-3 bg-gradient-to-r from-orange-500 to-rose-500 text-white font-bold rounded-xl text-xs shadow hover:shadow-md transition-all"> Go to Seller Dashboard </a> </div> </div> </div> <!-- Section 3: FAQ --> <div id="gtab-faq" class="hidden space-y-4"> <div class="bg-white p-6 sm:p-8 rounded-3xl border border-gray-100 shadow-sm space-y-4"> <div class="flex items-center gap-3 border-b border-gray-100 pb-4 mb-6"> <div class="w-10 h-10 bg-orange-50 text-orange-600 rounded-xl flex items-center justify-center"> <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg> </div> <h2 class="text-xl font-bold text-gray-900"><?php echo __('guide_tab_faq'); ?></h2> </div> <div class="space-y-4"> <div class="p-5 bg-gray-50 rounded-2xl border border-gray-100 space-y-1"> <h3 class="font-bold text-gray-900 text-sm"><?php echo __('guide_faq1_q'); ?></h3> <p class="text-xs text-gray-600 leading-relaxed"><?php echo __('guide_faq1_a'); ?></p> </div> <div class="p-5 bg-gray-50 rounded-2xl border border-gray-100 space-y-1"> <h3 class="font-bold text-gray-900 text-sm"><?php echo __('guide_faq2_q'); ?></h3> <p class="text-xs text-gray-600 leading-relaxed"><?php echo __('guide_faq2_a'); ?></p> </div> <div class="p-5 bg-gray-50 rounded-2xl border border-gray-100 space-y-1"> <h3 class="font-bold text-gray-900 text-sm"><?php echo __('guide_faq3_q'); ?></h3> <p class="text-xs text-gray-600 leading-relaxed"><?php echo __('guide_faq3_a'); ?></p> </div> </div> </div> </div> </div> <script> function switchGuideTab(tab) { document.getElementById('gtab-buyer').classList.toggle('hidden', tab !== 'buyer'); document.getElementById('gtab-seller').classList.toggle('hidden', tab !== 'seller'); document.getElementById('gtab-faq').classList.toggle('hidden', tab !== 'faq'); document.getElementById('gtab-btn-buyer').className = 'flex-1 py-3 px-4 rounded-xl transition-all ' + (tab === 'buyer' ? 'bg-white shadow-sm text-orange-600' : 'text-gray-500 hover:text-gray-800'); document.getElementById('gtab-btn-seller').className = 'flex-1 py-3 px-4 rounded-xl transition-all ' + (tab === 'seller' ? 'bg-white shadow-sm text-orange-600' : 'text-gray-500 hover:text-gray-800'); document.getElementById('gtab-btn-faq').className = 'flex-1 py-3 px-4 rounded-xl transition-all ' + (tab === 'faq' ? 'bg-white shadow-sm text-orange-600' : 'text-gray-500 hover:text-gray-800'); } </script> <?php renderFooter(); ?>
| ver. 1.4 |
Github
|
.
| PHP 7.4.33 | Generation time: 0.24 |
proxy
|
phpinfo
|
Settings