mirror of https://github.com/4xmen/xshop.git
added wave footer
parent
6dced06316
commit
78d032fa37
@ -0,0 +1,48 @@
|
|||||||
|
<footer class='WaveFooter'
|
||||||
|
style="--speed: {{getSetting($data->area->name.'_'.$data->part.'_speed')}}s;
|
||||||
|
--speed2: {{getSetting($data->area->name.'_'.$data->part.'_speed2')}}s;
|
||||||
|
--speed3: {{getSetting($data->area->name.'_'.$data->part.'_speed3')}}s">
|
||||||
|
<svg
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||||
|
viewBox="0 24 150 28"
|
||||||
|
preserveAspectRatio="none"
|
||||||
|
>
|
||||||
|
<defs>
|
||||||
|
<path
|
||||||
|
id="gentle-wave"
|
||||||
|
d="M-160 44c30 0
|
||||||
|
58-18 88-18s
|
||||||
|
58 18 88 18
|
||||||
|
58-18 88-18
|
||||||
|
58 18 88 18
|
||||||
|
v44h-352z"
|
||||||
|
/>
|
||||||
|
</defs>
|
||||||
|
<g class="waves">
|
||||||
|
<use
|
||||||
|
xlink:href="#gentle-wave"
|
||||||
|
x="50"
|
||||||
|
y="0"
|
||||||
|
fill-opacity=".2"
|
||||||
|
/>
|
||||||
|
<use
|
||||||
|
xlink:href="#gentle-wave"
|
||||||
|
x="50"
|
||||||
|
y="3"
|
||||||
|
fill-opacity=".5"
|
||||||
|
/>
|
||||||
|
<use
|
||||||
|
xlink:href="#gentle-wave"
|
||||||
|
x="50"
|
||||||
|
y="6"
|
||||||
|
fill-opacity=".9"
|
||||||
|
/>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
<div class="content">
|
||||||
|
<div class="{{gfx()['container']}}">
|
||||||
|
{{getSetting('copyright')}}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</footer>
|
@ -0,0 +1,10 @@
|
|||||||
|
{
|
||||||
|
"name": "WaveFooter",
|
||||||
|
"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,51 @@
|
|||||||
|
<?php
|
||||||
|
|
||||||
|
namespace Resources\Views\Segments;
|
||||||
|
|
||||||
|
use App\Models\Part;
|
||||||
|
use App\Models\Setting;
|
||||||
|
|
||||||
|
class WaveFooter
|
||||||
|
{
|
||||||
|
public static function onAdd(Part $part = null)
|
||||||
|
{
|
||||||
|
|
||||||
|
$setting = new Setting();
|
||||||
|
$setting->section = 'theme';
|
||||||
|
$setting->key = $part->area->name . '_' . $part->part.'_speed';
|
||||||
|
$setting->value = 2;
|
||||||
|
$setting->size = 4;
|
||||||
|
$setting->type = 'NUMBER';
|
||||||
|
$setting->data = json_encode(['xmin' => 2, 'xmax' => 90]);
|
||||||
|
$setting->title = $part->area->name . ' ' . $part->part. ' speed wave 1';
|
||||||
|
$setting->save();
|
||||||
|
$setting = new Setting();
|
||||||
|
$setting->section = 'theme';
|
||||||
|
$setting->key = $part->area->name . '_' . $part->part.'_speed2';
|
||||||
|
$setting->value = 6;
|
||||||
|
$setting->size = 4;
|
||||||
|
$setting->type = 'NUMBER';
|
||||||
|
$setting->data = json_encode(['xmin' => 2, 'xmax' => 90]);
|
||||||
|
$setting->title = $part->area->name . ' ' . $part->part. ' speed wave 2';
|
||||||
|
$setting->save();
|
||||||
|
$setting = new Setting();
|
||||||
|
$setting->section = 'theme';
|
||||||
|
$setting->key = $part->area->name . '_' . $part->part.'_speed3';
|
||||||
|
$setting->value = 4;
|
||||||
|
$setting->size = 4;
|
||||||
|
$setting->type = 'NUMBER';
|
||||||
|
$setting->data = json_encode(['xmin' => 2, 'xmax' => 90]);
|
||||||
|
$setting->title = $part->area->name . ' ' . $part->part. ' speed wave 3';
|
||||||
|
$setting->save();
|
||||||
|
}
|
||||||
|
public static function onRemove(Part $part = null)
|
||||||
|
{
|
||||||
|
Setting::where('key',$part->area->name . '_' . $part->part.'_speed')->first()?->delete();
|
||||||
|
Setting::where('key',$part->area->name . '_' . $part->part.'_speed2')->first()?->delete();
|
||||||
|
Setting::where('key',$part->area->name . '_' . $part->part.'_speed3')->first()?->delete();
|
||||||
|
}
|
||||||
|
public static function onMount(Part $part = null)
|
||||||
|
{
|
||||||
|
return $part;
|
||||||
|
}
|
||||||
|
}
|
@ -0,0 +1,50 @@
|
|||||||
|
.WaveFooter {
|
||||||
|
margin-top: 3rem;
|
||||||
|
min-height: 300px;
|
||||||
|
position: relative;
|
||||||
|
.waves {
|
||||||
|
>use {
|
||||||
|
fill: var(--xshop-primary);
|
||||||
|
animation: move-forever var(--speed) -2s linear infinite;
|
||||||
|
&:nth-child(2) {
|
||||||
|
animation-delay: -3s;
|
||||||
|
animation-duration: var(--speed2);
|
||||||
|
}
|
||||||
|
&:nth-child(3) {
|
||||||
|
animation-delay: -4s;
|
||||||
|
animation-duration: var(--speed3);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
svg {
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
bottom: 5rem;
|
||||||
|
width: 100%;
|
||||||
|
height: 30vw;
|
||||||
|
max-height: 200px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content{
|
||||||
|
padding: 1rem;
|
||||||
|
background: var(--xshop-primary);
|
||||||
|
opacity: .96;
|
||||||
|
color: var(--xshop-diff);
|
||||||
|
height: 5rem;
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes move-forever {
|
||||||
|
0% {
|
||||||
|
transform: translate(-90px, 0%);
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
transform: translate(85px, 0%);
|
||||||
|
}
|
||||||
|
}
|
Binary file not shown.
After Width: | Height: | Size: 22 KiB |
Loading…
Reference in New Issue