 Server : Apache/2 System : Linux server-15-235-50-60 5.15.0-164-generic #174-Ubuntu SMP Fri Nov 14 20:25:16 UTC 2025 x86_64 User : gositeme ( 1004) PHP Version : 8.2.29 Disable Function : exec,system,passthru,shell_exec,proc_close,proc_open,dl,popen,show_source,posix_kill,posix_mkfifo,posix_getpwuid,posix_setpgid,posix_setsid,posix_setuid,posix_setgid,posix_seteuid,posix_setegid,posix_uname Directory : /home/gositeme/domains/gocodeme.com/public_html/BACKUP/ |
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>MusicStudio Admin Dashboard</title>
<meta name="description" content="Admin dashboard for managing MusicStudio music creation platform">
<!-- Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
<!-- Icons -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
/* Reset & Base Styles */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
font-size: 62.5%;
}
body {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
line-height: 1.6;
color: #1a202c;
background: #f7fafc;
min-height: 100vh;
}
/* Layout */
.admin-layout {
display: flex;
min-height: 100vh;
}
/* Sidebar */
.sidebar {
width: 28rem;
background: #2d3748;
color: white;
padding: 2rem 0;
position: fixed;
height: 100vh;
overflow-y: auto;
}
.sidebar-header {
padding: 0 2rem 2rem;
border-bottom: 1px solid #4a5568;
margin-bottom: 2rem;
}
.sidebar-logo {
display: flex;
align-items: center;
gap: 1.2rem;
text-decoration: none;
color: white;
}
.sidebar-logo i {
font-size: 2.4rem;
color: #667eea;
}
.sidebar-logo span {
font-size: 2rem;
font-weight: 700;
}
.sidebar-nav {
list-style: none;
}
.sidebar-nav li {
margin-bottom: 0.5rem;
}
.sidebar-nav a {
display: flex;
align-items: center;
gap: 1.2rem;
padding: 1.2rem 2rem;
color: #a0aec0;
text-decoration: none;
transition: all 0.3s ease;
font-size: 1.4rem;
}
.sidebar-nav a:hover,
.sidebar-nav a.active {
background: #4a5568;
color: white;
}
.sidebar-nav a i {
width: 2rem;
text-align: center;
}
/* Main Content */
.main-content {
flex: 1;
margin-left: 28rem;
padding: 2rem;
}
.page-header {
background: white;
padding: 2rem;
border-radius: 12px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
margin-bottom: 2rem;
}
.page-title {
font-size: 2.8rem;
font-weight: 700;
color: #2d3748;
margin-bottom: 0.5rem;
}
.page-subtitle {
font-size: 1.6rem;
color: #718096;
}
/* Dashboard Grid */
.dashboard-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(25rem, 1fr));
gap: 2rem;
margin-bottom: 3rem;
}
.stat-card {
background: white;
padding: 2.5rem;
border-radius: 12px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
border-left: 4px solid #667eea;
}
.stat-card.success {
border-left-color: #48bb78;
}
.stat-card.warning {
border-left-color: #ed8936;
}
.stat-card.danger {
border-left-color: #f56565;
}
.stat-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 1.5rem;
}
.stat-title {
font-size: 1.4rem;
color: #718096;
font-weight: 500;
}
.stat-icon {
font-size: 2rem;
color: #667eea;
}
.stat-value {
font-size: 3.2rem;
font-weight: 700;
color: #2d3748;
margin-bottom: 0.5rem;
}
.stat-change {
font-size: 1.4rem;
color: #48bb78;
}
.stat-change.negative {
color: #f56565;
}
/* Content Sections */
.content-section {
background: white;
border-radius: 12px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
margin-bottom: 2rem;
}
.section-header {
padding: 2rem;
border-bottom: 1px solid #e2e8f0;
}
.section-title {
font-size: 2rem;
font-weight: 600;
color: #2d3748;
}
.section-content {
padding: 2rem;
}
/* Tables */
.table-container {
overflow-x: auto;
}
.admin-table {
width: 100%;
border-collapse: collapse;
}
.admin-table th,
.admin-table td {
padding: 1.2rem;
text-align: left;
border-bottom: 1px solid #e2e8f0;
}
.admin-table th {
background: #f7fafc;
font-weight: 600;
color: #4a5568;
font-size: 1.4rem;
}
.admin-table td {
font-size: 1.4rem;
color: #2d3748;
}
.admin-table tr:hover {
background: #f7fafc;
}
/* Status Badges */
.status-badge {
padding: 0.4rem 1.2rem;
border-radius: 20px;
font-size: 1.2rem;
font-weight: 500;
}
.status-active {
background: #c6f6d5;
color: #22543d;
}
.status-pending {
background: #fef5e7;
color: #744210;
}
.status-suspended {
background: #fed7d7;
color: #742a2a;
}
/* Buttons */
.btn {
display: inline-flex;
align-items: center;
gap: 0.8rem;
padding: 1rem 2rem;
border-radius: 8px;
font-size: 1.4rem;
font-weight: 500;
text-decoration: none;
transition: all 0.3s ease;
border: none;
cursor: pointer;
}
.btn-primary {
background: #667eea;
color: white;
}
.btn-primary:hover {
background: #5a67d8;
}
.btn-success {
background: #48bb78;
color: white;
}
.btn-success:hover {
background: #38a169;
}
.btn-warning {
background: #ed8936;
color: white;
}
.btn-warning:hover {
background: #dd6b20;
}
.btn-danger {
background: #f56565;
color: white;
}
.btn-danger:hover {
background: #e53e3e;
}
.btn-sm {
padding: 0.6rem 1.2rem;
font-size: 1.2rem;
}
/* Forms */
.form-group {
margin-bottom: 2rem;
}
.form-label {
display: block;
font-size: 1.4rem;
font-weight: 500;
color: #4a5568;
margin-bottom: 0.8rem;
}
.form-input {
width: 100%;
padding: 1.2rem;
border: 1px solid #e2e8f0;
border-radius: 8px;
font-size: 1.4rem;
transition: border-color 0.3s ease;
}
.form-input:focus {
outline: none;
border-color: #667eea;
box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}
.form-select {
width: 100%;
padding: 1.2rem;
border: 1px solid #e2e8f0;
border-radius: 8px;
font-size: 1.4rem;
background: white;
}
/* Grid Layouts */
.form-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(25rem, 1fr));
gap: 2rem;
}
/* Responsive */
@media (max-width: 1024px) {
.sidebar {
transform: translateX(-100%);
transition: transform 0.3s ease;
}
.sidebar.open {
transform: translateX(0);
}
.main-content {
margin-left: 0;
}
}
@media (max-width: 768px) {
html { font-size: 56.25%; }
.dashboard-grid {
grid-template-columns: 1fr;
}
.form-grid {
grid-template-columns: 1fr;
}
}
</style>
</head>
<body>
<div class="admin-layout">
<!-- Sidebar -->
<aside class="sidebar">
<div class="sidebar-header">
<a href="#" class="sidebar-logo">
<i class="fas fa-music"></i>
<span>MusicStudio</span>
</a>
</div>
<nav class="sidebar-nav">
<ul>
<li><a href="#dashboard" class="active"><i class="fas fa-tachometer-alt"></i> Dashboard</a></li>
<li><a href="#users"><i class="fas fa-users"></i> Users</a></li>
<li><a href="#songs"><i class="fas fa-music"></i> Songs Generated</a></li>
<li><a href="#pricing"><i class="fas fa-dollar-sign"></i> Pricing</a></li>
<li><a href="#analytics"><i class="fas fa-chart-bar"></i> Analytics</a></li>
<li><a href="#settings"><i class="fas fa-cog"></i> Settings</a></li>
<li><a href="#api"><i class="fas fa-code"></i> API Management</a></li>
<li><a href="musicstudio.html"><i class="fas fa-external-link-alt"></i> View Site</a></li>
</ul>
</nav>
</aside>
<!-- Main Content -->
<main class="main-content">
<!-- Dashboard Overview -->
<div id="dashboard">
<div class="page-header">
<h1 class="page-title">Admin Dashboard</h1>
<p class="page-subtitle">Manage your music creation platform and track performance</p>
</div>
<!-- Stats Cards -->
<div class="dashboard-grid">
<div class="stat-card">
<div class="stat-header">
<span class="stat-title">Total Users</span>
<i class="fas fa-users stat-icon"></i>
</div>
<div class="stat-value">1,247</div>
<div class="stat-change">+12% this month</div>
</div>
<div class="stat-card success">
<div class="stat-header">
<span class="stat-title">Songs Generated</span>
<i class="fas fa-music stat-icon"></i>
</div>
<div class="stat-value">8,934</div>
<div class="stat-change">+23% this month</div>
</div>
<div class="stat-card warning">
<div class="stat-header">
<span class="stat-title">Revenue</span>
<i class="fas fa-dollar-sign stat-icon"></i>
</div>
<div class="stat-value">$12,847</div>
<div class="stat-change">+18% this month</div>
</div>
<div class="stat-card danger">
<div class="stat-header">
<span class="stat-title">API Usage</span>
<i class="fas fa-server stat-icon"></i>
</div>
<div class="stat-value">67%</div>
<div class="stat-change">-5% this week</div>
</div>
</div>
<!-- Recent Activity -->
<div class="content-section">
<div class="section-header">
<h2 class="section-title">Recent Activity</h2>
</div>
<div class="section-content">
<div class="table-container">
<table class="admin-table">
<thead>
<tr>
<th>User</th>
<th>Action</th>
<th>Song Title</th>
<th>Plan</th>
<th>Date</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<tr>
<td>john.doe@email.com</td>
<td>Generated Song</td>
<td>"Summer Vibes"</td>
<td>Creator ($79)</td>
<td>2024-01-15 14:30</td>
<td><span class="status-badge status-active">Completed</span></td>
</tr>
<tr>
<td>sarah.wilson@email.com</td>
<td>Generated Lyrics</td>
<td>"City Lights"</td>
<td>Starter ($29)</td>
<td>2024-01-15 13:45</td>
<td><span class="status-badge status-active">Completed</span></td>
</tr>
<tr>
<td>mike.chen@email.com</td>
<td>Generated Video</td>
<td>"Ocean Waves"</td>
<td>Professional ($199)</td>
<td>2024-01-15 12:20</td>
<td><span class="status-badge status-pending">Processing</span></td>
</tr>
<tr>
<td>lisa.garcia@email.com</td>
<td>Vocal Removal</td>
<td>"Rock Anthem"</td>
<td>Creator ($79)</td>
<td>2024-01-15 11:15</td>
<td><span class="status-badge status-active">Completed</span></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<!-- Quick Actions -->
<div class="content-section">
<div class="section-header">
<h2 class="section-title">Quick Actions</h2>
</div>
<div class="section-content">
<div style="display: flex; gap: 1rem; flex-wrap: wrap;">
<a href="#users" class="btn btn-primary">
<i class="fas fa-user-plus"></i>
Add New User
</a>
<a href="#pricing" class="btn btn-success">
<i class="fas fa-edit"></i>
Update Pricing
</a>
<a href="#analytics" class="btn btn-warning">
<i class="fas fa-chart-line"></i>
View Analytics
</a>
<a href="#settings" class="btn btn-danger">
<i class="fas fa-cog"></i>
System Settings
</a>
</div>
</div>
</div>
</div>
<!-- Users Management -->
<div id="users" style="display: none;">
<div class="page-header">
<h1 class="page-title">User Management</h1>
<p class="page-subtitle">Manage user accounts, subscriptions, and permissions</p>
</div>
<div class="content-section">
<div class="section-header">
<h2 class="section-title">All Users</h2>
</div>
<div class="section-content">
<div class="table-container">
<table class="admin-table">
<thead>
<tr>
<th>Email</th>
<th>Name</th>
<th>Plan</th>
<th>Songs Used</th>
<th>Status</th>
<th>Joined</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td>john.doe@email.com</td>
<td>John Doe</td>
<td>Creator ($79)</td>
<td>67/100</td>
<td><span class="status-badge status-active">Active</span></td>
<td>2024-01-01</td>
<td>
<a href="#" class="btn btn-sm btn-primary">Edit</a>
<a href="#" class="btn btn-sm btn-warning">Suspend</a>
</td>
</tr>
<tr>
<td>sarah.wilson@email.com</td>
<td>Sarah Wilson</td>
<td>Starter ($29)</td>
<td>23/25</td>
<td><span class="status-badge status-active">Active</span></td>
<td>2024-01-05</td>
<td>
<a href="#" class="btn btn-sm btn-primary">Edit</a>
<a href="#" class="btn btn-sm btn-warning">Suspend</a>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<!-- Pricing Management -->
<div id="pricing" style="display: none;">
<div class="page-header">
<h1 class="page-title">Pricing Management</h1>
<p class="page-subtitle">Configure pricing plans and features</p>
</div>
<div class="content-section">
<div class="section-header">
<h2 class="section-title">Current Pricing Plans</h2>
</div>
<div class="section-content">
<div class="form-grid">
<div class="form-group">
<label class="form-label">Starter Plan Price</label>
<input type="number" class="form-input" value="29" placeholder="Enter price">
</div>
<div class="form-group">
<label class="form-label">Starter Songs Limit</label>
<input type="number" class="form-input" value="25" placeholder="Enter limit">
</div>
<div class="form-group">
<label class="form-label">Creator Plan Price</label>
<input type="number" class="form-input" value="79" placeholder="Enter price">
</div>
<div class="form-group">
<label class="form-label">Creator Songs Limit</label>
<input type="number" class="form-input" value="100" placeholder="Enter limit">
</div>
<div class="form-group">
<label class="form-label">Professional Plan Price</label>
<input type="number" class="form-input" value="199" placeholder="Enter price">
</div>
<div class="form-group">
<label class="form-label">Professional Songs Limit</label>
<input type="text" class="form-input" value="Unlimited" placeholder="Enter limit">
</div>
</div>
<button class="btn btn-primary">Update Pricing</button>
</div>
</div>
</div>
<!-- Analytics -->
<div id="analytics" style="display: none;">
<div class="page-header">
<h1 class="page-title">Analytics & Reports</h1>
<p class="page-subtitle">Track platform performance and user behavior</p>
</div>
<div class="dashboard-grid">
<div class="stat-card">
<div class="stat-header">
<span class="stat-title">Monthly Revenue</span>
<i class="fas fa-chart-line stat-icon"></i>
</div>
<div class="stat-value">$12,847</div>
<div class="stat-change">+18% vs last month</div>
</div>
<div class="stat-card success">
<div class="stat-header">
<span class="stat-title">Conversion Rate</span>
<i class="fas fa-percentage stat-icon"></i>
</div>
<div class="stat-value">3.2%</div>
<div class="stat-change">+0.5% vs last month</div>
</div>
<div class="stat-card warning">
<div class="stat-header">
<span class="stat-title">Avg. Songs per User</span>
<i class="fas fa-music stat-icon"></i>
</div>
<div class="stat-value">7.2</div>
<div class="stat-change">+1.1 vs last month</div>
</div>
<div class="stat-card danger">
<div class="stat-header">
<span class="stat-title">Churn Rate</span>
<i class="fas fa-user-times stat-icon"></i>
</div>
<div class="stat-value">2.1%</div>
<div class="stat-change negative">+0.3% vs last month</div>
</div>
</div>
</div>
</main>
</div>
<script>
// Simple navigation
document.querySelectorAll('.sidebar-nav a').forEach(link => {
link.addEventListener('click', function(e) {
e.preventDefault();
// Remove active class from all links
document.querySelectorAll('.sidebar-nav a').forEach(l => l.classList.remove('active'));
// Add active class to clicked link
this.classList.add('active');
// Hide all sections
document.querySelectorAll('main > div').forEach(div => div.style.display = 'none');
// Show target section
const targetId = this.getAttribute('href').substring(1);
const targetSection = document.getElementById(targetId);
if (targetSection) {
targetSection.style.display = 'block';
}
});
});
</script>
</body>
</html>