Blank page

Html code will be here

<link href="https://fonts.googleapis.com/css2?family=Unbounded:wght@500;600;700&family=Golos+Text:wght@400;500;600&family=PT+Serif:wght@400;700&display=swap" rel="stylesheet">
<style>
.ulia-quiz-widget {
--primary: #E8641E;
--primary-light: #F5934F;
--dark: #3A2B22;
--cream: #FAF6F0;
--darkbg: #2A211B;
--border: #EBDFD1;
--risk-low: #4E8B6B;
--risk-mid: #D08A2A;
--risk-high: #C0392B;
font-family: 'Golos Text', sans-serif;
color: var(--dark);
display: flex;
justify-content: center;
padding: 24px 16px;
box-sizing: border-box;
}
.ulia-quiz-widget, .ulia-quiz-widget * { box-sizing: border-box; }
.ulia-quiz-widget h1, .ulia-quiz-widget h2, .ulia-quiz-widget h3 { font-family: 'PT Serif', serif; margin: 0; }
.ulia-quiz-widget p { margin: 0; }

.ulia-quiz-widget .app {
width: 100%;
max-width: 460px;
background: var(--cream);
border-radius: 20px;
border: 1px solid var(--border);
padding: 40px 28px 32px;
position: relative;
min-height: 520px;
display: flex;
flex-direction: column;
box-shadow: 0 20px 50px rgba(58,43,34,0.10);
margin: 0 auto;
}

.ulia-quiz-widget .brandmark-top {
font-family: 'Unbounded', sans-serif;
font-size: 11px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--primary);
opacity: 0.85;
margin-bottom: 24px;
}

.ulia-quiz-widget .progress-wrap {
margin-bottom: 28px;
display: none;
}
.ulia-quiz-widget .progress-wrap.visible { display: block; }
.ulia-quiz-widget .progress-label {
font-size: 12px;
color: #8A6E5C;
margin-bottom: 8px;
}
.ulia-quiz-widget .progress-bar {
display: flex;
gap: 4px;
}
.ulia-quiz-widget .progress-bar span {
flex: 1;
height: 4px;
border-radius: 2px;
background: var(--primary);
opacity: 0.16;
}
.ulia-quiz-widget .progress-bar span.on { opacity: 1; }

.ulia-quiz-widget .screen {
display: none;
flex-direction: column;
flex: 1;
}
.ulia-quiz-widget .screen.active { display: flex; }

/* ===== START SCREEN ===== */
.ulia-quiz-widget .accent-bar {
width: 40px;
height: 4px;
border-radius: 2px;
background: var(--primary);
margin-bottom: 20px;
}
.ulia-quiz-widget #screen-start h1 {
font-size: 27px;
font-weight: 700;
line-height: 1.35;
margin-bottom: 14px;
}
.ulia-quiz-widget #screen-start p {
font-size: 15px;
line-height: 1.6;
color: #6B5A4C;
margin-bottom: 28px;
}

/* ===== BUTTONS ===== */
.ulia-quiz-widget .btn {
font-family: 'Unbounded', sans-serif;
font-size: 14px;
font-weight: 600;
padding: 16px 22px;
border-radius: 12px;
border: none;
cursor: pointer;
text-align: center;
text-decoration: none;
display: block;
transition: transform 0.15s ease, opacity 0.15s ease;
}
.ulia-quiz-widget .btn:active { transform: scale(0.98); }
.ulia-quiz-widget .btn-primary {
background: var(--primary);
color: #fff;
align-self: flex-start;
}
.ulia-quiz-widget .btn-primary:hover { background: #d4581a; }

.ulia-quiz-widget .answer-row {
display: flex;
gap: 12px;
margin-top: auto;
}
.ulia-quiz-widget .btn-answer {
flex: 1;
background: #fff;
color: var(--dark);
border: 1.5px solid var(--border);
font-family: 'Golos Text', sans-serif;
font-weight: 600;
font-size: 15px;
padding: 16px;
}
.ulia-quiz-widget .btn-answer:hover {
border-color: var(--primary);
color: var(--primary);
}

/* ===== QUESTION SCREEN ===== */
.ulia-quiz-widget #screen-question .q-eyebrow {
font-size: 12px;
color: var(--primary);
font-weight: 600;
margin-bottom: 14px;
}
.ulia-quiz-widget #screen-question .q-text {
font-family: 'PT Serif', serif;
font-weight: 700;
font-size: 22px;
line-height: 1.4;
flex: 1;
display: flex;
align-items: center;
}

/* ===== RESULT SCREENS ===== */
.ulia-quiz-widget .result-badge {
font-family: 'Unbounded', sans-serif;
font-size: 12px;
font-weight: 600;
letter-spacing: 0.04em;
padding: 7px 14px;
border-radius: 8px;
display: inline-block;
margin-bottom: 20px;
width: fit-content;
}
.ulia-quiz-widget .badge-low { background: rgba(78,139,107,0.12); color: var(--risk-low); }
.ulia-quiz-widget .badge-mid { background: rgba(208,138,42,0.14); color: var(--risk-mid); }
.ulia-quiz-widget .badge-high { background: rgba(192,57,43,0.13); color: var(--risk-high); }

.ulia-quiz-widget .result-score {
font-family: 'PT Serif', serif;
font-weight: 700;
font-size: 44px;
line-height: 1;
margin-bottom: 6px;
}
.ulia-quiz-widget .result-score span {
font-size: 18px;
font-weight: 400;
opacity: 0.6;
}
.ulia-quiz-widget .result-title {
font-family: 'PT Serif', serif;
font-weight: 700;
font-size: 21px;
line-height: 1.35;
margin-bottom: 14px;
}
.ulia-quiz-widget .result-desc {
font-size: 15px;
line-height: 1.6;
color: #6B5A4C;
margin-bottom: 22px;
}
.ulia-quiz-widget .result-context {
font-family: 'PT Serif', serif;
font-style: italic;
font-size: 16.5px;
line-height: 1.6;
color: var(--dark);
background: rgba(232,100,30,0.09);
border-radius: 16px;
padding: 22px 20px 20px 46px;
margin-bottom: 24px;
position: relative;
}
.ulia-quiz-widget .result-context::before {
content: "«";
position: absolute;
left: 14px;
top: 8px;
font-family: 'PT Serif', serif;
font-style: normal;
font-weight: 700;
font-size: 42px;
line-height: 1;
color: var(--primary);
}
.ulia-quiz-widget .result-context .signature {
display: block;
margin-top: 12px;
font-family: 'Unbounded', sans-serif;
font-style: normal;
font-size: 11px;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--primary);
opacity: 0.85;
}
.ulia-quiz-widget .cta-buttons {
display: flex;
flex-direction: column;
gap: 10px;
margin-top: auto;
}
.ulia-quiz-widget .btn-tg { background: #29A9EB; color: #fff; }
.ulia-quiz-widget .btn-max { background: var(--dark); color: #fff; }

.ulia-quiz-widget .restart-link {
margin-top: 18px;
text-align: center;
font-size: 13px;
color: #8A6E5C;
text-decoration: underline;
cursor: pointer;
}

@media (max-width: 380px) {
.ulia-quiz-widget .app { padding: 32px 20px 24px; min-height: 480px; }
.ulia-quiz-widget #screen-start h1 { font-size: 23px; }
.ulia-quiz-widget #screen-question .q-text { font-size: 19px; }
.ulia-quiz-widget .result-score { font-size: 36px; }
}
</style>

<div class="ulia-quiz-widget">
<div class="app">
<div class="brandmark-top">Третьякова Юлия · Налоги и бухгалтерия</div>

<div class="progress-wrap" id="progressWrap">
<div class="progress-label" id="progressLabel">Вопрос 1 из 15</div>
<div class="progress-bar" id="progressBar"></div>
</div>


<div class="screen active" id="screen-start">
<div class="accent-bar"></div>
<h1>Готова ли ваша модель работы с самозанятыми к проверке?</h1>
<p>15 вопросов, 2 минуты - узнаете уровень риска</p>
<button class="btn btn-primary" id="startBtn" style="margin-top:auto;">Начать тест</button>
</div>


<div class="screen" id="screen-question">
<div class="q-eyebrow" id="qEyebrow">Вопрос</div>
<div class="q-text" id="qText"></div>
<div class="answer-row">
<button class="btn btn-answer" data-answer="1">Да</button>
<button class="btn btn-answer" data-answer="0">Нет</button>
</div>
</div>


<div class="screen" id="screen-low">
<span class="result-badge badge-low">Низкий риск</span>
<div class="result-score" id="scoreLow">0<span>из 15</span></div>
<div class="result-title">Модель работы в целом устойчива</div>
<div class="result-desc">Модель работы в целом устойчива, но есть точки, которые стоит подчистить.</div>
<div class="result-context">Даже пара слабых мест может сыграть роль, если налоговая решит присмотреться внимательнее. Разберём, что уже хорошо, а что стоит закрыть уже сейчас - на консультации по самозанятым у Юлии.<span class="signature">- Юлия</span></div>
<div class="cta-buttons">
<a class="btn btn-tg" href="https://t.me/tretiakova_ulia" target="_blank" rel="noopener">Написать в Telegram</a>
<a class="btn btn-max" href="https://max.ru/u/f9LHodD0cOISO8drEMa2a8tj2SYLBhcNazXJzLPrXO_3GNyyaCIXsgEIcM4" target="_blank" rel="noopener">Написать в MAX</a>
</div>
<div class="restart-link" data-restart>Пройти тест ещё раз</div>
</div>


<div class="screen" id="screen-mid">
<span class="result-badge badge-mid">Средний риск</span>
<div class="result-score" id="scoreMid">0<span>из 15</span></div>
<div class="result-title">Есть заметные признаки трудовых отношений</div>
<div class="result-desc">Есть заметные признаки трудовых отношений, при проверке возможны вопросы и доначисления.</div>
<div class="result-context">Такие признаки обычно и становятся зацепкой для проверки. Лучше разобрать их сейчас, пока это ваш выбор, а не требование налоговой - запишитесь на консультацию по самозанятым к Юлии.<span class="signature">- Юлия</span></div>
<div class="cta-buttons">
<a class="btn btn-tg" href="https://t.me/tretiakova_ulia" target="_blank" rel="noopener">Написать в Telegram</a>
<a class="btn btn-max" href="https://max.ru/u/f9LHodD0cOISO8drEMa2a8tj2SYLBhcNazXJzLPrXO_3GNyyaCIXsgEIcM4" target="_blank" rel="noopener">Написать в MAX</a>
</div>
<div class="restart-link" data-restart>Пройти тест ещё раз</div>
</div>


<div class="screen" id="screen-high">
<span class="result-badge badge-high">Высокий риск</span>
<div class="result-score" id="scoreHigh">0<span>из 15</span></div>
<div class="result-title">Модель почти неотличима от трудовой</div>
<div class="result-desc">Модель работы почти неотличима от трудовой - риск переквалификации и доначислений высокий.</div>
<div class="result-context">При таком количестве признаков риск доначислений не гипотетический, а реальный. Чем раньше пересоберём модель работы, тем меньше будет стоить её исправление - запишитесь на консультацию по самозанятым к Юлии, разберём вашу индивидуальную ситуацию по шагам.<span class="signature">- Юлия</span></div>
<div class="cta-buttons">
<a class="btn btn-tg" href="https://t.me/tretiakova_ulia" target="_blank" rel="noopener">Написать в Telegram</a>
<a class="btn btn-max" href="https://max.ru/u/f9LHodD0cOISO8drEMa2a8tj2SYLBhcNazXJzLPrXO_3GNyyaCIXsgEIcM4" target="_blank" rel="noopener">Написать в MAX</a>
</div>
<div class="restart-link" data-restart>Пройти тест ещё раз</div>
</div>

</div>
</div>

<script>
(function() {
const questions = [
"Оплата самозанятому одна и та же сумма каждый месяц?",
"Оплата происходит в одну и ту же дату каждый месяц?",
"Он отчитывается о работе ежедневно или почти ежедневно?",
"Работает по графику, который задаёте вы (а не сам определяет часы)?",
"У него нет других клиентов, кроме вас?",
"Акты выполненных работ формальные - без описания конкретного результата?",
"Акт выполненных работ заполняете вы, а не самозанятый?",
"В переписке вы даёте ему рабочие поручения так же, как штатному сотруднику?",
"Он использует ваше оборудование, программы или рабочее место?",
"Договор был скачан из интернета, составлен в нейросети и не менялся под вашу специфику?",
"Вы не проверяли, действителен ли статус самозанятого на момент последней оплаты?",
"У вас нет внутреннего документа о том, как оформлять работу с самозанятыми?",
"Есть ли у самозанятого email на домене компании, визитка или подпись с должностью в мессенджерах?",
"Самозанятый выполняет ту же работу, что и штатные сотрудники в вашей команде?",
"Выплаты происходят два раза в месяц?"
];

let currentQuestion = 0;
let score = 0;

const screens = {
start: document.getElementById('screen-start'),
question: document.getElementById('screen-question'),
low: document.getElementById('screen-low'),
mid: document.getElementById('screen-mid'),
high: document.getElementById('screen-high'),
};
const progressWrap = document.getElementById('progressWrap');
const progressBar = document.getElementById('progressBar');
const progressLabel = document.getElementById('progressLabel');
const qText = document.getElementById('qText');
const qEyebrow = document.getElementById('qEyebrow');

function showScreen(name) {
Object.values(screens).forEach(s => s.classList.remove('active'));
screens[name].classList.add('active');
}

function buildProgressBar() {
progressBar.innerHTML = '';
for (let i = 0; i < questions.length; i++) {
const span = document.createElement('span');
progressBar.appendChild(span);
}
}

function updateProgress() {
const segments = progressBar.children;
for (let i = 0; i < segments.length; i++) {
segments[i].classList.toggle('on', i <= currentQuestion);
}
progressLabel.textContent = `Вопрос ${currentQuestion + 1} из ${questions.length}`;
}

function renderQuestion() {
qEyebrow.textContent = `Вопрос ${currentQuestion + 1}`;
qText.textContent = questions[currentQuestion];
updateProgress();
}

function startTest() {
currentQuestion = 0;
score = 0;
buildProgressBar();
progressWrap.classList.add('visible');
showScreen('question');
renderQuestion();
}

function answer(value) {
score += value;
currentQuestion++;
if (currentQuestion < questions.length) {
renderQuestion();
} else {
finishTest();
}
}

function finishTest() {
progressWrap.classList.remove('visible');
let resultScreen;
if (score <= 4) {
resultScreen = 'low';
document.getElementById('scoreLow').innerHTML = score + '<span>из ' + questions.length + '</span>';
} else if (score <= 7) {
resultScreen = 'mid';
document.getElementById('scoreMid').innerHTML = score + '<span>из ' + questions.length + '</span>';
} else {
resultScreen = 'high';
document.getElementById('scoreHigh').innerHTML = score + '<span>из ' + questions.length + '</span>';
}
showScreen(resultScreen);
}

document.getElementById('startBtn').addEventListener('click', startTest);

document.querySelectorAll('.btn-answer').forEach(btn => {
btn.addEventListener('click', () => {
answer(parseInt(btn.dataset.answer, 10));
});
});

document.querySelectorAll('[data-restart]').forEach(el => {
el.addEventListener('click', startTest);
});
})();
</script>