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