diff --git a/main/_front/src/html/choice.html b/main/_front/src/html/choice.html new file mode 100644 index 0000000..1fe56e8 --- /dev/null +++ b/main/_front/src/html/choice.html @@ -0,0 +1,176 @@ + + + + + + + Document + + + + +
+
+ +
Сортировать по показателю
+
+ + + +
+ + +
Сортировать по
+
+ + +
+ + +
Выберите сокет (разъем для процессора на материнской плате)
+
+ + + + + + +
+ +
Выберите сокет (разъем для процессора на материнской плате)
+
+ + + + + + + + +
+
+
+ + \ No newline at end of file diff --git a/main/_front/src/img/components/case.svg b/main/_front/src/img/components/case.svg new file mode 100644 index 0000000..ed82684 --- /dev/null +++ b/main/_front/src/img/components/case.svg @@ -0,0 +1,14 @@ + + + Created with Pixso. + + + + + + + + + + + diff --git a/main/_front/src/img/components/cooler.svg b/main/_front/src/img/components/cooler.svg new file mode 100644 index 0000000..53cb007 --- /dev/null +++ b/main/_front/src/img/components/cooler.svg @@ -0,0 +1,20 @@ + + + Created with Pixso. + + + + + + + + + + + + + + + + + diff --git a/main/_front/src/img/components/cpu.svg b/main/_front/src/img/components/cpu.svg new file mode 100644 index 0000000..d6a786e --- /dev/null +++ b/main/_front/src/img/components/cpu.svg @@ -0,0 +1,13 @@ + + + Created with Pixso. + + + + + + + + + + diff --git a/main/_front/src/img/components/gpu.svg b/main/_front/src/img/components/gpu.svg new file mode 100644 index 0000000..29e2cd1 --- /dev/null +++ b/main/_front/src/img/components/gpu.svg @@ -0,0 +1,23 @@ + + + Created with Pixso. + + + + + + + + + + + + + + + + + + + + diff --git a/main/_front/src/img/components/motherboard.svg b/main/_front/src/img/components/motherboard.svg new file mode 100644 index 0000000..c2a46d6 --- /dev/null +++ b/main/_front/src/img/components/motherboard.svg @@ -0,0 +1,25 @@ + + + Created with Pixso. + + + + + + + + + + + + + + + + + + + + + + diff --git a/main/_front/src/img/components/power_unit.svg b/main/_front/src/img/components/power_unit.svg new file mode 100644 index 0000000..fdec73f --- /dev/null +++ b/main/_front/src/img/components/power_unit.svg @@ -0,0 +1,13 @@ + + + Created with Pixso. + + + + + + + + + + diff --git a/main/_front/src/img/components/ram.svg b/main/_front/src/img/components/ram.svg new file mode 100644 index 0000000..9bb24af --- /dev/null +++ b/main/_front/src/img/components/ram.svg @@ -0,0 +1,46 @@ + + + Created with Pixso. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/main/_front/src/img/components/rom.svg b/main/_front/src/img/components/rom.svg new file mode 100644 index 0000000..4c36aab --- /dev/null +++ b/main/_front/src/img/components/rom.svg @@ -0,0 +1,13 @@ + + + Created with Pixso. + + + + + + + + + + diff --git a/main/_front/src/js/choice.js b/main/_front/src/js/choice.js new file mode 100644 index 0000000..aa6e57a --- /dev/null +++ b/main/_front/src/js/choice.js @@ -0,0 +1,24 @@ +const choiceLists = document.querySelectorAll(".choice"); + +choiceLists.forEach((choiceList) => { + const choiceItems = choiceList.querySelectorAll(".choice__elem"); + choiceItems.forEach((choice) => { + if (choice.classList.contains("active")) { + choiceList.dataset.value = choice.dataset.value; + // console.log(choice.dataset.value); + } + choice.addEventListener("click", (e) => { + choiceItems.forEach((choice) => { + if (choice === e.target) { + choiceList.dataset.value = choice.dataset.value; + choice.classList.add("active"); + console.log(choice.dataset.value); + }else { + choice.classList.remove("active"); + } + }); + }); + }); +}) + + diff --git a/main/_front/src/scss/_vars.scss b/main/_front/src/scss/_vars.scss index 5a09797..3bade9f 100644 --- a/main/_front/src/scss/_vars.scss +++ b/main/_front/src/scss/_vars.scss @@ -1,2 +1,4 @@ $primary: #712CF9; -$white: #fff; \ No newline at end of file +$secondary: #ededed; +$secondary-hover: #D0D0D0; +$white: #fff; diff --git a/main/_front/src/scss/elems/_choice.scss b/main/_front/src/scss/elems/_choice.scss new file mode 100644 index 0000000..5e023bf --- /dev/null +++ b/main/_front/src/scss/elems/_choice.scss @@ -0,0 +1,61 @@ +@import "../vars"; + +.choice { + display: flex; + gap: 10px; + &-grid { + flex-wrap: wrap; + justify-content: space-between; + } +} + +.choice__elem { + min-width: 110px; + font-size: 16px; + font-weight: 500; + line-height: 35px; + border-radius: 10px; + padding: 0 8px; + background-color: $secondary; + + transition: background-color .2s ease, color .2s ease; + &-wide { + min-width: 150px; + } + &:hover { + background-color: $secondary-hover; + } + &.active{ + background-color: $primary; + color: #fff; + &:hover { + background-color: lighten($primary, 5%); + } + } + + &-with_img { + display: flex; + align-items: center; + column-gap: 15px; + font-size: 18px; + padding: 15px; + min-width: 236px; + text-align: start; + line-height: 21px; + min-height: 72px; + & svg { + min-width: 40px; + min-height: 40px; + fill: #000; + transition: fill .2s ease; + + } + &.active svg{ + fill: #fff; + } + } + &-text_sm { + font-size: 16px; + line-height: 19px; + } +}