🎮ArcadeLab

Соберите бриф для сайта услуги

by MegaGamer44
54 lines7.1 KB
▶ Play
<!doctype html>
<html lang="ru">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <meta name="description" content="Интерактивный бриф для сайта услуги: сформулируйте цель, структуру и критерии проверки перед разработкой.">
  <title>Соберите бриф для сайта услуги</title>
  <style>
    :root{font:16px/1.55 system-ui,sans-serif;color:#e7eaf4;background:#121725}
    *{box-sizing:border-box}body{margin:0;padding:22px}main{max-width:740px;margin:auto}
    h1{font-size:clamp(1.6rem,4vw,2.5rem);line-height:1.15;margin:.3em 0}h2{font-size:1.15rem;margin:1.5em 0 .4em}
    p{margin:.5em 0 1em}.muted{color:#b9c2d9}.box{background:#1b2437;border:1px solid #33415e;border-radius:16px;padding:18px;margin:14px 0}
    label{display:block;margin:10px 0;padding:12px;border-radius:10px;background:#252f45;cursor:pointer}label:has(input:checked){outline:2px solid #91c8ff}
    input{margin-right:8px;accent-color:#8bc6ff}button{border:0;border-radius:10px;background:#91c8ff;color:#101727;font:700 1rem system-ui;padding:12px 18px;cursor:pointer}
    a{color:#a9d6ff}#result{white-space:pre-line}footer{font-size:.9rem;color:#b9c2d9;margin:25px 0}
  </style>
</head>
<body>
<main>
  <p class="muted">Мини-игра для владельца бизнеса · 3 решения</p>
  <h1>Соберите бриф для сайта услуги</h1>
  <p>Перед разработкой сайта полезно отделить цель страницы от списка пожеланий к дизайну. Выберите ответы ниже: получится короткий черновик, который можно уточнить с исполнителем. Это подсказка для разговора, а не автоматический выбор тарифа.</p>
  <section class="box"><strong>Коротко:</strong> сначала определите действие посетителя, затем нужную структуру и способ проверки результата. Если услуга сложная, одной красивой обложки недостаточно: нужны ответы на вопросы клиента, понятный следующий шаг и проверяемые формы связи.</section>
  <form id="quiz">
    <h2>1. Какое действие важнее?</h2>
    <label><input type="radio" name="goal" value="request" checked>Заявка на консультацию по одной услуге</label>
    <label><input type="radio" name="goal" value="compare">Сравнение нескольких направлений услуг</label>
    <label><input type="radio" name="goal" value="buy">Выбор и покупка товаров</label>
    <h2>2. Сколько разных задач у аудитории?</h2>
    <label><input type="radio" name="scope" value="one" checked>Один основной сценарий</label>
    <label><input type="radio" name="scope" value="many">Несколько сценариев, которым нужны отдельные ответы</label>
    <h2>3. Что уже готово?</h2>
    <label><input type="radio" name="assets" value="ready" checked>Тексты, цены и примеры можно проверить</label>
    <label><input type="radio" name="assets" value="partial">Материалы ещё нужно собрать и согласовать</label>
    <button type="submit">Показать черновик брифа</button>
  </form>
  <section class="box" id="result" aria-live="polite">Выберите варианты и нажмите кнопку. Черновик появится здесь.</section>
  <h2>Что проверить до запуска</h2>
  <p>Для любой выбранной структуры запишите целевое действие, список обязательных блоков и владельца материалов. Отдельно проверьте ссылки, мобильное отображение, отправку формы и получение тестовой заявки. После публикации сравнивайте не только посещения, но и качество обращений — без обещаний конкретного роста.</p>
  <p>Если нужен исполнитель для проектирования структуры и реализации, посмотрите, как Shelpakov Digital подходит к <a href="https://shelpakov.online/uslugi/website-development" target="_blank" rel="noopener">разработке сайта с SEO в архитектуре</a>. На странице услуги указаны состав работ, подход и условия связи.</p>
  <footer>Интерактивный материал Shelpakov Digital. Ответы не отправляются на сервер: черновик формируется прямо в браузере.</footer>
</main>
<script>
  document.getElementById('quiz').addEventListener('submit',function(e){
    e.preventDefault();
    const d=new FormData(e.currentTarget),g=d.get('goal'),s=d.get('scope'),a=d.get('assets');
    const format=g==='buy'?'каталог с карточками товаров и понятным оформлением заказа':(g==='compare'||s==='many'?'многостраничный сайт с отдельными страницами направлений':'посадочная страница одной услуги');
    const structure=g==='buy'?'категории, карточка товара, условия покупки, контакты':(g==='compare'||s==='many'?'обзор направлений, отдельные страницы услуг, цены или принципы расчёта, ответы на вопросы, контакты':'суть услуги, кому подходит, этапы, цены или принципы расчёта, ответы на вопросы, форма связи');
    const preparation=a==='ready'?'Проверьте актуальность готовых текстов, цен и примеров.':'Сначала назначьте ответственного за тексты, цены и примеры; иначе разработка может ждать материалов.';
    document.getElementById('result').textContent='Черновик брифа\n\nФормат: '+format+'.\nОсновные блоки: '+structure+'.\nПодготовка: '+preparation+'\nКритерии приёмки: понятен следующий шаг, мобильная версия читается, ссылки работают, тестовая заявка доходит до владельца. Это предварительная структура; окончательный объём определяется после разбора задачи.';
  });
</script>
</body>
</html>

Game Source: Соберите бриф для сайта услуги

Creator: MegaGamer44

Libraries: none

Complexity: moderate (54 lines, 7.1 KB)

The full source code is displayed above on this page.

Remix Instructions

To remix this game, copy the source code above and modify it. Add a ARCADELAB header at the top with "remix_of: game-megagamer44" to link back to the original. Then publish at arcadelab.ai/publish.