Implement GitHub Actions for HTML/CSS Validation

.github/workflows/unittests.yaml

@@ -0,0 +1,69 @@
+# This is a basic workflow to validate HTML and CSS
+name: HTML and CSS Validation Workflow
+
+# Controls when the workflow will run
+on:
+  # Triggers the workflow on push or pull request events but only for the "main" branch
+  push:
+    branches: [ "main" ]
+  pull_request:
+    branches: [ "main" ]
+  # Allows you to run this workflow manually from the Actions tab
+  workflow_dispatch:
+
+# A workflow run is made up of one or more jobs that can run sequentially or in parallel
+jobs:
+  # This workflow contains a single job called "validate_job"
+  validate_job:
+    # The type of runner that the job will run on
+    runs-on: ubuntu-latest
+
+    # Steps represent a sequence of tasks that will be executed as part of the job
+    steps:
+      # Checks out your repository under $GITHUB_WORKSPACE, so your job can access it
+      - uses: actions/checkout@v4
+
+      # Sets up Node.js environment
+      - name: Set up Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: '16'
+
+      # Caching pnpm dependencies
+      - name: Cache pnpm
+        uses: actions/cache@v3
+        with:
+          path: ~/.pnpm-store
+          key: ${{ runner.os }}-pnpm-${{ hashFiles('**/pnpm-lock.yaml') }}
+          restore-keys: |
+            ${{ runner.os }}-pnpm-
+
+      # Installs HTMLHint and Stylelint using pnpm
+      - name: Install dependencies
+        run: |
+          set -e
+          npm install -g pnpm
+          pnpm install htmlhint stylelint stylelint-config-standard --save-dev
+
+      # Runs HTML validation and logs errors
+      - name: Validate HTML
+        run: |
+          set -e
+          npx htmlhint . 2> html_validation_errors.log || true
+          if [ -s html_validation_errors.log ]; then
+            echo "HTML validation errors found. Check html_validation_errors.log for details."
+            exit 1
+          fi
+
+      # Runs CSS validation and logs errors
+      - name: Validate CSS
+        run: |
+          set -e
+          npx stylelint "**/*.css" 2> css_validation_errors.log || true
+          if [ -s css_validation_errors.log ]; then
+            echo "CSS validation errors found. Check css_validation_errors.log for details."
+            exit 1
+          fi
+
+
+

index.html

@@ -12,6 +12,11 @@
         <!-- Landing section -->
         <h1>Discover hidden places in the world around you</h1>
         <p><a class="cta" href="#">Download Excursion (Coming soon!)</a></p>
+        <div class="icons">
+          <svg fill="none" height="217" viewBox="0 0 199 217" width="199" xmlns="http://www.w3.org/2000/svg" class="icon"><path d="M135.673 60.8255V81.9127M59.7597 60.8255V81.9127M34.4551 134.631C34.4551 134.631 55.5422 149.392 99.8253 149.392C144.108 149.392 165.196 134.631 165.196 134.631" stroke="rgba(250,249,246,0.9)" stroke-linecap="square" stroke-opacity="0.9" stroke-width="8.43486"></path><path d="M127.239 6C97.2788 46.209 87.2286 70.6026 80.8477 115.653H114.587C106.932 154.998 110.015 175.566 125.131 210.545" stroke="rgba(250,249,246,0.9)" stroke-linecap="square" stroke-linejoin="round" stroke-opacity="0.9" stroke-width="8.43486"></path><path d="M4.93359 27.0885H194.718V183.134H4.93359V27.0885Z" stroke="rgba(250,249,246,0.9)" stroke-opacity="0.9" stroke-width="8.43486"></path></svg>
+          <svg fill="none" height="229" viewBox="0 0 190 229" width="190" xmlns="http://www.w3.org/2000/svg" class="icon"><path d="M71.061 214.713C86.6538 212.563 107.744 213.57 123.445 214.55M171.666 162.655C175.367 149.838 175.04 134.028 170.033 121.673C167.72 115.986 163.529 110.38 160.128 105.264C157.597 101.454 154.332 97.9438 151.638 94.2429C147.039 87.9295 142.14 81.0447 138.956 73.915C137.814 71.3571 136.725 68.7174 136.181 65.969C135.555 62.9211 135.609 59.7645 135.637 56.635C135.718 40.0081 136.099 20.66 123.826 9.42114C119.336 5.31204 101.893 -2.52519 86.2184 5.42089C78.7349 9.20344 72.3944 15.3535 69.8364 23.3268C67.2784 31.3001 66.5981 39.9537 67.224 48.308C68.122 60.2815 66.1899 72.4728 61.6182 83.5755C60.0943 87.3036 58.2438 90.9501 55.6586 94.0524C53.3728 96.8008 51.4135 99.9847 47.9847 104.23C35.5757 119.523 26.8405 135.797 29.2896 155.308M125.486 193.188C125.486 193.188 114.955 204.155 96.9674 204.155C73.8911 204.155 66.8158 188.48 66.8158 188.48C69.9181 188.779 74.2449 189.46 75.4966 187.8C77.2927 185.378 76.8029 179.255 71.8502 173.649C64.7749 165.649 51.4679 159.444 44.5287 148.831C41.6986 144.505 42.27 135.797 42.8415 132.994C46.0798 117.183 52.7197 111.849 52.7197 111.849C49.1548 119.088 47.005 122.027 46.2159 130.055C45.6716 135.688 45.6444 145.185 50.5427 150.382C50.8148 123.061 74.9524 97.3995 74.1088 70.0781M117.023 69.9964C123.064 81.8611 128.425 95.0864 133.732 110.108C137.487 120.694 145.243 142.709 149.488 140.776C155.583 138.899 150.277 115.659 141.705 104.692C158.441 119.278 155.311 144.559 155.311 144.559C155.311 144.559 165.489 148.396 167.23 151.417C168.509 153.621 167.856 157.158 166.713 161.376" stroke="rgba(250,249,246,0.9)" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="0.9" stroke-width="2.72126"></path><path d="M21.2833 165.322C24.0046 161.676 23.6236 158.791 27.4062 156.233C27.9776 155.852 28.6035 155.553 29.2294 155.308C31.2159 154.6 33.4474 154.6 35.6516 154.6C40.7948 154.6 45.2576 160.995 46.5366 165.023C49.4212 174.139 55.1086 182.684 61.1226 190.113C63.7894 193.406 66.7556 196.508 68.9598 200.154C71.1641 203.801 72.5519 208.128 71.7355 212.291C71.5722 213.108 71.3273 213.897 71.0008 214.631C68.7693 219.883 63.0003 223.367 57.204 224.156C50.5913 225.027 45.557 221.543 39.2164 219.448C32.8759 217.353 31.3248 215.883 24.2223 215.148C18.0722 214.523 8.76554 216.128 5.20068 213.543C1.77189 211.067 1.41813 207.964 2.04402 203.774C2.66991 199.583 3.97612 195.528 4.03054 191.31C4.08497 187.8 3.02367 184.344 2.94204 180.833C2.83319 176.888 4.22103 172.833 8.11243 171.717C9.85404 171.2 13.9359 170.465 15.9225 169.676C18.0723 168.833 19.9771 167.091 21.3378 165.268L21.2833 165.322Z" stroke="rgba(250,249,246,0.9)" stroke-miterlimit="10" stroke-opacity="0.9" stroke-width="2.72126"></path><path d="M87.5969 50.5385C84.2226 52.2257 83.4334 53.804 79.0794 57.7771C77.8276 58.92 73.0654 61.7773 71.7864 63.8999C69.9631 67.0021 76.0316 72.1725 78.0997 73.9958C81.5557 77.0164 85.4471 81.452 93.6653 81.452C97.2302 81.452 105.013 76.6626 108.088 74.8666C112.469 72.3086 116.279 70.7847 118.973 66.8933C119.844 65.6415 119.98 63.3829 118.783 61.4508C116.578 57.9131 105.693 54.9469 100.033 52.4434C95.2165 50.3208 91.5155 48.5792 87.5969 50.5113V50.5385Z" stroke="rgba(250,249,246,0.9)" stroke-miterlimit="10" stroke-opacity="0.9" stroke-width="2.72126"></path><path d="M76.6367 65.7512C79.739 68.418 84.7189 74.8674 92.8554 74.8674C100.529 74.8674 107.278 68.4997 112.04 63.9279" stroke="rgba(250,249,246,0.9)" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="0.9" stroke-width="2.72126"></path><path d="M88.9381 54.1584C88.2578 54.8931 87.904 55.1925 87.0332 55.6823" stroke="rgba(250,249,246,0.9)" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="0.9" stroke-width="2.72126"></path><path d="M94.4629 54.1318C95.3065 54.6761 95.6875 54.8938 96.6671 55.1931" stroke="rgba(250,249,246,0.9)" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="0.9" stroke-width="2.72126"></path><path d="M116.092 39.3824C115.275 37.4503 113.806 35.7631 111.928 34.6474C110.676 33.9127 109.261 33.4229 107.792 33.314C103.655 32.9602 100.199 35.5727 98.1312 39.0014C96.063 42.4302 95.6276 46.5665 95.7909 50.5124L101.723 52.7982C101.261 51.7369 100.471 48.9885 101.805 44.8794L101.968 44.4168C103.084 41.6955 105.451 40.7703 107.737 41.6139C111.656 43.0833 111.683 50.8117 108.581 55.1113L105.587 54.2949L113.996 57.5604C115.983 53.6418 117.017 49.2878 117.017 44.9338C117.017 43.0289 116.826 41.124 116.092 39.3552V39.3824Z" fill="rgba(250,249,246,0.9)" fill-opacity="0.9"></path><path d="M85.8362 40.4163C84.7204 37.559 81.2917 34.9738 78.2438 35.2187C76.1213 35.382 74.2708 36.8787 73.2095 38.7291C72.1482 40.5796 71.74 42.7294 71.4951 44.8247C71.1958 47.2739 71.0325 49.7774 71.5495 52.1994C72.0666 54.6213 73.3728 56.9344 75.4409 58.295L76.9104 59.1658L87.605 50.5122C87.0879 47.4916 86.9519 43.2464 85.8362 40.3891V40.4163ZM82.0536 54.5396C79.7405 56.9343 76.4478 55.0839 75.8491 52.0905L75.7403 51.6007C75.3321 48.4712 75.2505 42.3484 79.0602 41.8314C83.7952 41.1782 85.4824 51.6823 82.0536 54.5396Z" fill="rgba(250,249,246,0.9)" fill-opacity="0.9"></path><path d="M131.601 160.261C133.234 157.376 135.792 154.845 138.758 153.457L140.255 153.893C140.282 153.621 140.309 153.376 140.336 153.104C140.609 150.818 141.098 148.369 142.704 146.736C144.228 145.185 146.568 144.668 148.745 144.831C150.922 144.994 152.99 145.783 155.004 146.545C158.651 147.933 166.243 150.083 166.27 154.519C166.27 157.294 165.78 159.281 164.937 160.914C165.889 161.131 165.78 161.349 166.733 161.567C167.848 157.376 168.502 153.866 167.25 151.661C165.535 148.668 155.331 144.532 155.331 144.532C155.331 144.532 158.433 119.224 141.724 104.665C150.296 115.632 155.603 138.871 149.507 140.749C145.235 142.654 137.506 120.666 133.751 110.08C128.445 95.0591 123.084 81.8338 117.042 69.9691C117.042 69.9691 96.7691 82.0515 92.0069 82.0515C84.7411 82.0515 74.101 70.1052 74.101 70.1052C74.9174 97.4266 50.7798 123.061 50.5349 150.41C45.6638 145.185 45.6638 135.715 46.2081 130.082C46.9972 122.054 49.147 119.115 52.7119 111.877C52.7119 111.877 46.072 117.21 42.8337 133.021C42.2622 135.824 41.6908 144.532 44.5209 148.858C51.4601 159.471 64.7671 165.676 71.8423 173.676C76.795 179.282 77.3121 185.405 75.4888 187.827C74.2371 189.487 69.9102 188.807 66.808 188.507C66.808 188.507 74.1826 204.046 93.2587 204.236C108.334 204.372 118.566 201.243 126.54 192.099C127.492 187.636 128.445 183.146 129.125 178.085C129.805 172.833 129.016 164.914 131.628 160.315L131.601 160.261Z" fill="rgba(250,249,246,0.9)" fill-opacity="0.9"></path><path d="M140.062 152.423C136.334 153.511 133.667 156.45 131.708 159.906C129.096 164.505 129.885 172.451 129.205 177.676C127.79 188.425 124.987 196.643 123.98 207.447C123.68 210.739 121.694 220.264 127.871 224.128C136.28 229.38 148.58 227.04 155.819 220.264C157.533 218.658 158.975 216.753 160.581 215.039C166.513 208.726 174.704 205.623 181.48 200.181C184.637 197.623 188.038 196.943 188.011 190.738C188.011 187.908 183.657 184.588 182.079 182.248C180.174 179.39 179.466 176.125 178.759 172.778C178.051 169.431 176.799 165.621 173.888 163.77C172.799 163.09 167.493 161.648 164.635 161.648" stroke="rgba(250,249,246,0.9)" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="0.9" stroke-width="2.72126"></path><path d="M154.654 146.545C152.613 145.783 150.545 144.994 148.395 144.83C146.245 144.667 143.905 145.211 142.354 146.735C140.721 148.368 140.258 150.79 139.986 153.103C139.687 155.715 139.524 158.382 140.286 160.886C141.51 164.913 144.068 168.315 148.177 169.131C152.286 169.948 156.858 168.886 160.042 166.111C163.444 163.172 165.893 160.804 165.893 154.491C165.893 150.055 158.3 147.905 154.627 146.517L154.654 146.545Z" stroke="rgba(250,249,246,0.9)" stroke-miterlimit="10" stroke-opacity="0.9" stroke-width="2.72126"></path></svg>
+          <svg fill="none" height="174" viewBox="0 0 215 174" width="215" xmlns="http://www.w3.org/2000/svg" class="icon"><g clip-path="url(#clip0_2065_17152)"><path d="M88.5475 130.398V143.867L72.6441 150.32V136.851L88.5475 130.398ZM88.5475 109.115V122.702L72.6441 128.925V115.568L88.5475 109.115ZM66.4873 131.303V142.512L52.4913 148.168V137.076L66.4873 131.303ZM66.4873 110.138V121.341L52.4913 127.002V115.798L66.4873 110.138ZM45.6595 131.758V140.134L34.4606 144.66V136.509L45.6595 131.753V131.758ZM45.6595 110.588V118.739L34.4606 123.382V115.231L45.6595 110.588ZM26.514 127.682V134.698L18.2299 138.094V130.965L26.514 127.682ZM26.514 105.607V112.628L18.2299 116.023V108.777L26.514 105.607ZM7.03104 122.932V128.813L0.869105 131.64V125.872L7.03104 122.927V122.932ZM7.03104 100.969V106.742L0.869105 109.57V103.684L7.03104 100.969ZM88.5475 64.5188V77.9881L72.6441 84.329V70.9722L88.5475 64.5188ZM88.5475 43.6909V57.0477L72.6441 63.5011V50.0318L88.5475 43.6909ZM66.4873 66.329V77.4256L52.4913 83.1989V71.9898L66.4873 66.329ZM66.4873 44.4886V55.6875L52.4913 61.4659V50.2568L66.4873 44.4886ZM45.6595 66.8966V75.0477L34.4606 79.5733V71.4222L45.6595 66.8966ZM45.6595 45.0511V53.3148L34.4606 57.7278V49.6892L45.6595 45.0511ZM26.514 61.9159V68.9318L18.2299 72.2148V64.9739L26.514 61.9159ZM26.514 40.0705V47.1989L18.2299 50.4818V43.3534L26.514 40.0705ZM7.03104 57.0477V62.9335L0.869105 65.7665V59.8807L7.03104 57.0477ZM7.03104 35.3148V41.3182L0.863992 44.146V38.2602L7.03104 35.3148ZM111.953 143.08V163.447C104.19 166.464 97.5833 169.374 92.1322 172.166V151.681L111.953 143.08ZM111.953 121.684V140.697L92.1322 149.415V130.173L111.953 121.684ZM111.953 99.8335V119.306L92.1322 127.907V108.322L111.953 99.8335ZM111.953 78.5557V97.4608L92.1322 105.949V86.9318L111.953 78.5557ZM111.953 57.0477V76.1779L92.1322 84.6665V65.5415L111.953 57.0477ZM111.953 35.7699V54.6699L92.1322 63.1585V44.1511L111.953 35.7699ZM111.953 11.6591V33.5045L92.1322 41.8807V21.508C98.4963 17.7577 105.12 14.4664 111.953 11.6591ZM89.4475 150.32V166.275L70.8595 173.864V157.904L89.4475 150.32ZM89.4475 85.2341V101.194L70.8595 108.777V92.8176L89.4475 85.2341ZM89.4475 19.6977V35.6523L70.8595 43.3534V27.3938L89.4475 19.6977ZM67.3873 152.356V164.577L50.7015 171.373V159.264L67.3873 152.356ZM67.3873 87.3818V99.6085L50.7015 106.287V94.0654L67.3873 87.3869V87.3818ZM67.3873 21.733V33.9545L50.7015 40.7557V28.6364L67.3873 21.733ZM46.3345 152.923V162.205L33.0083 167.64V158.354L46.3345 152.923ZM46.3345 87.8369V97.1182L33.0083 102.436V93.2727L46.3345 87.8369ZM46.3345 22.2955V31.5818L33.0083 36.9V27.7313L46.3345 22.2955ZM27.0714 148.848V156.544L16.7725 160.844V153.153L27.0714 148.858V148.848ZM27.0714 82.9688V90.6648L16.7725 94.7404V87.0443L27.0714 82.9688ZM27.0714 17.4324V25.2409L16.7725 29.204V21.508L27.0714 17.4324ZM7.81342 144.092V150.883L0.199219 154.059V147.61L7.81342 144.097V144.092ZM7.81342 78.4432V85.1216L0.199219 88.2921V81.8386L7.81342 78.4432ZM7.81342 13.6943V20.3727L0.199219 23.5432V16.9773L7.81342 13.6943ZM165.252 0C148.53 0 131.477 3.58466 114.08 10.754V32.2619C125.949 27.1994 137.373 23.6199 148.341 21.508V69.8421C136.488 71.5597 124.947 74.991 114.08 80.0284V94.6278C126.399 88.5938 137.817 84.8966 148.341 83.5313V133.338C135.879 135.153 124.461 138.135 114.08 142.287V162.66C133.64 156.017 151.333 152.698 167.159 152.698C186.269 152.698 202.208 156.922 214.972 165.375V12.4517C199.82 4.15227 183.247 0 165.252 0ZM165.365 19.8102C176.937 19.8102 186.867 21.9222 195.152 26.1511V73.575C185.69 70.4323 175.785 68.8267 165.815 68.8193L161.335 68.9318V20.0352C162.673 19.8852 164.018 19.81 165.365 19.8102ZM165.59 82.1761C176.415 82.1761 186.269 84.1398 195.152 88.0619V136.284C186.417 133.568 176.64 132.208 165.815 132.208H161.335V82.4011C162.828 82.2529 164.25 82.1761 165.59 82.1761Z" fill="rgba(250,249,246,0.9)" fill-opacity="0.9"></path></g><defs><clipPath id="clip0_2065_17152"><rect fill="rgba(250,249,246,0.9)" height="173.864" transform="translate(0.203125)" width="214.773"></rect></clipPath></defs></svg>
+        </div>
         <video autoplay muted loop>
           <source src="resources/media/excursion.mp4" type="video/mp4">
         </video>