122 lines
4.2 KiB
HTML
Executable File
122 lines
4.2 KiB
HTML
Executable File
{% extends "base.html" %}
|
|
|
|
{% block content %}
|
|
<h2 class="section-title">Поиск</h2>
|
|
|
|
<form action="{{ url_for('search') }}" method="GET" class="mb-3" style="width: 100%;">
|
|
<div style="display: flex; gap: 20px; width: 100%;">
|
|
<input type="text" name="q" value="{{ query }}"
|
|
placeholder="Поиск по названию или данным..."
|
|
style="flex-grow: 1; width: calc(100% - 160px); padding: 15px 20px; font-size: 16px; border: 2px solid #1A1A1A; font-family: 'Oswald', sans-serif; background: #F5F0E6;">
|
|
<button class="btn btn-primary" type="submit" style="padding: 15px 40px; flex-shrink: 0;">Найти</button>
|
|
</div>
|
|
</form>
|
|
|
|
{% if results %}
|
|
<div class="info-block mb-3">
|
|
<p>Найдено работ: <strong>{{ results|length }}</strong> по запросу «{{ query }}»</p>
|
|
</div>
|
|
|
|
<div class="grid grid-3">
|
|
{% for art in results %}
|
|
<div class="card">
|
|
<div class="card-header">#{{ art.id }}</div>
|
|
<div class="card-body">
|
|
<h5 class="card-title">{{ art.title }}</h5>
|
|
<div class="art-preview mb-2" style="height: 160px;">
|
|
<canvas id="search-art-{{ art.id }}" width="350" height="160"></canvas>
|
|
</div>
|
|
<div class="text-price mb-2">
|
|
{{ art.price }} <span>₽</span>
|
|
</div>
|
|
{% if art.owner_id != session.user_id %}
|
|
<a href="{{ url_for('buy_artwork', artwork_id=art.id) }}" class="btn btn-primary">Купить</a>
|
|
{% else %}
|
|
<span class="badge badge-success">Ваша работа</span>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
{% elif query %}
|
|
<div class="info-block">
|
|
<p>По запросу «<strong>{{ query }}</strong>» ничего не найдено.</p>
|
|
</div>
|
|
{% else %}
|
|
<div class="info-block">
|
|
<p>Введите поисковый запрос для поиска работ.</p>
|
|
</div>
|
|
{% endif %}
|
|
|
|
<script>
|
|
const searchResultsData = {{ results|tojson }};
|
|
|
|
function drawArt(canvas, artData) {
|
|
try {
|
|
const ctx = canvas.getContext('2d');
|
|
const shapes = JSON.parse(artData);
|
|
|
|
ctx.fillStyle = '#F5F0E6';
|
|
ctx.fillRect(0, 0, canvas.width, canvas.height);
|
|
|
|
const scale = canvas.width / 100;
|
|
|
|
shapes.forEach(shape => {
|
|
ctx.save();
|
|
ctx.fillStyle = shape.color;
|
|
ctx.strokeStyle = shape.color;
|
|
ctx.lineWidth = 3;
|
|
|
|
const x = shape.x * scale;
|
|
const y = shape.y * scale;
|
|
const w = shape.width * scale;
|
|
const h = shape.height * scale;
|
|
const angle = (shape.angle || 0) * Math.PI / 180;
|
|
|
|
const cx = x + w / 2;
|
|
const cy = y + h / 2;
|
|
|
|
if (shape.type === 'rectangle' || shape.type === 'rotated_rect') {
|
|
ctx.translate(cx, cy);
|
|
ctx.rotate(angle);
|
|
ctx.fillRect(-w/2, -h/2, w, h);
|
|
} else if (shape.type === 'circle') {
|
|
ctx.beginPath();
|
|
ctx.arc(cx, cy, Math.min(w, h) / 2, 0, Math.PI * 2);
|
|
ctx.fill();
|
|
} else if (shape.type === 'triangle') {
|
|
ctx.translate(cx, cy);
|
|
ctx.rotate(angle);
|
|
ctx.beginPath();
|
|
ctx.moveTo(0, -h/2);
|
|
ctx.lineTo(w/2, h/2);
|
|
ctx.lineTo(-w/2, h/2);
|
|
ctx.closePath();
|
|
ctx.fill();
|
|
} else if (shape.type === 'line') {
|
|
ctx.translate(cx, cy);
|
|
ctx.rotate(angle);
|
|
ctx.beginPath();
|
|
ctx.moveTo(-w/2, 0);
|
|
ctx.lineTo(w/2, 0);
|
|
ctx.lineWidth = h || 4;
|
|
ctx.stroke();
|
|
}
|
|
ctx.restore();
|
|
});
|
|
} catch (e) {
|
|
console.error('Error:', e);
|
|
}
|
|
}
|
|
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
searchResultsData.forEach(art => {
|
|
const canvas = document.getElementById('search-art-' + art.id);
|
|
if (canvas && art.data) {
|
|
drawArt(canvas, art.data);
|
|
}
|
|
});
|
|
});
|
|
</script>
|
|
{% endblock %}
|