├── server
    └── main.lua
├── README.md
├── html
    ├── Assets
    │   └── votingicon.png
    ├── index.js
    ├── index.html
    └── main.css
├── fxmanifest.lua
└── client
    └── main.lua


/server/main.lua:
--------------------------------------------------------------------------------
1 | 
2 | 
3 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # g-voting
2 | 
3 | 
4 | NoPixel Inspired Voting UI
5 | 


--------------------------------------------------------------------------------
/html/Assets/votingicon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Gavi1223/g-voting/HEAD/html/Assets/votingicon.png


--------------------------------------------------------------------------------
/fxmanifest.lua:
--------------------------------------------------------------------------------
 1 | fx_version 'adamant'
 2 | 
 3 | game 'gta5'
 4 | 
 5 | 
 6 | server_scripts {
 7 | 	'server/main.lua',
 8 |     "@mysql-async/lib/MySQL.lua"
 9 | 	
10 | }
11 | 
12 | client_scripts {
13 | 	'client/main.lua'
14 | }
15 | 
16 | ui_page "html/index.html"
17 | files({
18 |     'html/index.html',
19 |     'html/index.js',
20 |     'html/main.css',
21 |     'html/Assets/votingicon.png'
22 | })
23 | 
24 | 


--------------------------------------------------------------------------------
/client/main.lua:
--------------------------------------------------------------------------------
 1 | 
 2 | 
 3 | 
 4 | 
 5 | RegisterCommand('vote', function()
 6 |     TriggerEvent('open:voting')
 7 | end)
 8 | 
 9 | 
10 | 
11 | 
12 | 
13 | 
14 | 
15 | local display = false
16 | 
17 | 
18 | RegisterNetEvent("open:voting")
19 | AddEventHandler("open:voting", function()
20 |     SetDisplay(not display)
21 | end)   
22 | 
23 | 
24 | 
25 | function SetDisplay(bool)
26 |     display = bool
27 |     SetNuiFocus(bool, bool)
28 |     SendNUIMessage({
29 |         type = "ui",
30 |         status = bool,
31 |     })
32 | end
33 | 
34 | 
35 | 
36 | 
37 | 
38 | RegisterNUICallback("exit", function(data)
39 |     SetDisplay(false)
40 | end)
41 | 
42 | 
43 | RegisterNUICallback("main", function(data)
44 |     SetDisplay(false)
45 | end)
46 | 
47 | 
48 | RegisterNUICallback("error", function(data)
49 |     SetDisplay(false)
50 | end)
51 | 
52 | 
53 | 
54 | 
55 | 
56 | 
57 | 
58 | 
59 | 
60 | 
61 | --[[
62 | 
63 | Citizen.CreateThread(function()
64 |     while display do
65 |         Citizen.Wait(0)
66 | 
67 |         DisableControlAction(0, 1, display) -- LookLeftRight
68 |         DisableControlAction(0, 2, display) -- LookUpDown
69 |         DisableControlAction(0, 142, display) -- MeleeAttackAlternate
70 |         DisableControlAction(0, 18, display) -- Enter
71 |         DisableControlAction(0, 106, display) -- VehicleMouseControlOverride
72 |     end
73 | end)
74 | 
75 | 
76 | -]]
77 | 
78 | 


--------------------------------------------------------------------------------
/html/index.js:
--------------------------------------------------------------------------------
  1 | $(function () {
  2 |     function display(bool) {
  3 |         if (bool) {
  4 |             $(".container").show();
  5 |         } else {
  6 |             $(".container").hide();
  7 |         }
  8 |     }
  9 | 
 10 |     function displayAlready(bool) {
 11 |         if (bool) {
 12 |             $(".container").show();
 13 |         } else {
 14 |             $(".container").hide();
 15 |         }
 16 |     }
 17 | 
 18 | 
 19 | 
 20 |     display(false)
 21 |     displayAlready(false)
 22 | 
 23 | 
 24 | 
 25 |     // if the person uses the escape key, it will exit the resource
 26 |     document.onkeyup = function (data) {
 27 |         if (data.which == 27) {
 28 |             $("#slot1Accept").prop( "checked", false );
 29 |             $("#slot2Accept").prop( "checked", false );
 30 |             $("#slot3Accept").prop( "checked", false );
 31 |             $("#slot4Accept").prop( "checked", false );
 32 |             $("#slot5Accept").prop( "checked", false );
 33 |             $(".footer").hide();
 34 |             $.post('http://agrp-voting/exit', JSON.stringify({}));
 35 |             return
 36 |         }
 37 |     };
 38 | 
 39 | 
 40 | 
 41 | 
 42 | 
 43 | 
 44 | 
 45 | 
 46 | 
 47 |     window.addEventListener('message', function(event) {
 48 |         var item = event.data;
 49 | 
 50 | //        document.getElementById("slot1Name").innerHTML = item.slot1Name;
 51 | //        document.getElementById("slot2Name").innerHTML = item.slot2Name;
 52 | //        document.getElementById("slot3Name").innerHTML = item.slot3Name;
 53 | 
 54 | //        document.getElementById("genderSlot1").innerHTML = item.slot1Gender;
 55 | //        document.getElementById("genderSlot2").innerHTML = item.slot2Gender;
 56 | //        document.getElementById("genderSlot3").innerHTML = item.slot3Gender;
 57 | 
 58 | //        document.getElementById("partySlot1").innerHTML = item.slot1Age;
 59 | //        document.getElementById("partySlot2").innerHTML = item.slot2Age;
 60 | //        document.getElementById("partySlot3").innerHTML = item.slot3Age;
 61 | 
 62 | 
 63 |         if (item.type === "ui") {
 64 |             if (item.status == true) {
 65 |                 display(true)
 66 |             } else {
 67 |                 display(false)
 68 |             }
 69 |         }
 70 | 
 71 |         if (item.type === "already") {
 72 |             if (item.status == true) {
 73 |                 displayAlready(true)
 74 |             } else {
 75 |                 displayAlready(false)
 76 |             }
 77 |         }
 78 |     })
 79 |    
 80 | 
 81 | 
 82 | 
 83 | 
 84 | 
 85 | 
 86 | 
 87 | 
 88 | 
 89 | 
 90 | 
 91 | 
 92 | 
 93 | 
 94 | 
 95 | //    document.onkeyup = function (data) {
 96 | //        if (data.which == 27) {
 97 | //            $.post('http://voting/exit', JSON.stringify({})); // Wenn man ESC triggert er Callback exit in der Main.lua Client
 98 | //            return
 99 | //        }
100 | //    };
101 | //    $("#close").click(function () {
102 | //        $.post('http://voting/exit', JSON.stringify({})); //exit ist der Callback in der Client Main.lua - Sobald der Button mit der ID Close gedrückt wird passiert das was in der Callback steht - In dem fall schließt er das
103 | //        return
104 | //    })
105 | 
106 | //    $("#alreadyCheckOkay").click(function () {
107 | //        $.post('http://voting/exit', JSON.stringify({})); //exit ist der Callback in der Client Main.lua - Sobald der Button mit der ID Close gedrückt wird passiert das was in der Callback steht - In dem fall schließt er das
108 | //        return
109 | //    })
110 | 
111 | //    $("#thxVote").click(function () {
112 | //        $("#contentSuccess").hide("100");
113 | //        $.post('http://voting/exit', JSON.stringify({})); //exit ist der Callback in der Client Main.lua - Sobald der Button mit der ID Close gedrückt wird passiert das was in der Callback steht - In dem fall schließt er das
114 | //        return
115 | //    })
116 | 
117 |    
118 |     
119 | })


--------------------------------------------------------------------------------
/html/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | <head>
  4 |     <meta charset="UTF-8">
  5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6 |     <link rel="stylesheet" href="main.css" type="text/css">
  7 |     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css">
  8 |     <script src="nui://game/ui/jquery.js" type="text/javascript"></script>
  9 | </head>
 10 | <body>
 11 |    
 12 | 
 13 | 
 14 | 
 15 | 
 16 |     <div class="container"> 
 17 |         <div class="header"> 
 18 |             <p class = lefthead1>Voting for:</p>
 19 |             <img src="Assets/votingicon.png">  
 20 |             <p class = righthead1>#ElectionSZN</p>
 21 |             <hr>
 22 |             <p class = lefthead2>Mayor Election</p>
 23 |             <p class = righthead2>SELECT ONE</p>  
 24 |         </div>
 25 |       
 26 |         <br><br>
 27 | 
 28 |         <div class="voters"> 
 29 |             <div class="slot-container" >
 30 |                 <div class= "slot">
 31 |                     <div class="slotname">Abdul Alrahim</div>
 32 |                     <div id="slotparty">Independent</div>
 33 |                     <input type="checkbox" name="meister" id="slot1Accept">
 34 |                 </div>  
 35 |             </div>  
 36 | 
 37 |             <div class="slot-container" >
 38 |                 <div class= "slot">
 39 |                     <div class="slotname">Nancy Ree</div>
 40 |                     <div id="slotparty">The Real Nancy Party</div>
 41 |                     <input type="checkbox" name="meister" id="slot2Accept">
 42 |                 </div>
 43 |             </div>
 44 | 
 45 |             <div class="slot-container" >
 46 |                 <div class= "slot">
 47 |                     <div class="slotname">Billy Clarke</div>
 48 |                     <div id="slotparty">The loudest voice Party</div>
 49 |                     <input type="checkbox" name="meister" id="slot3Accept">
 50 |                 </div>
 51 |             </div>
 52 | 
 53 |             <div class="slot-container" >
 54 |                 <div class= "slot">
 55 |                     <div class="slotname">Archie Morris</div>
 56 |                     <div id="slotparty">Downbad Party</div>
 57 |                     <input type="checkbox" name="meister" id="slot4Accept">
 58 |                 </div>
 59 |             </div>
 60 | 
 61 |             <div class="slot-container" >
 62 |                 <div class= "slot">
 63 |                     <div class="slotname">Lewis Patterson</div>
 64 |                     <div id="slotparty">The Patterson family Party</div>
 65 |                     <input type="checkbox" name="meister" id="slot5Accept">
 66 |                 </div>
 67 |             </div>
 68 | 
 69 | <!--            <div class="slot-container" >                                      -- format of more candidates
 70 |                 <div class= "slot">
 71 |                     <div class="slotname">William Edwards</div>
 72 |                     <div id="slotparty">Independent</div>
 73 |                     <input type="checkbox" name="meister" class="slotAccept">
 74 |                 </div>
 75 |             </div>
 76 | 
 77 |             <div class="slot-container" >
 78 |                 <div class= "slot">
 79 |                     <div class="slotname">Nancy Ree</div>
 80 |                     <div id="slotparty">The Real Nancy Party</div>
 81 |                     <input type="checkbox" name="meister" class="slotAccept">
 82 |                 </div>
 83 |             </div>
 84 | 
 85 |             <div class="slot-container" >
 86 |                 <div class= "slot">
 87 |                     <div class="slotname">Nancy Ree</div>
 88 |                     <div id="slotparty">The Real Nancy Party</div>
 89 |                     <input type="checkbox" name="meister" class="slotAccept">
 90 |                 </div>
 91 |             </div>
 92 | 
 93 | -->
 94 | 
 95 | 
 96 |         </div>
 97 | 
 98 | 
 99 | 
100 |         <div class="footer"> 
101 |             <button id="saveButton">SUBMIT BALLOT</button>
102 |         </div>
103 | 
104 | 
105 | 
106 |     </div>
107 | 
108 |     
109 |     <script src="./index.js" type="text/javascript"></script>
110 |     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
111 |     <script src="https://kit.fontawesome.com/a076d05399.js"></script>
112 |     <script>
113 |         $(document).ready(function(){
114 |         
115 | 
116 |         $("#slot1Accept").click(function(){
117 |             if($(this).is(":checked")){
118 |                 $("#slot2Accept").prop( "checked", false );
119 |                 $("#slot3Accept").prop( "checked", false );
120 |                 $("#slot4Accept").prop( "checked", false );
121 |                 $("#slot5Accept").prop( "checked", false );
122 |                 $("#errorText").hide("400");
123 |                 $(".footer").show();
124 |             }else{
125 |                 $(".footer").hide();
126 |             }
127 |             
128 |         });
129 | 
130 |         $("#slot2Accept").click(function(){
131 |             if($(this).is(":checked")){
132 |                 $("#slot1Accept").prop( "checked", false );
133 |                 $("#slot3Accept").prop( "checked", false );
134 |                 $("#slot4Accept").prop( "checked", false );
135 |                 $("#slot5Accept").prop( "checked", false );
136 |                 $("#errorText").hide("400");
137 |                 $(".footer").show();
138 |             }else{
139 |                 $(".footer").hide();
140 |             }
141 |         });
142 | 
143 |         $("#slot3Accept").click(function(){
144 |             if($(this).is(":checked")){
145 |                 $("#slot1Accept").prop( "checked", false );
146 |                 $("#slot2Accept").prop( "checked", false );
147 |                 $("#slot4Accept").prop( "checked", false );
148 |                 $("#slot5Accept").prop( "checked", false );
149 |                 $("#errorText").hide("400");
150 |                 $(".footer").show();
151 |             }else{
152 |                 $(".footer").hide();
153 |             }
154 |         });
155 | 
156 |         $("#slot4Accept").click(function(){
157 |             if($(this).is(":checked")){
158 |                 $("#slot1Accept").prop( "checked", false );
159 |                 $("#slot2Accept").prop( "checked", false );
160 |                 $("#slot3Accept").prop( "checked", false );
161 |                 $("#slot5Accept").prop( "checked", false );
162 |                 $("#errorText").hide("400");
163 |                 $(".footer").show();
164 |             }else{
165 |                 $(".footer").hide();
166 |             }
167 |         });
168 | 
169 |         $("#slot5Accept").click(function(){
170 |             if($(this).is(":checked")){
171 |                 $("#slot1Accept").prop( "checked", false );
172 |                 $("#slot2Accept").prop( "checked", false );
173 |                 $("#slot3Accept").prop( "checked", false );
174 |                 $("#slot4Accept").prop( "checked", false );
175 |                 $("#errorText").hide("400");
176 |                 $(".footer").show();
177 |             }else{
178 |                 $(".footer").hide();
179 |             }
180 |         });
181 | 
182 | 
183 | 
184 |         $("#saveButton").click(function(){
185 | 
186 |             $("#contentUI").hide("100");
187 |             $("#contentSuccess").show("2000");
188 | 
189 |             if($('#slot1Accept').is(":checked")||$('#slot2Accept').is(":checked")||$('#slot3Accept').is(":checked")||$('#slot4Accept').is(":checked")||$('#slot5Accept').is(":checked")){
190 |                 
191 |                 if($("#slot1Accept").is(":checked")){
192 | //                    $.post('https://agrp-voting/votedcandidate1', JSON.stringify({save:save}));          -- NUI callback this to your client 
193 |                         $.post('http://agrp-voting/exit', JSON.stringify({}));
194 |                         console.log("1 accepted")
195 |                 }
196 |                 if($("#slot2Accept").is(":checked")){
197 |                     $.post('http://agrp-voting/exit', JSON.stringify({}));
198 |                     console.log("2 accepted")
199 |                 }
200 |                 if($("#slot3Accept").is(":checked")){
201 |                     $.post('http://agrp-voting/exit', JSON.stringify({}));
202 |                     console.log("3 accepted")
203 |                 }
204 |                 if($("#slot4Accept").is(":checked")){
205 |                     $.post('http://agrp-voting/exit', JSON.stringify({}));
206 |                     console.log("4 accepted")
207 |                 }
208 |                 if($("#slot5Accept").is(":checked")){
209 |                     $.post('http://agrp-voting/exit', JSON.stringify({}));
210 |                     console.log("5 accepted")
211 |                 }
212 | 
213 |             }else{
214 |                 console.log("NO one is selected")
215 |                 $("#errorText").show("400");
216 |                 
217 |             }
218 |             
219 |             
220 | 
221 |            
222 |         })
223 |     });
224 |     </script>
225 |     
226 | </body>
227 | </html>


--------------------------------------------------------------------------------
/html/main.css:
--------------------------------------------------------------------------------
  1 | @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@500&display=swap');
  2 | 
  3 | body{
  4 |     font-family: 'Montserrat', sans-serif;
  5 | }
  6 | 
  7 | 
  8 | 
  9 | #contentUI {
 10 |     display: block;
 11 | 
 12 | }
 13 | 
 14 | #contentAlready{
 15 |     display: none;
 16 | }
 17 | 
 18 | 
 19 | #contentSuccess{
 20 |     display: none;
 21 | }
 22 | 
 23 | 
 24 | 
 25 | 
 26 | 
 27 | 
 28 | 
 29 | 
 30 | 
 31 | .container{
 32 |     width: 850px;
 33 |     height: 980px;
 34 |     display: block;
 35 |     position: absolute;
 36 |     left: 50%;
 37 |     top: 50%;
 38 |     transform: translate(-50%,-50%);
 39 |     background-color: rgb(34, 40, 50);
 40 |     border-radius: 10px;
 41 | }
 42 | 
 43 | .header{
 44 |     width: 100%;
 45 |     height: 95px;
 46 | }
 47 | 
 48 | .lefthead1{
 49 |     font-size: 23px;
 50 |     font-weight: 300;
 51 |     color: white;
 52 |     position: absolute;
 53 |     top: -5px;
 54 |     left: 15px;
 55 | 
 56 | }
 57 | 
 58 | .lefthead2{
 59 |     font-size: 16px;
 60 |     font-weight: bold;
 61 |     color: white;
 62 |     position: absolute;
 63 |     top: 58px;
 64 |     left: 15px;
 65 | }
 66 | 
 67 | .righthead1{
 68 |     font-size: 23px;
 69 |     font-weight: 300;
 70 |     color: white;
 71 |     position: absolute;
 72 |     top: -10px;
 73 |     left: 675px;
 74 | }
 75 | 
 76 | .righthead2{
 77 |     font-size: 18px;
 78 |     font-weight: 100;
 79 |     color: white;
 80 |     position: absolute;
 81 |     top: 58px;
 82 |     left: 720px;
 83 | }
 84 | 
 85 | .header img{
 86 |     width: 35px;
 87 |     height: 32px;
 88 | 
 89 |     position: relative;
 90 |     left: 630px;
 91 |     top: 10px;
 92 | }
 93 | 
 94 | 
 95 | 
 96 | 
 97 | hr{
 98 |     margin-top: 15px;
 99 |     margin-left:15px;
100 |     width: 820px;
101 |     border-width:1;
102 |     position: absolute;
103 |     border-width:1px;
104 |     color:white;
105 | }
106 | 
107 | 
108 | 
109 | 
110 | .voters{
111 |     width: 100%;
112 |     height: 750px;
113 |     overflow-y: auto;
114 | }
115 | 
116 | 
117 | .voters::-webkit-scrollbar {
118 |     display: none;
119 | }
120 | 
121 | 
122 | .slot {
123 |     width: 820px;
124 |     height: 90px;
125 |     border-radius: 5px;
126 |     margin-top: 20px;
127 |     margin-left: 15px;
128 |     background-color: rgb(48, 71, 93);
129 | }
130 | 
131 | .slotname{
132 |     padding-top: 10px;
133 |     margin-left: 20px;
134 |     color: white;
135 |     font-size: 20px;
136 |     font-weight: 600;
137 | }
138 | 
139 | #slotparty{
140 |     padding-top: 20px;
141 |     margin-left: 20px;
142 |     color: white;
143 |     font-size: 15px;
144 | }
145 | 
146 | 
147 | .slot input{
148 |     appearance: none;
149 |     -webkit-appearance: none;
150 |     position: relative;
151 |     border-radius: 15px;
152 |     background-color: #d5d5d5;
153 |     left: 700px;
154 |     top: -68px;
155 |     width: 80px;
156 |     height: 75px;
157 |     transition: .4s;
158 |     display: flex;
159 |     align-items: center;
160 |     justify-content: center;
161 |     outline: none;
162 | }
163 | 
164 | .slot input::after{
165 |     font-family: "Font Awesome 5 Free";
166 |     content: "\f00c";
167 |     font-weight: 900;
168 |     font-size: 25px;
169 |     color: white;
170 |     display: none;
171 |     transition: .4s;
172 | }
173 | 
174 | .slot input:checked{
175 |     background-color: white;
176 |     transition: .4s;
177 | 
178 | }
179 | 
180 | .slot input:checked::after{
181 |     display: block;
182 |     transition: .4s;
183 |     color: rgb(34, 40, 50);
184 |     font-size: 50px;
185 | }
186 | 
187 | 
188 | 
189 | 
190 | 
191 | 
192 | 
193 | 
194 | 
195 | 
196 | 
197 | 
198 | 
199 | 
200 | 
201 | 
202 | 
203 | 
204 | 
205 | 
206 | 
207 | 
208 | 
209 | #close{
210 |     width: 20px;
211 |     height: 20px;
212 | 
213 |     background-color: rgb(255, 50, 50);
214 |     position: absolute;
215 |     right: 10px;
216 |     top: 5px;
217 | 
218 |     border-radius: 4px;
219 |     transition: .4s;
220 | }
221 | 
222 | #close:hover{
223 |     transition: .4s;
224 |     cursor: pointer;
225 |     background-color: rgb(255, 77, 77);
226 |     border-radius: 2rem;
227 | }
228 | 
229 | 
230 | 
231 | 
232 | #content{
233 |     width: 600px;
234 |     height: 400px;
235 |     border-radius: 10px;
236 |     position: absolute;
237 |     left: 50px;
238 |     top: 150px;
239 |     background-color: rgb(86, 136, 228);
240 | }
241 | 
242 | 
243 | 
244 | 
245 | 
246 | 
247 | /*
248 | .slot:hover{
249 |     box-shadow: inset 0 0 0 0.5rem rgb(68, 109, 185);
250 |     transition: .3s;
251 | }
252 | 
253 | */
254 | 
255 | .slot img{
256 |     width: 50px;
257 |     height: 50px;
258 | 
259 |     position: relative;
260 |     left: 20px;
261 |     top: 25px;
262 | }
263 | 
264 | .slot h2{
265 |     position: absolute;
266 |     left: 120px;
267 |     color: rgb(68, 109, 185);
268 | }
269 | 
270 | 
271 | 
272 | 
273 | 
274 | 
275 | #slot2Name{
276 |     position: relative;
277 |     color:white;
278 |     left: 20px;
279 |     top: 5px;
280 | }
281 | 
282 | #slot3Name{
283 |     position: relative;
284 |     color:white;
285 |     left: 20px;
286 |     top: 5px;
287 | }
288 | 
289 | #slot4Name{
290 |     position: relative;
291 |     color:white;
292 |     left: 20px;
293 |     top: 5px;
294 | }
295 | 
296 | #slot5Name{
297 |     position: relative;
298 |     color:white;
299 |     left: 20px;
300 |     top: 5px;
301 | }
302 | 
303 | 
304 | #genderSlot1{
305 |     position: relative;
306 |     left: 90px;
307 |     top: -60px;
308 | 
309 |     color: rgb(115, 155, 230);
310 | }
311 | 
312 | #genderSlot2{
313 |     position: relative;
314 |     left: 90px;
315 |     top: -60px;
316 | 
317 |     color: rgb(115, 155, 230);
318 | }
319 | 
320 | #genderSlot3{
321 |     position: relative;
322 |     left: 90px;
323 |     top: -60px;
324 | 
325 |     color: rgb(115, 155, 230);
326 | }
327 | 
328 | 
329 | 
330 | 
331 | 
332 | .footer{
333 |     display: none;    
334 | }
335 | 
336 | 
337 | #saveButton{
338 |     position: absolute;
339 |     left: 705px;
340 |     bottom: 40px;
341 | 
342 |     width: 130px;
343 |     height: 30px;
344 | 
345 |     border: none;
346 |     border-radius: 5px;
347 | 
348 |     font-size: 14px;
349 |     font-weight: bold;
350 |     text-transform: uppercase;
351 |     color: rgb(34, 40, 50);
352 | 
353 |     outline: none;
354 | 
355 |     background-color: #82DD61;
356 | 
357 |     transition: .4s;
358 | }
359 | 
360 | #saveButton:hover{
361 |     cursor:pointer;
362 |     transition: .4s;
363 |     box-shadow: 1px -1px 2px 0 rgb(0, 0, 0);
364 | }
365 | 
366 | #saveButton:hover:after{
367 |     transform: rotate(150deg);
368 | }
369 | 
370 | #errorText{
371 |     color: rgb(212, 33, 33);
372 |     margin-top: 50px;
373 |     display: none;
374 | }
375 | 
376 | 
377 | 
378 | 
379 | 
380 | 
381 | 
382 | 
383 | 
384 | 
385 | 
386 | 
387 | 
388 | 
389 | 
390 | 
391 | 
392 | #infoBox{
393 |     width: 600px;
394 |     height: 170px;
395 |     border-radius: 10px;
396 |     position: absolute;
397 |     left: 50px;
398 |     top: 110px;
399 |     background-color: rgb(86, 136, 228);
400 | }
401 | 
402 | #contentAlready h2{
403 |     color: white;
404 |     
405 |     position: absolute;
406 | 
407 |     top: -4px;
408 |     left: 210px;
409 | 
410 |     font-size: 50px;
411 | }
412 | 
413 | #infoBox img{
414 |     width: 80px;
415 |     height: 80px;
416 | 
417 |     position: absolute;
418 |     top: 52px;
419 |     left: 50px;
420 | 
421 | }
422 | 
423 | #infoContent{
424 |     width: 400px;
425 |     height: 100px;
426 |     margin: 25px;
427 | 
428 |     border-radius: 5px;
429 | 
430 |     position: absolute;
431 |     right: 15px;
432 |     top: 10px;
433 |     background-color: whitesmoke;
434 |     transition: .5s;
435 | }
436 | 
437 | #infoContent:hover{
438 |     box-shadow: inset 0 0 0 0.5rem rgb(68, 109, 185);
439 |     transition: .3s;
440 | }
441 | 
442 | 
443 | #infoContent p {
444 |     color: rgb(68, 109, 185);
445 |     padding-left: 10px;
446 | }
447 | 
448 | 
449 | 
450 | 
451 | 
452 | #contentAlready button{
453 |     position: absolute;
454 |     left: 245px;
455 |     top: 300px;
456 | 
457 |     width: 200px;
458 |     height: 50px;
459 | 
460 |     border: none;
461 |     border-radius: 5px;
462 | 
463 |     font-size: 80px;
464 |     color:white;
465 | 
466 |     outline: none;
467 | 
468 |     background-color: #5bcd3e;
469 | 
470 |     transition: .4s;
471 | }
472 | 
473 | #contentAlready button:hover{
474 |     transition: .4s;
475 |  
476 |     background-color: #5bcd3e;
477 |     border-radius: 2rem;
478 | 
479 | }
480 | 
481 | 
482 | 
483 | 
484 | 
485 | #contentCheck h2{
486 |     color: white;
487 | 
488 |     width: 100%;
489 |     text-align: center;
490 |     margin-top: 200px;
491 | 
492 |     font-size: 40px;
493 | }
494 | 
495 | #contentCheck h3{
496 |     color: white;
497 | 
498 |     width: 100%;
499 |     text-align: center;
500 |     margin-top: -50px;
501 | 
502 |     font-size: 30px;
503 | }
504 | 
505 | 
506 | 
507 | 
508 | #circle{
509 | 
510 |     background-color: #5bcd3e;
511 | 
512 |     width: 140px;
513 |     height: 140px;
514 | 
515 |     position: relative;
516 |     left: 270px;
517 |     top: 50px;
518 |     
519 | 
520 |     border-radius: 50%;
521 | 
522 | }
523 | 
524 | 
525 | 
526 | 
527 | #contentSuccess h1{
528 |     color: white;
529 |     font-size: 17px;
530 |     font-weight: 250;
531 |     text-transform: uppercase;
532 | 
533 |     position: relative;
534 |     left: 250px;
535 |     top: 100px
536 | }    
537 | 
538 | 
539 | #contentSuccess h2{
540 |     color: white;
541 |     font-size: 25px;
542 |     font-weight: 550;
543 |     text-transform: uppercase;
544 | 
545 |     position: relative;
546 |     left: 290px;
547 |     top: 200px
548 | }
549 | 
550 | 
551 | #success{
552 |     color: white;
553 |     font-size: 80px;
554 | 
555 |     position: relative;
556 |     left: 30px;
557 |     top: 30px;
558 | }
559 | 
560 | #contentSuccess button{
561 |     width: 200px;
562 |     height: 50px;
563 | 
564 |     border: none;
565 |     border-radius: 20px;
566 | 
567 |     position: relative;
568 |     left: 250px;
569 |     top: 50px;
570 |     
571 |     font-size: 20px;
572 |     color: rgb(68, 109, 185);
573 |     font-weight: 700;
574 |     transition: .3s;
575 |     outline: none;
576 | }
577 | 
578 | #contentSuccess button:hover{
579 |     transition: .3s;
580 |     color: white;
581 |     background-color: #5bcd3e;
582 | 
583 | }
584 | 
585 | 
586 | 


--------------------------------------------------------------------------------