diff --git a/FullstackProsjekt/src/frontend/src/assets/main.css b/FullstackProsjekt/src/frontend/src/assets/main.css index e722a4ebd87b8894923bd606446a554da972c31d..375a8e1489920735e25f636f0b4f3f28e8b8b388 100644 --- a/FullstackProsjekt/src/frontend/src/assets/main.css +++ b/FullstackProsjekt/src/frontend/src/assets/main.css @@ -8,34 +8,49 @@ body { margin: 100px; } -.table{ - padding: 10px; - background-color: #dcdcdc; + +.row{ + margin-top: 5%; + display: flex; + justify-content: space-between; +} +.course-col{ + flex-basis: 31%; + background: #d7d7d7; + border-radius: 10px; + margin-bottom: 5%; + padding: 20px; + box-sizing: border-box; + transition: 0.5s; } +.course-col:hover{ + box-shadow: 0 0 20px 0px rgba(0,0,0,0.3); +} + .play-btn{ - height: 25px; - padding: 5px; + padding: 10px; text-decoration: none; background-color: #242F40; border-color: transparent; color: #FFFFFF; + border-radius: 10px; } .edit-btn{ - height: 25px; - padding: 5px; + padding: 10px; text-decoration: none; background-color: #CCA43B; border-color: transparent; color: #242F40; + border-radius: 10px; } .delete-btn{ - height: 25px; - padding: 5px; - text-decoration: none; + padding: 8px; background-color: #cc513b; border-color: transparent; color: #242F40; + border-radius: 10px; + font-family: monospace; } .add-Btn { background-color: #242F40; @@ -46,6 +61,14 @@ body { border-color: transparent; margin-top: 10px; } +.add-Btn:hover{ + cursor: pointer; + background-color: #2f3d54; +} +.add-Btn:active{ + background-color: #425575; + transition: 0.2s ; +} .save-Btn{ background-color: #CCA43B; font-size: 24px; @@ -73,12 +96,8 @@ body { margin-left: 130px; } - - - - - - - - - +@media (max-width: 700px){ + .row{ + flex-direction: column; + } +} diff --git a/FullstackProsjekt/src/frontend/src/components/TheWelcome.vue b/FullstackProsjekt/src/frontend/src/components/TheWelcome.vue index 2c9155318503a699a2664335844a3f3da79f863a..70df9dc666b28fe1058f78f1d66bd56899125073 100644 --- a/FullstackProsjekt/src/frontend/src/components/TheWelcome.vue +++ b/FullstackProsjekt/src/frontend/src/components/TheWelcome.vue @@ -18,7 +18,7 @@ export default { <img id="logo" src="../components/icons/brain.png"/> <h1 class="heading">BrainStormer</h1> <p> An easy way to learn and share quizzes. <br> Make your own quiz now! </p> - <router-link to="/overviewQuiz" class="hero-btn">CREATE QUIZ </router-link> + <router-link to="/dashboard" class="hero-btn">LOOK AT QUIZZES</router-link> </div> </section> diff --git a/FullstackProsjekt/src/frontend/src/components/icons/animal-category.svg b/FullstackProsjekt/src/frontend/src/components/icons/animal-category.svg new file mode 100644 index 0000000000000000000000000000000000000000..3519ce32107234702803b9f67a1f8d99d8d21033 --- /dev/null +++ b/FullstackProsjekt/src/frontend/src/components/icons/animal-category.svg @@ -0,0 +1,7 @@ +<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> + <!-- Uploaded to: SVG Repo, www.svgrepo.com, Transformed by: SVG Repo Mixer Tools --> +<svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> + <g id="SVGRepo_bgCarrier" stroke-width="0"/> + <g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"/> + <g id="SVGRepo_iconCarrier"> <path d="M7.57065 15.3763C9.15635 12.148 9.9492 10.5339 11.0904 10.1493C11.681 9.95024 12.319 9.95024 12.9096 10.1493C14.0508 10.5339 14.8437 12.148 16.4294 15.3763L17.3081 17.1653C17.7177 17.9992 17.9225 18.4162 17.971 18.7003C18.1722 19.879 17.3002 20.9654 16.1254 20.9996C15.8422 21.0079 15.4 20.8867 14.5156 20.6443C14.0101 20.5058 13.7574 20.4365 13.5047 20.3854C12.5113 20.1843 11.4887 20.1843 10.4953 20.3854C10.2426 20.4365 9.98987 20.5058 9.48445 20.6443C8.6 20.8867 8.15777 21.0079 7.87458 20.9996C6.6998 20.9654 5.82776 19.879 6.02896 18.7003C6.07746 18.4162 6.28227 17.9992 6.69189 17.1653L7.57065 15.3763Z" fill="#858A93"/> <path d="M6.14477 5.52746C6.55659 7.15822 7.72105 8.24406 8.74566 7.95275C9.77027 7.66144 10.267 6.1033 9.85523 4.47254C9.44341 2.84178 8.27895 1.75594 7.25434 2.04725C6.22973 2.33856 5.73296 3.8967 6.14477 5.52746Z" fill="#858A93"/> <path d="M17.8552 5.52746C17.4434 7.15822 16.279 8.24406 15.2543 7.95275C14.2297 7.66144 13.733 6.1033 14.1448 4.47254C14.5566 2.84178 15.721 1.75594 16.7457 2.04725C17.7703 2.33856 18.267 3.8967 17.8552 5.52746Z" fill="#858A93"/> <path d="M2.20166 12.2971C2.65166 13.5021 3.70968 14.2341 4.5648 13.9319C5.41993 13.6298 5.74834 12.4079 5.29834 11.2029C4.84834 9.99785 3.79032 9.26592 2.9352 9.56808C2.08007 9.87024 1.75166 11.0921 2.20166 12.2971Z" fill="#858A93"/> <path d="M21.7983 12.2971C21.3483 13.5021 20.2903 14.2341 19.4352 13.9319C18.5801 13.6298 18.2517 12.4079 18.7017 11.2029C19.1517 9.99785 20.2097 9.26592 21.0648 9.56808C21.9199 9.87024 22.2483 11.0921 21.7983 12.2971Z" fill="#858A93"/> </g> + </svg> \ No newline at end of file diff --git a/FullstackProsjekt/src/frontend/src/components/icons/athletic-category.svg b/FullstackProsjekt/src/frontend/src/components/icons/athletic-category.svg new file mode 100644 index 0000000000000000000000000000000000000000..35b4b380bd3cc095bb3c8e2c52f963a6bbbdba90 --- /dev/null +++ b/FullstackProsjekt/src/frontend/src/components/icons/athletic-category.svg @@ -0,0 +1,7 @@ +<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> + <!-- Uploaded to: SVG Repo, www.svgrepo.com, Transformed by: SVG Repo Mixer Tools --> +<svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> + <g id="SVGRepo_bgCarrier" stroke-width="0"/> + <g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"/> + <g id="SVGRepo_iconCarrier"> <path d="M16.3445 8.93024L16.6889 6.09016L16.6889 6.09014C16.7692 5.4285 16.8093 5.09767 16.74 4.82267C16.6477 4.456 16.4231 4.14364 16.1158 3.95431C15.8853 3.81231 15.5764 3.76933 14.9587 3.68338C14.341 3.59742 14.0321 3.55444 13.7754 3.62863C13.433 3.72756 13.1414 3.96809 12.9647 4.29732C12.8321 4.54424 12.7489 5.23007 12.6687 5.89173L6.53714 5.03851C6.61739 4.37686 6.70057 3.69102 6.6313 3.41601C6.53895 3.04934 6.31439 2.73698 6.00703 2.54765C5.77651 2.40565 5.46765 2.36268 4.84993 2.27672C4.23222 2.19076 3.92336 2.14778 3.66662 2.22198C3.32429 2.3209 3.03268 2.56143 2.85592 2.89066C2.72336 3.13758 2.68323 3.46841 2.60299 4.13006L2.25853 6.97015C2.17828 7.6318 2.13816 7.96263 2.20742 8.23764C2.29978 8.60431 2.52433 8.91667 2.8317 9.106C3.06222 9.248 3.37107 9.29097 3.98878 9.37693L3.98879 9.37693L3.9888 9.37693C4.60651 9.46289 4.91537 9.50587 5.17211 9.43167C5.51443 9.33275 5.80605 9.09222 5.9828 8.76299C6.11537 8.51607 6.19855 7.83023 6.2788 7.16858L12.4103 8.0218C12.3301 8.68345 12.2469 9.36929 12.3162 9.6443C12.4085 10.011 12.6331 10.3233 12.9404 10.5127C13.171 10.6547 13.4798 10.6976 14.0975 10.7836L14.0975 10.7836L14.0975 10.7836C14.7153 10.8695 15.0241 10.9125 15.2809 10.8383C15.6232 10.7394 15.9148 10.4989 16.0915 10.1696C16.2241 9.92273 16.2642 9.59191 16.3445 8.93026L16.3445 8.93024Z" fill="#858A93"/> <path d="M7.76122 19.9255L7.0692 17.1591C6.90798 16.5146 6.82737 16.1924 6.86208 15.91C6.90836 15.5335 7.09239 15.192 7.37368 14.9608C7.58465 14.7874 7.88549 14.7011 8.48717 14.5284C9.08885 14.3557 9.3897 14.2694 9.65334 14.3066C10.0049 14.3561 10.3236 14.5533 10.5395 14.8546C10.7013 15.0805 10.8685 15.7486 11.0297 16.393L17.0021 14.6789C16.8408 14.0344 16.6737 13.3664 16.7084 13.084C16.7547 12.7075 16.9387 12.366 17.22 12.1348C17.431 11.9615 17.7318 11.8751 18.3335 11.7024C18.9352 11.5297 19.236 11.4434 19.4997 11.4806C19.8512 11.5301 20.17 11.7273 20.3858 12.0286C20.5477 12.2545 20.6283 12.5768 20.7895 13.2213L21.4815 15.9876C21.6428 16.6321 21.7234 16.9543 21.6887 17.2367C21.6424 17.6133 21.4584 17.9547 21.1771 18.1859C20.9661 18.3593 20.6653 18.4456 20.0636 18.6183L20.0636 18.6183L20.0636 18.6183C19.4619 18.791 19.161 18.8774 18.8974 18.8402C18.5459 18.7906 18.2271 18.5935 18.0113 18.2922C17.8494 18.0662 17.6823 17.3982 17.5211 16.7537L11.5487 18.4678C11.7099 19.1123 11.877 19.7803 11.8423 20.0627C11.796 20.4393 11.612 20.7807 11.3307 21.0119C11.1197 21.1853 10.8189 21.2716 10.2172 21.4443L10.2172 21.4443L10.2172 21.4443C9.61554 21.617 9.3147 21.7034 9.05105 21.6662C8.69952 21.6166 8.38077 21.4195 8.16493 21.1182C8.00305 20.8922 7.92244 20.57 7.76122 19.9255Z" fill="#858A93"/> </g> + </svg> \ No newline at end of file diff --git a/FullstackProsjekt/src/frontend/src/components/icons/computer-category.svg b/FullstackProsjekt/src/frontend/src/components/icons/computer-category.svg new file mode 100644 index 0000000000000000000000000000000000000000..e8c0202f01b1ebc533cbfb7b1646dea2afdf8e90 --- /dev/null +++ b/FullstackProsjekt/src/frontend/src/components/icons/computer-category.svg @@ -0,0 +1,7 @@ +<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> + <!-- Uploaded to: SVG Repo, www.svgrepo.com, Transformed by: SVG Repo Mixer Tools --> +<svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> + <g id="SVGRepo_bgCarrier" stroke-width="0"/> + <g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"/> + <g id="SVGRepo_iconCarrier"> <path d="M2 8.75994C2 6.04468 2 4.68705 2.87868 3.84352C3.75736 3 5.17157 3 8 3H16C18.8284 3 20.2426 3 21.1213 3.84352C22 4.68705 22 6.04468 22 8.75994V9.71993C22 12.4352 22 13.7928 21.1213 14.6363C20.2426 15.4799 18.8284 15.4799 16 15.4799H12.75V17.8409L18.2372 19.5968C18.6301 19.7225 18.8425 20.1303 18.7115 20.5075C18.5805 20.8847 18.1558 21.0886 17.7628 20.9629L12 19.1188L6.23717 20.9629C5.84421 21.0886 5.41947 20.8847 5.28849 20.5075C5.1575 20.1303 5.36987 19.7225 5.76283 19.5968L11.25 17.8409V15.4799H8C5.17157 15.4799 3.75736 15.4799 2.87868 14.6363C2 13.7928 2 12.4352 2 9.71993V8.75994Z" fill="#858A93"/> </g> + </svg> \ No newline at end of file diff --git a/FullstackProsjekt/src/frontend/src/components/icons/cooking-category.svg b/FullstackProsjekt/src/frontend/src/components/icons/cooking-category.svg new file mode 100644 index 0000000000000000000000000000000000000000..9789ef034a63e3f37bc393f922b67bf30dc89d0c --- /dev/null +++ b/FullstackProsjekt/src/frontend/src/components/icons/cooking-category.svg @@ -0,0 +1,7 @@ +<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> + <!-- Uploaded to: SVG Repo, www.svgrepo.com, Transformed by: SVG Repo Mixer Tools --> +<svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> + <g id="SVGRepo_bgCarrier" stroke-width="0"/> + <g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"/> + <g id="SVGRepo_iconCarrier"> <path d="M7 5C4.23858 5 2 7.23858 2 10C2 12.0503 3.2341 13.8124 5 14.584V17.25H19L19 14.584C20.7659 13.8124 22 12.0503 22 10C22 7.23858 19.7614 5 17 5C16.7495 5 16.5033 5.01842 16.2626 5.05399C15.6604 3.27806 13.9794 2 12 2C10.0206 2 8.33961 3.27806 7.73736 5.05399C7.49673 5.01842 7.25052 5 7 5Z" fill="#858A93"/> <path d="M18.9983 18.75H5.00169C5.01188 20.1469 5.08343 20.9119 5.58579 21.4142C6.17157 22 7.11438 22 9 22H15C16.8856 22 17.8284 22 18.4142 21.4142C18.9166 20.9119 18.9881 20.1469 18.9983 18.75Z" fill="#858A93"/> </g> + </svg> \ No newline at end of file diff --git a/FullstackProsjekt/src/frontend/src/components/icons/drama-category.svg b/FullstackProsjekt/src/frontend/src/components/icons/drama-category.svg new file mode 100644 index 0000000000000000000000000000000000000000..b61048d4db12d1a08d97dcc8947bb45cb0db8382 --- /dev/null +++ b/FullstackProsjekt/src/frontend/src/components/icons/drama-category.svg @@ -0,0 +1,7 @@ +<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> + <!-- Uploaded to: SVG Repo, www.svgrepo.com, Transformed by: SVG Repo Mixer Tools --> +<svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> + <g id="SVGRepo_bgCarrier" stroke-width="0"/> + <g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"/> + <g id="SVGRepo_iconCarrier"> <path d="M21.5366 9.13602L20.6914 12.4334C20.2619 14.1092 19.3848 15.2884 18.3546 16.1176C18.5739 14.974 18.569 13.7001 18.2112 12.3042L17.3472 8.93331C17.296 8.73345 17.2459 8.53801 17.1966 8.34978C17.3679 8.27209 17.5772 8.24746 17.7955 8.30594C18.1742 8.40742 18.4044 8.7121 18.4332 9.00812C18.4732 9.42039 18.8398 9.72217 19.2521 9.68214C19.6644 9.64212 19.9662 9.27546 19.9261 8.86319C19.8347 7.9207 19.1428 7.11405 18.1837 6.85705C17.7011 6.72773 17.2074 6.75278 16.766 6.90777L16.7494 6.86317C16.5249 6.26679 16.1968 5.63442 15.5778 5.16951C15.2393 4.91528 14.8568 4.7244 14.4479 4.60846C13.6893 4.39339 12.9853 4.53161 12.3843 4.73161C11.8259 4.9174 11.1749 5.22232 10.4597 5.55734L10.388 5.59092C9.20344 6.14565 8.72944 6.3644 8.2439 6.51852C8.09652 6.5653 7.94799 6.6078 7.79848 6.64598L8.12513 5.37926C8.5657 3.66038 8.78598 2.80094 9.36122 2.36888C9.55407 2.22403 9.77023 2.11656 9.99941 2.05159C10.683 1.85777 11.46 2.22163 13.014 2.94934C14.1647 3.48822 14.7401 3.75765 15.3404 3.94822C15.5492 4.01448 15.7599 4.07352 15.9724 4.12524C16.5835 4.27402 17.2106 4.34142 18.4649 4.47622C20.1587 4.65827 21.0057 4.74929 21.505 5.27447C21.6724 5.45054 21.8082 5.6566 21.9059 5.88284C22.1974 6.55769 21.9772 7.41713 21.5366 9.13602Z" fill="#858A93"/> <path fill-rule="evenodd" clip-rule="evenodd" d="M16.7582 12.6766L15.9131 9.37926C15.4725 7.66038 15.2522 6.80094 14.677 6.36888C14.4841 6.22403 14.268 6.11656 14.0388 6.05158C13.3551 5.85777 12.5782 6.22163 11.0242 6.94934C9.87347 7.48821 9.29811 7.75765 8.69774 7.94822C8.48901 8.01448 8.27824 8.07352 8.06578 8.12524C7.45471 8.27401 6.82757 8.34142 5.5733 8.47622C3.87946 8.65827 3.03253 8.74929 2.53319 9.27447C2.36579 9.45054 2.22999 9.6566 2.13226 9.88284C1.84073 10.5577 2.06102 11.4171 2.50159 13.136L3.34673 16.4334C4.34019 20.3093 7.64328 21.5286 9.86292 21.9058C10.5401 22.0208 10.8787 22.0784 11.907 21.7903C12.9353 21.5023 13.201 21.2755 13.7324 20.8219C15.4742 19.335 17.7517 16.5526 16.7582 12.6766ZM6.00531 13.368C6.03405 13.072 6.2643 12.7673 6.643 12.6658C7.02171 12.5643 7.37345 12.7131 7.54635 12.9551C7.78715 13.2921 8.25557 13.3701 8.5926 13.1293C8.92963 12.8885 9.00764 12.4201 8.76684 12.0831C8.21636 11.3126 7.2139 10.9599 6.25477 11.2169C5.29565 11.4739 4.60382 12.2806 4.51233 13.223C4.47231 13.6353 4.77408 14.002 5.18635 14.042C5.59863 14.082 5.96529 13.7803 6.00531 13.368ZM11.8012 11.8148C11.8299 11.5187 12.0602 11.2141 12.4389 11.1126C12.8176 11.0111 13.1693 11.1598 13.3422 11.4018C13.583 11.7389 14.0515 11.8169 14.3885 11.5761C14.7255 11.3353 14.8035 10.8669 14.5627 10.5298C14.0123 9.75936 13.0098 9.4067 12.0507 9.66369C11.0915 9.92069 10.3997 10.7273 10.3082 11.6698C10.2682 12.0821 10.57 12.4488 10.9823 12.4888C11.3945 12.5288 11.7612 12.227 11.8012 11.8148ZM13.6472 15.6287C13.9798 15.8756 14.0493 16.3453 13.8024 16.6779C13.5579 17.0075 13.0945 17.0788 12.7625 16.84L12.7527 16.8337C12.7384 16.8247 12.7103 16.8077 12.6689 16.7864C12.586 16.7438 12.4511 16.6841 12.2677 16.6343C11.9061 16.536 11.3382 16.4711 10.582 16.6737C9.82581 16.8763 9.36646 17.2165 9.10243 17.4824C8.96854 17.6172 8.88152 17.7364 8.83109 17.8148C8.80589 17.8539 8.78999 17.8826 8.78209 17.8976L8.77682 17.9079C8.60869 18.2807 8.17175 18.4507 7.79517 18.2876C7.41507 18.123 7.24039 17.6814 7.405 17.3013L8.09323 17.5994C7.405 17.3013 7.40569 17.2997 7.40569 17.2997L7.40643 17.298L7.40807 17.2943L7.41201 17.2855L7.42255 17.2629C7.43079 17.2457 7.44152 17.2241 7.45494 17.1986C7.48176 17.1477 7.51945 17.0811 7.56974 17.003C7.67026 16.8468 7.82176 16.6433 8.03811 16.4254C8.47455 15.9859 9.16254 15.5011 10.1938 15.2248C11.225 14.9485 12.0632 15.0244 12.6609 15.1867C12.9572 15.2672 13.1902 15.3677 13.3554 15.4527C13.438 15.4953 13.5039 15.534 13.5526 15.5647C13.5769 15.5801 13.597 15.5934 13.6128 15.6043L13.6332 15.6186L13.641 15.6242L13.6443 15.6266L13.6458 15.6277L13.6472 15.6287Z" fill="#858A93"/> </g> + </svg> \ No newline at end of file diff --git a/FullstackProsjekt/src/frontend/src/components/icons/education-category.svg b/FullstackProsjekt/src/frontend/src/components/icons/education-category.svg new file mode 100644 index 0000000000000000000000000000000000000000..25a3657fd05e98c1fcad7f5e607ae8f214a39d06 --- /dev/null +++ b/FullstackProsjekt/src/frontend/src/components/icons/education-category.svg @@ -0,0 +1,7 @@ +<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> + <!-- Uploaded to: SVG Repo, www.svgrepo.com, Transformed by: SVG Repo Mixer Tools --> +<svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> + <g id="SVGRepo_bgCarrier" stroke-width="0"/> + <g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"/> + <g id="SVGRepo_iconCarrier"> <path d="M14.2172 3.49965C12.7962 2.83345 11.2037 2.83345 9.78272 3.49965L3.0916 6.63659C2.0156 7.14105 1.73507 8.56352 2.25 9.54666L2.25 14.5C2.25 14.9142 2.58579 15.25 3 15.25C3.41421 15.25 3.75 14.9142 3.75 14.5V10.672L9.78281 13.5003C11.2038 14.1665 12.7963 14.1665 14.2173 13.5003L20.9084 10.3634C22.3639 9.68105 22.3639 7.31899 20.9084 6.63664L14.2172 3.49965Z" fill="#858A93"/> <path d="M5 12.9147V16.6254C5 17.6334 5.5035 18.5772 6.38533 19.0656C7.8537 19.8787 10.204 21 12 21C13.796 21 16.1463 19.8787 17.6147 19.0656C18.4965 18.5772 19 17.6334 19 16.6254V12.9148L14.854 14.8585C13.0296 15.7138 10.9705 15.7138 9.14607 14.8585L5 12.9147Z" fill="#858A93"/> </g> + </svg> \ No newline at end of file diff --git a/FullstackProsjekt/src/frontend/src/components/icons/music-category.svg b/FullstackProsjekt/src/frontend/src/components/icons/music-category.svg new file mode 100644 index 0000000000000000000000000000000000000000..f57b6bb6fb98f70e8002da08011e4773e067b260 --- /dev/null +++ b/FullstackProsjekt/src/frontend/src/components/icons/music-category.svg @@ -0,0 +1,7 @@ +<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> + <!-- Uploaded to: SVG Repo, www.svgrepo.com, Transformed by: SVG Repo Mixer Tools --> +<svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> + <g id="SVGRepo_bgCarrier" stroke-width="0"/> + <g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"/> + <g id="SVGRepo_iconCarrier"> <path d="M12.75 12.508L21.25 9.108V14.7609C20.7449 14.4375 20.1443 14.25 19.5 14.25C17.7051 14.25 16.25 15.7051 16.25 17.5C16.25 19.2949 17.7051 20.75 19.5 20.75C21.2949 20.75 22.75 19.2949 22.75 17.5C22.75 17.5 22.75 17.5 22.75 17.5L22.75 7.94625C22.75 6.80342 22.75 5.84496 22.6696 5.08131C22.6582 4.97339 22.6448 4.86609 22.63 4.76597C22.5525 4.24426 22.4156 3.75757 22.1514 3.35115C22.0193 3.14794 21.8553 2.96481 21.6511 2.80739C21.6128 2.77788 21.573 2.74927 21.5319 2.7216L21.5236 2.71608C20.8164 2.2454 20.0213 2.27906 19.2023 2.48777C18.4102 2.68961 17.4282 3.10065 16.224 3.60469L14.13 4.48115C13.5655 4.71737 13.0873 4.91751 12.712 5.1248C12.3126 5.34535 11.9686 5.60548 11.7106 5.99311C11.4527 6.38075 11.3455 6.7985 11.2963 7.25204C11.25 7.67831 11.25 8.19671 11.25 8.80858V16.7609C10.7448 16.4375 10.1443 16.25 9.5 16.25C7.70507 16.25 6.25 17.7051 6.25 19.5C6.25 21.2949 7.70507 22.75 9.5 22.75C11.2949 22.75 12.75 21.2949 12.75 19.5C12.75 19.5 12.75 19.5 12.75 19.5L12.75 12.508Z" fill="#858A93"/> <path d="M7.75 2C7.75 1.58579 7.41421 1.25 7 1.25C6.58579 1.25 6.25 1.58579 6.25 2V7.76091C5.74485 7.4375 5.14432 7.25 4.5 7.25C2.70507 7.25 1.25 8.70507 1.25 10.5C1.25 12.2949 2.70507 13.75 4.5 13.75C6.29493 13.75 7.75 12.2949 7.75 10.5V5.0045C8.44852 5.50913 9.27955 5.75 10 5.75C10.4142 5.75 10.75 5.41421 10.75 5C10.75 4.58579 10.4142 4.25 10 4.25C9.54565 4.25 8.9663 4.07389 8.51159 3.69837C8.0784 3.34061 7.75 2.79785 7.75 2Z" fill="#858A93"/> </g> + </svg> \ No newline at end of file diff --git a/FullstackProsjekt/src/frontend/src/components/icons/science-category.svg b/FullstackProsjekt/src/frontend/src/components/icons/science-category.svg new file mode 100644 index 0000000000000000000000000000000000000000..7305f97c18201fe8d9eeaf3d998f822bcbeb7622 --- /dev/null +++ b/FullstackProsjekt/src/frontend/src/components/icons/science-category.svg @@ -0,0 +1,7 @@ +<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> + <!-- Uploaded to: SVG Repo, www.svgrepo.com, Transformed by: SVG Repo Mixer Tools --> +<svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> + <g id="SVGRepo_bgCarrier" stroke-width="0"/> + <g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"/> + <g id="SVGRepo_iconCarrier"> <path d="M10.2413 5.75308L18.2469 13.7587C18.8498 14.3616 19.8273 14.3616 20.4302 13.7587C21.0332 13.1558 21.0332 12.1783 20.4302 11.5754L19.3386 10.4837L20.7941 9.02812C22.4019 7.42034 22.4019 4.81361 20.7941 3.20583C19.1864 1.59806 16.5796 1.59806 14.9719 3.20583L13.5163 4.6614L12.4246 3.56973C11.8217 2.96681 10.8442 2.96681 10.2413 3.56973C9.63833 4.17264 9.63833 5.15017 10.2413 5.75308Z" fill="#858A93"/> <path d="M10.2723 7.90542L4.70889 13.4688C4.2529 13.9248 4.02489 14.1528 3.88016 14.4259C3.78362 14.6081 3.71499 14.8037 3.67658 15.0063C3.61899 15.3099 3.6546 15.6304 3.72581 16.2713L3.77862 16.7466C3.79806 16.9215 3.80777 17.009 3.81022 17.0929C3.82504 17.6013 3.65107 18.0973 3.32186 18.4851C3.26753 18.5491 3.20532 18.6113 3.0809 18.7357L2.45219 19.3644C1.84927 19.9673 1.84927 20.9449 2.45219 21.5478C3.0551 22.1507 4.03263 22.1507 4.63554 21.5478L5.26429 20.919C5.38869 20.7946 5.45089 20.7324 5.51488 20.6781C5.90267 20.3489 6.39862 20.1749 6.90709 20.1897C6.99099 20.1922 7.07844 20.2019 7.25332 20.2213L7.72863 20.2742C8.36957 20.3454 8.69004 20.381 8.99371 20.3234C9.19627 20.285 9.3919 20.2163 9.57407 20.1198C9.84717 19.9751 10.0752 19.7471 10.5312 19.2911L11.9696 17.8525L10.1162 15.9991C9.82326 15.7062 9.82326 15.2313 10.1162 14.9384C10.409 14.6455 10.8839 14.6455 11.1768 14.9384L13.0303 16.7919L13.9696 15.8525L12.1162 13.9991C11.8233 13.7062 11.8233 13.2313 12.1162 12.9384C12.409 12.6455 12.8839 12.6455 13.1768 12.9384L15.0303 14.7919L16.0945 13.7277L10.2723 7.90542Z" fill="#858A93"/> </g> + </svg> \ No newline at end of file diff --git a/FullstackProsjekt/src/frontend/src/components/icons/society-category.svg b/FullstackProsjekt/src/frontend/src/components/icons/society-category.svg new file mode 100644 index 0000000000000000000000000000000000000000..364e8104c1c5ff783023ef2209eaa47967750b01 --- /dev/null +++ b/FullstackProsjekt/src/frontend/src/components/icons/society-category.svg @@ -0,0 +1,7 @@ +<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> + <!-- Uploaded to: SVG Repo, www.svgrepo.com, Transformed by: SVG Repo Mixer Tools --> +<svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> + <g id="SVGRepo_bgCarrier" stroke-width="0"/> + <g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"/> + <g id="SVGRepo_iconCarrier"> <path fill-rule="evenodd" clip-rule="evenodd" d="M15 2H17C18.8856 2 19.8284 2 20.4142 2.58579C21 3.17157 21 4.11438 21 6V21.25H22C22.4142 21.25 22.75 21.5858 22.75 22C22.75 22.4142 22.4142 22.75 22 22.75H2C1.58579 22.75 1.25 22.4142 1.25 22C1.25 21.5858 1.58579 21.25 2 21.25H3V9C3 7.11438 3 6.17157 3.58579 5.58579C4.17157 5 5.11438 5 7 5H11C12.8856 5 13.8284 5 14.4142 5.58579C15 6.17157 15 7.11438 15 9V21.25H16.5V9L16.5 8.91051C16.5001 8.04488 16.5002 7.25121 16.4134 6.60559C16.3178 5.89462 16.0929 5.14317 15.4749 4.52513C14.8568 3.90708 14.1054 3.68219 13.3944 3.5866C12.7579 3.50102 11.9774 3.49991 11.126 3.49999C11.2103 3.11275 11.351 2.82059 11.5858 2.58579C12.1716 2 13.1144 2 15 2ZM5.25 8C5.25 7.58579 5.58579 7.25 6 7.25H12C12.4142 7.25 12.75 7.58579 12.75 8C12.75 8.41421 12.4142 8.75 12 8.75H6C5.58579 8.75 5.25 8.41421 5.25 8ZM5.25 11C5.25 10.5858 5.58579 10.25 6 10.25H12C12.4142 10.25 12.75 10.5858 12.75 11C12.75 11.4142 12.4142 11.75 12 11.75H6C5.58579 11.75 5.25 11.4142 5.25 11ZM5.25 14C5.25 13.5858 5.58579 13.25 6 13.25H12C12.4142 13.25 12.75 13.5858 12.75 14C12.75 14.4142 12.4142 14.75 12 14.75H6C5.58579 14.75 5.25 14.4142 5.25 14ZM9 18.25C9.41421 18.25 9.75 18.5858 9.75 19V21.25H8.25V19C8.25 18.5858 8.58579 18.25 9 18.25Z" fill="#858A93"/> </g> + </svg> \ No newline at end of file diff --git a/FullstackProsjekt/src/frontend/src/views/DashboardView.vue b/FullstackProsjekt/src/frontend/src/views/DashboardView.vue index 644da8f5280e7d7ce9a7e92921ccd00a954abbe7..7bdb31bc7d8a625f7e10fdab4966a5baf329f798 100644 --- a/FullstackProsjekt/src/frontend/src/views/DashboardView.vue +++ b/FullstackProsjekt/src/frontend/src/views/DashboardView.vue @@ -9,7 +9,7 @@ <input class="searchBox" placeholder="Search for category..."> </div> <br> <div class="create-container"> - <router-link to="/overviewQuiz" class="create-btn">CREATE QUIZ</router-link> + <router-link to="/overviewQuiz" class="create-btn">YOUR QUIZES</router-link> </div> </div> @@ -57,7 +57,6 @@ align-items: center; margin-bottom: 20px; } - .search-container { flex-grow: 1; /* Grow to take available space */ margin-right: 10px; /* Adjust margin between search box and button */ @@ -90,36 +89,4 @@ transition: 1s; } -.row{ - margin-top: 5%; - display: flex; - justify-content: space-between; -} -.course-col{ - flex-basis: 31%; - background: #E5E5E5; - border-radius: 10px; - margin-bottom: 5%; - padding: 20px; - box-sizing: border-box; - transition: 0.5s; -} -.course-col:hover{ - box-shadow: 0 0 20px 0px rgba(0,0,0,0.3); -} - - -@media (max-width: 700px){ - .text-box h1{ - font-size: 42px; - transition: 1s; - } - .row{ - flex-direction: column; - } - .create-btn{ - display: flex; - } - -} </style> \ No newline at end of file diff --git a/FullstackProsjekt/src/frontend/src/views/OverviewQuizView.vue b/FullstackProsjekt/src/frontend/src/views/OverviewQuizView.vue index 827d3fb5345c62b69199d1e4f5eb6b7e62220ef6..b78c5f8d992fdd6dca60c3a317c0daace8fab03a 100644 --- a/FullstackProsjekt/src/frontend/src/views/OverviewQuizView.vue +++ b/FullstackProsjekt/src/frontend/src/views/OverviewQuizView.vue @@ -1,89 +1,125 @@ -<script> - import {apiClient} from "@/api.js"; - import {ref} from "vue"; - getQuizzes(); - - const quizzes = ref([]); - - async function getQuizzes() { - //TODO: try/catch - const response = await apiClient.get('/quizzes/${quizId.value}'); - quizzes.value = response.data; //TODO: create parsing method - } -</script> - <template> <body> - <div class="overViewQuestion-page"> - <router-link to="/dashboard"> <- </router-link> + <div class="overViewQuestion-page"> + <router-link to="/dashboard"> <- </router-link> <h1>Your quizzes</h1> - <p> Select a quiz fo your creation to either play, edit or delete</p> - <div class="table"> - <table class="table"> - <thead> - <tr> - <th scope="col">#</th> - <th scope="col">Quiz</th> - <th scope="col">Action</th> - <th scope="col">Category </th> - </tr> - </thead> - <tbody> - <tr> - <th scope="row">1</th> - <td>Vue Quiz</td> - <td> - <router-link to="/play-quiz" class="play-btn">Play</router-link> - <router-link to="/createQuiz" class="edit-btn">Edit</router-link> - <button class="delete-btn"> Delete</button> - </td> - <th> - <div id="form-box"> - <form> - <select id="language"> - <option value="IT" selected="selected">IT</option> - <option value="Nature">Nature</option> - <option value="Chemistry">Chemistry</option> - <option value="Religion">Religion</option> - <option value="Other">Other</option> - </select> - </form> - </div> - </th> - </tr> - <tr> - <th scope="row">2</th> - <td>What is Java?</td> - <td> - <router-link to="/play-quiz" class="play-btn">Play</router-link> - <router-link to="/overviewQuiz" class="edit-btn">Edit</router-link> - <button class="delete-btn"> Delete</button> - </td> - <th> - <div id="form-box"> - <form> - <select id="language"> - <option value="IT" selected="selected">IT</option> - <option value="Nature">Nature</option> - <option value="Chemistry">Chemistry</option> - <option value="Religion">Religion</option> - <option value="Other">Other</option> - </select> - </form> - </div> - </th> - </tr> - </tbody> - </table> + <p>Select a quiz for your creation to either play, edit or delete</p> + + <div class="row"> + <div class="course-col"> + + <div class="quiz-header"> + <h3>Quiz 1</h3> + <Svg :name="selectedIcon" /> + </div> + + <div class="quiz-body"> + <p>Info about quiz...</p> + <p>Category:</p> + <div id="form-box"> + <form> + <select id="quiz-category-1" @change="changeCategory"> + <option value="Animal">Animals</option> + <option value="Athletic">Athletic/Sport</option> + <option value="Computer" selected="selected">Computer Science</option> + <option value="Drama">Drama/Movie</option> + <option value="Music">Music</option> + <option value="Religion">Religion</option> + <option value="Science">Science</option> + <option value="Society">Society</option> + <option value="Other">Other</option> + </select> + </form> + </div> + </div> + + <div class="quiz-footer"> + <router-link to="/play-quiz" class="play-btn">Play</router-link> + <router-link to="/createQuiz" class="edit-btn">Edit</router-link> + <button class="delete-btn">Delete</button> + </div> </div> - </div> - </body> + <div> + <button class="add-Btn">Create Quiz</button> + </div> + </div> + </div> + </body> </template> +<script> +import { defineComponent } from "vue"; +import Svg from "@/assets/Svg.vue"; +import {apiClient} from "@/api.js"; +import {ref} from "vue"; +getQuizzes(); + +const quizzes = ref([]); + +async function getQuizzes() { + //TODO: try/catch + const response = await apiClient.get('/quizzes/${quizId.value}'); + quizzes.value = response.data; //TODO: create parsing method +} + +export default defineComponent({ + components: { Svg }, + data() { + return { + selectedCategory: 'Computer', + categoryIcons: { + 'Animal': 'animal-category', + 'Athletic': 'athletic-category', + 'Computer': 'computer-category', + 'Drama': 'drama-category', + 'Music': 'music-category', + 'Religion': 'religion-category', + 'Science': 'science-category', + 'Society': 'society-category', + 'Other': 'other-category' + } + }; + }, + computed: { + selectedIcon() { + return this.categoryIcons[this.selectedCategory]; + } + }, + methods: { + changeCategory(event) { + this.selectedCategory = event.target.value; + } + } +}); +</script> + <style> .overViewQuestion-page{ - padding: 20px; + padding: 50px; +} + +.quiz-header{ + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: 20px; +} +.quiz-body{ + margin-bottom: 40px; +} +#quiz-category{ + padding: 1px; + background-color: #FFF; + border-radius: 5px; + font-family: monospace; +} +.quiz-footer{ + display: flex; + justify-content: space-evenly; + align-items: center; + padding-left: 25px; + padding-right: 25px; } </style> \ No newline at end of file