added downtown slider

master
lilUnkelDemon 2 weeks ago
parent 9c5f2e5158
commit d03e6d7a72

@ -0,0 +1,86 @@
<section class="DowntownSlider live-setting" data-live="{{$data->area_name.'_'.$data->part}}">
<div id="downtown-slider">
@foreach(\App\Models\Slider::where('status',1)->get() as $slider)
<div class="item">
<div class="row">
<div class="col-6 downtown-img">
<img src="{{$slider->imgUrl()}}" class="img-fluid" alt="">
</div>
<div class="col-6 downtown-content">
<img src="{{$slider->imgUrl()}}" alt="">
<svg
width="145mm"
height="145mm"
viewBox="0 0 145 145"
version="1.1"
id="svg5"
inkscape:version="1.2.2 (b0a8486541, 2022-12-01)"
sodipodi:docname="drawing.svg"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg">
<sodipodi:namedview
id="namedview7"
pagecolor="#ffffff"
bordercolor="#000000"
borderopacity="0.25"
inkscape:showpageshadow="2"
inkscape:pageopacity="0.0"
inkscape:pagecheckerboard="0"
inkscape:deskcolor="#d1d1d1"
inkscape:document-units="mm"
showgrid="false"
inkscape:zoom="1.5287037"
inkscape:cx="334.27014"
inkscape:cy="284.88189"
inkscape:window-width="1920"
inkscape:window-height="1049"
inkscape:window-x="1920"
inkscape:window-y="0"
inkscape:window-maximized="1"
inkscape:current-layer="layer1" />
<defs
id="defs2" />
<g
inkscape:label="Layer 1"
inkscape:groupmode="layer"
id="layer1">
<path
id="path234"
style="fill:#008d8d;fill-opacity:0;stroke:#000000;stroke-width:2.083;stroke-opacity:0.0121076"
d="M 154.60434,121.71446 A 58.623596,58.623596 0 0 1 95.980741,180.33806 58.623596,58.623596 0 0 1 37.357148,121.71446 58.623596,58.623596 0 0 1 95.980741,63.090865 58.623596,58.623596 0 0 1 154.60434,121.71446 Z" />
<text
xml:space="preserve"
style="font-size:15.875px;text-align:center;text-anchor:middle;fill:#000000;fill-opacity:0;stroke:none;stroke-width:2.083;stroke-opacity:0"
id="text1739"
transform="translate(-25.701646,-49.080477)"><textPath
xlink:href="#path234"
startOffset="50%"
id="textPath2569"
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:15.875px;font-family:Vazirmatn;-inkscape-font-specification:Vazirmatn;fill:#000000;fill-opacity:1;stroke:none;stroke-width:2.083;stroke-opacity:0">
{{$slider->dataz[$data->area_name.'_'.$data->part.'_circle']}}
</textPath></text>
</g>
</svg>
<div class="main-content main-dir">
{!! $slider->body !!}
<br>
<p class="text-center">
{{$slider->dataz[$data->area_name.'_'.$data->part.'_subtitle']}}
<br>
<a class="btn btn-outline-dark mt-5"
href="{{fixUrlLang($slider->dataz[$data->area_name.'_'.$data->part.'_link'])}}">
{{$slider->dataz[$data->area_name.'_'.$data->part.'_btn']}}
</a>
</p>
</div>
</div>
</div>
</div>
@endforeach
</div>
</section>

@ -0,0 +1,30 @@
import {tns} from "tiny-slider/src/tiny-slider";
var downtownSlider;
document.addEventListener('DOMContentLoaded', () => {
document.querySelectorAll('#downtown-slider')?.forEach(function (el) {
if (el.classList.contains('.tns-slider')) {
console.log('ignore');
return 'ignore';
}
downtownSlider = tns({
container: el,
items: 1,
// slideBy: 'page',
autoplay: true,
autoplayButton: false,
// nextButton: false,
controls: false,
autoplayHoverPause: true,
mouseDrag: true,
autoplayTimeout: 5000,
autoplayButtonOutput: false,
// speed:10000,
});
});
});

@ -0,0 +1,10 @@
{
"name": "DowntownSlider",
"version": "1.0",
"author": "xStack",
"email": "xshop@xstack.ir",
"license": "GPL-3.0-or-later",
"url": "https:\/\/xstack.ir",
"author_url": "https:\/\/4xmen.ir",
"packages": []
}

@ -0,0 +1,49 @@
<?php
namespace Resources\Views\Segments;
use App\Models\Part;
use App\Models\Setting;
use App\Models\Slider;
class DowntownSlider
{
public static function onAdd(Part $part = null)
{
Slider::addData($part->area_name . '_' . $part->part . '_btn','View offer');
Slider::addData($part->area_name . '_' . $part->part . '_link','/');
Slider::addData($part->area_name . '_' . $part->part . '_circle','Ill then hold the Shift key and will click on the circle');
Slider::addData($part->area_name . '_' . $part->part . '_subtitle','Lorem ipsum dolor sit amet, consectetur adipisicing elit. A adipisci aliquid aspernatur, commodi corporis cupiditate');
$setting = new Setting();
$setting->section = 'theme';
$setting->key = $part->area_name . '_' . $part->part.'_color';
$setting->value = '#000000';
$setting->data = json_encode(['name' => 'downtown-color']);
$setting->type = 'COLOR';
$setting->size = 6;
$setting->title = $part->area_name . ' ' . $part->part .' text color';
$setting->save();
$setting = new Setting();
$setting->section = 'theme';
$setting->key = $part->area_name . '_' . $part->part.'_bg';
$setting->value = '#ffffff';
$setting->data = json_encode(['name' => 'downtown-bg']);
$setting->type = 'COLOR';
$setting->size = 6;
$setting->title = $part->area_name . ' ' . $part->part .' bg color';
$setting->save();
}
public static function onRemove(Part $part = null)
{
Slider::remData($part->area_name . '_' . $part->part . '_btn');
Slider::remData($part->area_name . '_' . $part->part . '_link');
Slider::remData($part->area_name . '_' . $part->part . '_subtitle');
Slider::remData($part->area_name . '_' . $part->part . '_circle');
Setting::where('key',$part->area_name . '_' . $part->part.'_color')->first()?->delete();
Setting::where('key',$part->area_name . '_' . $part->part.'_bg')->first()?->delete();
}
public static function onMount(Part $part = null)
{
return $part;
}
}

@ -0,0 +1,100 @@
@keyframes rotate-z {
from {
transform: rotateZ(0deg);
}
to {
transform: rotateZ(360deg);
}
}
.DowntownSlider {
position: relative;
height: 90vh;
// scss
&:before{
height: 7rem;
content: ' ';
top: 0;
right: 0;
bottom: 0;
background: var(--downtown-bg);
z-index: 9;
position: absolute;
width: 100%;
}
.downtown-img{
position: relative;
overflow: hidden;
padding: 0;
img{
height: 90vh;
width: 100%;
object-fit: cover;
object-position: right;
}
&:after{
content: ' ';
background: var(--downtown-bg);
height: 3rem;
top: 5rem;
left: -4rem;
width: 100%;
z-index: 7;
position: absolute;
transform: rotateZ(-4deg);
}
}
.downtown-content{
background: var(--downtown-bg);
padding-right: 6rem;
padding-left: 6rem;
align-items: end;
display: flex;
position: relative;
padding-bottom: 10vh;
*{
color: var(--downtown-color);
}
svg{
width: 20vh;
height: 20vh;
position: absolute;
z-index: 9;
top: 17.5vh;
right: -10.5vh;
animation: rotate-z 15s linear infinite;
}
img{
width: 15vh;
height: 15vh;
border-radius: 50%;
object-fit: cover;
position: absolute;
right: -7.5vh;
top: 20vh;
border: 10px solid var(--downtown-bg);
}
}
/*-900px width*/
@media (max-width: 900px) {
.downtown-img{
&:after{
transform: rotateZ(-8deg);
}
}
.downtown-content{
padding-right: 1rem;
padding-left: 1rem;
}
}
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 76 KiB

Loading…
Cancel
Save