<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>FreeMC.Host - Create Your Minecraft Server Instantly</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
body {
background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
color: white;
}
.header {
text-align: center;
padding: 2rem;
margin-bottom: 2rem;
}
.header h1 {
font-size: 3rem;
margin-bottom: 1rem;
background: linear-gradient(45deg, #00ff88, #00b8ff);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.header p {
font-size: 1.2rem;
color: #b3b3b3;
}
.create-server {
background: rgba(255, 255, 255, 0.1);
padding: 2rem;
border-radius: 15px;
backdrop-filter: blur(10px);
box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
width: 90%;
max-width: 600px;
text-align: center;
}
.server-input, .email-input {
width: 100%;
padding: 1rem;
margin: 1rem 0;
border: 2px solid #00ff88;
border-radius: 8px;
background: rgba(255, 255, 255, 0.05);
color: white;
font-size: 1.1rem;
transition: all 0.3s ease;
}
.server-input:focus, .email-input:focus {
outline: none;
border-color: #00b8ff;
box-shadow: 0 0 15px rgba(0, 184, 255, 0.3);
}
.create-button {
background: linear-gradient(45deg, #00ff88, #00b8ff);
border: none;
padding: 1rem 2rem;
border-radius: 8px;
color: white;
font-size: 1.2rem;
font-weight: bold;
cursor: pointer;
transition: all 0.3s ease;
margin-top: 1rem;
}
.create-button:hover:not(:disabled) {
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(0, 255, 136, 0.4);
}
.create-button:disabled {
background: #666;
cursor: not-allowed;
opacity: 0.7;
}
.features {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 2rem;
padding: 2rem;
width: 90%;
max-width: 1200px;
margin-top: 3rem;
}
.feature-card {
background: rgba(255, 255, 255, 0.05);
padding: 1.5rem;
border-radius: 10px;
text-align: center;
}
.feature-card h3 {
color: #00ff88;
margin-bottom: 1rem;
}
.feature-card p {
color: #b3b3b3;
}
.status-message {
margin-top: 0.5rem;
font-size: 0.9rem;
display: flex;
align-items: flex-start;
justify-content: center;
gap: 0.5rem;
}
.status-message.available {
color: #00ff88;
}
.status-message.unavailable {
color: #ff4444;
}
.status-icon {
font-size: 1.2rem;
margin-top: 0.2rem;
}
.subdomain {
font-size: 0.85rem;
opacity: 0.9;
margin-top: 0.2rem;
}
.email-wrapper { display: none; text-align: left; }
.email-label { font-size: 0.95rem; color: #b3b3b3; }
.helper { font-size: 0.85rem; color: #b3b3b3; margin-top: .25rem; }
</style>
</head>
<body>
<div class="header">
<h1>FreeMC.Host</h1>
<p>Create your Minecraft server instantly - Free and Easy!</p>
</div>
<div class="create-server">
<input type="text" class="server-input" placeholder="Enter your server name..." id="serverName">
<div id="statusMessage" class="status-message"></div>
<div class="email-wrapper" id="emailWrapper">
<div class="email-label">One last step to create your server:</div>
<input type="email" class="email-input" placeholder="Enter your email" id="email">
<div class="helper">We’ll use this to send server info and updates.</div>
</div>
<button class="create-button" id="createButton" onclick="createServer()" disabled>Create Server</button>
</div>
<div class="features">
<div class="feature-card">
<h3>Instant Setup</h3>
<p>Get your server running in seconds with our automated setup process</p>
</div>
<div class="feature-card">
<h3>Free Hosting</h3>
<p>Enjoy reliable hosting at no cost with our free tier</p>
</div>
<div class="feature-card">
<h3>Easy Management</h3>
<p>Simple control panel to manage your server settings</p>
</div>
</div>
<script>
let nameAvailable = false;
let pendingSubdomain = '';
async function checkNameAvailability(name) {
try {
const response = await fetch(`/api/checkName?name=${encodeURIComponent(name)}`);
const data = await response.json();
const statusMessage = document.getElementById('statusMessage');
const createButton = document.getElementById('createButton');
const emailWrapper = document.getElementById('emailWrapper');
if (data.available) {
statusMessage.innerHTML = `
<span class="status-icon">✓</span>
<div>
<div>Yes, that name is available!</div>
<div class="subdomain">Your Server IP will be: ${data.subdomain}</div>
</div>
`;
statusMessage.className = 'status-message available';
createButton.disabled = false;
nameAvailable = true;
pendingSubdomain = data.subdomain;
} else {
statusMessage.innerHTML = `
<span class="status-icon">✗</span>
<div>
<div>Sorry, that name is taken. Try another one.</div>
<div class="subdomain">${data.subdomain} is not available</div>
</div>
`;
statusMessage.className = 'status-message unavailable';
createButton.disabled = true;
emailWrapper.style.display = 'none';
nameAvailable = false;
pendingSubdomain = '';
}
} catch (error) {
console.error('Error checking name availability:', error);
}
}
// Add event listener for input
document.getElementById('serverName').addEventListener('input', function(e) {
const name = e.target.value;
const statusMessage = document.getElementById('statusMessage');
const createButton = document.getElementById('createButton');
const emailWrapper = document.getElementById('emailWrapper');
if (name === '') {
statusMessage.textContent = '';
createButton.disabled = true;
emailWrapper.style.display = 'none';
nameAvailable = false;
pendingSubdomain = '';
createButton.textContent = 'Create Server';
return;
}
checkNameAvailability(name);
});
// Add event listener for Enter key
document.getElementById('serverName').addEventListener('keypress', function(e) {
const createButton = document.getElementById('createButton');
if (e.key === 'Enter' && !createButton.disabled) {
createButton.click();
}
});
function isValidEmail(email) {
return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
}
async function createServer() {
const name = document.getElementById('serverName').value;
const emailWrapper = document.getElementById('emailWrapper');
const emailInput = document.getElementById('email');
const createButton = document.getElementById('createButton');
if (!nameAvailable) return;
// First click after availability: show email field
if (emailWrapper.style.display !== 'block') {
emailWrapper.style.display = 'block';
createButton.textContent = 'Create My Server';
emailInput.focus();
return;
}
const email = emailInput.value.trim();
if (!isValidEmail(email)) {
emailInput.focus();
emailInput.select();
return;
}
// Disable the button while creating
createButton.disabled = true;
createButton.textContent = 'Creating...';
// Call the API endpoint with email
fetch(`/api/createServer?name=${encodeURIComponent(name)}&email=${encodeURIComponent(email)}`)
.then(response => response.json())
.then(data => {
if (data.error) {
alert(data.error);
createButton.disabled = false;
createButton.textContent = 'Create My Server';
return;
}
if (data.success) {
window.location.href = `https://${data.subdomain}?email=${encodeURIComponent(email)}`;
}
})
.catch(error => {
console.error('Error:', error);
alert('Failed to create server. Please try again.');
createButton.disabled = false;
createButton.textContent = 'Create My Server';
});
}
</script>
</body>
</html>