qr.php

<?php
// Initialize DB if not exists
$dbFile = 'db.json';
if (!file_exists($dbFile)) file_put_contents($dbFile, json_encode([]));

$shortUrl = '';
$message = '';

if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    $url = trim($_POST['url'] ?? '');
    $name = trim($_POST['name'] ?? '');
    if (filter_var($url, FILTER_VALIDATE_URL)) {
        $data = json_decode(file_get_contents($dbFile), true);
        $code = substr(str_shuffle(md5(uniqid())), 0, 6);
        $data[$code] = [
            'url'     => $url,
            'name'    => $name,
            'created' => gmdate('c'),
        ];
        file_put_contents($dbFile, json_encode($data, JSON_PRETTY_PRINT));

        $protocol = (!empty($_SERVER['HTTPS']) && $_SERVER['HTTPS'] !== 'off') ? 'https' : 'http';
        $host = $_SERVER['HTTP_HOST'];
        $path = rtrim(dirname($_SERVER['PHP_SELF']), '/');
        $shortUrl = "$protocol://$host$path/u.php?c=$code"; // change if you want to use subfolder
    } else {
        $message = 'Invalid URL.';
    }
}
?>

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Dynamic QR Link Generator</title>
  <style>
  

@keyframes animateBackground {
  0% {
      background-position: 0% 0%;
  }
  50% {
      background-position: 100% 100%;

  }
  100% {
      background-position: 0% 0%;

  }
}

body {
font-family: sans-serif; 
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100vh;
  overflow: hidden;
  
  background: radial-gradient(circle, #000000, #333333, #606060);
  background-size: 300% 300%;  /* Enlarging gradient for smoother shifts */
  animation: animateBackground 60s infinite alternate ease-in-out;
}


a {
  color: white;
}
a:hover{
color: black;
  background: white;
}

  form {
    text-align: center;
      font-size: 2em;
    z-index: 2;
  }

  input[type="text"] {
    width: 600px;
      height: 2.5em;
    margin: 0.5em 0;
    z-index: 2;
  }
  
label {
  display: block;
  margin-bottom: 1em;
  color: #ffffff;
  font-size: 1.2em;
  text-align: left;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}


  button {
    padding: 0.1em 0.5em;
    z-index: 2;
//    font-size: 2em;
  }
  
button {
  background-color: #333;
  border: none;
  color: white;
  padding: 0.4em 1em;             /* More touch-friendly */
  font-size: 1.5em;               /* Still large but more balanced */
  margin: 1em 0;
  border-radius: 6px;            /* Optional: makes it look more modern */
  cursor: pointer;
  z-index: 2;
  transition: background-color 0.3s ease, color 0.3s ease;
}

button:hover {
  background-color: white;
  color: #333;
}


  h1 {
    margin-bottom: 1em;
    z-index: 2;
  }
  h2 {
  font-size: 2.5em;
  color: white;
  margin-bottom: 0.5em;
  z-index: 2;
}

  
  .form-wrapper {
  background: rgba(0, 0, 0, 0.5);
  padding: 4em;
  border-radius: 12px;
  max-width: 700px;
  width: 90%;
  text-align: center;
  position: relative;
  z-index: 2;
  margin-top: auto;
  margin-bottom: auto;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

</style>

</head>
<body>
<div class="form-wrapper">
<h2>Dynamic QR Link Generator</h2><br>
<br>
<br>
  <form method="POST">
    <label>
      URL to shorten:<br>
      <input type="text" name="url" placeholder="https://safienalbum.com" required>
    </label>
    <label>
      Name or label (optional):<br>
      <input type="text" name="name" placeholder="My special Link">
    </label><br>
    <button type="submit">Generate</button>
  </form>
</div>

  <?php if ($shortUrl): ?>
    <p>✅ Short URL: <a href="<?= htmlspecialchars($shortUrl) ?>"><?= htmlspecialchars($shortUrl) ?></a></p>
  <?php elseif ($message): ?>
    <p style="color:red;">❌ <?= $message ?></p>
  <?php endif; ?>
</body>
</html>