erjemin/2020-dq
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

mod: цвет фона определяется на фронтенде в JS.

Browse Source
This commit is contained in:
Sergei Erjemin
2026-02-18 19:18:43 +03:00
parent dda71c9dc9
commit b7321220c2
4 changed files with 70 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
dicquo/templates/base.html
View File

@@ -34,16 +34,20 @@
body {
margin: 0;
min-height: 100vh;
background: rgb({% for i in CLR %}{% if forloop.counter <= 3 %}{{ i|stringformat:"02d" }}{% if forloop.counter < 3 %},{%endif %}{% endif %}{% empty %}87,00,00{% endfor %});
background: -webkit-linear-gradient(to right, rgb({% for i in CLR %}{% if forloop.counter <= 3 %}{{ i|stringformat:"02d" }}{% if forloop.counter < 3 %},{%endif %}{% endif %}{% empty %}87,00,00{% endfor %}), rgb({% for i in CLR %}{% if forloop.counter > 3 %}{{ i|stringformat:"02d" }}{% if not forloop.last %},{%endif %}{% endif %}{% empty %}19,10,05{% endfor %}));
background: linear-gradient(to right, rgb({% for i in CLR %}{% if forloop.counter <= 3 %}{{ i|stringformat:"02d" }}{% if forloop.counter < 3 %},{%endif %}{% endif %}{% empty %}87,00,00{% endfor %}), rgb({% for i in CLR %}{% if forloop.counter > 3 %}{{ i|stringformat:"02d" }}{% if not forloop.last %},{%endif %}{% endif %}{% empty %}19,10,05{% endfor %}));
background-color: #570000; /* Fallback color */
transition: background 1s ease; /* Плавное появление градиента */
}
</style>
{% block ExtraHead %}{% endblock %}
</head>
<body>
{% if DQ %}
<span id="dq-content-raw" style="display:none;">{{ DQ.szContent }}</span>
{% endif %}
{% block CONTENT %}{% endblock %}
{% include "blocks/counters.html" %}
<script src="{% static 'js/bg-generator.js' %}"></script>
</body>
</html>

2
dicquo/templates/index.html
View File

@@ -65,7 +65,7 @@
{% if IMAGE %}
<div class="image-col" id="image">
<center>
<div style="background:rgba({% for i in CLR %}{% if forloop.counter <= 3 %}{{ i|stringformat:"02d" }}{% if forloop.counter < 3 %},{%endif %}{% endif %}{% empty %}87,00,00{% endfor %},0.7);">
<div style="background:rgba(87,0,0,0.7);">
<div><img src="{{IMAGE.url}}" alt="{% if AUTHOR %}{{ AUTHOR.szAuthor }}{% else %}Dictum & Quotes{% endif %}" title="{% if AUTHOR %}{{ AUTHOR.szAuthor }}{% else %}Dictum & Quotes{% endif %}" /></div>
</div>
</center>

6
dicquo/web/views.py
View File

@@ -11,8 +11,6 @@ __status__ = "in progress"
from django.core.exceptions import ObjectDoesNotExist
from django.views.generic import DetailView, TemplateView
import time
import hashlib
import random
import pytils
from web.models import TbDictumAndQuotes, TbImages, TbAuthor
@@ -73,10 +71,6 @@ class CommonContextMixin:
seen_ids.pop(0)
request.session['seen_ids'] = seen_ids
# --- 2. ГЕНЕРАЦИЯ ЦВЕТОВ ---
num = int(hashlib.blake2s(dq.szContent.encode("utf-8"), digest_size=1).hexdigest(), 16)
clr = sorted([num / 2, num / 3, num / 5, num / 7, num / 11, num / 1.5], key=lambda A: random.random())
context.update({'CLR': clr})
context.update({'DQ': dq})
# --- 3. АВТОР И ТЕГИ ---

62
public/static/js/bg-generator.js Normal file
View File

@@ -0,0 +1,62 @@
// bg-generator.js: Generates a unique gradient background based on text content
document.addEventListener("DOMContentLoaded", function() {
// 1. Get the text to hash (from hidden span in base.html)
const rawSpan = document.getElementById('dq-content-raw');
let text = rawSpan ? rawSpan.innerText.trim() : "";
if (!text) {
text = "DictumAndQuotesDefault" + Math.random(); // Fallback random if no text
}
// 2. Hash function (DJB2)
let hash = 5381;
for (let i = 0; i < text.length; i++) {
// Force 32-bit integer arithmetic
hash = ((hash << 5) + hash) + text.charCodeAt(i);
hash = hash & hash; // Convert to 32bit integer
}
// 3. Generate 6 color components deterministically from the hash
// We need 6 numbers between 0 and 255.
// Let's use pseudo-random generator seeded by hash
function Mulberry32(a) {
return function() {
var t = a += 0x6D2B79F5;
t = Math.imul(t ^ (t >>> 15), t | 1);
t ^= t + Math.imul(t ^ (t >>> 7), t | 61);
return ((t ^ (t >>> 14)) >>> 0) / 4294967296;
}
}
const rand = Mulberry32(hash); // Seeded random generator
// Generate 6 color components with darker range for "meditative" feel
let colors = [];
for(let i=0; i<6; i++) {
// Generate number between 10 and 80 (dark colors)
colors.push(Math.floor(rand() * 70) + 10);
}
// Shuffle slightly based on random to allow variation on refresh (optional)
// colors.sort(() => Math.random() - 0.5);
const rgb1 = `rgb(${colors[0]}, ${colors[1]}, ${colors[2]})`;
const rgb2 = `rgb(${colors[3]}, ${colors[4]}, ${colors[5]})`;
console.log("DQ BG Generator:", text.substring(0, 20) + "...", hash, rgb1, rgb2);
// 4. Apply to body
// Using linear-gradient to right with standard syntax
const bgString = `linear-gradient(90deg, ${rgb1} 0%, ${rgb2} 100%)`;
document.body.style.background = bgString;
// 5. Apply to image background container (if exists on index page)
const imgBgContainer = document.querySelector('.image-col center > div');
if (imgBgContainer) {
// Use the first color of the gradient with opacity 0.7
imgBgContainer.style.background = `rgba(${colors[0]}, ${colors[1]}, ${colors[2]}, 0.7)`;
}
});