Hostinger-reg-GitHub step 7
📦 General
✨ The Prompt Phrase
Step 7: Go to your GitHub application and navigate to Settings. Under Settings, find Webhooks and create a new webhook. Paste the HTTPS URL from Step 6 into the Payload URL field, then select application/JSON as the content type. Keep all other settings as default and click Add Webhook. Your webhook should now be added, and you're almost done. Step 8 is the final step: deploy your website.
💻 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>GitHub Webhooks - Add Webhook</title>
<style>
/* ==================== CSS Variables ==================== */
:root {
--bg-primary: #0d1117;
--bg-secondary: #161b22;
--bg-tertiary: #21262d;
--bg-input: #0d1117;
--border-primary: #30363d;
--border-secondary: #21262d;
--text-primary: #e6edf3;
--text-secondary: #7d8590;
--text-muted: #484f58;
--accent-blue: #58a6ff;
--accent-green: #3fb950;
--accent-red: #f85149;
--accent-purple: #bc8cff;
--btn-primary-bg: #238636;
--btn-primary-hover: #2ea043;
--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;
}
/* ==================== Layout Container ==================== */
.container {
display: flex;
min-height: 100vh;
}
/* ==================== Sidebar Navigation ==================== */
.sidebar {
width: 280px;
background-color: var(--bg-primary);
border-right: 1px solid var(--border-primary);
padding: 16px 0;
overflow-y: auto;
}
.nav-section {
margin-bottom: 20px;
}
.nav-section-title {
padding: 8px 16px;
font-size: 12px;
font-weight: 600;
color: var(--text-secondary);
text-transform: uppercase;
letter-spacing: 0.5px;
}
.nav-item {
display: flex;
align-items: center;
padding: 8px 16px;
color: var(--text-primary);
cursor: pointer;
transition: background-color 0.15s ease;
position: relative;
font-size: 14px;
}
.nav-item:hover {
background-color: var(--bg-secondary);
}
.nav-item.active {
background-color: var(--bg-secondary);
font-weight: 600;
}
.nav-item.active::before {
content: '';
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 2px;
background-color: var(--accent-blue);
}
.nav-item-icon {
margin-right: 12px;
font-size: 16px;
color: var(--text-secondary);
width: 16px;
display: inline-flex;
align-items: center;
justify-content: center;
}
.nav-item-text {
flex: 1;
}
.nav-item-badge {
background-color: var(--accent-green);
color: var(--text-primary);
padding: 2px 7px;
border-radius: 12px;
font-size: 11px;
font-weight: 600;
}
.nav-item-chevron {
color: var(--text-muted);
font-size: 12px;
margin-left: auto;
}
/* ==================== Main Content Area ==================== */
.main-content {
flex: 1;
padding: 32px 48px;
max-width: 1280px;
}
/* ==================== Page Header ==================== */
.page-header {
margin-bottom: 24px;
}
.breadcrumb {
font-size: 20px;
font-weight: 600;
margin-bottom: 16px;
}
.breadcrumb a {
color: var(--accent-blue);
}
.breadcrumb-separator {
margin: 0 8px;
color: var(--text-secondary);
}
.page-description {
color: var(--text-secondary);
font-size: 14px;
line-height: 1.6;
margin-bottom: 24px;
}
/* ==================== Form Styles ==================== */
.form-section {
background-color: var(--bg-secondary);
border: 1px solid var(--border-primary);
border-radius: 6px;
padding: 24px;
}
.form-group {
margin-bottom: 24px;
}
.form-label {
display: block;
font-size: 14px;
font-weight: 600;
color: var(--text-primary);
margin-bottom: 8px;
}
.required {
color: var(--accent-red);
margin-left: 2px;
}
.form-input,
.form-select {
width: 100%;
padding: 8px 12px;
background-color: var(--bg-input);
border: 1px solid var(--border-primary);
border-radius: 6px;
color: var(--text-primary);
font-size: 14px;
font-family: var(--font-sans);
transition: border-color 0.2s ease;
}
.form-input:focus,
.form-select:focus {
outline: none;
border-color: var(--accent-blue);
box-shadow: 0 0 0 3px rgba(88, 166, 255, 0.1);
}
.form-select {
appearance: none;
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="%237d8590"><path d="M4.427 7.427l3.396 3.396a.25.25 0 00.354 0l3.396-3.396A.25.25 0 0011.396 7H4.604a.25.25 0 00-.177.427z"/></svg>');
background-repeat: no-repeat;
background-position: right 8px center;
padding-right: 32px;
}
/* ==================== Radio Button Styles ==================== */
.radio-group {
display: flex;
flex-direction: column;
gap: 12px;
}
.radio-item {
display: flex;
align-items: center;
gap: 10px;
}
.radio-input {
width: 16px;
height: 16px;
accent-color: var(--accent-blue);
cursor: pointer;
}
.radio-label {
color: var(--text-primary);
font-size: 14px;
cursor: pointer;
}
.radio-label.disabled {
color: var(--accent-red);
}
/* ==================== Checkbox Styles ==================== */
.checkbox-item {
display: flex;
align-items: flex-start;
gap: 10px;
margin-bottom: 16px;
}
.checkbox-input {
width: 16px;
height: 16px;
accent-color: var(--accent-blue);
cursor: pointer;
margin-top: 2px;
}
.checkbox-label {
flex: 1;
}
.checkbox-title {
color: var(--text-primary);
font-size: 14px;
font-weight: 600;
margin-bottom: 4px;
}
.checkbox-description {
color: var(--text-secondary);
font-size: 12px;
}
/* ==================== Info Box ==================== */
.info-box {
display: flex;
align-items: flex-start;
gap: 10px;
padding: 12px;
background-color: var(--bg-tertiary);
border: 1px solid var(--border-primary);
border-radius: 6px;
margin-bottom: 16px;
font-size: 12px;
color: var(--text-secondary);
}
.info-icon {
color: var(--text-secondary);
font-size: 16px;
flex-shrink: 0;
}
/* ==================== Section Title ==================== */
.section-title {
font-size: 16px;
font-weight: 600;
color: var(--text-primary);
margin-bottom: 16px;
}
/* ==================== Button Styles ==================== */
.btn {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 8px 16px;
font-size: 14px;
font-weight: 500;
border-radius: 6px;
cursor: pointer;
transition: all 0.15s ease;
border: 1px solid;
font-family: var(--font-sans);
}
.btn-primary {
background-color: var(--btn-primary-bg);
border-color: rgba(240, 246, 252, 0.1);
color: var(--text-primary);
}
.btn-primary:hover {
background-color: var(--btn-primary-hover);
}
/* ==================== Responsive Design ==================== */
@media (max-width: 1024px) {
.sidebar {
width: 240px;
}
.main-content {
padding: 24px 32px;
}
}
@media (max-width: 768px) {
.container {
flex-direction: column;
}
.sidebar {
width: 100%;
border-right: none;
border-bottom: 1px solid var(--border-primary);
}
.main-content {
padding: 16px;
}
}
</style>
</head>
<body>
<div class="container">
<!-- ==================== Sidebar Navigation ==================== -->
<aside class="sidebar">
<!-- General Section -->
<nav class="nav-section">
<div class="nav-item">
<span class="nav-item-icon">⚙️</span>
<span class="nav-item-text">General</span>
</div>
</nav>
<!-- Access Section -->
<nav class="nav-section">
<div class="nav-section-title">Access</div>
<div class="nav-item">
<span class="nav-item-icon">👥</span>
<span class="nav-item-text">Collaborators</span>
</div>
</nav>
<!-- Code and Automation Section -->
<nav class="nav-section">
<div class="nav-section-title">Code and automation</div>
<div class="nav-item">
<span class="nav-item-icon">🌿</span>
<span class="nav-item-text">Branches</span>
</div>
<div class="nav-item">
<span class="nav-item-icon">🏷️</span>
<span class="nav-item-text">Tags</span>
</div>
<div class="nav-item">
<span class="nav-item-icon">📋</span>
<span class="nav-item-text">Rules</span>
<span class="nav-item-chevron">›</span>
</div>
<div class="nav-item">
<span class="nav-item-icon">⚡</span>
<span class="nav-item-text">Actions</span>
<span class="nav-item-chevron">›</span>
</div>
<div class="nav-item">
<span class="nav-item-icon">🤖</span>
<span class="nav-item-text">Models</span>
<span class="nav-item-badge">Preview</span>
</div>
<div class="nav-item active">
<span class="nav-item-icon">🔗</span>
<span class="nav-item-text">Webhooks</span>
</div>
<div class="nav-item">
<span class="nav-item-icon">🤝</span>
<span class="nav-item-text">Copilot</span>
<span class="nav-item-chevron">›</span>
</div>
<div class="nav-item">
<span class="nav-item-icon">📦</span>
<span class="nav-item-text">Environments</span>
</div>
<div class="nav-item">
<span class="nav-item-icon">💻</span>
<span class="nav-item-text">Codespaces</span>
</div>
<div class="nav-item">
<span class="nav-item-icon">📄</span>
<span class="nav-item-text">Pages</span>
</div>
</nav>
<!-- Security Section -->
<nav class="nav-section">
<div class="nav-section-title">Security</div>
<div class="nav-item">
<span class="nav-item-icon">🛡️</span>
<span class="nav-item-text">Advanced Security</span>
</div>
<div class="nav-item">
<span class="nav-item-icon">🔑</span>
<span class="nav-item-text">Deploy keys</span>
</div>
<div class="nav-item">
<span class="nav-item-icon">🔐</span>
<span class="nav-item-text">Secrets and variables</span>
<span class="nav-item-chevron">›</span>
</div>
</nav>
<!-- Integrations Section -->
<nav class="nav-section">
<div class="nav-section-title">Integrations</div>
<div class="nav-item">
<span class="nav-item-icon">🔌</span>
<span class="nav-item-text">GitHub Apps</span>
</div>
<div class="nav-item">
<span class="nav-item-icon">📧</span>
<span class="nav-item-text">Email notifications</span>
</div>
<div class="nav-item">
<span class="nav-item-icon">🔗</span>
<span class="nav-item-text">Autolink references</span>
</div>
</nav>
</aside>
<!-- ==================== Main Content ==================== -->
<main class="main-content">
<!-- Page Header -->
<div class="page-header">
<div class="breadcrumb">
<a href="#">Webhooks</a>
<span class="breadcrumb-separator">/</span>
<span>Add webhook</span>
</div>
<p class="page-description">
We'll send a POST request to the URL below with details of any subscribed events. You can also specify which data format you'd like to receive (JSON, x-www-form-urlencoded, etc). More information can be found in <a href="#">our developer documentation</a>.
</p>
</div>
<!-- Form Section -->
<div class="form-section">
<!-- Payload URL -->
<div class="form-group">
<label class="form-label">
Payload URL <span class="required">*</span>
</label>
<input
type="text"
class="form-input"
value="https://webhooks.hostinger.com/deploy/77e1c48c138d23b826a7313e9d081803"
>
</div>
<!-- Content Type -->
<div class="form-group">
<label class="form-label">
Content type <span class="required">*</span>
</label>
<select class="form-select">
<option selected>application/json</option>
<option>application/x-www-form-urlencoded</option>
</select>
</div>
<!-- Secret -->
<div class="form-group">
<label class="form-label">Secret</label>
<input type="password" class="form-input" placeholder="">
</div>
<!-- SSL Verification -->
<div class="form-group">
<h3 class="section-title">SSL verification</h3>
<div class="info-box">
<span class="info-icon">🔒</span>
<span>By default, we verify SSL certificates when delivering payloads.</span>
</div>
<div class="radio-group">
<div class="radio-item">
<input type="radio" id="ssl-enable" name="ssl" class="radio-input" checked>
<label for="ssl-enable" class="radio-label">Enable SSL verification</label>
</div>
<div class="radio-item">
<input type="radio" id="ssl-disable" name="ssl" class="radio-input">
<label for="ssl-disable" class="radio-label disabled">Disable (not recommended)</label>
</div>
</div>
</div>
<!-- Events -->
<div class="form-group">
<h3 class="section-title">Which events would you like to trigger this webhook?</h3>
<div class="radio-group">
<div class="radio-item">
<input type="radio" id="event-push" name="events" class="radio-input" checked>
<label for="event-push" class="radio-label">Just the push event.</label>
</div>
<div class="radio-item">
<input type="radio" id="event-all" name="events" class="radio-input">
<label for="event-all" class="radio-label">Send me everything.</label>
</div>
<div class="radio-item">
<input type="radio" id="event-select" name="events" class="radio-input">
<label for="event-select" class="radio-label">Let me select individual events.</label>
</div>
</div>
</div>
<!-- Active Checkbox -->
<div class="form-group">
<div class="checkbox-item">
<input type="checkbox" id="active" class="checkbox-input" checked>
<label for="active" class="checkbox-label">
<div class="checkbox-title">Active</div>
<div class="checkbox-description">We will deliver event details when this hook is triggered.</div>
</label>
</div>
</div>
<!-- Submit Button -->
<button class="btn btn-primary">Add webhook</button>
</div>
</main>
</div>
<script>
// Form submission handler
document.querySelector('.btn-primary').addEventListener('click', function(e) {
e.preventDefault();
alert('Webhook added successfully!');
});
// Navigation item click handler
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