[html]
<div class="ask-mephisto-widget">
<style>
.ask-mephisto-widget {
width: 760px;
max-width: 96%;
margin: 25px auto;
font-family: Georgia, "Times New Roman", serif;
color: #e9ded6;
}
.am-box {
position: relative;
overflow: hidden;
border: 1px solid rgba(170, 35, 45, 0.45);
border-radius: 26px;
padding: 34px 34px 30px;
background:
radial-gradient(circle at 50% 20%, rgba(160, 20, 35, 0.22), transparent 38%),
radial-gradient(circle at 80% 80%, rgba(115, 12, 25, 0.25), transparent 36%),
linear-gradient(135deg, #070506, #12080b 55%, #070506);
box-shadow:
0 0 35px rgba(140, 15, 30, 0.22),
inset 0 0 40px rgba(255, 255, 255, 0.03);
}
.am-box:before {
content: "";
position: absolute;
inset: -80px;
background:
linear-gradient(115deg, transparent 0%, rgba(255,255,255,0.04) 45%, transparent 55%),
repeating-linear-gradient(
90deg,
rgba(255,255,255,0.025) 0px,
rgba(255,255,255,0.025) 1px,
transparent 1px,
transparent 9px
);
opacity: 0.45;
pointer-events: none;
}
.am-title {
position: relative;
text-align: center;
letter-spacing: 4px;
text-transform: uppercase;
font-size: 13px;
color: #b98a86;
margin-bottom: 8px;
}
.am-name {
position: relative;
text-align: center;
font-size: 42px;
line-height: 1;
color: #f1e6dc;
text-shadow: 0 0 18px rgba(180, 18, 38, 0.45);
margin-bottom: 8px;
}
.am-subtitle {
position: relative;
text-align: center;
width: 520px;
max-width: 100%;
margin: 0 auto 28px;
font-size: 12px;
line-height: 1.6;
color: #9d8d89;
}
.am-main {
position: relative;
display: grid;
grid-template-columns: 250px 1fr;
gap: 28px;
align-items: center;
}
.am-orb-wrap {
display: flex;
justify-content: center;
align-items: center;
}
.am-orb {
position: relative;
width: 230px;
height: 230px;
border-radius: 50%;
background:
radial-gradient(circle at 38% 28%, rgba(255, 220, 210, 0.45), transparent 10%),
radial-gradient(circle at 45% 42%, rgba(220, 35, 55, 0.5), transparent 32%),
radial-gradient(circle at 50% 55%, #22080e 0%, #090506 68%);
box-shadow:
0 0 28px rgba(180, 15, 35, 0.5),
0 0 70px rgba(120, 5, 25, 0.35),
inset 0 0 38px rgba(255, 255, 255, 0.08),
inset 0 -30px 50px rgba(0, 0, 0, 0.75);
border: 1px solid rgba(255, 190, 180, 0.16);
}
.am-orb:before {
content: "";
position: absolute;
inset: 16px;
border-radius: 50%;
border: 1px solid rgba(255, 220, 210, 0.12);
box-shadow: inset 0 0 30px rgba(255,255,255,0.04);
}
.am-eye {
position: absolute;
left: 50%;
top: 42px;
transform: translateX(-50%);
width: 78px;
height: 34px;
border-radius: 50%;
background:
radial-gradient(circle at center, #f3d7c8 0 8%, #af1426 9% 22%, #130506 23% 100%);
box-shadow: 0 0 22px rgba(190, 20, 35, 0.8);
opacity: 0.82;
}
.am-eye:before,
.am-eye:after {
content: "";
position: absolute;
top: 15px;
width: 46px;
height: 1px;
background: rgba(255, 230, 220, 0.35);
}
.am-eye:before {
right: 70px;
transform: rotate(-12deg);
}
.am-eye:after {
left: 70px;
transform: rotate(12deg);
}
.am-answer {
position: absolute;
left: 26px;
right: 26px;
top: 96px;
min-height: 70px;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
font-size: 15px;
line-height: 1.35;
color: #f5e7df;
text-shadow: 0 0 12px rgba(0,0,0,0.9);
}
.am-shadow {
width: 170px;
height: 18px;
margin: 18px auto 0;
border-radius: 50%;
background: rgba(0,0,0,0.55);
filter: blur(7px);
}
.am-panel {
position: relative;
padding: 22px;
border-radius: 20px;
background: rgba(255,255,255,0.035);
border: 1px solid rgba(255,255,255,0.06);
box-shadow: inset 0 0 30px rgba(0,0,0,0.25);
}
.am-label {
display: block;
font-size: 11px;
text-transform: uppercase;
letter-spacing: 2px;
color: #b98a86;
margin-bottom: 10px;
}
.am-question {
width: 100%;
box-sizing: border-box;
border: 1px solid rgba(255,255,255,0.12);
border-radius: 14px;
padding: 13px 15px;
background: rgba(0,0,0,0.36);
color: #eadbd4;
font-family: Georgia, "Times New Roman", serif;
font-size: 14px;
outline: none;
margin-bottom: 14px;
}
.am-question::placeholder {
color: rgba(233, 222, 214, 0.36);
}
.am-question:focus {
border-color: rgba(210, 50, 65, 0.65);
box-shadow: 0 0 18px rgba(160, 20, 35, 0.25);
}
.am-button {
width: 100%;
border: none;
border-radius: 14px;
padding: 13px 16px;
cursor: pointer;
font-family: Georgia, "Times New Roman", serif;
font-size: 13px;
letter-spacing: 2px;
text-transform: uppercase;
color: #f6e7dc;
background:
linear-gradient(135deg, #4d0710, #9c1424 45%, #3b050c);
box-shadow:
0 8px 18px rgba(0,0,0,0.38),
inset 0 1px 0 rgba(255,255,255,0.18);
transition: transform 0.2s ease, filter 0.2s ease;
}
.am-button:hover {
transform: translateY(-1px);
filter: brightness(1.12);
}
.am-copy {
margin-top: 10px;
background:
linear-gradient(135deg, #1c1113, #442126 45%, #13090b);
}
.am-note {
min-height: 34px;
margin-top: 15px;
font-size: 12px;
line-height: 1.45;
color: #9d8d89;
text-align: center;
}
.am-feathers {
position: absolute;
right: 22px;
bottom: 18px;
font-size: 11px;
letter-spacing: 5px;
color: rgba(255,255,255,0.18);
transform: rotate(-8deg);
user-select: none;
}
.am-shake {
animation: amShake 0.72s ease;
}
@keyframes amShake {
0% { transform: translate(0, 0) rotate(0deg); }
12% { transform: translate(-4px, 3px) rotate(-3deg); }
24% { transform: translate(5px, -2px) rotate(3deg); }
36% { transform: translate(-5px, -1px) rotate(-2deg); }
48% { transform: translate(4px, 3px) rotate(2deg); }
60% { transform: translate(-3px, 2px) rotate(-1deg); }
72% { transform: translate(3px, -3px) rotate(1deg); }
100% { transform: translate(0, 0) rotate(0deg); }
}
@media (max-width: 690px) {
.am-main {
grid-template-columns: 1fr;
}
.am-orb {
width: 210px;
height: 210px;
}
.am-name {
font-size: 34px;
}
}
</style>
<div class="am-box">
<div class="am-title">oracle protocol</div>
<div class="am-name">Ask Mephisto</div>
<div class="am-subtitle">
задай вопрос, встряхни сферу и сделай вид, что этот ворон не просто только что испортил тебе жизнь
</div>
<div class="am-main">
<div class="am-orb-wrap">
<div>
<div class="am-orb">
<div class="am-eye"></div>
<div class="am-answer">Мефисто смотрит. Мефисто молчит. Пока.</div>
</div>
<div class="am-shadow"></div>
</div>
</div>
<div class="am-panel">
<label class="am-label">спросить мефисто</label>
<input class="am-question" type="text" placeholder="например: стоит ли мне писать этот пост сегодня?">
<button class="am-button am-ask" type="button">встряхнуть сферу</button>
<button class="am-button am-copy" type="button">скопировать ответ</button>
<div class="am-note">ответ появится внутри сферы</div>
</div>
</div>
<div class="am-feathers">⌁ ⌁ ⌁</div>
</div>
<script>
(function () {
var widgets = document.querySelectorAll(".ask-mephisto-widget");
widgets.forEach(function (widget) {
if (widget.dataset.ready === "true") return;
widget.dataset.ready = "true";
var answers = [
"Сайлас сказал бы да. Это уже плохой знак.",
"Мефисто видел будущее. Там ты снова страдаешь красиво.",
"Нет. Но если очень хочется, то да.",
"Ответ скрыт. Как и твое чувство самосохранения.",
"Пиши. Потом пожалеешь. Потом перечитаешь и будешь гордиться.",
"Сегодня лучше молчать. Но ты же не для этого спрашиваешь.",
"Да, но сделай это драматичнее.",
"Мефисто советует: сначала чай, потом катастрофа.",
"Ворон одобряет. Это должно тебя насторожить.",
"Слишком рано. Дай боли настояться.",
"Слишком поздно. Делай немедленно.",
"Ответ где-то между «гениально» и «зачем ты так с собой».",
"Да, но только если там можно добавить нож, письмо или поцелуй.",
"Нет. Но Мефисто сохранит компромат.",
"Судьба сказала: попробуй еще раз.",
"Это не знак. Это предупреждение.",
"Мефисто моргнул. Значит, шанс есть.",
"Да, но без счастливого финала.",
"Только если потом будет больно всем.",
"Сайлас уже знает ответ. И он ему нравится.",
"Лучше спроси Рафаэля. Мефисто занят осуждением.",
"Вариант опасный, красивый и совершенно твой.",
"Не сегодня. Сегодня пусть они помучаются ожиданием.",
"Сегодня. И желательно так, чтобы форум запомнил.",
"Мефисто передает: ты опять выбираешь самый драматичный путь."
];
var orb = widget.querySelector(".am-orb");
var answer = widget.querySelector(".am-answer");
var askButton = widget.querySelector(".am-ask");
var copyButton = widget.querySelector(".am-copy");
var input = widget.querySelector(".am-question");
var note = widget.querySelector(".am-note");
var lastQuestion = "";
var lastAnswer = "";
function askMephisto() {
var question = input.value.trim();
var randomAnswer = answers[Math.floor(Math.random() * answers.length)];
lastQuestion = question;
lastAnswer = randomAnswer;
orb.classList.remove("am-shake");
void orb.offsetWidth;
orb.classList.add("am-shake");
answer.textContent = "«" + randomAnswer + "»";
if (question.length > 0) {
note.textContent = "вопрос принят: «" + question + "»";
} else {
note.textContent = "вопрос не задан, но Мефисто все равно осудил";
}
input.value = "";
}
function copyToClipboard(text) {
if (navigator.clipboard && window.isSecureContext) {
return navigator.clipboard.writeText(text);
} else {
var temp = document.createElement("textarea");
temp.value = text;
temp.style.position = "fixed";
temp.style.left = "-9999px";
temp.style.top = "-9999px";
document.body.appendChild(temp);
temp.focus();
temp.select();
return new Promise(function (resolve, reject) {
try {
var successful = document.execCommand("copy");
document.body.removeChild(temp);
successful ? resolve() : reject();
} catch (err) {
document.body.removeChild(temp);
reject(err);
}
});
}
}
askButton.addEventListener("click", askMephisto);
input.addEventListener("keydown", function (event) {
if (event.key === "Enter") {
askMephisto();
}
});
copyButton.addEventListener("click", function () {
if (!lastAnswer) {
note.textContent = "сначала встряхни сферу";
return;
}
var copyText =
"
Вопрос Мефисто: " +
(lastQuestion || "вопрос был задан молча") +
"
\n\n" +
"Мефисто отвечает:\n" +
"" + lastAnswer + "";
copyToClipboard(copyText).then(function () {
note.textContent = "ответ Мефисто скопирован. Теперь можно вставить его в комментарий.";
}).catch(function () {
note.textContent = "не получилось скопировать автоматически, выдели ответ вручную.";
});
});
});
})();
</script>
</div>
[/html]
