Fixed fortune wheel
Added the wheel to the index page Fixed the wheel CSS
This commit is contained in:
Kraken
parent
ee32bf4e5a
commit
5928c53488
|
|
@ -1,44 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
|
||||
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title></title>
|
||||
<link rel="stylesheet" type="text/css" href="../Styles/SpinningWheel.css" />
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
|
||||
<script src="../Javascript/SpinningWheel.js"></script>
|
||||
|
||||
<div id="wrapper">
|
||||
<div id="wheel">
|
||||
<div id="inner-wheel">
|
||||
<div class="sec"><span class="fa">1</span></div>
|
||||
<div class="sec"><span class="fa">2</span></div>
|
||||
<div class="sec"><span class="fa">3</span></div>
|
||||
<div class="sec"><span class="fa">4</span></div>
|
||||
<div class="sec"><span class="fa">5</span></div>
|
||||
<div class="sec"><span class="fa">6</span></div>
|
||||
</div>
|
||||
|
||||
<div id="spin">
|
||||
<div id="inner-spin"></div>
|
||||
</div>
|
||||
|
||||
<div id="shine"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="txt">
|
||||
<ul>
|
||||
<li>1.</li>
|
||||
<li>2.</li>
|
||||
<li>3.</li>
|
||||
<li>4.</li>
|
||||
<li>5.</li>
|
||||
<li>6.</li>
|
||||
</ul>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -8,14 +8,13 @@
|
|||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link rel="shortcut icon" href="Images/UFO.png" />
|
||||
<!-- Default page settings end -->
|
||||
|
||||
<!-- CSS -->
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
|
||||
<link rel="stylesheet" href="Styles/Index.css" />
|
||||
<link rel="stylesheet" href="Styles/SpinningWheel.css" />
|
||||
<link rel="stylesheet" href="Styles/minibar.min.css" />
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css" integrity="sha512-HK5fgLBL+xu6dm/Ii3z4xhlSUyZgTT9tuc/hSrtw6uzJOvgRr2a9jyxxT1ely+B+xFAmJKVSTbpM/CuL7qxO8w==" crossorigin="anonymous" />
|
||||
<!-- CSS end -->
|
||||
|
||||
<!-- Header scripts -->
|
||||
<script src="https://kit.fontawesome.com/57b6c8b971.js" crossorigin="anonymous"></script>
|
||||
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
|
||||
|
|
@ -97,7 +96,6 @@
|
|||
</div>
|
||||
</nav>
|
||||
<!-- Navbar end -->
|
||||
|
||||
<!-- Login modal -->
|
||||
<div class="LoginModal">
|
||||
<div class="modal fade" id="LoginModal" tabindex="-1" aria-labelledby="LoginModalLabel" aria-hidden="true">
|
||||
|
|
@ -154,7 +152,6 @@
|
|||
<input id="pass1" type="password" class="" placeholder="Password">
|
||||
<input id="pass2" type="password" class="" name="password" placeholder="Gentag Password">
|
||||
<select id="GameJamSelect" class="form-select" aria-label="Default select example">
|
||||
|
||||
</select>
|
||||
|
||||
<input type="hidden" name="groupAmount" id="groupAmount">
|
||||
|
|
@ -221,7 +218,6 @@
|
|||
</div>
|
||||
</div>
|
||||
<!-- Login modal end -->
|
||||
|
||||
<!-- Rules Modal -->
|
||||
<div class="modal fade" id="RulesModal" tabindex="-1" aria-labelledby="RulesModalLabel" aria-hidden="true">
|
||||
<div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
|
||||
|
|
@ -260,7 +256,7 @@
|
|||
<li>
|
||||
<span>4.</span>
|
||||
<p>
|
||||
<strong> Husk licensen. </strong> Alle uploads (kode, aktiver, eksekverbare filer osv.) deles og licenseres under <a href = "https://creativecommons.org/licenses/by-nc-sa/4.0/deed.en">Attribution-NonCommercial-ShareAlike 4.0 International Creative Commons License</a>
|
||||
<strong> Husk licensen. </strong> Alle uploads (kode, aktiver, eksekverbare filer osv.) deles og licenseres under <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/deed.en">Attribution-NonCommercial-ShareAlike 4.0 International Creative Commons License</a>
|
||||
</p>
|
||||
</li>
|
||||
<li>
|
||||
|
|
@ -297,7 +293,6 @@
|
|||
</div>
|
||||
</div>
|
||||
<!-- Rules modal end -->
|
||||
|
||||
<!-- Page content -->
|
||||
<div id="content" class="container-fluid text-center">
|
||||
<div class="text-left CenterDiv">
|
||||
|
|
@ -653,8 +648,35 @@
|
|||
<section id="lod">
|
||||
<h3>Lodtrækning</h3>
|
||||
|
||||
<div id="chart"></div>
|
||||
<div id="question"><h1></h1></div>
|
||||
<div id="wrapper">
|
||||
<div id="wheel">
|
||||
<div id="inner-wheel">
|
||||
<div class="sec"><span class="fa">1</span></div>
|
||||
<div class="sec"><span class="fa">2</span></div>
|
||||
<div class="sec"><span class="fa">3</span></div>
|
||||
<div class="sec"><span class="fa">4</span></div>
|
||||
<div class="sec"><span class="fa">5</span></div>
|
||||
<div class="sec"><span class="fa">6</span></div>
|
||||
</div>
|
||||
|
||||
<div id="spin">
|
||||
<div id="inner-spin"></div>
|
||||
</div>
|
||||
|
||||
<div id="shine"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="txt">
|
||||
<ul>
|
||||
<li>1.</li>
|
||||
<li>2.</li>
|
||||
<li>3.</li>
|
||||
<li>4.</li>
|
||||
<li>5.</li>
|
||||
<li>6.</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</section>
|
||||
<!-- Lodtrækning slut -->
|
||||
|
|
@ -667,17 +689,16 @@
|
|||
</div>
|
||||
</div>
|
||||
<!-- Page content end -->
|
||||
|
||||
<!-- Footer -->
|
||||
<footer id="footer" class="text-center">
|
||||
<p>Footer Text</p>
|
||||
</footer>
|
||||
<!-- Footer end -->
|
||||
|
||||
<!-- Body scripts -->
|
||||
<script src="Javascript/Collapsible.js"></script>
|
||||
<script src="Javascript/PasswordValidation.js"></script>
|
||||
<script src="Javascript/Kalender.js"></script>
|
||||
<script src="Javascript/SpinningWheel.js"></script>
|
||||
<script src="Javascript/minibar.min.js"></script>
|
||||
<script src="Javascript/HeaderFunctionality.js"></script>
|
||||
<script src="Javascript/LoginFunctionality.js"></script>
|
||||
|
|
|
|||
|
|
@ -34,8 +34,10 @@ $(document).ready(function () {
|
|||
}
|
||||
|
||||
var aoY = t.offset().top;
|
||||
$("#txt").html(aoY);
|
||||
console.log(aoY);
|
||||
|
||||
//Display Rotation
|
||||
//$("#txt").html(aoY);
|
||||
//console.log(aoY);
|
||||
|
||||
/*23.7 is the minumum offset number that
|
||||
each section can get, in a 30 angle degree.
|
||||
|
|
|
|||
|
|
@ -1,31 +1,14 @@
|
|||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
body {
|
||||
background: #eaeaea;
|
||||
color: #fff;
|
||||
font-size: 18px;
|
||||
font-family: 'Exo 2', sans-serif;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #34495e;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
/*WRAPPER*/
|
||||
/*WRAPPER*/
|
||||
#wrapper {
|
||||
margin: 40px auto 0;
|
||||
width: 266px;
|
||||
position: relative;
|
||||
font-size: 18px;
|
||||
font-family: 'Exo 2', sans-serif;
|
||||
}
|
||||
|
||||
#txt {
|
||||
color: rgb(0,0,0);
|
||||
color: rgba(255,255,255, .55);
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -44,10 +27,12 @@ a {
|
|||
#wheel:before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
border: 4px solid rgba(0,0,0,0.1);
|
||||
border: 8px solid rgba(0,0,0,0.1);
|
||||
width: 242px;
|
||||
height: 242px;
|
||||
border-radius: 50%;
|
||||
top: -4px;
|
||||
left: -4px;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
|
|
@ -69,8 +54,8 @@ a {
|
|||
border-width: 130px 75px 0;
|
||||
border-color: #19c transparent;
|
||||
transform-origin: 75px 129px;
|
||||
left: 50px;
|
||||
top: -4px;
|
||||
left: 45px;
|
||||
top: -10px;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
|
|
@ -137,7 +122,7 @@ a {
|
|||
display: block;
|
||||
text-align: center;
|
||||
font-size: 36px;
|
||||
margin-left: -15px;
|
||||
margin-left: -10px;
|
||||
text-shadow: rgba(255, 255, 255, 0.1) 0px -1px 0px, rgba(0, 0, 0, 0.2) 0px 1px 0px;
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue