From 24663071e653ff907469e7ec59dfc5a64b91d1a5 Mon Sep 17 00:00:00 2001 From: Ida Tiegel Date: Fri, 9 Apr 2021 11:25:31 +0200 Subject: [PATCH] Update --- Frontend/Html/ShowCase.html | 85 ++++++++++ Frontend/Javascript/jcarousel.responsive.js | 49 ++++++ Frontend/Styles/ShowCase.css | 173 ++++++++++++++++++++ Frontend/Styles/jcarousel.responsive.css | 117 +++++++++++++ 4 files changed, 424 insertions(+) create mode 100644 Frontend/Html/ShowCase.html create mode 100644 Frontend/Javascript/jcarousel.responsive.js create mode 100644 Frontend/Styles/ShowCase.css create mode 100644 Frontend/Styles/jcarousel.responsive.css diff --git a/Frontend/Html/ShowCase.html b/Frontend/Html/ShowCase.html new file mode 100644 index 0000000..3c13087 --- /dev/null +++ b/Frontend/Html/ShowCase.html @@ -0,0 +1,85 @@ + + + + + + + + + + + + + + + + + + + + + + + + +

Game Jam Name

+

Name Of Author

+ +
+
+
+ Beskrivelse +
+ + +
+
+ +
+
+
+
+

Hej dkjhhnsd hid hgndnf ghnd df

+
+ +
+
+
    +
  • Image 1
    • +
  • Image 2
    • +
  • Image 3
    • +
  • Image 4
    • +
  • Image 5
    • +
  • Image 6
    • +
+
+ + ‹ + › + +

+ 1 + 2 + 3 + 4 + 5 + 6 +

+
+ + + + + \ No newline at end of file diff --git a/Frontend/Javascript/jcarousel.responsive.js b/Frontend/Javascript/jcarousel.responsive.js new file mode 100644 index 0000000..3e78e51 --- /dev/null +++ b/Frontend/Javascript/jcarousel.responsive.js @@ -0,0 +1,49 @@ +(function($) { + $(function() { + var jcarousel = $('.jcarousel'); + + jcarousel + .on('jcarousel:reload jcarousel:create', function () { + var carousel = $(this), + width = carousel.innerWidth(); + + if (width >= 600) { + width = width / 3; + } else if (width >= 350) { + width = width / 2; + } + + carousel.jcarousel('items').css('width', Math.ceil(width) + 'px'); + }) + .jcarousel({ + wrap: 'circular' + }); + + $('.jcarousel-control-prev') + .jcarouselControl({ + target: '-=1' + }); + + $('.jcarousel-control-next') + .jcarouselControl({ + target: '+=1' + }); + + $('.jcarousel-pagination') + .on('jcarouselpagination:active', 'a', function() { + $(this).addClass('active'); + }) + .on('jcarouselpagination:inactive', 'a', function() { + $(this).removeClass('active'); + }) + .on('click', function(e) { + e.preventDefault(); + }) + .jcarouselPagination({ + perPage: 1, + item: function(page) { + return '' + page + ''; + } + }); + }); +})(jQuery); diff --git a/Frontend/Styles/ShowCase.css b/Frontend/Styles/ShowCase.css new file mode 100644 index 0000000..8b3db9c --- /dev/null +++ b/Frontend/Styles/ShowCase.css @@ -0,0 +1,173 @@ +body, +html { + background-color: rgb(18, 18, 18) !important; + color: rgba(255, 255, 255, .55) !important; + font-family: Arial, Helvetica, sans-serif !important; + margin: 40px !important; + padding: 10px !important; + height: 100%; +} + +#gameTitle { + margin-bottom: 10px; +} + +#groupId { + margin-bottom: 10px; +} + +#suggestions { + justify-content: center; + background-color: blue; + margin-top: 20px; +} + +#isWebBased { + border-radius: 15px; + color: rgba(255, 255, 255, .55); + background-color: rgb(18, 18, 18); + border: double; + height: 30px; + font-weight: bold; + margin: 8px; +} + +#gameFil { + border-radius: 15px; + color: rgba(255, 255, 255, .55); + background-color: rgb(18, 18, 18); + border: double; + height: 30px; + font-weight: bold; + margin: 8px; +} + +#thumbnailFile { + max-width: 100%; + max-height: 100%; +} + +#description { + margin-bottom: 10px; +} + +.carousel-item active { + display: flex !important; +} + +.d-block w-100 { + padding: 10px; + margin: 20px !important; +} + +.jcarousel-wrapper { + margin: 20px auto; + position: relative; + /*border: 10px solid #fff;*/ + -webkit-border-radius: 5px; + -moz-border-radius: 5px; + border-radius: 5px; + -webkit-box-shadow: 0 0 2px #999; + -moz-box-shadow: 0 0 2px #999; + box-shadow: 0 0 2px #999; +} + +/** Carousel **/ + +.jcarousel { + position: relative; + overflow: hidden; + width: 100%; +} + +.jcarousel ul { + width: 10000em; + position: relative; + list-style: none; + margin: 0; + padding: 0; +} + +.jcarousel li { + width: 100%; + float: left; + border: 1px solid #fff; + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; +} + +.jcarousel img { + display: block; + max-width: 100%; + height: auto !important; +} + +/** Carousel Controls **/ + +.jcarousel-control-prev, +.jcarousel-control-next { + position: absolute; + top: 50%; + margin-top: -15px; + width: 30px; + height: 30px; + text-align: center; + background: #4E443C; + color: #fff; + text-decoration: none; + text-shadow: 0 0 1px #000; + font: 24px/27px Arial, sans-serif; + -webkit-border-radius: 30px; + -moz-border-radius: 30px; + border-radius: 30px; + -webkit-box-shadow: 0 0 4px #F0EFE7; + -moz-box-shadow: 0 0 4px #F0EFE7; + box-shadow: 0 0 4px #F0EFE7; +} + +.jcarousel-control-prev { + left: 15px; +} + +.jcarousel-control-next { + right: 15px; +} + +/** Carousel Pagination **/ + +.jcarousel-pagination { + position: absolute; + bottom: -40px; + left: 50%; + -webkit-transform: translate(-50%, 0); + -ms-transform: translate(-50%, 0); + transform: translate(-50%, 0); + margin: 0; +} + +.jcarousel-pagination a { + text-decoration: none; + display: inline-block; + font-size: 11px; + height: 10px; + width: 10px; + line-height: 10px; + background: #fff; + color: #4E443C; + border-radius: 10px; + text-indent: -9999px; + margin-right: 7px; + -webkit-box-shadow: 0 0 2px #4E443C; + -moz-box-shadow: 0 0 2px #4E443C; + box-shadow: 0 0 2px #4E443C; +} + +.jcarousel-pagination a.active { + background: #4E443C; + color: #fff; + opacity: 1; + -webkit-box-shadow: 0 0 2px #F0EFE7; + -moz-box-shadow: 0 0 2px #F0EFE7; + box-shadow: 0 0 2px #F0EFE7; +} \ No newline at end of file diff --git a/Frontend/Styles/jcarousel.responsive.css b/Frontend/Styles/jcarousel.responsive.css new file mode 100644 index 0000000..2b44cae --- /dev/null +++ b/Frontend/Styles/jcarousel.responsive.css @@ -0,0 +1,117 @@ +.jcarousel-wrapper { + margin: 20px auto; + position: relative; + /* border: 10px solid #fff;*/ + -webkit-border-radius: 5px; + -moz-border-radius: 5px; + border-radius: 5px; + -webkit-box-shadow: 0 0 2px #999; + -moz-box-shadow: 0 0 2px #999; + box-shadow: 0 0 2px #999; +} + +/** Carousel **/ + +.jcarousel { + position: relative; + overflow: hidden; + width: 100%; +} + +.jcarousel ul { + width: 10000em; + position: relative; + list-style: none; + margin: 0; + padding: 0; +} + +.jcarousel li { + width: 200px; + float: left; + border: 1px solid #fff; + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; +} + +.jcarousel img { + display: block; + max-width: 100%; + height: auto !important; +} + +/** Carousel Controls **/ + +.jcarousel-control-prev, +.jcarousel-control-next { + position: absolute; + top: 50%; + margin-top: -15px; + width: 30px; + height: 30px; + text-align: center; + background: #4E443C; + color: #fff; + text-decoration: none; + text-shadow: 0 0 1px #000; + font: 24px/27px Arial, sans-serif; + -webkit-border-radius: 30px; + -moz-border-radius: 30px; + border-radius: 30px; + -webkit-box-shadow: 0 0 4px #F0EFE7; + -moz-box-shadow: 0 0 4px #F0EFE7; + box-shadow: 0 0 4px #F0EFE7; +} + +.jcarousel-control-prev { + left: 15px; +} + +.jcarousel-control-next { + right: 15px; +} + +/** Carousel Pagination **/ + +.jcarousel-pagination { + position: absolute; + bottom: -40px; + left: 50%; + -webkit-transform: translate(-50%, 0); + -ms-transform: translate(-50%, 0); + transform: translate(-50%, 0); + margin: 0; +} + +.jcarousel-pagination a { + text-decoration: none; + display: inline-block; + + font-size: 11px; + height: 10px; + width: 10px; + line-height: 10px; + + background: #fff; + color: #4E443C; + border-radius: 10px; + text-indent: -9999px; + + margin-right: 7px; + + + -webkit-box-shadow: 0 0 2px #4E443C; + -moz-box-shadow: 0 0 2px #4E443C; + box-shadow: 0 0 2px #4E443C; +} + +.jcarousel-pagination a.active { + background: #4E443C; + color: #fff; + opacity: 1; + + -webkit-box-shadow: 0 0 2px #F0EFE7; + -moz-box-shadow: 0 0 2px #F0EFE7; + box-shadow: 0 0 2px #F0EFE7; +}