fix input select and add camera ktp & e-kyc
This commit is contained in:
parent
aba5cebaed
commit
8ffde277fa
30
app/Http/Controllers/IndonesiaController.php
Normal file
30
app/Http/Controllers/IndonesiaController.php
Normal file
@ -0,0 +1,30 @@
|
||||
<?php
|
||||
|
||||
namespace App\Http\Controllers;
|
||||
|
||||
use App\Models\Distric;
|
||||
use App\Models\District;
|
||||
use App\Models\Provinces;
|
||||
use App\Models\Regency;
|
||||
use Illuminate\Http\Request;
|
||||
|
||||
class IndonesiaController extends Controller
|
||||
{
|
||||
public function provinsi(){
|
||||
$data = Provinces::where('name', 'LIKE', '%'.request('q').'%')->paginate(10);
|
||||
|
||||
return response()->json($data);
|
||||
}
|
||||
|
||||
public function regency($id){
|
||||
$data = Regency::where('province_id', $id)->where('name', 'LIKE', '%'.request('q').'%')->paginate(10);
|
||||
|
||||
return response()->json($data);
|
||||
}
|
||||
|
||||
public function district($id){
|
||||
$data = District::where('regency_id', $id)->where('name', 'LIKE', '%'.request('q').'%')->paginate(10);
|
||||
|
||||
return response()->json($data);
|
||||
}
|
||||
}
|
||||
12
app/Models/District.php
Normal file
12
app/Models/District.php
Normal file
@ -0,0 +1,12 @@
|
||||
<?php
|
||||
|
||||
namespace App\Models;
|
||||
|
||||
use Illuminate\Database\Eloquent\Factories\HasFactory;
|
||||
use Illuminate\Database\Eloquent\Model;
|
||||
|
||||
class District extends Model
|
||||
{
|
||||
use HasFactory;
|
||||
protected $table = 'districts';
|
||||
}
|
||||
13
app/Models/Provinces.php
Normal file
13
app/Models/Provinces.php
Normal file
@ -0,0 +1,13 @@
|
||||
<?php
|
||||
|
||||
namespace App\Models;
|
||||
|
||||
use Illuminate\Database\Eloquent\Factories\HasFactory;
|
||||
use Illuminate\Database\Eloquent\Model;
|
||||
|
||||
class Provinces extends Model
|
||||
{
|
||||
use HasFactory;
|
||||
|
||||
protected $table = 'provinces';
|
||||
}
|
||||
13
app/Models/Regency.php
Normal file
13
app/Models/Regency.php
Normal file
@ -0,0 +1,13 @@
|
||||
<?php
|
||||
|
||||
namespace App\Models;
|
||||
|
||||
use Illuminate\Database\Eloquent\Factories\HasFactory;
|
||||
use Illuminate\Database\Eloquent\Model;
|
||||
|
||||
class Regency extends Model
|
||||
{
|
||||
use HasFactory;
|
||||
|
||||
protected $table = 'regencies';
|
||||
}
|
||||
93
composer.lock
generated
93
composer.lock
generated
@ -972,16 +972,16 @@
|
||||
},
|
||||
{
|
||||
"name": "laravel/framework",
|
||||
"version": "v10.21.1",
|
||||
"version": "v10.22.0",
|
||||
"source": {
|
||||
"type": "git",
|
||||
"url": "https://github.com/laravel/framework.git",
|
||||
"reference": "ae93199f5349fd8a02364424249aad2a90185a95"
|
||||
"reference": "9234388a895206d4e1df37342b61adc67e5c5d31"
|
||||
},
|
||||
"dist": {
|
||||
"type": "zip",
|
||||
"url": "https://api.github.com/repos/laravel/framework/zipball/ae93199f5349fd8a02364424249aad2a90185a95",
|
||||
"reference": "ae93199f5349fd8a02364424249aad2a90185a95",
|
||||
"url": "https://api.github.com/repos/laravel/framework/zipball/9234388a895206d4e1df37342b61adc67e5c5d31",
|
||||
"reference": "9234388a895206d4e1df37342b61adc67e5c5d31",
|
||||
"shasum": ""
|
||||
},
|
||||
"require": {
|
||||
@ -1168,7 +1168,7 @@
|
||||
"issues": "https://github.com/laravel/framework/issues",
|
||||
"source": "https://github.com/laravel/framework"
|
||||
},
|
||||
"time": "2023-09-04T14:34:36+00:00"
|
||||
"time": "2023-09-05T13:20:01+00:00"
|
||||
},
|
||||
{
|
||||
"name": "laravel/prompts",
|
||||
@ -1603,16 +1603,16 @@
|
||||
},
|
||||
{
|
||||
"name": "league/flysystem",
|
||||
"version": "3.15.1",
|
||||
"version": "3.16.0",
|
||||
"source": {
|
||||
"type": "git",
|
||||
"url": "https://github.com/thephpleague/flysystem.git",
|
||||
"reference": "a141d430414fcb8bf797a18716b09f759a385bed"
|
||||
"reference": "4fdf372ca6b63c6e281b1c01a624349ccb757729"
|
||||
},
|
||||
"dist": {
|
||||
"type": "zip",
|
||||
"url": "https://api.github.com/repos/thephpleague/flysystem/zipball/a141d430414fcb8bf797a18716b09f759a385bed",
|
||||
"reference": "a141d430414fcb8bf797a18716b09f759a385bed",
|
||||
"url": "https://api.github.com/repos/thephpleague/flysystem/zipball/4fdf372ca6b63c6e281b1c01a624349ccb757729",
|
||||
"reference": "4fdf372ca6b63c6e281b1c01a624349ccb757729",
|
||||
"shasum": ""
|
||||
},
|
||||
"require": {
|
||||
@ -1621,6 +1621,8 @@
|
||||
"php": "^8.0.2"
|
||||
},
|
||||
"conflict": {
|
||||
"async-aws/core": "<1.19.0",
|
||||
"async-aws/s3": "<1.14.0",
|
||||
"aws/aws-sdk-php": "3.209.31 || 3.210.0",
|
||||
"guzzlehttp/guzzle": "<7.0",
|
||||
"guzzlehttp/ringphp": "<1.1.1",
|
||||
@ -1640,7 +1642,7 @@
|
||||
"microsoft/azure-storage-blob": "^1.1",
|
||||
"phpseclib/phpseclib": "^3.0.14",
|
||||
"phpstan/phpstan": "^0.12.26",
|
||||
"phpunit/phpunit": "^9.5.11",
|
||||
"phpunit/phpunit": "^9.5.11|^10.0",
|
||||
"sabre/dav": "^4.3.1"
|
||||
},
|
||||
"type": "library",
|
||||
@ -1675,7 +1677,7 @@
|
||||
],
|
||||
"support": {
|
||||
"issues": "https://github.com/thephpleague/flysystem/issues",
|
||||
"source": "https://github.com/thephpleague/flysystem/tree/3.15.1"
|
||||
"source": "https://github.com/thephpleague/flysystem/tree/3.16.0"
|
||||
},
|
||||
"funding": [
|
||||
{
|
||||
@ -1687,20 +1689,20 @@
|
||||
"type": "github"
|
||||
}
|
||||
],
|
||||
"time": "2023-05-04T09:04:26+00:00"
|
||||
"time": "2023-09-07T19:22:17+00:00"
|
||||
},
|
||||
{
|
||||
"name": "league/flysystem-local",
|
||||
"version": "3.15.0",
|
||||
"version": "3.16.0",
|
||||
"source": {
|
||||
"type": "git",
|
||||
"url": "https://github.com/thephpleague/flysystem-local.git",
|
||||
"reference": "543f64c397fefdf9cfeac443ffb6beff602796b3"
|
||||
"reference": "ec7383f25642e6fd4bb0c9554fc2311245391781"
|
||||
},
|
||||
"dist": {
|
||||
"type": "zip",
|
||||
"url": "https://api.github.com/repos/thephpleague/flysystem-local/zipball/543f64c397fefdf9cfeac443ffb6beff602796b3",
|
||||
"reference": "543f64c397fefdf9cfeac443ffb6beff602796b3",
|
||||
"url": "https://api.github.com/repos/thephpleague/flysystem-local/zipball/ec7383f25642e6fd4bb0c9554fc2311245391781",
|
||||
"reference": "ec7383f25642e6fd4bb0c9554fc2311245391781",
|
||||
"shasum": ""
|
||||
},
|
||||
"require": {
|
||||
@ -1735,7 +1737,7 @@
|
||||
],
|
||||
"support": {
|
||||
"issues": "https://github.com/thephpleague/flysystem-local/issues",
|
||||
"source": "https://github.com/thephpleague/flysystem-local/tree/3.15.0"
|
||||
"source": "https://github.com/thephpleague/flysystem-local/tree/3.16.0"
|
||||
},
|
||||
"funding": [
|
||||
{
|
||||
@ -1747,7 +1749,7 @@
|
||||
"type": "github"
|
||||
}
|
||||
],
|
||||
"time": "2023-05-02T20:02:14+00:00"
|
||||
"time": "2023-08-30T10:23:59+00:00"
|
||||
},
|
||||
{
|
||||
"name": "league/mime-type-detection",
|
||||
@ -1908,16 +1910,16 @@
|
||||
},
|
||||
{
|
||||
"name": "nesbot/carbon",
|
||||
"version": "2.69.0",
|
||||
"version": "2.70.0",
|
||||
"source": {
|
||||
"type": "git",
|
||||
"url": "https://github.com/briannesbitt/Carbon.git",
|
||||
"reference": "4308217830e4ca445583a37d1bf4aff4153fa81c"
|
||||
"reference": "d3298b38ea8612e5f77d38d1a99438e42f70341d"
|
||||
},
|
||||
"dist": {
|
||||
"type": "zip",
|
||||
"url": "https://api.github.com/repos/briannesbitt/Carbon/zipball/4308217830e4ca445583a37d1bf4aff4153fa81c",
|
||||
"reference": "4308217830e4ca445583a37d1bf4aff4153fa81c",
|
||||
"url": "https://api.github.com/repos/briannesbitt/Carbon/zipball/d3298b38ea8612e5f77d38d1a99438e42f70341d",
|
||||
"reference": "d3298b38ea8612e5f77d38d1a99438e42f70341d",
|
||||
"shasum": ""
|
||||
},
|
||||
"require": {
|
||||
@ -2010,7 +2012,7 @@
|
||||
"type": "tidelift"
|
||||
}
|
||||
],
|
||||
"time": "2023-08-03T09:00:52+00:00"
|
||||
"time": "2023-09-07T16:43:50+00:00"
|
||||
},
|
||||
{
|
||||
"name": "nette/schema",
|
||||
@ -5805,16 +5807,16 @@
|
||||
},
|
||||
{
|
||||
"name": "laravel/pint",
|
||||
"version": "v1.12.0",
|
||||
"version": "v1.13.1",
|
||||
"source": {
|
||||
"type": "git",
|
||||
"url": "https://github.com/laravel/pint.git",
|
||||
"reference": "08bcf51e520a5e5aea458fc600ac4869f6934a66"
|
||||
"reference": "22f204242d68095b3ba7dab5d3ef0240454a4652"
|
||||
},
|
||||
"dist": {
|
||||
"type": "zip",
|
||||
"url": "https://api.github.com/repos/laravel/pint/zipball/08bcf51e520a5e5aea458fc600ac4869f6934a66",
|
||||
"reference": "08bcf51e520a5e5aea458fc600ac4869f6934a66",
|
||||
"url": "https://api.github.com/repos/laravel/pint/zipball/22f204242d68095b3ba7dab5d3ef0240454a4652",
|
||||
"reference": "22f204242d68095b3ba7dab5d3ef0240454a4652",
|
||||
"shasum": ""
|
||||
},
|
||||
"require": {
|
||||
@ -5867,20 +5869,20 @@
|
||||
"issues": "https://github.com/laravel/pint/issues",
|
||||
"source": "https://github.com/laravel/pint"
|
||||
},
|
||||
"time": "2023-08-30T07:53:32+00:00"
|
||||
"time": "2023-09-06T11:03:34+00:00"
|
||||
},
|
||||
{
|
||||
"name": "laravel/sail",
|
||||
"version": "v1.24.0",
|
||||
"version": "v1.24.1",
|
||||
"source": {
|
||||
"type": "git",
|
||||
"url": "https://github.com/laravel/sail.git",
|
||||
"reference": "c8a621d7b69ab2e568d97a20f837ca733a224006"
|
||||
"reference": "3a373bb2845623aed2017c672dc61c84ae974890"
|
||||
},
|
||||
"dist": {
|
||||
"type": "zip",
|
||||
"url": "https://api.github.com/repos/laravel/sail/zipball/c8a621d7b69ab2e568d97a20f837ca733a224006",
|
||||
"reference": "c8a621d7b69ab2e568d97a20f837ca733a224006",
|
||||
"url": "https://api.github.com/repos/laravel/sail/zipball/3a373bb2845623aed2017c672dc61c84ae974890",
|
||||
"reference": "3a373bb2845623aed2017c672dc61c84ae974890",
|
||||
"shasum": ""
|
||||
},
|
||||
"require": {
|
||||
@ -5932,7 +5934,7 @@
|
||||
"issues": "https://github.com/laravel/sail/issues",
|
||||
"source": "https://github.com/laravel/sail"
|
||||
},
|
||||
"time": "2023-08-27T14:26:11+00:00"
|
||||
"time": "2023-09-01T14:05:17+00:00"
|
||||
},
|
||||
{
|
||||
"name": "mockery/mockery",
|
||||
@ -6605,16 +6607,16 @@
|
||||
},
|
||||
{
|
||||
"name": "phpunit/phpunit",
|
||||
"version": "10.3.2",
|
||||
"version": "10.3.3",
|
||||
"source": {
|
||||
"type": "git",
|
||||
"url": "https://github.com/sebastianbergmann/phpunit.git",
|
||||
"reference": "0dafb1175c366dd274eaa9a625e914451506bcd1"
|
||||
"reference": "241ed4dd0db1c096984e62d414c4e1ac8d5dbff4"
|
||||
},
|
||||
"dist": {
|
||||
"type": "zip",
|
||||
"url": "https://api.github.com/repos/sebastianbergmann/phpunit/zipball/0dafb1175c366dd274eaa9a625e914451506bcd1",
|
||||
"reference": "0dafb1175c366dd274eaa9a625e914451506bcd1",
|
||||
"url": "https://api.github.com/repos/sebastianbergmann/phpunit/zipball/241ed4dd0db1c096984e62d414c4e1ac8d5dbff4",
|
||||
"reference": "241ed4dd0db1c096984e62d414c4e1ac8d5dbff4",
|
||||
"shasum": ""
|
||||
},
|
||||
"require": {
|
||||
@ -6686,7 +6688,7 @@
|
||||
"support": {
|
||||
"issues": "https://github.com/sebastianbergmann/phpunit/issues",
|
||||
"security": "https://github.com/sebastianbergmann/phpunit/security/policy",
|
||||
"source": "https://github.com/sebastianbergmann/phpunit/tree/10.3.2"
|
||||
"source": "https://github.com/sebastianbergmann/phpunit/tree/10.3.3"
|
||||
},
|
||||
"funding": [
|
||||
{
|
||||
@ -6702,7 +6704,7 @@
|
||||
"type": "tidelift"
|
||||
}
|
||||
],
|
||||
"time": "2023-08-15T05:34:23+00:00"
|
||||
"time": "2023-09-05T04:34:51+00:00"
|
||||
},
|
||||
{
|
||||
"name": "sebastian/cli-parser",
|
||||
@ -7139,16 +7141,16 @@
|
||||
},
|
||||
{
|
||||
"name": "sebastian/exporter",
|
||||
"version": "5.0.0",
|
||||
"version": "5.0.1",
|
||||
"source": {
|
||||
"type": "git",
|
||||
"url": "https://github.com/sebastianbergmann/exporter.git",
|
||||
"reference": "f3ec4bf931c0b31e5b413f5b4fc970a7d03338c0"
|
||||
"reference": "32ff03d078fed1279c4ec9a407d08c5e9febb480"
|
||||
},
|
||||
"dist": {
|
||||
"type": "zip",
|
||||
"url": "https://api.github.com/repos/sebastianbergmann/exporter/zipball/f3ec4bf931c0b31e5b413f5b4fc970a7d03338c0",
|
||||
"reference": "f3ec4bf931c0b31e5b413f5b4fc970a7d03338c0",
|
||||
"url": "https://api.github.com/repos/sebastianbergmann/exporter/zipball/32ff03d078fed1279c4ec9a407d08c5e9febb480",
|
||||
"reference": "32ff03d078fed1279c4ec9a407d08c5e9febb480",
|
||||
"shasum": ""
|
||||
},
|
||||
"require": {
|
||||
@ -7204,7 +7206,8 @@
|
||||
],
|
||||
"support": {
|
||||
"issues": "https://github.com/sebastianbergmann/exporter/issues",
|
||||
"source": "https://github.com/sebastianbergmann/exporter/tree/5.0.0"
|
||||
"security": "https://github.com/sebastianbergmann/exporter/security/policy",
|
||||
"source": "https://github.com/sebastianbergmann/exporter/tree/5.0.1"
|
||||
},
|
||||
"funding": [
|
||||
{
|
||||
@ -7212,7 +7215,7 @@
|
||||
"type": "github"
|
||||
}
|
||||
],
|
||||
"time": "2023-02-03T07:06:49+00:00"
|
||||
"time": "2023-09-08T04:46:58+00:00"
|
||||
},
|
||||
{
|
||||
"name": "sebastian/global-state",
|
||||
|
||||
@ -21,6 +21,11 @@ input {
|
||||
font-family: "Poppins", sans-serif;
|
||||
}
|
||||
|
||||
input[type="text"] {
|
||||
border: none;
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
.container {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
@ -164,6 +169,7 @@ form p {
|
||||
color: #aaa;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.error {
|
||||
display: none;
|
||||
}
|
||||
@ -200,7 +206,8 @@ form p {
|
||||
transform: translateY(-0.252m);
|
||||
}
|
||||
|
||||
.btn-otp {
|
||||
.btn-otp,
|
||||
.btn-foto {
|
||||
width: fit-content;
|
||||
height: fit-content;
|
||||
margin-left: 2%;
|
||||
@ -490,7 +497,7 @@ form p {
|
||||
}
|
||||
}
|
||||
|
||||
//MULTIPLE PROGGRESS BAR
|
||||
/* // MULTIPLE PROGGRESS BAR */
|
||||
.wrapper {
|
||||
width: fit-content;
|
||||
max-width: 100%;
|
||||
@ -557,10 +564,6 @@ form p {
|
||||
background: var(--primary);
|
||||
}
|
||||
|
||||
.form_wrap {
|
||||
margin-bottom: 35px;
|
||||
}
|
||||
|
||||
.form_wrap h2 {
|
||||
color: var(--header-clr);
|
||||
text-align: start;
|
||||
@ -617,8 +620,8 @@ form p {
|
||||
}
|
||||
|
||||
.btns_wrap .common_btns.form_3_btns {
|
||||
width: 125%;
|
||||
margin-top: 7%;
|
||||
width: 60%;
|
||||
margin-top: 2%;
|
||||
}
|
||||
|
||||
.btns_wrap .common_btns button {
|
||||
@ -666,14 +669,16 @@ form p {
|
||||
.btns_wrap .common_btns button.btn_next:hover,
|
||||
.btns_wrap .common_btns button.btn_done:hover {
|
||||
background: var(--next-btn-hover);
|
||||
box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
|
||||
box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px,
|
||||
rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
|
||||
-webkit-transform: translateY(-0.22em);
|
||||
transform: translateY(-0.252m);
|
||||
}
|
||||
|
||||
.btns_wrap .common_btns button.btn_back:hover {
|
||||
background: var(--back-btn-hover);
|
||||
box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
|
||||
box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px,
|
||||
rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
|
||||
-webkit-transform: translateY(-0.22em);
|
||||
transform: translateY(-0.252m);
|
||||
}
|
||||
@ -741,6 +746,45 @@ form p {
|
||||
/******************************************
|
||||
/* END DROPDOWN INPUT
|
||||
==================================================*/
|
||||
.select2-container .select2-selection--single {
|
||||
border: none;
|
||||
background: none;
|
||||
outline: none;
|
||||
box-shadow: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.select2-container .select2-selection--single:focus {
|
||||
border: none;
|
||||
}
|
||||
|
||||
.select2-container .select2-selection--single .select2-selection__arrow {
|
||||
border: none;
|
||||
background: none;
|
||||
}
|
||||
|
||||
.select2-container--default.select2-container--open .select2-selection--single {
|
||||
border: none;
|
||||
}
|
||||
|
||||
.select2-results {
|
||||
border-bottom: 1px solid #aaa;
|
||||
}
|
||||
|
||||
.select2-results__option {
|
||||
padding: 10px;
|
||||
color: #333;
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
.select2-container--default
|
||||
.select2-results
|
||||
> .select2-results__options
|
||||
.select2-results__option--highlighted {
|
||||
background-color: #900c3e !important;
|
||||
color: #fff !important;
|
||||
}
|
||||
|
||||
.gender-select-menu,
|
||||
.select-menu {
|
||||
height: 100%;
|
||||
@ -820,225 +864,75 @@ form p {
|
||||
==================================================*/
|
||||
|
||||
/******************************************
|
||||
/* DROP IMAGE
|
||||
/* SLIDER
|
||||
==================================================*/
|
||||
.container-image {
|
||||
padding: 28px;
|
||||
border-radius: 25px;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.drop-area {
|
||||
width: 125%;
|
||||
height: 300px;
|
||||
.slider-container {
|
||||
position: relative;
|
||||
max-width: 60%;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: white;
|
||||
padding: 20px;
|
||||
border-radius: 1.5rem;
|
||||
text-align: center;
|
||||
color: #999;
|
||||
cursor: pointer;
|
||||
border: 2px dashed #999;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.drop-area-title {
|
||||
font-size: 1.2rem;
|
||||
font-weight: 600;
|
||||
margin-bottom: 16px;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.drop-area-text {
|
||||
font-size: 0.7rem;
|
||||
}
|
||||
|
||||
.thumbnail,
|
||||
.img-name {
|
||||
position: absolute;
|
||||
.slider {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
transition: transform 0.5s ease-in-out;
|
||||
}
|
||||
|
||||
.slide {
|
||||
flex: 0 0 100%;
|
||||
}
|
||||
|
||||
.slider h3 {
|
||||
margin: 1rem 0;
|
||||
}
|
||||
|
||||
.slide img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 5;
|
||||
height: auto;
|
||||
}
|
||||
.thumbnail {
|
||||
height: 100%;
|
||||
|
||||
.dots {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
object-fit: cover;
|
||||
z-index: 6;
|
||||
width: fit-content;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.drop-area:hover .img-name {
|
||||
opacity: 1;
|
||||
.dot {
|
||||
display: inline-block;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
margin: 0 5px;
|
||||
background-color: #bbb;
|
||||
border-radius: 50%;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.clickable-button {
|
||||
padding: 10px 20px;
|
||||
margin-top: 3%;
|
||||
background-color: #007bff;
|
||||
color: #fff;
|
||||
.prev,
|
||||
.next {
|
||||
font-size: 1rem;
|
||||
background: none;
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
width: 8rem;
|
||||
transition: background-color 0.3s ease-in-out;
|
||||
margin: 0 1rem;
|
||||
}
|
||||
|
||||
.clickable-button:hover {
|
||||
background-color: #0056b3;
|
||||
.dot.active {
|
||||
background-color: #900c3e;
|
||||
}
|
||||
|
||||
#webcamKtp {
|
||||
height: 30vh;
|
||||
border-radius: 1rem;
|
||||
}
|
||||
#webcamEkyc {
|
||||
height: 30vh;
|
||||
border-radius: 1rem;
|
||||
}
|
||||
/******************************************
|
||||
/* END DROP IMAGE
|
||||
==================================================*/
|
||||
|
||||
/******************************************
|
||||
/* preloader
|
||||
==================================================*/
|
||||
#preloader {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-color: #fff;
|
||||
z-index: 10000;
|
||||
}
|
||||
|
||||
#status,
|
||||
.preloader {
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
#status {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
margin: -50px 0 0 -50px;
|
||||
}
|
||||
|
||||
.preloader {
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
margin-top: -20px;
|
||||
margin-left: -20px;
|
||||
}
|
||||
|
||||
.preloader:before {
|
||||
content: "";
|
||||
display: block;
|
||||
position: absolute;
|
||||
left: -1px;
|
||||
top: -1px;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
-webkit-animation: rotation 1s linear infinite;
|
||||
animation: rotation 1s linear infinite;
|
||||
border: 2px solid #900c3f;
|
||||
border-top: 2px solid transparent;
|
||||
border-radius: 100%;
|
||||
}
|
||||
|
||||
.preloader > .icon {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
height: 25px;
|
||||
width: 10.6px;
|
||||
margin-top: -12.5px;
|
||||
margin-left: -5.3px;
|
||||
-webkit-animation: wink 1s ease-in-out infinite alternate;
|
||||
animation: wink 1s ease-in-out infinite alternate;
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 768px) {
|
||||
.preloader {
|
||||
height: 60px;
|
||||
width: 60px;
|
||||
margin-top: -30px;
|
||||
margin-left: -30px;
|
||||
}
|
||||
.preloader:before {
|
||||
left: -2px;
|
||||
top: -2px;
|
||||
border-width: 2px;
|
||||
}
|
||||
.preloader > .icon {
|
||||
height: 37.5px;
|
||||
width: 15.9px;
|
||||
margin-top: -18.75px;
|
||||
margin-left: -7.95px;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 1200px) {
|
||||
.preloader {
|
||||
height: 60px;
|
||||
width: 60px;
|
||||
margin-top: -30px;
|
||||
margin-left: -30px;
|
||||
}
|
||||
.preloader > .icon {
|
||||
height: 50px;
|
||||
width: 21.2px;
|
||||
margin-top: -25px;
|
||||
margin-left: -10.6px;
|
||||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes rotation {
|
||||
from {
|
||||
-webkit-transform: rotate(0);
|
||||
transform: rotate(0);
|
||||
}
|
||||
to {
|
||||
-webkit-transform: rotate(359deg);
|
||||
transform: rotate(359deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes rotation {
|
||||
from {
|
||||
-webkit-transform: rotate(0);
|
||||
transform: rotate(0);
|
||||
}
|
||||
to {
|
||||
-webkit-transform: rotate(359deg);
|
||||
transform: rotate(359deg);
|
||||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes wink {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes wink {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
/******************************************
|
||||
/* preloader
|
||||
/* END SLIDER
|
||||
==================================================*/
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
/******************************************
|
||||
* ANIMATION BTN SIGN IN & SIGN UP
|
||||
******************************************/
|
||||
* 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");
|
||||
@ -13,120 +13,323 @@ sign_in_btn.addEventListener("click", () => {
|
||||
container.classList.remove("sign-up-mode");
|
||||
});
|
||||
/******************************************
|
||||
* END ANIMATION BTN SIGN IN & SIGN UP
|
||||
******************************************/
|
||||
* END ANIMATION BTN SIGN IN & SIGN UP
|
||||
******************************************/
|
||||
|
||||
|
||||
|
||||
/******************************************
|
||||
* PRELOADER
|
||||
******************************************/
|
||||
setTimeout(function() {
|
||||
* PRELOADER
|
||||
******************************************/
|
||||
setTimeout(function () {
|
||||
$('#preloader').fadeToggle();
|
||||
}, 200);
|
||||
}, 200);
|
||||
/******************************************
|
||||
* END PRELOADER
|
||||
******************************************/
|
||||
* END PRELOADER
|
||||
******************************************/
|
||||
|
||||
|
||||
|
||||
/******************************************
|
||||
* MULTIPLE FORM
|
||||
******************************************/
|
||||
* 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_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_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_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 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");
|
||||
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_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_1_btns.style.display = "none";
|
||||
form_2_btns.style.display = "flex";
|
||||
|
||||
form_2_progessbar.classList.add("active");
|
||||
});
|
||||
form_2_progessbar.classList.add("active");
|
||||
});
|
||||
|
||||
form_2_back_btn.addEventListener("click", function() {
|
||||
form_1.style.display = "block";
|
||||
form_2.style.display = "none";
|
||||
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_1_btns.style.display = "flex";
|
||||
form_2_btns.style.display = "none";
|
||||
|
||||
form_2_progessbar.classList.remove("active");
|
||||
});
|
||||
form_2_progessbar.classList.remove("active");
|
||||
});
|
||||
|
||||
form_2_next_btn.addEventListener("click", function() {
|
||||
form_2.style.display = "none";
|
||||
form_3.style.display = "block";
|
||||
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_btns.style.display = "flex";
|
||||
form_2_btns.style.display = "none";
|
||||
|
||||
form_3_progessbar.classList.add("active");
|
||||
});
|
||||
form_3_progessbar.classList.add("active");
|
||||
});
|
||||
|
||||
form_3_next_btn.addEventListener("click", function() {
|
||||
form_3.style.display = "none";
|
||||
form_4.style.display = "block";
|
||||
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_btns.style.display = "flex";
|
||||
form_3_btns.style.display = "none";
|
||||
|
||||
form_4_progessbar.classList.add("active");
|
||||
});
|
||||
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_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_btns.style.display = "none";
|
||||
form_2_btns.style.display = "flex";
|
||||
|
||||
form_3_progessbar.classList.remove("active");
|
||||
});
|
||||
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_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_btns.style.display = "none";
|
||||
form_3_btns.style.display = "flex";
|
||||
|
||||
form_4_progessbar.classList.remove("active");
|
||||
});
|
||||
form_4_progessbar.classList.remove("active");
|
||||
});
|
||||
|
||||
btn_done.addEventListener("click", function() {
|
||||
modal_wrapper.classList.add("active");
|
||||
})
|
||||
btn_done.addEventListener("click", function () {
|
||||
modal_wrapper.classList.add("active");
|
||||
})
|
||||
|
||||
shadow.addEventListener("click", function() {
|
||||
modal_wrapper.classList.remove("active");
|
||||
})
|
||||
shadow.addEventListener("click", function () {
|
||||
modal_wrapper.classList.remove("active");
|
||||
})
|
||||
/******************************************
|
||||
* MULTIPLE FORM END
|
||||
******************************************/
|
||||
* MULTIPLE FORM END
|
||||
******************************************/
|
||||
|
||||
|
||||
/******************************************
|
||||
* KTP & E-KYC CAMERA
|
||||
******************************************/
|
||||
document.addEventListener("DOMContentLoaded", function () {
|
||||
const videoElementKtp = document.getElementById("webcamKtp");
|
||||
const captureButtonKtp = document.getElementById("captureButtonKtp");
|
||||
const fotoInputKtp = document.getElementById("fotoKtp");
|
||||
|
||||
const videoElementEkyc = document.getElementById("webcamEkyc");
|
||||
const captureButtonEkyc = document.getElementById("captureButtonEkyc");
|
||||
const fotoInputEkyc = document.getElementById("fotoEkyc");
|
||||
|
||||
navigator.mediaDevices
|
||||
.getUserMedia({
|
||||
video: true
|
||||
})
|
||||
.then(function (stream) {
|
||||
videoElementKtp.srcObject = stream;
|
||||
})
|
||||
.catch(function (error) {
|
||||
console.error("Gagal mengakses kamera: ", error);
|
||||
});
|
||||
|
||||
captureButtonKtp.addEventListener("click", function () {
|
||||
const canvas = document.createElement("canvas");
|
||||
const context = canvas.getContext("2d");
|
||||
canvas.width = videoElementKtp.videoWidth;
|
||||
canvas.height = videoElementKtp.videoHeight;
|
||||
context.drawImage(videoElementKtp, 0, 0, canvas.width, canvas.height);
|
||||
const fotoDataUrl = canvas.toDataURL("image/jpeg");
|
||||
|
||||
// Set nilai foto input hidden dengan data URL
|
||||
fotoInputKtp.value = fotoDataUrl;
|
||||
|
||||
// Tampilkan preview foto
|
||||
const fotoPreview = document.getElementById("foto-preview");
|
||||
fotoPreview.innerHTML = '<img src="' + fotoDataUrl + '" alt="Foto">';
|
||||
|
||||
// // Hentikan akses kamera setelah mengambil foto
|
||||
// stream.getTracks().forEach((track) => track.stop());
|
||||
});
|
||||
|
||||
navigator.mediaDevices
|
||||
.getUserMedia({
|
||||
video: true
|
||||
})
|
||||
.then(function (stream) {
|
||||
videoElementEkyc.srcObject = stream;
|
||||
})
|
||||
.catch(function (error) {
|
||||
console.error("Gagal mengakses kamera: ", error);
|
||||
});
|
||||
|
||||
captureButtonEkyc.addEventListener("click", function () {
|
||||
const canvas = document.createElement("canvas");
|
||||
const context = canvas.getContext("2d");
|
||||
canvas.width = videoElementEkyc.videoWidth;
|
||||
canvas.height = videoElementEkyc.videoHeight;
|
||||
context.drawImage(videoElementEkyc, 0, 0, canvas.width, canvas.height);
|
||||
const fotoDataUrl = canvas.toDataURL("image/jpeg");
|
||||
|
||||
// Set nilai foto input hidden dengan data URL
|
||||
fotoInputEkyc.value = fotoDataUrl;
|
||||
|
||||
// Tampilkan preview foto
|
||||
const fotoPreview = document.getElementById("foto-preview");
|
||||
fotoPreview.innerHTML = '<img src="' + fotoDataUrl + '" alt="Foto">';
|
||||
|
||||
// // Hentikan akses kamera setelah mengambil foto
|
||||
// stream.getTracks().forEach((track) => track.stop());
|
||||
});
|
||||
});
|
||||
/******************************************
|
||||
* END KTP & E-KYC CAMERA
|
||||
******************************************/
|
||||
|
||||
|
||||
/******************************************
|
||||
* SLIDE KTP & E-KYC FORM 3
|
||||
******************************************/
|
||||
let slideIndex = 1;
|
||||
showSlide(slideIndex);
|
||||
|
||||
function plusSlide(n) {
|
||||
showSlide(slideIndex += n);
|
||||
}
|
||||
|
||||
function currentSlide(n) {
|
||||
showSlide(slideIndex = n);
|
||||
}
|
||||
|
||||
function showSlide(n) {
|
||||
let slides = document.querySelectorAll('.slide');
|
||||
let dots = document.querySelectorAll('.dot');
|
||||
|
||||
if (n > slides.length) {
|
||||
slideIndex = 1;
|
||||
}
|
||||
|
||||
if (n < 1) {
|
||||
slideIndex = slides.length;
|
||||
}
|
||||
|
||||
for (let i = 0; i < slides.length; i++) {
|
||||
slides[i].style.transform = 'translateX(-' + ((slideIndex - 1) * 100) + '%)';
|
||||
}
|
||||
|
||||
for (let i = 0; i < dots.length; i++) {
|
||||
dots[i].classList.remove('active');
|
||||
}
|
||||
|
||||
dots[slideIndex - 1].classList.add('active');
|
||||
}
|
||||
/******************************************
|
||||
* END SLIDE KTP & E-KYC FORM 3
|
||||
******************************************/
|
||||
|
||||
|
||||
/******************************************
|
||||
* DROPDOWN SELECT GENDER
|
||||
******************************************/
|
||||
$(document).ready(function () {
|
||||
$('#gender-select').select2();
|
||||
});
|
||||
/******************************************
|
||||
* END DROPDOWN SELECT GENDER
|
||||
******************************************/
|
||||
|
||||
|
||||
|
||||
|
||||
/******************************************
|
||||
* AJAX DROPDOWN SELECT PROVINSI, KABUPATEN & KECAMATAN
|
||||
******************************************/
|
||||
$(document).ready(function () {
|
||||
|
||||
$("#selectProv").select2({
|
||||
placeholder: 'Pilih Provinsi',
|
||||
ajax: {
|
||||
url: $("#selectProv").data("url"),
|
||||
processResults: function ({
|
||||
data
|
||||
}) {
|
||||
return {
|
||||
results: $.map(data, function (item) {
|
||||
return {
|
||||
id: item.id,
|
||||
text: item.name
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
$("#selectProv").change(function () {
|
||||
let id = $('#selectProv').val();
|
||||
|
||||
$("#selectRegenc").select2({
|
||||
placeholder: 'Pilih Wilayah',
|
||||
ajax: {
|
||||
url: "/selectRegenc/" + id,
|
||||
processResults: function ({
|
||||
data
|
||||
}) {
|
||||
return {
|
||||
results: $.map(data, function (item) {
|
||||
return {
|
||||
id: item.id,
|
||||
text: item.name
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
$("#selectRegenc").change(function () {
|
||||
let id = $('#selectRegenc').val();
|
||||
|
||||
$("#selectDistric").select2({
|
||||
placeholder: 'Pilih Kota',
|
||||
ajax: {
|
||||
url: "/selectDistric/" + id,
|
||||
processResults: function ({ data }) {
|
||||
return {
|
||||
results: $.map(data, function (item) {
|
||||
return {
|
||||
id: item.id,
|
||||
text: item.name
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
/******************************************
|
||||
* END AJAX DROPDOWN SELECT PROVINSI, KABUPATEN & KECAMATAN
|
||||
******************************************/
|
||||
|
||||
@ -1,110 +0,0 @@
|
||||
(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);
|
||||
|
||||
@ -1,315 +1,70 @@
|
||||
/******************************************
|
||||
* 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
|
||||
******************************************/
|
||||
* 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
|
||||
//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;
|
||||
$(".next").click(function () {
|
||||
if (animating) return false;
|
||||
animating = true;
|
||||
|
||||
current_fs = $(this).parent();
|
||||
next_fs = $(this).parent().next();
|
||||
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");
|
||||
//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'
|
||||
});
|
||||
});
|
||||
//show the next fieldset
|
||||
next_fs.show();
|
||||
|
||||
$(".previous").click(function() {
|
||||
if (animating) return false;
|
||||
animating = true;
|
||||
});
|
||||
|
||||
current_fs = $(this).parent();
|
||||
previous_fs = $(this).parent().prev();
|
||||
$(".previous").click(function () {
|
||||
if (animating) return false;
|
||||
animating = true;
|
||||
|
||||
//de-activate current step on progressbar
|
||||
$("#progressbar li").eq($("fieldset").index(current_fs)).removeClass("active");
|
||||
current_fs = $(this).parent();
|
||||
previous_fs = $(this).parent().prev();
|
||||
|
||||
//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();
|
||||
});
|
||||
//de-activate current step on progressbar
|
||||
$("#progressbar li").eq($("fieldset").index(current_fs)).removeClass("active");
|
||||
});
|
||||
/******************************************
|
||||
* END PROGRESS BAR MULTIPLE FORM
|
||||
******************************************/
|
||||
* END PROGRESS BAR MULTIPLE FORM
|
||||
******************************************/
|
||||
|
||||
|
||||
/******************************************
|
||||
* HIDE & SEE PASSWORD PIN DAN KONFIR PIN
|
||||
******************************************/
|
||||
function togglePinVisibility() {
|
||||
var pin = document.getElementById("pin");
|
||||
var toggleIconPin = document.getElementById("toggle-pin");
|
||||
|
||||
if (pin.type === "password") {
|
||||
pin.type = "text";
|
||||
toggleIconPin.className = "fa fa-eye-slash password-toggle-icon";
|
||||
} else {
|
||||
pin.type = "password";
|
||||
toggleIconPin.className = "fa fa-eye password-toggle-icon";
|
||||
}
|
||||
}
|
||||
|
||||
function toggleKonfirPinVisibility() {
|
||||
var pin = document.getElementById("konfir-pin");
|
||||
var toggleIconKonfirPin = document.getElementById("toggle-konfir-pin");
|
||||
|
||||
if (pin.type === "password") {
|
||||
pin.type = "text";
|
||||
toggleIconKonfirPin.className = "fa fa-eye-slash password-toggle-icon";
|
||||
} else {
|
||||
pin.type = "password";
|
||||
toggleIconKonfirPin.className = "fa fa-eye password-toggle-icon";
|
||||
}
|
||||
}
|
||||
/******************************************
|
||||
* END HIDE & SEE PASSWORD PIN DAN KONFIR PIN
|
||||
******************************************/
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
@ -12,18 +13,49 @@
|
||||
<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 ======= -->
|
||||
<link href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css' rel='stylesheet'>
|
||||
<!-- css input dropdown -->
|
||||
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
|
||||
<style>
|
||||
.select2-container .select2-selection--single {
|
||||
border: none;
|
||||
background: none;
|
||||
outline: none;
|
||||
box-shadow: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.select2-container .select2-selection--single:focus {
|
||||
border: none;
|
||||
}
|
||||
|
||||
.select2-container .select2-selection--single .select2-selection__arrow {
|
||||
border: none;
|
||||
background: none;
|
||||
}
|
||||
|
||||
.select2-container--default.select2-container--open .select2-selection--single {
|
||||
border: none;
|
||||
}
|
||||
|
||||
.select2-results {
|
||||
border-bottom: 1px solid #aaa;
|
||||
}
|
||||
|
||||
.select2-results__option {
|
||||
padding: 10px;
|
||||
color: #333;
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
.select2-container--default .select2-results>.select2-results__options .select2-results__option--highlighted {
|
||||
background-color: #900c3e !important;
|
||||
color: #fff !important;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<!-- ======= MODAL ======= -->
|
||||
<div class="modal_wrapper">
|
||||
<div class="shadow"></div>
|
||||
@ -32,29 +64,30 @@
|
||||
<p>You have successfully completed the process.</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- ======= MODAL ======= -->
|
||||
<!-- ======= end 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>
|
||||
<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">
|
||||
<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">
|
||||
<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>
|
||||
@ -67,7 +100,7 @@
|
||||
Selamat datang kembali, silakan isi form login di bawah ini untuk masuk ke akun anda.
|
||||
</p>
|
||||
|
||||
<<!-- ======= PROGRESS BAR ======= -->
|
||||
<!-- ======= PROGRESS BAR ======= -->
|
||||
<div class="header">
|
||||
<ul>
|
||||
<li class="active form_1_progessbar">
|
||||
@ -114,25 +147,21 @@
|
||||
<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">
|
||||
<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 class="gender-select-input" style="width: 100%; padding-left: 1rem;">
|
||||
<select style="width: 190%;" class="gender-select" id="gender-select">
|
||||
<option value="Laki-laki">Laki-laki</option>
|
||||
<option value="Perempuan">Perempuan</option>
|
||||
</select>
|
||||
</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>
|
||||
@ -145,174 +174,112 @@
|
||||
|
||||
<!-- ======= 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 class="">
|
||||
<form class='mt-2'>
|
||||
<div class="input-field" style="width: 190%; padding: 0rem 1rem;">
|
||||
<select id="selectProv" data-url="{{ route('provinsi.index') }}" style="width: 100%; border: 1px solid transparent; "
|
||||
class="input-field" aria-label="Default select example">
|
||||
|
||||
</select>
|
||||
</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 class='mb-2'>
|
||||
<div class="input-field" style="width: 190%; padding: 0rem 1rem;">
|
||||
<select id="selectRegenc"
|
||||
style="width: 100%; border: 1px solid transparent; margin-top: 0; outline: none;"
|
||||
class="input-field" aria-label="Default select example">
|
||||
|
||||
</select>
|
||||
</div>
|
||||
</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 class='mb-2'>
|
||||
<div class="input-field" style="width: 190%; padding: 0rem 1rem;">
|
||||
<select id="selectDistric"
|
||||
style="width: 100%; border: 1px solid transparent; margin-top: 0; outline: none;"
|
||||
class="input-field" aria-label="Default select example">
|
||||
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
</form>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!-- ======= END FORM ADDRESS ======= -->
|
||||
|
||||
<!-- ======= FORM DROP & DRAG IMAGE ======= -->
|
||||
<!-- ======= FORM CAMERA KTP & E-KYC ======= -->
|
||||
<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 class="slider-container">
|
||||
<div class="slider">
|
||||
<div class="slide fade">
|
||||
<form id="bukuTamuForm" method="POST" enctype="multipart/form-data">
|
||||
<div
|
||||
style=" display: flex; flex-direction: column; align-items: center">
|
||||
<h3 style="">KTP Anda</h3>
|
||||
<div id="webcam-container">
|
||||
<video id="webcamKtp" autoplay playsinline>
|
||||
<div id="foto-preview"></div>
|
||||
</video>
|
||||
</div>
|
||||
<input type="hidden" id="fotoKtp" name="foto">
|
||||
<button type="button" class="btn-foto"
|
||||
id="captureButtonKtp">Ambil Foto</button>
|
||||
</div>
|
||||
</form>
|
||||
</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 class="slide fade">
|
||||
<form id="bukuTamuForm" method="POST" enctype="multipart/form-data">
|
||||
<div
|
||||
style="display: flex; flex-direction: column; justify-content: center; align-items: center">
|
||||
<h3>E-KYC Anda</h3>
|
||||
<div id="webcam-container">
|
||||
<video id="webcamEkyc" autoplay playsinline>
|
||||
<div id="foto-preview"></div>
|
||||
</video>
|
||||
</div>
|
||||
<input type="hidden" id="fotoEkyc" name="foto">
|
||||
<button type="button" class="btn-foto"
|
||||
id="captureButtonEkyc">Ambil Foto</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<div class="dots">
|
||||
<button class="prev" type="button"
|
||||
onclick="plusSlide(-1)">❮</button>
|
||||
<span class="dot" onclick="currentSlide(1)"></span>
|
||||
<span class="dot" onclick="currentSlide(2)"></span>
|
||||
<button class="next" type="button"
|
||||
onclick="plusSlide(1)">❯</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<!-- ======= FORM DROP & DRAG IMAGE ======= -->
|
||||
<!-- ======= END CAMERA KTP & E-KYC ======= -->
|
||||
|
||||
<!-- ======= FORM PIN ======= -->
|
||||
<div class="form_4 data_info" style="display: none;">
|
||||
<form>
|
||||
<div style="display: flex">
|
||||
<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">
|
||||
<input type="password" class="pin-input" id="pin" maxlength="6"
|
||||
oninput="this.value = this.value.replace(/[^0-9]/g, '').substring(0, 6);"
|
||||
placeholder="PIN">
|
||||
<i id="toggle-pin" class="fa fa-eye password-toggle-icon"
|
||||
onclick="togglePinVisibility()"></i>
|
||||
</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">
|
||||
<input type="password" class="konfir-pin-input" id="konfir-pin"
|
||||
maxlength="6"
|
||||
oninput="this.value = this.value.replace(/[^0-9]/g, '').substring(0, 6);"
|
||||
placeholder="Konfirmasi PIN">
|
||||
<i id="toggle-konfir-pin" class="fa fa-eye password-toggle-icon"
|
||||
onclick="toggleKonfirPinVisibility()"></i>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
@ -381,8 +348,13 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script src="../assets/js/login_register/jquery.js"></script>
|
||||
<script src="../assets/js/login_register/main.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js"
|
||||
integrity="sha512-aVKKRRi/Q/YV+4mjoKBsE4x3H+BkegoM/em46NNlCqNTmUYADjBbeNefNxYV7giUp0VxICtqdrbqU7iVaeZNXA=="
|
||||
crossorigin="anonymous" referrerpolicy="no-referrer"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/js/bootstrap.bundle.min.js"
|
||||
integrity="sha384-u1OknCvxWvY5kfmNBILK2hRnQC3Pr17a+RTT6rIHI7NnikvbZlHgTPOOmMi466C8" crossorigin="anonymous">
|
||||
</script>
|
||||
<script src="../assets/js/login_register/app.js"></script>
|
||||
<script src="../assets/js/login_register/script.js"></script>
|
||||
</body>
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
<?php
|
||||
|
||||
use App\Http\Controllers\IndonesiaController;
|
||||
use App\Models\Refund;
|
||||
use App\Models\transaction;
|
||||
use Illuminate\Support\Facades\Route;
|
||||
@ -60,6 +61,11 @@ Route::post('/refund-accept/{id}', 'ReturnItemController@acceptRefund')->name('r
|
||||
Route::get('/refund-decline/{id}', 'ReturnItemController@declineRefund')->name('refund/detail-refund/refund.decline');
|
||||
|
||||
|
||||
Route::get('/sign-in_sign-up', function () {
|
||||
Route::get('sign-in_sign-up', function () {
|
||||
return view('auth.sign-in_sign-up');
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
Route::get('selectProv', [IndonesiaController::class, 'provinsi'])->name('provinsi.index');
|
||||
Route::get('selectRegenc/{id}', [IndonesiaController::class, 'regency']);
|
||||
Route::get('selectDistric/{id}', [IndonesiaController::class, 'district']);
|
||||
|
||||
Loading…
Reference in New Issue
Block a user