Hostinger-reg-GitHub step 6
📦 General
✨ The Prompt Phrase
In step 6, click on auto deploy. A pop-up window will appear containing information. Copy the first HTTPS link, which is the webhook URL. You'll paste this into GitHub webhooks to integrate everything together.
💻 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>Auto Deployment Modal - Git Repository</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;
--link-bg: #e8e0ff;
--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: 600px;
width: 100%;
max-height: 90vh;
overflow-y: auto;
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;
border-bottom: 1px solid var(--border-color);
}
.modal-title {
font-size: 20px;
font-weight: 600;
color: var(--text-primary);
margin: 0;
}
/* ==================== Modal Body ==================== */
.modal-body {
padding: 28px;
}
.modal-section {
margin-bottom: 28px;
}
.modal-section:last-child {
margin-bottom: 0;
}
.section-label {
font-size: 15px;
font-weight: 600;
color: var(--text-primary);
margin-bottom: 10px;
display: block;
}
.url-box {
background-color: var(--link-bg);
border: 1px solid var(--border-color);
border-radius: var(--radius-sm);
padding: 12px 16px;
font-size: 13px;
color: var(--link-color);
word-break: break-all;
line-height: 1.6;
}
/* ==================== Modal Footer ==================== */
.modal-footer {
padding: 20px 28px;
border-top: 1px solid var(--border-color);
display: flex;
justify-content: flex-end;
}
.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-close {
background-color: var(--bg-white);
color: var(--primary-purple);
border: 1px solid var(--primary-purple);
}
.btn-close:hover {
background-color: var(--link-bg);
}
/* ==================== Background Content (Blurred) ==================== */
.background-content {
filter: blur(3px);
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;
}
.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);
}
.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 {
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);
}
.action-links {
display: flex;
flex-direction: column;
gap: 8px;
}
.action-link {
color: var(--link-color);
font-size: 13px;
}
.btn-auto-deployment {
background-color: var(--bg-white);
color: var(--primary-purple);
border: 2px solid var(--primary-purple);
padding: 8px 20px;
border-radius: var(--radius-sm);
font-size: 13px;
font-weight: 500;
cursor: pointer;
}
.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-body,
.modal-footer {
padding: 20px;
}
.url-box {
font-size: 11px;
}
}
</style>
</head>
<body>
<!-- ==================== Background Content (Blurred) ==================== -->
<div class="background-content">
<div class="page-container">
<!-- Create Repository Section -->
<section class="section-card">
<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.
</p>
<form>
<div class="form-group">
<label class="form-label">Repository</label>
<input type="text" class="form-input" value="git@gith">
<p class="form-hint">Examples: For public repositories: https://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 th</p>
</div>
<div class="form-group">
<label class="form-label">Directory</label>
<input type="text" class="form-input" placeholder="">
<p class="form-hint">Leave blar</p>
</div>
<button type="submit" class="btn-primary">Create</button>
</form>
</section>
<!-- Manage Repositories Section -->
<section class="table-container">
<div class="section-header" style="padding: 20px;">
<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>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td>git@github.com:victorystreamlines/Prompt-Manager.git</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>
</div>
</td>
<td>
<button class="btn-auto-deployment">Auto Deployment</button>
</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">Auto Deployment</h2>
</div>
<!-- Modal Body -->
<div class="modal-body">
<!-- Webhook URL Section -->
<div class="modal-section">
<label class="section-label">Webhook URL</label>
<div class="url-box">
https://webhooks.hostinger.com/deploy/77e1c48c138d23b826a7313e9d081803
</div>
</div>
<!-- Setup Webhook Section -->
<div class="modal-section">
<label class="section-label">Setup webhook on</label>
<div class="url-box">
https://github.com/victorystreamlines/Prompt-Manager/settings/hooks/new
</div>
</div>
<!-- Setup Tutorial Section -->
<div class="modal-section">
<label class="section-label">Setup tutorial</label>
<div class="url-box">
https://github.com/victorystreamlines/Prompt-Manager/settings/hooks/new
</div>
</div>
</div>
<!-- Modal Footer -->
<div class="modal-footer">
<button class="btn btn-close" onclick="closeModal()">Close</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';
}
// 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();
}
});
// Copy URL functionality (for URL boxes)
document.querySelectorAll('.url-box').forEach(box => {
box.style.cursor = 'pointer';
box.title = 'Click to copy';
box.addEventListener('click', function() {
const text = this.textContent.trim();
navigator.clipboard.writeText(text).then(() => {
const originalBg = this.style.backgroundColor;
this.style.backgroundColor = '#d4edda';
setTimeout(() => {
this.style.backgroundColor = originalBg;
}, 1000);
});
});
});
</script>
</body>
</html>
Live Preview