Lncvrt/name-a-color
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Restructure & change a lot of this

Browse Source
This commit is contained in:
Lncvrt committed 2026-08-30 19:09:09 -07:00
1 parent 35865772c1
commit 06578a4712
8 files changed
+139 -132
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

.vscode/sftp.json
Vendored
+12
View File
@@ -0,0 +1,12 @@
{
"name": "My Server",
"host": "192.168.68.100",
"protocol": "sftp",
"port": 22,
"username": "root",
"password": "9982",
"remotePath": "/var/www/nameacolor.lncvrt.xyz",
"uploadOnSave": true,
"useTempFile": false,
"openSsh": false
}
config/captcha.php
-3
View File
@@ -1,3 +0,0 @@
<?php
$sitekey = "";
$secretkey = "";
get.php
+11
View File
@@ -0,0 +1,11 @@
<?php
include __DIR__ . "/incl/util.php";
header("Content-Type: application/json");
$conn = connectToDatabase();
$stmt = $conn->prepare("SELECT * FROM colors ORDER BY timestamp DESC");
$stmt->execute();
$result = $stmt->fetchAll(PDO::FETCH_ASSOC);
echo json_encode($result);
incl/db.php
-15
View File
@@ -1,15 +0,0 @@
<?php
function connectToDatabase() {
include __DIR__ . "/../config/connection.php";
try {
$dsn = "mysql:host=$dbhost;dbname=$dbname;port=$dbport";
$options = [
PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION,
PDO::ATTR_DEFAULT_FETCH_MODE => PDO::FETCH_ASSOC,
];
$conn = new PDO($dsn, $dbusername, $dbpass, $options);
} catch (PDOException $e) {
die("Failed to connect to database: " . $e->getMessage());
}
return $conn;
}
incl/util.php
+15
View File
@@ -2,3 +2,18 @@
function formatWithCommas($number) {
return number_format($number, 0, '.', ',');
}
function connectToDatabase() {
include __DIR__ . "/../config/connection.php";
try {
$dsn = "mysql:host=$dbhost;dbname=$dbname;port=$dbport";
$options = [
PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION,
PDO::ATTR_DEFAULT_FETCH_MODE => PDO::FETCH_ASSOC,
];
$conn = new PDO($dsn, $dbusername, $dbpass, $options);
} catch (PDOException $e) {
die("Failed to connect to database: " . $e->getMessage());
}
return $conn;
}
webroot/index.php → index.php
+49 -27
View File
@@ -1,7 +1,5 @@
<?php
include __DIR__ . "/../config/captcha.php";
include __DIR__ . "/../incl/db.php";
include __DIR__ . "/../incl/util.php";
include __DIR__ . "/incl/util.php";
$conn = connectToDatabase();
@@ -12,8 +10,6 @@ $result = $stmt->fetchAll(PDO::FETCH_ASSOC);
$total = 255 * 255 * 255;
$named = count($result);
$remaining = $total - $named;
$lastInsertId = $_GET['highlight'] ?? null;
?>
<!DOCTYPE html>
<html lang="en">
@@ -25,7 +21,6 @@ $lastInsertId = $_GET['highlight'] ?? null;
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="preconnect" href="https://challenges.cloudflare.com">
<link href="https://fonts.googleapis.com/css2?family=Lexend:wght@100..900&display=swap" rel="stylesheet">
<script src="https://challenges.cloudflare.com/turnstile/v0/api.js?render=explicit"></script>
<style>
body {
font-family: "Lexend", sans-serif;
@@ -63,13 +58,14 @@ $lastInsertId = $_GET['highlight'] ?? null;
document.addEventListener('DOMContentLoaded', () => {
const usedColors = <?= json_encode(array_column($result, 'color')) ?>;
const usedNames = <?= json_encode(array_column($result, 'name')) ?>;
const form = document.querySelector('form');
const colorInput = document.querySelector('.color-picker');
const nameInput = document.querySelector('.name-input');
const usedColorText = document.querySelector('.used-color');
const usedNameText = document.querySelector('.used-text');
const colorValue = document.querySelector('.color-value');
const submit = document.querySelector('.submit-button');
let captchaComplete = false;
const colorContainer = document.querySelector(".colors");
colorInput.value = '#<?= bin2hex(random_bytes(3)) ?>';
@@ -80,9 +76,7 @@ $lastInsertId = $_GET['highlight'] ?? null;
submit.disabled = true;
} else {
usedColorText.style.display = 'none';
if (captchaComplete) {
submit.disabled = false;
}
submit.disabled = false;
}
};
@@ -92,24 +86,51 @@ $lastInsertId = $_GET['highlight'] ?? null;
submit.disabled = true;
} else {
usedNameText.style.display = 'none';
if (captchaComplete) {
submit.disabled = false;
}
submit.disabled = false;
}
};
turnstile.ready(function () {
turnstile.render(".cf-turnstile", {
sitekey: "<?= $sitekey ?>",
callback: function (token) {
captchaComplete = true;
submit.disabled = false;
},
});
});
colorInput.addEventListener('input', checkColor);
nameInput.addEventListener('input', checkName);
form.addEventListener('submit', async (e) => {
e.preventDefault();
const response = await fetch('/upload.php?' + new URLSearchParams(new FormData(form)));
const text = await response.text()
if (text == "-1") {
alert("Invalid color")
} else if (text == "-2") {
alert("Name too short")
} else if (text == "-3") {
alert("Name too long")
} else if (text == "-4") {
alert("Color already taken")
} else if (text == "-5") {
alert("Name already taken")
} else {
const namedColor = document.createElement("div");
namedColor.className = "named-color highlight";
const color = document.createElement("div");
color.className = "color";
color.style.background = colorInput.value;
const p = document.createElement("p");
p.textContent = `${nameInput.value} • ${colorInput.value}`;
namedColor.appendChild(color);
namedColor.appendChild(p);
colorContainer.prepend(namedColor);
usedColors.push(colorInput.value)
usedNames.push(btoa(nameInput.value))
colorInput.value = `#${Math.floor(Math.random() * 0xffffff).toString(16).padStart(6, '0')}`;
nameInput.value = "";
}
});
checkColor();
checkName();
});
@@ -120,7 +141,7 @@ $lastInsertId = $_GET['highlight'] ?? null;
<p><?= formatWithCommas($named) ?>/<?= formatWithCommas($total) ?> colors named (<?= formatWithCommas($remaining) ?> left)</p>
<hr>
<h2>Name your own color!</h2>
<form action="upload.php" method="post">
<form>
<p class="used-color">This color has already been named!</p>
<p class="used-text">This name has already been used!</p>
<label for="color">Color:</label>
@@ -128,18 +149,19 @@ $lastInsertId = $_GET['highlight'] ?? null;
<label for="name">Name:</label>
<input type="text" id="name" name="name" maxlength="50" class="name-input" required>
<label class="color-value"></label>
<button type="submit" class="submit-button" disabled>Name it!</button>
<div class="cf-turnstile" style="margin-top: 8px;"></div>
<button type="submit" class="submit-button">Name it!</button>
</form>
<hr>
<h2>Colors that were named</h2>
<div class="colors">
<?php
foreach ($result as $row) {
echo "<div class=\"named-color" . ($lastInsertId != null && $lastInsertId == $row['id'] && ($row['timestamp'] > time() - 10) ? " highlight" : "") . "\">";
echo "<div class=\"named-color\">";
echo "<div class=\"color\" style=\"background: #" . $row['color'] . ";\"></div>";
echo "<p>" . htmlspecialchars(base64_decode($row['name'])) . " &bull; #" . $row["color"] . "</p>";
echo "</div>";
}
?>
</div>
</body>
</html>
upload.php
+52
View File
@@ -0,0 +1,52 @@
<?php
include __DIR__ . "/incl/util.php";
header("Content-Type: text/plain");
$time = time();
$conn = connectToDatabase();
$color = $_GET['color'];
$name = $_GET['name'];
$color = ltrim($color, '#');
if (!preg_match('/^[a-f0-9]{6}$/i', $color)) {
echo "-1";
exit;
}
if (strlen($name) < 3) {
echo "-2";
exit;
}
if (strlen($name) > 50) {
echo "-3";
exit;
}
$name = base64_encode($name);
$stmt = $conn->prepare("SELECT name FROM colors WHERE color = :color");
$stmt->bindParam(':color', $color);
$stmt->execute();
if ($stmt->rowCount() > 0) {
echo "-4";
exit;
}
$stmt = $conn->prepare("SELECT name FROM colors WHERE name = :name");
$stmt->bindParam(':name', $name);
$stmt->execute();
if ($stmt->rowCount() > 0) {
echo "-5";
exit;
}
$stmt = $conn->prepare("INSERT INTO colors (color, name, timestamp) VALUES (:color, :name, :time)");
$stmt->bindParam(':color', $color);
$stmt->bindParam(':name', $name);
$stmt->bindParam(':time', $time);
$stmt->execute();
$lastInsertId = $conn->lastInsertId();
echo "1:" . $lastInsertId;
webroot/upload.php
-87
View File
@@ -1,87 +0,0 @@
<?php
include __DIR__ . "/../config/captcha.php";
include __DIR__ . "/../incl/db.php";
$time = time();
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
$ip = $_SERVER["HTTP_CF_CONNECTING_IP"];
$token = $_POST['cf-turnstile-response'] ?? '';
$url = 'https://challenges.cloudflare.com/turnstile/v0/siteverify';
$data = [
'secret' => $secretkey,
'response' => $token,
'remoteip' => $ip,
];
$ch = curl_init($url);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
curl_setopt($ch, CURLOPT_POST, true);
curl_setopt($ch, CURLOPT_POSTFIELDS, http_build_query($data));
$result = curl_exec($ch);
curl_close($ch);
if ($result !== false) {
$outcome = json_decode($result, true);
if (!isset($outcome['success']) || !$outcome['success']) {
echo "Invalid Captcha";
exit;
}
} else {
echo "Couldn't validate Captcha";
exit;
}
$conn = connectToDatabase();
$color = $_POST['color'];
$name = base64_encode($_POST['name'] ?? '');
$color = ltrim($color, '#');
if (!preg_match('/^[a-f0-9]{6}$/i', $color)) {
echo "Invalid color";
exit;
}
if (strlen($name) < 3) {
echo "Name too short";
exit;
}
if (strlen($name) > 50) {
echo "Name too long";
exit;
}
$stmt = $conn->prepare("SELECT name FROM colors WHERE color = :color");
$stmt->bindParam(':color', $color);
$stmt->execute();
if ($stmt->rowCount() > 0) {
echo "Color already taken";
exit;
}
$stmt = $conn->prepare("SELECT name FROM colors WHERE name = :name");
$stmt->bindParam(':name', $name);
$stmt->execute();
if ($stmt->rowCount() > 0) {
echo "Name already taken";
exit;
}
$stmt = $conn->prepare("INSERT INTO colors (color, name, timestamp) VALUES (:color, :name, :time)");
$stmt->bindParam(':color', $color);
$stmt->bindParam(':name', $name);
$stmt->bindParam(':time', $time);
$stmt->execute();
$lastInsertId = $conn->lastInsertId();
header("Location: /?highlight=$lastInsertId");
exit;
}
header("Location: /");