Skip to content

Commit d025757

Browse files
author
yolandahp
committed
capeq
1 parent 8f34d22 commit d025757

File tree

4 files changed

+121
-25
lines changed

4 files changed

+121
-25
lines changed

‎public/images/bg5.jpg

-6.75 KB
Loading

‎public/images/bg6.jpg

-75.6 KB
Binary file not shown.

‎resources/views/master.blade.php

+1-1
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@
2020
@yield('body')
2121

2222

23-
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
23+
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
2424
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
2525
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
2626
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.0.2/anime.min.js"></script>

‎resources/views/room/showroom.blade.php

+120-24
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
background-color: #fff;
66
height: 100vh;
77
font-family: 'Roboto+Condensed', sans-serif;
8-
background: url('/images/bg4.jpg');
8+
background: url('/images/bg5.jpg');
99
background-size: cover;
1010
background-repeat: no-repeat;
1111
background-position: center center;
@@ -22,15 +22,15 @@
2222
bottom: 0;
2323
height: 40vh;
2424
width: 100vw;
25-
background-color: #DD0A00;
25+
background-color: #EF4A4E;
2626
}
2727
2828
.kotak-soal-2 {
2929
position: absolute;
3030
bottom: 0;
3131
height: 34vh;
3232
width: 100vw;
33-
background-color: #65171D;
33+
background-color: #C93E43;
3434
margin-bottom: 3vh;
3535
}
3636
@@ -39,7 +39,7 @@
3939
bottom: 0;
4040
height: 28vh;
4141
width: 94vw;
42-
background-color: #FFFFFF;
42+
background-color: #EAE0D4;
4343
margin-bottom: 3vh;
4444
left: 50%;
4545
margin-left: -47vw;
@@ -52,47 +52,143 @@
5252
}
5353
5454
.kotak-soal-3 .pilihan-jawaban {
55-
padding: 10px 300px;
55+
padding: 0px 300px;
56+
text-align: center;
57+
width: 100%;
58+
display: inline-table;
59+
}
60+
61+
.pilihan-jawaban .jawaban{
62+
width: 50%;
5663
text-align: center;
64+
display: inline-block;
65+
height: 50px;
66+
line-height: 50px;
67+
margin-bottom: 15px;
68+
}
69+
70+
.jawaban p{
71+
background-color: #EAE0D4;
72+
border: 2px solid rgba(139, 139, 139, .3);
73+
border-radius: 25px;
74+
margin: 3px 0px;
75+
-webkit-touch-callout: none;
76+
-webkit-user-select: none;
77+
-moz-user-select: none;
78+
-ms-user-select: none;
79+
user-select: none;
80+
-webkit-tap-highlight-color: transparent;
81+
transition: all .2s;
82+
83+
transition: transform .3s ease-in-out;
5784
}
5885
86+
.jawaban.clicked p{
87+
background-color: #FFF7A5;
88+
}
5989
90+
#kotak-time-bar {
91+
position: absolute;
92+
top: 0;
93+
height: 5vh;
94+
width: 50vw;
95+
background-color: #EAE0D4;
96+
left: 50%;
97+
margin-left: -25vw;
98+
border-radius: 5px;
99+
}
100+
101+
#kotak-time-bar div {
102+
height: 100%;
103+
text-align: right;
104+
padding: 0 10px;
105+
line-height: 5vh;
106+
width: 0;
107+
background-color: #EF4A4E;
108+
box-sizing: border-box;
109+
}
110+
60111
</style>
61112
@endsection
62113

63114
@section('body')
64115
<div class="main">
65116
<div class="container text-center">
66117
</div>
67-
68-
<div class="kotak-soal-1">
118+
<div id="kotak-time-bar">
119+
<div></div>
120+
</div>
69121

70-
<div class="kotak-soal-2">
71-
<div class="kotak-soal-3">
72-
<div class="soal">
73-
<h5><b>Siapakah nama saya?</b></h5>
74-
</div>
122+
<div class="kotak-soal-1">
75123

76-
<div class="pilihan-jawaban">
77-
<div class="jawaban">
78-
Dandy
79-
</div>
80-
<div class="jawaban">
81-
Randi
82-
</div>
83-
<div class="jawaban">
84-
Titut
124+
<div class="kotak-soal-2">
125+
<div class="kotak-soal-3">
126+
127+
<form method="" action="" id="jawab-soal">
128+
@csrf
129+
130+
<div class="soal">
131+
<h5><b>Siapakah nama saya?</b></h5>
85132
</div>
86-
<div class="jawaban">
87-
Syavira
133+
134+
<div class="pilihan-jawaban">
135+
<div class="jawaban">
136+
<p>Dandy</p>
137+
</div>
138+
<div class="jawaban">
139+
<p>Randi</p>
140+
</div>
141+
<div class="jawaban">
142+
<p>Titut</p>
143+
</div>
144+
<div class="jawaban">
145+
<p>Syavira</p>
146+
</div>
88147
</div>
148+
149+
</form>
150+
89151
</div>
90152
</div>
91153
</div>
92-
</div>
154+
155+
93156
</div>
94157

95158
@endsection
96159

97160
@section('js')
161+
<script>
162+
$(function(){
163+
var flag = 0;
164+
165+
$('.jawaban').click(function(){
166+
if(!flag){
167+
$(this).addClass('clicked');
168+
169+
flag = 1;
170+
}
171+
172+
})
173+
});
174+
175+
function progress(timeleft, timetotal, $element) {
176+
var progressBarWidth = timeleft * $element.width() / timetotal;
177+
178+
$('#kotak-time-bar div').animate(
179+
{ width: progressBarWidth + 'px'},
180+
timeleft == timetotal ? 0 : 1000, 'linear').html(timeleft);
181+
if(timeleft > 0) {
182+
183+
setTimeout(function() {
184+
progress(timeleft - 1, timetotal, $element);
185+
}, 1000);
186+
187+
}
188+
};
189+
190+
progress(15, 15, $('#kotak-time-bar'));
191+
192+
</script>
193+
98194
@endsection

0 commit comments

Comments
 (0)