diff --git a/src/admin-controller/admin-add-new-item.js b/src/admin-controller/admin-add-new-item.js new file mode 100644 index 0000000..5a0d555 --- /dev/null +++ b/src/admin-controller/admin-add-new-item.js @@ -0,0 +1,40 @@ +import { adminServices } from '../login/service/admin-service.js'; +import { injectItemsData } from './admin-edit-item.js'; +import { togglePanelAddNew } from '../utils/toggle-admin-panels.js'; +import { createNewWatchDataObj } from '../utils/create-new-watch-data-obj.js'; + +const addNewItemBtn = document.querySelector('[data-add-new-item-btn]'); +const addNewInputsHolder = document.querySelector( + '[data-add-new-inputs-holder]' +); + +addNewItemBtn.addEventListener('click', () => { + injectItemsKey(); + togglePanelAddNew(); +}); + +const injectItemsKey = () => { + adminServices.watchItems().then((item) => { + //?item[0] cause i just need the keys from only one of the elements (since each-one has the same)// + Object.keys(item[0]).map((itemKey) => { + injectItemsData(addNewInputsHolder, '', itemKey, ''); //?will inject the inputs with labels and placeholders text// + }); + }); +}; + +const $form = document.querySelector('[data-add-new-item-form]'); +$form.addEventListener('submit', (event) => { + event.preventDefault(); + const itemInputs = document.querySelectorAll('[data-admin-item-inputs]'); + + const newWatchData = createNewWatchDataObj(itemInputs); + + adminServices + .addNewItem(newWatchData) + .then((respuesta) => { + console.info(respuesta); + }) + .catch((error) => + console.error(`There was an error trying to fetch data ==> ${error}`) + ); +}); diff --git a/src/admin-controller/admin-cancel-operation.js b/src/admin-controller/admin-cancel-operation.js new file mode 100644 index 0000000..1b95a93 --- /dev/null +++ b/src/admin-controller/admin-cancel-operation.js @@ -0,0 +1,28 @@ +import { + togglePanelAddNew, + togglePanelEdit, +} from "../utils/toggle-admin-panels.js"; + +export const cancelAddNew = () => { + const $cancelAddNew = document.querySelector("[data-add-new-cancel-btn]"); + $cancelAddNew.addEventListener("click", () => { + togglePanelAddNew(); + const $addNewInputsHolder = document.querySelector( + "[data-add-new-inputs-holder]" + ); + $addNewInputsHolder.innerHTML = ""; //?will restart all inputs back to empty so when click -edit-item-btn on + //?/-admin-edit-item.js-/ doenst show up same data of first item clicked// + }); +}; + +export const cancelUpdate = () => { + const $cancelUpdate = document.querySelector("[data-cancel-update-btn]"); + $cancelUpdate.addEventListener("click", () => { + togglePanelEdit(); + const $editInputsHolder = document.querySelector( + "[data-edit-inputs-holder]" + ); + $editInputsHolder.innerHTML = ""; //?will restart all inputs back to empty so when click -edit-item-btn on + //?/-admin-edit-item.js-/ doenst show up same data of first item clicked// + }); +}; diff --git a/src/admin-controller/admin-controllers.js b/src/admin-controller/admin-controllers.js new file mode 100644 index 0000000..190d579 --- /dev/null +++ b/src/admin-controller/admin-controllers.js @@ -0,0 +1,4 @@ +import "./admin-add-new-item.js"; +import "./admin-edit-item.js"; +import "./admin-delete-item.js"; +import "./admin-cancel-operation.js"; diff --git a/src/admin-controller/admin-delete-item.js b/src/admin-controller/admin-delete-item.js new file mode 100644 index 0000000..b4f2a57 --- /dev/null +++ b/src/admin-controller/admin-delete-item.js @@ -0,0 +1,31 @@ +import { adminServices } from "../login/service/admin-service.js"; + +adminServices + .watchItems() + .then(() => { + listenDeleteBtn(); + }) + .catch((error) => + console.log(`There was an error trying to fetch data ${error}`) + ); + +const listenDeleteBtn = () => { + const $deleteBtn = document.querySelectorAll("[data-delete-item-btn]"); + $deleteBtn.forEach((btn) => { + btn.addEventListener("click", () => { + deleteItem(btn.id); + }); + }); +}; + +const deleteItem = (itemId) => { + console.log("Delete item: ", itemId); + adminServices + .deleteItem(itemId) + .then((response) => { + console.log(response); + }) + .catch((error) => + console.log(`There was an error trying to fetch data ${error}`) + ); +}; diff --git a/src/admin-controller/admin-edit-item.js b/src/admin-controller/admin-edit-item.js new file mode 100644 index 0000000..17913ac --- /dev/null +++ b/src/admin-controller/admin-edit-item.js @@ -0,0 +1,67 @@ +import { adminServices } from '../login/service/admin-service.js'; +import { togglePanelEdit } from '../utils/toggle-admin-panels.js'; +import { adminEditInputTemplates } from '../components/markup-templates/admin-edit-panel-template.js'; +import { createNewWatchDataObj } from '../utils/create-new-watch-data-obj.js'; + +const $editInputsHolder = document.querySelector('[data-edit-inputs-holder]'); + +export const itemToUpdate = () => { + const $editItemBtn = document.querySelectorAll('[data-edit-item-btn]'); + $editItemBtn.forEach((btn) => { + btn.addEventListener('click', () => { + getItemData(btn.id); //?passes btn's id clicked for comparison against element's id - see line 22-// + togglePanelEdit(); + updateItems(); + }); + }); +}; + +export const getItemData = (btnId) => { + adminServices + .watchItems() + .then((items) => { + items.forEach((item) => { + if (item.id === btnId) { + const inputValue = []; + Object.keys(item).map((itemKey) => { + Object.values(item).forEach((itemVal) => { + inputValue.push(itemVal); //?stores each individual itemVal temporarily// + }); + injectItemsData( + $editInputsHolder, + item.id, + itemKey, + inputValue.shift() + ); //?the itemVal temporarily stored gets use here -when shift-// + }); + } + }); + }) + .catch((error) => + console.error(`There was an error trying to fetch data ==> ${error}`) + ); +}; + +export const injectItemsData = (holder, itemId, itemKey, inputValue) => { + holder.innerHTML += adminEditInputTemplates(itemId, itemKey, inputValue); +}; + +export const updateItems = () => { + const $form = document.querySelector('[data-edit-item-form]'); + $form.addEventListener('submit', (event) => { + event.preventDefault(); + + const itemInputs = document.querySelectorAll('[data-admin-item-inputs]'); + + const newWatchData = createNewWatchDataObj(itemInputs); + + adminServices + .updateWatchData(newWatchData) + .then((response) => { + console.info('Updated', response); + }) + .catch((error) => + console.error(`There was an error trying to fetch data ==> ${error}`) + ); + }); +}; diff --git a/src/admin-controller/validate-login.js b/src/admin-controller/validate-login.js new file mode 100644 index 0000000..a4e22a7 --- /dev/null +++ b/src/admin-controller/validate-login.js @@ -0,0 +1,44 @@ +import { clientServices } from "../login/service/client-service.js"; + +const loginForm = document.querySelector(".modal-content"); +const inputUsername = document.querySelector("[data-username]"); +const inputUserPassword = document.querySelector("[data-user-password]"); + +loginForm.addEventListener("submit", (event) => { + event.preventDefault(); + dataToValidate(); +}); + +const dataToValidate = () => { + const inputUn = inputUsername.value; + const inputPw = inputUserPassword.value; + clientServices.userList().then((users) => { + users.forEach((user) => { + //! this statement will --prevent-- to run on every -user-. And it will only send the matched one// + if (user.username === inputUn && user.password === inputPw) { + const username = user.username; //store only the matched value + const userPassword = user.password; //store only the matched value + validateLogin(inputUn, inputPw, username, userPassword); + } else { + styleValidation(false); //dont clear inputs + } + }); + }); +}; + +const validateLogin = (inputUn, inputPw, userUn, userPw) => { + if (inputUn === userUn && inputPw === userPw) { + console.log("acces granted"); + window.location.href = "../admin.html"; + styleValidation(true); //clear inputs + } +}; + +const styleValidation = (boolean) => { + if (boolean) { + inputUsername.value = ""; + inputUserPassword.value = ""; + } + inputUsername.classList.toggle("input--invalid"); + inputUserPassword.classList.toggle("input--invalid"); +}; diff --git a/src/assets/fonts/RolexFont-Bold-WebS.woff2 b/src/assets/fonts/RolexFont-Bold-WebS.woff2 new file mode 100644 index 0000000..ccd573f Binary files /dev/null and b/src/assets/fonts/RolexFont-Bold-WebS.woff2 differ diff --git a/src/assets/fonts/RolexFont-Light-WebS.woff2 b/src/assets/fonts/RolexFont-Light-WebS.woff2 new file mode 100644 index 0000000..6f2a447 Binary files /dev/null and b/src/assets/fonts/RolexFont-Light-WebS.woff2 differ diff --git a/src/assets/fonts/RolexFont-Regular-WebS.woff2 b/src/assets/fonts/RolexFont-Regular-WebS.woff2 new file mode 100644 index 0000000..d735ad8 Binary files /dev/null and b/src/assets/fonts/RolexFont-Regular-WebS.woff2 differ diff --git a/src/assets/media/glider-roller-components-scripts-links.txt b/src/assets/media/glider-roller-components-scripts-links.txt new file mode 100644 index 0000000..4c75cee --- /dev/null +++ b/src/assets/media/glider-roller-components-scripts-links.txt @@ -0,0 +1,26 @@ +roller btn: +
+ + +
+ +______ + +glider css min: + + + +glider js: + + \ No newline at end of file diff --git a/src/assets/media/img/img-watches-roller/watches-air-king.webp b/src/assets/media/img/img-watches-roller/watches-air-king.webp new file mode 100644 index 0000000..0ca59f1 Binary files /dev/null and b/src/assets/media/img/img-watches-roller/watches-air-king.webp differ diff --git a/src/assets/media/img/img-watches-roller/watches-cellini-moonphase.webp b/src/assets/media/img/img-watches-roller/watches-cellini-moonphase.webp new file mode 100644 index 0000000..93ab657 Binary files /dev/null and b/src/assets/media/img/img-watches-roller/watches-cellini-moonphase.webp differ diff --git a/src/assets/media/img/img-watches-roller/watches-cosmograph-daytona.webp b/src/assets/media/img/img-watches-roller/watches-cosmograph-daytona.webp new file mode 100644 index 0000000..8336e67 Binary files /dev/null and b/src/assets/media/img/img-watches-roller/watches-cosmograph-daytona.webp differ diff --git a/src/assets/media/img/img-watches-roller/watches-day-date.webp b/src/assets/media/img/img-watches-roller/watches-day-date.webp new file mode 100644 index 0000000..d91b069 Binary files /dev/null and b/src/assets/media/img/img-watches-roller/watches-day-date.webp differ diff --git a/src/assets/media/img/img-watches-roller/watches-gmt-master-ii.webp b/src/assets/media/img/img-watches-roller/watches-gmt-master-ii.webp new file mode 100644 index 0000000..61ceb0a Binary files /dev/null and b/src/assets/media/img/img-watches-roller/watches-gmt-master-ii.webp differ diff --git a/src/assets/media/img/img-watches-roller/watches-milgauss.webp b/src/assets/media/img/img-watches-roller/watches-milgauss.webp new file mode 100644 index 0000000..947f5fb Binary files /dev/null and b/src/assets/media/img/img-watches-roller/watches-milgauss.webp differ diff --git a/src/assets/media/img/img-watches-roller/watches-sea-dweller.webp b/src/assets/media/img/img-watches-roller/watches-sea-dweller.webp new file mode 100644 index 0000000..0257d0b Binary files /dev/null and b/src/assets/media/img/img-watches-roller/watches-sea-dweller.webp differ diff --git a/src/assets/media/img/img-watches-roller/watches-sky-dweller.webp b/src/assets/media/img/img-watches-roller/watches-sky-dweller.webp new file mode 100644 index 0000000..e0dd89c Binary files /dev/null and b/src/assets/media/img/img-watches-roller/watches-sky-dweller.webp differ diff --git a/src/assets/media/img/logo/apple-icon-black-color.png b/src/assets/media/img/logo/apple-icon-black-color.png new file mode 100644 index 0000000..1c044f8 Binary files /dev/null and b/src/assets/media/img/logo/apple-icon-black-color.png differ diff --git a/src/assets/media/img/logo/apple-icon-gold-white.png b/src/assets/media/img/logo/apple-icon-gold-white.png new file mode 100644 index 0000000..e894280 Binary files /dev/null and b/src/assets/media/img/logo/apple-icon-gold-white.png differ diff --git a/src/assets/media/img/logo/tstone-blackColor.png b/src/assets/media/img/logo/tstone-blackColor.png new file mode 100644 index 0000000..6f69eb8 Binary files /dev/null and b/src/assets/media/img/logo/tstone-blackColor.png differ diff --git a/src/assets/media/img/logo/tstone-blackColor_logo.png b/src/assets/media/img/logo/tstone-blackColor_logo.png new file mode 100644 index 0000000..24574e1 Binary files /dev/null and b/src/assets/media/img/logo/tstone-blackColor_logo.png differ diff --git a/src/assets/media/img/logo/tstone-short-logo.png b/src/assets/media/img/logo/tstone-short-logo.png new file mode 100644 index 0000000..13d8c98 Binary files /dev/null and b/src/assets/media/img/logo/tstone-short-logo.png differ diff --git a/src/assets/media/img/logo/tstone_logo_withoutLine.png b/src/assets/media/img/logo/tstone_logo_withoutLine.png new file mode 100644 index 0000000..76bbfc9 Binary files /dev/null and b/src/assets/media/img/logo/tstone_logo_withoutLine.png differ diff --git a/src/assets/media/img/logo/ttm-logo-color.png b/src/assets/media/img/logo/ttm-logo-color.png new file mode 100644 index 0000000..481dd6c Binary files /dev/null and b/src/assets/media/img/logo/ttm-logo-color.png differ diff --git a/src/assets/media/img/logo/ttm-logo-white-and-color.png b/src/assets/media/img/logo/ttm-logo-white-and-color.png new file mode 100644 index 0000000..dae7fce Binary files /dev/null and b/src/assets/media/img/logo/ttm-logo-white-and-color.png differ diff --git a/src/assets/media/img/logo/ttm-logo-white-black-and-color.png b/src/assets/media/img/logo/ttm-logo-white-black-and-color.png new file mode 100644 index 0000000..91e27ed Binary files /dev/null and b/src/assets/media/img/logo/ttm-logo-white-black-and-color.png differ diff --git a/src/assets/media/img/logo/ttm-logo-white.png b/src/assets/media/img/logo/ttm-logo-white.png new file mode 100644 index 0000000..1071a67 Binary files /dev/null and b/src/assets/media/img/logo/ttm-logo-white.png differ diff --git a/src/assets/media/img/logo/ttm-short-logo-color.png b/src/assets/media/img/logo/ttm-short-logo-color.png new file mode 100644 index 0000000..7e37592 Binary files /dev/null and b/src/assets/media/img/logo/ttm-short-logo-color.png differ diff --git a/src/assets/media/img/logo/ttm-short-logo-white.png b/src/assets/media/img/logo/ttm-short-logo-white.png new file mode 100644 index 0000000..840c622 Binary files /dev/null and b/src/assets/media/img/logo/ttm-short-logo-white.png differ diff --git a/src/assets/media/img/watch-pages-img/page-air-king-beauty.webp b/src/assets/media/img/watch-pages-img/page-air-king-beauty.webp new file mode 100644 index 0000000..044dd57 Binary files /dev/null and b/src/assets/media/img/watch-pages-img/page-air-king-beauty.webp differ diff --git a/src/assets/media/img/watch-pages-img/page-cellini.webp b/src/assets/media/img/watch-pages-img/page-cellini.webp new file mode 100644 index 0000000..0085b9d Binary files /dev/null and b/src/assets/media/img/watch-pages-img/page-cellini.webp differ diff --git a/src/assets/media/img/watch-pages-img/page-cosmograph-daytona.webp b/src/assets/media/img/watch-pages-img/page-cosmograph-daytona.webp new file mode 100644 index 0000000..9fe172c Binary files /dev/null and b/src/assets/media/img/watch-pages-img/page-cosmograph-daytona.webp differ diff --git a/src/assets/media/img/watch-pages-img/page-day-date.jpg b/src/assets/media/img/watch-pages-img/page-day-date.jpg new file mode 100644 index 0000000..98dbcbb Binary files /dev/null and b/src/assets/media/img/watch-pages-img/page-day-date.jpg differ diff --git a/src/assets/media/img/watch-pages-img/page-gmt-master-ii.jpg b/src/assets/media/img/watch-pages-img/page-gmt-master-ii.jpg new file mode 100644 index 0000000..4228617 Binary files /dev/null and b/src/assets/media/img/watch-pages-img/page-gmt-master-ii.jpg differ diff --git a/src/assets/media/img/watch-pages-img/page-milgauss.jpg b/src/assets/media/img/watch-pages-img/page-milgauss.jpg new file mode 100644 index 0000000..796c663 Binary files /dev/null and b/src/assets/media/img/watch-pages-img/page-milgauss.jpg differ diff --git a/src/assets/media/img/watch-pages-img/page-new-sky-dweller.jpg b/src/assets/media/img/watch-pages-img/page-new-sky-dweller.jpg new file mode 100644 index 0000000..c58ee86 Binary files /dev/null and b/src/assets/media/img/watch-pages-img/page-new-sky-dweller.jpg differ diff --git a/src/assets/media/img/watch-pages-img/page-sea-dweller-deepsea-beauty.jpg b/src/assets/media/img/watch-pages-img/page-sea-dweller-deepsea-beauty.jpg new file mode 100644 index 0000000..248ca7c Binary files /dev/null and b/src/assets/media/img/watch-pages-img/page-sea-dweller-deepsea-beauty.jpg differ diff --git a/src/assets/media/media-links.txt b/src/assets/media/media-links.txt new file mode 100644 index 0000000..19a09fa --- /dev/null +++ b/src/assets/media/media-links.txt @@ -0,0 +1,71 @@ +VIDEOS: + +HOME=PAGE: https://content.rolex.com/dam/new-watches-2022/new-watches/deepsea-challenge/homepage/hss/part-2/new-rolex-deepsea-homepage-cover-02.mp4 + + +WATCHES COLLECTION SECTION VIDEO: https://content.rolex.com/dam/watches/hubs/all-watches/videos/hub-collection-watches-cover.mp4 + +SEA-DWELLER: https://content.rolex.com/dam/watches/family-pages/sea-dweller/video/cover/professional-watches-sea-dweller-cover-video.mp4 + +AIR-KING: https://content.rolex.com/dam/watches/family-pages/air-king/video/cover/professional-watches-new-air-king-2022-video.mp4 + +GMT-MASTER-II: https://content.rolex.com/dam/watches/family-pages/gmt-master-ii/video/cover/professional-watches-gmt-master-ii-cover-video.mp4 + +DAY-DATE: https://content.rolex.com/dam/watches/family-pages/day-date/2022/cover/classic-watches-day-date-2022-cover-video.mp4 + +DAYTONA: https://content.rolex.com/dam/watches/family-pages/cosmograph-daytona/video/cover/professional-watches-cosmograph-daytona-cover-video.mp4 + +SKY-DWELLER: https://content.rolex.com/dam/new-watches-2020/new-sky-dweller/videos/cover/new-sky-dweller-cover.mp4 + +MILGAUSS: https://content.rolex.com/dam/watches/family-pages/milgauss/video/cover/professional-watches-milgauss-cover-video.mp4 + +CELINE: https://content.rolex.com/dam/watches/family-pages/cellini/video/cover/classic-watches-cellini-moonphase-video.mp4 + + +ROLLER-IMG: + +SEA-DWELLER: https://content.rolex.com/dam/new-watches-2020/homepage/roller/all-watches/watches_0005_m126603-0001-sea-dweller.jpg?imwidth=550,%20https://content.rolex.com/dam/new-watches-2020/homepage/roller/all-watches/watches_0005_m126603-0001-sea-dweller.jpg?imwidth=1080%202x + +AIR-KING: https://content.rolex.com/dam/new-watches-2022/homepage/roller-family/homepage-new-watches-2022-roller-watches-air-king-family-m126900-0001.jpg?imwidth=550,%20https://content.rolex.com/dam/new-watches-2022/homepage/roller-family/homepage-new-watches-2022-roller-watches-air-king-family-m126900-0001.jpg?imwidth=1080%202x + +GMT-MASTER-II: https://content.rolex.com/dam/new-watches-2020/homepage/roller/all-watches/watches_0004_m126711chnr-0002-gmt-master-ii.jpg?imwidth=550,%20https://content.rolex.com/dam/new-watches-2020/homepage/roller/all-watches/watches_0004_m126711chnr-0002-gmt-master-ii.jpg?imwidth=1080%202x + +DAY-DATE: https://content.rolex.com/dam/new-watches-2022/homepage/roller-family/homepage-new-watches-2022-roller-watches-day-date-family-m228236-0012.jpg?imwidth=550,%20https://content.rolex.com/dam/new-watches-2022/homepage/roller-family/homepage-new-watches-2022-roller-watches-day-date-family-m228236-0012.jpg?imwidth=1080%202x + +DAYTONA: https://content.rolex.com/dam/new-watches-2021/homepage/roller/all-watches/watches_0012_m116519ln-0038-cosmograph-daytona.jpg?imwidth=550,%20https://content.rolex.com/dam/new-watches-2021/homepage/roller/all-watches/watches_0012_m116519ln-0038-cosmograph-daytona.jpg?imwidth=1080%202x + +SKY-DWELLER: https://content.rolex.com/dam/new-watches-2020/homepage/roller/all-watches/watches_0000_m326238-0009-sky-dweller.jpg?imwidth=550,%20https://content.rolex.com/dam/new-watches-2020/homepage/roller/all-watches/watches_0000_m326238-0009-sky-dweller.jpg?imwidth=1080%202x + +MILGAUSS: https://content.rolex.com/dam/new-watches-2020/homepage/roller/all-watches/watches_0012_m116400gv-0002-milgauss.jpg?imwidth=550,%20https://content.rolex.com/dam/new-watches-2020/homepage/roller/all-watches/watches_0012_m116400gv-0002-milgauss.jpg?imwidth=1080%202x + +CELINE: https://content.rolex.com/dam/new-watches-2020/homepage/roller/all-watches/watches_0014_m50535-0002-cellini-moonphase.jpg?imwidth=550,%20https://content.rolex.com/dam/new-watches-2020/homepage/roller/all-watches/watches_0014_m50535-0002-cellini-moonphase.jpg?imwidth=1080%202x + + +EACH-WATCH-PAGE: + +SEA-DWELLER: https://content.rolex.com/dam/new-watches-2022/family-pages/sea-dweller/family-page-sea-dweller-deepsea-beauty_m136660_0003.jpg?imwidth=1350,%20https://content.rolex.com/dam/new-watches-2022/family-pages/sea-dweller/family-page-sea-dweller-deepsea-beauty_m136660_0003.jpg?imwidth=1668%202x + +AIR=KING: https://content.rolex.com/dam/new-watches-2022/family-pages/air-king/family-page-air-king-beauty_m126900-0001_004.jpg?imwidth=1350,%20https://content.rolex.com/dam/new-watches-2022/family-pages/air-king/family-page-air-king-beauty_m126900-0001_004.jpg?imwidth=1668%202x + +GMT-MASTER-II: https://content.rolex.com/dam/watches/family-pages/gmt-master-ii/professional-watches-gmt-master-ii_m126710blro-0001_1801ac_003.jpg?imwidth=1350,%20https://content.rolex.com/dam/watches/family-pages/gmt-master-ii/professional-watches-gmt-master-ii_m126710blro-0001_1801ac_003.jpg?imwidth=1668%202x + +DAY-DATE: https://content.rolex.com/dam/new-watches-2022/new-watches/day-date-40/new-watches-2022-day-date-40-banner-ambiance.jpg?imwidth=1350,%20https://content.rolex.com/dam/new-watches-2022/new-watches/day-date-40/new-watches-2022-day-date-40-banner-ambiance.jpg?imwidth=1668%202x + +DAYTONA: https://content.rolex.com/dam/watches/family-pages/cosmograph-daytona/professional-watches-cosmograph-daytona-beauty_m116500ln-0001_1601ac_004.jpg?imwidth=1350,%20https://content.rolex.com/dam/watches/family-pages/cosmograph-daytona/professional-watches-cosmograph-daytona-beauty_m116500ln-0001_1601ac_004.jpg?imwidth=1668%202x + +SKY-DWELLER: https://content.rolex.com/dam/new-watches-2020/new-sky-dweller/new-sky-dweller-oyster-case.jpg?imwidth=1350,%20https://content.rolex.com/dam/new-watches-2020/new-sky-dweller/new-sky-dweller-oyster-case.jpg?imwidth=1668%202x + +MILGAUSS: https://content.rolex.com/dam/watches/family-pages/milgauss/family-page-milgauss-beauty_m116400GV-0002_bs_003.jpg?imwidth=1350,%20https://content.rolex.com/dam/watches/family-pages/milgauss/family-page-milgauss-beauty_m116400GV-0002_bs_003.jpg?imwidth=1668%202x + +CELINE: https://content.rolex.com/dam/watches/family-pages/cellini/video/classic-watches-cellini-video-autoplay-fallback.jpg?imwidth=1350,%20https://content.rolex.com/dam/watches/family-pages/cellini/video/classic-watches-cellini-video-autoplay-fallback.jpg?imwidth=1668%202x + + + + + + + + + + + diff --git a/src/assets/media/video/classic-watches-cellini-moonphase-video.webm b/src/assets/media/video/classic-watches-cellini-moonphase-video.webm new file mode 100644 index 0000000..a5cc129 Binary files /dev/null and b/src/assets/media/video/classic-watches-cellini-moonphase-video.webm differ diff --git a/src/assets/media/video/classic-watches-day-date-2022-cover-video.mp4 b/src/assets/media/video/classic-watches-day-date-2022-cover-video.mp4 new file mode 100644 index 0000000..d60faea Binary files /dev/null and b/src/assets/media/video/classic-watches-day-date-2022-cover-video.mp4 differ diff --git a/src/assets/media/video/cover-family-page-datejust.webm b/src/assets/media/video/cover-family-page-datejust.webm new file mode 100644 index 0000000..2ea9a67 Binary files /dev/null and b/src/assets/media/video/cover-family-page-datejust.webm differ diff --git a/src/assets/media/video/hub-collection-watches-cover.mp4 b/src/assets/media/video/hub-collection-watches-cover.mp4 new file mode 100644 index 0000000..41d3930 Binary files /dev/null and b/src/assets/media/video/hub-collection-watches-cover.mp4 differ diff --git a/src/assets/media/video/new-rolex-deepsea-homepage-cover.webm b/src/assets/media/video/new-rolex-deepsea-homepage-cover.webm new file mode 100644 index 0000000..236b0ff Binary files /dev/null and b/src/assets/media/video/new-rolex-deepsea-homepage-cover.webm differ diff --git a/src/assets/media/video/new-sky-dweller-cover.webm b/src/assets/media/video/new-sky-dweller-cover.webm new file mode 100644 index 0000000..5dd8fba Binary files /dev/null and b/src/assets/media/video/new-sky-dweller-cover.webm differ diff --git a/src/assets/media/video/professional-watches-cosmograph-daytona-cover-video.webm b/src/assets/media/video/professional-watches-cosmograph-daytona-cover-video.webm new file mode 100644 index 0000000..e5c328a Binary files /dev/null and b/src/assets/media/video/professional-watches-cosmograph-daytona-cover-video.webm differ diff --git a/src/assets/media/video/professional-watches-gmt-master-ii-cover-video.mp4 b/src/assets/media/video/professional-watches-gmt-master-ii-cover-video.mp4 new file mode 100644 index 0000000..dce2ba8 Binary files /dev/null and b/src/assets/media/video/professional-watches-gmt-master-ii-cover-video.mp4 differ diff --git a/src/assets/media/video/professional-watches-milgauss-cover-video.mp4 b/src/assets/media/video/professional-watches-milgauss-cover-video.mp4 new file mode 100644 index 0000000..7eeabb6 Binary files /dev/null and b/src/assets/media/video/professional-watches-milgauss-cover-video.mp4 differ diff --git a/src/assets/media/video/professional-watches-new-air-king-2022-video.mp4 b/src/assets/media/video/professional-watches-new-air-king-2022-video.mp4 new file mode 100644 index 0000000..395043b Binary files /dev/null and b/src/assets/media/video/professional-watches-new-air-king-2022-video.mp4 differ diff --git a/src/assets/media/video/professional-watches-sea-dweller-cover-video.mp4 b/src/assets/media/video/professional-watches-sea-dweller-cover-video.mp4 new file mode 100644 index 0000000..871f14d Binary files /dev/null and b/src/assets/media/video/professional-watches-sea-dweller-cover-video.mp4 differ diff --git a/src/assets/styles/admin-page.css b/src/assets/styles/admin-page.css new file mode 100644 index 0000000..3bc3224 --- /dev/null +++ b/src/assets/styles/admin-page.css @@ -0,0 +1,23 @@ +/*resets*/ +@import "resets/normalize.css"; + +/*variables*/ +@import "variables/colors.css"; +@import "variables/fonts.css"; + +/*animations*/ +@import "animations/animations.css"; + +/*base*/ +@import "base/base.css"; + +/*page-sections*/ +@import "page-sections/admin-page-styles/admin-navbar.css"; +@import "page-sections/admin-page-styles/add-new-item-btn.css"; +@import "page-sections/admin-page-styles/admin-items-section.css"; +@import "page-sections/admin-page-styles/admin-edit-modal.css"; +@import "page-sections/admin-page-styles/admin-footer.css"; + +/*config*/ +@import "config/breakpoints/admin-items-breakpoints.css"; +@import "config/breakpoints/admin-edit-modal-breakpoints.css"; diff --git a/src/assets/styles/animations/animations.css b/src/assets/styles/animations/animations.css new file mode 100644 index 0000000..1777d63 --- /dev/null +++ b/src/assets/styles/animations/animations.css @@ -0,0 +1,23 @@ +/* BELOW - animation on all elements with class = arrow-holder/arrow*/ +@keyframes arrowAnimation { + 0% { + top: 100px; + opacity: 1; + } + 100% { + top: 200px; + opacity: 0; + } +} +/* ABOVE - animation on all elements with class = arrow-holder/arrow*/ + +/* Add Zoom Animation */ +@-webkit-keyframes animatezoom { + from {-webkit-transform: scale(0)} + to {-webkit-transform: scale(1)} +} + +@keyframes animatezoom { + from {transform: scale(0)} + to {transform: scale(1)} +} \ No newline at end of file diff --git a/src/assets/styles/base/base.css b/src/assets/styles/base/base.css new file mode 100644 index 0000000..42dc597 --- /dev/null +++ b/src/assets/styles/base/base.css @@ -0,0 +1,45 @@ +@media (prefers-reduced-motion: no-preference) { + * { + scroll-behavior: smooth; + } +} + +@font-face { + font-family: "RolexFont-Bold"; + src: url("../../../../src/assets/fonts/RolexFont-Bold-WebS.woff2") + format(woff2); +} + +@font-face { + font-family: "RolexFont-Regular"; + src: url("../../../../src/assets/fonts/RolexFont-Regular-WebS.woff2") + format(woff2); +} + +@font-face { + font-family: "RolexFont-Light"; + src: url("../../../../src/assets/fonts/RolexFont-Light-WebS.woff2") + format(woff2); +} + +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +body { + display: flex; + justify-content: space-between; + flex-direction: column; + font-family: Helvetica, sans-serif; + line-height: 1.4; + background-color: var(--style-color-darkBrown); +} + +.container { + max-width: 1200px; + margin: 0 auto; +} diff --git a/src/assets/styles/config/breakpoints/admin-edit-modal-breakpoints.css b/src/assets/styles/config/breakpoints/admin-edit-modal-breakpoints.css new file mode 100644 index 0000000..ae8dc34 --- /dev/null +++ b/src/assets/styles/config/breakpoints/admin-edit-modal-breakpoints.css @@ -0,0 +1,5 @@ +@media (max-height: 500px) { + .admin-items.modal { + overflow: auto; /*? will let you scroll*/ + } +} diff --git a/src/assets/styles/config/breakpoints/admin-items-breakpoints.css b/src/assets/styles/config/breakpoints/admin-items-breakpoints.css new file mode 100644 index 0000000..448741e --- /dev/null +++ b/src/assets/styles/config/breakpoints/admin-items-breakpoints.css @@ -0,0 +1,12 @@ +@media (min-width: 600px) { + .grid__container { + grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); + } +} + +@media (min-width: 1000px) { + .grid__container { + grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); + padding: 3rem; + } +} diff --git a/src/assets/styles/config/breakpoints/footer-breakpoints.css b/src/assets/styles/config/breakpoints/footer-breakpoints.css new file mode 100644 index 0000000..1d5d260 --- /dev/null +++ b/src/assets/styles/config/breakpoints/footer-breakpoints.css @@ -0,0 +1,14 @@ +@media (min-width: 600px) { + .footer-links__content--wrapper { + display: flex; + justify-content: center; + align-items: flex-start; + gap: 1.5rem; + } + .footer.content__list--items:first-of-type { + padding-top: 0.8rem; + } + .footer.content__list--items:last-of-type { + padding-bottom: 0.8rem; + } +} diff --git a/src/assets/styles/config/breakpoints/header-breakpoints.css b/src/assets/styles/config/breakpoints/header-breakpoints.css new file mode 100644 index 0000000..ef967ea --- /dev/null +++ b/src/assets/styles/config/breakpoints/header-breakpoints.css @@ -0,0 +1,25 @@ +@media (min-width: 1000px) { + .header-content__title, + .header-content__subtitle { + line-height: 0.7; + } + .header-content__title { + font-size: 2.7rem; + } + .header-content__subtitle { + font-size: 1.3rem; + } +} +@media (max-width: 600px) { + .navbar__logo img { + max-width: 110px; + } +} +@media (max-height: 500px) { + .arrow-holder, + .arrow { + display: none; + visibility: hidden; + animation: none; + } +} diff --git a/src/assets/styles/config/breakpoints/navbar-breakpoints.css b/src/assets/styles/config/breakpoints/navbar-breakpoints.css new file mode 100644 index 0000000..94a4676 --- /dev/null +++ b/src/assets/styles/config/breakpoints/navbar-breakpoints.css @@ -0,0 +1,9 @@ +@media (min-width: 1000px) { + .navbar { + padding: 0.3rem 2rem 0.4rem 2rem; + } + .navbar__open-menu_btn, + .navbar__search-btn { + font-size: 0.9rem; + } +} diff --git a/src/assets/styles/config/breakpoints/search-panel-breakpoints.css b/src/assets/styles/config/breakpoints/search-panel-breakpoints.css new file mode 100644 index 0000000..7dd9047 --- /dev/null +++ b/src/assets/styles/config/breakpoints/search-panel-breakpoints.css @@ -0,0 +1,11 @@ +@media (min-width: 1000px) { + .search-bar__input { + width: 40vw; + } + .search-panel__text { + font-size: 1.3rem; + } + .item-result-container { + width: 80%; + } +} diff --git a/src/assets/styles/config/breakpoints/section-1-breakpoints.css b/src/assets/styles/config/breakpoints/section-1-breakpoints.css new file mode 100644 index 0000000..73c1493 --- /dev/null +++ b/src/assets/styles/config/breakpoints/section-1-breakpoints.css @@ -0,0 +1,9 @@ +@media (min-width: 1000px) { + .about-watch { + margin-top: 4rem; + margin-bottom: 6rem; + } + .watch-section-1__title { + font-size: 2.2rem; + } +} diff --git a/src/assets/styles/config/breakpoints/section-roller-breakpoints.css b/src/assets/styles/config/breakpoints/section-roller-breakpoints.css new file mode 100644 index 0000000..884d45b --- /dev/null +++ b/src/assets/styles/config/breakpoints/section-roller-breakpoints.css @@ -0,0 +1,24 @@ +@media (min-width: 600px) { + .roller__item { + width: 40%; + } +} +@media (min-width: 1200px) { + .watches__roller-container { + margin-left: 10%; + } + .roller__item { + width: 25%; + } +} + +/* +@media (min-height: 800px) { + .roller__img { + height: 50vh; + /*old 40vh*/ +/*} + .roller__img.sidepanel-roller { + height: 30vh; + } +}*/ diff --git a/src/assets/styles/config/breakpoints/sidepanel-breakpoints.css b/src/assets/styles/config/breakpoints/sidepanel-breakpoints.css new file mode 100644 index 0000000..6e8ba81 --- /dev/null +++ b/src/assets/styles/config/breakpoints/sidepanel-breakpoints.css @@ -0,0 +1,28 @@ +@media (min-width: 600px) { + .sidepanel--show { + width: 70%; + } + .sidepanel__content { + padding: 0 2.5rem; + } + .sidepanel__close-menu_btn { + margin-left: 2.5rem; + } +} +@media (min-width: 1000px) { + .sidepanel--show { + width: 50%; + } + .sidepanel__close-menu_btn { + margin-left: 4rem; + } + .sidepanel__content { + padding: 0 4rem; + } +} + +@media (max-width: 600px) { + .sidepanel__content { + padding: 0 1.5rem; + } +} diff --git a/src/assets/styles/config/breakpoints/sidepanel-roller-breakpoints.css b/src/assets/styles/config/breakpoints/sidepanel-roller-breakpoints.css new file mode 100644 index 0000000..34133e3 --- /dev/null +++ b/src/assets/styles/config/breakpoints/sidepanel-roller-breakpoints.css @@ -0,0 +1,21 @@ +@media (min-width: 600px) { + .sidepanel-watches__roller-container { + margin-left: 2.5rem; + } + .roller__item.sidepanel-roller { + width: 30%; + } +} + +@media (min-width: 1000px) { + .sidepanel-watches__roller-container { + margin-left: 4rem; + } + .roller__item.sidepanel-roller { + width: 30%; + } + .item__title.sidepanel-roller, + .item__about.sidepanel-roller { + font-size: 0.8rem; + } +} diff --git a/src/assets/styles/config/breakpoints/toggle-login-breakpoints.css b/src/assets/styles/config/breakpoints/toggle-login-breakpoints.css new file mode 100644 index 0000000..0debb48 --- /dev/null +++ b/src/assets/styles/config/breakpoints/toggle-login-breakpoints.css @@ -0,0 +1,17 @@ +@media (min-width: 1000px) { + .modal-content { + width: 50%; + } +} + +@media (min-width: 1500px) { + .modal-content { + width: 35%; + } +} + +@media (max-height: 600px) { + .modal { + overflow: scroll; + } +} diff --git a/src/assets/styles/home-page.css b/src/assets/styles/home-page.css new file mode 100644 index 0000000..7b2c3a4 --- /dev/null +++ b/src/assets/styles/home-page.css @@ -0,0 +1,36 @@ +/*resets*/ +@import "resets/normalize.css"; + +/*variables*/ +@import "variables/colors.css"; +@import "variables/fonts.css"; + +/*animations*/ +@import "animations/animations.css"; + +/*base*/ +@import "base/base.css"; + +/*utils-styles*/ +@import "utils-styles/navbar.css"; +@import "utils-styles/search-panel.css"; +@import "utils-styles/side-panel.css"; +@import "utils-styles/side-panel-roller.css"; +@import "utils-styles/login-modal.css"; + +/*page-sections*/ +@import "page-sections/home-page-styles/header.css"; +@import "page-sections/home-page-styles/section-1.css"; +@import "page-sections/home-page-styles/section-roller.css"; +@import "page-sections/home-page-styles/footer.css"; + +/*config*/ +@import "config/breakpoints/navbar-breakpoints.css"; +@import "config/breakpoints/search-panel-breakpoints.css"; +@import "config/breakpoints/sidepanel-breakpoints.css"; +@import "config/breakpoints/sidepanel-roller-breakpoints.css"; +@import "config/breakpoints/toggle-login-breakpoints.css"; +@import "config/breakpoints/header-breakpoints.css"; +@import "config/breakpoints/section-1-breakpoints.css"; +@import "config/breakpoints/section-roller-breakpoints.css"; +@import "config/breakpoints/footer-breakpoints.css"; diff --git a/src/assets/styles/page-sections/admin-page-styles/add-new-item-btn.css b/src/assets/styles/page-sections/admin-page-styles/add-new-item-btn.css new file mode 100644 index 0000000..069393d --- /dev/null +++ b/src/assets/styles/page-sections/admin-page-styles/add-new-item-btn.css @@ -0,0 +1,31 @@ +.new-item-btn--holder { + display: flex; + justify-content: center; + align-items: center; + padding: 2.5rem 0; + background-color: var(--style-color-white); + height: 15vh; + width: 100%; +} + +button.new-item-btn .fontawesome { + vertical-align: middle; + font-size: 1rem; +} + +button.new-item-btn { + font-size: 0.8rem; + text-align: center; + font-family: var(--font-family-regular); + padding: 0.8rem 1.2rem; + background-color: var(--style-color-green); + color: var(--style-color-white); + border-radius: 0.5rem; + border: none; + cursor: pointer; + transition: all 0.2s ease-in-out; +} + +button.new-item-btn:hover { + background-color: var(--style-color-lightGreen); +} diff --git a/src/assets/styles/page-sections/admin-page-styles/admin-edit-modal.css b/src/assets/styles/page-sections/admin-page-styles/admin-edit-modal.css new file mode 100644 index 0000000..73ccf87 --- /dev/null +++ b/src/assets/styles/page-sections/admin-page-styles/admin-edit-modal.css @@ -0,0 +1,105 @@ +.input--holder { + padding: 2rem; + height: 50vh; + overflow: auto; +} + +.input--holder::-webkit-scrollbar { + width: 0.5rem; +} + +.input--holder::-webkit-scrollbar-track { + background: var(--style-milgauss-gray); +} + +.input--holder::-webkit-scrollbar-thumb { + background: var(--style-color-gold); + border-radius: 1rem; +} + +.data-input { + width: 100%; + padding: 0.5rem 1.1rem; + margin: 8px 0; + display: inline-block; + border: 2px solid var(--style-color-gold); + border-radius: 0.5rem; + box-sizing: border-box; +} + +.label-title { + font-family: var(--font-family-light); + font-size: 0.8rem; +} + +.admin-items.modal { + display: none; + position: fixed; + z-index: 1; + left: 0; + top: 0; + width: 100%; + height: 100%; + overflow: hidden; + padding-top: 4rem; +} + +.admin-items.modal--show { + display: block; +} + +.modal-content { + background-color: #fefefe; + margin: 5% auto 15% auto; + border: 3px solid var(--style-color-green); + border-radius: 0.4rem; + width: 80%; +} + +.animate { + -webkit-animation: animatezoom 0.6s; + animation: animatezoom 0.6s; +} + +.btn--holder { + display: flex; + justify-content: space-around; + border-top: 2px solid var(--style-color-gold); + padding: 1rem; +} + +button.save-item, +button.cancel-edit, +button.cancel-new { + font-family: var(--font-family-regular); + font-size: 0.8rem; + padding: 0.5rem 1rem; + border-radius: 0.5rem; + border: none; + cursor: pointer; + transition: all 0.2s ease-in-out; +} + +button.save-item { + background-color: var(--style-color-green); + color: var(--style-color-white); + min-width: 5rem; + width: 30%; +} + +button.cancel-edit, +button.cancel-new { + background-color: var(--style-color-white); + border: 2px solid var(--style-gmt-master-red); + color: var(--style-gmt-master-red); +} + +button.save-item:hover { + background-color: var(--style-color-lightGreen); +} + +button.cancel-edit:hover, +button.cancel-new:hover { + background-color: var(--style-gmt-master-red); + color: var(--style-color-white); +} diff --git a/src/assets/styles/page-sections/admin-page-styles/admin-footer.css b/src/assets/styles/page-sections/admin-page-styles/admin-footer.css new file mode 100644 index 0000000..67e702a --- /dev/null +++ b/src/assets/styles/page-sections/admin-page-styles/admin-footer.css @@ -0,0 +1,32 @@ +.footer { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + background-color: var(--style-color-darkBrown); + height: auto; +} + +.footer__logo { + height: 9vh; + width: auto; + padding: 0.5rem; +} + +.footer a { + text-decoration: none; +} + +.go-top-button__arrow { + font-size: 1.5rem; + text-align: center; + padding: 1.5rem 0; + border-top: 1px solid var(--style-color-gray); + color: var(--style-color-white); + transition: color 0.2s ease-in-out; + width: 90vw; +} + +.go-top-button__arrow:hover { + color: var(--style-color-gold); +} diff --git a/src/assets/styles/page-sections/admin-page-styles/admin-items-section.css b/src/assets/styles/page-sections/admin-page-styles/admin-items-section.css new file mode 100644 index 0000000..37e4805 --- /dev/null +++ b/src/assets/styles/page-sections/admin-page-styles/admin-items-section.css @@ -0,0 +1,74 @@ +.grid__container { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); + grid-auto-flow: dense; + background-color: var(--style-color-white); + padding: 4rem 0.5rem; +} + +.roller__item { + display: inline-block; + margin: 0.5rem; + text-decoration: none; + width: fit-content; + overflow: hidden; + border-top-left-radius: 1.3rem; + border-top-right-radius: 1.3rem; + height: 100%; +} + +.roller__img { + border-radius: 1.3rem; + height: auto; + width: 100%; +} + +.item__text--holder { + background-color: var(--style-color-white); +} + +.item__title { + color: var(--style-color-offBlack); + font-family: var(--font-family-bold); + padding-top: 0.4rem; +} + +.item__about { + color: var(--style-color-offBlack); +} + +.item-btn--holder { + display: flex; + justify-content: flex-end; + align-items: center; + gap: 1rem; + margin: 1rem 2rem; +} + +.item-btn { + border-radius: 0.5rem; + padding: 0.5rem 1rem; + transition: all 0.2 ease-in-out; + background-color: var(--style-color-white); + transition: all 0.2s ease-in-out; + cursor: pointer; +} + +.item-btn.item-edit { + border: 1px solid var(--style-color-green); +} + +.item-btn.item-delete { + color: var(--style-gmt-master-red); + border: 1px solid var(--style-gmt-master-red); +} + +.item-btn.item-edit:hover { + background-color: var(--style-color-green); + color: var(--style-color-white); +} + +.item-btn.item-delete:hover { + background-color: var(--style-gmt-master-red); + color: var(--style-color-white); +} diff --git a/src/assets/styles/page-sections/admin-page-styles/admin-navbar.css b/src/assets/styles/page-sections/admin-page-styles/admin-navbar.css new file mode 100644 index 0000000..a705315 --- /dev/null +++ b/src/assets/styles/page-sections/admin-page-styles/admin-navbar.css @@ -0,0 +1,16 @@ +.navbar { + display: flex; + justify-content: center; + align-items: center; + padding: 0.3rem 1rem 0 1rem; + background-color: white; + /* border-bottom: 1px solid var(--style-color-darkBrown); */ + list-style: none; + height: 5rem; + width: 100%; +} + +.navbar__logo img { + height: 9vh; + width: auto; +} diff --git a/src/assets/styles/page-sections/home-page-styles/footer.css b/src/assets/styles/page-sections/home-page-styles/footer.css new file mode 100644 index 0000000..8e12f34 --- /dev/null +++ b/src/assets/styles/page-sections/home-page-styles/footer.css @@ -0,0 +1,79 @@ +/*!--BELOW---styles for when [data-shadow-content] triggers*/ +.low-brightness { + filter: brightness(25%); +} +/*!--ABOVE---styles for when [data-shadow-content] triggers*/ + +/*? BELOW---resets properties setted on list--items on sidepanel styles*/ +.footer.content__list--items { + margin: 0; + padding: 0; + border: none; +} +/*? ABOVE---resets properties setted on list--items on sidepanel styles*/ + +.footer { + background-color: var(--style-color-darkBrown); + color: var(--style-color-offWhite); +} + +.footer-links__content--wrapper { + padding: 2rem; + padding-left: 5%; +} + +.column-1, +.column-2, +.column-3 { + width: 100%; +} + +.footer .items__title { + font-family: var(--font-family-regular), "Alexandria"; + text-transform: uppercase; + font-size: 0.8rem; + padding-bottom: 0.2rem; + border-bottom: 1px solid var(--style-color-gray); +} + +.content__list--items .fa-solid::before, +.content__list--items .fa-brands::before { + margin-right: 0.5rem; + font-size: 1rem; +} + +.footer.content__list--items { + font-size: 0.8rem; + text-align: start; + padding-bottom: 0.4rem; + width: fit-content; +} + +.footer.content__list--items a { + font-family: Helvetica, sans-serif; + color: var(--style-color-offWhite); + font-weight: 600; +} + +.footer.content__list--items:hover, +.footer.content__list--items a:hover, +.go-top-button__arrow:hover { + color: var(--style-color-gold); +} + +.footer.content__list--items:first-of-type { + padding-top: 1.5rem; +} + +.footer.content__list--items:last-of-type { + padding-bottom: 1.5rem; +} + +.go-top-button__arrow { + font-size: 1.5rem; + text-align: center; + border-top: 1px solid var(--style-color-gray); + padding: 1.5rem 0; + width: 100%; + transition: color 0.2s ease-in-out; +} diff --git a/src/assets/styles/page-sections/home-page-styles/header.css b/src/assets/styles/page-sections/home-page-styles/header.css new file mode 100644 index 0000000..a449b31 --- /dev/null +++ b/src/assets/styles/page-sections/home-page-styles/header.css @@ -0,0 +1,49 @@ +.header-content { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + height: 100vh; +} + +/*!--BELOW---styles for when [data-shadow-content] triggers*/ +.low-brightness { + filter: brightness(25%); +} +/*!--ABOVE---styles for when [data-shadow-content] triggers*/ + +.header-content__video { + position: absolute; + object-fit: cover; + top: 0; + height: 100vh; /*?change if needed - later*/ + background: white; /*? setting a bg color to a -video- element seems to fix the "not loading first frame" issue... on iOS devices > iOS-15/*/ +} + +.header-content__title, +.header-content__subtitle { + position: relative; + text-align: center; + text-transform: uppercase; + letter-spacing: 0.3rem; + line-height: 1.2; + color: var(--style-color-white); + font-family: var(--font-family-light), "Alexandria"; + padding: 0 1rem; + pointer-events: none; +} + +.header-content__title { + font-size: 1.7rem; +} + +.header-content__subtitle { + font-size: 0.8rem; +} + +.arrow { + position: relative; + color: var(--style-color-white); + font-size: 1.5rem; + animation: arrowAnimation 1.3s infinite; +} diff --git a/src/assets/styles/page-sections/home-page-styles/section-1.css b/src/assets/styles/page-sections/home-page-styles/section-1.css new file mode 100644 index 0000000..fa33248 --- /dev/null +++ b/src/assets/styles/page-sections/home-page-styles/section-1.css @@ -0,0 +1,44 @@ +/*!--BELOW---styles for when [data-shadow-content] triggers*/ +.low-brightness { + filter: brightness(25%); +} +/*!--ABOVE---styles for when [data-shadow-content] triggers*/ + +.about { + background-color: var(--style-color-white); +} + +.about__title { + font-size: 1.3rem; + font-family: var(--font-family-regular), "Alexandria"; + text-transform: uppercase; + letter-spacing: 0.2rem; + margin-top: 2rem; + padding: 2rem 1rem 1rem 5%; + color: var(--style-color-blue); + background: linear-gradient( + to right, + var(--style-color-offBlack), + var(--style-color-darkerBlue), + var(--style-color-blue), + var(--style-color-blue), + var(--style-color-blue) + ); + background-clip: text; + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; +} + +.about__text { + font-weight: 100; + color: var(--style-color-offBlack); + opacity: 0.9; + padding: 0 1rem 1rem 5%; + line-height: 1.8; + margin-bottom: 3rem; +} + +.about__sources--holder { + background-color: var(--style-color-darkBrown); + border-bottom: 4px solid var(--style-color-darkBrown); +} diff --git a/src/assets/styles/page-sections/home-page-styles/section-roller.css b/src/assets/styles/page-sections/home-page-styles/section-roller.css new file mode 100644 index 0000000..a6d5102 --- /dev/null +++ b/src/assets/styles/page-sections/home-page-styles/section-roller.css @@ -0,0 +1,77 @@ +/*!--BELOW---styles for when [data-shadow-content] triggers*/ +.low-brightness { + filter: brightness(25%); +} +/*!--ABOVE---styles for when [data-shadow-content] triggers*/ + +section.watches { + background-color: var(--style-color-white); +} + +.watches__roller-container { + margin-left: 5%; +} + +.roller { + overflow: auto; + white-space: nowrap; + padding-bottom: 2rem; + margin-bottom: 4rem; +} + +div.roller::-webkit-scrollbar { + height: 0.3rem; +} + +div.roller::-webkit-scrollbar-track { + background: var(--style-milgauss-gray); +} + +div.roller::-webkit-scrollbar-thumb { + background: var(--style-color-green); + border-radius: 1rem; +} + +.roller__item { + display: inline-block; + margin: 0 0.1rem; + text-decoration: none; + width: fit-content; + overflow: hidden; + border-top-left-radius: 1.3rem; + border-top-right-radius: 1.3rem; + height: 100%; + width: 80%; +} + +.roller__img { + border-radius: 1.3rem; + transform-origin: center; + transition: all 0.5s ease; + width: 100%; +} + +.roller__item:hover .roller__img { + transform: scale(1.1); +} + +.item__text--holder { + position: relative; + z-index: 10; + background-color: var(--style-color-white); +} + +.item__title { + font-size: 0.9rem; + color: var(--style-color-offBlack); + text-transform: uppercase; + font-family: var(--font-family-bold), "Alexandria"; + font-weight: 600; + letter-spacing: 0.1rem; + padding-top: 0.4rem; +} + +.item__about { + font-size: 0.8rem; + color: var(--style-color-offBlack); +} diff --git a/src/assets/styles/page-sections/watch-page-styles/dif-styles.css b/src/assets/styles/page-sections/watch-page-styles/dif-styles.css new file mode 100644 index 0000000..e85e7ef --- /dev/null +++ b/src/assets/styles/page-sections/watch-page-styles/dif-styles.css @@ -0,0 +1,226 @@ +/*BELOW---Sea-Dweller--Styles*/ +section.about.sea-dweller-style { + background-color: var(--style-sea-dweller-blue); +} + +.about__title.sea-dweller-style { + background: linear-gradient( + to bottom, + /* var(--style-color-blue), + var(--style-color-blue), + var(--style-sea-dweller-darkerBlue), + var(--style-sea-dweller-darkerBlue), + var(--style-sea-dweller-darkerBlue), */ + var(--style-sea-dweller-limegreen), + var(--style-sea-dweller-limegreen) + ); + background-clip: text; + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; +} + +.about__text.sea-dweller-style { + color: var(--style-color-white); +} + +.price.sea-dweller-style { + color: var(--style-sea-dweller-limegreen); + border: 2px solid var(--style-sea-dweller-limegreen); +} +/*ABOVE---Sea-Dweller--Styles*/ + +/*BELOW---Air-King--Styles*/ +section.about.air-king-style { + background-color: var(--style-color-lightGray); +} + +.about__title.air-king-style { + background: linear-gradient( + to right, + var(--style-color-offBlack), + var(--style-color-green), + var(--style-color-green), + var(--style-color-lightGreen), + var(--style-color-lightGreen) + ); + background-clip: text; + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; +} + +.price.air-king-style { + color: var(--style-color-darkBrown); + border: 2px solid var(--style-color-lightGreen); +} +/*ABOVE---Air-King--Styles*/ + +/*BELOW---GMT-Master-II--Styles*/ +section.about.gmt-master-ii-style { + background-color: var(--style-gmt-master-gray); +} + +.about__title.gmt-master-ii-style { + background: linear-gradient( + to right, + var(--style-gmt-master-red), + var(--style-gmt-master-red), + var(--style-gmt-master-red), + var(--style-color-blue), + var(--style-color-blue), + var(--style-color-blue) + ); + background-clip: text; + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; +} + +.about__text.gmt-master-ii-style { + color: var(--style-color-darkerBlue); +} + +.price.gmt-master-ii-style { + color: var(--style-color-blue); + border: 2px solid var(--style-gmt-master-red); +} +/*ABOVE---GMT-Master-II--Styles*/ + +/*BELOW---Day-Date--Styles*/ +section.about.day-date-style { + background-color: var(--style-day-date-darkBlue); +} + +.about__title.day-date-style { + background: linear-gradient( + to right, + var(--style-day-date-lightblue), + var(--style-day-date-lightblue) + ); + background-clip: text; + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; +} + +.about__text.day-date-style { + color: var(--style-color-white); +} + +.price.day-date-style { + color: var(--style-color-white); + border: 2px solid var(--style-day-date-lightblue); +} +/*ABOVE---Day-Date--Styles*/ + +/*BELOW---daytona--Styles*/ +section.about.daytona-style { + background-color: var(--style-daytona-black); +} + +.about__title.daytona-style { + background: linear-gradient( + to bottom, + var(--style-color-white), + var(--style-color-white) + ); + background-clip: text; + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; +} + +.about__text.daytona-style { + color: var(--style-color-white); +} + +.price.daytona-style { + color: var(--style-color-white); + border: 2px solid var(--style-color-white); +} +/*ABOVE---daytona--Styles*/ + +/*BELOW---sky-dweller--Styles*/ +section.about.sky-dweller-style { + background-color: var(--stlye-sky-dweller-black); +} + +.about__title.sky-dweller-style { + background: linear-gradient( + to left, + var(--style-sky-dweller-gold-1), + var(--style-sky-dweller-gold-2), + var(--style-sky-dweller-gold-3), + var(--style-sky-dweller-gold-2), + var(--style-sky-dweller-gold-3), + var(--style-sky-dweller-brown) + ); + background-clip: text; + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; +} + +.about__text.sky-dweller-style { + color: var(--style-sky-dweller-gold-1); +} + +.price.sky-dweller-style { + color: var(--style-sky-dweller-gold-2); + border: 2px solid var(--style-sky-dweller-gold-3); +} +/*ABOVE---sky-dweller--Styles*/ + +/*BELOW---Milgauss--Styles*/ +section.about.milgauss-style { + background-color: var(--style-milgauss-gray); +} + +.about__title.milgauss-style { + background: linear-gradient( + to bottom, + var(--style-milgauss-green), + var(--style-milgauss-green), + var(--style-milgauss-blue), + var(--style-milgauss-orange), + var(--style-milgauss-blue), + var(--style-milgauss-blue) + ); + background-clip: text; + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; +} + +.about__text.milgauss-style { + color: var(--style-color-offBlack); +} + +.price.milgauss-style { + color: var(--style-milgauss-blue); + border: 2px solid var(--style-milgauss-orange); +} +/*ABOVE---Milgauss--Styles*/ + +/*BELOW---Cellini--Styles*/ +section.about.cellini-style { + background-color: var(--style-cellini-gray); +} + +.about__title.cellini-style { + background: linear-gradient( + to right, + var(--style-cellini-gold-2), + var(--style-cellini-brown), + var(--style-cellini-gold-2), + var(--style-cellini-gold-3), + var(--style-cellini-brown) + ); + background-clip: text; + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; +} + +.about__text.cellini-style { + color: var(--style-cellini-brown); +} + +.price.cellini-style { + color: var(--style-cellini-brown); + border: 2px solid var(--style-cellini-brown); +} +/*ABOVE---Cellini--Styles*/ diff --git a/src/assets/styles/page-sections/watch-page-styles/watches-section-1.css b/src/assets/styles/page-sections/watch-page-styles/watches-section-1.css new file mode 100644 index 0000000..ee59403 --- /dev/null +++ b/src/assets/styles/page-sections/watch-page-styles/watches-section-1.css @@ -0,0 +1,15 @@ +.about-watch { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + margin-bottom: 4rem; +} + +.price { + font-family: var(--font-family-bold); + padding: 0.5rem; + border-radius: 0.5rem; + width: fit-content; + text-align: center; +} diff --git a/src/assets/styles/resets/normalize.css b/src/assets/styles/resets/normalize.css new file mode 100644 index 0000000..dc13b8a --- /dev/null +++ b/src/assets/styles/resets/normalize.css @@ -0,0 +1,351 @@ +/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */ + +/* Document + ========================================================================== */ + +/** + * 1. Correct the line height in all browsers. + * 2. Prevent adjustments of font size after orientation changes in iOS. + */ + +html { + line-height: 1.15; /* 1 */ + -webkit-text-size-adjust: 100%; /* 2 */ +} + +/* Sections + ========================================================================== */ + +/** + * Remove the margin in all browsers. + */ + +body { + margin: 0; +} + +/** + * Render the `main` element consistently in IE. + */ + +main { + display: block; +} + +/** + * Correct the font size and margin on `h1` elements within `section` and + * `article` contexts in Chrome, Firefox, and Safari. + */ + +h1 { + font-size: 2em; + margin: 0.67em 0; +} + +/* Grouping content + ========================================================================== */ + +/** + * 1. Add the correct box sizing in Firefox. + * 2. Show the overflow in Edge and IE. + */ + +hr { + box-sizing: content-box; /* 1 */ + height: 0; /* 1 */ + overflow: visible; /* 2 */ +} + +/** + * 1. Correct the inheritance and scaling of font size in all browsers. + * 2. Correct the odd `em` font sizing in all browsers. + */ + +pre { + font-family: monospace, monospace; /* 1 */ + font-size: 1em; /* 2 */ +} + +/* Text-level semantics + ========================================================================== */ + +/** + * Remove the gray background on active links in IE 10. + */ + +a { + background-color: transparent; +} + +/** + * 1. Remove the bottom border in Chrome 57- + * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. + */ + +abbr[title] { + border-bottom: none; /* 1 */ + text-decoration: underline; /* 2 */ + text-decoration: underline dotted; /* 2 */ +} + +/** + * Add the correct font weight in Chrome, Edge, and Safari. + */ + +b, +strong { + font-weight: bolder; +} + +/** + * 1. Correct the inheritance and scaling of font size in all browsers. + * 2. Correct the odd `em` font sizing in all browsers. + */ + +code, +kbd, +samp { + font-family: monospace, monospace; /* 1 */ + font-size: 1em; /* 2 */ +} + +/** + * Add the correct font size in all browsers. + */ + +small { + font-size: 80%; +} + +/** + * Prevent `sub` and `sup` elements from affecting the line height in + * all browsers. + */ + +sub, +sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; +} + +sub { + bottom: -0.25em; +} + +sup { + top: -0.5em; +} + +/* Embedded content + ========================================================================== */ + +/** + * Remove the border on images inside links in IE 10. + */ + +img { + border-style: none; +} + +/* Forms + ========================================================================== */ + +/** + * 1. Change the font styles in all browsers. + * 2. Remove the margin in Firefox and Safari. + */ + +button, +input, +optgroup, +select, +textarea { + font-family: inherit; /* 1 */ + font-size: 100%; /* 1 */ + line-height: 1.15; /* 1 */ + margin: 0; /* 2 */ +} + +/** + * Show the overflow in IE. + * 1. Show the overflow in Edge. + */ + +button, +input { + /* 1 */ + overflow: visible; +} + +/** + * Remove the inheritance of text transform in Edge, Firefox, and IE. + * 1. Remove the inheritance of text transform in Firefox. + */ + +button, +select { + /* 1 */ + text-transform: none; +} + +/** + * Correct the inability to style clickable types in iOS and Safari. + */ + +button, +[type="button"], +[type="reset"], +[type="submit"] { + -webkit-appearance: button; +} + +/** + * Remove the inner border and padding in Firefox. + */ + +button::-moz-focus-inner, +[type="button"]::-moz-focus-inner, +[type="reset"]::-moz-focus-inner, +[type="submit"]::-moz-focus-inner { + border-style: none; + padding: 0; +} + +/** + * Restore the focus styles unset by the previous rule. + */ + +button:-moz-focusring, +[type="button"]:-moz-focusring, +[type="reset"]:-moz-focusring, +[type="submit"]:-moz-focusring { + outline: 1px dotted ButtonText; +} + +/** + * Correct the padding in Firefox. + */ + +fieldset { + padding: 0.35em 0.75em 0.625em; +} + +/** + * 1. Correct the text wrapping in Edge and IE. + * 2. Correct the color inheritance from `fieldset` elements in IE. + * 3. Remove the padding so developers are not caught out when they zero out + * `fieldset` elements in all browsers. + */ + +legend { + box-sizing: border-box; /* 1 */ + color: inherit; /* 2 */ + display: table; /* 1 */ + max-width: 100%; /* 1 */ + padding: 0; /* 3 */ + white-space: normal; /* 1 */ +} + +/** + * Add the correct vertical alignment in Chrome, Firefox, and Opera. + */ + +progress { + vertical-align: baseline; +} + +/** + * Remove the default vertical scrollbar in IE 10+. + */ + +textarea { + overflow: auto; +} + +/** + * 1. Add the correct box sizing in IE 10. + * 2. Remove the padding in IE 10. + */ + +[type="checkbox"], +[type="radio"] { + box-sizing: border-box; /* 1 */ + padding: 0; /* 2 */ +} + +/** + * Correct the cursor style of increment and decrement buttons in Chrome. + */ + +[type="number"]::-webkit-inner-spin-button, +[type="number"]::-webkit-outer-spin-button { + height: auto; +} + +/** + * 1. Correct the odd appearance in Chrome and Safari. + * 2. Correct the outline style in Safari. + */ + +[type="search"] { + -webkit-appearance: textfield; /* 1 */ + outline-offset: -2px; /* 2 */ +} + +/** + * Remove the inner padding in Chrome and Safari on macOS. + */ + +[type="search"]::-webkit-search-decoration { + -webkit-appearance: none; +} + +/** + * 1. Correct the inability to style clickable types in iOS and Safari. + * 2. Change font properties to `inherit` in Safari. + */ + +::-webkit-file-upload-button { + -webkit-appearance: button; /* 1 */ + font: inherit; /* 2 */ +} + +/* Interactive + ========================================================================== */ + +/* + * Add the correct display in Edge, IE 10+, and Firefox. + */ + +details { + display: block; +} + +/* + * Add the correct display in all browsers. + */ + +summary { + display: list-item; +} + +/* Misc + ========================================================================== */ + +/** + * Add the correct display in IE 10+. + */ + +template { + display: none; +} + +/** + * Add the correct display in IE 10. + */ + +[hidden] { + display: none; +} diff --git a/src/assets/styles/utils-styles/login-modal.css b/src/assets/styles/utils-styles/login-modal.css new file mode 100644 index 0000000..760bdcd --- /dev/null +++ b/src/assets/styles/utils-styles/login-modal.css @@ -0,0 +1,98 @@ +.user-input { + width: 100%; + padding: 0.8rem 1.2rem; + margin: 0.5rem 0; + display: inline-block; + border: 1px solid var(--style-color-gold); + box-sizing: border-box; +} + +.input--invalid { + border: 1px solid red; +} + +.user-input:-webkit-autofill, +.user-input:-webkit-autofill:focus { + -webkit-text-fill-color: var(--style-color-darkBrown); + box-shadow: 0 0 0 1000px var(--style-color-white) inset; +} + +.label-title, +.submit-btn { + font-size: 0.8rem; + letter-spacing: 1.5px; + font-family: var(--font-family-light), Helvetica; + color: var(--style-color-darkBrown); +} + +.submit-btn { + background-color: var(--style-color-gold); + color: var(--style-color-white); + padding: 1rem 1.1rem; + margin: 0.5rem 0; + border: none; + width: 100%; + opacity: 0.8; + transition: all 0.2s ease-in-out; +} + +.submit-btn:hover { + opacity: 1; +} + +.logo-holder { + text-align: center; + margin: 24px 0 12px 0; + position: relative; +} + +img.logo { + width: 30%; +} + +.container { + padding: 16px; +} + +.modal { + display: none; + position: fixed; + z-index: 30; + left: 0; + top: 0; + width: 100%; + height: 100%; + overflow: hidden; + padding-top: 2.5rem; +} + +.modal--show { + display: block; +} + +.modal-content { + background-color: rgba(255, 255, 255, 0.935); + margin: 5% auto 15% auto; + border: 1px solid var(--style-color-white); + width: 80%; + border-radius: 0.2rem; +} + +.close-modal { + position: absolute; + left: 25px; + top: 0; + color: var(--style-color-gold); + font-size: 1.7rem; + transition: all 0.2s ease-in-out; +} + +.close-modal:hover, +.close-modal:focus { + color: var(--style-color-green); +} + +.animate { + -webkit-animation: animatezoom 0.6s; + animation: animatezoom 0.6s; +} diff --git a/src/assets/styles/utils-styles/navbar.css b/src/assets/styles/utils-styles/navbar.css new file mode 100644 index 0000000..b12b86c --- /dev/null +++ b/src/assets/styles/utils-styles/navbar.css @@ -0,0 +1,40 @@ +.navbar { + display: flex; + justify-content: space-between; + align-items: center; + padding: 0.3rem 1rem 0.5rem 1rem; + background-color: transparent; + list-style: none; + position: fixed; + z-index: 10; + top: 0; + height: 5rem; + width: 100%; +} + +.navbar__items { + align-self: flex-end; +} + +.navbar__item { + font-size: 1.2rem; + color: var(--style-color-white); + font-family: Helvetica, sans-serif; + transition: all 0.2s ease-in-out; +} + +.navbar__open-menu_btn, +.navbar__search-btn { + font-size: 0.7rem; +} + +.navbar__logo { + margin-left: 1.5rem; +} + +.navbar__logo img { + width: 100%; + max-width: 150px; + min-width: 100px; + height: auto; +} diff --git a/src/assets/styles/utils-styles/search-panel.css b/src/assets/styles/utils-styles/search-panel.css new file mode 100644 index 0000000..00d0dbd --- /dev/null +++ b/src/assets/styles/utils-styles/search-panel.css @@ -0,0 +1,164 @@ +.search-panel { + display: flex; + flex-direction: column; + justify-content: space-between; + align-items: center; + background-color: var(--style-color-white); + padding: 0.3rem 1rem 0.5rem 1rem; + overflow-y: scroll; + position: fixed; + z-index: 15; + top: -1000px; + height: 0; + width: 100%; +} + +.search-panel--show { + top: 0; + height: fit-content; +} + +.item-result-container { + /*?Display will be set with JS ==> see search-panel.js*/ + grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); + grid-auto-flow: dense; + justify-items: center; + gap: 1rem; + padding: 2rem; + width: 100%; +} + +.search-item-result > a { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + text-decoration: none; + overflow: hidden; +} + +.search-item-result > a, +.item-result__img, +.item-result__text--holder { + border-radius: 1rem; +} + +.search-item-result { + display: none; + height: auto; + max-width: 250px; + width: 100%; +} + +.item-result__text--holder { + text-align: center; + position: relative; + z-index: 5; + padding: 1rem 0.5rem; +} + +.item-result__img { + transition: all 0.5s ease; + width: 100%; +} + +.search-item-result:hover .item-result__img { + transform: scale(1.1); +} + +.show-results { + display: block; +} + +.logo--holder { + display: flex; + justify-content: center; + align-items: center; + width: 100%; + margin-top: 1rem; +} + +.search-panel__logo { + width: 100%; + max-width: 120px; + min-width: 50px; + height: auto; +} + +.search-panel__close_btn { + font-size: 1rem; + padding: 0.7rem 0.9rem; + border-radius: 100%; + background-color: rgb(250, 250, 250); + color: var(--style-color-darkBrown); + transition: all 0.2s ease-in-out; + position: absolute; + right: 5%; + transform: translateY(-30%), translateX(-50%); +} + +.search-panel__text { + text-align: center; + font-family: var(--font-family-bold); + text-transform: uppercase; + font-size: 1rem; + letter-spacing: 0.3rem; + color: var(--style-color-darkBrown); + padding: 2rem 0; + margin: 2rem 0; +} + +.search-panel__close_btn:hover { + color: var(--style-color-white); + background-color: var(--style-color-green); +} +.search-bar { + display: flex; + margin-bottom: 3rem; +} + +.search-bar__input { + background-color: var(--style-color-white); + border: none; + border-bottom: 1px solid var(--style-color-lightGray); + color: var(--style-color-darkBrown); + font-size: 1.5rem; + padding-left: 0.5rem; + width: 70vw; +} + +.search-bar__input::placeholder { + font-size: 1.2rem; + font-weight: 100; + color: var(--style-color-lightGray); +} + +.search-bar__input:focus { + outline: none; + border-bottom: 1px solid var(--style-color-gray); + font-size: 1.5rem; +} + +.search-bar__input:-webkit-autofill, +.search-bar__input:-webkit-autofill:focus { + -webkit-text-fill-color: var(--style-color-white); + box-shadow: 0 0 0 1000px var(--style-color-white) inset; +} + +.search-bar__submit { + font-size: 1.2rem; + color: var(--style-color-white); + background-color: var(--style-color-green); + border: none; + padding: 0.4rem 0.6rem; + border-radius: 100%; + cursor: pointer; + transition: all 0.2s ease-in-out; +} + +.search-bar__submit:hover { + font-size: 1.1rem; /*?sice it has plus 1px due to border below, remove 1px from font-size so it doesnt move*/ + background-color: var(--style-color-white); + border: 1px solid var(--style-color-green); + color: var(--style-color-green); +} diff --git a/src/assets/styles/utils-styles/side-panel-roller.css b/src/assets/styles/utils-styles/side-panel-roller.css new file mode 100644 index 0000000..1c0108d --- /dev/null +++ b/src/assets/styles/utils-styles/side-panel-roller.css @@ -0,0 +1,56 @@ +.roller.roller-on-sidepanel { + margin-bottom: 2rem; +} + +.sidepanel-watches__roller-container { + margin-top: 2rem; + margin-left: 1.5rem; +} + +.roller__item.sidepanel-roller { + overflow: hidden; + text-decoration: none; + border-top-left-radius: unset; + border-top-right-radius: unset; + height: 100%; + width: 50%; +} + +.item__title.sidepanel-roller, +.item__about.sidepanel-roller { + background-color: var(--style-color-darkBrown); + color: var(--style-color-white); + padding-right: 0.5rem; + font-size: 0.7rem; +} + +.item__title.sidepanel-roller { + letter-spacing: 0.1rem; +} + +.roller__img.sidepanel-roller { + border-radius: unset; + transform-origin: center; + transition: all 0.5s ease; + width: 100%; +} + +.roller.roller-on-sidepanel::-webkit-scrollbar { + height: 0.3rem; +} + +.roller.roller-on-sidepanel::-webkit-scrollbar-track { + background: var(--style-color-gray); +} + +.roller.roller-on-sidepanel::-webkit-scrollbar-thumb { + background: var(--style-color-white); + border-radius: 1rem; +} + +/* .sidepanel-roller__btn--holder { + display: none; +} */ +/* .sidepanel-roller__dots { + margin: 0.5rem 0 1rem 0; +} */ diff --git a/src/assets/styles/utils-styles/side-panel.css b/src/assets/styles/utils-styles/side-panel.css new file mode 100644 index 0000000..fd3264d --- /dev/null +++ b/src/assets/styles/utils-styles/side-panel.css @@ -0,0 +1,102 @@ +.sidepanel { + width: 0; + position: fixed; + z-index: 20; + height: 100%; + top: 0; + left: 0; + background-color: var(--style-color-darkBrown); + overflow-x: hidden; + transition: 0.5s; + padding-top: 0.5rem; + overflow-y: scroll; +} + +/* Hide scrollbar for Chrome, Safari and Opera */ +.sidepanel::-webkit-scrollbar { + display: none; +} + +/* Hide scrollbar for IE, Edge and Firefox */ +.sidepanel { + -ms-overflow-style: none; /* IE and Edge */ + scrollbar-width: none; /* Firefox */ +} + +.sidepanel--show { + width: 90%; +} + +.btn { + cursor: pointer; +} + +.sidepanel__close-menu_btn { + font-size: 1.5rem; + color: var(--style-color-white); + transition: all 0.2s ease-in-out; + margin-left: 1.5rem; +} + +.sidepanel__close-menu_btn:hover { + color: var(--style-color-gold); +} + +.sidepanel__header { + display: flex; + justify-content: space-between; + align-items: center; + padding-bottom: 0.5rem; +} + +.sidepanel__logo { + width: 100%; + max-width: 150px; + min-width: 100px; + height: auto; + align-self: center; + margin-right: 2rem; +} + +.content__list { + list-style: none; +} + +.content__list--items a { + font-weight: 500; + color: var(--style-color-white); + text-decoration: none; + transition: all 0.2s ease-in-out; +} + +.login-btn { + font-weight: 500; + color: var(--style-color-white); + transition: all 0.2s ease-in-out; + background-color: var(--style-color-darkBrown); + border: none; +} + +.content__list--items a:hover, +.login-btn:hover { + color: var(--style-color-gold); +} + +.content__list--items { + margin-bottom: 0.5rem; +} + +/* .content__list--items:first-of-type { + padding-top: 2rem; + border-top: 1px solid var(--style-color-gray); +} */ + +.content__list--items:nth-child(4) { + margin-bottom: 2rem; +} + +.content__list--items:last-of-type { + padding-top: 2rem; + border-top: 1px solid var(--style-color-gray); + margin-bottom: 2rem; +} diff --git a/src/assets/styles/variables/colors.css b/src/assets/styles/variables/colors.css new file mode 100644 index 0000000..30b62a4 --- /dev/null +++ b/src/assets/styles/variables/colors.css @@ -0,0 +1,40 @@ +:root { + --style-color-green: #006039; + --style-color-gold: #a37e2c; + --style-color-darkBrown: #212020; + --style-color-offBlack: #121212; + --style-color-white: #ffffff; + --style-color-offWhite: #d4d4d4; + --style-color-gray: #4c4c4c; + --style-color-blue: #0f6296; + --style-color-darkerBlue: #072e47; + /* watch-pages-color-variables */ + --style-color-darkBrown-transparent: #2120207d; + --style-color-green-transparent: #30984f7d; + --style-color-lightGreen: #2da651; + --style-color-lightGray: #b8b9bd; + --style-color-ultraLightGray: #c0c0c0; + --style-sea-dweller-blue: #152a46; + --style-sea-dweller-darkerBlue: #001938; + --style-sea-dweller-limegreen: #c3f030; + --style-gmt-master-gray: #e2e4e5; + --style-gmt-master-red: #930000; + --style-day-date-darkBlue: #061626; + --style-day-date-lightblue: #8ab7ce; + --style-daytona-black: #000003; + --stlye-sky-dweller-black: #010100; + --style-sky-dweller-gold-1: #f9ead6; + --style-sky-dweller-gold-2: #cabb9b; + --style-sky-dweller-gold-3: #a27e48; + --style-sky-dweller-brown: #684925; + --style-milgauss-blue: #00608e; + --style-milgauss-green: #33b67c; + --style-milgauss-orange: #f1833b; + --style-milgauss-gray: #e5e5e8; + --style-cellini-blue: #332584; + --style-cellini-gold-1: #fdefe9; + --style-cellini-gold-2: #e5c1b1; + --style-cellini-gold-3: #f6bda0; + --style-cellini-brown: #894443; + --style-cellini-gray: #ebebeb; +} diff --git a/src/assets/styles/variables/fonts.css b/src/assets/styles/variables/fonts.css new file mode 100644 index 0000000..d1ec3f9 --- /dev/null +++ b/src/assets/styles/variables/fonts.css @@ -0,0 +1,5 @@ +:root { + --font-family-bold: "RolexFont-Bold"; + --font-family-regular: "RolexFont-Regular"; + --font-family-light: "RolexFont-Light"; +} diff --git a/src/assets/styles/watch-page.css b/src/assets/styles/watch-page.css new file mode 100644 index 0000000..b411c2f --- /dev/null +++ b/src/assets/styles/watch-page.css @@ -0,0 +1,37 @@ +/*resets*/ +@import "resets/normalize.css"; + +/*variables*/ +@import "variables/colors.css"; +@import "variables/fonts.css"; + +/*animations*/ +@import "animations/animations.css"; + +/*base*/ +@import "base/base.css"; + +/*utils-styles*/ +@import "utils-styles/navbar.css"; +@import "utils-styles/search-panel.css"; +@import "utils-styles/side-panel.css"; +@import "utils-styles/side-panel-roller.css"; +@import "utils-styles/login-modal.css"; + +/*page-sections*/ +@import "page-sections/home-page-styles/header.css"; +@import "page-sections/home-page-styles/section-1.css"; +@import "page-sections/watch-page-styles/watches-section-1.css"; +@import "page-sections/home-page-styles/section-roller.css"; +@import "page-sections/watch-page-styles/dif-styles.css"; +@import "page-sections/home-page-styles/footer.css"; + +/*config*/ +@import "config/breakpoints/navbar-breakpoints.css"; +@import "config/breakpoints/search-panel-breakpoints.css"; +@import "config/breakpoints/sidepanel-breakpoints.css"; +@import "config/breakpoints/sidepanel-roller-breakpoints.css"; +@import "config/breakpoints/toggle-login-breakpoints.css"; +@import "config/breakpoints/header-breakpoints.css"; +@import "config/breakpoints/section-1-breakpoints.css"; +@import "config/breakpoints/footer-breakpoints.css"; diff --git a/src/components/admin-page-markup-componenets.js b/src/components/admin-page-markup-componenets.js new file mode 100644 index 0000000..c4d2615 --- /dev/null +++ b/src/components/admin-page-markup-componenets.js @@ -0,0 +1,2 @@ +import "./loaders/load-admin-items.js"; +import "../admin-controller/admin-edit-item.js"; diff --git a/src/components/home-page-markup-components.js b/src/components/home-page-markup-components.js new file mode 100644 index 0000000..f9f54ca --- /dev/null +++ b/src/components/home-page-markup-components.js @@ -0,0 +1,5 @@ +import "./loaders/load-section-roller-data.js"; +import "./loaders/load-sidepanel-roller.js"; +import "./loaders/load-login-modal.js"; +import "./loaders/load-footer-watch-links.js"; +import "./loaders/load-social-media-links.js"; \ No newline at end of file diff --git a/src/components/loaders/load-admin-items.js b/src/components/loaders/load-admin-items.js new file mode 100644 index 0000000..a0a165f --- /dev/null +++ b/src/components/loaders/load-admin-items.js @@ -0,0 +1,22 @@ +import { adminServices } from '../../login/service/admin-service.js'; +import { adminItemsTemplate } from '../markup-templates/admin-items-template.js'; +import { itemToUpdate } from '../../admin-controller/admin-edit-item.js'; +import { + cancelAddNew, + cancelUpdate, +} from '../../admin-controller/admin-cancel-operation.js'; + +const itemsSection = document.querySelector('[data-grid-items-section]'); + +adminServices + .watchItems() + .then((items) => + items.forEach((item) => { + itemsSection.innerHTML += adminItemsTemplate(item); + }) + ) + .then(() => { + itemToUpdate(); + cancelAddNew(); + cancelUpdate(); + }); diff --git a/src/components/loaders/load-footer-watch-links.js b/src/components/loaders/load-footer-watch-links.js new file mode 100644 index 0000000..e0928be --- /dev/null +++ b/src/components/loaders/load-footer-watch-links.js @@ -0,0 +1,27 @@ +import { adminServices } from '../../login/service/admin-service.js'; +import { watches_data } from '../watches-data.js'; +import { footerLinkTemplate } from '../markup-templates/footer-watch-links-template.js'; + +const footerLinksHolder = document.querySelector( + '[data-footer-watch-page-links]' +); + +adminServices + .watchItems() + .then((items) => { + items.forEach((item) => { + footerLinksHolder.innerHTML += footerLinkTemplate(item); + console.log( + "The 'The Collection' links below on the footer are renders from => JSON-server-data" + ); + }); + }) + .catch((error) => { + Object.values(watches_data).forEach((item) => { + footerLinksHolder.innerHTML += footerLinkTemplate(item); + }); + console.log( + "The 'The Collection' links below on the footer are renders from => JS-static-data | data from JSON-server got an error =>", + error + ); + }); diff --git a/src/components/loaders/load-login-modal.js b/src/components/loaders/load-login-modal.js new file mode 100644 index 0000000..91c322d --- /dev/null +++ b/src/components/loaders/load-login-modal.js @@ -0,0 +1,5 @@ +import { loginModalTemplate } from '../markup-templates/login-modal-template.js'; + +const loginModal = document.querySelector('[data-modal-holder]'); + +loginModal.innerHTML = loginModalTemplate(); diff --git a/src/components/loaders/load-section-roller-data.js b/src/components/loaders/load-section-roller-data.js new file mode 100644 index 0000000..0610da7 --- /dev/null +++ b/src/components/loaders/load-section-roller-data.js @@ -0,0 +1,25 @@ +import { watches_data } from '../watches-data.js'; +import { rollerItemsMarkupTemplate } from '../markup-templates/roller-items-template.js'; +import { adminServices } from '../../login/service/admin-service.js'; + +const sectionRollerHolder = document.querySelector('[data-roller]'); + +adminServices + .watchItems() + .then((items) => { + items.forEach((item) => { + sectionRollerHolder.innerHTML += rollerItemsMarkupTemplate(item); + console.info( + 'The Watch items you are visualizing renders from => JSON-server-data' + ); + }); + }) + .catch((error) => { + Object.values(watches_data).forEach((item) => { + sectionRollerHolder.innerHTML += rollerItemsMarkupTemplate(item); + }); + console.info( + 'The Watch items you are visualizing renders from => JS-static-data | data from JSON-server got an error =>', + error + ); + }); diff --git a/src/components/loaders/load-sidepanel-roller.js b/src/components/loaders/load-sidepanel-roller.js new file mode 100644 index 0000000..4bbbc81 --- /dev/null +++ b/src/components/loaders/load-sidepanel-roller.js @@ -0,0 +1,31 @@ +import { adminServices } from '../../login/service/admin-service.js'; +import { watches_data } from '../watches-data.js'; +import { rollerItemsMarkupTemplate } from '../markup-templates/roller-items-template.js'; + +const sidePanelRollerHolder = document.querySelector('[data-roller-sidepanel]'); + +adminServices + .watchItems() + .then((items) => { + items.forEach((item) => { + sidePanelRollerHolder.innerHTML += rollerItemsMarkupTemplate( + item, + item.sidepanel_class + ); + console.info( + 'The Watch items you are visualizing renders from => JSON-server-data' + ); + }); + }) + .catch((error) => { + Object.values(watches_data).forEach((item) => { + sidePanelRollerHolder.innerHTML += rollerItemsMarkupTemplate( + item, + item.sidepanel_class + ); + }); + console.info( + 'The Watch items you are visualizing renders from => JS-static-data | data from JSON-server got an error =>', + error + ); + }); diff --git a/src/components/loaders/load-social-media-links.js b/src/components/loaders/load-social-media-links.js new file mode 100644 index 0000000..44be256 --- /dev/null +++ b/src/components/loaders/load-social-media-links.js @@ -0,0 +1,10 @@ +import { socialMediaData } from '../social-media-data.js'; +import { socialMediaLinksTemplate } from '../markup-templates/social-media-links-template.js'; + +const socialMediaLinksHolder = document.querySelector( + '[data-social-media-links-holder]' +); + +Object.values(socialMediaData).forEach((link) => { + socialMediaLinksHolder.innerHTML += socialMediaLinksTemplate(link); +}); diff --git a/src/components/loaders/load-watch-page.js b/src/components/loaders/load-watch-page.js new file mode 100644 index 0000000..50f16eb --- /dev/null +++ b/src/components/loaders/load-watch-page.js @@ -0,0 +1,40 @@ +import { adminServices } from '../../login/service/admin-service.js'; +import { watches_data } from '../watches-data.js'; +import { + headerMarkupTemplate, + aboutMarkupTemplate, +} from '../markup-templates/watch-pages-template.js'; + +const headerContent = document.querySelector('[data-header-content]'); +const sectionAbout = document.querySelector('[data-about-section-content]'); +const itemClickedID = localStorage.getItem('watchId'); + +adminServices + .watchItems() + .then((items) => { + items.forEach((item) => { + if (itemClickedID === item.id) { + window.top.document.title = item.doc_title; + sectionAbout.classList.add(`${item.style_class}`); + headerContent.innerHTML = headerMarkupTemplate(item); + sectionAbout.innerHTML = aboutMarkupTemplate(item); + } + console.info( + 'The Watch page you are visualizing renders from => JSON-server-data' + ); + }); + }) + .catch((error) => { + Object.values(watches_data).forEach((item) => { + if (itemClickedID === item.id) { + window.top.document.title = item.doc_title; + sectionAbout.classList.add(`${item.style_class}`); + headerContent.innerHTML = headerMarkupTemplate(item); + sectionAbout.innerHTML = aboutMarkupTemplate(item); + } + }); + console.info( + 'The Watch page you are visualizing renders from => JS-static-data | data from JSON-server got an error =>', + error + ); + }); diff --git a/src/components/markup-templates/admin-edit-panel-template.js b/src/components/markup-templates/admin-edit-panel-template.js new file mode 100644 index 0000000..4c6b43d --- /dev/null +++ b/src/components/markup-templates/admin-edit-panel-template.js @@ -0,0 +1,5 @@ +export const adminEditInputTemplates = (itemId, dataKey, keyValue) => { + return ` + `; +}; diff --git a/src/components/markup-templates/admin-items-template.js b/src/components/markup-templates/admin-items-template.js new file mode 100644 index 0000000..1af0d7c --- /dev/null +++ b/src/components/markup-templates/admin-items-template.js @@ -0,0 +1,22 @@ +export const adminItemsTemplate = (item) => { + return `
+ + ${item.img_alt} +
+

${item.roller_title}

+

${item.roller_about}

+
+
+ + +
+
`; +}; diff --git a/src/components/markup-templates/footer-watch-links-template.js b/src/components/markup-templates/footer-watch-links-template.js new file mode 100644 index 0000000..e7de6c1 --- /dev/null +++ b/src/components/markup-templates/footer-watch-links-template.js @@ -0,0 +1,11 @@ +export const footerLinkTemplate = (item) => { + return `
  • + ${item.footer_link_title} +
    • `; +}; diff --git a/src/components/markup-templates/login-modal-template.js b/src/components/markup-templates/login-modal-template.js new file mode 100644 index 0000000..d92b86c --- /dev/null +++ b/src/components/markup-templates/login-modal-template.js @@ -0,0 +1,35 @@ +export const loginModalTemplate = () => { + return `
    +
    + + + +
    +
    + + + + + +
    +
    `; +}; diff --git a/src/components/markup-templates/roller-items-template.js b/src/components/markup-templates/roller-items-template.js new file mode 100644 index 0000000..204748b --- /dev/null +++ b/src/components/markup-templates/roller-items-template.js @@ -0,0 +1,15 @@ +export const rollerItemsMarkupTemplate = (item, sidePanelClass = '') => { + return ` + + ${item.img_alt} +
    +

    ${item.roller_title}

    +

    ${item.roller_about}

    +
    +     `; +}; diff --git a/src/components/markup-templates/social-media-links-template.js b/src/components/markup-templates/social-media-links-template.js new file mode 100644 index 0000000..50c0ca0 --- /dev/null +++ b/src/components/markup-templates/social-media-links-template.js @@ -0,0 +1,9 @@ +export const socialMediaLinksTemplate = (link) => { + return `
  • + + ${link.title} +
    • `; +}; diff --git a/src/components/markup-templates/watch-pages-template.js b/src/components/markup-templates/watch-pages-template.js new file mode 100644 index 0000000..9e8b5aa --- /dev/null +++ b/src/components/markup-templates/watch-pages-template.js @@ -0,0 +1,50 @@ +export const headerMarkupTemplate = (item) => { + return ` + +

    ${item.header_title}

    +

    ${item.header_subtitle}

    +
    + +
    `; +}; + +export const aboutMarkupTemplate = (item) => { + return `
    +

    + ${item.about_title} +

    +

    + ${item.about_text} +

    +
    + US$${item.watch_price} +
    +
    + + + ${item.img_alt} +`; +}; diff --git a/src/components/social-media-data.js b/src/components/social-media-data.js new file mode 100644 index 0000000..4688789 --- /dev/null +++ b/src/components/social-media-data.js @@ -0,0 +1,27 @@ +export const socialMediaData = { + facebook: { + i_Class: "fa-facebook-f", + page_href: "", + title: "Facebook", + }, + instagram: { + i_Class: "fa-instagram", + page_href: "", + title: "Instagram", + }, + twitter: { + i_Class: "fa-twitter", + page_href: "", + title: "Twitter", + }, + youtube: { + i_Class: "fa-youtube", + page_href: "", + title: "Youtube", + }, + linkedin: { + i_Class: "fa-linkedin-in", + page_href: "", + title: "Linkedin", + }, +}; diff --git a/src/components/watch-pages-markup-components.js b/src/components/watch-pages-markup-components.js new file mode 100644 index 0000000..fd8f220 --- /dev/null +++ b/src/components/watch-pages-markup-components.js @@ -0,0 +1,5 @@ +import "./loaders/load-watch-page.js"; +import "./loaders/load-sidepanel-roller.js"; +import "./loaders/load-login-modal.js"; +import "./loaders/load-footer-watch-links.js"; +import "./loaders/load-social-media-links.js"; \ No newline at end of file diff --git a/src/components/watches-data.js b/src/components/watches-data.js new file mode 100644 index 0000000..4dab418 --- /dev/null +++ b/src/components/watches-data.js @@ -0,0 +1,231 @@ +export const watches_data = { + sea_dweller: { + id: "sea_dweller", + page_href: "watches.html", + roller_srcset: + "https://content.rolex.com/dam/new-watches-2020/homepage/roller/all-watches/watches_0005_m126603-0001-sea-dweller.jpg?imwidth=550,%20https://content.rolex.com/dam/new-watches-2020/homepage/roller/all-watches/watches_0005_m126603-0001-sea-dweller.jpg?imwidth=1080%202x", + roller_src: + "src/assets/media/img/img-watches-roller/watches-sea-dweller.webp", + img_alt: "Rolex deepSea watch", + roller_title: "sea-dweller", + roller_about: "The watch that conquered depths", + video_src: + "src/assets/media/video/professional-watches-sea-dweller-cover-video.mp4", + video_srcset: + "https://content.rolex.com/dam/watches/family-pages/sea-dweller/video/cover/professional-watches-sea-dweller-cover-video.mp4", + header_title: "sea - dweller", + header_subtitle: "the watch that has conquered the depths", + about_title: + "The Sea-Dweller and Rolex Deepsea are ultra-resistant dive watches designed by Rolex for exploration of the seabed.", + about_text: + "Hermetic up to 1220 meters on the Rolex Sea Dweller models, released in 1967, and up to 3900 meters on the Deepsea models presented in 2008. They are the quintessential manifestation of Rolex's leadership in diving watches and the result of decades of collaboration with diving professionals.", + watch_price: "10200", + img_srcset: + "https://content.rolex.com/dam/new-watches-2022/family-pages/sea-dweller/family-page-sea-dweller-deepsea-beauty_m136660_0003.jpg?imwidth=1350,%20https://content.rolex.com/dam/new-watches-2022/family-pages/sea-dweller/family-page-sea-dweller-deepsea-beauty_m136660_0003.jpg?imwidth=1668%202x", + img_src: + "src/assets/media/img/watch-pages-img/page-sea-dweller-deepsea-beauty.jpg", + style_class: "sea-dweller-style", + sidepanel_class: "sidepanel-roller", + footer_link_title: "Sea-Dweller", + doc_title: "Rolex Sea-Dweller - The watch that has conquered the depths", + }, + air_king: { + id: "air_king", + page_href: "watches.html", + roller_srcset: + "https://content.rolex.com/dam/new-watches-2022/homepage/roller-family/homepage-new-watches-2022-roller-watches-air-king-family-m126900-0001.jpg?imwidth=550,%20https://content.rolex.com/dam/new-watches-2022/homepage/roller-family/homepage-new-watches-2022-roller-watches-air-king-family-m126900-0001.jpg?imwidth=1080%202x", + roller_src: "src/assets/media/img/img-watches-roller/watches-air-king.webp", + img_alt: "Rolex air-king watch", + roller_title: "air-king", + roller_about: "A tribute to aviation", + video_src: + "src/assets/media/video/professional-watches-new-air-king-2022-video.mp4", + video_srcset: + "https://content.rolex.com/dam/watches/family-pages/air-king/video/cover/professional-watches-new-air-king-2022-video.mp4", + header_title: "air - king", + header_subtitle: "a tribute to aviation", + about_title: + "the rolex air-king pays tribute to aviation pioneers and the role of the oyster in the air epic.", + about_text: + "The Air - King, fitted with a 40mm case, the Oyster solid-length Oystersteel bracelet and a distinctive black dial, punctuates the aeronautical heritage pf the original Rolex Oyster", + watch_price: "9800", + img_srcset: + "https://content.rolex.com/dam/new-watches-2022/family-pages/air-king/family-page-air-king-beauty_m126900-0001_004.jpg?imwidth=1350,%20https://content.rolex.com/dam/new-watches-2022/family-pages/air-king/family-page-air-king-beauty_m126900-0001_004.jpg?imwidth=1668%202x", + img_src: "src/assets/media/img/watch-pages-img/page-air-king-beauty.webp", + style_class: "air-king-style", + sidepanel_class: "sidepanel-roller", + footer_link_title: "Air-King", + doc_title: "Rolex Air-King - A tribute to aviation", + }, + gmt_master2: { + id: "gmt_master2", + page_href: "watches.html", + roller_srcset: + "https://content.rolex.com/dam/new-watches-2020/homepage/roller/all-watches/watches_0004_m126711chnr-0002-gmt-master-ii.jpg?imwidth=550,%20https://content.rolex.com/dam/new-watches-2020/homepage/roller/all-watches/watches_0004_m126711chnr-0002-gmt-master-ii.jpg?imwidth=1080%202x", + roller_src: + "src/assets/media/img/img-watches-roller/watches-gmt-master-ii.webp", + img_alt: "Rolex gmt-master 2 watch", + roller_title: "gmt - master ii", + roller_about: "The cosmopolitan watch", + video_src: + "src/assets/media/video/professional-watches-gmt-master-ii-cover-video.mp4", + video_srcset: + "https://content.rolex.com/dam/watches/family-pages/gmt-master-ii/video/cover/professional-watches-gmt-master-ii-cover-video.mp4", + header_title: "gmt - master ii", + header_subtitle: "the cosmopolitan watch", + about_title: + "Designed to show time in two time zones simultaneously, the GMT Master, introduced in 1955, was originally developed as a navigation tool for professionals touring the world.", + about_text: + "Successor to the original model, the GMT Master II was introduced in 1982, with a new movement that guaranteed comfort of use. Its combination of unique functions, its resistance and its immediately recognizable aesthetics has attracted a wider audience of international travelers.", + watch_price: "11800", + img_srcset: + "https://content.rolex.com/dam/watches/family-pages/gmt-master-ii/professional-watches-gmt-master-ii_m126710blro-0001_1801ac_003.jpg?imwidth=1350,%20https://content.rolex.com/dam/watches/family-pages/gmt-master-ii/professional-watches-gmt-master-ii_m126710blro-0001_1801ac_003.jpg?imwidth=1668%202x", + img_src: "src/assets/media/img/watch-pages-img/page-gmt-master-ii.jpg", + style_class: "gmt-master-ii-style", + sidepanel_class: "sidepanel-roller", + footer_link_title: "Gmt-Master II", + doc_title: "Rolex GMT-Master II - The cosmopolitan watch", + }, + day_date: { + id: "day_date", + page_href: "watches.html", + roller_srcset: + "https://content.rolex.com/dam/new-watches-2022/homepage/roller-family/homepage-new-watches-2022-roller-watches-day-date-family-m228236-0012.jpg?imwidth=550,%20https://content.rolex.com/dam/new-watches-2022/homepage/roller-family/homepage-new-watches-2022-roller-watches-day-date-family-m228236-0012.jpg?imwidth=1080%202x", + roller_src: "src/assets/media/img/img-watches-roller/watches-day-date.webp", + img_alt: "Rolex day - date watch", + roller_title: "day - date", + roller_about: "The materialization of an ideal", + video_src: + "src/assets/media/video/classic-watches-day-date-2022-cover-video.mp4", + video_srcset: + "https://content.rolex.com/dam/watches/family-pages/day-date/2022/cover/classic-watches-day-date-2022-cover-video.mp4", + header_title: "day-date", + header_subtitle: "the materialization of an ideal", + about_title: "A new day begins", + about_text: + "If time changes everything, this minute changes it like no other. When midnight comes, the Oyster Perpetual Day Date creates a bridge between the past and the future, between what has been achieved and what remains to be lived. Since 1956 he bears witness to the great moments of history on the wrist of visionaries, virtuosos and pioneers. Those who make each day a promise for the future.", + watch_price: "45000", + img_srcset: + "https://content.rolex.com/dam/new-watches-2022/new-watches/day-date-40/new-watches-2022-day-date-40-banner-ambiance.jpg?imwidth=1350,%20https://content.rolex.com/dam/new-watches-2022/new-watches/day-date-40/new-watches-2022-day-date-40-banner-ambiance.jpg?imwidth=1668%202x", + img_src: "src/assets/media/img/watch-pages-img/page-day-date.jpg", + style_class: "day-date-style", + sidepanel_class: "sidepanel-roller", + footer_link_title: "Day-Date", + doc_title: "Rolex Day-Date - The materialization of an ideal", + }, + daytona: { + id: "daytona", + page_href: "watches.html", + roller_srcset: + "https://content.rolex.com/dam/new-watches-2021/homepage/roller/all-watches/watches_0012_m116519ln-0038-cosmograph-daytona.jpg?imwidth=550,%20https://content.rolex.com/dam/new-watches-2021/homepage/roller/all-watches/watches_0012_m116519ln-0038-cosmograph-daytona.jpg?imwidth=1080%202x", + roller_src: + "src/assets/media/img/img-watches-roller/watches-cosmograph-daytona.webp", + img_alt: "Rolex daytona watch", + roller_title: "daytona", + roller_about: "Born for competition", + video_src: + "src/assets/media/video/professional-watches-cosmograph-daytona-cover-video.webm", + video_srcset: + "https://content.rolex.com/dam/watches/family-pages/cosmograph-daytona/video/cover/professional-watches-cosmograph-daytona-cover-video.mp4", + header_title: "cosmograph daytona", + header_subtitle: "born to competition", + about_title: + "The Oyster Perpetual Cosmograph Daytona is the watch reference tool for car enthusiasts and speed.", + about_text: + "Presented in 1963, the Cosmograph Daytona was designed to meet the chronometric demands of high competition pilots. It is an icon attached to the world of high performance motorsports by its name and function. More than 50 years after its creation, the Cosmograph Daytona has continued to transcend time to currently achieve unmatched status in the sports chronograph sky.", + watch_price: "27300", + img_srcset: + "https://content.rolex.com/dam/watches/family-pages/cosmograph-daytona/professional-watches-cosmograph-daytona-beauty_m116500ln-0001_1601ac_004.jpg?imwidth=1350,%20https://content.rolex.com/dam/watches/family-pages/cosmograph-daytona/professional-watches-cosmograph-daytona-beauty_m116500ln-0001_1601ac_004.jpg?imwidth=1668%202x", + img_src: + "src/assets/media/img/watch-pages-img/page-cosmograph-daytona.webp", + style_class: "daytona-style", + sidepanel_class: "sidepanel-roller", + footer_link_title: "Cosmograph Daytona", + doc_title: "Rolex Cosmograph Daytona - Born for competition", + }, + sky_dweller: { + id: "sky_dweller", + page_href: "watches.html", + roller_srcset: + "https://content.rolex.com/dam/new-watches-2020/homepage/roller/all-watches/watches_0000_m326238-0009-sky-dweller.jpg?imwidth=550,%20https://content.rolex.com/dam/new-watches-2020/homepage/roller/all-watches/watches_0000_m326238-0009-sky-dweller.jpg?imwidth=1080%202x", + roller_src: + "src/assets/media/img/img-watches-roller/watches-sky-dweller.webp", + img_alt: "Rolex sky-dweller watch", + roller_title: "sky - dweller", + roller_about: "The time anytime, anywhere", + video_src: "src/assets/media/video/new-sky-dweller-cover.webm", + video_srcset: + "https://content.rolex.com/dam/new-watches-2020/new-sky-dweller/videos/cover/new-sky-dweller-cover.mp4", + header_title: "sky - dweller", + header_subtitle: "the time anytime, anywhere", + about_title: + "Presentation of the modality of the Oyster Perpetual Sky Dweller, equipped with an Oysterflex bracelet", + about_text: + "Rolex features an 18-carat yellow gold modality from its Oyster Perpetual Sky Dweller, fitted with an Oysterflex bracelet. It is the first watch in the Classic category equipped with this innovative high performance elastomer strap. It features a bright black dial with a sun-like finish and 18-carat yellow gold needles and indexes. The light reflections on the handles and flanks of the carrura highlight the refined shapes of its 42mm diameter Oyster box.", + watch_price: "64500", + img_srcset: + "https://content.rolex.com/dam/new-watches-2020/new-sky-dweller/new-sky-dweller-oyster-case.jpg?imwidth=1350,%20https://content.rolex.com/dam/new-watches-2020/new-sky-dweller/new-sky-dweller-oyster-case.jpg?imwidth=1668%202x", + img_src: "src/assets/media/img/watch-pages-img/page-new-sky-dweller.jpg", + style_class: "sky-dweller-style", + sidepanel_class: "sidepanel-roller", + footer_link_title: "Sky-Dweller", + doc_title: "Rolex Sky-Dweller - The time anytime, anywhere", + }, + milgauss: { + id: "milgauss", + page_href: "watches.html", + roller_srcset: + "https://content.rolex.com/dam/new-watches-2020/homepage/roller/all-watches/watches_0012_m116400gv-0002-milgauss.jpg?imwidth=550,%20https://content.rolex.com/dam/new-watches-2020/homepage/roller/all-watches/watches_0012_m116400gv-0002-milgauss.jpg?imwidth=1080%202x", + roller_src: "src/assets/media/img/img-watches-roller/watches-milgauss.webp", + img_alt: "Rolex milgauss watch", + roller_title: "milgauss", + roller_about: "Homage to science", + video_src: + "src/assets/media/video/professional-watches-milgauss-cover-video.mp4", + video_srcset: + "https://content.rolex.com/dam/watches/family-pages/milgauss/video/cover/professional-watches-milgauss-cover-video.mp4", + header_title: "milgauss", + header_subtitle: "homage to science", + about_title: + "The Oyster Perpetual Milgauss is the first magnetic field resistant watch designed to meet the needs of engineers and scientists.", + about_text: + "It was created in 1956 and, as its name indicates, it can resist magnetic fields of up to 1000 gauss. The first watch of its kind, the Milgauss combines its unique aesthetic with scientific heritage.", + watch_price: "13600", + img_srcset: + "https://content.rolex.com/dam/watches/family-pages/milgauss/family-page-milgauss-beauty_m116400GV-0002_bs_003.jpg?imwidth=1350,%20https://content.rolex.com/dam/watches/family-pages/milgauss/family-page-milgauss-beauty_m116400GV-0002_bs_003.jpg?imwidth=1668%202x", + img_src: "src/assets/media/img/watch-pages-img/page-milgauss.jpg", + style_class: "milgauss-style", + sidepanel_class: "sidepanel-roller", + footer_link_title: "Milgauss", + doc_title: "Rolex Milgauss - Homage to science", + }, + cellini: { + id: "cellini", + page_href: "watches.html", + roller_srcset: + "https://content.rolex.com/dam/new-watches-2020/homepage/roller/all-watches/watches_0014_m50535-0002-cellini-moonphase.jpg?imwidth=550,%20https://content.rolex.com/dam/new-watches-2020/homepage/roller/all-watches/watches_0014_m50535-0002-cellini-moonphase.jpg?imwidth=1080%202x", + roller_src: + "src/assets/media/img/img-watches-roller/watches-cellini-moonphase.webp", + img_alt: "Rolex cellini watch", + roller_title: "cellini", + roller_about: "The classic watch", + video_src: + "src/assets/media/video/classic-watches-cellini-moonphase-video.webm", + video_srcset: + "https://content.rolex.com/dam/watches/family-pages/cellini/video/cover/classic-watches-cellini-moonphase-video.mp4", + header_title: "cellini", + header_subtitle: "the classic watch", + about_title: + "Cellini celebrates the eternal elegance of traditional watches with a touch of modernity: Benvenuto Cellini, the Italian Renaissance artist, inspired the name of the watch.", + about_text: + "This collection combines the best of savoir faire Rolex and its demands for perfection with a focus that magnifies the watch heritage in its most timeless form. The Cellini model lines are sober and refined, the noble materials, the luxurious finishes and every detail has been designed according to the codes of watchmaking art.", + watch_price: "32500", + img_srcset: + "https://content.rolex.com/dam/watches/family-pages/cellini/family-page-cellini-beauty_m50535-0002_1701ac_003.jpg?imwidth=1350,%20https://content.rolex.com/dam/watches/family-pages/cellini/family-page-cellini-beauty_m50535-0002_1701ac_003.jpg?imwidth=1668%202x", + img_src: "src/assets/media/img/watch-pages-img/page-cellini.webp", + style_class: "cellini-style", + sidepanel_class: "sidepanel-roller", + footer_link_title: "Cellini", + doc_title: "Rolex Cellini - The classic watch", + }, +}; diff --git a/src/json-data/login-users.json b/src/json-data/login-users.json new file mode 100644 index 0000000..5b01846 --- /dev/null +++ b/src/json-data/login-users.json @@ -0,0 +1,9 @@ +{ + "users": [ + { + "username": "admin", + "password": "123456", + "id": 1 + } + ] +} diff --git a/src/json-data/watches-data.json b/src/json-data/watches-data.json new file mode 100644 index 0000000..69fe4fc --- /dev/null +++ b/src/json-data/watches-data.json @@ -0,0 +1,180 @@ +{ + "watches_data": [ + { + "id": "sea_dweller", + "page_href": "watches.html", + "roller_srcset": "https://content.rolex.com/dam/new-watches-2020/homepage/roller/all-watches/watches_0005_m126603-0001-sea-dweller.jpg?imwidth=550,%20https://content.rolex.com/dam/new-watches-2020/homepage/roller/all-watches/watches_0005_m126603-0001-sea-dweller.jpg?imwidth=1080%202x", + "roller_src": "src/assets/media/img/img-watches-roller/watches-sea-dweller.webp", + "img_alt": "Rolex deepSea watch", + "roller_title": "sea-dweller", + "roller_about": "The watch that conquered depths", + "video_src": "src/assets/media/video/professional-watches-sea-dweller-cover-video.mp4", + "video_srcset": "https://content.rolex.com/dam/watches/family-pages/sea-dweller/video/cover/professional-watches-sea-dweller-cover-video.mp4", + "header_title": "sea - dweller", + "header_subtitle": "the watch that has conquered the depths", + "about_title": "The Sea-Dweller and Rolex Deepsea are ultra-resistant dive watches designed by Rolex for exploration of the seabed.", + "about_text": "Hermetic up to 1220 meters on the Rolex Sea Dweller models, released in 1967, and up to 3900 meters on the Deepsea models presented in 2008. They are the quintessential manifestation of Rolex's leadership in diving watches and the result of decades of collaboration with diving professionals.", + "watch_price": "10200", + "img_srcset": "https://content.rolex.com/dam/new-watches-2022/family-pages/sea-dweller/family-page-sea-dweller-deepsea-beauty_m136660_0003.jpg?imwidth=1350,%20https://content.rolex.com/dam/new-watches-2022/family-pages/sea-dweller/family-page-sea-dweller-deepsea-beauty_m136660_0003.jpg?imwidth=1668%202x", + "img_src": "src/assets/media/img/watch-pages-img/page-sea-dweller-deepsea-beauty.jpg", + "style_class": "sea-dweller-style", + "sidepanel_class": "sidepanel-roller", + "footer_link_title": "Sea-Dweller", + "doc_title": "Rolex Sea-Dweller - The watch that has conquered the depths" + }, + { + "id": "air_king", + "page_href": "watches.html", + "roller_srcset": "https://content.rolex.com/dam/new-watches-2022/homepage/roller-family/homepage-new-watches-2022-roller-watches-air-king-family-m126900-0001.jpg?imwidth=550,%20https://content.rolex.com/dam/new-watches-2022/homepage/roller-family/homepage-new-watches-2022-roller-watches-air-king-family-m126900-0001.jpg?imwidth=1080%202x", + "roller_src": "src/assets/media/img/img-watches-roller/watches-air-king.webp", + "img_alt": "Rolex air-king watch", + "roller_title": "air-king", + "roller_about": "A tribute to aviation", + "video_src": "src/assets/media/video/professional-watches-new-air-king-2022-video.mp4", + "video_srcset": "https://content.rolex.com/dam/watches/family-pages/air-king/video/cover/professional-watches-new-air-king-2022-video.mp4", + "header_title": "air - king", + "header_subtitle": "a tribute to aviation", + "about_title": "the rolex air-king pays tribute to aviation pioneers and the role of the oyster in the air epic.", + "about_text": "The Air - King, fitted with a 40mm case, the Oyster solid-length Oystersteel bracelet and a distinctive black dial, punctuates the aeronautical heritage pf the original Rolex Oyster", + "watch_price": "9800", + "img_srcset": "https://content.rolex.com/dam/new-watches-2022/family-pages/air-king/family-page-air-king-beauty_m126900-0001_004.jpg?imwidth=1350,%20https://content.rolex.com/dam/new-watches-2022/family-pages/air-king/family-page-air-king-beauty_m126900-0001_004.jpg?imwidth=1668%202x", + "img_src": "src/assets/media/img/watch-pages-img/page-air-king-beauty.webp", + "style_class": "air-king-style", + "sidepanel_class": "sidepanel-roller", + "footer_link_title": "Air-King", + "doc_title": "Rolex Air-King - A tribute to aviation" + }, + { + "id": "gmt_master2", + "page_href": "watches.html", + "roller_srcset": "https://content.rolex.com/dam/new-watches-2020/homepage/roller/all-watches/watches_0004_m126711chnr-0002-gmt-master-ii.jpg?imwidth=550,%20https://content.rolex.com/dam/new-watches-2020/homepage/roller/all-watches/watches_0004_m126711chnr-0002-gmt-master-ii.jpg?imwidth=1080%202x", + "roller_src": "src/assets/media/img/img-watches-roller/watches-gmt-master-ii.webp", + "img_alt": "Rolex gmt-master 2 watch", + "roller_title": "gmt - master ii", + "roller_about": "The cosmopolitan watch", + "video_src": "src/assets/media/video/professional-watches-gmt-master-ii-cover-video.mp4", + "video_srcset": "https://content.rolex.com/dam/watches/family-pages/gmt-master-ii/video/cover/professional-watches-gmt-master-ii-cover-video.mp4", + "header_title": "gmt - master ii", + "header_subtitle": "the cosmopolitan watch", + "about_title": "Designed to show time in two time zones simultaneously, the GMT Master, introduced in 1955, was originally developed as a navigation tool for professionals touring the world.", + "about_text": "Successor to the original model, the GMT Master II was introduced in 1982, with a new movement that guaranteed comfort of use. Its combination of unique functions, its resistance and its immediately recognizable aesthetics has attracted a wider audience of international travelers.", + "watch_price": "11800", + "img_srcset": "https://content.rolex.com/dam/watches/family-pages/gmt-master-ii/professional-watches-gmt-master-ii_m126710blro-0001_1801ac_003.jpg?imwidth=1350,%20https://content.rolex.com/dam/watches/family-pages/gmt-master-ii/professional-watches-gmt-master-ii_m126710blro-0001_1801ac_003.jpg?imwidth=1668%202x", + "img_src": "src/assets/media/img/watch-pages-img/page-gmt-master-ii.jpg", + "style_class": "gmt-master-ii-style", + "sidepanel_class": "sidepanel-roller", + "footer_link_title": "Gmt-Master II", + "doc_title": "Rolex GMT-Master II - The cosmopolitan watch" + }, + { + "id": "day_date", + "page_href": "watches.html", + "roller_srcset": "https://content.rolex.com/dam/new-watches-2022/homepage/roller-family/homepage-new-watches-2022-roller-watches-day-date-family-m228236-0012.jpg?imwidth=550,%20https://content.rolex.com/dam/new-watches-2022/homepage/roller-family/homepage-new-watches-2022-roller-watches-day-date-family-m228236-0012.jpg?imwidth=1080%202x", + "roller_src": "src/assets/media/img/img-watches-roller/watches-day-date.webp", + "img_alt": "Rolex day - date watch", + "roller_title": "day - date", + "roller_about": "The materialization of an ideal", + "video_src": "src/assets/media/video/classic-watches-day-date-2022-cover-video.mp4", + "video_srcset": "https://content.rolex.com/dam/watches/family-pages/day-date/2022/cover/classic-watches-day-date-2022-cover-video.mp4", + "header_title": "day-date", + "header_subtitle": "the materialization of an ideal", + "about_title": "A new day begins", + "about_text": "If time changes everything, this minute changes it like no other. When midnight comes, the Oyster Perpetual Day Date creates a bridge between the past and the future, between what has been achieved and what remains to be lived. Since 1956 he bears witness to the great moments of history on the wrist of visionaries, virtuosos and pioneers. Those who make each day a promise for the future.", + "watch_price": "45000", + "img_srcset": "https://content.rolex.com/dam/new-watches-2022/new-watches/day-date-40/new-watches-2022-day-date-40-banner-ambiance.jpg?imwidth=1350,%20https://content.rolex.com/dam/new-watches-2022/new-watches/day-date-40/new-watches-2022-day-date-40-banner-ambiance.jpg?imwidth=1668%202x", + "img_src": "src/assets/media/img/watch-pages-img/page-day-date.jpg", + "style_class": "day-date-style", + "sidepanel_class": "sidepanel-roller", + "footer_link_title": "Day-Date", + "doc_title": "Rolex Day-Date - The materialization of an ideal" + }, + { + "id": "daytona", + "page_href": "watches.html", + "roller_srcset": "https://content.rolex.com/dam/new-watches-2021/homepage/roller/all-watches/watches_0012_m116519ln-0038-cosmograph-daytona.jpg?imwidth=550,%20https://content.rolex.com/dam/new-watches-2021/homepage/roller/all-watches/watches_0012_m116519ln-0038-cosmograph-daytona.jpg?imwidth=1080%202x", + "roller_src": "src/assets/media/img/img-watches-roller/watches-cosmograph-daytona.webp", + "img_alt": "Rolex daytona watch", + "roller_title": "daytona", + "roller_about": "Born for competition", + "video_src": "src/assets/media/video/professional-watches-cosmograph-daytona-cover-video.webm", + "video_srcset": "https://content.rolex.com/dam/watches/family-pages/cosmograph-daytona/video/cover/professional-watches-cosmograph-daytona-cover-video.mp4", + "header_title": "cosmograph daytona", + "header_subtitle": "born to competition", + "about_title": "The Oyster Perpetual Cosmograph Daytona is the watch reference tool for car enthusiasts and speed.", + "about_text": "Presented in 1963, the Cosmograph Daytona was designed to meet the chronometric demands of high competition pilots. It is an icon attached to the world of high performance motorsports by its name and function. More than 50 years after its creation, the Cosmograph Daytona has continued to transcend time to currently achieve unmatched status in the sports chronograph sky.", + "watch_price": "27300", + "img_srcset": "https://content.rolex.com/dam/watches/family-pages/cosmograph-daytona/professional-watches-cosmograph-daytona-beauty_m116500ln-0001_1601ac_004.jpg?imwidth=1350,%20https://content.rolex.com/dam/watches/family-pages/cosmograph-daytona/professional-watches-cosmograph-daytona-beauty_m116500ln-0001_1601ac_004.jpg?imwidth=1668%202x", + "img_src": "src/assets/media/img/watch-pages-img/page-cosmograph-daytona.webp", + "style_class": "daytona-style", + "sidepanel_class": "sidepanel-roller", + "footer_link_title": "Cosmograph Daytona", + "doc_title": "Rolex Cosmograph Daytona - Born for competition" + }, + { + "id": "sky_dweller", + "page_href": "watches.html", + "roller_srcset": "https://content.rolex.com/dam/new-watches-2020/homepage/roller/all-watches/watches_0000_m326238-0009-sky-dweller.jpg?imwidth=550,%20https://content.rolex.com/dam/new-watches-2020/homepage/roller/all-watches/watches_0000_m326238-0009-sky-dweller.jpg?imwidth=1080%202x", + "roller_src": "src/assets/media/img/img-watches-roller/watches-sky-dweller.webp", + "img_alt": "Rolex sky-dweller watch", + "roller_title": "sky - dweller", + "roller_about": "The time anytime, anywhere", + "video_src": "src/assets/media/video/new-sky-dweller-cover.webm", + "video_srcset": "https://content.rolex.com/dam/new-watches-2020/new-sky-dweller/videos/cover/new-sky-dweller-cover.mp4", + "header_title": "sky - dweller", + "header_subtitle": "the time anytime, anywhere", + "about_title": "Presentation of the modality of the Oyster Perpetual Sky Dweller, equipped with an Oysterflex bracelet", + "about_text": "Rolex features an 18-carat yellow gold modality from its Oyster Perpetual Sky Dweller, fitted with an Oysterflex bracelet. It is the first watch in the Classic category equipped with this innovative high performance elastomer strap. It features a bright black dial with a sun-like finish and 18-carat yellow gold needles and indexes. The light reflections on the handles and flanks of the carrura highlight the refined shapes of its 42mm diameter Oyster box.", + "watch_price": "64500", + "img_srcset": "https://content.rolex.com/dam/new-watches-2020/new-sky-dweller/new-sky-dweller-oyster-case.jpg?imwidth=1350,%20https://content.rolex.com/dam/new-watches-2020/new-sky-dweller/new-sky-dweller-oyster-case.jpg?imwidth=1668%202x", + "img_src": "src/assets/media/img/watch-pages-img/page-new-sky-dweller.jpg", + "style_class": "sky-dweller-style", + "sidepanel_class": "sidepanel-roller", + "footer_link_title": "Sky-Dweller", + "doc_title": "Rolex Sky-Dweller - The time anytime, anywhere" + }, + { + "id": "milgauss", + "page_href": "watches.html", + "roller_srcset": "https://content.rolex.com/dam/new-watches-2020/homepage/roller/all-watches/watches_0012_m116400gv-0002-milgauss.jpg?imwidth=550,%20https://content.rolex.com/dam/new-watches-2020/homepage/roller/all-watches/watches_0012_m116400gv-0002-milgauss.jpg?imwidth=1080%202x", + "roller_src": "src/assets/media/img/img-watches-roller/watches-milgauss.webp", + "img_alt": "Rolex milgauss watch", + "roller_title": "milgauss", + "roller_about": "Homage to science", + "video_src": "src/assets/media/video/professional-watches-milgauss-cover-video.mp4", + "video_srcset": "https://content.rolex.com/dam/watches/family-pages/milgauss/video/cover/professional-watches-milgauss-cover-video.mp4", + "header_title": "milgauss", + "header_subtitle": "homage to science", + "about_title": "The Oyster Perpetual Milgauss is the first magnetic field resistant watch designed to meet the needs of engineers and scientists.", + "about_text": "It was created in 1956 and, as its name indicates, it can resist magnetic fields of up to 1000 gauss. The first watch of its kind, the Milgauss combines its unique aesthetic with scientific heritage.", + "watch_price": "13600", + "img_srcset": "https://content.rolex.com/dam/watches/family-pages/milgauss/family-page-milgauss-beauty_m116400GV-0002_bs_003.jpg?imwidth=1350,%20https://content.rolex.com/dam/watches/family-pages/milgauss/family-page-milgauss-beauty_m116400GV-0002_bs_003.jpg?imwidth=1668%202x", + "img_src": "src/assets/media/img/watch-pages-img/page-milgauss.jpg", + "style_class": "milgauss-style", + "sidepanel_class": "sidepanel-roller", + "footer_link_title": "Milgauss", + "doc_title": "Rolex Milgauss - Homage to science" + }, + { + "id": "cellini", + "page_href": "watches.html", + "roller_srcset": "https://content.rolex.com/dam/new-watches-2020/homepage/roller/all-watches/watches_0014_m50535-0002-cellini-moonphase.jpg?imwidth=550,%20https://content.rolex.com/dam/new-watches-2020/homepage/roller/all-watches/watches_0014_m50535-0002-cellini-moonphase.jpg?imwidth=1080%202x", + "roller_src": "src/assets/media/img/img-watches-roller/watches-cellini-moonphase.webp", + "img_alt": "Rolex cellini watch", + "roller_title": "cellini", + "roller_about": "The classic watch", + "video_src": "src/assets/media/video/classic-watches-cellini-moonphase-video.webm", + "video_srcset": "https://content.rolex.com/dam/watches/family-pages/cellini/video/cover/classic-watches-cellini-moonphase-video.mp4", + "header_title": "cellini", + "header_subtitle": "the classic watch", + "about_title": "Cellini celebrates the eternal elegance of traditional watches with a touch of modernity: Benvenuto Cellini, the Italian Renaissance artist, inspired the name of the watch.", + "about_text": "This collection combines the best of savoir faire Rolex and its demands for perfection with a focus that magnifies the watch heritage in its most timeless form. The Cellini model lines are sober and refined, the noble materials, the luxurious finishes and every detail has been designed according to the codes of watchmaking art.", + "watch_price": "32500", + "img_srcset": "https://content.rolex.com/dam/watches/family-pages/cellini/family-page-cellini-beauty_m50535-0002_1701ac_003.jpg?imwidth=1350,%20https://content.rolex.com/dam/watches/family-pages/cellini/family-page-cellini-beauty_m50535-0002_1701ac_003.jpg?imwidth=1668%202x", + "img_src": "src/assets/media/img/watch-pages-img/page-cellini.webp", + "style_class": "cellini-style", + "sidepanel_class": "sidepanel-roller", + "footer_link_title": "Cellini", + "doc_title": "Rolex Cellini - The classic watch" + } + ] +} diff --git a/src/login/service/admin-service.js b/src/login/service/admin-service.js new file mode 100644 index 0000000..fa585ac --- /dev/null +++ b/src/login/service/admin-service.js @@ -0,0 +1,56 @@ +const watchesDataURL = 'http://localhost:3000/watches_data'; + +const watchItems = async () => { + const response = await fetch(`${watchesDataURL}`); + return await response.json(); +}; + +const addNewItem = async (newWatchData) => { + return await fetch(`${watchesDataURL}`, { + method: 'POST', + headers: { + 'Content-Type': 'application/json', + }, + body: JSON.stringify({ + id: uuid.v4(), + ...newWatchData, + }), + }) + .then((response) => response) + .catch((error) => + console.error( + `There was an error trying to Add a new watch, Error: => ${error}` + ) + ); +}; + +const updateWatchData = async (newWatchData) => { + return await fetch(`${watchesDataURL}/${newWatchData.id}`, { + method: 'PUT', + headers: { + 'Content-Type': 'application/json', + }, + body: JSON.stringify({ + ...newWatchData, + }), + }) + .then((response) => response) + .catch((error) => + console.error( + `There was an error trying to Update watch data, Error: => ${error}` + ) + ); +}; + +const deleteItem = async (itemId) => { + return await fetch(`${watchesDataURL}/${itemId}`, { + method: 'DELETE', + }); +}; + +export const adminServices = { + watchItems, + addNewItem, + updateWatchData, + deleteItem, +}; diff --git a/src/login/service/client-service.js b/src/login/service/client-service.js new file mode 100644 index 0000000..c5be2dd --- /dev/null +++ b/src/login/service/client-service.js @@ -0,0 +1,8 @@ +const userList = async () => { + const response = await fetch("http://localhost:3000/users"); + return await response.json(); +}; + +export const clientServices = { + userList, +}; diff --git a/src/utils/create-new-watch-data-obj.js b/src/utils/create-new-watch-data-obj.js new file mode 100644 index 0000000..7ca3c0b --- /dev/null +++ b/src/utils/create-new-watch-data-obj.js @@ -0,0 +1,8 @@ +export const createNewWatchDataObj = (itemInputs) => { + const newWatchData = {}; + itemInputs.forEach((input) => { + newWatchData[input.classList[1]] = input.value; + }); + + return newWatchData; +}; diff --git a/src/utils/get-item-id.js b/src/utils/get-item-id.js new file mode 100644 index 0000000..3b20343 --- /dev/null +++ b/src/utils/get-item-id.js @@ -0,0 +1,21 @@ +import { adminServices } from "../login/service/admin-service.js"; + +//!Invoke 'getItemId' in either case (fetch successfully or not) +//! is important, since in both cases, the -constant- $watchItems won't exist when page loads for later use +adminServices + .watchItems() + .then((data) => { + getItemId(); //? data loaded from json + }) + .catch((error) => { + getItemId(); //? data loaded from watches-data.js + }); + +const getItemId = () => { + const $watchItems = document.querySelectorAll("[data-watch-item]"); + $watchItems.forEach((item) => { + item.addEventListener("click", () => { + localStorage.setItem("watchId", item.id); + }); + }); +}; diff --git a/src/utils/home-page-utils.js b/src/utils/home-page-utils.js new file mode 100644 index 0000000..5ed53cc --- /dev/null +++ b/src/utils/home-page-utils.js @@ -0,0 +1,6 @@ +import './navbar.js'; +import './sidepanel.js'; +import './toggle-search-panel.js'; +import './search-bar-engine.js'; +import './get-item-id.js'; +import './toggle-login.js'; diff --git a/src/utils/navbar.js b/src/utils/navbar.js new file mode 100644 index 0000000..f7f9946 --- /dev/null +++ b/src/utils/navbar.js @@ -0,0 +1,87 @@ +import { sidePanel_closeBtn } from './sidepanel.js'; +import { sidePanel } from './sidepanel.js'; + +const navbar = document.querySelector('[data-navbar]'); +const navbarItems = document.querySelectorAll('[data-navbar-item]'); +const elementsToShadow = document.querySelectorAll('[data-shadow-content]'); +const whiteLogoSrc = 'src/assets/media/img/logo/tstone_logo_withoutLine.png'; +const colorLogoSrc = 'src/assets/media/img/logo/tstone-blackColor_logo.png'; +const bgColor1 = 'transparent'; +const bgColor2 = 'var(--style-color-white)'; +const fontColor1 = 'var(--style-color-white)'; +const fontColor2 = 'var(--style-color-green)'; + +// ?BELOW---NAVBAR HOVER ANIMATIONS // + +export const navbarHoverAnimation = (src, bgColor, textColor) => { + navbar.style.background = bgColor; + navbarItems.forEach((element) => { + element.style.color = textColor; + }); + // ?below children go like: nav => navbar__logo => anchor => img element // + navbar.children[1].children[0].children[0].src = src; + navbar.style.transition = '0.5s'; +}; + +navbar.addEventListener('mouseover', () => { + navbarHoverAnimation(colorLogoSrc, bgColor2, fontColor2); +}); +navbar.addEventListener('mouseout', () => { + navbarHoverAnimation(whiteLogoSrc, bgColor1, fontColor1); +}); + +// ?ABOVE---NAVBAR HOVER ANIMATIONS // + +// ?BELOW NAVBAR ON-SCROLL ANIMATION // + +let lastScrollTop = 0; +window.addEventListener('scroll', () => { + const scrollTop = window.pageYOffset || document.documentElement.scrollTop; + if (scrollTop > lastScrollTop) { + navbar.style.top = '-100px'; + } else { + navbar.style.top = '0'; + navbarHoverAnimation(colorLogoSrc, bgColor2, fontColor2); + if (sidePanel.classList.contains('sidepanel--show')) { + // !without this conditional, navbar opens on up-scroll when sidepanel is open// + // ?to hide it use property below// + navbar.style.top = '-100px'; + } + } + lastScrollTop = scrollTop; + if (scrollTop === 0) { + navbarHoverAnimation(whiteLogoSrc, bgColor1, fontColor1); + showNavbar(); // !this call fixes the issue of navbar not showing up when scroll reaches top on -iOS- devices/ + } +}); + +// ?ABOVE NAVBAR ON-SCROLL ANIMATION // + +// ?BELOW---NAVBAR OPEN-CLOSE ANIMATION // + +document.querySelector('[data-open-menu-btn]').addEventListener('click', () => { + hideNavbar(); + darkenSection(); +}); + +sidePanel_closeBtn.addEventListener('click', () => { + navbarHoverAnimation(colorLogoSrc, bgColor2, fontColor2); +}); + +export const darkenSection = () => { + elementsToShadow.forEach((element) => + element.classList.toggle('low-brightness') + ); +}; + +const hideNavbar = () => { + navbar.style.height = '0'; + navbar.style.top = '-100px'; +}; + +export const showNavbar = () => { + navbar.style.height = '5rem'; + navbar.style.top = '0'; +}; + +// ?ABOVE---AVBAR OPEN-CLOSE ANIMATION //