Hostinger-reg-GitHub step 5
📦 General
✨ The Prompt Phrase
Return to Hostinger and navigate to your application. Select your website's domain, then click on Advanced settings. On the page we accessed earlier, click Create Repository. Paste the SSH URL from the previous step into the first field, and enter "main" in the branch field below it. Then create the repository record in Hostinger.
💻 Code Preview
📦 All-in-One Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hostinger - Git Repository Management</title>
<style>
/* ==================== CSS Variables ==================== */
:root {
--primary-purple: #673de6;
--primary-purple-hover: #5631c7;
--danger-red: #dc3545;
--danger-red-hover: #c82333;
--success-green: #28a745;
--bg-body: #f5f5f5;
--bg-white: #ffffff;
--bg-sidebar: #2d2d2d;
--bg-input: #fafafa;
--text-primary: #1a1a1a;
--text-secondary: #6c757d;
--text-muted: #999999;
--text-white: #ffffff;
--border-color: #e0e0e0;
--border-light: #f0f0f0;
--shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
--shadow-md: 0 2px 8px rgba(0, 0, 0, 0.1);
--radius-sm: 4px;
--radius-md: 6px;
--font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
--font-mono: 'Courier New', Courier, monospace;
}
/* ==================== Reset & Base Styles ==================== */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: var(--font-sans);
background-color: var(--bg-body);
color: var(--text-primary);
line-height: 1.6;
font-size: 14px;
}
a {
color: var(--primary-purple);
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
/* ==================== Layout Container ==================== */
.container {
display: flex;
min-height: 100vh;
}
/* ==================== Top Header ==================== */
.top-header {
position: fixed;
top: 0;
left: 0;
right: 0;
height: 60px;
background-color: var(--bg-white);
border-bottom: 1px solid var(--border-color);
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 24px;
z-index: 100;
}
.logo {
display: flex;
align-items: center;
gap: 8px;
font-weight: 700;
font-size: 18px;
color: var(--text-primary);
}
.logo-icon {
width: 32px;
height: 32px;
background-color: var(--primary-purple);
border-radius: 4px;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-weight: bold;
}
.search-box {
position: relative;
width: 400px;
}
.search-input {
width: 100%;
padding: 8px 12px 8px 36px;
border: 1px solid var(--border-color);
border-radius: var(--radius-sm);
font-size: 14px;
background-color: var(--bg-input);
}
.search-input:focus {
outline: none;
border-color: var(--primary-purple);
}
.search-icon {
position: absolute;
left: 12px;
top: 50%;
transform: translateY(-50%);
color: var(--text-muted);
}
.search-shortcut {
position: absolute;
right: 12px;
top: 50%;
transform: translateY(-50%);
font-size: 12px;
color: var(--text-muted);
background-color: var(--bg-white);
padding: 2px 6px;
border-radius: 3px;
border: 1px solid var(--border-color);
}
/* ==================== Sidebar Navigation ==================== */
.sidebar {
position: fixed;
left: 0;
top: 60px;
width: 240px;
height: calc(100vh - 60px);
background-color: var(--bg-white);
border-right: 1px solid var(--border-color);
overflow-y: auto;
padding: 16px 0;
}
.sidebar-header {
padding: 12px 20px;
font-size: 12px;
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: 0.5px;
}
.sidebar-domain {
padding: 12px 20px;
display: flex;
align-items: center;
justify-content: space-between;
border-bottom: 1px solid var(--border-light);
margin-bottom: 8px;
}
.domain-text {
font-size: 14px;
color: var(--text-primary);
}
.domain-icon {
color: var(--text-muted);
}
.sidebar-search {
padding: 8px 20px;
margin-bottom: 8px;
}
.sidebar-search-input {
width: 100%;
padding: 6px 10px 6px 30px;
border: 1px solid var(--border-color);
border-radius: var(--radius-sm);
font-size: 13px;
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="%23999" stroke-width="2"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.35-4.35"/></svg>');
background-repeat: no-repeat;
background-position: 8px center;
background-size: 14px;
}
.nav-item {
display: flex;
align-items: center;
padding: 10px 20px;
color: var(--text-primary);
cursor: pointer;
transition: background-color 0.2s ease;
position: relative;
}
.nav-item:hover {
background-color: var(--bg-input);
}
.nav-item.active {
background-color: #f0e6ff;
color: var(--primary-purple);
font-weight: 500;
}
.nav-item.active::before {
content: '';
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 3px;
background-color: var(--primary-purple);
}
.nav-item-icon {
margin-right: 12px;
font-size: 16px;
width: 20px;
display: inline-flex;
align-items: center;
justify-content: center;
}
.nav-item-text {
flex: 1;
font-size: 14px;
}
.nav-item-chevron {
color: var(--text-muted);
font-size: 12px;
}
.nav-section {
margin-bottom: 16px;
}
/* ==================== Main Content Area ==================== */
.main-content {
margin-left: 240px;
margin-top: 60px;
flex: 1;
padding: 24px 32px;
max-width: calc(100% - 240px);
}
/* ==================== SSH Key Section ==================== */
.ssh-section {
background-color: var(--bg-white);
border: 1px solid var(--border-color);
border-radius: var(--radius-md);
padding: 24px;
margin-bottom: 24px;
box-shadow: var(--shadow-sm);
}
.ssh-textarea {
width: 100%;
min-height: 100px;
padding: 12px;
border: 1px solid var(--border-color);
border-radius: var(--radius-sm);
font-family: var(--font-mono);
font-size: 12px;
line-height: 1.6;
resize: vertical;
background-color: var(--bg-input);
margin-bottom: 16px;
word-break: break-all;
}
.button-group {
display: flex;
gap: 12px;
}
.btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 16px;
font-size: 14px;
font-weight: 500;
border-radius: var(--radius-sm);
cursor: pointer;
transition: all 0.2s ease;
border: 1px solid;
font-family: var(--font-sans);
}
.btn-outline {
background-color: var(--bg-white);
border-color: var(--border-color);
color: var(--text-primary);
}
.btn-outline:hover {
background-color: var(--bg-input);
}
.btn-danger {
background-color: var(--danger-red);
border-color: var(--danger-red);
color: var(--text-white);
}
.btn-danger:hover {
background-color: var(--danger-red-hover);
}
.btn-primary {
background-color: var(--primary-purple);
border-color: var(--primary-purple);
color: var(--text-white);
}
.btn-primary:hover {
background-color: var(--primary-purple-hover);
}
/* ==================== Create Repository Section ==================== */
.section-header {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 16px;
}
.section-icon {
font-size: 20px;
}
.section-title {
font-size: 18px;
font-weight: 600;
color: var(--text-primary);
}
.section-description {
color: var(--text-secondary);
font-size: 13px;
line-height: 1.6;
margin-bottom: 20px;
}
.form-group {
margin-bottom: 20px;
}
.form-label {
display: block;
font-size: 14px;
font-weight: 500;
color: var(--text-primary);
margin-bottom: 8px;
}
.form-input {
width: 100%;
padding: 10px 12px;
border: 1px solid var(--border-color);
border-radius: var(--radius-sm);
font-size: 14px;
color: var(--text-primary);
background-color: var(--bg-white);
transition: border-color 0.2s ease;
}
.form-input:focus {
outline: none;
border-color: var(--primary-purple);
box-shadow: 0 0 0 3px rgba(103, 61, 230, 0.1);
}
.form-hint {
font-size: 12px;
color: var(--text-muted);
margin-top: 6px;
line-height: 1.5;
}
/* ==================== Manage Repositories Table ==================== */
.table-container {
background-color: var(--bg-white);
border: 1px solid var(--border-color);
border-radius: var(--radius-md);
overflow: hidden;
box-shadow: var(--shadow-sm);
}
.table-header {
display: flex;
align-items: center;
gap: 12px;
padding: 16px 24px;
border-bottom: 1px solid var(--border-color);
background-color: var(--bg-input);
}
table {
width: 100%;
border-collapse: collapse;
}
thead {
background-color: var(--bg-input);
}
th {
padding: 12px 24px;
text-align: left;
font-size: 13px;
font-weight: 600;
color: var(--text-secondary);
border-bottom: 1px solid var(--border-color);
}
td {
padding: 16px 24px;
font-size: 14px;
color: var(--text-primary);
border-bottom: 1px solid var(--border-light);
}
tr:last-child td {
border-bottom: none;
}
tbody tr:hover {
background-color: var(--bg-input);
}
.repo-link {
color: var(--primary-purple);
font-family: var(--font-mono);
font-size: 13px;
}
.action-links {
display: flex;
flex-direction: column;
gap: 6px;
}
.action-link {
font-size: 13px;
color: var(--primary-purple);
}
.delete-btn {
background-color: var(--danger-red);
color: white;
border: none;
padding: 6px 12px;
border-radius: var(--radius-sm);
cursor: pointer;
font-size: 13px;
display: inline-flex;
align-items: center;
gap: 6px;
}
.delete-btn:hover {
background-color: var(--danger-red-hover);
}
/* ==================== Responsive Design ==================== */
@media (max-width: 1024px) {
.sidebar {
width: 200px;
}
.main-content {
margin-left: 200px;
max-width: calc(100% - 200px);
}
}
@media (max-width: 768px) {
.sidebar {
transform: translateX(-100%);
}
.main-content {
margin-left: 0;
max-width: 100%;
padding: 16px;
}
.search-box {
width: 250px;
}
table {
font-size: 12px;
}
th, td {
padding: 10px 12px;
}
}
</style>
</head>
<body>
<!-- ==================== Top Header ==================== -->
<header class="top-header">
<div class="logo">
<div class="logo-icon">H</div>
<span>HOSTINGER</span>
</div>
<div class="search-box">
<span class="search-icon">🔍</span>
<input type="text" class="search-input" placeholder="Search">
<span class="search-shortcut">Ctrl K</span>
</div>
</header>
<div class="container">
<!-- ==================== Sidebar Navigation ==================== -->
<aside class="sidebar">
<div class="sidebar-header">Website name</div>
<div class="sidebar-domain">
<span class="domain-text">@promptmanager.com</span>
<span class="domain-icon">▼</span>
</div>
<div class="sidebar-search">
<input type="text" class="sidebar-search-input" placeholder="Search">
</div>
<nav class="nav-section">
<div class="nav-item">
<span class="nav-item-icon">📊</span>
<span class="nav-item-text">Overview</span>
</div>
<div class="nav-item">
<span class="nav-item-icon">🖥️</span>
<span class="nav-item-text">Hosting Plan</span>
<span class="nav-item-chevron">›</span>
</div>
<div class="nav-item">
<span class="nav-item-icon">⚡</span>
<span class="nav-item-text">Performance</span>
<span class="nav-item-chevron">›</span>
</div>
<div class="nav-item">
<span class="nav-item-icon">📈</span>
<span class="nav-item-text">Analytics</span>
<span class="nav-item-chevron">›</span>
</div>
<div class="nav-item">
<span class="nav-item-icon">🔒</span>
<span class="nav-item-text">Security</span>
<span class="nav-item-chevron">›</span>
</div>
<div class="nav-item">
<span class="nav-item-icon">🌐</span>
<span class="nav-item-text">Domains</span>
<span class="nav-item-chevron">›</span>
</div>
<div class="nav-item">
<span class="nav-item-icon">📁</span>
<span class="nav-item-text">Website</span>
<span class="nav-item-chevron">›</span>
</div>
<div class="nav-item">
<span class="nav-item-icon">📄</span>
<span class="nav-item-text">Files</span>
<span class="nav-item-chevron">›</span>
</div>
<div class="nav-item">
<span class="nav-item-icon">💾</span>
<span class="nav-item-text">Databases</span>
<span class="nav-item-chevron">›</span>
</div>
<div class="nav-item active">
<span class="nav-item-icon">⚙️</span>
<span class="nav-item-text">Advanced</span>
<span class="nav-item-chevron">▼</span>
</div>
</nav>
<nav class="nav-section" style="padding-left: 20px;">
<div class="nav-item">
<span class="nav-item-text">DNS Zone Editor</span>
</div>
<div class="nav-item">
<span class="nav-item-text">PHP Configuration</span>
</div>
<div class="nav-item">
<span class="nav-item-text">Cron Jobs</span>
</div>
<div class="nav-item">
<span class="nav-item-text">SSH Access</span>
</div>
<div class="nav-item">
<span class="nav-item-text">PHP Info</span>
</div>
<div class="nav-item">
<span class="nav-item-text">Cache Manager</span>
</div>
<div class="nav-item">
<span class="nav-item-text">GIT</span>
</div>
<div class="nav-item">
<span class="nav-item-text">Password Protect Directories</span>
</div>
<div class="nav-item">
<span class="nav-item-text">IP Manager</span>
</div>
</nav>
</aside>
<!-- ==================== Main Content ==================== -->
<main class="main-content">
<!-- SSH Key Section -->
<section class="ssh-section">
<textarea class="ssh-textarea" readonly>+OJyQVnFmXK-KRMzHHmE4yVjpvmRl3DvusLBWB8qgdaKnKmRlwnPvCBdcAkbqmGFhgpB- lnGhGnmGnBJk.FGd6dMzMzwMjgWgBRBy.qRBjgy.vHjRn
+vsdpGDPv+QRkpzOuGHKqQJUKnSHkz+C96LnPPww7E52kNzKdCPPvuE.dMy+vSKuPxJRlzGnDRnPuPvRxPQzqgVBzJrOPw+kMgLzBBkdxOG+wlPTRd
OkpkHHVWCwUgzyb.KRDlz.JyGircxtre- u419999707@fr-int-web1788.main-hosting.eu</textarea>
<div class="button-group">
<button class="btn btn-outline">
<span>📋</span>
Copy
</button>
<button class="btn btn-danger">
<span>🗑️</span>
Remove SSH Key
</button>
</div>
</section>
<!-- Create Repository Section -->
<section class="ssh-section">
<div class="section-header">
<span class="section-icon">⚙️</span>
<h2 class="section-title">Create a New Repository</h2>
</div>
<p class="section-description">
Deploy application directly from public Git repository. Enter your public repository http URL, branch name and install path. Install path can be left empty, application will be deployed directly to public_html directory. Install path directory must not contain any files or folder, otherwise deployment will fail.
</p>
<form>
<div class="form-group">
<label class="form-label">Repository</label>
<input type="text" class="form-input" value="git@github.com:victorystreamlines/Prompt-Manager.git">
<p class="form-hint">Examples: For public repositories: https://github.com/WordPress/WordPress.git and for private repositories: git@github.com:WordPress/WordPress.git</p>
</div>
<div class="form-group">
<label class="form-label">Branch</label>
<input type="text" class="form-input" value="main">
<p class="form-hint">Usually this is the master branch</p>
</div>
<div class="form-group">
<label class="form-label">Directory (optional)</label>
<input type="text" class="form-input" placeholder="">
<p class="form-hint">Leave blank to deploy directly to public_html. Folder must be empty.</p>
</div>
<button type="submit" class="btn btn-primary">Create</button>
</form>
</section>
<!-- Manage Repositories Section -->
<section class="table-container">
<div class="table-header">
<span class="section-icon">⚙️</span>
<h2 class="section-title">Manage Repositories</h2>
</div>
<table>
<thead>
<tr>
<th>Repository ⇅</th>
<th>Branch ⇅</th>
<th>Install Path ⇅</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<a href="#" class="repo-link">git@github.com:victorystreamlines/Prompt-Manager.git</a>
</td>
<td>main</td>
<td>/</td>
<td>
<div class="action-links">
<a href="#" class="action-link">Deploy</a>
<a href="#" class="action-link">View latest build output</a>
<a href="#" class="action-link">Auto Deployment</a>
</div>
</td>
<td>
<button class="delete-btn">
<span>🗑️</span>
</button>
</td>
</tr>
</tbody>
</table>
</section>
</main>
</div>
<script>
// Copy SSH Key functionality
document.querySelector('.btn-outline').addEventListener('click', function() {
const textarea = document.querySelector('.ssh-textarea');
textarea.select();
document.execCommand('copy');
const btn = this;
const originalText = btn.innerHTML;
btn.innerHTML = '<span>✅</span> Copied!';
setTimeout(() => {
btn.innerHTML = originalText;
}, 2000);
});
// Remove SSH Key confirmation
document.querySelectorAll('.btn-danger').forEach(btn => {
btn.addEventListener('click', function(e) {
e.preventDefault();
if (confirm('Are you sure you want to remove this SSH key?')) {
alert('SSH key removed successfully!');
}
});
});
// Delete repository confirmation
document.querySelectorAll('.delete-btn').forEach(btn => {
btn.addEventListener('click', function() {
if (confirm('Are you sure you want to delete this repository?')) {
alert('Repository deleted successfully!');
}
});
});
// Form submission
document.querySelector('form').addEventListener('submit', function(e) {
e.preventDefault();
alert('Repository created successfully!');
});
// Navigation item click
document.querySelectorAll('.nav-item').forEach(item => {
item.addEventListener('click', function() {
document.querySelectorAll('.nav-item').forEach(i => i.classList.remove('active'));
this.classList.add('active');
});
});
</script>
</body>
</html>
Live Preview