mirror of
https://github.com/usmannasir/cyberpanel.git
synced 2025-11-12 16:26:12 +01:00
improve website home page
This commit is contained in:
usmannasir
@@ -7,42 +7,167 @@
|
||||
{% get_current_language as LANGUAGE_CODE %}
|
||||
<!-- Current language: {{ LANGUAGE_CODE }} -->
|
||||
|
||||
<div ng-controller="websitePages" class="container">
|
||||
<style>
|
||||
.cyberpanel-website-page {
|
||||
/* background: #f7fafd; */
|
||||
padding: 32px 0;
|
||||
font-family: 'Inter', 'Segoe UI', Arial, sans-serif;
|
||||
}
|
||||
.cyberpanel-website-page .cyber-card {
|
||||
background: #fff;
|
||||
border-radius: 24px;
|
||||
box-shadow: 0 2px 12px 0 rgba(40,60,90,0.06);
|
||||
margin-bottom: 32px;
|
||||
padding: 32px 28px 28px 28px;
|
||||
transition: box-shadow 0.2s;
|
||||
}
|
||||
.cyberpanel-website-page .cyber-card:hover {
|
||||
box-shadow: 0 4px 24px 0 rgba(40,60,90,0.10);
|
||||
}
|
||||
.cyberpanel-website-page .cyber-section-title {
|
||||
font-size: 1.25rem;
|
||||
font-weight: 700;
|
||||
margin-bottom: 24px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
color: #222b38;
|
||||
}
|
||||
.cyberpanel-website-page .cyber-btn {
|
||||
border-radius: 8px;
|
||||
border: 1.5px solid #e0e6ed;
|
||||
background: #fff;
|
||||
color: #2d3a4a;
|
||||
font-weight: 500;
|
||||
padding: 7px 22px;
|
||||
margin-left: 0;
|
||||
margin-right: 16px;
|
||||
transition: background 0.2s, color 0.2s;
|
||||
text-decoration: none;
|
||||
display: inline-block;
|
||||
font-size: 1.08rem;
|
||||
box-shadow: none;
|
||||
}
|
||||
.cyberpanel-website-page .cyber-btn:last-child { margin-right: 0; }
|
||||
.cyberpanel-website-page .cyber-btn.blue { background: #f6faff; color: #2563eb; border-color: #b6d4fe; }
|
||||
.cyberpanel-website-page .cyber-btn.orange { background: #fff8f1; color: #ff9800; border-color: #ffd59e; }
|
||||
.cyberpanel-website-page .cyber-btn.green { background: #f3fdf7; color: #00b894; border-color: #a2f5d3; }
|
||||
.cyberpanel-website-page .cyber-btn.purple { background: #faf6ff; color: #8e44ad; border-color: #d1b3ff; }
|
||||
.cyberpanel-website-page .cyber-btn:hover { background: #f0f4f8; color: #1a2233; }
|
||||
.cyberpanel-website-page .cyber-table th, .cyberpanel-website-page .cyber-table td {
|
||||
padding: 12px 18px;
|
||||
border-bottom: 1px solid #f0f2f5;
|
||||
font-size: 1.07rem;
|
||||
}
|
||||
.cyberpanel-website-page .cyber-table th {
|
||||
color: #6b7c93;
|
||||
font-weight: 700;
|
||||
background: #f6faff;
|
||||
border-top: none;
|
||||
}
|
||||
.cyberpanel-website-page .cyber-table tr:last-child td {
|
||||
border-bottom: none;
|
||||
}
|
||||
.cyberpanel-website-page .cyber-progress {
|
||||
background: #eaf0fa;
|
||||
border-radius: 8px;
|
||||
height: 18px;
|
||||
width: 100%;
|
||||
margin-bottom: 18px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.cyberpanel-website-page .cyber-progress-bar {
|
||||
background: linear-gradient(90deg, #2563eb 0%, #60a5fa 100%);
|
||||
height: 100%;
|
||||
border-radius: 8px;
|
||||
color: #fff;
|
||||
font-size: 0.98rem;
|
||||
font-weight: 600;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
padding-right: 10px;
|
||||
transition: width 0.4s;
|
||||
}
|
||||
.cyberpanel-website-page .cyber-resource-table {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.cyberpanel-website-page .cyber-ssl-box {
|
||||
background: #eaffea;
|
||||
color: #2d3a4a;
|
||||
border-radius: 10px;
|
||||
padding: 18px 18px 10px 18px;
|
||||
margin-bottom: 18px;
|
||||
font-size: 1.05rem;
|
||||
font-weight: 500;
|
||||
border: 1px solid #c6f7d0;
|
||||
}
|
||||
.cyberpanel-website-page .cyber-resource-row {
|
||||
display: flex;
|
||||
gap: 32px;
|
||||
align-items: stretch;
|
||||
}
|
||||
.cyberpanel-website-page .cyber-resource-col {
|
||||
flex: 1;
|
||||
min-width: 320px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
.cyberpanel-website-page .cyber-resource-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
@media (max-width: 900px) {
|
||||
.cyberpanel-website-page .cyber-resource-row { flex-direction: column; gap: 0; }
|
||||
.cyberpanel-website-page .cyber-resource-col { margin-bottom: 24px; }
|
||||
}
|
||||
</style>
|
||||
|
||||
<div id="page-title">
|
||||
<h2><span id="domainNamePage">{{ domain }}</span> - <a target="_blank" href="{$ previewUrl $}"
|
||||
style="height: 23px;line-height: 21px;"
|
||||
class="btn btn-border btn-alt border-red btn-link font-red"
|
||||
title=""><span>{% trans "Preview" %}</span></a></h2>
|
||||
<p>{% trans "All functions related to a particular site." %}</p>
|
||||
<div class="cyberpanel-website-page" ng-controller="websitePages">
|
||||
|
||||
<div id="page-title" style="margin-bottom: 32px;">
|
||||
<h2 style="font-size:2.1rem;font-weight:700;color:#222b38;display:flex;align-items:center;gap:18px;">
|
||||
<span id="domainNamePage">{{ domain }}</span>
|
||||
<a target="_blank" href="{$ previewUrl $}"
|
||||
class="cyber-btn blue"
|
||||
title=""><span>{% trans "PREVIEW" %}</span></a>
|
||||
</h2>
|
||||
<p style="color:#6b7c93;font-size:1.13rem;margin-top:2px;">{% trans "All functions related to a particular site." %}</p>
|
||||
</div>
|
||||
|
||||
{% if not error %}
|
||||
|
||||
<div style="display:flex;justify-content:flex-end;gap:18px;margin-bottom:18px;">
|
||||
<a class="cyber-btn orange" href="/websites/{{ domain }}/manageGIT" title="Manage Git">
|
||||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" style="vertical-align:middle;margin-right:7px;"><circle cx="10" cy="10" r="9" stroke="#ff9800" stroke-width="2"/><path d="M7 13L13 7M13 13V7H7" stroke="#ff9800" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
{% trans "Manage Git" %}
|
||||
</a>
|
||||
<a class="cyber-btn blue" href="/websites/{{ domain }}/setupStaging" title="">
|
||||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" style="vertical-align:middle;margin-right:7px;"><rect x="3" y="3" width="14" height="14" rx="3" stroke="#2563eb" stroke-width="2"/><path d="M7 7H13V13" stroke="#2563eb" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
{% trans "Clone/Staging" %}
|
||||
</a>
|
||||
<a class="cyber-btn green" href="/websites/{{ domain }}/sshAccess" title="">
|
||||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" style="vertical-align:middle;margin-right:7px;"><rect x="3" y="7" width="14" height="10" rx="2" stroke="#00b894" stroke-width="2"/><path d="M7 11V9C7 7.89543 7.89543 7 9 7H11C12.1046 7 13 7.89543 13 9V11" stroke="#00b894" stroke-width="2"/></svg>
|
||||
{% trans "Set up SSH/SFTP Access" %}
|
||||
</a>
|
||||
<a class="cyber-btn purple" href="https://go.cyberpanel.net/StessTest" title="">
|
||||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" style="vertical-align:middle;margin-right:7px;"><circle cx="10" cy="10" r="8" stroke="#8e44ad" stroke-width="2"/><path d="M10 10V5" stroke="#8e44ad" stroke-width="2" stroke-linecap="round"/><path d="M10 10L13 13" stroke="#8e44ad" stroke-width="2" stroke-linecap="round"/></svg>
|
||||
{% trans "Stress Test" %}
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="example-box-wrapper">
|
||||
|
||||
<div class="panel panel-body">
|
||||
|
||||
<h3 class="content-box-header">
|
||||
{% trans "Resource Usage" %} <img ng-hide="domainLoading" src="/static/images/loading.gif">
|
||||
|
||||
<a style="float: right; margin-left: 2%" class="btn btn-border btn-alt border-orange btn-link font-orange" href="/websites/{{ domain }}/manageGIT" title="Manage Git"><span>{% trans "Manage Git" %}</span></a>
|
||||
|
||||
<a style="float: right; margin-left: 2%"
|
||||
class="btn btn-border btn-alt border-azure btn-link font-azure"
|
||||
href="/websites/{{ domain }}/setupStaging" title=""><span>{% trans "Clone/Staging" %}</span></a>
|
||||
<a style="float: right; margin-left: 2%" class="btn btn-border btn-alt border-blue-alt btn-link font-blue-alt"
|
||||
href="/websites/{{ domain }}/sshAccess" title=""><span>{% trans "Set up SSH/SFTP Access" %}</span></a>
|
||||
<a style="float: right" class="btn btn-border btn-alt border-black btn-link font-black"
|
||||
href="https://go.cyberpanel.net/StessTest" title=""><span>{% trans "Stress Test" %}</span></a>
|
||||
</h3>
|
||||
|
||||
<div class="content-box-wrapper">
|
||||
<div class="row">
|
||||
|
||||
<div class="col-md-6">
|
||||
<table class="table">
|
||||
<div class="cyber-card">
|
||||
<div class="cyber-section-title" style="margin-bottom:28px;">
|
||||
<span style="display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border:1.5px solid #dbeafe;border-radius:8px;margin-right:12px;background:#f6faff;">
|
||||
<svg width="26" height="26" viewBox="0 0 26 26" fill="none"><rect x="3" y="6" width="20" height="14" rx="3" stroke="#222b38" stroke-width="2"/><rect x="7" y="10" width="12" height="2" rx="1" fill="#b6d4fe"/><rect x="7" y="14" width="7" height="2" rx="1" fill="#b6d4fe"/></svg>
|
||||
</span>
|
||||
<span>{% trans "Resource Usage" %}</span>
|
||||
</div>
|
||||
<div class="cyber-resource-row">
|
||||
<div class="cyber-resource-col">
|
||||
<table class="cyber-table cyber-resource-table" style="width:100%;border-radius:10px;overflow:hidden;">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>{% trans "Resource" %}</th>
|
||||
@@ -52,68 +177,50 @@
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="row-title">{% trans "FTP" %}</td>
|
||||
<td><span class="text-success h4">{{ ftpUsed }}</span></td>
|
||||
<td><span class="text-success h4">{{ ftpTotal }}</span></td>
|
||||
<td>FTP</td>
|
||||
<td><span style="color:#00b894;font-weight:600;">{{ ftpUsed }}</span></td>
|
||||
<td><span style="color:#00b894;font-weight:600;">{{ ftpTotal }}</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="row-title">{% trans "Databases" %}</td>
|
||||
<td><span class="text-success h4">{{ databasesUsed }}</span></td>
|
||||
<td><span class="text-success h4">{{ databasesTotal }}</span></td>
|
||||
<td>Databases</td>
|
||||
<td><span style="color:#00b894;font-weight:600;">{{ databasesUsed }}</span></td>
|
||||
<td><span style="color:#00b894;font-weight:600;">{{ databasesTotal }}</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="row-title">{% trans "Disk Usage" %}</td>
|
||||
<td><span class="text-success h4">{{ diskInMB }} (MB)</span></td>
|
||||
<td><span class="text-success h4">{{ diskInMBTotal }} (MB)</span></td>
|
||||
<td>Disk Usage</td>
|
||||
<td><span style="color:#00b894;font-weight:600;">{{ diskInMB }} (MB)</span></td>
|
||||
<td><span style="color:#00b894;font-weight:600;">{{ diskInMBTotal }} (MB)</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="row-title">{% trans "Bandwidth Usage" %}</td>
|
||||
<td><span class="text-success h4">{{ bwInMB }} (MB)</span></td>
|
||||
<td><span class="text-success h4">{{ bwInMBTotal }} (MB)</span></td>
|
||||
<td>Bandwidth Usage</td>
|
||||
<td><span style="color:#00b894;font-weight:600;">{{ bwInMB }} (MB)</span></td>
|
||||
<td><span style="color:#00b894;font-weight:600;">{{ bwInMBTotal }} (MB)</span></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div class="col-md-6">
|
||||
<div style="margin-top: 4%" class="content-box mt-5 mx-10">
|
||||
<div class="panel-body">
|
||||
<div class="cyber-resource-col" style="max-width:520px;">
|
||||
{% if viewSSL == 1 %}
|
||||
<div style="margin-top: 2%" class="alert alert-success">
|
||||
<div class="alert-content">
|
||||
<h4 class="alert-title">{{ authority }}</h4>
|
||||
<p>Your SSL will expire in {{ days }} days.</p>
|
||||
</div>
|
||||
<div class="cyber-ssl-box">
|
||||
<span style="font-weight:700;text-transform:uppercase;">{{ authority }}</span><br>
|
||||
Your SSL will expire in {{ days }} days.
|
||||
</div>
|
||||
{% endif %}
|
||||
<div class="example-box-wrapper">
|
||||
<h3 class="title-hero">
|
||||
{% trans "Disk Usage" %}
|
||||
</h3>
|
||||
<div class="progressbar" data-value="{{ diskUsage }}">
|
||||
<div class="progressbar-value bg-primary">
|
||||
<div class="progress-overlay"></div>
|
||||
<div class="progress-label">{{ diskUsage }}%</div>
|
||||
<div style="margin-bottom:10px;">
|
||||
<span style="color:#2563eb;font-weight:600;">Disk Usage</span>
|
||||
<div class="cyber-progress">
|
||||
<div class="cyber-progress-bar" style="width: {{ diskUsage }}%;min-width:40px;">{{ diskUsage }}%</div>
|
||||
</div>
|
||||
</div>
|
||||
<h3 class="title-hero">
|
||||
{% trans "Bandwidth Usage" %}
|
||||
</h3>
|
||||
<div class="progressbar" data-value="{{ bwUsage }}">
|
||||
<div class="progressbar-value bg-primary">
|
||||
<div class="progress-overlay"></div>
|
||||
<div class="progress-label">{{ bwUsage }}%</div>
|
||||
<div>
|
||||
<span style="color:#2563eb;font-weight:600;">Bandwidth Usage</span>
|
||||
<div class="cyber-progress">
|
||||
<div class="cyber-progress-bar" style="width: {{ bwUsage }}%;min-width:40px;">{{ bwUsage }}%</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="example-box-wrapper my-10">
|
||||
<div class="panel panel-body">
|
||||
@@ -520,7 +627,6 @@
|
||||
|
||||
<!---------- HTML For Listing domains --------------->
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user