DEV Community: Suveer (Phantom)

I asked ChatGPT and Gemini to make a Minecraft auth page - Here's the result

Suveer (Phantom) — Sun, 14 Jun 2026 15:36:07 +0000

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

What sit he analytics tool you would recommend to analyse user data from websites? #discuss #help

Suveer (Phantom) — Thu, 11 Jun 2026 15:12:51 +0000

I built a new desktop companion just because I was bored

Suveer (Phantom) — Sun, 07 Jun 2026 16:52:19 +0000

Hey guys,
I have managed to build a publishable version of my pet companion app which can manage to cheer you up while you work.

Right now there is only one skin - a cat and am looking to add more through more updates.

I am hoping to get some feedback for this app so feel free to write how you like the idea in app.

Link to download -] click here

Any ideas for a fun coding project that u will enjoy using?

Suveer (Phantom) — Sun, 07 Jun 2026 05:58:15 +0000

I Built Auroris — A Tool That Turns Wikipedia Into One-Liners

Suveer (Phantom) — Sat, 06 Jun 2026 11:46:24 +0000

Most information online is either:

Too long
Too messy
Or too hard to quickly understand

So I built Auroris — a simple web tool that takes complex Wikipedia content and converts it into clean, one-line explanations.

View it at -> https://auroris.vercel.app/

Auroris Alpha 1.0 — A Minimal Wikipedia for Single-Line Facts

Suveer (Phantom) — Sun, 31 May 2026 14:06:55 +0000

Most knowledge platforms feel heavy.
Wikipedia gives depth, but sometimes you don’t want depth — you just want the fact.
So I built Auroris, a lightweight knowledge site that shows only single-line facts across categories.

👉 Live: https://auroris.vercel.app

Auroris is a knowledge platform that:
1)Organizes information into 19 categories
2)Shows only short, single-line facts
3)Updates with new information daily
4)Removes unnecessary explanation and clutter

Your note app not private enough?

Suveer (Phantom) — Sat, 07 Feb 2026 08:22:08 +0000

Introducing Phantom Notes - a secure app where all your notes are behind a passcode.

It is completely local so there is no risk of any online sharing.

Download it on https://phantom-notes.en.uptodown.com/mac

Introducing PHANTOM NOTES—the next-gen note maker

Suveer (Phantom) — Tue, 03 Feb 2026 15:09:08 +0000

Phantom Notes is a simple yet innovative and helpful tool for note-making.

Download it on:
https://phantom-notes.en.uptodown.com/mac
https://phantom-official-store.itch.io/notes

It is secure (optional passcode) and has a simple UI, which can help in making notes easily.

It also has a recycle bin feature, which auto-clears every 28 days.

It has both—dark mode and light mode—to suit your needs.

You can attach any files that you want which you can use for reference in your notes.

This is the best note-making software for Mac available!

Version 26 is Live!

Suveer (Phantom) — Thu, 04 Dec 2025 11:52:31 +0000

Version 26 of Phantom Books is Live!

View it now at phantom-books.bolt.host

Main changes:
1) In-website navigation to collection was added (from previous method of link navigation)
2) CSS was updated to match the new themes.
3) The people who navigate to collection through ID can't edit or delete it and can only view the details and books in the collection.

Phantom Books - The best online library

Suveer (Phantom) — Wed, 03 Dec 2025 10:50:42 +0000

It has been a long time since new updates have been added.

But don't worry, in the meantime, enjoy the current features of Phantom Books at phantom-books.bolt.host

It has a publisher dashboard with view metrics, like/dislike and edit features. You can read the uploaded books in a high-tech, modern immersive reader. It also has features to save reading progress, highlights, etc.

It also has an inbuilt search and collection system, so you can organise your favorite books.

It also has AI summary generation, so you don't have to worry about writing a summary of the book you are uploading.

The site is live at phantom-books.bolt.host

VISIT NOW

Write your feedback in the comments section below.

Update - ......... Unknown

Suveer (Phantom) — Mon, 01 Dec 2025 09:47:21 +0000

Not much in this update.....

BUT NOW YOU HAVE A LINK TO MY dev.to PROFILE.

Check it out at -> https://phantom-books.bolt.host/

How do you think my website looks?

Write it down in the comments section!

Can you imagine it? I have created yet another update!

Suveer (Phantom) — Sun, 30 Nov 2025 14:53:51 +0000

Guys,

This is version 14 of my incredibly dynamic public library website - Phantom Books

New features:
1) Genre, tags, and series can be added when publishing a book, and they can also be edited from the publisher dashboard.
2) A collection system has been added so users can create collections for their own convenience and also share them. A separate page is available for each collection.
3) Finally, to cap it all, CSS has been updated to make the website more modern, and theme has been updated in collection pages, etc.

If you find any errors, then please report them in the comments section!

Also write down your suggestions in the comments section!

CLICK HERE