|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>DashX - Profile</title> |
|
|
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet"> |
|
|
<link href="https://cdnjs.cloudflare.com/ajax/libs/sweetalert2/11.10.8/sweetalert2.min.css" rel="stylesheet"> |
|
|
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.0/css/bootstrap.min.css" rel="stylesheet"> |
|
|
<link href="styles.css" rel="stylesheet"> |
|
|
<style> |
|
|
.navbar { |
|
|
background: rgba(44, 62, 80, 0.95) !important; |
|
|
backdrop-filter: blur(10px); |
|
|
border-bottom: 1px solid rgba(255, 255, 255, 0.1); |
|
|
box-shadow: 0 2px 20px rgba(0, 0, 0, 0.2); |
|
|
} |
|
|
|
|
|
.navbar-brand { |
|
|
font-size: 1.5rem; |
|
|
font-weight: 700; |
|
|
color: #fff !important; |
|
|
} |
|
|
|
|
|
.navbar-brand i { |
|
|
color: #e74c3c; |
|
|
font-size: 1.8rem; |
|
|
margin-right: 0.5rem; |
|
|
} |
|
|
|
|
|
.nav-link { |
|
|
color: #ecf0f1 !important; |
|
|
font-weight: 500; |
|
|
transition: all 0.3s ease; |
|
|
padding: 0.5rem 1rem !important; |
|
|
border-radius: 6px; |
|
|
margin: 0 0.25rem; |
|
|
} |
|
|
|
|
|
.nav-link:hover { |
|
|
background: rgba(255, 255, 255, 0.1); |
|
|
transform: translateY(-1px); |
|
|
} |
|
|
|
|
|
.nav-link.text-danger { |
|
|
color: #e74c3c !important; |
|
|
} |
|
|
|
|
|
.nav-link.text-danger:hover { |
|
|
background: rgba(231, 76, 60, 0.1); |
|
|
color: #ff6b6b !important; |
|
|
} |
|
|
|
|
|
</style> |
|
|
</head> |
|
|
<body> |
|
|
<nav class="navbar navbar-expand-lg navbar-dark"> |
|
|
<div class="container"> |
|
|
<a class="navbar-brand" href="/"> |
|
|
<i class="fas fa-bolt"></i> DashX |
|
|
</a> |
|
|
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"> |
|
|
<span class="navbar-toggler-icon"></span> |
|
|
</button> |
|
|
<div class="collapse navbar-collapse" id="navbarNav"> |
|
|
<ul class="navbar-nav ms-auto"> |
|
|
<li class="nav-item"> |
|
|
<a class="nav-link" href="/dashboard"> |
|
|
<i class="fas fa-chart-line"></i> Dashboard |
|
|
</a> |
|
|
</li> |
|
|
<li class="nav-item"> |
|
|
<a class="nav-link text-danger" href="#" onclick="logout()"> |
|
|
<i class="fas fa-sign-out-alt"></i> Logout |
|
|
</a> |
|
|
</li> |
|
|
</ul> |
|
|
</div> |
|
|
</div> |
|
|
</nav> |
|
|
|
|
|
<div class="profile-container"> |
|
|
<div class="profile-header"> |
|
|
<div class="profile-avatar" id="profileAvatar"> |
|
|
<img id="profileImage" src="" alt="Profile" style="display: none; width: 100%; height: 100%; border-radius: 50%; object-fit: cover;"> |
|
|
<i class="fas fa-user-circle" id="defaultAvatar"></i> |
|
|
</div> |
|
|
<div class="profile-info"> |
|
|
<h2 id="profileUsername">Loading...</h2> |
|
|
<p id="profileEmail">Loading...</p> |
|
|
<span class="badge" id="profileRole">User</span> |
|
|
<span class="badge premium" id="premiumBadge" style="display: none;">Premium</span> |
|
|
<span class="badge" id="adminBadge" style="display: none; background: linear-gradient(135deg, #853030 0%, #292727 100%);">Admin</span> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="profile-content"> |
|
|
<div class="profile-section"> |
|
|
<h3><i class="fas fa-info-circle"></i> Account Information</h3> |
|
|
<div class="info-grid"> |
|
|
<div class="info-item"> |
|
|
<label>API Key</label> |
|
|
<div class="api-key-display"> |
|
|
<code id="profileApiKey">Loading...</code> |
|
|
<button onclick="copyApiKey()" class="btn btn-sm"> |
|
|
<i class="fas fa-copy"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
<div class="info-item"> |
|
|
<label>Total Requests</label> |
|
|
<span class="info-value" id="profileRequests">0</span> |
|
|
</div> |
|
|
<div class="info-item"> |
|
|
<label>Today's Requests</label> |
|
|
<span class="info-value" id="profileRequestsToday">0</span> |
|
|
</div> |
|
|
<div class="info-item"> |
|
|
<label>Daily Limit</label> |
|
|
<span class="info-value" id="profileLimit">30</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="profile-section"> |
|
|
<h3><i class="fas fa-chart-bar"></i> Usage Statistics</h3> |
|
|
<div class="usage-progress"> |
|
|
<div class="progress-item"> |
|
|
<label>Today's Usage</label> |
|
|
<div class="progress-bar"> |
|
|
<div class="progress-fill" id="usageProgress"></div> |
|
|
</div> |
|
|
<span class="progress-text" id="usageText">0 / 30</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="profile-section"> |
|
|
<h3><i class="fas fa-cog"></i> Account Settings</h3> |
|
|
<div class="settings-grid"> |
|
|
<div class="setting-item"> |
|
|
<label>Change Username</label> |
|
|
<div class="input-group"> |
|
|
<input type="text" id="newUsername" placeholder="Enter new username"> |
|
|
<button onclick="updateUsername()" class="btn btn-primary"> |
|
|
<i class="fas fa-save"></i> Update |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="setting-item"> |
|
|
<label>Profile Picture URL</label> |
|
|
<div class="input-group"> |
|
|
<input type="url" id="profileUrlInput" placeholder="Enter image URL"> |
|
|
<button onclick="updateProfileUrl()" class="btn btn-primary"> |
|
|
<i class="fas fa-image"></i> Update |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="setting-item" id="premiumFeatures" style="display: none;"> |
|
|
<label>Premium Features</label> |
|
|
<div class="premium-actions"> |
|
|
<button onclick="regenerateApiKey()" class="btn btn-warning"> |
|
|
<i class="fas fa-sync"></i> Regenerate API Key |
|
|
</button> |
|
|
</div> |
|
|
<label>Custom API Key</label> |
|
|
<div class="input-group"> |
|
|
<input type="text" id="customApiKeyInput" placeholder="Enter custom API key"> |
|
|
<button onclick="updateCustomApiKey()" class="btn btn-primary"> |
|
|
<i class="fas fa-key"></i> Update |
|
|
</button> |
|
|
</div> |
|
|
<small style="opacity: 0.7;">Premium feature - Set your own custom API key</small> |
|
|
|
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="profile-section"> |
|
|
<h3><i class="fas fa-history"></i> Recent Activity</h3> |
|
|
<div class="activity-list" id="recentActivity"> |
|
|
<div class="activity-item"> |
|
|
<i class="fas fa-spinner fa-spin"></i> |
|
|
<span>Loading activity...</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="profile-section danger-zone"> |
|
|
<h3><i class="fas fa-exclamation-triangle"></i> Danger Zone</h3> |
|
|
<div class="danger-actions"> |
|
|
<button onclick="deleteAccount()" class="btn btn-danger"> |
|
|
<i class="fas fa-trash"></i> Delete Account |
|
|
</button> |
|
|
<p class="warning-text">This action cannot be undone. All your data will be permanently deleted.</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert2/11.10.8/sweetalert2.min.js"></script> |
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.0/js/bootstrap.bundle.min.js"></script> |
|
|
<script src="profile.js"></script> |
|
|
</body> |
|
|
</html> |
