Skip to content

Commit

Permalink
refactor: refactor ui & fix: volume buttons (#18)
Browse files Browse the repository at this point in the history 
* Update ui.html

* Update style.css

* jQuery to vanilla JS & freshen up all that

* remove console.log

* Update script.js

* Update style.css

* fix indent
  • Loading branch information
@TonybynMp4
TonybynMp4 authored Feb 7, 2024
1 parent e69de4d commit df54e0b
Show file tree
Hide file tree
Showing 4 changed files with 186 additions and 190 deletions.
4 changes: 2 additions & 2 deletions fxmanifest.lua
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,10 +18,10 @@ client_scripts {

server_script 'server/main.lua'

ui_page('html/ui.html')
ui_page "html/index.html"

files {
'html/ui.html',
'html/index.html',
'html/js/script.js',
'html/css/style.css',
'html/img/radio.png',
Expand Down
190 changes: 80 additions & 110 deletions html/css/style.css
View file
Original file line number Diff line number Diff line change
@@ -1,32 +1,42 @@
@import url('https://fonts.googleapis.com/css?family=Fira+Code&display=swap');

body {
position: relative;
font-family: sans-serif;
overflow: hidden;
top: 0;
padding: 0;
margin: 0;
position: relative;
font-family: sans-serif;
overflow: hidden;
top: 0;
padding: 0;
margin: 0;
}

.container {
height: 100vh;
display:none;
#container {
height: 100vh;
display: none;
}

.radio-container {
position: absolute;
bottom: -56vh;
right: 15vh;
#radio-container {
position: absolute;
bottom: -56vh;
right: 15vh;
}

.radio {
width: 18vh;
-moz-user-select: -moz-none;
-khtml-user-select: none;
-webkit-user-select: none;
-o-user-select: none;
user-select: none;
width: 18vh;
-moz-user-select: -moz-none;
-khtml-user-select: none;
-webkit-user-select: none;
-o-user-select: none;
user-select: none;
}

#submit,
#disconnect {
position: absolute;
width: 2.2vh;
height: 3.2vh;
bottom: 14vh;
border-radius: 5px;
transition: all 0.1s linear;
}

#toggleClicks {
Expand All @@ -39,139 +49,99 @@ body {
left: 7.5vh;
}

#toggleClicks:hover {
background: rgba(255, 255, 255, 0.25);
}

#submit {
position: absolute;
width: 2.2vh;
height: 3.2vh;
bottom: 14vh;
left: 4.2vh;
border-radius: 5px;
transition: all 0.1s linear;
}

#submit:hover {
background: rgba(255, 255, 255, 0.25);
left: 4.2vh;
}

#disconnect {
position: absolute;
width: 2.2vh;
height: 3.2vh;
bottom: 14vh;
right: 3.2vh;
border-radius: 5px;
transition: all 0.1s linear;
}

#disconnect:hover {
background: rgba(255, 255, 255, 0.25);
right: 3.2vh;
}

#volumeDown,
#volumeUp {
position: absolute;
width: 3.3vh;
height: 1.9vh;
bottom: 18vh;
right: 3.1vh;
border-radius: 5px;
transition: all 0.1s linear;
}

#volumeUp:hover {
background: rgba(255, 255, 255, 0.25);
bottom: 18vh;
}

#volumeDown {
position: absolute;
width: 3.3vh;
height: 1.9vh;
bottom: 18vh;
left: 4.0vh;
border-radius: 5px;
transition: all 0.1s linear;
right: 3.1vh;
}

#volumeDown:hover {
background: rgba(255, 255, 255, 0.25);
#volumeUp {
left: 4.0vh;
}

#increaseradiochannel {
position: absolute;
width: 3.3vh;
height: 1.9vh;
bottom: 30vh;
left: 0.0vh;
border-radius: 5px;
transition: all 0.1s linear;
#increaseradiochannel,
#decreaseradiochannel {
left: 0.0vh;
}

#increaseradiochannel:hover {
background: rgba(255, 255, 255, 0.25);
#increaseradiochannel {
bottom: 30vh;
}

#decreaseradiochannel {
position: absolute;
width: 3.3vh;
height: 1.9vh;
bottom: 18vh;
left: 0.0vh;
border-radius: 5px;
transition: all 0.1s linear;
bottom: 18vh;
}

#decreaseradiochannel:hover {
background: rgba(255, 255, 255, 0.25);
#volumeDown,
#volumeUp,
#increaseradiochannel,
#decreaseradiochannel,
#poweredOff {
position: absolute;
width: 3.3vh;
height: 1.9vh;
border-radius: 5px;
transition: all 0.1s linear;
}

#poweredOff {
position: absolute;
width: 3.3vh;
height: 2.9vh;
bottom: 50vh;
left: 0.0vh;
border-radius: 5px;
transition: all 0.1s linear;
bottom: 50vh;
left: 0.0vh;
}

#poweredOff:hover {
background: rgba(255, 255, 255, 0.25);
#volumeUp:hover,
#volumeDown:hover,
#disconnect:hover,
#submit:hover,
#poweredOff:hover,
#decreaseradiochannel:hover,
#increaseradiochannel:hover,
#toggleClicks:hover {
background: rgba(255, 255, 255, 0.25);
}

.onoff button {
padding: 40px 55px;
opacity: .0;
padding: 40px 55px;
opacity: .0;
}

.channel {
position: absolute;
bottom: 24vh;
left: 5.3vh;
background: none;
position: absolute;
bottom: 24vh;
left: 5.3vh;
background: none;
}

::-webkit-input-placeholder {
color: rgba(0, 0, 0, 0.5);
color: rgba(0, 0, 0, 0.5);
}

.channel span {
text-align: center;
color: rgba(0, 0, 0, 0.75);
text-align: center;
color: rgba(0, 0, 0, 0.75);
}

.channel input {
text-align: center;
border: none;
font-size: 25px;
background: none;
outline: none;
font-family: 'Fira Code', monospace;
width: 5vw;
text-align: center;
border: none;
font-size: 25px;
background: none;
outline: none;
font-family: 'Fira Code', monospace;
width: 5vw;
}

::-webkit-inner-spin-button {
display: none;
display: none;
}
19 changes: 9 additions & 10 deletions html/ui.html → html/index.html
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,12 @@
<!doctype HTML>
<html>
<head>
<script src="nui://game/ui/jquery.js" type="text/javascript"></script>
<link rel="stylesheet" href="css/style.css">
<script src="js/script.js" type="text/javascript"></script>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="container">
<div class="radio-container">
<div id="container">
<div id="radio-container">
<img src="./img/radio.png" alt="" class="radio">

<div id="toggleClicks"></div>
Expand All @@ -15,13 +15,12 @@
</div>
<div id="submit"></div>
<div id="disconnect"></div>
<div id="volumeDown"></div>
<div id="volumeUp"></div>
<div id="increaseradiochannel"></div>
<div id="volumeUp"></div>
<div id="volumeDown"></div>
<div id="increaseradiochannel"></div>
<div id="decreaseradiochannel"></div>
<div id="poweredOff"></div>
<div id="poweredOff"></div>
</div>
</div>
<script src="js/script.js" type="text/javascript"></script>
</body>
</html>
</html>
Loading

0 comments on commit df54e0b

Please sign in to comment.