Hostinger-reg-GitHub step 8 Final
📦 General
✨ The Prompt Phrase
Step 8 is the final step. Go back to Hostinger, navigate to the Advanced tab for your website, then select the Git subtab. Under the repository record you added, you'll find a Deploy button. Click it to deploy and import your website from GitHub into 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>Deploy Git Repository - Confirmation Dialog</title>
<style>
/* ==================== CSS Variables ==================== */
:root {
--primary-purple: #673de6;
--primary-purple-hover: #5631c7;
--danger-red: #dc3545;
--bg-overlay: rgba(0, 0, 0, 0.5);
--bg-white: #ffffff;
--bg-gray-light: #f8f9fa;
--bg-gray: #e9ecef;
--text-primary: #2d3436;
--text-secondary: #636e72;
--text-muted: #95a5a6;
--border-color: #dee2e6;
--link-color: #673de6;
--shadow-modal: 0 10px 40px rgba(0, 0, 0, 0.2);
--shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
--radius-sm: 4px;
--radius-md: 8px;
--radius-lg: 12px;
--font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}
/* ==================== Reset & Base Styles ==================== */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: var(--font-sans);
background-color: var(--bg-gray);
color: var(--text-primary);
line-height: 1.6;
font-size: 14px;
}
a {
color: var(--link-color);
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
/* ==================== Page Layout ==================== */
.page-container {
padding: 24px;
max-width: 1200px;
margin: 0 auto;
}
/* ==================== Modal Overlay ==================== */
.modal-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: var(--bg-overlay);
display: flex;
align-items: center;
justify-content: center;
z-index: 1000;
padding: 20px;
}
/* ==================== Modal Container ==================== */
.modal {
background-color: var(--bg-white);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-modal);
max-width: 480px;
width: 100%;
animation: modalSlideIn 0.3s ease-out;
}
@keyframes modalSlideIn {
from {
opacity: 0;
transform: translateY(-20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* ==================== Modal Header ==================== */
.modal-header {
padding: 24px 28px 16px;
}
.modal-title {
font-size: 20px;
font-weight: 600;
color: var(--text-primary);
margin: 0 0 12px 0;
}
.modal-description {
font-size: 14px;
color: var(--text-secondary);
line-height: 1.5;
}
/* ==================== Modal Footer ==================== */
.modal-footer {
padding: 20px 28px 24px;
display: flex;
justify-content: flex-end;
gap: 12px;
}
.btn {
padding: 10px 24px;
font-size: 14px;
font-weight: 500;
border-radius: var(--radius-sm);
cursor: pointer;
transition: all 0.2s ease;
border: none;
font-family: var(--font-sans);
}
.btn-cancel {
background-color: var(--bg-white);
color: var(--primary-purple);
border: 1px solid var(--border-color);
}
.btn-cancel:hover {
background-color: var(--bg-gray-light);
}
.btn-deploy {
background-color: var(--primary-purple);
color: white;
border: none;
}
.btn-deploy:hover {
background-color: var(--primary-purple-hover);
}
/* ==================== Background Content (Blurred) ==================== */
.background-content {
filter: blur(4px);
pointer-events: none;
}
.section-card {
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);
}
.section-header {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 16px;
}
.section-icon {
font-size: 20px;
color: var(--text-secondary);
}
.section-title {
font-size: 18px;
font-weight: 600;
color: var(--text-primary);
margin: 0;
}
.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);
}
.form-hint {
font-size: 12px;
color: var(--text-muted);
margin-top: 6px;
}
.btn-primary {
background-color: var(--primary-purple);
color: white;
border: none;
padding: 10px 24px;
border-radius: var(--radius-sm);
font-size: 14px;
font-weight: 500;
cursor: pointer;
}
/* ==================== Table Styles ==================== */
.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 {
padding: 20px 24px;
border-bottom: 1px solid var(--border-color);
}
table {
width: 100%;
border-collapse: collapse;
}
thead {
background-color: var(--bg-gray-light);
}
th {
padding: 14px 20px;
text-align: left;
font-size: 13px;
font-weight: 600;
color: var(--text-secondary);
border-bottom: 1px solid var(--border-color);
}
td {
padding: 16px 20px;
font-size: 14px;
color: var(--text-primary);
border-bottom: 1px solid var(--border-color);
}
.repo-link {
color: var(--link-color);
font-size: 13px;
}
.action-links {
display: flex;
flex-direction: column;
gap: 8px;
}
.action-link {
color: var(--link-color);
font-size: 13px;
}
.delete-icon {
background-color: var(--danger-red);
color: white;
border: none;
padding: 8px 12px;
border-radius: var(--radius-sm);
cursor: pointer;
font-size: 14px;
}
/* ==================== Responsive Design ==================== */
@media (max-width: 768px) {
.modal {
max-width: 100%;
margin: 10px;
}
.modal-header,
.modal-footer {
padding: 20px;
}
.modal-footer {
flex-direction: column;
}
.btn {
width: 100%;
}
}
</style>
</head>
<body>
<!-- ==================== Background Content (Blurred) ==================== -->
<div class="background-content">
<div class="page-container">
<!-- Repository Form Section -->
<section class="section-card">
<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: F b.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 th</p>
</div>
<div class="form-group">
<label class="form-label">Director</label>
<input type="text" class="form-input" placeholder="">
<p class="form-hint">Leave blar</p>
</div>
<button class="btn-primary">Create</button>
</section>
<!-- Manage Repositories Section -->
<section class="table-container">
<div class="table-header">
<div class="section-header">
<span class="section-icon">⚙️</span>
<h2 class="section-title">Manage Repositories</h2>
</div>
</div>
<table>
<thead>
<tr>
<th>Repository</th>
<th>Branch ⇅</th>
<th>Install Path ⇅</th>
<th>Actions</th>
<th></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-icon">🗑️</button>
</td>
</tr>
</tbody>
</table>
</section>
</div>
</div>
<!-- ==================== Modal Overlay ==================== -->
<div class="modal-overlay">
<div class="modal">
<!-- Modal Header -->
<div class="modal-header">
<h2 class="modal-title">Deploy Git Repository</h2>
<p class="modal-description">Are you sure you want to deploy this repository?</p>
</div>
<!-- Modal Footer -->
<div class="modal-footer">
<button class="btn btn-cancel" onclick="closeModal()">Cancel</button>
<button class="btn btn-deploy" onclick="deployRepository()">Deploy</button>
</div>
</div>
</div>
<script>
// Close modal functionality
function closeModal() {
document.querySelector('.modal-overlay').style.display = 'none';
document.querySelector('.background-content').style.filter = 'none';
document.querySelector('.background-content').style.pointerEvents = 'auto';
}
// Deploy repository functionality
function deployRepository() {
alert('Repository deployment initiated!');
closeModal();
}
// Close modal when clicking outside
document.querySelector('.modal-overlay').addEventListener('click', function(e) {
if (e.target === this) {
closeModal();
}
});
// Close modal with Escape key
document.addEventListener('keydown', function(e) {
if (e.key === 'Escape') {
closeModal();
}
});
</script>
</body>
</html>
Live Preview