From d24d89951568b971050a493774babb4c91e737ca Mon Sep 17 00:00:00 2001 From: IdaTiegel99 <79906151+IdaTiegel99@users.noreply.github.com> Date: Tue, 6 Apr 2021 15:24:07 +0200 Subject: [PATCH] Update --- .../Frontend/config/applicationhost.config | 8 + Frontend/.vs/Frontend/v16/.suo | Bin 16384 -> 34304 bytes Frontend/.vs/VSWorkspaceState.json | 5 +- Frontend/Html/SpinningWheel.html | 44 +++ Frontend/Javascript/Lodtrækning.js | 0 Frontend/Javascript/SpinningWheel.js | 65 +++++ Frontend/Styles/SpinningWheel.css | 270 ++++++++++++++++++ 7 files changed, 391 insertions(+), 1 deletion(-) create mode 100644 Frontend/Html/SpinningWheel.html delete mode 100644 Frontend/Javascript/Lodtrækning.js create mode 100644 Frontend/Javascript/SpinningWheel.js create mode 100644 Frontend/Styles/SpinningWheel.css 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 e1a5ed4211d2570c0e0d610e4ed1083dd38c94ff..a0913075237c5cf153dd6972c3f0d30d857b1645 100644 GIT binary patch literal 34304 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 delta 2073 zcmc&#T})h65WeSfVSo6i%d-5~y`YkfS+*BhgeE0y3bw-j;0js@t$?u!qOAt@Qi|B! zR;qn42JXj06Jw=q(ln+?)2xZcm=sGN`eaQ^s}DZZR(;X<(_~57D(lR$*VI;xKQW%{ zw=+9u&N*|wGc%ibO->}loTf_VD3K&P>4LDDPN&(-`kClyfwTyVJk-kWqCn$&rxw&t zMLtahT$q-p#V}HG1k3J5Q4BpNViO9@5GOFLaE+C+h;~OS@^61 zl7)mK0xggz6seR@Mp#F15Gn~SLJi>_LLQ--z#FY6SwXN7R?kFV6^0z5c#l@Ah1cHw z^Kg3=Gg7M=DQ;S-cJVPBnt2q5%18Z`P^-w7cFXwl8gsa_HVa7(mF+4?3OO#~eA*v@ zce`_r2{Ua>n5mnD@oy*DnHVOH3FOF_G?PRoj-yif!D>mtti2DPDPAb~juCT5QwGT) zLdBkSMT9`unCFA6R4A`>?>4ToCS)6x!4J)lZ)bQ%*S@2eOo@R zOcA12c}CcN@udYiIzx5NUuoNOzsw?gB)^p>>+bA+V_s%wudJfocdaZHQ0)P z=EDzTDyE;BOwJ6C3JRkp8^0%~|DqlHooz^rdQdOBC_6qJJtz)gp!lH zc%~{=GgW~D&+fy=Ek39-PMq^O>D4srm1BorK6c4wAzm~DhL&(@!~=D95f^+VzvmDT zx3GUGo-?s?3TMk(p!HgCR=2@X?kRexMe{z`G_z&oxrv>-B_v!gs^wQd>5qIh{_R4j z?EBL-eeGSAb3R9C&VTKB$KD2G(Txv!*K9=3AB=ElvBLN&|(2P-yAw|1e!-)3y=w5nv`V$L>-GUywr zRdJW*Ho#U|&J9k+4R?>iZ8_^|hpxtj4Jq{_ELS(X`e=%WKmGoj_ge;^{*|t1%>%!= ZyXMu_E-pPI{k^-Fl-#{}#RQd6+b;#>pGyD$ 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; +}