diff --git a/Backend/setup.php b/Backend/setup.php index 289514a..b99f69e 100644 --- a/Backend/setup.php +++ b/Backend/setup.php @@ -85,12 +85,11 @@ if(isset($_POST["dbSetup"])){ file_put_contents($conFilePath, json_encode($dbCon)); - require_once('../bootstrap.php'); try{ - $capsule->Connection()->getPdo(); + require_once('../bootstrap.php'); } catch (\Exception $e) { - http_response_code(400); file_put_contents($conFilePath, NULL); + http_response_code(400); echo json_encode(["message" => "Could not connect to the database. Please check your configuration. error:" . $e]); exit(); } diff --git a/Backend/test.php b/Backend/test.php new file mode 100644 index 0000000..a466263 --- /dev/null +++ b/Backend/test.php @@ -0,0 +1,8 @@ + '', 'password' => password_hash('',PASSWORD_DEFAULT) +]); \ No newline at end of file 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/FirstTimeSetup.html b/Frontend/Html/FirstTimeSetup.html index e69de29..2aef370 100644 --- a/Frontend/Html/FirstTimeSetup.html +++ b/Frontend/Html/FirstTimeSetup.html @@ -0,0 +1,72 @@ + + + + + + Setup + + + + + + + + + + + + + + + + + + + + + + +
+
+ + + + + + + + +
+
+ + + + + \ No newline at end of file diff --git a/Frontend/Javascript/Lodtrækning.js b/Frontend/Html/New.html similarity index 100% rename from Frontend/Javascript/Lodtrækning.js rename to Frontend/Html/New.html 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/Index.html b/Frontend/Index.html index 20eebea..412ecab 100755 --- a/Frontend/Index.html +++ b/Frontend/Index.html @@ -20,6 +20,7 @@ + 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; +} diff --git a/bootstrap.php b/bootstrap.php index 1959089..b988801 100755 --- a/bootstrap.php +++ b/bootstrap.php @@ -6,3 +6,4 @@ $con = json_decode(file_get_contents('config/database.json', true), true); $capsule->addConnection($con); $capsule->setAsGlobal(); $capsule->bootEloquent(); +$capsule->Connection()->getPdo();