csd4ni3l/loginween
1
0
Fork 0
mirror of https://github.com/csd4ni3l/loginween.git synced 2026-01-01 04:23:48 +01:00
Code Issues Packages Projects Releases Wiki Activity

Move all pumpkin code to pumpkin.js, remove posts route(will be moved to home), modify the post structure

Browse Source
This commit is contained in:
csd4ni3l
2025-10-23 17:53:23 +02:00
parent 507c3b56bd
commit e238687a09
8 changed files with 103 additions and 359 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
templates/base.jinja2
View File

@@ -5,7 +5,8 @@
<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">
<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>
<script src="/static/pumpkin.js"></script>
<title>{% block title %} {% endblock %}</title>
{% block head %} {% endblock %}
</head>
@@ -28,7 +29,5 @@
</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>

7
templates/index.jinja2
View File

@@ -6,9 +6,6 @@
<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="/posts">Posts</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/profile">Profile</a>
</li>
@@ -18,5 +15,7 @@
{% endblock %}
{% block body %}
<p>LoginWeen is a an app where you login/register with a halloween pumpkin carving as a password.</p>
<div class="position-absolute top-50 start-50 translate-middle text-center">
<p>LoginWeen is a an app where you login/register with a halloween pumpkin carving as a password.</p>
</div>
{% endblock body %}

80
templates/login.jinja2
View File

@@ -31,84 +31,6 @@
</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);
}
}
}
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 = [];
}
setup_pumpkin("pumpkin_canvas", "clearBtn", "login_form", "pattern_field", {{ grid_size }})
</script>
{% endblock body %}

22
templates/posts.jinja2
View File

@@ -1,22 +0,0 @@
{% extends "base.jinja2" %}
{% block title %} LoginWeen Posts {% endblock title %}
{% block nav %}
<li class="nav-item">
<a class="nav-link" href="/">Home</a>
</li>
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="/posts">Posts</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/profile">Profile</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/logout">Logout</a>
</li>
{% endblock %}
{% block body %}
{% endblock body %}

166
templates/profile.jinja2
View File

@@ -6,9 +6,6 @@
<li class="nav-item">
<a class="nav-link" href="/">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/posts">Posts</a>
</li>
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="/profile">Profile</a>
</li>
@@ -84,165 +81,8 @@
{% endif %}
</div>
<script type="module">
const canvas = document.getElementById('current_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);
}
}
}
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('currentclearBtn').addEventListener('click', clearCanvas);
function clearCanvas() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
drawGrid()
currentPattern = [];
}
document.getElementById("change_pattern_form").addEventListener('submit', function(event) {
document.getElementById('current_pattern_field').value = JSON.stringify(currentPattern);
});
</script>
<script type="module">
const canvas = document.getElementById('new_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);
}
}
}
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('newclearBtn').addEventListener('click', clearCanvas);
function clearCanvas() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
drawGrid()
currentPattern = [];
}
document.getElementById("change_pattern_form").addEventListener('submit', function(event) {
document.getElementById('new_pattern_field').value = JSON.stringify(currentPattern);
});
<script>
setup_pumpkin("current_pumpkin_canvas", "currentclearBtn", "change_pattern_form", "current_pattern_field", {{ grid_size }})
setup_pumpkin("new_pumpkin_canvas", "newclearBtn", "change_pattern_form", "new_pattern_field", {{ grid_size }})
</script>
{% endblock body %}

79
templates/register.jinja2
View File

@@ -31,83 +31,6 @@
</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);
}
}
}
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 = [];
}
setup_pumpkin("pumpkin_canvas", "clearBtn", "register_form", "pattern_field", {{ grid_size }})
</script>
{% endblock body %}