diff --git a/Frontend/.vs/Frontend/config/applicationhost.config b/Frontend/.vs/Frontend/config/applicationhost.config
index f7beb9b..91c4bab 100644
--- a/Frontend/.vs/Frontend/config/applicationhost.config
+++ b/Frontend/.vs/Frontend/config/applicationhost.config
@@ -168,6 +168,14 @@
+
+
+
+
+
+
+
+
diff --git a/Frontend/.vs/Frontend/v16/.suo b/Frontend/.vs/Frontend/v16/.suo
index e1a5ed4..a091307 100644
Binary files a/Frontend/.vs/Frontend/v16/.suo and b/Frontend/.vs/Frontend/v16/.suo differ
diff --git a/Frontend/.vs/VSWorkspaceState.json b/Frontend/.vs/VSWorkspaceState.json
index 6b61141..551ca58 100644
--- a/Frontend/.vs/VSWorkspaceState.json
+++ b/Frontend/.vs/VSWorkspaceState.json
@@ -1,6 +1,9 @@
{
"ExpandedNodes": [
- ""
+ "\\Html",
+ "\\Images",
+ "\\Javascript",
+ "\\Styles"
],
"PreviewInSolutionExplorer": false
}
\ No newline at end of file
diff --git a/Frontend/Html/SpinningWheel.html b/Frontend/Html/SpinningWheel.html
new file mode 100644
index 0000000..f2e05df
--- /dev/null
+++ b/Frontend/Html/SpinningWheel.html
@@ -0,0 +1,44 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
1
+
2
+
3
+
4
+
5
+
6
+
+
+
+
+
+
+
+
+
+
+ - 1.
+ - 2.
+ - 3.
+ - 4.
+ - 5.
+ - 6.
+
+
+
+
\ No newline at end of file
diff --git a/Frontend/Javascript/Lodtrækning.js b/Frontend/Javascript/Lodtrækning.js
deleted file mode 100644
index e69de29..0000000
diff --git a/Frontend/Javascript/SpinningWheel.js b/Frontend/Javascript/SpinningWheel.js
new file mode 100644
index 0000000..f63e5a0
--- /dev/null
+++ b/Frontend/Javascript/SpinningWheel.js
@@ -0,0 +1,65 @@
+//set default degree (360*5)
+var degree = 1800;
+//number of clicks = 0
+var clicks = 0;
+
+$(document).ready(function () {
+
+ /*WHEEL SPIN FUNCTION*/
+ $('#spin').click(function () {
+
+ //add 1 every click
+ clicks++;
+
+ /*multiply the degree by number of clicks
+ generate random number between 1 - 360,
+ then add to the new degree*/
+ var newDegree = degree * clicks;
+ var extraDegree = Math.floor(Math.random() * (360 - 1 + 1)) + 1;
+ totalDegree = newDegree + extraDegree;
+
+ /*let's make the spin btn to tilt every
+ time the edge of the section hits
+ the indicator*/
+ $('#wheel .sec').each(function () {
+ var t = $(this);
+ var noY = 0;
+
+ var c = 0;
+ var n = 700;
+ var interval = setInterval(function () {
+ c++;
+ if (c === n) {
+ clearInterval(interval);
+ }
+
+ var aoY = t.offset().top;
+ $("#txt").html(aoY);
+ console.log(aoY);
+
+ /*23.7 is the minumum offset number that
+ each section can get, in a 30 angle degree.
+ So, if the offset reaches 23.7, then we know
+ that it has a 30 degree angle and therefore,
+ exactly aligned with the spin btn*/
+ if (aoY < 23.89) {
+ console.log('<<<<<<<<');
+ $('#spin').addClass('spin');
+ setTimeout(function () {
+ $('#spin').removeClass('spin');
+ }, 100);
+ }
+ }, 10);
+
+ $('#inner-wheel').css({
+ 'transform': 'rotate(' + totalDegree + 'deg)'
+ });
+
+ noY = t.offset().top;
+
+ });
+ });
+
+
+
+});
\ No newline at end of file
diff --git a/Frontend/Styles/SpinningWheel.css b/Frontend/Styles/SpinningWheel.css
new file mode 100644
index 0000000..ae7422a
--- /dev/null
+++ b/Frontend/Styles/SpinningWheel.css
@@ -0,0 +1,270 @@
+* {
+ margin: 0;
+ padding: 0;
+}
+
+body {
+ background: #eaeaea;
+ color: #fff;
+ font-size: 18px;
+ font-family: 'Exo 2', sans-serif;
+}
+
+a {
+ color: #34495e;
+}
+
+
+
+
+/*WRAPPER*/
+#wrapper {
+ margin: 40px auto 0;
+ width: 266px;
+ position: relative;
+}
+
+#txt {
+ color: rgb(0,0,0);
+}
+
+
+/*WHEEL*/
+#wheel {
+ width: 250px;
+ height: 250px;
+ border-radius: 50%;
+ position: relative;
+ overflow: hidden;
+ border: 8px solid #fff;
+ box-shadow: rgba(0,0,0,0.2) 0px 0px 10px, rgba(0,0,0,0.05) 0px 3px 0px;
+ transform: rotate(0deg);
+}
+
+ #wheel:before {
+ content: '';
+ position: absolute;
+ border: 4px solid rgba(0,0,0,0.1);
+ width: 242px;
+ height: 242px;
+ border-radius: 50%;
+ z-index: 1000;
+ }
+
+#inner-wheel {
+ width: 100%;
+ height: 100%;
+ -webkit-transition: all 6s cubic-bezier(0,.99,.44,.99);
+ -moz-transition: all 6 cubic-bezier(0,.99,.44,.99);
+ -o-transition: all 6s cubic-bezier(0,.99,.44,.99);
+ -ms-transition: all 6s cubic-bezier(0,.99,.44,.99);
+ transition: all 6s cubic-bezier(0,.99,.44,.99);
+}
+
+#wheel div.sec {
+ position: absolute;
+ width: 0;
+ height: 0;
+ border-style: solid;
+ border-width: 130px 75px 0;
+ border-color: #19c transparent;
+ transform-origin: 75px 129px;
+ left: 50px;
+ top: -4px;
+ opacity: 1;
+}
+
+ #wheel div.sec:nth-child(1) {
+ transform: rotate(60deg);
+ -webkit-transform: rotate(60deg);
+ -moz-transform: rotate(60deg);
+ -o-transform: rotate(60deg);
+ -ms-transform: rotate(60deg);
+ border-color: #16a085 transparent;
+ }
+
+ #wheel div.sec:nth-child(2) {
+ transform: rotate(120deg);
+ -webkit-transform: rotate(120deg);
+ -moz-transform: rotate(120deg);
+ -o-transform: rotate(120deg);
+ -ms-transform: rotate(120deg);
+ border-color: #2980b9 transparent;
+ }
+
+ #wheel div.sec:nth-child(3) {
+ transform: rotate(180deg);
+ -webkit-transform: rotate(180deg);
+ -moz-transform: rotate(180deg);
+ -o-transform: rotate(180deg);
+ -ms-transform: rotate(180deg);
+ border-color: #34495e transparent;
+ }
+
+ #wheel div.sec:nth-child(4) {
+ transform: rotate(240deg);
+ -webkit-transform: rotate(240deg);
+ -moz-transform: rotate(240deg);
+ -o-transform: rotate(240deg);
+ -ms-transform: rotate(240deg);
+ border-color: #f39c12 transparent;
+ }
+
+ #wheel div.sec:nth-child(5) {
+ transform: rotate(300deg);
+ -webkit-transform: rotate(300deg);
+ -moz-transform: rotate(300deg);
+ -o-transform: rotate(300deg);
+ -ms-transform: rotate(300deg);
+ border-color: #d35400 transparent;
+ }
+
+ #wheel div.sec:nth-child(6) {
+ transform: rotate(360deg);
+ -webkit-transform: rotate(360deg);
+ -moz-transform: rotate(360deg);
+ -o-transform: rotate(360deg);
+ -ms-transform: rotate(360deg);
+ border-color: #c0392b transparent;
+ }
+
+
+ #wheel div.sec .fa {
+ margin-top: -100px;
+ color: rgba(0,0,0,0.2);
+ position: relative;
+ z-index: 10000000;
+ display: block;
+ text-align: center;
+ font-size: 36px;
+ margin-left: -15px;
+ text-shadow: rgba(255, 255, 255, 0.1) 0px -1px 0px, rgba(0, 0, 0, 0.2) 0px 1px 0px;
+ }
+
+
+
+
+#spin {
+ width: 68px;
+ height: 68px;
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ margin: -34px 0 0 -34px;
+ border-radius: 50%;
+ box-shadow: rgba(0,0,0,0.1) 0px 3px 0px;
+ z-index: 1000;
+ background: #fff;
+ cursor: pointer;
+ font-family: 'Exo 2', sans-serif;
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ -o-user-select: none;
+ user-select: none;
+}
+
+
+ #spin:after {
+ content: "SPIN";
+ text-align: center;
+ line-height: 68px;
+ color: #CCC;
+ text-shadow: 0 2px 0 #fff, 0 -2px 0 rgba(0,0,0,0.3);
+ position: relative;
+ z-index: 100000;
+ width: 68px;
+ height: 68px;
+ display: block;
+ }
+
+ #spin:before {
+ content: "";
+ position: absolute;
+ width: 0;
+ height: 0;
+ border-style: solid;
+ border-width: 0 20px 28px 20px;
+ border-color: transparent transparent #ffffff transparent;
+ top: -12px;
+ left: 14px;
+ }
+
+#inner-spin {
+ width: 54px;
+ height: 54px;
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ margin: -27px 0 0 -27px;
+ border-radius: 50%;
+ background: red;
+ z-index: 999;
+ box-shadow: rgba(255,255,255,1) 0px -2px 0px inset, rgba(255,255,255,1) 0px 2px 0px inset, rgba(0,0,0,0.4) 0px 0px 5px;
+ background: rgb(255,255,255); /* Old browsers */
+ background: -moz-radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%, rgba(234,234,234,1) 100%); /* FF3.6+ */
+ background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(255,255,255,1)), color-stop(100%,rgba(234,234,234,1))); /* Chrome,Safari4+ */
+ background: -webkit-radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%,rgba(234,234,234,1) 100%); /* Chrome10+,Safari5.1+ */
+ background: -o-radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%,rgba(234,234,234,1) 100%); /* Opera 12+ */
+ background: -ms-radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%,rgba(234,234,234,1) 100%); /* IE10+ */
+ background: radial-gradient(ellipse at center, rgba(255,255,255,1) 0%,rgba(234,234,234,1) 100%); /* W3C */
+ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#eaeaea',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
+}
+
+#spin:active #inner-spin {
+ box-shadow: rgba(0,0,0,0.4) 0px 0px 5px inset;
+}
+
+#spin:active:after {
+ font-size: 15px;
+}
+
+
+
+#shine {
+ width: 250px;
+ height: 250px;
+ position: absolute;
+ top: 0;
+ left: 0;
+ background: -moz-radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%, rgba(255,255,255,0.99) 1%, rgba(255,255,255,0.91) 9%, rgba(255,255,255,0) 100%); /* FF3.6+ */
+ background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(255,255,255,1)), color-stop(1%,rgba(255,255,255,0.99)), color-stop(9%,rgba(255,255,255,0.91)), color-stop(100%,rgba(255,255,255,0))); /* Chrome,Safari4+ */
+ background: -webkit-radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%,rgba(255,255,255,0.99) 1%,rgba(255,255,255,0.91) 9%,rgba(255,255,255,0) 100%); /* Chrome10+,Safari5.1+ */
+ background: -o-radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%,rgba(255,255,255,0.99) 1%,rgba(255,255,255,0.91) 9%,rgba(255,255,255,0) 100%); /* Opera 12+ */
+ background: -ms-radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%,rgba(255,255,255,0.99) 1%,rgba(255,255,255,0.91) 9%,rgba(255,255,255,0) 100%); /* IE10+ */
+ background: radial-gradient(ellipse at center, rgba(255,255,255,1) 0%,rgba(255,255,255,0.99) 1%,rgba(255,255,255,0.91) 9%,rgba(255,255,255,0) 100%); /* W3C */
+ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#00ffffff',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
+ opacity: 0.1;
+}
+
+
+
+/*ANIMATION*/
+@-webkit-keyframes hh {
+ 0%, 100% {
+ transform: rotate(0deg);
+ -webkit-transform: rotate(0deg);
+ }
+
+ 50% {
+ transform: rotate(7deg);
+ -webkit-transform: rotate(7deg);
+ }
+}
+
+@keyframes hh {
+ 0%, 100% {
+ transform: rotate(0deg);
+ -webkit-transform: rotate(0deg);
+ }
+
+ 50% {
+ transform: rotate(7deg);
+ -webkit-transform: rotate(7deg);
+ }
+}
+
+.spin {
+ -webkit-animation: hh 0.1s; /* Chrome, Safari, Opera */
+ animation: hh 0.1s;
+}