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 { body {
margin: 0; margin: 0;
min-height: 100vh; 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-color: #570000; /* Fallback color */
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 %})); transition: background 1s ease; /* Плавное появление градиента */
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 %}));
} }
</style> </style>
{% block ExtraHead %}{% endblock %} {% block ExtraHead %}{% endblock %}
</head> </head>
<body> <body>
{% if DQ %}
<span id="dq-content-raw" style="display:none;">{{ DQ.szContent }}</span>
{% endif %}
{% block CONTENT %}{% endblock %} {% block CONTENT %}{% endblock %}
{% include "blocks/counters.html" %} {% include "blocks/counters.html" %}
<script src="{% static 'js/bg-generator.js' %}"></script>
</body> </body>
</html> </html>

2
dicquo/templates/index.html
View File

@@ -65,7 +65,7 @@
{% if IMAGE %} {% if IMAGE %}
<div class="image-col" id="image"> <div class="image-col" id="image">
<center> <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><img src="{{IMAGE.url}}" alt="{% if AUTHOR %}{{ AUTHOR.szAuthor }}{% else %}Dictum & Quotes{% endif %}" title="{% if AUTHOR %}{{ AUTHOR.szAuthor }}{% else %}Dictum & Quotes{% endif %}" /></div>
</div> </div>
</center> </center>

6
dicquo/web/views.py
View File

@@ -11,8 +11,6 @@ __status__ = "in progress"
from django.core.exceptions import ObjectDoesNotExist from django.core.exceptions import ObjectDoesNotExist
from django.views.generic import DetailView, TemplateView from django.views.generic import DetailView, TemplateView
import time import time
import hashlib
import random
import pytils import pytils
from web.models import TbDictumAndQuotes, TbImages, TbAuthor from web.models import TbDictumAndQuotes, TbImages, TbAuthor
@@ -73,10 +71,6 @@ class CommonContextMixin:
seen_ids.pop(0) seen_ids.pop(0)
request.session['seen_ids'] = seen_ids 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}) context.update({'DQ': dq})
# --- 3. АВТОР И ТЕГИ --- # --- 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)`;
}
});