377 lines
11 KiB
PHP
377 lines
11 KiB
PHP
<br>
|
|
<hr>
|
|
<h1>{{ trans('admin.LAYOUT') }}</h1>
|
|
<br>
|
|
<div class="services-grid">
|
|
|
|
|
|
<div class="holder">
|
|
<article class="article article01">
|
|
<div class="row">
|
|
<div class="col-md-3">
|
|
<div class="text-holder">
|
|
<div class="text" data-text="01">
|
|
<p>CONTENT 1</p>
|
|
</div>
|
|
</div>
|
|
<div class="img-box">
|
|
|
|
<div class="upload-box">
|
|
<div class="resolution">309x461</div>
|
|
<div class="upload">
|
|
<div class="upload-btn-wrapper">
|
|
<i class="fa fa-upload"></i>
|
|
<input type="file"
|
|
name="picture_1"
|
|
class="pictureUploadPreview"
|
|
data-preview="quickPreviewPicture1">
|
|
</div> <!-- end .btn -->
|
|
</div> <!-- end .upload -->
|
|
</div> <!-- end .upload-box -->
|
|
|
|
<div id="quickPreviewPicture1">
|
|
@if (!empty($table->picture_1))
|
|
<img src="/{{ $uploadPath }}{{ $table->picture_1 ?? null }}"
|
|
class="img-fluid">
|
|
@else
|
|
<img src="https://via.placeholder.com/309X461" class="img-fluid upload-box">
|
|
@endif
|
|
</div> <!-- end #quickPreview -->
|
|
|
|
|
|
|
|
</div>
|
|
</div>
|
|
<div class="col-md-9">
|
|
<div class="img-box">
|
|
|
|
<div class="upload-box">
|
|
<div class="resolution">1132x792</div>
|
|
<div class="upload">
|
|
<div class="upload-btn-wrapper">
|
|
<i class="fa fa-upload"></i>
|
|
<input type="file"
|
|
name="picture_2"
|
|
class="pictureUploadPreview"
|
|
data-preview="quickPreviewPicture2">
|
|
</div> <!-- end .btn -->
|
|
</div> <!-- end .upload -->
|
|
</div> <!-- end .upload-box -->
|
|
|
|
<div id="quickPreviewPicture2">
|
|
@if (!empty($table->picture_2))
|
|
<img src="/{{ $uploadPath }}{{ $table->picture_2 ?? null }}"
|
|
class="img-fluid">
|
|
@else
|
|
<img src="https://via.placeholder.com/1132X792" class="img-fluid" alt="image description">
|
|
@endif
|
|
</div> <!-- end #quickPreview -->
|
|
</div> <!-- end .img-box -->
|
|
</div>
|
|
</div>
|
|
</article>
|
|
<hr>
|
|
|
|
<article class="article article02">
|
|
<div class="row align-items-start">
|
|
<div class="col-md-3 offset-md-3">
|
|
<div class="text-holder">
|
|
<div class="text" data-text="02">
|
|
<p>CONTENT 2</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="img-box">
|
|
|
|
<div class="upload-box">
|
|
<div class="resolution">746x746</div>
|
|
<div class="upload">
|
|
<div class="upload-btn-wrapper">
|
|
<i class="fa fa-upload"></i>
|
|
<input type="file"
|
|
name="picture_3"
|
|
class="pictureUploadPreview"
|
|
data-preview="quickPreviewPicture3">
|
|
</div> <!-- end .btn -->
|
|
</div> <!-- end .upload -->
|
|
</div> <!-- end .upload-box -->
|
|
|
|
<div id="quickPreviewPicture3">
|
|
@if (!empty($table->picture_3))
|
|
<img src="/{{ $uploadPath }}{{ $table->picture_3 ?? null }}"
|
|
class="img-fluid">
|
|
@else
|
|
<img src="https://via.placeholder.com/746x746" class="img-fluid" alt="image description">
|
|
@endif
|
|
</div> <!-- end #quickPreview -->
|
|
|
|
</div> <!-- end .img-box -->
|
|
</div>
|
|
</div>
|
|
</article>
|
|
|
|
<hr>
|
|
|
|
<article class="article article03">
|
|
<div class="row">
|
|
<div class="col-md-3 order-md-2">
|
|
<div class="text-holder">
|
|
<div class="text" data-text="03">
|
|
<p>CONTENT 3</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6 img-col">
|
|
<div class="img-box">
|
|
|
|
<div class="upload-box">
|
|
<div class="resolution">746x909</div>
|
|
<div class="upload">
|
|
<div class="upload-btn-wrapper">
|
|
<i class="fa fa-upload"></i>
|
|
<input type="file"
|
|
name="picture_4"
|
|
class="pictureUploadPreview"
|
|
data-preview="quickPreviewPicture4">
|
|
</div> <!-- end .btn -->
|
|
</div> <!-- end .upload -->
|
|
</div> <!-- end .upload-box -->
|
|
|
|
<div id="quickPreviewPicture4">
|
|
@if (!empty($table->picture_4))
|
|
<img src="/{{ $uploadPath }}{{ $table->picture_4 ?? null }}"
|
|
class="img-fluid">
|
|
@else
|
|
<img src="https://via.placeholder.com/746x909" class="img-fluid" alt="image description">
|
|
@endif
|
|
</div> <!-- end #quickPreview -->
|
|
</div> <!-- end .img-box -->
|
|
</div>
|
|
<div class="col-md-3 order-md-3">
|
|
<div class="img-box">
|
|
|
|
<div class="upload-box">
|
|
<div class="resolution">358x358</div>
|
|
<div class="upload">
|
|
<div class="upload-btn-wrapper">
|
|
<i class="fa fa-upload"></i>
|
|
<input type="file"
|
|
name="picture_5"
|
|
class="pictureUploadPreview"
|
|
data-preview="quickPreviewPicture5">
|
|
</div> <!-- end .btn -->
|
|
</div> <!-- end .upload -->
|
|
</div> <!-- end .upload-box -->
|
|
<div id="quickPreviewPicture5">
|
|
@if (!empty($table->picture_5))
|
|
<img src="/{{ $uploadPath }}{{ $table->picture_5 ?? null }}"
|
|
class="img-fluid">
|
|
@else
|
|
<img src="https://via.placeholder.com/358x358" class="img-fluid" alt="image description">
|
|
@endif
|
|
</div> <!-- end #quickPreview -->
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
|
|
<hr>
|
|
|
|
<article class="article article04">
|
|
<div class="row">
|
|
<div class="col-md-3 order-md-4">
|
|
<div class="text-holder">
|
|
<div class="text" data-text="04">
|
|
<p>CONTENT 4</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-3 img-col">
|
|
<div class="img-box">
|
|
|
|
<div class="upload-box">
|
|
<div class="resolution">358x358</div>
|
|
<div class="upload">
|
|
<div class="upload-btn-wrapper">
|
|
<i class="fa fa-upload"></i>
|
|
<input type="file"
|
|
name="picture_6"
|
|
class="pictureUploadPreview"
|
|
data-preview="quickPreviewPicture6">
|
|
</div> <!-- end .btn -->
|
|
</div> <!-- end .upload -->
|
|
</div> <!-- end .upload-box -->
|
|
|
|
<div id="quickPreviewPicture6">
|
|
@if (!empty($table->picture_6))
|
|
<img src="/{{ $uploadPath }}{{ $table->picture_6 ?? null }}"
|
|
class="img-fluid">
|
|
@else
|
|
<img src="https://via.placeholder.com/358x358" class="img-fluid" alt="image description">
|
|
@endif
|
|
</div> <!-- end #quickPreview -->
|
|
|
|
</div>
|
|
<br>
|
|
<div class="img-box">
|
|
<div class="upload-box">
|
|
<div class="resolution">358x358</div>
|
|
<div class="upload">
|
|
<div class="upload-btn-wrapper">
|
|
<i class="fa fa-upload"></i>
|
|
<input type="file"
|
|
name="picture_7"
|
|
class="pictureUploadPreview"
|
|
data-preview="quickPreviewPicture7">
|
|
</div> <!-- end .btn -->
|
|
</div> <!-- end .upload -->
|
|
</div> <!-- end .upload-box -->
|
|
|
|
<div id="quickPreviewPicture7">
|
|
@if (!empty($table->picture_7))
|
|
<img src="/{{ $uploadPath }}{{ $table->picture_7 ?? null }}"
|
|
class="img-fluid">
|
|
@else
|
|
<img src="https://via.placeholder.com/358x358" class="img-fluid" alt="image description">
|
|
@endif
|
|
</div> <!-- end #quickPreview -->
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="img-box">
|
|
|
|
<div class="upload-box">
|
|
<div class="resolution">748x765</div>
|
|
<div class="upload">
|
|
<div class="upload-btn-wrapper">
|
|
<i class="fa fa-upload"></i>
|
|
<input type="file"
|
|
name="picture_8"
|
|
class="pictureUploadPreview"
|
|
data-preview="quickPreviewPicture8">
|
|
</div> <!-- end .btn -->
|
|
</div> <!-- end .upload -->
|
|
</div> <!-- end .upload-box -->
|
|
|
|
<div id="quickPreviewPicture8">
|
|
@if (!empty($table->picture_8))
|
|
<img src="/{{ $uploadPath }}{{ $table->picture_8 ?? null }}"
|
|
class="img-fluid">
|
|
@else
|
|
<img src="https://via.placeholder.com/748x765" class="img-fluid" alt="image description">
|
|
@endif
|
|
</div> <!-- end #quickPreview -->
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-12 col-md-6 col-lg-4 col-xl-3 offset-md-6 offset-lg-8 offset-xl-9">
|
|
<div class="text-info-box" data-speed="130">
|
|
<div class="info">
|
|
CONTENT 5
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
</div>
|
|
</div>
|
|
<br>
|
|
|
|
|
|
@section('header-addon')
|
|
<style>
|
|
.text-info-box {
|
|
background: black;
|
|
color:white;
|
|
font-size:15px;
|
|
min-height:150px;
|
|
display:grid;
|
|
align-items: center;
|
|
text-align:center;
|
|
}
|
|
.upload-box {
|
|
display:grid;
|
|
grid-template-columns: auto 20px;
|
|
grid-template-rows: 20px;
|
|
grid-gap:0;
|
|
color:#999;
|
|
font-size:10px;
|
|
margin-bottom:1px;
|
|
}
|
|
|
|
.upload-box > div.resolution {
|
|
color:#ccc;
|
|
align-self: end;
|
|
}
|
|
|
|
.upload-box > div.upload {
|
|
color:#bbb;
|
|
max-height:16px;
|
|
font-size:12px;
|
|
text-align:right;
|
|
align-self: end;
|
|
}
|
|
|
|
.upload-box > div.upload:hover {
|
|
cursor:pointer;
|
|
color:#909;
|
|
}
|
|
|
|
.img-box, .text {
|
|
border:dotted 1px #ccc;
|
|
padding:3px;
|
|
margin-bottom:3px;
|
|
}
|
|
|
|
.image-preview > img {
|
|
object-fit: contain;
|
|
width:100%;
|
|
height:200px;
|
|
}
|
|
|
|
.upload-btn-wrapper {
|
|
position: relative;
|
|
overflow: hidden;
|
|
display: inline-block;
|
|
padding:0;
|
|
margin:0;
|
|
}
|
|
|
|
.upload-btn-wrapper input[type=file] {
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
opacity: 0;
|
|
}
|
|
|
|
.upload-box {
|
|
cursor: pointer;
|
|
}
|
|
</style>
|
|
@append
|
|
|
|
@section('footer-addon')
|
|
<script>
|
|
$(document).on("change", ".pictureUploadPreview", function(evt) {
|
|
|
|
var files = evt.target.files;
|
|
var f = files[0];
|
|
var reader = new FileReader();
|
|
let obj = $(this).data('preview');
|
|
|
|
reader.onload = (function(theFile) {
|
|
return function(e) {
|
|
|
|
document.getElementById(obj).innerHTML = ['<img src="', e.target.result,'" title="', theFile.name, '" class="img-fluid" />'].join('');
|
|
};
|
|
})(f);
|
|
|
|
reader.readAsDataURL(f);
|
|
});
|
|
|
|
</script>
|
|
@append |