|
|
<?php |
|
|
// Start session and check if user is logged in |
|
|
session_start(); |
|
|
if (!isset($_SESSION['logged_in']) || $_SESSION['logged_in'] !== true) { |
|
|
header('Location: ../../index.php'); |
|
|
exit; |
|
|
} |
|
|
|
|
|
// Get user data from session |
|
|
$username = $_SESSION['username']; |
|
|
$email = $_SESSION['email']; |
|
|
$tier = $_SESSION['tier']; |
|
|
$package = $_SESSION['package']; |
|
|
$balance = $_SESSION['balance']; |
|
|
$total_deposits = $_SESSION['total_deposits']; |
|
|
$total_withdrawals = $_SESSION['total_withdrawals']; |
|
|
$rewards = $_SESSION['rewards']; |
|
|
$earnings = $total_deposits - $total_withdrawals; |
|
|
?> |
|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Japanese Motors — Customer Care</title> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700;800&display=swap" rel="stylesheet"> |
|
|
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> |
|
|
<style> |
|
|
:root { |
|
|
--bg: #7b848d; |
|
|
--card: #7a2f3b; |
|
|
--card-2: #6f2630; |
|
|
--accent: #efdf2d; |
|
|
--muted: rgba(255,255,255,0.6); |
|
|
--glass: rgba(255,255,255,0.04); |
|
|
--promo-gradient: linear-gradient(180deg,#a13df0 0%, #ff2a79 50%, #d70b1a 100%); |
|
|
font-family: 'Poppins', system-ui, Arial; |
|
|
--banner-gradient-start: #a855f7; |
|
|
--banner-gradient-end: #ec4899; |
|
|
--spacing-unit: 1rem; |
|
|
--accent-primary: #7c3aed; |
|
|
--accent-secondary: #a855f7; |
|
|
--shadow-hover: 0 6px 18px rgba(0, 0, 0, 0.1); |
|
|
--premium-gold: #d97706; |
|
|
} |
|
|
|
|
|
body { |
|
|
background: var(--bg); |
|
|
font-family: 'Poppins', sans-serif; |
|
|
transition: all 0.3s ease; |
|
|
min-height: 100vh; |
|
|
} |
|
|
|
|
|
.sidebar { |
|
|
width: 250px; |
|
|
height: 100vh; |
|
|
background: #0d1321; |
|
|
color: #fff; |
|
|
position: fixed; |
|
|
top: 0; |
|
|
left: -250px; |
|
|
transition: all 0.3s ease; |
|
|
z-index: 1000; |
|
|
overflow-y: auto; |
|
|
} |
|
|
|
|
|
.sidebar.active { |
|
|
left: 0; |
|
|
} |
|
|
|
|
|
#content { |
|
|
margin-left: 0; |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
|
|
|
.sidebar.active ~ #content { |
|
|
margin-left: 250px; |
|
|
} |
|
|
|
|
|
header { |
|
|
background: #222; |
|
|
color: white; |
|
|
padding: 15px 20px; |
|
|
display: flex; |
|
|
justify-content: space-between; |
|
|
align-items: center; |
|
|
position: relative; |
|
|
z-index: 900; |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
|
|
|
.sidebar.active ~ #content header { |
|
|
margin-left: 250px; |
|
|
} |
|
|
|
|
|
.menu-toggle { |
|
|
background: transparent; |
|
|
border: none; |
|
|
color: white; |
|
|
font-size: 1.5rem; |
|
|
cursor: pointer; |
|
|
} |
|
|
|
|
|
.logo-section { |
|
|
padding: 15px; |
|
|
border-bottom: 1px solid #1c2230; |
|
|
display: flex; |
|
|
align-items: center; |
|
|
gap: 10px; |
|
|
} |
|
|
|
|
|
.brand { |
|
|
font-size: 1.2rem; |
|
|
font-weight: 700; |
|
|
color: #ff9800; |
|
|
} |
|
|
|
|
|
.subtitle { |
|
|
font-size: 0.75rem; |
|
|
color: #aaa; |
|
|
} |
|
|
|
|
|
.menu { |
|
|
list-style: none; |
|
|
padding: 0; |
|
|
margin: 0; |
|
|
} |
|
|
|
|
|
.menu li a { |
|
|
display: flex; |
|
|
align-items: center; |
|
|
padding: 12px 20px; |
|
|
color: white; |
|
|
text-decoration: none; |
|
|
transition: background 0.3s; |
|
|
} |
|
|
|
|
|
.menu li a:hover { |
|
|
background: #1c2230; |
|
|
} |
|
|
|
|
|
.menu li a i { |
|
|
margin-right: 12px; |
|
|
} |
|
|
|
|
|
.user-footer { |
|
|
padding: 15px; |
|
|
background: #222; |
|
|
display: flex; |
|
|
align-items: center; |
|
|
gap: 10px; |
|
|
position: sticky; |
|
|
bottom: 0; |
|
|
} |
|
|
|
|
|
.avatar { |
|
|
width: 35px; |
|
|
height: 35px; |
|
|
background: #444; |
|
|
border-radius: 50%; |
|
|
display: flex; |
|
|
align-items: center; |
|
|
justify-content: center; |
|
|
font-weight: bold; |
|
|
color: white; |
|
|
} |
|
|
|
|
|
.banner { |
|
|
max-width: 450px; |
|
|
margin: 0 auto calc(var(--spacing-unit) * 2); |
|
|
background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary)); |
|
|
border-radius: 12px; |
|
|
padding: calc(var(--spacing-unit) * 1.5); |
|
|
text-align: center; |
|
|
box-shadow: var(--shadow-hover); |
|
|
animation: fadeIn 0.5s ease; |
|
|
} |
|
|
|
|
|
@keyframes fadeIn { |
|
|
from { opacity: 0; transform: translateY(20px); } |
|
|
to { opacity: 1; transform: translateY(0); } |
|
|
} |
|
|
|
|
|
@keyframes blink { |
|
|
0% { opacity: 1; } |
|
|
50% { opacity: 0.3; } |
|
|
100% { opacity: 1; } |
|
|
} |
|
|
|
|
|
.banner .title { |
|
|
font-size: 1.25rem; |
|
|
margin-bottom: calc(var(--spacing-unit) * 1); |
|
|
color: #ffffff; |
|
|
font-weight: 700; |
|
|
animation: blink 1.5s infinite; |
|
|
} |
|
|
|
|
|
.banner p { |
|
|
font-size: 0.95rem; |
|
|
line-height: 1.6; |
|
|
margin-bottom: calc(var(--spacing-unit) * 1); |
|
|
color: var(--premium-gold); |
|
|
animation: blink 1.5s infinite; |
|
|
} |
|
|
|
|
|
.banner .footer { |
|
|
font-size: 0.75rem; |
|
|
color: rgba(255, 255, 255, 0.9); |
|
|
font-style: italic; |
|
|
animation: blink 1.5s infinite; |
|
|
} |
|
|
|
|
|
.card { |
|
|
background: var(--card); |
|
|
border-radius: 12px; |
|
|
padding: 26px; |
|
|
color: white; |
|
|
box-shadow: 0 6px 0 rgba(0,0,0,0.08) inset; |
|
|
flex: 1; |
|
|
} |
|
|
|
|
|
.balance { |
|
|
background: rgba(255,255,255,0.03); |
|
|
padding: 14px; |
|
|
border-radius: 10px; |
|
|
margin: 18px 0; |
|
|
display: flex; |
|
|
align-items: center; |
|
|
justify-content: space-between; |
|
|
} |
|
|
|
|
|
.form-group { |
|
|
margin: 12px 0; |
|
|
} |
|
|
|
|
|
label { |
|
|
display: block; |
|
|
margin-bottom: 8px; |
|
|
color: rgba(255,255,255,0.85); |
|
|
} |
|
|
|
|
|
input, select, textarea { |
|
|
width: 100%; |
|
|
padding: 14px; |
|
|
border-radius: 10px; |
|
|
border: 1px solid rgba(255,255,255,0.05); |
|
|
background: transparent; |
|
|
color: white; |
|
|
} |
|
|
|
|
|
.btn { |
|
|
display: inline-block; |
|
|
padding: 14px 24px; |
|
|
border-radius: 10px; |
|
|
background: var(--accent); |
|
|
color: #111; |
|
|
font-weight: 700; |
|
|
border: none; |
|
|
cursor: pointer; |
|
|
width: 100%; |
|
|
} |
|
|
|
|
|
.btn-outline { |
|
|
background: transparent; |
|
|
border: 2px solid var(--accent); |
|
|
color: var(--accent); |
|
|
} |
|
|
|
|
|
.dashboard-card { |
|
|
background: rgba(0,0,0,0.2); |
|
|
border-radius: 12px; |
|
|
padding: 20px; |
|
|
margin-bottom: 20px; |
|
|
} |
|
|
|
|
|
.stat-card { |
|
|
background: rgba(0,0,0,0.15); |
|
|
border-radius: 10px; |
|
|
padding: 16px; |
|
|
margin-bottom: 16px; |
|
|
} |
|
|
|
|
|
.support-ticket { |
|
|
background: rgba(0,0,0,0.15); |
|
|
border-radius: 10px; |
|
|
padding: 16px; |
|
|
margin-bottom: 16px; |
|
|
border-left: 4px solid var(--accent); |
|
|
} |
|
|
|
|
|
.faq-item { |
|
|
background: rgba(0,0,0,0.15); |
|
|
border-radius: 10px; |
|
|
padding: 16px; |
|
|
margin-bottom: 16px; |
|
|
cursor: pointer; |
|
|
} |
|
|
|
|
|
.faq-answer { |
|
|
display: none; |
|
|
padding-top: 12px; |
|
|
color: var(--muted); |
|
|
} |
|
|
|
|
|
.active-page { |
|
|
background: #1c2230; |
|
|
border-right: 4px solid var(--accent); |
|
|
} |
|
|
|
|
|
.whatsapp-btn { |
|
|
background: #25D366; |
|
|
color: white; |
|
|
display: inline-flex; |
|
|
align-items: center; |
|
|
justify-content: center; |
|
|
gap: 8px; |
|
|
padding: 12px 20px; |
|
|
border-radius: 10px; |
|
|
font-weight: 600; |
|
|
text-decoration: none; |
|
|
margin-top: 15px; |
|
|
} |
|
|
|
|
|
.contact-option { |
|
|
background: rgba(0,0,0,0.15); |
|
|
border-radius: 10px; |
|
|
padding: 16px; |
|
|
margin-bottom: 16px; |
|
|
transition: transform 0.3s ease; |
|
|
} |
|
|
|
|
|
.contact-option:hover { |
|
|
transform: translateY(-3px); |
|
|
} |
|
|
|
|
|
@media (max-width: 768px) { |
|
|
.cards { |
|
|
flex-direction: column; |
|
|
} |
|
|
|
|
|
.promo { |
|
|
width: 92%; |
|
|
} |
|
|
|
|
|
.grid-cols-2 { |
|
|
grid-template-columns: 1fr; |
|
|
} |
|
|
|
|
|
.grid-cols-3 { |
|
|
grid-template-columns: 1fr; |
|
|
} |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body> |
|
|
|
|
|
<aside class="sidebar" id="sidebar"> |
|
|
<div class="logo-section"> |
|
|
<i data-feather="zap" class="text-yellow-400"></i> |
|
|
<div> |
|
|
<h2 class="brand">JMOTORS</h2> |
|
|
<p class="subtitle">Marketing Platform</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<ul class="menu"> |
|
|
<li><a href="index.php"><i data-feather="home"></i> Dashboard</a></li> |
|
|
<li><a href="meta-uploads.php"><i data-feather="upload"></i> Meta Uploads</a></li> |
|
|
<li><a href="transactions.php"><i data-feather="repeat"></i> Transactions</a></li> |
|
|
<li><a href="transfer.php"><i data-feather="send"></i> Transfer</a></li> |
|
|
<li><a href="daily-product.php"><i data-feather="shopping-bag"></i> Daily Product</a></li> |
|
|
<li><a href="withdraw.php"><i data-feather="dollar-sign"></i> Withdraw</a></li> |
|
|
<li><a href="packages.php"><i data-feather="package"></i> Packages</a></li> |
|
|
<li><a href="loan.php"><i data-feather="credit-card"></i> Loan</a></li> |
|
|
<li><a href="recharge.php"><i data-feather="battery-charging"></i> Recharge</a></li> |
|
|
<li><a href="agent-approval.php" class="active-page"><i data-feather="user-check"></i> Agent Approval</a></li> |
|
|
<li><a href="access-token.php"><i data-feather="key"></i> Access Token</a></li> |
|
|
<li><a href="agent-claim.php"><i data-feather="tag"></i> Agent Claim</a></li> |
|
|
<li><a href="team.php"><i data-feather="users"></i> Team</a></li> |
|
|
</ul> |
|
|
|
|
|
<ul class="menu bottom"> |
|
|
<li><a href="profile.php"><i data-feather="user"></i> Profile</a></li> |
|
|
<li><a href="settings.php"><i data-feather="settings"></i> Settings</a></li> |
|
|
<li><a href="whatsapp-channel.php"><i data-feather="message-square"></i> Whatsapp Channel</a></li> |
|
|
<li><a href="customer-care.php"><i data-feather="headphones"></i> Customer Care</a></li> |
|
|
</ul> |
|
|
|
|
|
<div class="user-footer"> |
|
|
<div class="avatar"><?php echo substr($username, 0, 2); ?></div> |
|
|
<div> |
|
|
<h4><?php echo $username; ?></h4> |
|
|
<p><?php echo $tier; ?> - Marketer</p> |
|
|
</div> |
|
|
</div> |
|
|
</aside> |
|
|
|
|
|
|
|
|
<div id="content"> |
|
|
<header class="bg-gray-800 text-white p-4"> |
|
|
<div class="flex items-center"> |
|
|
<button class="menu-toggle" id="menu-toggle"> |
|
|
<i data-feather="menu"></i> |
|
|
</button> |
|
|
<div class="ml-4 font-bold text-xl">Jmotors</div> |
|
|
</div> |
|
|
<nav class="flex items-center space-x-6"> |
|
|
<a href="transfer.php" class="hover:text-yellow-300">Transfer</a> |
|
|
<a href="loan.php" class="hover:text-yellow-300">Loans</a> |
|
|
<a href="dailyproduct.php" class="hover:text-yellow-300">New Product</a> |
|
|
<div class="w-9 h-9 rounded-full bg-gradient-to-r from-yellow-300 to-orange-400 flex items-center justify-center font-bold">MI</div> |
|
|
</nav> |
|
|
</header> |
|
|
|
|
|
<main class="p-4"> |
|
|
<div class="banner"> |
|
|
<div class="title">🛎️ Customer Care Support</div> |
|
|
<p>We're here to help you with any issues or questions about your Japanese Motors account</p> |
|
|
|
|
|
<div class="footer">⏰ 24/7 support • Quick response • Expert help</div> |
|
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 mt-6"> |
|
|
<div class="dashboard-card md:col-span-2"> |
|
|
<h3 class="text-lg font-bold mb-4 flex items-center gap-2"> |
|
|
<i data-feather="help-circle" class="text-blue-400"></i> Submit a Support Request |
|
|
</h3> |
|
|
|
|
|
<form id="support-form"> |
|
|
<div class="form-group"> |
|
|
<label for="issue-type">Issue Type</label> |
|
|
<select id="issue-type" required> |
|
|
<option value="">Select issue type</option> |
|
|
<option value="technical">Technical Issue</option> |
|
|
<option value="account">Account Problem</option> |
|
|
<option value="payment">Payment Issue</option> |
|
|
<option value="product">Product Related</option> |
|
|
<option value="withdrawal">Withdrawal Problem</option> |
|
|
<option value="other">Other</option> |
|
|
</select> |
|
|
</div> |
|
|
|
|
|
<div class="form-group"> |
|
|
<label for="subject">Subject</label> |
|
|
<input type="text" id="subject" placeholder="Brief description of your issue" required> |
|
|
</div> |
|
|
|
|
|
<div class="form-group"> |
|
|
<label for="description">Description</label> |
|
|
<textarea id="description" rows="5" placeholder="Please describe your issue in detail..." required></textarea> |
|
|
</div> |
|
|
|
|
|
<div class="form-group"> |
|
|
<label for="priority">Priority Level</label> |
|
|
<select id="priority" required> |
|
|
<option value="low">Low - General inquiry</option> |
|
|
<option value="medium" selected>Medium - Feature request or minor issue</option> |
|
|
<option value="high">High - Functionality impaired</option> |
|
|
<option value="urgent">Urgent - System down or critical issue</option> |
|
|
</select> |
|
|
</div> |
|
|
|
|
|
<div class="form-group"> |
|
|
<label for="attachments">Attachments (Optional)</label> |
|
|
<input type="file" id="attachments"> |
|
|
<p class="text-xs text-gray-400 mt-1">Upload screenshots or documents that might help us understand your issue</p> |
|
|
</div> |
|
|
|
|
|
<button type="submit" class="btn">Submit Request</button> |
|
|
</form> |
|
|
</div> |
|
|
|
|
|
<div class="dashboard-card"> |
|
|
<h3 class="text-lg font-bold mb-4 flex items-center gap-2"> |
|
|
<i data-feather="phone" class="text-green-400"></i> Contact Options |
|
|
</h3> |
|
|
|
|
|
<div class="contact-option"> |
|
|
<h4 class="font-bold mb-2 flex items-center gap-2"> |
|
|
<i data-feather="message-circle" class="text-green-400"></i> Direct WhatsApp Support |
|
|
</h4> |
|
|
<p class="text-sm mb-3">Chat directly with our support team for instant assistance</p> |
|
|
<a href="https://wa.me/254712345678" class="whatsapp-btn" target="_blank"> |
|
|
<i data-feather="message-circle"></i> Message Support |
|
|
</a> |
|
|
</div> |
|
|
|
|
|
<div class="contact-option"> |
|
|
<h4 class="font-bold mb-2 flex items-center gap-2"> |
|
|
<i data-feather="mail" class="text-blue-400"></i> Email Support |
|
|
</h4> |
|
|
<p class="text-sm mb-1">Jmotors.com</p> |
|
|
<p class="text-sm mb-1">Jmotors.com</p> |
|
|
<p class="text-xs text-gray-400">Response within 2 hours</p> |
|
|
</div> |
|
|
|
|
|
<div class="contact-option"> |
|
|
<h4 class="font-bold mb-2 flex items-center gap-2"> |
|
|
<i data-feather="phone" class="text-purple-400"></i> Phone Support |
|
|
</h4> |
|
|
<p class="text-sm mb-1">+254 700 123 456</p> |
|
|
<p class="text-sm mb-1">+254 711 987 654</p> |
|
|
<p class="text-xs text-gray-400">Available 24/7 for urgent issues</p> |
|
|
</div> |
|
|
|
|
|
<div class="contact-option"> |
|
|
<h4 class="font-bold mb-2 flex items-center gap-2"> |
|
|
<i data-feather="map-pin" class="text-red-400"></i> Office Visit |
|
|
</h4> |
|
|
<p class="text-sm mb-1">Jmotors Headquarters</p> |
|
|
<p class="text-sm mb-1">Nairobi, Kenya</p> |
|
|
<p class="text-xs text-gray-400">By appointment only</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="dashboard-card mt-8"> |
|
|
<h3 class="text-lg font-bold mb-4 flex items-center gap-2"> |
|
|
<i data-feather="book-open" class="text-purple-400"></i> Frequently Asked Questions |
|
|
</h3> |
|
|
|
|
|
<div class="faq-item"> |
|
|
<div class="flex justify-between items-center"> |
|
|
<h4 class="font-bold">How do I reset my password?</h4> |
|
|
<i data-feather="chevron-down" class="faq-toggle"></i> |
|
|
</div> |
|
|
<div class="faq-answer"> |
|
|
<p>To reset your password, go to the login page and click on "Forgot Password". Enter your registered email address and follow the instructions sent to your email. If you don't receive the email within 5 minutes, check your spam folder or contact support.</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="faq-item"> |
|
|
<div class="flex justify-between items-center"> |
|
|
<h4 class="font-bold">Why is my withdrawal pending?</h4> |
|
|
<i data-feather="chevron-down" class="faq-toggle"></i> |
|
|
</div> |
|
|
<div class="faq-answer"> |
|
|
<p>Withdrawals typically process within 24 hours. If it's taking longer, it might be undergoing security verification. Contact support if pending for more than 48 hours. Make sure you've completed the required 5 uploads in the last 7 days to be eligible for withdrawal.</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="faq-item"> |
|
|
<div class="flex justify-between items-center"> |
|
|
<h4 class="font-bold">How do I join the affiliate program?</h4> |
|
|
<i data-feather="chevron-down" class="faq-toggle"></i> |
|
|
</div> |
|
|
<div class="faq-answer"> |
|
|
<p>To join our affiliate program, go to your dashboard, click on "Team" and then "Become an Affiliate". Follow the registration process and start inviting members. You need to have been active for at least 30 days and completed 50 successful uploads to qualify.</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="faq-item"> |
|
|
<div class="flex justify-between items-center"> |
|
|
<h4 class="font-bold">What are the minimum withdrawal requirements?</h4> |
|
|
<i data-feather="chevron-down" class="faq-toggle"></i> |
|
|
</div> |
|
|
<div class="faq-answer"> |
|
|
<p>The minimum withdrawal amount is KES 500. You must also have completed at least 5 successful uploads in the last 7 days to be eligible for withdrawal. There's a 2% processing fee for withdrawals below KES 2,000.</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="faq-item"> |
|
|
<div class="flex justify-between items-center"> |
|
|
<h4 class="font-bold">How do I upgrade my account level?</h4> |
|
|
<i data-feather="chevron-down" class="faq-toggle"></i> |
|
|
</div> |
|
|
<div class="faq-answer"> |
|
|
<p>Account levels are automatically upgraded based on your activity and earnings. To move from Dormant to Active Marketer, you need to complete 10 uploads and earn at least KES 1,000. Higher levels require more activity and team members.</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="faq-item"> |
|
|
<div class="flex justify-between items-center"> |
|
|
<h4 class="font-bold">What should I do if my uploads are rejected?</h4> |
|
|
<i data-feather="chevron-down" class="faq-toggle"></i> |
|
|
</div> |
|
|
<div class="faq-answer"> |
|
|
<p>If your uploads are frequently rejected, check the content guidelines in the Meta Uploads section. Make sure your content is original, follows platform rules, and meets the quality standards. If you believe your content was wrongly rejected, contact support with the upload ID.</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 mt-8"> |
|
|
<div class="dashboard-card"> |
|
|
<h3 class="text-lg font-bold mb-4 flex items-center gap-2"> |
|
|
<i data-feather="clock" class="text-yellow-400"></i> Support Hours |
|
|
</h3> |
|
|
<div class="space-y-3"> |
|
|
<div class="flex justify-between"> |
|
|
<span>WhatsApp Support:</span> |
|
|
<span class="font-bold">24/7</span> |
|
|
</div> |
|
|
<div class="flex justify-between"> |
|
|
<span>Email Support:</span> |
|
|
<span class="font-bold">Mon-Sun, 6am-11pm EAT</span> |
|
|
</div> |
|
|
<div class="flex justify-between"> |
|
|
<span>Phone Support:</span> |
|
|
<span class="font-bold">24/7 for urgent issues</span> |
|
|
</div> |
|
|
<div class="flex justify-between"> |
|
|
<span>Average Response Time:</span> |
|
|
<span class="font-bold">Under 30 minutes</span> |
|
|
</div> |
|
|
<div class="flex justify-between"> |
|
|
<span>Ticket Resolution Time:</span> |
|
|
<span class="font-bold">Within 24 hours</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="dashboard-card"> |
|
|
<h3 class="text-lg font-bold mb-4 flex items-center gap-2"> |
|
|
<i data-feather="file-text" class="text-red-400"></i> Support Tickets |
|
|
</h3> |
|
|
<div class="text-center py-4"> |
|
|
<i data-feather="inbox" class="mx-auto text-gray-400 text-4xl"></i> |
|
|
<p class="mt-2 text-gray-400">No active support tickets</p> |
|
|
</div> |
|
|
<button class="btn btn-outline mt-2">View Ticket History</button> |
|
|
<p class="text-xs text-center text-gray-400 mt-2">You can check the status of previous support requests</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="dashboard-card mt-8"> |
|
|
<h3 class="text-lg font-bold mb-4 flex items-center gap-2"> |
|
|
<i data-feather="users" class="text-green-400"></i> Community Support |
|
|
</h3> |
|
|
<p class="mb-4">Join our community of marketers to get help from experienced members and share insights:</p> |
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-4"> |
|
|
<div class="stat-card"> |
|
|
<h4 class="font-bold mb-2">Community Forum</h4> |
|
|
<p class="text-sm mb-3">Get answers from other marketers in our community forum</p> |
|
|
<a href="#" class="btn btn-outline">Visit Forum</a> |
|
|
</div> |
|
|
|
|
|
<div class="stat-card"> |
|
|
<h4 class="font-bold mb-2">Knowledge Base</h4> |
|
|
<p class="text-sm mb-3">Browse our comprehensive knowledge base articles</p> |
|
|
<a href="#" class="btn btn-outline">Browse Articles</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</main> |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
feather.replace(); |
|
|
|
|
|
document.addEventListener('DOMContentLoaded', function() { |
|
|
const toggleBtn = document.getElementById('menu-toggle'); |
|
|
const sidebar = document.getElementById('sidebar'); |
|
|
const content = document.getElementById('content'); |
|
|
|
|
|
toggleBtn.addEventListener('click', function() { |
|
|
sidebar.classList.toggle('active'); |
|
|
content.classList.toggle('active'); |
|
|
}); |
|
|
|
|
|
|
|
|
const faqItems = document.querySelectorAll('.faq-item'); |
|
|
faqItems.forEach(item => { |
|
|
item.addEventListener('click', function() { |
|
|
const answer = this.querySelector('.faq-answer'); |
|
|
const icon = this.querySelector('.faq-toggle'); |
|
|
|
|
|
if (answer.style.display === 'block') { |
|
|
answer.style.display = 'none'; |
|
|
icon.setAttribute('data-feather', 'chevron-down'); |
|
|
} else { |
|
|
answer.style.display = 'block'; |
|
|
icon.setAttribute('data-feather', 'chevron-up'); |
|
|
} |
|
|
feather.replace(); |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
const supportForm = document.getElementById('support-form'); |
|
|
if (supportForm) { |
|
|
supportForm.addEventListener('submit', function(e) { |
|
|
e.preventDefault(); |
|
|
alert('Your support request has been submitted successfully! Our team will contact you shortly.'); |
|
|
this.reset(); |
|
|
}); |
|
|
} |
|
|
}); |
|
|
</script> |
|
|
</body> |
|
|
</html> |
