jknapp
eaeb64c3ed
All checks were successful
WHP Default Container / Build-and-Push (push) Successful in 11s
- Added Dockerfile with Apache base image - Created beautiful web hosting landing page (index.html) - Added startup script to check for content and copy default page - Set up Gitea workflow for automatic builds - Updated README with comprehensive documentation The container automatically provides a professional landing page when the web directory is empty, focusing on web hosting features and guiding users to configure their site through the Web Hosting Panel.
410 lines
13 KiB
HTML
410 lines
13 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Welcome to Your Domain - Web Hosting</title>
|
|
<style>
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
body {
|
|
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
|
line-height: 1.6;
|
|
color: #333;
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
min-height: 100vh;
|
|
}
|
|
|
|
.container {
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
padding: 0 20px;
|
|
}
|
|
|
|
.hero {
|
|
text-align: center;
|
|
padding: 100px 0;
|
|
color: white;
|
|
}
|
|
|
|
.hero h1 {
|
|
font-size: 3.5rem;
|
|
margin-bottom: 20px;
|
|
font-weight: 300;
|
|
text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
|
|
}
|
|
|
|
.hero p {
|
|
font-size: 1.3rem;
|
|
margin-bottom: 30px;
|
|
opacity: 0.9;
|
|
}
|
|
|
|
.notice-banner {
|
|
background: rgba(255, 255, 255, 0.1);
|
|
border: 2px solid rgba(255, 255, 255, 0.3);
|
|
border-radius: 10px;
|
|
padding: 20px;
|
|
margin-bottom: 30px;
|
|
backdrop-filter: blur(10px);
|
|
}
|
|
|
|
.notice-banner h3 {
|
|
color: #ffd700;
|
|
margin-bottom: 10px;
|
|
font-size: 1.2rem;
|
|
}
|
|
|
|
.notice-banner p {
|
|
margin-bottom: 0;
|
|
font-size: 1.1rem;
|
|
}
|
|
|
|
.btn {
|
|
display: inline-block;
|
|
padding: 15px 30px;
|
|
background: rgba(255,255,255,0.2);
|
|
color: white;
|
|
text-decoration: none;
|
|
border-radius: 50px;
|
|
border: 2px solid rgba(255,255,255,0.3);
|
|
transition: all 0.3s ease;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.btn:hover {
|
|
background: rgba(255,255,255,0.3);
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 10px 20px rgba(0,0,0,0.2);
|
|
}
|
|
|
|
.btn-primary {
|
|
background: #ffd700;
|
|
color: #333;
|
|
border-color: #ffd700;
|
|
}
|
|
|
|
.btn-primary:hover {
|
|
background: #ffed4e;
|
|
color: #333;
|
|
}
|
|
|
|
.features {
|
|
background: white;
|
|
padding: 80px 0;
|
|
}
|
|
|
|
.features-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
|
gap: 40px;
|
|
margin-top: 50px;
|
|
}
|
|
|
|
.feature-card {
|
|
text-align: center;
|
|
padding: 40px 20px;
|
|
border-radius: 15px;
|
|
background: #f8f9fa;
|
|
transition: transform 0.3s ease;
|
|
}
|
|
|
|
.feature-card:hover {
|
|
transform: translateY(-5px);
|
|
box-shadow: 0 15px 30px rgba(0,0,0,0.1);
|
|
}
|
|
|
|
.feature-icon {
|
|
font-size: 3rem;
|
|
margin-bottom: 20px;
|
|
color: #667eea;
|
|
}
|
|
|
|
.feature-card h3 {
|
|
margin-bottom: 15px;
|
|
color: #333;
|
|
}
|
|
|
|
.feature-card p {
|
|
color: #666;
|
|
}
|
|
|
|
.section-title {
|
|
text-align: center;
|
|
font-size: 2.5rem;
|
|
margin-bottom: 20px;
|
|
color: #333;
|
|
}
|
|
|
|
.section-subtitle {
|
|
text-align: center;
|
|
font-size: 1.2rem;
|
|
color: #666;
|
|
margin-bottom: 50px;
|
|
}
|
|
|
|
.status-section {
|
|
background: #f8f9fa;
|
|
padding: 60px 0;
|
|
}
|
|
|
|
.status-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
|
gap: 30px;
|
|
margin-top: 40px;
|
|
}
|
|
|
|
.status-card {
|
|
background: white;
|
|
padding: 30px;
|
|
border-radius: 10px;
|
|
text-align: center;
|
|
box-shadow: 0 5px 15px rgba(0,0,0,0.1);
|
|
}
|
|
|
|
.status-indicator {
|
|
width: 20px;
|
|
height: 20px;
|
|
border-radius: 50%;
|
|
background: #28a745;
|
|
margin: 0 auto 15px;
|
|
animation: pulse 2s infinite;
|
|
}
|
|
|
|
@keyframes pulse {
|
|
0% { box-shadow: 0 0 0 0 rgba(40, 167, 69, 0.7); }
|
|
70% { box-shadow: 0 0 0 10px rgba(40, 167, 69, 0); }
|
|
100% { box-shadow: 0 0 0 0 rgba(40, 167, 69, 0); }
|
|
}
|
|
|
|
.footer {
|
|
background: #2c3e50;
|
|
color: white;
|
|
text-align: center;
|
|
padding: 40px 0;
|
|
}
|
|
|
|
.footer p {
|
|
opacity: 0.8;
|
|
}
|
|
|
|
.next-steps {
|
|
background: #e9ecef;
|
|
padding: 60px 0;
|
|
}
|
|
|
|
.steps-list {
|
|
max-width: 800px;
|
|
margin: 40px auto 0;
|
|
}
|
|
|
|
.step-item {
|
|
background: white;
|
|
padding: 25px;
|
|
margin-bottom: 20px;
|
|
border-radius: 10px;
|
|
border-left: 4px solid #667eea;
|
|
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
|
|
}
|
|
|
|
.step-number {
|
|
display: inline-block;
|
|
background: #667eea;
|
|
color: white;
|
|
width: 30px;
|
|
height: 30px;
|
|
border-radius: 50%;
|
|
text-align: center;
|
|
line-height: 30px;
|
|
margin-right: 15px;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.current-status {
|
|
background: #fff3cd;
|
|
border: 1px solid #ffeaa7;
|
|
border-radius: 10px;
|
|
padding: 20px;
|
|
margin: 30px 0;
|
|
}
|
|
|
|
.current-status h3 {
|
|
color: #856404;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.current-status p {
|
|
color: #856404;
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.hero h1 {
|
|
font-size: 2.5rem;
|
|
}
|
|
|
|
.hero p {
|
|
font-size: 1.1rem;
|
|
}
|
|
|
|
.features-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.status-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="hero">
|
|
<div class="container">
|
|
<h1>Your Domain is Live! 🎉</h1>
|
|
<p>Congratulations! Your web hosting is now active and ready to serve your website.</p>
|
|
|
|
<div class="notice-banner">
|
|
<h3>⚠️ This is a Default Landing Page</h3>
|
|
<p>This container is currently configured to serve static assets only. To configure your actual website, please use the Web Hosting Panel.</p>
|
|
</div>
|
|
|
|
<a href="#next-steps" class="btn btn-primary">Get Started with Your Website</a>
|
|
</div>
|
|
</div>
|
|
|
|
<section class="status-section" id="status">
|
|
<div class="container">
|
|
<h2 class="section-title">Current Status</h2>
|
|
<p class="section-subtitle">Your web hosting environment is operational</p>
|
|
|
|
<div class="current-status">
|
|
<h3>📋 Current Configuration</h3>
|
|
<p>This container is running in static-only mode. You can upload HTML, CSS, JavaScript, and image files, but dynamic features like PHP, databases, and server-side processing are not available in this configuration.</p>
|
|
</div>
|
|
|
|
<div class="status-grid">
|
|
<div class="status-card">
|
|
<div class="status-indicator"></div>
|
|
<h3>Web Server</h3>
|
|
<p>Apache web server is running and serving static content</p>
|
|
</div>
|
|
|
|
<div class="status-card">
|
|
<div class="status-indicator"></div>
|
|
<h3>Domain DNS</h3>
|
|
<p>Your domain is properly configured and pointing to this server</p>
|
|
</div>
|
|
|
|
<div class="status-card">
|
|
<div class="status-indicator"></div>
|
|
<h3>SSL Certificate</h3>
|
|
<p>Secure HTTPS connection is available for your domain</p>
|
|
</div>
|
|
|
|
<div class="status-card">
|
|
<div class="status-indicator"></div>
|
|
<h3>Static Assets</h3>
|
|
<p>Ready to serve HTML, CSS, JavaScript, and image files</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="features">
|
|
<div class="container">
|
|
<h2 class="section-title">What You Can Do Now</h2>
|
|
<p class="section-subtitle">Options for getting your website up and running</p>
|
|
|
|
<div class="features-grid">
|
|
<div class="feature-card">
|
|
<div class="feature-icon">📁</div>
|
|
<h3>Upload Static Files</h3>
|
|
<p>Upload your HTML, CSS, JavaScript, and image files directly to this container for a simple static website.</p>
|
|
</div>
|
|
|
|
<div class="feature-card">
|
|
<div class="feature-icon">⚙️</div>
|
|
<h3>Configure Full Hosting</h3>
|
|
<p>Use the Web Hosting Panel to configure dynamic hosting with PHP, databases, and server-side processing.</p>
|
|
</div>
|
|
|
|
<div class="feature-card">
|
|
<div class="feature-icon">🚀</div>
|
|
<h3>WordPress Installation</h3>
|
|
<p>Use our easy WordPress install tool to quickly set up a professional website with a content management system.</p>
|
|
</div>
|
|
|
|
<div class="feature-card">
|
|
<div class="feature-icon">🛠️</div>
|
|
<h3>Custom Applications</h3>
|
|
<p>Install other popular applications like Joomla, Drupal, or custom PHP applications through the control panel.</p>
|
|
</div>
|
|
|
|
<div class="feature-card">
|
|
<div class="feature-icon">📊</div>
|
|
<h3>Database Setup</h3>
|
|
<p>Configure MySQL or PostgreSQL databases for dynamic content and applications.</p>
|
|
</div>
|
|
|
|
<div class="feature-card">
|
|
<div class="feature-icon">📧</div>
|
|
<h3>Email Configuration</h3>
|
|
<p>Set up professional email addresses for your domain through the hosting panel.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="next-steps" id="next-steps">
|
|
<div class="container">
|
|
<h2 class="section-title">Next Steps</h2>
|
|
<p class="section-subtitle">How to configure your website through the Web Hosting Panel</p>
|
|
|
|
<div class="steps-list">
|
|
<div class="step-item">
|
|
<span class="step-number">1</span>
|
|
<strong>Log into Web Hosting Panel</strong> - Access your hosting control panel to manage your domain and hosting configuration.
|
|
</div>
|
|
|
|
<div class="step-item">
|
|
<span class="step-number">2</span>
|
|
<strong>Select Your Site</strong> - Navigate to the "Sites" section and select this domain to configure its hosting settings.
|
|
</div>
|
|
|
|
<div class="step-item">
|
|
<span class="step-number">3</span>
|
|
<strong>Choose Your Software</strong> - Configure the software stack you want to use (PHP, databases, etc.) or use our one-click installers.
|
|
</div>
|
|
|
|
<div class="step-item">
|
|
<span class="step-number">4</span>
|
|
<strong>Install Applications</strong> - Use our easy WordPress install tool or install other applications like Joomla, Drupal, or custom PHP apps.
|
|
</div>
|
|
|
|
<div class="step-item">
|
|
<span class="step-number">5</span>
|
|
<strong>Upload Your Files</strong> - Upload your website files and configure your databases through the file manager and database tools.
|
|
</div>
|
|
|
|
<div class="step-item">
|
|
<span class="step-number">6</span>
|
|
<strong>Configure Email</strong> - Set up professional email addresses for your domain (yourname@yourdomain.com).
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<footer class="footer">
|
|
<div class="container">
|
|
<p>Your web hosting is powered by reliable, secure infrastructure</p>
|
|
<p>Need help configuring your website? Contact our support team or check the Web Hosting Panel documentation.</p>
|
|
</div>
|
|
</footer>
|
|
</body>
|
|
</html>
|