mirror of
https://github.com/csd4ni3l/loginween.git
synced 2026-01-01 04:23:48 +01:00
Remove PyPi build, convert project to not be a python module, add Docker build and files, update README,
This commit is contained in:
csd4ni3l
34
templates/base.jinja2
Normal file
34
templates/base.jinja2
Normal file
@@ -0,0 +1,34 @@
|
||||
<!DOCTYPE html>
|
||||
|
||||
<html lang="en" data-bs-theme="dark">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB" crossorigin="anonymous">
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.13.1/font/bootstrap-icons.min.css">
|
||||
<title>{% block title %} {% endblock %}</title>
|
||||
{% block head %} {% endblock %}
|
||||
</head>
|
||||
<body>
|
||||
<nav class="navbar navbar-expand-lg bg-body-tertiary">
|
||||
<div class="container-fluid">
|
||||
<a class="navbar-brand" href="/">LoginWeen</a>
|
||||
|
||||
<button class="navbar-toggler" type="button", data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
|
||||
<div class="collapse navbar-collapse", id="navbarSupportedContent">
|
||||
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
|
||||
{% block nav %}
|
||||
{% endblock %}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
{% block body %}
|
||||
{% endblock %}
|
||||
<script src="https://cdn.jsdelivr.net/npm/dompurify@3.0.8/dist/purify.min.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js" integrity="sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI" crossorigin="anonymous"></script>
|
||||
</body>
|
||||
</html>
|
||||
16
templates/index.jinja2
Normal file
16
templates/index.jinja2
Normal file
@@ -0,0 +1,16 @@
|
||||
{% extends "base.jinja2" %}
|
||||
|
||||
{% block title %}LoginWeen Home{% endblock %}
|
||||
|
||||
{% block nav %}
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" aria-current="page" href="/">Home</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="/logout">Logout</a>
|
||||
</li>
|
||||
{% endblock %}
|
||||
|
||||
{% block body %}
|
||||
<p>LoginWeen is a an app where you login/register with a halloween pumpkin carving as a password.</p>
|
||||
{% endblock body %}
|
||||
117
templates/login.jinja2
Normal file
117
templates/login.jinja2
Normal file
@@ -0,0 +1,117 @@
|
||||
{% extends "base.jinja2" %}
|
||||
|
||||
{% block title %}LoginWeen{% endblock %}
|
||||
|
||||
{% block nav %}
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" aria-current="page" href="/login">Login</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="/register">Register</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="/logout">Logout</a>
|
||||
</li>
|
||||
{% endblock %}
|
||||
|
||||
{% block body %}
|
||||
<form id="login_form" method="post" target="/login">
|
||||
<div class="position-absolute top-50 start-50 translate-middle text-center">
|
||||
<h1>Draw a carving to login!</h1>
|
||||
<input type="hidden" name="pattern" id="pattern_field">
|
||||
<canvas id="pumpkin_canvas" width="600" height="600" class="my-3"></canvas>
|
||||
<div class="input-group mb-3">
|
||||
<input id="username_field" name="username" type="text" class="form-control" placeholder="Username" aria-label="Username">
|
||||
</div>
|
||||
<div class="buttons">
|
||||
<button type="submit" class="btn btn-primary me-2" id="loginBtn">Login</button>
|
||||
<button id="clearBtn" class="btn btn-danger">Clear</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<script>
|
||||
const canvas = document.getElementById('pumpkin_canvas');
|
||||
const ctx = canvas.getContext('2d');
|
||||
const img = new Image();
|
||||
img.src = '/static/pumpkin.png';
|
||||
|
||||
const GRID_SIZE = {{ grid_size }};
|
||||
const CELL_SIZE = canvas.width / GRID_SIZE;
|
||||
|
||||
img.onload = () => {
|
||||
ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
|
||||
drawGrid();
|
||||
};
|
||||
|
||||
let drawing = false;
|
||||
let currentPattern = [];
|
||||
let savedPattern = null;
|
||||
|
||||
canvas.addEventListener('mousedown', () => { drawing = true; });
|
||||
canvas.addEventListener('mouseup', () => { drawing = false; });
|
||||
canvas.addEventListener('mousemove', draw);
|
||||
|
||||
function draw(e) {
|
||||
if (!drawing) return;
|
||||
var rect = canvas.getBoundingClientRect();
|
||||
var x = e.clientX - rect.left;
|
||||
var y = e.clientY - rect.top;
|
||||
|
||||
var gridX = Math.floor(x / CELL_SIZE);
|
||||
var gridY = Math.floor(y / CELL_SIZE);
|
||||
|
||||
var cellX = gridX * CELL_SIZE + CELL_SIZE / 3;
|
||||
var cellY = gridY * CELL_SIZE + CELL_SIZE / 3;
|
||||
|
||||
var pixel = ctx.getImageData(cellX, cellY, 1, 1).data;
|
||||
|
||||
if (pixel[0] >= 254 && (pixel[1] >= 124 && pixel[1] <= 126)) {
|
||||
var key = `${gridX},${gridY}`;
|
||||
|
||||
if (!currentPattern.includes(key)) {
|
||||
currentPattern.push(key);
|
||||
ctx.fillStyle = 'black';
|
||||
ctx.fillRect(cellX - CELL_SIZE / 3, cellY - CELL_SIZE / 3, CELL_SIZE, CELL_SIZE);
|
||||
}
|
||||
}
|
||||
else {
|
||||
console.log(pixel);
|
||||
}
|
||||
}
|
||||
|
||||
function drawGrid() {
|
||||
ctx.strokeStyle = 'rgba(0, 0, 0, 0.6)';
|
||||
ctx.lineWidth = 1;
|
||||
|
||||
for (let i = 0; i <= GRID_SIZE; i++) {
|
||||
const pos = i * CELL_SIZE;
|
||||
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(pos, 0);
|
||||
ctx.lineTo(pos, canvas.height);
|
||||
ctx.stroke();
|
||||
|
||||
ctx.beginPath()
|
||||
ctx.moveTo(0, pos);
|
||||
ctx.lineTo(canvas.width, pos);
|
||||
ctx.stroke()
|
||||
}
|
||||
}
|
||||
|
||||
document.getElementById("login_form").addEventListener('submit', function(event) {
|
||||
document.getElementById('pattern_field').value = JSON.stringify(currentPattern);
|
||||
});
|
||||
|
||||
|
||||
document.getElementById('clearBtn').addEventListener('click', clearCanvas);
|
||||
|
||||
function clearCanvas() {
|
||||
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
||||
ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
|
||||
drawGrid()
|
||||
currentPattern = [];
|
||||
}
|
||||
|
||||
</script>
|
||||
{% endblock body %}
|
||||
116
templates/register.jinja2
Normal file
116
templates/register.jinja2
Normal file
@@ -0,0 +1,116 @@
|
||||
{% extends "base.jinja2" %}
|
||||
|
||||
{% block title %}Loginween Register{% endblock %}
|
||||
|
||||
{% block nav %}
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" aria-current="page" href="/login">Login</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="/register">Register</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="/logout">Logout</a>
|
||||
</li>
|
||||
{% endblock %}
|
||||
|
||||
{% block body %}
|
||||
<form id="register_form" method="post" target="/register">
|
||||
<div class="position-absolute top-50 start-50 translate-middle text-center">
|
||||
<h1>Draw a carving to register!</h1>
|
||||
<input type="hidden" name="pattern" id="pattern_field">
|
||||
<canvas id="pumpkin_canvas" width="600" height="600" class="my-3"></canvas>
|
||||
<div class="input-group mb-3">
|
||||
<input id="username_field" name="username" type="text" class="form-control" placeholder="Username" aria-label="Username">
|
||||
</div>
|
||||
<div class="buttons">
|
||||
<button type="submit" class="btn btn-primary me-2" id="registerBtn">Register</button>
|
||||
<button id="clearBtn" class="btn btn-danger">Clear</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<script>
|
||||
const canvas = document.getElementById('pumpkin_canvas');
|
||||
const ctx = canvas.getContext('2d');
|
||||
const img = new Image();
|
||||
img.src = '/static/pumpkin.png';
|
||||
|
||||
const GRID_SIZE = {{ grid_size }};
|
||||
const CELL_SIZE = canvas.width / GRID_SIZE;
|
||||
|
||||
img.onload = () => {
|
||||
ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
|
||||
drawGrid();
|
||||
};
|
||||
|
||||
let drawing = false;
|
||||
let currentPattern = [];
|
||||
let savedPattern = null;
|
||||
|
||||
canvas.addEventListener('mousedown', () => { drawing = true; });
|
||||
canvas.addEventListener('mouseup', () => { drawing = false; });
|
||||
canvas.addEventListener('mousemove', draw);
|
||||
|
||||
function draw(e) {
|
||||
if (!drawing) return;
|
||||
var rect = canvas.getBoundingClientRect();
|
||||
var x = e.clientX - rect.left;
|
||||
var y = e.clientY - rect.top;
|
||||
|
||||
var gridX = Math.floor(x / CELL_SIZE);
|
||||
var gridY = Math.floor(y / CELL_SIZE);
|
||||
|
||||
var cellX = gridX * CELL_SIZE + CELL_SIZE / 3;
|
||||
var cellY = gridY * CELL_SIZE + CELL_SIZE / 3;
|
||||
|
||||
var pixel = ctx.getImageData(cellX, cellY, 1, 1).data;
|
||||
|
||||
if (pixel[0] >= 254 && (pixel[1] >= 124 && pixel[1] <= 126)) {
|
||||
var key = `${gridX},${gridY}`;
|
||||
|
||||
if (!currentPattern.includes(key)) {
|
||||
currentPattern.push(key);
|
||||
ctx.fillStyle = 'black';
|
||||
ctx.fillRect(cellX - CELL_SIZE / 3, cellY - CELL_SIZE / 3, CELL_SIZE, CELL_SIZE);
|
||||
}
|
||||
}
|
||||
else {
|
||||
console.log(pixel);
|
||||
}
|
||||
}
|
||||
|
||||
function drawGrid() {
|
||||
ctx.strokeStyle = 'rgba(0, 0, 0, 0.6)';
|
||||
ctx.lineWidth = 1;
|
||||
|
||||
for (let i = 0; i <= GRID_SIZE; i++) {
|
||||
const pos = i * CELL_SIZE;
|
||||
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(pos, 0);
|
||||
ctx.lineTo(pos, canvas.height);
|
||||
ctx.stroke();
|
||||
|
||||
ctx.beginPath()
|
||||
ctx.moveTo(0, pos);
|
||||
ctx.lineTo(canvas.width, pos);
|
||||
ctx.stroke()
|
||||
}
|
||||
}
|
||||
|
||||
document.getElementById("register_form").addEventListener('submit', function(event) {
|
||||
document.getElementById('pattern_field').value = JSON.stringify(currentPattern);
|
||||
});
|
||||
|
||||
document.getElementById('clearBtn').addEventListener('click', clearCanvas);
|
||||
|
||||
function clearCanvas() {
|
||||
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
||||
ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
|
||||
drawGrid()
|
||||
currentPattern = [];
|
||||
}
|
||||
|
||||
</script>
|
||||
{% endblock body %}
|
||||
Reference in New Issue
Block a user