mirror of https://github.com/4xmen/xshop.git
added GFX to panel
parent
a38f273f04
commit
2cc4a75976
@ -0,0 +1,26 @@
|
|||||||
|
<?php
|
||||||
|
|
||||||
|
namespace App\Http\Controllers\Admin;
|
||||||
|
|
||||||
|
use App\Http\Controllers\Controller;
|
||||||
|
use App\Models\Gfx;
|
||||||
|
use Illuminate\Http\Request;
|
||||||
|
|
||||||
|
class GfxController extends Controller
|
||||||
|
{
|
||||||
|
//
|
||||||
|
public function index(){
|
||||||
|
return view('admin.commons.gfx');
|
||||||
|
}
|
||||||
|
|
||||||
|
public function update( Request $request){
|
||||||
|
|
||||||
|
foreach ($request->input('gfx',[]) as $key => $gfx){
|
||||||
|
$g = Gfx::where('key',$key)->first();
|
||||||
|
$g->value = $gfx;
|
||||||
|
$g->save();
|
||||||
|
}
|
||||||
|
logAdmin(__METHOD__,__CLASS__,null);
|
||||||
|
return redirect()->back()->with(['message' => __('GFX of website updated')]);
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,11 @@
|
|||||||
|
<?php
|
||||||
|
|
||||||
|
namespace App\Models;
|
||||||
|
|
||||||
|
use Illuminate\Database\Eloquent\Factories\HasFactory;
|
||||||
|
use Illuminate\Database\Eloquent\Model;
|
||||||
|
|
||||||
|
class Gfx extends Model
|
||||||
|
{
|
||||||
|
use HasFactory;
|
||||||
|
}
|
||||||
@ -0,0 +1,31 @@
|
|||||||
|
<?php
|
||||||
|
|
||||||
|
use Illuminate\Database\Migrations\Migration;
|
||||||
|
use Illuminate\Database\Schema\Blueprint;
|
||||||
|
use Illuminate\Support\Facades\Schema;
|
||||||
|
|
||||||
|
return new class extends Migration
|
||||||
|
{
|
||||||
|
/**
|
||||||
|
* Run the migrations.
|
||||||
|
*/
|
||||||
|
public function up(): void
|
||||||
|
{
|
||||||
|
Schema::create('gfxes', function (Blueprint $table) {
|
||||||
|
$table->id();
|
||||||
|
$table->string('key')->unique();
|
||||||
|
$table->string('label');
|
||||||
|
$table->boolean('system')->default(0);
|
||||||
|
$table->longText('value');
|
||||||
|
$table->timestamps();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Reverse the migrations.
|
||||||
|
*/
|
||||||
|
public function down(): void
|
||||||
|
{
|
||||||
|
Schema::dropIfExists('gfxes');
|
||||||
|
}
|
||||||
|
};
|
||||||
@ -0,0 +1,76 @@
|
|||||||
|
<?php
|
||||||
|
|
||||||
|
namespace Database\Seeders;
|
||||||
|
|
||||||
|
use App\Models\Gfx;
|
||||||
|
use Illuminate\Database\Console\Seeds\WithoutModelEvents;
|
||||||
|
use Illuminate\Database\Seeder;
|
||||||
|
|
||||||
|
class GfxSeeder extends Seeder
|
||||||
|
{
|
||||||
|
/**
|
||||||
|
* Run the database seeds.
|
||||||
|
*/
|
||||||
|
public function run(): void
|
||||||
|
{
|
||||||
|
//
|
||||||
|
|
||||||
|
$array = [
|
||||||
|
[
|
||||||
|
'key'=>'background',
|
||||||
|
'label'=>'background color',
|
||||||
|
'system'=>'1',
|
||||||
|
'value'=> '#eeeeee'
|
||||||
|
],
|
||||||
|
[
|
||||||
|
'key'=>'primary',
|
||||||
|
'label'=>'Primary color',
|
||||||
|
'system'=>'1',
|
||||||
|
'value'=> '#6e0000'
|
||||||
|
],
|
||||||
|
[
|
||||||
|
'key'=>'secondary',
|
||||||
|
'label'=>'Secondary color',
|
||||||
|
'system'=>'1',
|
||||||
|
'value'=> '#ff0000'
|
||||||
|
],
|
||||||
|
[
|
||||||
|
'key'=>'text',
|
||||||
|
'label'=>'Text color',
|
||||||
|
'system'=>'1',
|
||||||
|
'value'=> '#111111'
|
||||||
|
],
|
||||||
|
[
|
||||||
|
'key'=>'border-radius',
|
||||||
|
'label'=>'Border radius',
|
||||||
|
'system'=>'1',
|
||||||
|
'value'=> '7px'
|
||||||
|
],
|
||||||
|
[
|
||||||
|
'key'=>'shadow',
|
||||||
|
'label'=>'Shadow',
|
||||||
|
'system'=>'1',
|
||||||
|
'value'=> '2px 2px 4px #777777'
|
||||||
|
],
|
||||||
|
[
|
||||||
|
'key'=>'container',
|
||||||
|
'label'=>'Container',
|
||||||
|
'system'=>'1',
|
||||||
|
'value'=> 'container'
|
||||||
|
],
|
||||||
|
[
|
||||||
|
'key'=>'font',
|
||||||
|
'label'=>'font',
|
||||||
|
'system'=>'1',
|
||||||
|
'value'=> 'Vazir'
|
||||||
|
],
|
||||||
|
|
||||||
|
];
|
||||||
|
|
||||||
|
|
||||||
|
foreach ($array as $item) {
|
||||||
|
$item['created_at'] = date('Y-m-d H:i:s');
|
||||||
|
Gfx::insert($item);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,124 @@
|
|||||||
|
<template>
|
||||||
|
<div id="border-radios-input">
|
||||||
|
<div id="shadow-input">
|
||||||
|
|
||||||
|
<div class="row mb-2">
|
||||||
|
<template v-for="i in 4">
|
||||||
|
<div class="col text-center" v-if="i != 3">
|
||||||
|
<button type="button" :class="`cir-btn `+(i == count?'active':'')" @click="count = i">
|
||||||
|
{{ i }}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</div>
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-10">
|
||||||
|
<input type="range" class="form-range" v-model="val1" min="0" max="99">
|
||||||
|
</div>
|
||||||
|
<div class="col-2 text-end">
|
||||||
|
{{ val1 }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div v-if="count > 1" class="row">
|
||||||
|
<div class="col-10">
|
||||||
|
<input type="range" class="form-range" v-model="val2" min="0" max="99">
|
||||||
|
</div>
|
||||||
|
<div class="col-2 text-end">
|
||||||
|
{{ val2 }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div v-if="count > 2" class="row">
|
||||||
|
<div class="col-10">
|
||||||
|
<input type="range" class="form-range" v-model="val3" min="0" max="99">
|
||||||
|
</div>
|
||||||
|
<div class="col-2 text-end">
|
||||||
|
{{ val3 }}
|
||||||
|
</div>
|
||||||
|
<div class="col-10">
|
||||||
|
<input type="range" class="form-range" v-model="val4" min="0" max="99">
|
||||||
|
</div>
|
||||||
|
<div class="col-2 text-end">
|
||||||
|
{{ val4 }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<input type="hidden" :value="calcVal">
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: "border-radios-input",
|
||||||
|
components: {},
|
||||||
|
data: () => {
|
||||||
|
return {
|
||||||
|
count: 0,
|
||||||
|
val1: 0,
|
||||||
|
val2: 0,
|
||||||
|
val3: 0,
|
||||||
|
val4: 0,
|
||||||
|
}
|
||||||
|
},
|
||||||
|
emits: ['update:modelValue'],
|
||||||
|
props: {
|
||||||
|
modelValue: {
|
||||||
|
default: '7px'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
// setTimeout(()=>{
|
||||||
|
let spltd = this.modelValue.trim().split(' ');
|
||||||
|
this.count = spltd.length;
|
||||||
|
// make valid
|
||||||
|
for (const s in spltd) {
|
||||||
|
spltd[s] = parseInt(spltd[s]);
|
||||||
|
this['val' + (parseInt(s) + 1)] = parseInt(spltd[s]);
|
||||||
|
}
|
||||||
|
// },30);
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
calcVal() {
|
||||||
|
let result;
|
||||||
|
if (this.count == 0){
|
||||||
|
return '';
|
||||||
|
}
|
||||||
|
if (this.count == 1) {
|
||||||
|
result = this.val1 + 'px';
|
||||||
|
} else if (this.count == 2) {
|
||||||
|
result = this.val1 + 'px ' + this.val2 + 'px';
|
||||||
|
}else if (this.count == 4) {
|
||||||
|
result = this.val1 + 'px ' + this.val2 + 'px ' +this.val3 + 'px ' + this.val4 + 'px';
|
||||||
|
}
|
||||||
|
|
||||||
|
this.$emit('update:modelValue', result);
|
||||||
|
return result.trim();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
#border-radios-input {
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.cir-btn {
|
||||||
|
background: transparent;
|
||||||
|
font-size: 17px;
|
||||||
|
border: 1px solid gray;
|
||||||
|
width: 35px;
|
||||||
|
height: 35px;
|
||||||
|
display: inline-flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
border-radius: 50%;
|
||||||
|
padding-top: 3px;
|
||||||
|
|
||||||
|
&.active {
|
||||||
|
background: darkred;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,399 @@
|
|||||||
|
<template>
|
||||||
|
<div id="gfxer">
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-xl-3">
|
||||||
|
<div class="item-list mb-3">
|
||||||
|
<h3 class="p-3">
|
||||||
|
<i class="ri-brush-2-line"></i>
|
||||||
|
GFX
|
||||||
|
</h3>
|
||||||
|
<div v-for="(v,i) in values" class="p-2 item-gfx">
|
||||||
|
<div class="float-end"
|
||||||
|
v-if="i == 'background' || i == 'primary' || i == 'secondary' || i == 'text'">
|
||||||
|
<input type="color" v-model="values[i]" class="form-control-color">
|
||||||
|
</div>
|
||||||
|
<label class="pt-2 mb-1">
|
||||||
|
{{ titles[i] }}
|
||||||
|
</label>
|
||||||
|
<br>
|
||||||
|
<template v-if="i == 'border-radius'">
|
||||||
|
<border-radios-input v-model="values[i]"></border-radios-input>
|
||||||
|
</template>
|
||||||
|
<template v-if="i == 'shadow'">
|
||||||
|
<shadow-input v-model="values[i]"></shadow-input>
|
||||||
|
</template>
|
||||||
|
<template v-if="i == 'font'">
|
||||||
|
<select v-model="values[i]" class="form-control">
|
||||||
|
<option value="Vazir"> Vazir</option>
|
||||||
|
</select>
|
||||||
|
</template>
|
||||||
|
<template v-if="i == 'container'">
|
||||||
|
<select v-model="values[i]" class="form-control">
|
||||||
|
<option value="container"> Container</option>
|
||||||
|
<option value="container-fluid"> Container fluid</option>
|
||||||
|
</select>
|
||||||
|
</template>
|
||||||
|
<input :name="'gfx['+i+']'" :type="_dbg_" :value="v">
|
||||||
|
</div>
|
||||||
|
<div class="p-2">
|
||||||
|
<select v-model="device" class="form-control">
|
||||||
|
<option value="desktop"> Desktop</option>
|
||||||
|
<option value="mobile"> Mobile</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-xl-9">
|
||||||
|
<div id="browser" :style="generalStyle" v-if="device != 'mobile'">
|
||||||
|
<div id="bar">
|
||||||
|
Browser
|
||||||
|
</div>
|
||||||
|
<div id="b-content">
|
||||||
|
<div :class="values.container">
|
||||||
|
<div class="row" id="items-icon">
|
||||||
|
<div class="col-md-4">
|
||||||
|
<i class="ri-twitter-line"
|
||||||
|
:style="`color: ${values.primary};`"></i>
|
||||||
|
<h3 :style="`color: ${values.secondary};`">
|
||||||
|
Social media
|
||||||
|
</h3>
|
||||||
|
<p>
|
||||||
|
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A aperiam doloremque
|
||||||
|
eligendi reprehenderit voluptas? Ab amet autem doloremque, eius et harum magnam
|
||||||
|
maxime minima odio pariatur quaerat soluta temporibus velit.
|
||||||
|
</p>
|
||||||
|
<a class="btn-read-more"
|
||||||
|
:style="`box-shadow: ${values.shadow} ;
|
||||||
|
border-radius: ${values['border-radius']} ;
|
||||||
|
border-color: ${values.primary};
|
||||||
|
color: ${values.primary};`">
|
||||||
|
Read more
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<div class="col-md-4">
|
||||||
|
<i class="ri-mail-line"
|
||||||
|
:style="`color: ${values.primary};`"></i>
|
||||||
|
<h3 :style="`color: ${values.secondary};`">
|
||||||
|
Contact
|
||||||
|
</h3>
|
||||||
|
<p>
|
||||||
|
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A aperiam doloremque
|
||||||
|
eligendi reprehenderit voluptas? Ab amet autem doloremque, eius et harum magnam
|
||||||
|
maxime minima odio pariatur quaerat soluta temporibus velit.
|
||||||
|
</p>
|
||||||
|
<a class="btn-read-more"
|
||||||
|
:style="`box-shadow: ${values.shadow} ;
|
||||||
|
border-radius: ${values['border-radius']} ;
|
||||||
|
border-color: ${values.primary};
|
||||||
|
color: ${values.primary};`">
|
||||||
|
Read more
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<div class="col-md-4">
|
||||||
|
<i class="ri-brush-4-line"
|
||||||
|
:style="`color: ${values.primary};`"></i>
|
||||||
|
<h3 :style="`color: ${values.secondary};`">
|
||||||
|
Design
|
||||||
|
</h3>
|
||||||
|
<p>
|
||||||
|
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A aperiam doloremque
|
||||||
|
eligendi reprehenderit voluptas? Ab amet autem doloremque, eius et harum magnam
|
||||||
|
maxime minima odio pariatur quaerat soluta temporibus velit.
|
||||||
|
</p>
|
||||||
|
<a class="btn-read-more"
|
||||||
|
:style="`box-shadow: ${values.shadow} ;
|
||||||
|
border-radius: ${values['border-radius']} ;
|
||||||
|
border-color: ${values.primary};
|
||||||
|
color: ${values.primary};`">
|
||||||
|
Read more
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="big-box" :style="`box-shadow: ${values.shadow} ;
|
||||||
|
border-radius: ${values['border-radius']} ;
|
||||||
|
background: linear-gradient(49deg, ${values.primary} 42%, ${values.secondary} 100%);`">
|
||||||
|
<h3 class="diff">
|
||||||
|
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate iste ut
|
||||||
|
veritatis?
|
||||||
|
</h3>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div id="mobile" :style="generalStyle" v-if="device == 'mobile'">
|
||||||
|
<div id="mobile-top" :style="`background: ${lighter};`">
|
||||||
|
<div class="diff p-1 d-flex align-items-center justify-content-between ">
|
||||||
|
<span>
|
||||||
|
<i class="ri-wifi-line"></i>
|
||||||
|
</span>
|
||||||
|
<span>
|
||||||
|
{{nowTime}}
|
||||||
|
</span>
|
||||||
|
<i class="ri-battery-low-line"></i>
|
||||||
|
</div>
|
||||||
|
<div :style="`background: ${values.primary};`" >
|
||||||
|
<div class="diff p-2">
|
||||||
|
{{tempUrl}}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div id="m-content" :class="values.container">
|
||||||
|
<div class="row" id="items-icon">
|
||||||
|
<div class="col-md-12">
|
||||||
|
<i class="ri-twitter-line"
|
||||||
|
:style="`color: ${values.primary};`"></i>
|
||||||
|
<h3 :style="`color: ${values.secondary};`">
|
||||||
|
Social media
|
||||||
|
</h3>
|
||||||
|
<p>
|
||||||
|
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A aperiam doloremque
|
||||||
|
eligendi reprehenderit voluptas? Ab amet autem doloremque, eius et harum magnam
|
||||||
|
maxime minima odio pariatur quaerat soluta temporibus velit.
|
||||||
|
</p>
|
||||||
|
<a class="btn-read-more"
|
||||||
|
:style="`box-shadow: ${values.shadow} ;
|
||||||
|
border-radius: ${values['border-radius']} ;
|
||||||
|
border-color: ${values.primary};
|
||||||
|
color: ${values.primary};`">
|
||||||
|
Read more
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<div class="col-12">
|
||||||
|
<i class="ri-mail-line"
|
||||||
|
:style="`color: ${values.primary};`"></i>
|
||||||
|
<h3 :style="`color: ${values.secondary};`">
|
||||||
|
Contact
|
||||||
|
</h3>
|
||||||
|
<p>
|
||||||
|
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A aperiam doloremque
|
||||||
|
eligendi reprehenderit voluptas? Ab amet autem doloremque, eius et harum magnam
|
||||||
|
maxime minima odio pariatur quaerat soluta temporibus velit.
|
||||||
|
</p>
|
||||||
|
<a class="btn-read-more"
|
||||||
|
:style="`box-shadow: ${values.shadow} ;
|
||||||
|
border-radius: ${values['border-radius']} ;
|
||||||
|
border-color: ${values.primary};
|
||||||
|
color: ${values.primary};`">
|
||||||
|
Read more
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<div class="col-12">
|
||||||
|
<i class="ri-brush-4-line"
|
||||||
|
:style="`color: ${values.primary};`"></i>
|
||||||
|
<h3 :style="`color: ${values.secondary};`">
|
||||||
|
Design
|
||||||
|
</h3>
|
||||||
|
<p>
|
||||||
|
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A aperiam doloremque
|
||||||
|
eligendi reprehenderit voluptas? Ab amet autem doloremque, eius et harum magnam
|
||||||
|
maxime minima odio pariatur quaerat soluta temporibus velit.
|
||||||
|
</p>
|
||||||
|
<a class="btn-read-more"
|
||||||
|
:style="`box-shadow: ${values.shadow} ;
|
||||||
|
border-radius: ${values['border-radius']} ;
|
||||||
|
border-color: ${values.primary};
|
||||||
|
color: ${values.primary};`">
|
||||||
|
Read more
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="big-box" :style="`box-shadow: ${values.shadow} ;
|
||||||
|
border-radius: ${values['border-radius']} ;
|
||||||
|
background: linear-gradient(49deg, ${values.primary} 42%, ${values.secondary} 100%);`">
|
||||||
|
<h3 style="filter: invert(1);mix-blend-mode: difference;">
|
||||||
|
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate iste ut
|
||||||
|
veritatis?
|
||||||
|
</h3>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
|
||||||
|
import BorderRadiosInput from "./BorderRadiosInput.vue";
|
||||||
|
import ShadowInput from "./ShadowInput.vue";
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: "gfxer",
|
||||||
|
components: {
|
||||||
|
BorderRadiosInput,
|
||||||
|
ShadowInput
|
||||||
|
},
|
||||||
|
data: () => {
|
||||||
|
return {
|
||||||
|
_dbg_: 'hidden',
|
||||||
|
values: {},
|
||||||
|
titles: {},
|
||||||
|
device: 'desktop', // desktop
|
||||||
|
}
|
||||||
|
},
|
||||||
|
props: {
|
||||||
|
items: {},
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
for (const i in this.items) {
|
||||||
|
let item = this.items[i];
|
||||||
|
this.titles[item.key] = item.label;
|
||||||
|
this.values[item.key] = item.value;
|
||||||
|
}
|
||||||
|
|
||||||
|
console.log(this.items);
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
generalStyle() { //
|
||||||
|
let css = '';
|
||||||
|
console.log();
|
||||||
|
if (this.values.background != null) {
|
||||||
|
css += 'background-color: ' + this.values.background + ';';
|
||||||
|
}
|
||||||
|
if (this.values.text != null) {
|
||||||
|
css += 'color: ' + this.values.text + ';';
|
||||||
|
}
|
||||||
|
|
||||||
|
return css;
|
||||||
|
},
|
||||||
|
tempUrl(){
|
||||||
|
return window.location.hostname;
|
||||||
|
},
|
||||||
|
nowTime(){
|
||||||
|
const dt = new Date();
|
||||||
|
return dt.getHours()+':'+dt.getMinutes();
|
||||||
|
},
|
||||||
|
lighter(){
|
||||||
|
if (this.values.primary != undefined){
|
||||||
|
return this.lightenColor(this.values.primary);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
lightenColor(col,amt = 20) {
|
||||||
|
var usePound = false;
|
||||||
|
if ( col[0] == "#" ) {
|
||||||
|
col = col.slice(1);
|
||||||
|
usePound = true;
|
||||||
|
}
|
||||||
|
|
||||||
|
var num = parseInt(col,16);
|
||||||
|
|
||||||
|
var r = (num >> 16) + amt;
|
||||||
|
|
||||||
|
if ( r > 255 ) r = 255;
|
||||||
|
else if (r < 0) r = 0;
|
||||||
|
|
||||||
|
var b = ((num >> 8) & 0x00FF) + amt;
|
||||||
|
|
||||||
|
if ( b > 255 ) b = 255;
|
||||||
|
else if (b < 0) b = 0;
|
||||||
|
|
||||||
|
var g = (num & 0x0000FF) + amt;
|
||||||
|
|
||||||
|
if ( g > 255 ) g = 255;
|
||||||
|
else if ( g < 0 ) g = 0;
|
||||||
|
|
||||||
|
return (usePound?"#":"") + (g | (b << 8) | (r << 16)).toString(16);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
#gfxer {
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
#mobile {
|
||||||
|
width: 400px;
|
||||||
|
height: 800px;
|
||||||
|
border-radius: 20px;
|
||||||
|
border: 4px solid gray;
|
||||||
|
background: #fff;
|
||||||
|
overflow-y: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
#m-content{
|
||||||
|
border-radius: 20px;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
#browser {
|
||||||
|
border-radius: 7px;
|
||||||
|
border: 4px solid silver;
|
||||||
|
min-height: 80vh;
|
||||||
|
background: #fff;
|
||||||
|
overflow-y: auto;
|
||||||
|
overflow-x: hidden;
|
||||||
|
|
||||||
|
#bar {
|
||||||
|
display: block;
|
||||||
|
background: silver;
|
||||||
|
position: relative;
|
||||||
|
text-align: center;
|
||||||
|
padding-top: 3px;
|
||||||
|
|
||||||
|
height: 30px;
|
||||||
|
|
||||||
|
&:before {
|
||||||
|
content: ' ';
|
||||||
|
width: 15px;
|
||||||
|
height: 15px;
|
||||||
|
border-radius: 50%;
|
||||||
|
background: red;
|
||||||
|
position: absolute;
|
||||||
|
top: 5px;
|
||||||
|
right: 5px;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
&:after {
|
||||||
|
content: ' ';
|
||||||
|
width: 15px;
|
||||||
|
height: 15px;
|
||||||
|
border-radius: 50%;
|
||||||
|
background: #00d75c;
|
||||||
|
position: absolute;
|
||||||
|
top: 5px;
|
||||||
|
right: 35px;
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.item-gfx:hover {
|
||||||
|
background: #ffffff22;
|
||||||
|
}
|
||||||
|
|
||||||
|
#items-icon {
|
||||||
|
text-align: center;
|
||||||
|
|
||||||
|
i {
|
||||||
|
font-size: 75px;
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
text-align: justify;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-read-more {
|
||||||
|
border: 1px solid gray;
|
||||||
|
display: block;
|
||||||
|
padding: 5px;
|
||||||
|
box-shadow: var(--shadow);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
#big-box {
|
||||||
|
margin-top: 1rem;
|
||||||
|
padding: 3rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.diff{
|
||||||
|
filter: invert(1);mix-blend-mode: difference;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,85 @@
|
|||||||
|
<template>
|
||||||
|
<div id="shadow-input">
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-10">
|
||||||
|
<input type="range" class="form-range" v-model="x" min="-99" max="99">
|
||||||
|
</div>
|
||||||
|
<div class="col-2 text-end">
|
||||||
|
X: {{ x }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-10">
|
||||||
|
<input type="range" class="form-range" v-model="y" min="-99" max="99">
|
||||||
|
</div>
|
||||||
|
<div class="col-2 text-end">
|
||||||
|
Y: {{ y }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-9">
|
||||||
|
<input type="range" class="form-range" v-model="blur" min="0" max="50">
|
||||||
|
</div>
|
||||||
|
<div class="col-3 text-end">
|
||||||
|
Blur: {{ blur }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-9">
|
||||||
|
<input type="color" class="form-control-color" v-model="color" >
|
||||||
|
</div>
|
||||||
|
<div class="col-3 text-end">
|
||||||
|
Color
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<input type="hidden" :value="calcVal">
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: "shadow-input",
|
||||||
|
components: {},
|
||||||
|
data: () => {
|
||||||
|
return {
|
||||||
|
x: 0,
|
||||||
|
y: 0,
|
||||||
|
blur: 0,
|
||||||
|
color: '#dddddd',
|
||||||
|
mounted : false,
|
||||||
|
}
|
||||||
|
},
|
||||||
|
emits: ['update:modelValue'],
|
||||||
|
props: {
|
||||||
|
modelValue: {
|
||||||
|
default: '2px 2px 4px #ff0000'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
let spltd = this.modelValue.trim().split(' ');
|
||||||
|
console.log(spltd);
|
||||||
|
this.x = parseInt(spltd[0]);
|
||||||
|
this.y = parseInt(spltd[1]);
|
||||||
|
this.blur = parseInt(spltd[2]);
|
||||||
|
this.color = spltd[3];
|
||||||
|
this.mounted = true;
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
calcVal() {
|
||||||
|
if (!this.mounted){
|
||||||
|
return '';
|
||||||
|
}
|
||||||
|
let result = this.x+'px '+this.y+'px '+this.blur+'px '+this.color;
|
||||||
|
this.$emit('update:modelValue', result);
|
||||||
|
return result.trim();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
#shadow-input {
|
||||||
|
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,20 @@
|
|||||||
|
@extends('layouts.app')
|
||||||
|
|
||||||
|
@section('content')
|
||||||
|
<form action="{{route('admin.gfx.update')}}" method="post" class="mb-5 pb-5">
|
||||||
|
@csrf
|
||||||
|
@include('components.err')
|
||||||
|
<gfxer :items='@json(\App\Models\Gfx::all('key','label','value'))'></gfxer>
|
||||||
|
<button
|
||||||
|
data-link="{{getRoute('update')}}"
|
||||||
|
id="save-sort"
|
||||||
|
class="action-btn circle-btn"
|
||||||
|
data-bs-toggle="tooltip"
|
||||||
|
data-bs-placement="top"
|
||||||
|
data-bs-custom-class="custom-tooltip"
|
||||||
|
data-bs-title="{{__("Save")}}"
|
||||||
|
>
|
||||||
|
<i class="ri-save-2-line"></i>
|
||||||
|
</button>
|
||||||
|
</form>
|
||||||
|
@endsection
|
||||||
@ -1,10 +1,12 @@
|
|||||||
@if(session()->has('message'))
|
@if(session()->has('message'))
|
||||||
<div class="alert alert-info">
|
<div class="alert alert-info">
|
||||||
|
<i class="ri-check-double-line"></i>
|
||||||
{{ session()->get('message') }}
|
{{ session()->get('message') }}
|
||||||
</div>
|
</div>
|
||||||
@endif
|
@endif
|
||||||
@foreach($errors->all() as $err)
|
@foreach($errors->all() as $err)
|
||||||
<div class="alert alert-danger">
|
<div class="alert alert-danger">
|
||||||
|
<i class="ri-error-warning-line"></i>
|
||||||
{{$err}}
|
{{$err}}
|
||||||
</div>
|
</div>
|
||||||
@endforeach
|
@endforeach
|
||||||
|
|||||||
Loading…
Reference in New Issue