diff --git a/js/index.js b/js/index.js index 1535799..b9343b7 100644 --- a/js/index.js +++ b/js/index.js @@ -1,4 +1,5 @@ import './src/Button'; import './src/Form'; import './src/quizCard'; -import './src/alertBox'; \ No newline at end of file +import './src/alertBox'; +import './src/Carousel'; diff --git a/js/src/Carousel.js b/js/src/Carousel.js new file mode 100644 index 0000000..bd44e52 --- /dev/null +++ b/js/src/Carousel.js @@ -0,0 +1,26 @@ +var slideIndex = 1; +showSlides(slideIndex); + +function plusSlides(n) { + showSlides(slideIndex += n); +} + +function currentSlide(n) { + showSlides(slideIndex = n); +} + +function showSlides(n) { + var i; + var slides = document.getElementsByClassName("carousel"); + var dots = document.getElementsByClassName("nav_dot"); + if (n > slides.length) {slideIndex = 1} + if (n < 1) {slideIndex = slides.length} + for (i = 0; i < slides.length; i++) { + slides[i].style.display = "none"; + } + for (i = 0; i < dots.length; i++) { + dots[i].className = dots[i].className.replace(" active", ""); + } + slides[slideIndex-1].style.display = "block"; + dots[slideIndex-1].className += " active"; +} \ No newline at end of file diff --git a/scss/_alert.scss b/scss/_alert.scss new file mode 100644 index 0000000..4e836d0 --- /dev/null +++ b/scss/_alert.scss @@ -0,0 +1,30 @@ +.Warning { + padding: 20px; + background-color: #f44336; /* Red */ + color: white; + margin-bottom: 15px; + } + + .Success { + padding: 20px; + background-color: rgb(21, 160, 21); /* Green */ + color: white; + margin-bottom: 15px; + } + + /* The close button */ + .closebtn { + margin-left: 15px; + color: white; + font-weight: bold; + float: right; + font-size: 22px; + line-height: 20px; + cursor: pointer; + transition: 0.3s; + } + + /* When moving the mouse over the close button */ + .closebtn:hover { + color: black; + } \ No newline at end of file diff --git a/scss/_carousel.scss b/scss/_carousel.scss new file mode 100644 index 0000000..fd53b11 --- /dev/null +++ b/scss/_carousel.scss @@ -0,0 +1,96 @@ + * {box-sizing: border-box} +.carousel {display: none} +img {vertical-align: middle;} + +/* Slideshow container */ +.slideshow-container { + max-width: 1000px; + position: relative; + margin: auto; +} + +/* Next & previous buttons */ +.prevSlide, .nextSlide { + cursor: pointer; + position: absolute; + top: 50%; + width: auto; + padding: 16px; + margin-top: -22px; + color: white; + font-weight: bold; + font-size: 18px; + transition: 0.6s ease; + border-radius: 0 3px 3px 0; + user-select: none; +} + +/* Position the "next button" to the right */ +.nextSlide { + right: 0; + border-radius: 3px 0 0 3px; +} + +/* On hover, add a black background color with a little bit see-through */ +.prevSlide:hover, .nextSlide:hover { + background-color: rgba(0,0,0,0.8); +} + +/* Caption text */ +.text { + color: #f2f2f2; + font-size: 15px; + padding: 8px 12px; + position: absolute; + bottom: 8px; + width: 100%; + text-align: center; +} + +/* Number text (1/3 etc) */ +.numbtext { + color: #f2f2f2; + font-size: 12px; + padding: 8px 12px; + position: absolute; + top: 0; +} + +/* The dots/bullets/indicators */ +.nav_dot { + cursor: pointer; + height: 15px; + width: 15px; + margin: 0 2px; + background-color: #bbb; + border-radius: 50%; + display: inline-block; + transition: background-color 0.6s ease; +} + +.active, .nav_dot:hover { + background-color: #717171; +} + +/* Fading animation */ +.fade { + -webkit-animation-name: fade; + -webkit-animation-duration: 1.5s; + animation-name: fade; + animation-duration: 1.5s; +} + +@-webkit-keyframes fade { + from {opacity: .4} + to {opacity: 1} +} + +@keyframes fade { + from {opacity: .4} + to {opacity: 1} +} + +/* On smaller screens, decrease text size */ +@media only screen and (max-width: 300px) { + .prevSlide, .nextSlide,.text {font-size: 11px} +} \ No newline at end of file diff --git a/scss/metal.scss b/scss/metal.scss index 5a7362d..ed666af 100644 --- a/scss/metal.scss +++ b/scss/metal.scss @@ -13,4 +13,6 @@ @import "checkbox"; @import "radiobox"; @import "table"; -@import "dropmenu"; \ No newline at end of file +@import "dropmenu"; +@import "carousel"; +@import "alert"; diff --git a/site/layouts/index.html b/site/layouts/index.html index 1c4e16b..336ce4b 100644 --- a/site/layouts/index.html +++ b/site/layouts/index.html @@ -1,5 +1,4 @@ {{ define "main" }} -

{{ .Site.Title }}

@@ -167,6 +166,73 @@

Table

+
+ +
+
1 / 3
+ +
First Slide
+
+ +
+
2 / 3
+ +
Second Slide
+
+ +
+
3 / 3
+ +
Third Slide
+
+ + ❮ + ❯ + +
+
+ +
+ + + +
+ +
+ × + This is an alert box. +
+
+ × + This is an alert box.
+ {{ end }} diff --git a/site/static/js/main.bundle.js b/site/static/js/main.bundle.js index 43bc0b4..666b418 100644 --- a/site/static/js/main.bundle.js +++ b/site/static/js/main.bundle.js @@ -94,7 +94,7 @@ /***/ (function(module, __webpack_exports__, __webpack_require__) { "use strict"; -eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _src_Button__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./src/Button */ \"./js/src/Button.js\");\n/* harmony import */ var _src_Form__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./src/Form */ \"./js/src/Form.js\");\n/* harmony import */ var _src_quizCard__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./src/quizCard */ \"./js/src/quizCard.js\");\n/* harmony import */ var _src_alertBox__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./src/alertBox */ \"./js/src/alertBox.js\");\n/* harmony import */ var _src_alertBox__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(_src_alertBox__WEBPACK_IMPORTED_MODULE_3__);\n\n\n\n\n\n//# sourceURL=webpack:///./js/index.js?"); +eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _src_Button__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./src/Button */ \"./js/src/Button.js\");\n/* harmony import */ var _src_Form__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./src/Form */ \"./js/src/Form.js\");\n/* harmony import */ var _src_quizCard__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./src/quizCard */ \"./js/src/quizCard.js\");\n/* harmony import */ var _src_alertBox__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./src/alertBox */ \"./js/src/alertBox.js\");\n/* harmony import */ var _src_alertBox__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(_src_alertBox__WEBPACK_IMPORTED_MODULE_3__);\n/* harmony import */ var _src_Carousel__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./src/Carousel */ \"./js/src/Carousel.js\");\n/* harmony import */ var _src_Carousel__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(_src_Carousel__WEBPACK_IMPORTED_MODULE_4__);\n\n\n\n\n\n\n//# sourceURL=webpack:///./js/index.js?"); /***/ }), @@ -110,6 +110,17 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var jque /***/ }), +/***/ "./js/src/Carousel.js": +/*!****************************!*\ + !*** ./js/src/Carousel.js ***! + \****************************/ +/*! no static exports found */ +/***/ (function(module, exports) { + +eval("var slideIndex = 1;\nshowSlides(slideIndex);\n\nfunction plusSlides(n) {\n showSlides(slideIndex += n);\n}\n\nfunction currentSlide(n) {\n showSlides(slideIndex = n);\n}\n\nfunction showSlides(n) {\n var i;\n var slides = document.getElementsByClassName(\"carousel\");\n var dots = document.getElementsByClassName(\"nav_dot\");\n\n if (n > slides.length) {\n slideIndex = 1;\n }\n\n if (n < 1) {\n slideIndex = slides.length;\n }\n\n for (i = 0; i < slides.length; i++) {\n slides[i].style.display = \"none\";\n }\n\n for (i = 0; i < dots.length; i++) {\n dots[i].className = dots[i].className.replace(\" active\", \"\");\n }\n\n slides[slideIndex - 1].style.display = \"block\";\n dots[slideIndex - 1].className += \" active\";\n}\n\n//# sourceURL=webpack:///./js/src/Carousel.js?"); + +/***/ }), + /***/ "./js/src/Form.js": /*!************************!*\ !*** ./js/src/Form.js ***!