Game-jam-Devs/Game-Jaming
Game-jam-Devs
/
Game-Jaming
4
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Merge remote-tracking branch 'origin/main' into main

This commit is contained in:
Jonas 2021-04-21 10:27:06 +02:00
parent 48b9f532a4 ebeb93e5fa
commit 23a98a23cf
3 changed files with 1820 additions and 1411 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

742
Frontend/Index.html
View File

File diff suppressed because it is too large Load Diff

310
Frontend/Javascript/LoginFunctionality.js
View File

@ -1,44 +1,46 @@
$(document).ready(function () {
// Register Start
axios.defaults.baseURL = "http://localhost/Game-Jaming";
let selectedGameJam;
let isAdminLoggedIn = false;
let displayValue = 0;
let arr = [
{"id": "-1", "Gamejam": "Vælg aktivt GameJam"}
];
let arr = [{ id: "-1", Gamejam: "Vælg aktivt GameJam" }];
if (getCookie('userName') != null)
{
if (getCookie("userName") != null) {
isAdminLoggedIn = true;
SwitchNavInfo(true, true);
}
else if (getCookie('groupName') != null)
{
} else if (getCookie("groupName") != null) {
isAdminLoggedIn = false;
SwitchNavInfo(true);
}
// Populate select with options from the database
axios.get('/Backend/Controllers/GameJam/GetGameJam.php')
axios
.get("/Backend/Controllers/GameJam/GetGameJam.php")
.then(function (res) {
let resArr = res.data.data;
for(let i = 0; i < res.data.data.length; i++)
{
for (let i = 0; i < res.data.data.length; i++) {
arr.push({
id: resArr[i].id,
Gamejam: resArr[i].name
Gamejam: resArr[i].name,
});
}
$.each(arr, function (i, data) {
if (i === 0)
{
$('#GameJamSelect').append('<option disabled selected value="' + data.id + '">' + data.Gamejam + '</option>');
}
else
{
$('#GameJamSelect').append('<option value="' + data.id + '">' + data.Gamejam + '</option>');
if (i === 0) {
$("#GameJamSelect").append(
'<option disabled selected value="' +
data.id +
'">' +
data.Gamejam +
"</option>"
);
} else {
$("#GameJamSelect").append(
'<option value="' + data.id + '">' + data.Gamejam + "</option>"
);
}
});
})
@ -47,127 +49,110 @@ $(document).ready(function () {
});
// Remove invalidInput if selected option has been changed
$('#GameJamSelect').change(function() {
selectedGameJam = $('#GameJamSelect').children("option:selected").val();
$("#GameJamSelect").change(function () {
selectedGameJam = $("#GameJamSelect").children("option:selected").val();
if (selectedGameJam >= 1)
{
$('#GameJamSelect').removeClass('invalidInput');
if (selectedGameJam >= 1) {
$("#GameJamSelect").removeClass("invalidInput");
}
});
// Remove invalidInput if change in group name has been detected
$('#username').on('input', function() {
if ($(this).hasClass('invalidInput'))
{
$(this).removeClass('invalidInput');
$("#username").on("input", function () {
if ($(this).hasClass("invalidInput")) {
$(this).removeClass("invalidInput");
}
})
});
GetGroupNames().then(function (res) {
let resArr = res.data;
let groupNameTaken = false;
$('#RegisterBtn').click(function() {
let groupName = $('#username').val();
$("#RegisterBtn").click(function () {
let groupName = $("#username").val();
for(let i = 0; i < resArr.length; i++)
{
if (resArr[i].group_name.toUpperCase() === groupName.toUpperCase())
{
for (let i = 0; i < resArr.length; i++) {
if (resArr[i].group_name.toUpperCase() === groupName.toUpperCase()) {
groupNameTaken = true;
break;
}
else
{
} else {
groupNameTaken = false;
}
}
});
// Check data before submitting
$('#RegisterForm').submit(function(e) {
if(!selectedGameJam >= 1)
{
$('#GameJamSelect').addClass('invalidInput');
$("#RegisterForm").submit(function (e) {
if (!selectedGameJam >= 1) {
$("#GameJamSelect").addClass("invalidInput");
e.preventDefault();
return false;
}
else
{
$('#gameJamId').val($('#GameJamSelect option:selected').val());
} else {
$("#gameJamId").val($("#GameJamSelect option:selected").val());
}
if($('#pass1').val().length === 0)
{
$('#pass1').addClass('invalidInput');
if ($("#pass1").val().length === 0) {
$("#pass1").addClass("invalidInput");
e.preventDefault();
return;
}
if($('#pass2').val().length === 0)
{
$('#pass2').addClass('invalidInput');
if ($("#pass2").val().length === 0) {
$("#pass2").addClass("invalidInput");
e.preventDefault();
return;
}
if($('#username').val().length === 0)
{
$('#username').addClass('invalidInput');
if ($("#username").val().length === 0) {
$("#username").addClass("invalidInput");
e.preventDefault();
return;
}
if($('#pass1').hasClass('invalidInput'))
{
if ($("#pass1").hasClass("invalidInput")) {
e.preventDefault();
return;
}
if($('#pass2').hasClass('invalidInput'))
{
if ($("#pass2").hasClass("invalidInput")) {
e.preventDefault();
return;
}
if(!$.isNumeric($('#NUDDisplay').text()))
{
$('#NUDDisplay').text('Ugyldigt antal!');
$('#NUDDisplay').css({"color": "red"});
if (!$.isNumeric($("#NUDDisplay").text())) {
$("#NUDDisplay").text("Ugyldigt antal!");
$("#NUDDisplay").css({ color: "red" });
e.preventDefault();
}
else
{
$('#groupAmount').val($('#NUDDisplay').text());
} else {
$("#groupAmount").val($("#NUDDisplay").text());
}
if (groupNameTaken)
{
$('#username').addClass('invalidInput');
if (groupNameTaken) {
$("#username").addClass("invalidInput");
e.preventDefault();
return;
}
let URL = "/Backend/Controllers/Group/SigningUp.php";
let form = $('#RegisterForm')[0];
let form = $("#RegisterForm")[0];
let formData = new FormData(form);
let id = $('#RegisterBtn').attr('name');
let value = $('#RegisterBtn').val();
let id = $("#RegisterBtn").attr("name");
let value = $("#RegisterBtn").val();
formData.append(id, value);
axios.post(URL, formData, {
header: 'multipart/form-data'
}).then(res => {
if (res.status === 201)
{
axios
.post(URL, formData, {
header: "multipart/form-data",
})
.then((res) => {
if (res.status === 201) {
SwitchNavInfo(true);
}
}).catch(error => {
})
.catch((error) => {
console.log(error.response);
});
@ -175,36 +160,29 @@ $(document).ready(function () {
});
});
$('#NUDPlus').click(function() {
if($('#NUDDisplay').css('color') === 'rgb(255, 0, 0)')
{
$('#NUDDisplay').css({'color': 'rgba(255, 255, 255, .55)'});
$("#NUDPlus").click(function () {
if ($("#NUDDisplay").css("color") === "rgb(255, 0, 0)") {
$("#NUDDisplay").css({ color: "rgba(255, 255, 255, .55)" });
}
displayValue++;
$('#NUDDisplay').text(displayValue);
$("#NUDDisplay").text(displayValue);
});
$('#NUDMinus').click(function() {
if (displayValue <= 0)
{
$("#NUDMinus").click(function () {
if (displayValue <= 0) {
return;
}
else if(displayValue <= 1)
{
$('#NUDDisplay').text(1);
}
else
{
} else if (displayValue <= 1) {
$("#NUDDisplay").text(1);
} else {
displayValue--;
$('#NUDDisplay').text(displayValue);
$("#NUDDisplay").text(displayValue);
}
});
async function GetGroupNames() {
const res = await axios.get('/Backend/Controllers/Group/GetGroup.php');
const res = await axios.get("/Backend/Controllers/Group/GetGroup.php");
return res.data;
}
@ -212,34 +190,33 @@ $(document).ready(function () {
// Register end
// Login start
$('#LoginForm').submit(function(e) {
$("#LoginForm").submit(function (e) {
let URL = "/Backend/Controllers/Group/Login.php";
let form = $('#LoginForm')[0];
let form = $("#LoginForm")[0];
let formData = new FormData(form);
let id = $('#LoginBtn').attr('name');
let value = $('#LoginBtn').val();
let id = $("#LoginBtn").attr("name");
let value = $("#LoginBtn").val();
formData.append(id, value);
axios.post(URL, formData, {
header: 'multipart/form-data'
}).then(res => {
if (res.status === 200)
{
axios
.post(URL, formData, {
header: "multipart/form-data",
})
.then((res) => {
if (res.status === 200) {
isAdminLoggedIn = false;
SwitchNavInfo(true);
}
}).catch(error => {
if (error.response.status === 401)
{
$('#loginUsername').css({'border-color':'red'});
$('#loginPassword').css({'border-color':'red'});
$('#ErrorText').css({'display':'block'});
}
else
{
})
.catch((error) => {
if (error.response.status === 401) {
$("#loginUsername").css({ "border-color": "red" });
$("#loginPassword").css({ "border-color": "red" });
$("#ErrorText").css({ display: "block" });
} else {
console.log(error.response);
}
});
@ -247,34 +224,33 @@ $(document).ready(function () {
e.preventDefault();
});
$('#AdminLoginForm').submit(function(e) {
$("#AdminLoginForm").submit(function (e) {
let URL = "/Backend/Controllers/Admin/AdminLogin.php";
let form = $('#AdminLoginForm')[0];
let form = $("#AdminLoginForm")[0];
let formData = new FormData(form);
let id = $('#AdminLoginBtn').attr('name');
let value = $('#AdminLoginBtn').val();
let id = $("#AdminLoginBtn").attr("name");
let value = $("#AdminLoginBtn").val();
formData.append(id, value);
axios.post(URL, formData, {
header: 'multipart/form-data'
}).then(res => {
if (res.status === 200)
{
axios
.post(URL, formData, {
header: "multipart/form-data",
})
.then((res) => {
if (res.status === 200) {
isAdminLoggedIn = true;
SwitchNavInfo(true, true);
}
}).catch(error => {
if (error.response.status === 401)
{
$('#adminUsername').css({'border-color':'red'});
$('#adminPassword').css({'border-color':'red'});
$('#AdminErrorText').css({'display':'block'});
}
else
{
})
.catch((error) => {
if (error.response.status === 401) {
$("#adminUsername").css({ "border-color": "red" });
$("#adminPassword").css({ "border-color": "red" });
$("#AdminErrorText").css({ display: "block" });
} else {
console.log(error.response);
}
});
@ -283,44 +259,36 @@ $(document).ready(function () {
});
function SwitchNavInfo(isLoggedIn, isAdmin) {
if (isLoggedIn)
{
$('#NavUser').css({'display':'block'});
$('#NavUser').text(`Welcome, ${isAdmin ? getCookie('userName') : getCookie('groupName')}!`);
if (isLoggedIn) {
$("#NavUser").css({ display: "block" });
$("#NavUser").text(
`Welcome, ${isAdmin ? getCookie("userName") : getCookie("groupName")}!`
);
$('#NavLogin').css({'display':'none'});
$('#NavLogout').css({'display':'block'});
$("#NavLogin").css({ display: "none" });
$("#NavLogout").css({ display: "block" });
$('#LoginModal').modal('hide');
}
else
{
$('#NavUser').css({'display':'none'});
$('#NavUser').text(``);
$("#LoginModal").modal("hide");
} else {
$("#NavUser").css({ display: "none" });
$("#NavUser").text(``);
$('#NavLogin').css({'display':'block'});
$('#NavLogout').css({'display':'none'});
$("#NavLogin").css({ display: "block" });
$("#NavLogout").css({ display: "none" });
}
if (isAdmin === undefined)
{
return
}
else
{
if (isAdmin)
{
if (isLoggedIn)
{
$('#AdminPanel').css({'display':'block'});
if (isAdmin === undefined) {
return;
} else {
if (isAdmin) {
if (isLoggedIn) {
$("#AdminPanel").css({ display: "block" });
console.log('Logged In As Admin!');
}
else
{
$('#AdminPanel').css({'display':'none'});
console.log("Logged In As Admin!");
} else {
$("#AdminPanel").css({ display: "none" });
console.log('Logged Out As Admin!');
console.log("Logged Out As Admin!");
}
}
}
@ -328,14 +296,16 @@ $(document).ready(function () {
// Login end
// Logout start
$('#NavLogout').click(function() {
axios.get('/Backend/Controllers/Group/Logout.php').then(res => {
if (res.status == 200)
{
$("#NavLogout").click(function () {
axios
.get("/Backend/Controllers/Group/Logout.php")
.then((res) => {
if (res.status == 200) {
SwitchNavInfo(false, isAdminLoggedIn);
isAdminLoggedIn = false;
}
}).catch(error => {
})
.catch((error) => {
console.log(error.response);
});
});

123
Frontend/Styles/Index.css
View File

@ -1,6 +1,6 @@
body,
html {
color: rgba(255, 255, 255, .55);
color: rgba(255, 255, 255, 0.55);
font-family: Arial, Helvetica, sans-serif;
margin: 0;
padding: 0;
@ -24,11 +24,11 @@ section {
}
a {
color: rgba(255, 255, 255, .75);
color: rgba(255, 255, 255, 0.75);
}
a:hover {
color: rgba(255, 255, 255, .75);
color: rgba(255, 255, 255, 0.75);
}
#content {
@ -58,7 +58,13 @@ a:hover {
padding-top: 0px;
}
.container, .container-fluid, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
.container,
.container-fluid,
.container-lg,
.container-md,
.container-sm,
.container-xl,
.container-xxl {
padding-right: 0;
padding-left: 0;
}
@ -111,7 +117,7 @@ a:hover {
}
.row.content {
height: 450px
height: 450px;
}
.CenterDiv {
@ -119,11 +125,11 @@ a:hover {
}
.LoginButton {
color: rgba(255, 255, 255, .55);
color: rgba(255, 255, 255, 0.55);
}
.LoginButton:hover {
color: rgba(255, 255, 255, .75);
color: rgba(255, 255, 255, 0.75);
}
.dropdown-menu {
@ -131,11 +137,11 @@ a:hover {
}
.dropdown-menu .dropdown-item {
color: rgba(255, 255, 255, .50) !important;
color: rgba(255, 255, 255, 0.5) !important;
}
.dropdown-menu .dropdown-item:hover {
color: rgba(255, 255, 255, .75) !important;
color: rgba(255, 255, 255, 0.75) !important;
background-color: transparent !important;
}
@ -143,7 +149,7 @@ a:hover {
padding: 0;
border-bottom: 0;
background-color: rgb(18, 18, 18);
color: rgba(255, 255, 255, .75);
color: rgba(255, 255, 255, 0.75);
}
#RulesModal .modal-header {
@ -154,7 +160,7 @@ a:hover {
#RulesModal .modal-header h1 {
font-weight: bolder;
color: rgba(255, 255, 255, .75);
color: rgba(255, 255, 255, 0.75);
}
#RulesModal .modal-dialog-scrollable .modal-content {
@ -175,12 +181,12 @@ a:hover {
#ModalRulesTabContent li p {
font: 16px/1.5 Helvetica, sans-serif;
padding-left: 60px;
color: rgba(255, 255, 255, .55);
color: rgba(255, 255, 255, 0.55);
}
#ModalRulesTabContent span {
position: absolute;
color: rgba(255, 255, 255, .75);
color: rgba(255, 255, 255, 0.75);
}
#pass_info {
@ -191,7 +197,7 @@ a:hover {
width: 250px;
padding: 15px;
background: rgb(254, 254, 254);
font-size: .875em;
font-size: 0.875em;
border-radius: 5px;
box-shadow: 0 1px 3px rgb(204, 204, 204);
border: 1px solid rgb(221, 221, 221);
@ -210,7 +216,8 @@ a:hover {
display: block;
}
#pass_info ul, li {
#pass_info ul,
li {
margin: 0;
padding: 0;
list-style-type: none;
@ -234,7 +241,7 @@ a:hover {
.invalid::before {
font-family: "FontAwesome";
content: '\f00d';
content: "\f00d";
}
.valid {
@ -247,10 +254,9 @@ a:hover {
border-color: rgb(80, 219, 52) !important;
}
.valid::before {
font-family: "FontAwesome";
content: '\f00c';
content: "\f00c";
}
.RulesModal .modal-header {
@ -265,16 +271,13 @@ a:hover {
.modal-content {
background-color: rgb(18, 18, 18);
box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 2px,
rgba(0, 0, 0, 0.07) 0px 2px 4px,
rgba(0, 0, 0, 0.07) 0px 4px 8px,
rgba(0, 0, 0, 0.07) 0px 8px 16px,
rgba(0, 0, 0, 0.07) 0px 16px 32px,
rgba(0, 0, 0, 0.07) 0px 32px 64px;
box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 2px, rgba(0, 0, 0, 0.07) 0px 2px 4px,
rgba(0, 0, 0, 0.07) 0px 4px 8px, rgba(0, 0, 0, 0.07) 0px 8px 16px,
rgba(0, 0, 0, 0.07) 0px 16px 32px, rgba(0, 0, 0, 0.07) 0px 32px 64px;
}
.modal-backdrop {
z-index: 1;
z-index: -1;
}
.nav-tabs {
@ -283,19 +286,19 @@ a:hover {
.nav-tabs .nav-item.show .nav-link,
.nav-tabs .nav-link.active {
color: rgba(255, 255, 255, .75);
color: rgba(255, 255, 255, 0.75);
background-color: rgb(37, 37, 37);
border-color: rgb(80, 80, 80);
}
.nav-tabs .nav-link {
color: rgba(255, 255, 255, .55);
color: rgba(255, 255, 255, 0.55);
}
.nav-tabs .nav-link:focus,
.nav-tabs .nav-link:hover {
border-color: rgb(80, 80, 80);
color: rgba(255, 255, 255, .75);
color: rgba(255, 255, 255, 0.75);
}
.FullWidthModalTabs {
@ -318,11 +321,11 @@ a:hover {
width: 16px;
height: 16px;
background-color: transparent;
color: rgba(255, 255, 255, .55);
color: rgba(255, 255, 255, 0.55);
}
.CloseIcon:hover {
color: rgba(255, 255, 255, .75);
color: rgba(255, 255, 255, 0.75);
}
.btn-close:hover {
@ -353,7 +356,7 @@ a:hover {
}
.box #NUDMinus {
color: rgba(255, 255, 255, .55);
color: rgba(255, 255, 255, 0.55);
background-color: transparent;
border: none;
float: left;
@ -368,7 +371,7 @@ a:hover {
}
.box #NUDDisplay {
color: rgba(255, 255, 255, .55);
color: rgba(255, 255, 255, 0.55);
background-color: transparent;
border: none;
cursor: text;
@ -384,7 +387,7 @@ a:hover {
}
.box #NUDPlus {
color: rgba(255, 255, 255, .55);
color: rgba(255, 255, 255, 0.55);
background-color: transparent;
border: none;
float: right;
@ -403,14 +406,13 @@ a:hover {
}
.box #GameJamSelect:hover {
color: rgba(255, 255, 255, .75);
color: rgba(255, 255, 255, 0.75);
}
.box #GameJamSelect ul {
background-color: red;
}
.box {
background-color: rgb(18, 18, 18);
}
@ -432,12 +434,13 @@ a:hover {
padding: 10px 10px;
width: 250px;
outline: none;
color: rgba(255, 255, 255, .55);
color: rgba(255, 255, 255, 0.55);
border-radius: 24px;
transition: 0.25s;
}
.box .btn-group, .btn-group-vertical {
.box .btn-group,
.btn-group-vertical {
position: relative;
display: block;
text-align: center;
@ -447,7 +450,7 @@ a:hover {
}
.box #NUDMinus {
color: rgba(255, 255, 255, .55);
color: rgba(255, 255, 255, 0.55);
background-color: transparent;
border: none;
float: left;
@ -462,7 +465,7 @@ a:hover {
}
.box #NUDDisplay {
color: rgba(255, 255, 255, .55);
color: rgba(255, 255, 255, 0.55);
background-color: transparent;
border: none;
cursor: text;
@ -478,7 +481,7 @@ a:hover {
}
.box #NUDPlus {
color: rgba(255, 255, 255, .55);
color: rgba(255, 255, 255, 0.55);
background-color: transparent;
border: none;
float: right;
@ -497,7 +500,7 @@ a:hover {
}
.box #GameJamSelect:hover {
color: rgba(255, 255, 255, .75);
color: rgba(255, 255, 255, 0.75);
}
.box #GameJamSelect ul {
@ -506,7 +509,7 @@ a:hover {
.text-muted {
margin-bottom: 5vh;
color: rgba(255, 255, 255, .55) !important;
color: rgba(255, 255, 255, 0.55) !important;
}
.box h1 {
@ -532,7 +535,7 @@ a:hover {
.box #pass2:hover,
.box #loginPassword:hover,
.box #adminPassword:hover {
color: rgba(255, 255, 255, .75);
color: rgba(255, 255, 255, 0.75);
}
.box input[type="submit"] {
@ -544,7 +547,7 @@ a:hover {
border: 2px solid rgb(46, 204, 113);
padding: 14px 40px;
outline: none;
color: rgba(255, 255, 255, .55);
color: rgba(255, 255, 255, 0.55);
border-radius: 24px;
transition: 0.25s;
cursor: pointer;
@ -552,7 +555,7 @@ a:hover {
.box input[type="submit"]:hover {
background: rgb(46, 204, 113);
color: rgba(255, 255, 255, .75);
color: rgba(255, 255, 255, 0.75);
}
.carousel-item img {
@ -561,7 +564,7 @@ a:hover {
@media only screen and (min-width: 1280px) {
.CustomRow {
display: none
display: none;
}
.SmallScreenDouImages {
@ -620,7 +623,6 @@ a:hover {
transition: opacity 0.25s;
}
.image_overlay > * {
transform: translateY(20px);
transition: transform 0.25s;
@ -644,7 +646,7 @@ image_gruppenavn{
/*Kategori spil*/
.Collapsible {
background-color: rgb(18, 18, 18);
color: rgba(255, 255, 255, .55);
color: rgba(255, 255, 255, 0.55);
cursor: pointer;
padding: 18px;
width: 100%;
@ -655,7 +657,6 @@ image_gruppenavn{
width: 33.333%;
}
.CollapsibleContent {
padding: 0 18px;
display: none;
@ -686,8 +687,8 @@ image_gruppenavn{
top: 0;
width: 100%;
z-index: 100;
transition: all .3s ease;
box-shadow: 0 1px 25px rgba(0,0,0, .1);
transition: all 0.3s ease;
box-shadow: 0 1px 25px rgba(0, 0, 0, 0.1);
}
#header.hide {
@ -700,7 +701,14 @@ image_gruppenavn{
border: none;
height: 3px !important;
background: rgb(0, 113, 185) !important;
background: linear-gradient(to right, rgb(18, 18, 18), rgb(0, 113, 185), rgb(38, 171, 255), rgb(0, 113, 185), rgb(18, 18, 18)) !important;
background: linear-gradient(
to right,
rgb(18, 18, 18),
rgb(0, 113, 185),
rgb(38, 171, 255),
rgb(0, 113, 185),
rgb(18, 18, 18)
) !important;
opacity: 1;
}
@ -712,7 +720,6 @@ image_gruppenavn{
display: flex;
justify-content: center;
align-items: center;
}
.calendar {
@ -721,7 +728,6 @@ image_gruppenavn{
background-color: rgb(34, 34, 39);
box-shadow: 0 0.5rem 3rem rgba(0, 0, 0, 0.4);
border-radius: 20px;
}
.month {
@ -736,7 +742,6 @@ image_gruppenavn{
text-shadow: 0 0.3rem 0.5rem rgba(0, 0, 0, 0.5);
border-top-left-radius: 20px;
border-top-right-radius: 20px;
}
.month i {
@ -814,7 +819,7 @@ image_gruppenavn{
}
.hasEvent {
background-color: red;;
background-color: red;
}
/*Kalender slut*/
@ -822,7 +827,7 @@ image_gruppenavn{
position: fixed;
bottom: 20px;
right: 20px;
background: rgba(73, 122, 255, .8);
background: rgba(73, 122, 255, 0.8);
width: 50px;
height: 50px;
display: block;
@ -843,7 +848,7 @@ image_gruppenavn{
}
#return-to-top i {
color: rgba(255, 255, 255, .75);;
color: rgba(255, 255, 255, 0.75);
margin: 0;
position: relative;
font-size: 30px;
@ -856,7 +861,7 @@ image_gruppenavn{
}
#return-to-top:hover i {
color: rgba(255, 255, 255, .55);;
color: rgba(255, 255, 255, 0.55);
top: 5px;
}