<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Luppufy</title>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
  <h1>Luppufy Image Generator</h1>
  <h4>Website Developing with ❤️ Lulushu</h4>
  <form action="/" method="POST">
    <label for="inputId">ID:</label>
    <input type="text" id="inputId" name="id" required>
    <button type="submit">Oluştur</button>
  </form>
  <% if (imageUrl) { %>
      <div align="center"><h2 style="background-color: #000000; color: white; width:40%; height: 40%;" ><%=mark%></h2></div>
    <img src="<%= imageUrl %>" id="imageUrl" alt="Resim">
  <% } %>
  <style>
    body {
      text-align: center;
      font-family: Arial, sans-serif;
    }

    h1, h4 {
      color: #000000;
    }

    form {
      margin-top: 20px;
    }

    label {
      font-weight: bold;
    }

    input[type="text"] {
      padding: 5px;
    }

    button[type="submit"] {
      padding: 5px 10px;
    }
  </style>
</body>
</html>