Here's the prompt I gave ChatGPT and Gemini:
Create a html auth page for Minecraft gamers with appropriate role and design
CHATGPT
The code ChatGPT gave :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Minecraft Auth UI</title>
<link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap" rel="stylesheet">
<style>
body {
margin: 0;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background: #0a0f0a;
font-family: 'Press Start 2P', monospace;
overflow: hidden;
color: #bfffbf;
}
/* Minecraft grass-like pixel background */
body::before {
content: "";
position: absolute;
inset: 0;
background:
linear-gradient(90deg, rgba(0,255,0,0.04) 1px, transparent 1px),
linear-gradient(rgba(0,255,0,0.04) 1px, transparent 1px);
background-size: 36px 36px;
}
.panel {
width: 380px;
background: #151a15;
border: 4px solid #3fbf3f;
box-shadow:
0 0 0 3px #0b0f0b,
0 0 25px rgba(0,255,120,0.35);
padding: 24px;
position: relative;
}
.title {
text-align: center;
font-size: 14px;
color: #3fff7f;
margin-bottom: 18px;
letter-spacing: 1px;
}
.tab-bar {
display: flex;
margin-bottom: 18px;
border: 2px solid #2e7d32;
}
.tab {
flex: 1;
text-align: center;
padding: 10px 0;
font-size: 9px;
cursor: pointer;
background: #0f1410;
color: #7cff7c;
}
.tab.active {
background: #2ecc71;
color: #0b0f0c;
box-shadow: inset 0 0 10px rgba(0,0,0,0.3);
}
.form {
display: flex;
flex-direction: column;
gap: 10px;
}
input, select {
background: #0d120d;
border: 2px solid #2e7d32;
padding: 10px;
font-family: inherit;
font-size: 9px;
color: #caffca;
outline: none;
}
input:focus, select:focus {
border-color: #3fff7f;
box-shadow: 0 0 8px rgba(0,255,120,0.4);
}
.role {
font-size: 8px;
margin-top: 4px;
color: #8cff8c;
}
.btn {
margin-top: 10px;
padding: 12px;
font-family: inherit;
font-size: 9px;
border: none;
cursor: pointer;
background: #2ecc71;
color: #0b0f0c;
transition: 0.2s;
}
.btn:hover {
background: #1ea85a;
transform: translateY(-1px);
box-shadow: 0 4px 0 #0b3d1e;
}
.footer {
margin-top: 12px;
text-align: center;
font-size: 8px;
color: #6cff6c;
opacity: 0.8;
}
/* pixel glow corners */
.panel::before {
content: "";
position: absolute;
top: -6px;
left: -6px;
right: -6px;
bottom: -6px;
border: 1px solid rgba(0,255,120,0.2);
pointer-events: none;
}
</style>
</head>
<body>
<div class="panel">
<div class="title">MINECRAFT ACCESS</div>
<div class="tab-bar">
<div class="tab active">LOGIN</div>
<div class="tab">REGISTER</div>
</div>
<div class="form">
<input type="text" placeholder="Username">
<input type="password" placeholder="Password">
<select>
<option>Player</option>
<option>Moderator</option>
<option>Admin</option>
</select>
<div class="role">Select your server role</div>
<button class="btn">ENTER SERVER</button>
</div>
<div class="footer">
Secure Minecraft Gateway UI
</div>
</div>
</body>
</html>
To be honest this UI design looks too generic and default. ChatGPT has just added a small glow to make it look minecraft theme.
GEMINI
Here's the output i got from Gemini:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MineAuth | Connect to the Cube</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<!-- Using a clean, modern gaming font -->
<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;700&display=swap" rel="stylesheet">
<style>
:root {
--bg-color: #121316;
--card-bg: #1c1d22;
--input-bg: #252830;
--text-main: #f3f4f6;
--text-muted: #9ca3af;
--primary-emerald: #00e676;
--primary-hover: #00c853;
--border-color: #333742;
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: 'Plus Jakarta Sans', sans-serif;
}
body {
background-color: var(--bg-color);
color: var(--text-main);
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
/* Subtle geometric background pattern reminiscent of chunks */
background-image: radial-gradient(var(--border-color) 1px, transparent 1px);
background-size: 24px 24px;
}
.auth-container {
background-color: var(--card-bg);
padding: 2.5rem;
border-radius: 12px;
width: 100%;
max-width: 420px;
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.5), 0 10px 10px -5px rgba(0, 0, 0, 0.4);
border: 1px solid var(--border-color);
}
.brand {
text-align: center;
margin-bottom: 2rem;
}
.brand h1 {
font-size: 1.8rem;
font-weight: 700;
letter-spacing: -0.5px;
}
.brand h1 span {
color: var(--primary-emerald);
text-shadow: 0 0 12px rgba(0, 230, 118, 0.3);
}
.brand p {
color: var(--text-muted);
font-size: 0.9rem;
margin-top: 0.25rem;
}
.form-group {
margin-bottom: 1.25rem;
}
.form-group label {
display: block;
font-size: 0.85rem;
font-weight: 500;
margin-bottom: 0.5rem;
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: 0.5px;
}
.form-group input, .form-group select {
width: 100%;
padding: 0.75rem 1rem;
background-color: var(--input-bg);
border: 1px solid var(--border-color);
border-radius: 6px;
color: var(--text-main);
font-size: 0.95rem;
transition: all 0.2s ease;
}
.form-group input:focus, .form-group select:focus {
outline: none;
border-color: var(--primary-emerald);
box-shadow: 0 0 0 3px rgba(0, 230, 118, 0.15);
}
.btn-submit {
width: 100%;
padding: 0.75rem;
background-color: var(--primary-emerald);
color: #000;
border: none;
border-radius: 6px;
font-size: 1rem;
font-weight: 700;
cursor: pointer;
transition: background-color 0.2s ease;
margin-top: 0.5rem;
}
.btn-submit:hover {
background-color: var(--primary-hover);
}
.footer-text {
text-align: center;
margin-top: 1.5rem;
font-size: 0.85rem;
color: var(--text-muted);
}
.footer-text a {
color: var(--primary-emerald);
text-decoration: none;
}
.footer-text a:hover {
text-decoration: underline;
}
</style>
</head>
<body>
<div class="auth-container">
<div class="brand">
<h1>MINE<span>AUTH</span></h1>
<p>Enter the realm</p>
</div>
<form action="#" method="POST">
<div class="form-group">
<label for="username">Minecraft Username / Email</label>
<input type="text" id="username" name="username" placeholder="Stev3_Crafter" required>
</div>
<div class="form-group">
<label for="password">Secret Key (Password)</label>
<input type="password" id="password" name="password" placeholder="••••••••" required>
</div>
<div class="form-group">
<label for="role">Server Role</label>
<select id="role" name="role" required>
<option value="player">Player (Survival / Creative)</option>
<option value="builder">Builder / Architect</option>
<option value="moderator">Moderator</option>
<option value="admin">Server Admin</option>
</select>
</div>
<button type="submit" class="btn-submit">LAUNCH SESSION</button>
</form>
<div class="footer-text">
<p>Not whitelisted yet? <a href="#">Apply here</a></p>
</div>
</div>
</body>
</html>
Now this looks more minecraft theme login screen.
Out of the two outputs I think that Gemini is the clear winner. Who do you think won?
Write it out in comments below!
To visit my GitHub page click here
Top comments (0)