jweisbeck · igsekor · Oct 5, 2023 · Oct 5, 2023 · Oct 6, 2023 · Oct 6, 2023
diff --git a/.github/workflows/product-deploy.yml b/.github/workflows/product-deploy.yml
@@ -0,0 +1,25 @@
+name: Развёртывание кроссворда
+
+on:
+  workflow_dispatch:
+  push:
+    branches:
+      - master
+
+jobs:
+  product-deploy:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Загрузка репозитория
+        uses: actions/checkout@v4
+      - name: Установка ключа для пользователя
+        run: |
+          set -eu
+          mkdir "$HOME/.ssh"
+          chmod 700 "$HOME/.ssh"
+          echo "${{ secrets.DEPLOY_KEY }}" > "$HOME/.ssh/id_rsa"
+          chmod 600 "$HOME/.ssh/id_rsa"
+      - name: Развёртывание приложения
+        run: |
+          ssh-keyscan -H birthday.doka.guide >> ~/.ssh/known_hosts
+          rsync --archive --progress --compress --delete . [email protected]:/web/sites/birthday.doka.guide/www/2023
diff --git a/.prettierrc b/.prettierrc
@@ -0,0 +1,4 @@
+{
+  "tabWidth": 2,
+  "useTabs": false
+}
diff --git a/README b/README
diff --git a/README.md b/README.md
@@ -0,0 +1,5 @@
+# Лендинг с квизом на др Доки (2023)
+
+Никакая сборка не нужна. Просто открывайте _index.html_ в браузере =)
+
+Выбранный цвет сохраняется в localStorage.
diff --git a/about.html b/about.html
@@ -0,0 +1,124 @@
+<!DOCTYPE html>
+<html class="no-js" lang="ru">
+
+<head>
+  <meta charset="utf-8" />
+  <title>Что за квиз? — День рождения Доки</title>
+  <meta name="viewport" content="width=device-width,initial-scale=1" />
+  <meta property="og:title" content="🎂Доке 2 года!" />
+  <meta property="og:description" content="Разгадывайте кроссворд по фронтенду и забирайте подарки." />
+  <meta property="og:image" content="https://birthday.doka.guide/2023/images/share-img.png" />
+  <meta property="og:url" content="https://birthday.doka.guide/2023/" />
+  <meta property="og:type" content="website" />
+  <meta name="twitter:card" content="summary_large_image" />
+  <meta name="twitter:image" content="https://birthday.doka.guide/2023/images/share-img.png" />
+  <meta name="theme-color" content="#C56FFF" />
+  <link rel="icon" href="https://doka.guide/favicon.ico" />
+  <link rel="icon" href="https://doka.guide/images/icons/icon.svg" type="image/svg+xml" />
+  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
+  <script src="js/jquery.crossword.js"></script>
+  <script src="js/script.js"></script>
+  <link rel="preload" href="./fonts/spot-mono-light.woff2" as="font" type="font/woff2" crossorigin="" />
+  <link rel="stylesheet" href="./styles/pallete.css" />
+  <link rel="stylesheet" href="./styles/style.css" />
+  <link rel="stylesheet" href="./styles/canvas.css" />
+</head>
+
+<body>
+  <header class="header">
+    <a href="https://doka.guide/" class="logo">
+      <span class="logo__icon">
+        <svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 112 40">
+          <rect x=".5" y=".5" width="111" height="39" rx="19.5" stroke="currentColor" />
+          <path
+            d="M23.674 30.5c-4.605 0-6.854-2.963-6.854-7.819V10.33c0-.785.428-1.213 1.07-1.213.643 0 1.108.428 1.108 1.213v12.352c0 4.106 1.785 5.784 4.676 5.784 2.963 0 4.748-1.678 4.748-5.784V10.33c0-.785.429-1.213 1.071-1.213.643 0 1.107.428 1.107 1.213v12.352c0 4.856-2.249 7.819-6.926 7.819Zm15.73-.107c-4.605 0-8.14-3.356-8.14-7.997s3.535-7.997 8.14-7.997 8.14 3.356 8.14 7.997c0 4.64-3.535 7.997-8.14 7.997Zm0-1.928c2.927 0 5.534-2.07 5.998-5.105-.536.642-1.321 1.107-2.606 1.107-2.035 0-5.391-2.178-7.105-2.178-1.32 0-2.213 1.142-2.035 2.035.536 2.57 3.106 4.14 5.748 4.14Zm3.677-5.962c1.321 0 2.25-1.107 2.07-2.035-.499-2.535-3.14-4.141-5.747-4.141-2.963 0-5.57 2.106-5.998 5.14.5-.642 1.286-1.142 2.57-1.142 2.036 0 5.392 2.178 7.105 2.178Zm6.983 8.425c-.892 0-1.678-.25-1.678-1.07 0-.5.393-.965.964-.965.215 0 .607.072.857.072 1.143 0 2.5-1.5 3.249-2.57-1.535-1.643-3.213-3.75-3.213-6.07 0-2.677 2.035-4.57 4.855-4.57 2.82 0 4.855 1.893 4.855 4.57 0 2.32-1.678 4.427-3.213 6.07.75 1.07 2.107 2.57 3.249 2.57.25 0 .643-.072.857-.072a.96.96 0 0 1 .964.964c0 .821-.786 1.071-1.678 1.071-2.428 0-3.856-1.5-5.034-3.106-1.178 1.607-2.606 3.106-5.034 3.106Zm20.728-.535c-4.605 0-8.14-3.356-8.14-7.997s3.535-7.997 8.14-7.997 8.14 3.356 8.14 7.997c0 4.64-3.535 7.997-8.14 7.997Zm0-1.928c2.928 0 5.534-2.07 5.998-5.105-.536.642-1.321 1.107-2.606 1.107-2.035 0-5.391-2.178-7.105-2.178-1.32 0-2.213 1.142-2.034 2.035.535 2.57 3.105 4.14 5.747 4.14Zm3.677-5.962c1.321 0 2.25-1.107 2.07-2.035-.499-2.535-3.14-4.141-5.747-4.141-2.963 0-5.569 2.106-5.997 5.14.5-.642 1.285-1.142 2.57-1.142 2.035 0 5.39 2.178 7.104 2.178ZM86.451 30.5c-4.606 0-6.855-2.963-6.855-7.819V10.33c0-.785.428-1.213 1.071-1.213s1.107.428 1.107 1.213v12.352c0 4.106 1.785 5.784 4.677 5.784 2.963 0 4.748-1.678 4.748-5.784V10.33c0-.785.428-1.213 1.07-1.213.643 0 1.107.428 1.107 1.213v12.352c0 4.856-2.249 7.819-6.925 7.819Z"
+            fill="currentColor" />
+        </svg>
+      </span>
+      Дока
+    </a>
+    <nav>
+      <a href="./gifts.html" class="nav__item">Подарки</a><a href="./index.html" class="nav__item">Давай назад</a>
+    </nav>
+    <div class="colorpicker">
+      <button style="--bg-color: #c56fff" class="color__button" value="#C56FFF">
+        <span class="visually-hidden">Сменить цвет</span>
+      </button>
+      <div class="visually-hidden">
+        <label for="currentColor">Выбранный цвет:</label>
+        <output id="currentColor"> </output>
+      </div>
+    </div>
+  </header>
+  <div class="main-wrapper">
+    <svg class="icon years" viewBox="0 0 222 190">
+      <use href="./images/2-years.svg#2-years"></use>
+    </svg>
+    <main class="main about">
+      <div class="content">
+        <h2>привет? Здесь кто-нибудь есть?</h2>
+        <p>
+          Дока отмечает своё двухлетие в этом году! Как ни крути, а это было
+          настоящее приключение. Нам захотелось это отметить :)
+        </p>
+      </div>
+    </main>
+  </div>
+  <footer class="footer">
+    <ul class="socials">
+      <li>
+        <a href="https://www.youtube.com/@doka-guide">
+          <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 19 14" width="19"
+            height="14" style="mix-blend-mode:difference">
+            <path fill="currentColor" fill-rule="evenodd"
+              d="M18.6031 2.43813c-.2185-.81747-.8623-1.461255-1.6797-1.679702C15.4415.361328 9.5.361328 9.5.361328s-5.94146 0-7.42335.3971C1.25933.976875.615442 1.62066.396942 2.43813 3.1e-7 3.91987 0 7.01143 0 7.01143s3.1e-7 3.09147.396942 4.57307c.2185.8175.862388 1.4614 1.679708 1.6799 1.48189.3969 7.42335.3969 7.42335.3969s5.9415 0 7.4234-.3969c.8174-.2185 1.4612-.8624 1.6797-1.6799C19 10.1029 19 7.01143 19 7.01143s0-3.09156-.3969-4.5733ZM7.59989 9.86149V4.16138l4.93631 2.85005-4.93631 2.85006Z"
+              clip-rule="evenodd" />
+          </svg>
+          <span class="visually-hidden">YouTube</span>
+        </a>
+      </li>
+      <li>
+        <a href="https://t.me/doka_guide">
+          <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 18 17" width="18"
+            height="17" style="mix-blend-mode:difference">
+            <path fill="currentColor"
+              d="M14.2812 15.5523c.2041.0182.4076-.0416.5695-.1673s.2702-.308.3031-.5103l2.8438-13.60292c.0081-.08767-.0043-.17604-.0364-.25804-.0321-.081997-.0829-.155355-.1484-.214212-.114-.108125-.2639-.170288-.4209-.174528-.0548 0-5.7115 2.09091-16.970301 6.27274-.127057.04053-.237183.12187-.31329.23139-.0761071.10952-.11394078.2411-.10763026.37432.00716485.12439.05384586.24324.13324626.33926.0794.09602.187376.16419.308207.19459L4.54867 9.31033 6.20155 14.269c.04319.1351.13029.2519.24747.3319.11718.08.25772.1185.39931.1095.07663-.0002.15243-.0158.22295-.0458.07052-.0299.13434-.0737.1877-.1287l2.33046-2.2175 4.19896 3.0799c.1463.0971.3172.1505.4928.154Zm-7.50473-2.505L5.53424 8.94074C11.5024 5.14219 14.507 3.24292 14.5481 3.24292c.154 0 .2361 0 .2361.16426.0035.02039.0035.04121 0 .0616 0 0-2.5768 2.36126-7.72028 6.98112l-.28745 2.5974Z" />
+          </svg>
+          <span class="visually-hidden">Telegram</span>
+        </a>
+      </li>
+      <li>
+        <a href="https://twitter.com/doka_guide">
+          <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 19 16" width="19"
+            height="16" style="mix-blend-mode:difference">
+            <path fill="currentColor" fill-rule="evenodd"
+              d="M6.1475 15.4241c6.7969 0 10.5134-5.63216 10.5134-10.51341 0-.1609 0-.32185-.0077-.4751.7203-.52105 1.3487-1.1724 1.8468-1.9157-.659.2912-1.3717.49045-2.1226.5824.7663-.4598 1.3486-1.1801 1.6245-2.046-.7126.42145-1.5019.728-2.3448.89655-.6744-.7203-1.6322-1.164754-2.6973-1.164754-2.0384 0-3.6935 1.655204-3.6935 3.693504 0 .2912.03065.5747.0996.8429-3.0728-.15325-5.7931-1.6245-7.61685-3.86205-.3142.54405-.4981 1.18005-.4981 1.8544 0 1.2797.65135 2.4138 1.6475 3.0728-.60535-.01535-1.1724-.1839-1.6705-.4598v.046c0 1.7931 1.27205 3.2797 2.96555 3.6245-.3065.0843-.636.1303-.9732.1303-.23755 0-.4674-.023-.6973-.069.46745 1.47126 1.8314 2.53636 3.44825 2.56706-1.26435.9885-2.8582 1.5785-4.59 1.5785-.29885 0-.59005-.0153-.88125-.0536 1.61685 1.0575 3.5632 1.6705 5.6475 1.6705Z"
+              clip-rule="evenodd" />
+          </svg>
+          <span class="visually-hidden">Twitter</span>
+        </a>
+      </li>
+      <li>
+        <a href="https://discord.gg/NjaevcW8k8">
+          <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 16" width="20"
+            height="16" style="mix-blend-mode:difference">
+            <path fill="currentColor"
+              d="M6.85916 7.48759c.9489 0 1.7175.71082 1.70011 1.57961 0 .86878-.74963 1.5796-1.70011 1.5796-.93307 0-1.70168-.71082-1.70168-1.5796 0-.86879.75121-1.57961 1.70168-1.57961Zm6.08554 0c.9505 0 1.7017.71082 1.7017 1.57961 0 .86878-.7512 1.5796-1.7017 1.5796-.933 0-1.7001-.71082-1.7001-1.5796 0-.86879.7497-1.57961 1.7001-1.57961Zm1.5768 7.44471c3.5947-.1153 4.9785-2.5211 4.9785-2.5211 0-5.34063-2.3438-9.67034-2.3438-9.67034-2.3406-1.789696-4.5705-1.74073-4.5705-1.74073l-.2277.26538c2.766.86246 4.0502 2.1072 4.0502 2.1072-1.5102-.84985-3.1746-1.39111-4.8963-1.59225-1.0921-.1232-2.19521-.11259-3.28475.03159-.09805 0-.18029.01738-.27676.03317-.56933.05055-1.95314.26538-3.69277 1.0457-.60097.28118-.95997.48179-.95997.48179s1.3506-1.31108 4.27793-2.17355l-.1629-.19903S5.18437.951164 2.84218 2.74244c0 0-2.34218 4.32813-2.34218 9.66876 0 0 1.36641 2.4042 4.96113 2.5211 0 0 .60096-.7456 1.09123-1.3758-2.06701-.6319-2.84668-1.9588-2.84668-1.9588s.16131.1169.45388.2828c.01582.0158.03163.0332.06484.049.04903.0347.09806.0505.14708.0837.40645.2322.81289.4138 1.18612.5639.66739.2654 1.46446.5307 2.39279.714 1.39063.2722 2.82041.2776 4.21311.0158.8111-.1446 1.6025-.3837 2.358-.7124.5693-.2164 1.2035-.5324 1.8709-.9794 0 0-.8129 1.3601-2.9448 1.9745.4887.6303 1.0755 1.3427 1.0755 1.3427h-.0016Z" />
+          </svg>
+          <span class="visually-hidden">Discord</span>
+        </a>
+      </li>
+    </ul>
+  </footer>
+  <canvas style="pointer-events: none;"></canvas>
+  <svg class="icon hmm" viewBox="0 0 428 353">
+    <use href="./images/hmm.svg#hmm"></use>
+  </svg>
+  <svg class="icon ufo" viewBox="0 0 420 233">
+    <use href="./images/ufo.svg#ufo"></use>
+  </svg>
+  <script src="./js/color-picking.js"></script>
+  <script src="./js/color-spread.js"></script>
+</body>
+
+</html>
diff --git a/fonts/spot-mono-light.woff2 b/fonts/spot-mono-light.woff2