mate-academy · IDWIL8 · Dec 18, 2024 · Dec 18, 2024 · Dec 18, 2024 · Dec 19, 2024
diff --git a/.eslintignore b/.eslintignore
@@ -1 +1,4 @@
+/backstop_data
 /dist
+cypress/
+
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -1,3 +1,3 @@
 module.exports = {
-  extends: ['@mate-academy/eslint-config', 'plugin:cypress/recommended'],
+  extends: '@mate-academy/eslint-config',
 };
diff --git a/.github/workflows/test.yml-template b/.github/workflows/test.yml-template
@@ -0,0 +1,29 @@
+name: Test
+
+on:
+  pull_request:
+    branches: [ master ]
+
+jobs:
+  build:
+
+    runs-on: ubuntu-latest
+
+    strategy:
+      matrix:
+        node-version: [20.x]
+
+    steps:
+    - uses: actions/checkout@v2
+    - name: Use Node.js ${{ matrix.node-version }}
+      uses: actions/setup-node@v1
+      with:
+        node-version: ${{ matrix.node-version }}
+    - run: npm install
+    - run: npm test
+    - name: Upload HTML report(backstop data)
+      if: ${{ always() }}
+      uses: actions/upload-artifact@v2
+      with:
+        name: report
+        path: backstop_data
diff --git a/.gitignore b/.gitignore
@@ -9,10 +9,7 @@ node_modules
 .DS_Store
 
 # Generated files
+backstop_data
 dist
 .cache
 .parcel-cache
-raw_reports
-cypress/screenshots
-cypress/videos
-reports
diff --git a/.stylelintignore b/.stylelintignore
@@ -1 +1,2 @@
+/backstop_data/
 /dist
diff --git a/dist/about-us-photo.3f09e717.svg b/dist/about-us-photo.3f09e717.svg
diff --git a/dist/earphones1.c9bb59ad.svg b/dist/earphones1.c9bb59ad.svg
diff --git a/dist/earphones2.36776444.svg b/dist/earphones2.36776444.svg
diff --git a/dist/favicon.0802734c.png b/dist/favicon.0802734c.png
diff --git a/dist/good1.0226cb7d.svg b/dist/good1.0226cb7d.svg
diff --git a/dist/good2.14e019d8.svg b/dist/good2.14e019d8.svg
diff --git a/dist/good3.52b10049.svg b/dist/good3.52b10049.svg
diff --git a/dist/header-bg-mobile.615b3de6.png b/dist/header-bg-mobile.615b3de6.png
diff --git a/dist/icon-close.8d8538a0.svg b/dist/icon-close.8d8538a0.svg
diff --git a/dist/icon-menu.58042981.svg b/dist/icon-menu.58042981.svg
diff --git a/dist/icon-phone.19df1182.svg b/dist/icon-phone.19df1182.svg
diff --git a/dist/index.cabb280d.js b/dist/index.cabb280d.js
diff --git a/dist/index.cabb280d.js.map b/dist/index.cabb280d.js.map
diff --git a/dist/index.html b/dist/index.html
@@ -0,0 +1 @@
+<!doctype html><html lang="en" class="page"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link rel="icon" href="favicon.0802734c.png" type="image/png"><title>Bang & Olufsen</title><link rel="stylesheet" href="index.76567b31.css"><link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com"><link href="https://fonts.googleapis.com/css2?family=Manrope:[email protected]&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet"><script src="index.cabb280d.js" defer></script></head><body class="page"> <div class="page__body"> <header class="header"> <div class="header__top"> <a href="#"> <img src="logo.b4cde7cf.svg" alt="Bang & Olufsen logo"> </a> <div class="header__icons"> <a href="#" class="icon icon--phone"></a> <a href="#menu" class="icon icon--menu"></a> </div> </div> <div class="header__bottom"> <h1 class="header__title"> Your senses. <br> Set free. </h1> </div> </header> </div> <aside class="menu page__menu" id="menu"> <div class="menu__top"> <a href="#"> <img src="logo.b4cde7cf.svg" alt="Bang & Olufsen logo"> </a> <div class="menu__icons"> <a href="#" class="icon icon--close"></a> </div> </div> <nav class="nav"> <ul class="nav__list"> <li class="nav__item"> <a class="nav__link" href="#recommended"> Recommended </a> </li> <li class="nav__item"> <a class="nav__link" href="#categories"> Categories </a> </li> <li class="nav__item"> <a class="nav__link" href="#about-us"> About Us </a> </li> <li class="nav__item"> <a class="nav__link" href="#contact"> Contact Us </a> </li> </ul> <div class="menu__bottom"> <a href="tel:+1 234 5555-55-55" class="menu__phone-number"> +1 234 5555-55-55 </a> <a href="tel:+1 234 5555-55-55" class="menu__call-to-order"> call to order </a> </div> </nav> </aside> <main class="main"> <section class="categories" id="recommended"> <h2 class="categories__header">Recommended</h2> <div class="categories__good-list"> <div class="good"> <img class="good__image" src="good1.0226cb7d.svg" alt="good1-image"> <div class="good__item">BEOSOUND A5</div> <div class="good__description"> Huge sound anywhere – in the home or outdoors. Beosound A5 is a Wi-Fi and Bluetooth speaker with long-lasting battery and wireless charging built in. </div> <div class="good__price">$ 1299.00</div> </div> <div class="good"> <img class="good__image" src="good2.14e019d8.svg" alt="good2-image"> <div class="good__item">BEOPLAY HX</div> <div class="good__description"> Wireless noise-cancelling headphones. Listen in comfort whether you're on a call, working from home or taking a moment for yourself. </div> <div class="good__price">$ 499.00</div> </div> <div class="good"> <img class="good__image" src="good3.52b10049.svg" alt="good3-image"> <div class="good__item">BEOSOUND THEATRE</div> <div class="good__description"> Four patent-pending acoustic innovations in one sleek soundbar envelop you in sound from every angle. Made to fit any TV, and last for generations. </div> <div class="good__price">$ 3199.00</div> </div> </div> </section> <section class="categories" id="categories"> <h2 class="categories__header"> Sound. Vision. <br> It’s your pick. </h2> <div class="categories__good"> <div class="categories__photo"> <img src="portable-speakers1.61d15f3b.svg" alt="portable-speakers1"> <img src="portable-speakers2.cbbfd5e4.svg" alt="portable-speakers2"> </div> <div class="categories__name">Portable speakers</div> </div> <div class="categories__good"> <div class="categories__photo"> <img src="earphones1.c9bb59ad.svg" alt="earphones1"> <img src="earphones2.36776444.svg" alt="earphones2"> </div> <div class="categories__name">Earphones</div> </div> <div class="categories__good"> <div class="categories__photo"> <img src="smart-home1.21426e03.svg" alt="smart-home1"> <img src="smart-home2.defb86ca.svg" alt="smart-home2"> </div> <div class="categories__name">Smart Home</div> </div> <button class="button-primary view">View all</button> </section> <section class="about-us" id="about-us"> <img class="about-us__image" src="about-us-photo.3f09e717.svg" alt="about-us-photo"> <div class="about-us__container"> <h2 class="about-us__header">Timeless, for 50 years and counting</h2> <p class="about-us__description"> Bang & Olufsen is expanding its Recreated Classics Program with the launch of Beosystems – a limited edition music system that transcends time by bridging the gap between one of our iconic designs from 1972 and today’s cutting-edge digital technology. </p> </div> </section> <section class="contact" id="contact"> <h2 class="contact__header">Contact us</h2> <div class="contact__container"> <div class="contact__input"> <input placeholder="Name" class="input"> <input placeholder="Email" class="input"> <textarea placeholder="Message" class="input input__message"></textarea> <button class="button-primary">Send</button> </div> <div class="contact__info"> <div class="contact__info__placeholder">Phone</div> <a href="tel:+1 234 5555-55-55" class="contact__info__info"> +1 234 5555-55-55 </a> <div class="contact__info__placeholder">Email</div> <a href="mailto:hello@bang&olufsen.com" class="contact__info__info"> hello@bang&olufsen.com </a> <div class="contact__info__placeholder">Address</div> <div class="contact__info__info"> 400 first ave. <br> suite 700 <br> Minneapolis, MN 55401 </div> </div> </div> </section> </main> </body></html>
diff --git a/dist/logo.b4cde7cf.svg b/dist/logo.b4cde7cf.svg
diff --git a/dist/menu-hover.c71f2052.svg b/dist/menu-hover.c71f2052.svg
diff --git a/dist/portable-speakers1.61d15f3b.svg b/dist/portable-speakers1.61d15f3b.svg
diff --git a/dist/portable-speakers2.cbbfd5e4.svg b/dist/portable-speakers2.cbbfd5e4.svg
diff --git a/dist/smart-home1.21426e03.svg b/dist/smart-home1.21426e03.svg
diff --git a/dist/smart-home2.defb86ca.svg b/dist/smart-home2.defb86ca.svg
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		<!doctype html><html lang="en" class="page"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link rel="icon" href="favicon.0802734c.png" type="image/png"><title>Bang & Olufsen</title><link rel="stylesheet" href="index.76567b31.css"><link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com"><link href="https://fonts.googleapis.com/css2?family=Manrope:[email protected]&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet"><script src="index.cabb280d.js" defer></script></head><body class="page"> <div class="page__body"> <header class="header"> <div class="header__top"> <a href="#"> <img src="logo.b4cde7cf.svg" alt="Bang & Olufsen logo"> </a> <div class="header__icons"> <a href="#" class="icon icon--phone"></a> <a href="#menu" class="icon icon--menu"></a> </div> </div> <div class="header__bottom"> <h1 class="header__title"> Your senses. <br> Set free. </h1> </div> </header> </div> <aside class="menu page__menu" id="menu"> <div class="menu__top"> <a href="#"> <img src="logo.b4cde7cf.svg" alt="Bang & Olufsen logo"> </a> <div class="menu__icons"> <a href="#" class="icon icon--close"></a> </div> </div> <nav class="nav"> <ul class="nav__list"> <li class="nav__item"> <a class="nav__link" href="#recommended"> Recommended </a> </li> <li class="nav__item"> <a class="nav__link" href="#categories"> Categories </a> </li> <li class="nav__item"> <a class="nav__link" href="#about-us"> About Us </a> </li> <li class="nav__item"> <a class="nav__link" href="#contact"> Contact Us </a> </li> </ul> <div class="menu__bottom"> <a href="tel:+1 234 5555-55-55" class="menu__phone-number"> +1 234 5555-55-55 </a> <a href="tel:+1 234 5555-55-55" class="menu__call-to-order"> call to order </a> </div> </nav> </aside> <main class="main"> <section class="categories" id="recommended"> <h2 class="categories__header">Recommended</h2> <div class="categories__good-list"> <div class="good"> <img class="good__image" src="good1.0226cb7d.svg" alt="good1-image"> <div class="good__item">BEOSOUND A5</div> <div class="good__description"> Huge sound anywhere – in the home or outdoors. Beosound A5 is a Wi-Fi and Bluetooth speaker with long-lasting battery and wireless charging built in. </div> <div class="good__price">$ 1299.00</div> </div> <div class="good"> <img class="good__image" src="good2.14e019d8.svg" alt="good2-image"> <div class="good__item">BEOPLAY HX</div> <div class="good__description"> Wireless noise-cancelling headphones. Listen in comfort whether you're on a call, working from home or taking a moment for yourself. </div> <div class="good__price">$ 499.00</div> </div> <div class="good"> <img class="good__image" src="good3.52b10049.svg" alt="good3-image"> <div class="good__item">BEOSOUND THEATRE</div> <div class="good__description"> Four patent-pending acoustic innovations in one sleek soundbar envelop you in sound from every angle. Made to fit any TV, and last for generations. </div> <div class="good__price">$ 3199.00</div> </div> </div> </section> <section class="categories" id="categories"> <h2 class="categories__header"> Sound. Vision. <br> It’s your pick. </h2> <div class="categories__good"> <div class="categories__photo"> <img src="portable-speakers1.61d15f3b.svg" alt="portable-speakers1"> <img src="portable-speakers2.cbbfd5e4.svg" alt="portable-speakers2"> </div> <div class="categories__name">Portable speakers</div> </div> <div class="categories__good"> <div class="categories__photo"> <img src="earphones1.c9bb59ad.svg" alt="earphones1"> <img src="earphones2.36776444.svg" alt="earphones2"> </div> <div class="categories__name">Earphones</div> </div> <div class="categories__good"> <div class="categories__photo"> <img src="smart-home1.21426e03.svg" alt="smart-home1"> <img src="smart-home2.defb86ca.svg" alt="smart-home2"> </div> <div class="categories__name">Smart Home</div> </div> <button class="button-primary view">View all</button> </section> <section class="about-us" id="about-us"> <img class="about-us__image" src="about-us-photo.3f09e717.svg" alt="about-us-photo"> <div class="about-us__container"> <h2 class="about-us__header">Timeless, for 50 years and counting</h2> <p class="about-us__description"> Bang & Olufsen is expanding its Recreated Classics Program with the launch of Beosystems – a limited edition music system that transcends time by bridging the gap between one of our iconic designs from 1972 and today’s cutting-edge digital technology. </p> </div> </section> <section class="contact" id="contact"> <h2 class="contact__header">Contact us</h2> <div class="contact__container"> <div class="contact__input"> <input placeholder="Name" class="input"> <input placeholder="Email" class="input"> <textarea placeholder="Message" class="input input__message"></textarea> <button class="button-primary">Send</button> </div> <div class="contact__info"> <div class="contact__info__placeholder">Phone</div> <a href="tel:+1 234 5555-55-55" class="contact__info__info"> +1 234 5555-55-55 </a> <div class="contact__info__placeholder">Email</div> <a href="mailto:hello@bang&olufsen.com" class="contact__info__info"> hello@bang&olufsen.com </a> <div class="contact__info__placeholder">Address</div> <div class="contact__info__info"> 400 first ave. <br> suite 700 <br> Minneapolis, MN 55401 </div> </div> </div> </section> </main> </body></html>