Penambahan tampilan login
This commit is contained in:
parent
444cfd16c5
commit
aba5cebaed
1044
public/assets/css/login_register/style.css
Normal file
1044
public/assets/css/login_register/style.css
Normal file
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 70 KiB |
132
public/assets/js/login_register/app.js
Normal file
132
public/assets/js/login_register/app.js
Normal file
@ -0,0 +1,132 @@
|
||||
/******************************************
|
||||
* ANIMATION BTN SIGN IN & SIGN UP
|
||||
******************************************/
|
||||
const sign_in_btn = document.querySelector("#sign-in-btn");
|
||||
const sign_up_btn = document.querySelector("#sign-up-btn");
|
||||
const container = document.querySelector(".container");
|
||||
|
||||
sign_up_btn.addEventListener("click", () => {
|
||||
container.classList.add("sign-up-mode");
|
||||
});
|
||||
|
||||
sign_in_btn.addEventListener("click", () => {
|
||||
container.classList.remove("sign-up-mode");
|
||||
});
|
||||
/******************************************
|
||||
* END ANIMATION BTN SIGN IN & SIGN UP
|
||||
******************************************/
|
||||
|
||||
|
||||
|
||||
/******************************************
|
||||
* PRELOADER
|
||||
******************************************/
|
||||
setTimeout(function() {
|
||||
$('#preloader').fadeToggle();
|
||||
}, 200);
|
||||
/******************************************
|
||||
* END PRELOADER
|
||||
******************************************/
|
||||
|
||||
|
||||
|
||||
/******************************************
|
||||
* MULTIPLE FORM
|
||||
******************************************/
|
||||
var form_1 = document.querySelector(".form_1");
|
||||
var form_2 = document.querySelector(".form_2");
|
||||
var form_3 = document.querySelector(".form_3");
|
||||
var form_4 = document.querySelector(".form_4");
|
||||
|
||||
|
||||
var form_1_btns = document.querySelector(".form_1_btns");
|
||||
var form_2_btns = document.querySelector(".form_2_btns");
|
||||
var form_3_btns = document.querySelector(".form_3_btns");
|
||||
var form_4_btns = document.querySelector(".form_4_btns");
|
||||
|
||||
|
||||
var form_1_next_btn = document.querySelector(".form_1_btns .btn_next");
|
||||
var form_2_back_btn = document.querySelector(".form_2_btns .btn_back");
|
||||
var form_2_next_btn = document.querySelector(".form_2_btns .btn_next");
|
||||
var form_3_back_btn = document.querySelector(".form_3_btns .btn_back");
|
||||
var form_3_next_btn = document.querySelector(".form_3_btns .btn_next");
|
||||
var form_4_back_btn = document.querySelector(".form_4_btns .btn_back");
|
||||
|
||||
var form_2_progessbar = document.querySelector(".form_2_progessbar");
|
||||
var form_3_progessbar = document.querySelector(".form_3_progessbar");
|
||||
var form_4_progessbar = document.querySelector(".form_4_progessbar");
|
||||
|
||||
var btn_done = document.querySelector(".btn_done");
|
||||
var modal_wrapper = document.querySelector(".modal_wrapper");
|
||||
var shadow = document.querySelector(".shadow");
|
||||
|
||||
form_1_next_btn.addEventListener("click", function() {
|
||||
form_1.style.display = "none";
|
||||
form_2.style.display = "block";
|
||||
|
||||
form_1_btns.style.display = "none";
|
||||
form_2_btns.style.display = "flex";
|
||||
|
||||
form_2_progessbar.classList.add("active");
|
||||
});
|
||||
|
||||
form_2_back_btn.addEventListener("click", function() {
|
||||
form_1.style.display = "block";
|
||||
form_2.style.display = "none";
|
||||
|
||||
form_1_btns.style.display = "flex";
|
||||
form_2_btns.style.display = "none";
|
||||
|
||||
form_2_progessbar.classList.remove("active");
|
||||
});
|
||||
|
||||
form_2_next_btn.addEventListener("click", function() {
|
||||
form_2.style.display = "none";
|
||||
form_3.style.display = "block";
|
||||
|
||||
form_3_btns.style.display = "flex";
|
||||
form_2_btns.style.display = "none";
|
||||
|
||||
form_3_progessbar.classList.add("active");
|
||||
});
|
||||
|
||||
form_3_next_btn.addEventListener("click", function() {
|
||||
form_3.style.display = "none";
|
||||
form_4.style.display = "block";
|
||||
|
||||
form_4_btns.style.display = "flex";
|
||||
form_3_btns.style.display = "none";
|
||||
|
||||
form_4_progessbar.classList.add("active");
|
||||
});
|
||||
|
||||
form_3_back_btn.addEventListener("click", function() {
|
||||
form_2.style.display = "block";
|
||||
form_3.style.display = "none";
|
||||
|
||||
form_3_btns.style.display = "none";
|
||||
form_2_btns.style.display = "flex";
|
||||
|
||||
form_3_progessbar.classList.remove("active");
|
||||
});
|
||||
|
||||
form_4_back_btn.addEventListener("click", function() {
|
||||
form_3.style.display = "block";
|
||||
form_4.style.display = "none";
|
||||
|
||||
form_4_btns.style.display = "none";
|
||||
form_3_btns.style.display = "flex";
|
||||
|
||||
form_4_progessbar.classList.remove("active");
|
||||
});
|
||||
|
||||
btn_done.addEventListener("click", function() {
|
||||
modal_wrapper.classList.add("active");
|
||||
})
|
||||
|
||||
shadow.addEventListener("click", function() {
|
||||
modal_wrapper.classList.remove("active");
|
||||
})
|
||||
/******************************************
|
||||
* MULTIPLE FORM END
|
||||
******************************************/
|
||||
4
public/assets/js/login_register/jquery.js
vendored
Normal file
4
public/assets/js/login_register/jquery.js
vendored
Normal file
File diff suppressed because one or more lines are too long
110
public/assets/js/login_register/main.js
Normal file
110
public/assets/js/login_register/main.js
Normal file
@ -0,0 +1,110 @@
|
||||
(function ($) {
|
||||
"use strict";
|
||||
|
||||
// Spinner
|
||||
var spinner = function () {
|
||||
setTimeout(function () {
|
||||
if ($('#spinner').length > 0) {
|
||||
$('#spinner').removeClass('show');
|
||||
}
|
||||
}, 1);
|
||||
};
|
||||
spinner();
|
||||
|
||||
|
||||
// Initiate the wowjs
|
||||
new WOW().init();
|
||||
|
||||
|
||||
// Sticky Navbar
|
||||
$(window).scroll(function () {
|
||||
if ($(this).scrollTop() > 300) {
|
||||
$('.sticky-top').addClass('shadow-sm').css('top', '0px');
|
||||
} else {
|
||||
$('.sticky-top').removeClass('shadow-sm').css('top', '-100px');
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
// Back to top button
|
||||
$(window).scroll(function () {
|
||||
if ($(this).scrollTop() > 300) {
|
||||
$('.back-to-top').fadeIn('slow');
|
||||
} else {
|
||||
$('.back-to-top').fadeOut('slow');
|
||||
}
|
||||
});
|
||||
$('.back-to-top').click(function () {
|
||||
$('html, body').animate({scrollTop: 0}, 1500, 'easeInOutExpo');
|
||||
return false;
|
||||
});
|
||||
|
||||
|
||||
// Facts counter
|
||||
$('[data-toggle="counter-up"]').counterUp({
|
||||
delay: 10,
|
||||
time: 2000
|
||||
});
|
||||
|
||||
|
||||
// Roadmap carousel
|
||||
$(".roadmap-carousel").owlCarousel({
|
||||
autoplay: true,
|
||||
smartSpeed: 1000,
|
||||
margin: 25,
|
||||
loop: true,
|
||||
dots: false,
|
||||
nav: true,
|
||||
navText : [
|
||||
'<i class="bi bi-chevron-left"></i>',
|
||||
'<i class="bi bi-chevron-right"></i>'
|
||||
],
|
||||
responsive: {
|
||||
0:{
|
||||
items:1
|
||||
},
|
||||
576:{
|
||||
items:2
|
||||
},
|
||||
768:{
|
||||
items:3
|
||||
},
|
||||
992:{
|
||||
items:4
|
||||
},
|
||||
1200:{
|
||||
items:5
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
// Testimonials carousel
|
||||
$(".testimonial-carousel").owlCarousel({
|
||||
autoplay: true,
|
||||
smartSpeed: 1000,
|
||||
margin: 25,
|
||||
loop: true,
|
||||
center: true,
|
||||
dots: false,
|
||||
nav: true,
|
||||
navText : [
|
||||
'<i class="bi bi-chevron-left"></i>',
|
||||
'<i class="bi bi-chevron-right"></i>'
|
||||
],
|
||||
responsive: {
|
||||
0:{
|
||||
items:1
|
||||
},
|
||||
768:{
|
||||
items:2
|
||||
},
|
||||
992:{
|
||||
items:3
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
})(jQuery);
|
||||
|
||||
315
public/assets/js/login_register/script.js
Normal file
315
public/assets/js/login_register/script.js
Normal file
@ -0,0 +1,315 @@
|
||||
/******************************************
|
||||
* DROP AND DRAG IMAGE
|
||||
******************************************/
|
||||
const dropArea = document.querySelector('.drop-area');
|
||||
const inputFile = document.getElementById('input-file');
|
||||
|
||||
dropArea.addEventListener('click', function() {
|
||||
inputFile.click()
|
||||
})
|
||||
|
||||
inputFile.addEventListener('change', function() {
|
||||
const file = this.files[0];
|
||||
|
||||
if (file.type.startsWith('image/')) {
|
||||
if (file.size < 2000000) {
|
||||
create_thumbnail(file);
|
||||
} else {
|
||||
alert('Image size must be less than 2MB');
|
||||
}
|
||||
} else {
|
||||
alert('Must be image');
|
||||
}
|
||||
})
|
||||
|
||||
|
||||
dropArea.addEventListener('dragover', function(e) {
|
||||
e.preventDefault();
|
||||
this.style.borderStyle = 'solid';
|
||||
|
||||
const h3 = this.querySelector('h3');
|
||||
h3.textContent = 'Release here to upload image';
|
||||
})
|
||||
|
||||
|
||||
|
||||
dropArea.addEventListener('drop', function(e) {
|
||||
e.preventDefault();
|
||||
|
||||
inputFile.files = e.dataTransfer.files;
|
||||
const file = e.dataTransfer.files[0];
|
||||
|
||||
if (file.type.startsWith('image/')) {
|
||||
if (file.size < 2000000) {
|
||||
create_thumbnail(file);
|
||||
} else {
|
||||
alert('Image size must be less than 2MB');
|
||||
}
|
||||
} else {
|
||||
alert('Must be image');
|
||||
}
|
||||
})
|
||||
|
||||
|
||||
|
||||
const command = ['dragleave', 'dragend']
|
||||
|
||||
command.forEach(item => {
|
||||
dropArea.addEventListener(item, function() {
|
||||
this.style.borderStyle = 'dashed';
|
||||
|
||||
const h3 = this.querySelector('h3');
|
||||
h3.textContent = 'Drag and drop or click here to select image';
|
||||
})
|
||||
})
|
||||
|
||||
|
||||
function create_thumbnail(file) {
|
||||
const img = document.querySelectorAll('.thumbnail');
|
||||
const imgName = document.querySelectorAll('.img-name');
|
||||
img.forEach(item => item.remove());
|
||||
imgName.forEach(item => item.remove());
|
||||
|
||||
const reader = new FileReader();
|
||||
reader.onload = () => {
|
||||
const url = reader.result;
|
||||
const img = document.createElement('img');
|
||||
img.src = url;
|
||||
img.className = 'thumbnail'
|
||||
const span = document.createElement('span');
|
||||
span.className = 'img-name';
|
||||
span.textContent = file.name;
|
||||
dropArea.appendChild(img);
|
||||
dropArea.appendChild(span);
|
||||
dropArea.style.borderColor = 'transparent';
|
||||
}
|
||||
reader.readAsDataURL(file);
|
||||
}
|
||||
/******************************************
|
||||
* END DROP AND DRAG IMAGE
|
||||
******************************************/
|
||||
|
||||
|
||||
|
||||
/******************************************
|
||||
* DROPDOOWN INPUT
|
||||
******************************************/
|
||||
const optionMenu = document.querySelector(".select-menu"),
|
||||
selectBtn = optionMenu.querySelector(".select-btn"),
|
||||
options = optionMenu.querySelectorAll(".option"),
|
||||
sBtn_text = optionMenu.querySelector(".sBtn-text");
|
||||
|
||||
selectBtn.addEventListener("click", () =>
|
||||
optionMenu.classList.toggle("active")
|
||||
);
|
||||
|
||||
options.forEach((option) => {
|
||||
option.addEventListener("click", () => {
|
||||
let selectedOption = option.querySelector(".option-text").innerText;
|
||||
sBtn_text.innerText = selectedOption;
|
||||
|
||||
optionMenu.classList.remove("active");
|
||||
});
|
||||
});
|
||||
|
||||
/******************************************
|
||||
* DROPDOOWN INPUT END
|
||||
******************************************/
|
||||
|
||||
|
||||
|
||||
|
||||
/******************************************
|
||||
* PROGRESS BAR MULTIPLE FORM
|
||||
******************************************/
|
||||
"use strict";
|
||||
//jQuery time
|
||||
var current_fs, next_fs, previous_fs; //fieldsets
|
||||
var left, opacity, scale; //fieldset properties which we will animate
|
||||
var animating; //flag to prevent quick multi-click glitches
|
||||
|
||||
$(".next").click(function() {
|
||||
if (animating) return false;
|
||||
animating = true;
|
||||
|
||||
current_fs = $(this).parent();
|
||||
next_fs = $(this).parent().next();
|
||||
|
||||
//activate next step on progressbar using the index of next_fs
|
||||
$("#progressbar li").eq($("fieldset").index(next_fs)).addClass("active");
|
||||
|
||||
//show the next fieldset
|
||||
next_fs.show();
|
||||
//hide the current fieldset with style
|
||||
current_fs.animate({
|
||||
opacity: 0
|
||||
}, {
|
||||
step: function(now, mx) {
|
||||
//as the opacity of current_fs reduces to 0 - stored in "now"
|
||||
//1. scale current_fs down to 80%
|
||||
scale = 0 - (0 - now) * 0;
|
||||
//2. bring next_fs from the right(50%)
|
||||
left = (now * 50) + "%";
|
||||
//3. increase opacity of next_fs to 1 as it moves in
|
||||
opacity = 1 - now;
|
||||
current_fs.css({
|
||||
'transform': 'scale(' + scale + ')'
|
||||
});
|
||||
next_fs.css({
|
||||
'left': left,
|
||||
'opacity': opacity
|
||||
});
|
||||
},
|
||||
duration: 500,
|
||||
complete: function() {
|
||||
current_fs.hide();
|
||||
animating = false;
|
||||
},
|
||||
//this comes from the custom easing plugin
|
||||
easing: 'easeOutQuint'
|
||||
});
|
||||
});
|
||||
|
||||
$(".previous").click(function() {
|
||||
if (animating) return false;
|
||||
animating = true;
|
||||
|
||||
current_fs = $(this).parent();
|
||||
previous_fs = $(this).parent().prev();
|
||||
|
||||
//de-activate current step on progressbar
|
||||
$("#progressbar li").eq($("fieldset").index(current_fs)).removeClass("active");
|
||||
|
||||
//show the previous fieldset
|
||||
previous_fs.show();
|
||||
//hide the current fieldset with style
|
||||
current_fs.animate({
|
||||
opacity: 0
|
||||
}, {
|
||||
step: function(now, mx) {
|
||||
//as the opacity of current_fs reduces to 0 - stored in "now"
|
||||
//1. scale previous_fs from 80% to 100%
|
||||
scale = 0.8 + (1 - now) * 0.2;
|
||||
//2. take current_fs to the right(50%) - from 0%
|
||||
left = ((1 - now) * 50) + "%";
|
||||
//3. increase opacity of previous_fs to 1 as it moves in
|
||||
opacity = 1 - now;
|
||||
current_fs.css({
|
||||
'left': left
|
||||
});
|
||||
previous_fs.css({
|
||||
'transform': 'scale(' + scale + ')',
|
||||
'opacity': opacity
|
||||
});
|
||||
},
|
||||
duration: 500,
|
||||
complete: function() {
|
||||
current_fs.hide();
|
||||
animating = false;
|
||||
},
|
||||
//this comes from the custom easing plugin
|
||||
easing: 'easeOutQuint'
|
||||
});
|
||||
});
|
||||
|
||||
$(".submit").click(function() {
|
||||
return false;
|
||||
})
|
||||
|
||||
$(document).ready(function() {
|
||||
$('select').material_select();
|
||||
});
|
||||
|
||||
var counter = 0;
|
||||
var orderCounter = 1;
|
||||
|
||||
function newKeyword() {
|
||||
|
||||
$(".keywords").append(
|
||||
'<div class=\"row rowKey animated zoomIn2\">\r\n <div class=\"input-field col s6\" style=\"\r\n width: 42%;\r\n\">\r\n \r\n <input id=\"icon_prefix1' +
|
||||
counter + '\" type=\"text\" class=\"validate\">\r\n <label for=\"icon_prefix1' + counter +
|
||||
'\" class=\"\">Keyword<\/label>\r\n <\/div>\r\n <div class=\"row\">\r\n <!--<div style=\" top: 0.8rem;\" class=\"col s2\"> Density :<\/div> -->\r\n <div class=\"input-field col s2\" style=\" top: 0.7rem;\"> Density<\/div>\r\n <div class=\"input-field col s2\">\r\n <input id=\"icon_telephone1' +
|
||||
counter + '\" type=\"number\" class=\"validate\">\r\n <label for=\"icon_telephone1' + counter +
|
||||
'\" class=\"\">Min<\/label>\r\n <\/div>\r\n <div class=\"input-field col s2\">\r\n <input id=\"max1' +
|
||||
counter + '\" type=\"number\" class=\"validate\">\r\n <label for=\"max1' + counter +
|
||||
'\" class=\"\">Max<\/label>\r\n <\/div>\r\n <i class=\"material-icons prefix remove active\" style=\"\r\n margin-top: 1.7rem; cursor: pointer;color: #607D8B;\r\n\">close<\/i><\/div>\r\n <\/div>'
|
||||
);
|
||||
counter++;
|
||||
};
|
||||
|
||||
$(".promo-example").hover(
|
||||
function() {
|
||||
$(this).addClass("hovered");
|
||||
},
|
||||
function() {
|
||||
$(this).removeClass("hovered");
|
||||
}
|
||||
);
|
||||
|
||||
|
||||
|
||||
$(".promo-example").click(
|
||||
function() {
|
||||
$(".promo-example").removeClass("selected")
|
||||
$(this).addClass("selected");
|
||||
}
|
||||
);
|
||||
|
||||
$(".promo-example2").hover(
|
||||
function() {
|
||||
$(this).addClass("hovered");
|
||||
},
|
||||
function() {
|
||||
$(this).removeClass("hovered");
|
||||
}
|
||||
);
|
||||
|
||||
|
||||
|
||||
$(".promo-example2").click(
|
||||
function() {
|
||||
$(".promo-example").removeClass("selected")
|
||||
$(this).addClass("selected");
|
||||
}
|
||||
);
|
||||
|
||||
$(".keywords").delegate(".remove", "click", function() {
|
||||
$(this).closest('.rowKey').remove();
|
||||
});
|
||||
|
||||
|
||||
function newOrder() {
|
||||
var orderNumber = $(".card").length;
|
||||
//var orderNumber = $(".card").index(this);
|
||||
$(".creation").prepend(
|
||||
'<div class=\"card animated zoomIn\">\r\n\t\t<h2 class=\"fs-title\" style=\" padding-top: 25px;\r\n padding-left: 25px;\r\n text-align: left;\r\n width: 100%;\">Product description n\u00B0' +
|
||||
orderNumber +
|
||||
'<\/h2>\r\n<div class=\"row\">\r\n <div class=\"input-field col s12\">\r\n <input id=\"first_name' +
|
||||
orderNumber + '\" type=\"text\" class=\"validate\">\r\n <label for=\"first_name' +
|
||||
orderNumber +
|
||||
'\">Order name<\/label> \r\n <\/div> \r\n <div class=\"row col s12\" style=\"color:grey;font-size: 10px;text-align: left;margin-top: -10px;margin-left: 0px\">Name your order, you can also use a reference Id from your system to find it easily <\/div>\r\n <\/div>\r\n <div class=\"row\">\r\n <div class=\"input-field col s12\">\r\n <input id=\"first_name2' +
|
||||
orderNumber + '\" type=\"text\" class=\"validate\">\r\n <label for=\"first_name2' +
|
||||
orderNumber +
|
||||
'\">URL (optional)<\/label> \r\n <\/div> \r\n \r\n <div class=\"row col s12\" style=\"color:grey;font-size: 10px;text-align: left;margin-top: -10px;margin-left: 0px\">You can add an url to give more informations to the writer<\/div> <\/div> \r\n \r\n <div class=\"row\">\r\n <div class=\"input-field col s12\">\r\n <input id=\"first_name2' +
|
||||
orderNumber + '\" type=\"text\" class=\"validate\">\r\n <label for=\"first_name2' +
|
||||
orderNumber +
|
||||
'\">Reference id (optional)<\/label> \r\n <\/div> \r\n \r\n <div class=\"row col s12\" style=\"color:grey;font-size: 10px;text-align: left;margin-top: -10px;margin-left: 0px\">You can add a reference id to match the order with your system<\/div> <\/div> \r\n <div class=\"keywords\"> \r\n<!-- <div class=\"row\">\r\n <div class=\"input-field col s6\">\r\n <i class=\"material-icons prefix\">label<\/i>\r\n <input id=\"icon_prefix' +
|
||||
orderNumber + '\" type=\"text\" class=\"validate\">\r\n <label for=\"icon_prefix' +
|
||||
orderNumber +
|
||||
'\">Keyword<\/label>\r\n <\/div>\r\n <div class=\"row\">\r\n <div style=\"margin-top:2rem\" class=\"col s2\"> Density<\/div> \r\n <div class=\"input-field col s2\"> Density<\/div>\r\n <div class=\"input-field col s2\">\r\n <input id=\"icon_telephone' +
|
||||
orderNumber + '\" type=\"number\" class=\"validate\">\r\n <label for=\"icon_telephone' +
|
||||
orderNumber +
|
||||
'\">Min<\/label>\r\n <\/div>\r\n <div class=\"input-field col s2\">\r\n <input id=\"max' +
|
||||
orderNumber + '\" type=\"number\" class=\"validate\">\r\n <label for=\"max' + orderNumber +
|
||||
'\">Max<\/label>\r\n <\/div>\r\n <\/div>\r\n <\/div>-->\r\n \r\n\r\n <\/div>\r\n <div><a class=\"waves-effect waves-light btn\" onClick=\"newKeyword()\"><i class=\"material-icons left\">add<\/i>Add a Keyword<\/a><\/div> \r\n <\/div>\r\n <\/div>'
|
||||
);
|
||||
orderCounter++;
|
||||
counter++;
|
||||
};
|
||||
|
||||
$("fieldset").delegate(".removeOrder", "click", function() {
|
||||
$(this).closest('.card').remove();
|
||||
});
|
||||
/******************************************
|
||||
* END PROGRESS BAR MULTIPLE FORM
|
||||
******************************************/
|
||||
390
resources/views/auth/sign-in_sign-up.blade.php
Normal file
390
resources/views/auth/sign-in_sign-up.blade.php
Normal file
@ -0,0 +1,390 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>SIGN IN DAN SIGN UP | REKBER</title>
|
||||
<!-- icon font awesome -->
|
||||
<script src="https://kit.fontawesome.com/64d58efce2.js" crossorigin="anonymous"></script>
|
||||
<!-- css -->
|
||||
<link rel="stylesheet" href="assets/css/login_register/style.css" />
|
||||
<!-- ionicons -->
|
||||
<script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
|
||||
<!-- Boxicons -->
|
||||
<script src="https://unpkg.com/boxicons@2.1.4/dist/boxicons.js"></script>
|
||||
<link href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css' rel='stylesheet'>
|
||||
</head>
|
||||
<body>
|
||||
<!-- ======= PRELOADER ======= -->
|
||||
<div id="preloader">
|
||||
<div id="status">
|
||||
<div class="preloader" aria-busy="true" aria-label="Loading, please wait." role="progressbar">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- ======= END PRELOADER ======= -->
|
||||
|
||||
<!-- ======= MODAL ======= -->
|
||||
<div class="modal_wrapper">
|
||||
<div class="shadow"></div>
|
||||
<div class="success_wrap">
|
||||
<span class="modal_icon"><ion-icon name="checkmark-sharp"></ion-icon></span>
|
||||
<p>You have successfully completed the process.</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- ======= MODAL ======= -->
|
||||
|
||||
<div class="container">
|
||||
<div class="forms-container">
|
||||
<div class="signin-signup">
|
||||
|
||||
<!-- ======= SIGN IN FORM ======= -->
|
||||
<form action="#" class="sign-in-form">
|
||||
<h2 class="title">Sign In</h2>
|
||||
<p>
|
||||
Selamat datang kembali, silakan isi form login di bawah ini untuk masuk ke akun anda.
|
||||
</p>
|
||||
<div style="width: 100%; display: flex; align-items: center;">
|
||||
<div class="input-field-signin-flex">
|
||||
<i class="fa fa-phone" aria-hidden="true"></i>
|
||||
<input type="text" class="telp-input-signin" maxlength="13" oninput="this.value = this.value.replace(/[^0-9]/g, '').substring(0, 13);" placeholder="Nomer Telepon">
|
||||
</div>
|
||||
<input type="submit" value="Kirim OTP" class="btn-otp solid" />
|
||||
|
||||
</div>
|
||||
<div class="input-field">
|
||||
<i class="fa fa-mobile" aria-hidden="true"></i>
|
||||
<input type="text" class="otp-input" maxlength="6" oninput="this.value = this.value.replace(/[^0-9]/g, '').substring(0, 6);" placeholder="Kode OTP">
|
||||
</div>
|
||||
<input type="submit" value="Login" class="btn solid" id="login-btn" />
|
||||
</form>
|
||||
<!-- ======= END SIGN IN FORM ======= -->
|
||||
|
||||
<!-- ======= SIGN UP FORM ======= -->
|
||||
<form action="/action_page.php" class="sign-up-form" id="msform">
|
||||
<h2 class="title">Sign Up</h2>
|
||||
<p style="width: 90%">
|
||||
Selamat datang kembali, silakan isi form login di bawah ini untuk masuk ke akun anda.
|
||||
</p>
|
||||
|
||||
<<!-- ======= PROGRESS BAR ======= -->
|
||||
<div class="header">
|
||||
<ul>
|
||||
<li class="active form_1_progessbar">
|
||||
<div>
|
||||
<p>1</p>
|
||||
</div>
|
||||
</li>
|
||||
<li class="form_2_progessbar">
|
||||
<div>
|
||||
<p>2</p>
|
||||
</div>
|
||||
</li>
|
||||
<li class="form_3_progessbar">
|
||||
<div>
|
||||
<p>3</p>
|
||||
</div>
|
||||
</li>
|
||||
<li class="form_4_progessbar">
|
||||
<div>
|
||||
<p>4</p>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<!-- ======= END PROGRESS BAR ======= -->
|
||||
|
||||
<!-- ======= FORM MULTIPLE ======= -->
|
||||
<div class="form_wrap">
|
||||
|
||||
<!-- ======= FORM PERSONAL DATA ======= -->
|
||||
<div class="form_1 data_info">
|
||||
<form>
|
||||
<div style="display: flex;">
|
||||
<div class="input-field-signup-flex">
|
||||
<i class="fas fa-user"></i>
|
||||
<input type="text" placeholder="Nama Depan" class="first-name-input" />
|
||||
</div>
|
||||
<div class="input-field-signup-flex" style="margin-left: 3%">
|
||||
<i class="fas fa-user"></i>
|
||||
<input type="text" placeholder="Nama Belakang" class="last-name-input" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="input-field up">
|
||||
<i class="fa fa-envelope" aria-hidden="true"></i>
|
||||
<input type="email" placeholder="Email" class="email-input" />
|
||||
</div>
|
||||
|
||||
<div class="input-field up">
|
||||
<i class="fa fa-phone" aria-hidden="true"></i>
|
||||
<input type="text" class="telp-input-signup" maxlength="13" oninput="this.value = this.value.replace(/[^0-9]/g, '').substring(0, 13);" placeholder="Nomer Telepon">
|
||||
</div>
|
||||
<div style="display: flex;">
|
||||
<div class="input-field-signup-flex up gender-select-menu" style="width: 190%">
|
||||
<div class="gender-select-input">
|
||||
<span class="gender-select">Jenis Kelamin</span>
|
||||
<i class="bx bx-chevron-down" style="padding: 0"></i>
|
||||
</div>
|
||||
<ul class="gender-options">
|
||||
<li class="gender-option">
|
||||
<span class="gender-option-text">Laki-laki</span>
|
||||
</li>
|
||||
<li class="gender-option">
|
||||
<span class="gender-option-text">Perempuan</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="input-field-signup-flex up" style="margin-left: 3%">
|
||||
<i class="fa fa-calendar" aria-hidden="true"></i>
|
||||
<input type="date" placeholder="Tanggal Lahir" />
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<!-- ======= END FORM PERSONAL DATA ======= -->
|
||||
|
||||
<!-- ======= FORM ADDRESS ======= -->
|
||||
<div class="form_2 data_info" style="display: none;">
|
||||
<form>
|
||||
<div class="input-field select-menu" style="width: 190%">
|
||||
<div class="select-btn">
|
||||
<span class="sBtn-text">Select Provinsi</span>
|
||||
<i class="bx bx-chevron-down"></i>
|
||||
</div>
|
||||
<ul class="options">
|
||||
<li class="option">
|
||||
<span class="option-text">Nanggroe Aceh Darussalam</span>
|
||||
</li>
|
||||
<li class="option">
|
||||
<span class="option-text">Sumatera Utara</span>
|
||||
</li>
|
||||
<li class="option">
|
||||
<span class="option-text">Sumatera Selatan</span>
|
||||
</li>
|
||||
<li class="option">
|
||||
<span class="option-text">Sumatera Barat</span>
|
||||
</li>
|
||||
<li class="option">
|
||||
<span class="option-text">Bengkulu</span>
|
||||
</li>
|
||||
<li class="option">
|
||||
<span class="option-text">Riau</span>
|
||||
</li>
|
||||
<li class="option">
|
||||
<span class="option-text">Kepulauan Riau</span>
|
||||
</li>
|
||||
<li class="option">
|
||||
<span class="option-text">Jambi</span>
|
||||
</li>
|
||||
<li class="option">
|
||||
<span class="option-text">Lampung</span>
|
||||
</li>
|
||||
<li class="option">
|
||||
<span class="option-text">Bangka Belitung</span>
|
||||
</li>
|
||||
<li class="option">
|
||||
<span class="option-text">Kalimantan Barat</span>
|
||||
</li>
|
||||
<li class="option">
|
||||
<span class="option-text">Kalimantan Timur</span>
|
||||
</li>
|
||||
<li class="option">
|
||||
<span class="option-text">Kalimantan Selatan</span>
|
||||
</li>
|
||||
<li class="option">
|
||||
<span class="option-text">Kalimantan Tengah</span>
|
||||
</li>
|
||||
<li class="option">
|
||||
<span class="option-text">Kalimantan Utara</span>
|
||||
</li>
|
||||
<li class="option">
|
||||
<span class="option-text">Banten</span>
|
||||
</li>
|
||||
<li class="option">
|
||||
<span class="option-text">DKI Jakarta</span>
|
||||
</li>
|
||||
<li class="option">
|
||||
<span class="option-text">Jawa Barat</span>
|
||||
</li>
|
||||
<li class="option">
|
||||
<span class="option-text">Jawa Tengah</span>
|
||||
</li>
|
||||
<li class="option">
|
||||
<span class="option-text">Daerah Istimewa Yogyakarta</span>
|
||||
</li>
|
||||
<li class="option">
|
||||
<span class="option-text">Jawa Timur</span>
|
||||
</li>
|
||||
<li class="option">
|
||||
<span class="option-text">Bali</span>
|
||||
</li>
|
||||
<li class="option">
|
||||
<span class="option-text">Nusa Tenggara Timur</span>
|
||||
</li>
|
||||
<li class="option">
|
||||
<span class="option-text">Nusa Tenggara Barat</span>
|
||||
</li>
|
||||
<li class="option">
|
||||
<span class="option-text">Gorontalo</span>
|
||||
</li>
|
||||
<li class="option">
|
||||
<span class="option-text">Sulawesi Barat</span>
|
||||
</li>
|
||||
<li class="option">
|
||||
<span class="option-text">Sulawesi Tengah</span>
|
||||
</li>
|
||||
<li class="option">
|
||||
<span class="option-text">Sulawesi Utara</span>
|
||||
</li>
|
||||
<li class="option">
|
||||
<span class="option-text">Sulawesi Tenggara</span>
|
||||
</li>
|
||||
<li class="option">
|
||||
<span class="option-text">Sulawesi Selatan</span>
|
||||
</li>
|
||||
<li class="option">
|
||||
<span class="option-text">Maluku Utara</span>
|
||||
</li>
|
||||
<li class="option">
|
||||
<span class="option-text">Maluku</span>
|
||||
</li>
|
||||
<li class="option">
|
||||
<span class="option-text">Papua Barat</span>
|
||||
</li>
|
||||
<li class="option">
|
||||
<span class="option-text">Papua</span>
|
||||
</li>
|
||||
<li class="option">
|
||||
<span class="option-text">Papua Tengah</span>
|
||||
</li>
|
||||
<li class="option">
|
||||
<span class="option-text">Papua Pegunungan</span>
|
||||
</li>
|
||||
<li class="option">
|
||||
<span class="option-text">Papua Selatan</span>
|
||||
</li>
|
||||
<li class="option">
|
||||
<span class="option-text">Papua Barat Daya</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="input-field select-menu" style="width: 190%">
|
||||
<div class="select-btn">
|
||||
<span class="sBtn-text">Select Kabupaten/Kota</span>
|
||||
<i class="bx bx-chevron-down"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="input-field select-menu" style="width: 190%">
|
||||
<div class="select-btn">
|
||||
<span class="sBtn-text">Select Kecamatan</span>
|
||||
<i class="bx bx-chevron-down"></i>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<!-- ======= END FORM ADDRESS ======= -->
|
||||
|
||||
<!-- ======= FORM DROP & DRAG IMAGE ======= -->
|
||||
<div class="form_3 data_info" style="display: none;">
|
||||
<form>
|
||||
<div class="container-img">
|
||||
<div class="drop-area box box-h">
|
||||
<div class="img">
|
||||
<img src="img/uploadimg.svg" alt="">
|
||||
</div>
|
||||
<h5 class="drop-area-title">Tarik atau Seret gambar mu di sini</h5>
|
||||
<p class="drop-area-text">type jpg, png atau jpeg</p>
|
||||
<input type="file" accept="image/*" id="input-file" hidden>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<!-- ======= FORM DROP & DRAG IMAGE ======= -->
|
||||
|
||||
<!-- ======= FORM PIN ======= -->
|
||||
<div class="form_4 data_info" style="display: none;">
|
||||
<form>
|
||||
<div style="display: flex">
|
||||
<div class="input-field-signup-flex">
|
||||
<i class="fa fa-unlock-alt" aria-hidden="true"></i>
|
||||
<input type="text" class="pin-input" maxlength="6" oninput="this.value = this.value.replace(/[^0-9]/g, '').substring(0, 6);" placeholder="PIN">
|
||||
</div>
|
||||
|
||||
<div class="input-field-signup-flex" style="margin-left: 3%">
|
||||
<i class="fa fa-unlock-alt" aria-hidden="true"></i>
|
||||
<input type="text" class="konfir-pin-input" maxlength="6" oninput="this.value = this.value.replace(/[^0-9]/g, '').substring(0, 6);" placeholder="Konfirmasi PIN">
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<!-- ======= END FORM PIN ======= -->
|
||||
|
||||
<!-- ======= BTN FORM NEXT & BACK ======= -->
|
||||
<div class="btns_wrap">
|
||||
<div class="common_btns form_1_btns">
|
||||
<button type="button" class="btn_next">Next <span class="icon"><ion-icon
|
||||
name="arrow-forward-sharp"></ion-icon></span></button>
|
||||
</div>
|
||||
<div class="common_btns form_2_btns" style="display: none;">
|
||||
<button type="button" class="btn_back"><span class="icon"><ion-icon
|
||||
name="arrow-back-sharp"></ion-icon></span>Back</button>
|
||||
<button type="button" class="btn_next">Next <span class="icon"><ion-icon
|
||||
name="arrow-forward-sharp"></ion-icon></span></button>
|
||||
</div>
|
||||
<div class="common_btns form_3_btns" style="display: none;">
|
||||
<button type="button" class="btn_back"><span class="icon"><ion-icon
|
||||
name="arrow-back-sharp"></ion-icon></span>Back</button>
|
||||
<button type="button" class="btn_next">Next <span class="icon"><ion-icon
|
||||
name="arrow-forward-sharp"></ion-icon></span></button>
|
||||
</div>
|
||||
<div class="common_btns form_4_btns" style="display: none;">
|
||||
<button type="button" class="btn_back"><span class="icon"><ion-icon
|
||||
name="arrow-back-sharp"></ion-icon></span>Back</button>
|
||||
<button type="button" class="btn_done">Sign Up</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- ======= BTN FORM NEXT & BACK ======= -->
|
||||
|
||||
</div>
|
||||
<!-- ======= END FORM MIULTIPLE ======= -->
|
||||
</form>
|
||||
<!-- ======= END FORM SIGN UP ======= -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="panels-container">
|
||||
<div class="panel left-panel">
|
||||
<div class="content">
|
||||
<h3>Belum memiliki akun?</h3>
|
||||
<p>
|
||||
Daftarkan akun anda sekarang untuk nikmatin Aplikasi RekBer. Daftar di sini.
|
||||
</p>
|
||||
<button class="btn transparent" id="sign-up-btn">
|
||||
Sign up
|
||||
</button>
|
||||
<p><a href="/">kembali</a></p>
|
||||
</div>
|
||||
<img src="assets/img/login_register/Payment Information-pana.svg" class="image" alt="" />
|
||||
</div>
|
||||
<div class="panel right-panel">
|
||||
<div class="content">
|
||||
<h3>Sudah memiliki akun?</h3>
|
||||
<p>
|
||||
Silakan masuk ke dalam RekBar menggunakan akun yang telah Anda buat sebelumnya di sini.
|
||||
</p>
|
||||
<button class="btn transparent" id="sign-in-btn">
|
||||
Sign In
|
||||
</button>
|
||||
<p><a href="/">kembali</a></p>
|
||||
</div>
|
||||
<img src="assets/img/login_register/Payment Information-pana.svg" class="image" alt="" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script src="../assets/js/login_register/jquery.js"></script>
|
||||
<script src="../assets/js/login_register/main.js"></script>
|
||||
<script src="../assets/js/login_register/app.js"></script>
|
||||
<script src="../assets/js/login_register/script.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@ -57,4 +57,9 @@ Route::get('/next_detail_refund',function() {
|
||||
]);
|
||||
});
|
||||
Route::post('/refund-accept/{id}', 'ReturnItemController@acceptRefund')->name('refund/detail-refund/refund.accept');
|
||||
Route::get('/refund-decline/{id}', 'ReturnItemController@declineRefund')->name('refund/detail-refund/refund.decline');
|
||||
Route::get('/refund-decline/{id}', 'ReturnItemController@declineRefund')->name('refund/detail-refund/refund.decline');
|
||||
|
||||
|
||||
Route::get('/sign-in_sign-up', function () {
|
||||
return view('auth.sign-in_sign-up');
|
||||
});
|
||||
Loading…
Reference in New Issue
Block a user