Hostinger-reg-GitHub step 4
📦 General
✨ The Prompt Phrase
To connect your GitHub repository to Hostinger, follow these steps: 1. Go to GitHub and navigate to your desired project 2. Click on the "Code" tab in the upper left 3. Click the green "Code" button on the project page 4. Select the SSH tab (not HTTPS) 5. Copy the SSH URL This SSH URL will be used to create a 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>Prompt-Manager - GitHub Repository</title>
<style>
/* ==================== CSS Variables ==================== */
:root {
--bg-primary: #0d1117;
--bg-secondary: #161b22;
--bg-tertiary: #21262d;
--bg-overlay: #1c2128;
--bg-warning: #3d2b00;
--border-primary: #30363d;
--border-secondary: #21262d;
--text-primary: #e6edf3;
--text-secondary: #7d8590;
--text-muted: #484f58;
--text-warning: #f0c341;
--accent-blue: #58a6ff;
--accent-green: #3fb950;
--accent-orange: #d29922;
--accent-red: #f85149;
--accent-purple: #bc8cff;
--accent-pink: #db61a2;
--accent-teal: #56d4dd;
--btn-bg: #21262d;
--btn-border: rgba(240, 246, 252, 0.1);
--btn-hover: #30363d;
--font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif;
--font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;
}
/* ==================== Reset & Base Styles ==================== */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: var(--font-sans);
background-color: var(--bg-primary);
color: var(--text-primary);
line-height: 1.5;
font-size: 14px;
}
a {
color: var(--accent-blue);
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
/* ==================== Top Navigation Bar ==================== */
.top-nav {
background-color: var(--bg-secondary);
border-bottom: 1px solid var(--border-primary);
padding: 16px 32px;
display: flex;
align-items: center;
gap: 16px;
}
.nav-logo {
width: 32px;
height: 32px;
background-color: var(--text-primary);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
}
.nav-breadcrumb {
display: flex;
align-items: center;
gap: 8px;
font-size: 14px;
}
.nav-breadcrumb-separator {
color: var(--text-secondary);
}
.repo-name {
font-weight: 600;
}
.repo-badge {
background-color: var(--bg-tertiary);
border: 1px solid var(--border-primary);
padding: 2px 7px;
border-radius: 12px;
font-size: 12px;
color: var(--text-secondary);
}
/* ==================== Sub Navigation ==================== */
.sub-nav {
background-color: var(--bg-secondary);
border-bottom: 1px solid var(--border-primary);
padding: 0 32px;
display: flex;
gap: 16px;
}
.sub-nav-item {
padding: 16px 8px;
color: var(--text-primary);
display: flex;
align-items: center;
gap: 8px;
cursor: pointer;
border-bottom: 2px solid transparent;
transition: border-color 0.2s ease;
}
.sub-nav-item:hover {
border-bottom-color: var(--border-primary);
}
.sub-nav-item.active {
border-bottom-color: var(--accent-orange);
}
.sub-nav-icon {
font-size: 16px;
}
/* ==================== Main Container ==================== */
.container {
max-width: 1280px;
margin: 0 auto;
padding: 24px 32px;
}
/* ==================== Repository Header ==================== */
.repo-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 24px;
}
.repo-title {
display: flex;
align-items: center;
gap: 12px;
}
.repo-icon {
width: 24px;
height: 24px;
background-color: var(--text-secondary);
border-radius: 4px;
}
.repo-title h1 {
font-size: 20px;
font-weight: 600;
}
.repo-actions {
display: flex;
gap: 8px;
}
.btn {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 5px 16px;
font-size: 12px;
font-weight: 500;
border-radius: 6px;
cursor: pointer;
transition: all 0.15s ease;
border: 1px solid var(--btn-border);
background-color: var(--btn-bg);
color: var(--text-primary);
font-family: var(--font-sans);
}
.btn:hover {
background-color: var(--btn-hover);
}
.btn-icon {
font-size: 14px;
}
.btn-count {
background-color: rgba(110, 118, 129, 0.4);
padding: 2px 6px;
border-radius: 12px;
font-size: 12px;
margin-left: 4px;
}
/* ==================== Repository Controls ==================== */
.repo-controls {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 16px;
padding-bottom: 16px;
border-bottom: 1px solid var(--border-primary);
}
.branch-selector {
display: flex;
gap: 12px;
}
.dropdown-btn {
display: flex;
align-items: center;
gap: 6px;
padding: 5px 12px;
background-color: var(--btn-bg);
border: 1px solid var(--border-primary);
border-radius: 6px;
color: var(--text-primary);
font-size: 12px;
cursor: pointer;
}
.dropdown-btn:hover {
background-color: var(--btn-hover);
}
.right-controls {
display: flex;
gap: 12px;
align-items: center;
}
.search-box {
position: relative;
}
.search-input {
background-color: var(--bg-tertiary);
border: 1px solid var(--border-primary);
border-radius: 6px;
padding: 5px 12px 5px 32px;
color: var(--text-primary);
font-size: 14px;
width: 300px;
}
.search-icon {
position: absolute;
left: 10px;
top: 50%;
transform: translateY(-50%);
color: var(--text-secondary);
}
.btn-primary {
background-color: var(--accent-green);
border-color: rgba(240, 246, 252, 0.1);
color: var(--text-primary);
}
.btn-primary:hover {
background-color: #2ea043;
}
/* ==================== Clone Dropdown ==================== */
.clone-dropdown {
position: relative;
}
.clone-panel {
position: absolute;
top: 100%;
right: 0;
margin-top: 8px;
background-color: var(--bg-overlay);
border: 1px solid var(--border-primary);
border-radius: 6px;
box-shadow: 0 8px 24px rgba(1, 4, 9, 0.5);
width: 360px;
z-index: 100;
}
.clone-tabs {
display: flex;
border-bottom: 1px solid var(--border-primary);
}
.clone-tab {
flex: 1;
padding: 12px;
text-align: center;
cursor: pointer;
color: var(--text-secondary);
border-bottom: 2px solid transparent;
font-size: 14px;
}
.clone-tab:hover {
color: var(--text-primary);
}
.clone-tab.active {
color: var(--text-primary);
border-bottom-color: var(--accent-orange);
}
.clone-content {
padding: 16px;
}
.warning-box {
background-color: var(--bg-warning);
border: 1px solid var(--accent-orange);
border-radius: 6px;
padding: 12px;
margin-bottom: 16px;
font-size: 12px;
color: var(--text-warning);
line-height: 1.6;
}
.clone-url {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 12px;
}
.clone-url-input {
flex: 1;
background-color: var(--bg-tertiary);
border: 1px solid var(--border-primary);
border-radius: 6px;
padding: 8px 12px;
color: var(--text-primary);
font-family: var(--font-mono);
font-size: 12px;
}
.clone-url-copy {
background-color: var(--btn-bg);
border: 1px solid var(--border-primary);
border-radius: 6px;
padding: 8px 12px;
cursor: pointer;
color: var(--text-secondary);
}
.clone-url-copy:hover {
background-color: var(--btn-hover);
color: var(--text-primary);
}
.clone-helper {
font-size: 12px;
color: var(--text-secondary);
margin-bottom: 12px;
}
.clone-options {
display: flex;
flex-direction: column;
gap: 8px;
}
.clone-option {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 12px;
background-color: var(--bg-tertiary);
border: 1px solid var(--border-primary);
border-radius: 6px;
cursor: pointer;
font-size: 14px;
}
.clone-option:hover {
background-color: var(--btn-hover);
}
/* ==================== File List ==================== */
.file-list {
background-color: var(--bg-secondary);
border: 1px solid var(--border-primary);
border-radius: 6px;
overflow: hidden;
}
.file-list-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 16px;
border-bottom: 1px solid var(--border-primary);
background-color: var(--bg-tertiary);
}
.commit-info {
display: flex;
align-items: center;
gap: 12px;
}
.commit-avatar {
width: 20px;
height: 20px;
background-color: var(--text-secondary);
border-radius: 50%;
}
.commit-message {
font-size: 14px;
color: var(--text-primary);
}
.commit-meta {
font-size: 12px;
color: var(--text-secondary);
}
.file-item {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 16px;
border-bottom: 1px solid var(--border-primary);
transition: background-color 0.15s ease;
}
.file-item:hover {
background-color: var(--bg-tertiary);
}
.file-item:last-child {
border-bottom: none;
}
.file-info {
display: flex;
align-items: center;
gap: 12px;
flex: 1;
}
.file-icon {
color: var(--text-secondary);
font-size: 16px;
width: 16px;
}
.file-name {
color: var(--accent-blue);
font-size: 14px;
}
.file-description {
color: var(--text-secondary);
font-size: 12px;
margin-left: auto;
margin-right: 16px;
}
.file-time {
color: var(--text-secondary);
font-size: 12px;
white-space: nowrap;
}
/* ==================== Sidebar ==================== */
.layout {
display: grid;
grid-template-columns: 1fr 300px;
gap: 24px;
margin-top: 24px;
}
.sidebar {
background-color: var(--bg-secondary);
border: 1px solid var(--border-primary);
border-radius: 6px;
padding: 16px;
}
.sidebar-section {
margin-bottom: 24px;
}
.sidebar-section:last-child {
margin-bottom: 0;
}
.sidebar-title {
font-size: 16px;
font-weight: 600;
margin-bottom: 12px;
}
.sidebar-text {
font-size: 12px;
color: var(--text-secondary);
line-height: 1.6;
}
.sidebar-link {
display: flex;
align-items: center;
gap: 8px;
padding: 6px 0;
font-size: 14px;
color: var(--text-primary);
}
.sidebar-link:hover {
color: var(--accent-blue);
}
.sidebar-stat {
display: flex;
align-items: center;
gap: 6px;
font-size: 12px;
color: var(--text-secondary);
margin-bottom: 8px;
}
.sidebar-button {
width: 100%;
padding: 8px 12px;
background-color: var(--btn-bg);
border: 1px solid var(--border-primary);
border-radius: 6px;
color: var(--accent-blue);
font-size: 12px;
font-weight: 500;
cursor: pointer;
margin-bottom: 8px;
}
.sidebar-button:hover {
background-color: var(--btn-hover);
}
/* ==================== Language Bar ==================== */
.language-bar {
display: flex;
height: 8px;
border-radius: 4px;
overflow: hidden;
margin-bottom: 12px;
}
.language-segment {
height: 100%;
}
.lang-php {
background-color: #4f5d95;
}
.lang-js {
background-color: #f1e05a;
}
.lang-html {
background-color: #e34c26;
}
.lang-css {
background-color: #563d7c;
}
.language-list {
display: flex;
flex-direction: column;
gap: 8px;
}
.language-item {
display: flex;
align-items: center;
justify-content: space-between;
font-size: 12px;
}
.language-name {
display: flex;
align-items: center;
gap: 8px;
}
.language-dot {
width: 12px;
height: 12px;
border-radius: 50%;
}
.language-percent {
color: var(--text-secondary);
}
/* ==================== Responsive Design ==================== */
@media (max-width: 1024px) {
.layout {
grid-template-columns: 1fr;
}
.sidebar {
order: -1;
}
}
@media (max-width: 768px) {
.container {
padding: 16px;
}
.top-nav,
.sub-nav {
padding: 12px 16px;
}
.search-input {
width: 200px;
}
.clone-panel {
width: 320px;
}
}
</style>
</head>
<body>
<!-- ==================== Top Navigation Bar ==================== -->
<nav class="top-nav">
<div class="nav-logo">☰</div>
<div class="nav-breadcrumb">
<span>victorystreamlines</span>
<span class="nav-breadcrumb-separator">/</span>
<span class="repo-name">Prompt-Manager</span>
<span class="repo-badge">🔒 Private</span>
</div>
</nav>
<!-- ==================== Sub Navigation ==================== -->
<nav class="sub-nav">
<div class="sub-nav-item active">
<span class="sub-nav-icon">📄</span>
<span>Code</span>
</div>
<div class="sub-nav-item">
<span class="sub-nav-icon">⚠️</span>
<span>Issues</span>
</div>
<div class="sub-nav-item">
<span class="sub-nav-icon">🔀</span>
<span>Pull requests</span>
</div>
<div class="sub-nav-item">
<span class="sub-nav-icon">▶️</span>
<span>Actions</span>
</div>
<div class="sub-nav-item">
<span class="sub-nav-icon">📊</span>
<span>Projects</span>
</div>
<div class="sub-nav-item">
<span class="sub-nav-icon">📖</span>
<span>Wiki</span>
</div>
<div class="sub-nav-item">
<span class="sub-nav-icon">🔒</span>
<span>Security</span>
</div>
<div class="sub-nav-item">
<span class="sub-nav-icon">📈</span>
<span>Insights</span>
</div>
<div class="sub-nav-item">
<span class="sub-nav-icon">⚙️</span>
<span>Settings</span>
</div>
</nav>
<!-- ==================== Main Container ==================== -->
<div class="container">
<!-- Repository Header -->
<div class="repo-header">
<div class="repo-title">
<div class="repo-icon"></div>
<h1>Prompt-Manager</h1>
<span class="repo-badge">Private</span>
</div>
<div class="repo-actions">
<button class="btn">
<span class="btn-icon">👁️</span>
Watch
<span class="btn-count">0</span>
</button>
<button class="btn">
<span class="btn-icon">🔱</span>
Fork
<span class="btn-count">0</span>
</button>
<button class="btn">
<span class="btn-icon">⭐</span>
Star
<span class="btn-count">0</span>
</button>
</div>
</div>
<!-- Repository Controls -->
<div class="repo-controls">
<div class="branch-selector">
<button class="dropdown-btn">
<span>🌿</span>
<span>main</span>
<span>▼</span>
</button>
<button class="dropdown-btn">
<span>🌿</span>
<span>1 Branch</span>
<span>▼</span>
</button>
<button class="dropdown-btn">
<span>🏷️</span>
<span>0 Tags</span>
<span>▼</span>
</button>
</div>
<div class="right-controls">
<div class="search-box">
<span class="search-icon">🔍</span>
<input type="text" class="search-input" placeholder="Go to file">
</div>
<button class="btn">Add file ▼</button>
<div class="clone-dropdown">
<button class="btn btn-primary">
<span><></span>
Code ▼
</button>
<!-- Clone Panel (Hidden by default) -->
<div class="clone-panel" style="display: none;">
<div class="clone-tabs">
<div class="clone-tab">Local</div>
<div class="clone-tab active">Codespaces</div>
</div>
<div class="clone-content">
<div class="clone-tabs" style="border-bottom: none; margin-bottom: 16px;">
<div class="clone-tab active">HTTPS</div>
<div class="clone-tab">SSH</div>
<div class="clone-tab">GitHub CLI</div>
</div>
<div class="warning-box">
You don't have any public SSH keys in your GitHub account. You can <a href="#">add a new public key</a>, or try cloning this repository via HTTPS.
</div>
<div class="clone-url">
<input type="text" class="clone-url-input" value="git@github.com:victorystreamlines/Prompt-Manager" readonly>
<button class="clone-url-copy">📋</button>
</div>
<div class="clone-helper">Use a password-protected SSH key.</div>
<div class="clone-options">
<div class="clone-option">
<span>💻</span>
<span>Open with GitHub Desktop</span>
</div>
<div class="clone-option">
<span>📦</span>
<span>Open with Visual Studio</span>
</div>
<div class="clone-option">
<span>⬇️</span>
<span>Download ZIP</span>
</div>
</div>
</div>
</div>
</div>
<button class="btn">About</button>
</div>
</div>
<!-- File List -->
<div class="file-list">
<div class="file-list-header">
<div class="commit-info">
<div class="commit-avatar"></div>
<span class="commit-message">NalfEssa and victorystreamlines Published your App</span>
</div>
<div class="commit-meta">📝</div>
</div>
<div class="file-item">
<div class="file-info">
<span class="file-icon">📁</span>
<a href="#" class="file-name">DatabasesStore</a>
</div>
<span class="file-description">Add appmaker.php</span>
<span class="file-time">3 weeks ago</span>
</div>
<div class="file-item">
<div class="file-info">
<span class="file-icon">📁</span>
<a href="#" class="file-name">config</a>
</div>
<span class="file-description">Implement initial pr</span>
<span class="file-time">3 weeks ago</span>
</div>
<div class="file-item">
<div class="file-info">
<span class="file-icon">📁</span>
<a href="#" class="file-name">public/assets</a>
</div>
<span class="file-description">Implement initial pr</span>
<span class="file-time">3 weeks ago</span>
</div>
<div class="file-item">
<div class="file-info">
<span class="file-icon">📁</span>
<a href="#" class="file-name">src</a>
</div>
<span class="file-description">Implement initial pr</span>
<span class="file-time">3 weeks ago</span>
</div>
<div class="file-item">
<div class="file-info">
<span class="file-icon">📁</span>
<a href="#" class="file-name">storage</a>
</div>
<span class="file-description">Implement initial pr</span>
<span class="file-time">3 weeks ago</span>
</div>
<div class="file-item">
<div class="file-info">
<span class="file-icon">📁</span>
<a href="#" class="file-name">templates</a>
</div>
<span class="file-description">Implement initial pr</span>
<span class="file-time">3 weeks ago</span>
</div>
<div class="file-item">
<div class="file-info">
<span class="file-icon">📁</span>
<a href="#" class="file-name">visual-prompter</a>
</div>
<span class="file-description">Implement project</span>
<span class="file-time">3 weeks ago</span>
</div>
<div class="file-item">
<div class="file-info">
<span class="file-icon">📄</span>
<a href="#" class="file-name">.gitignore</a>
</div>
<span class="file-description">Implement initial pr</span>
<span class="file-time">3 weeks ago</span>
</div>
<div class="file-item">
<div class="file-info">
<span class="file-icon">📄</span>
<a href="#" class="file-name">.replit</a>
</div>
<span class="file-description">Add project docum</span>
<span class="file-time">3 weeks ago</span>
</div>
<div class="file-item">
<div class="file-info">
<span class="file-icon">📄</span>
<a href="#" class="file-name">3d-platform.php</a>
</div>
<span class="file-description">Refactor 3D platform to transform it into a Visual Prompter...</span>
<span class="file-time">3 weeks ago</span>
</div>
<div class="file-item">
<div class="file-info">
<span class="file-icon">📄</span>
<a href="#" class="file-name">Microsoft_PHP_Prompt.txt</a>
</div>
<span class="file-description">Update tutorial prompt to emphasize the exclusive use of Vi...</span>
<span class="file-time">3 weeks ago</span>
</div>
<div class="file-item">
<div class="file-info">
<span class="file-icon">📄</span>
<a href="#" class="file-name">PHP-Dashboard.php</a>
</div>
<span class="file-description">Implement Hostinger connections management with CRUD...</span>
<span class="file-time">3 weeks ago</span>
</div>
</div>
<!-- Layout with Sidebar -->
<div class="layout">
<div class="main-area">
<!-- Main content area (empty in this view) -->
</div>
<!-- Sidebar -->
<aside class="sidebar">
<!-- About Section -->
<div class="sidebar-section">
<h3 class="sidebar-title">About</h3>
<p class="sidebar-text">No description, website, or topics provided.</p>
<div class="sidebar-link">
<span>📖</span>
<span>Readme</span>
</div>
<div class="sidebar-link">
<span>📊</span>
<span>Activity</span>
</div>
<div class="sidebar-stat">
<span>⭐</span>
<span>0 stars</span>
</div>
<div class="sidebar-stat">
<span>👁️</span>
<span>0 watching</span>
</div>
<div class="sidebar-stat">
<span>🔱</span>
<span>0 forks</span>
</div>
</div>
<!-- Releases Section -->
<div class="sidebar-section">
<h3 class="sidebar-title">Releases</h3>
<p class="sidebar-text">No releases published</p>
<button class="sidebar-button">Create a new release</button>
</div>
<!-- Packages Section -->
<div class="sidebar-section">
<h3 class="sidebar-title">Packages</h3>
<p class="sidebar-text">No packages published</p>
<a href="#" class="sidebar-text" style="color: var(--accent-blue);">Publish your first package</a>
</div>
<!-- Languages Section -->
<div class="sidebar-section">
<h3 class="sidebar-title">Languages</h3>
<div class="language-bar">
<div class="language-segment lang-php" style="width: 51.8%;"></div>
<div class="language-segment lang-js" style="width: 9.4%;"></div>
<div class="language-segment lang-html" style="width: 5.8%;"></div>
<div class="language-segment lang-css" style="width: 3.0%;"></div>
</div>
<div class="language-list">
<div class="language-item">
<div class="language-name">
<span class="language-dot lang-php"></span>
<span>PHP</span>
</div>
<span class="language-percent">51.8%</span>
</div>
<div class="language-item">
<div class="language-name">
<span class="language-dot lang-js"></span>
<span>JavaScript</span>
</div>
<span class="language-percent">9.4%</span>
</div>
<div class="language-item">
<div class="language-name">
<span class="language-dot lang-html"></span>
<span>HTML</span>
</div>
<span class="language-percent">5.8%</span>
</div>
<div class="language-item">
<div class="language-name">
<span class="language-dot lang-css"></span>
<span>CSS</span>
</div>
<span class="language-percent">3.0%</span>
</div>
</div>
</div>
</aside>
</div>
</div>
<script>
// Toggle clone dropdown
document.querySelector('.clone-dropdown .btn-primary').addEventListener('click', function(e) {
e.stopPropagation();
const panel = document.querySelector('.clone-panel');
panel.style.display = panel.style.display === 'none' ? 'block' : 'none';
});
// Close dropdown when clicking outside
document.addEventListener('click', function(e) {
const dropdown = document.querySelector('.clone-dropdown');
const panel = document.querySelector('.clone-panel');
if (!dropdown.contains(e.target)) {
panel.style.display = 'none';
}
});
// Copy URL functionality
document.querySelector('.clone-url-copy').addEventListener('click', function() {
const input = document.querySelector('.clone-url-input');
input.select();
document.execCommand('copy');
this.textContent = '✅';
setTimeout(() => {
this.textContent = '📋';
}, 2000);
});
// Tab switching
document.querySelectorAll('.clone-tab').forEach(tab => {
tab.addEventListener('click', function() {
this.parentElement.querySelectorAll('.clone-tab').forEach(t => t.classList.remove('active'));
this.classList.add('active');
});
});
</script>
</body>
</html>
Live Preview