From 2cc4a75976240e400cd1341acc6f3e08f644d9a4 Mon Sep 17 00:00:00 2001
From: A1Gard <a1gard@4xmen.ir>
Date: Sun, 30 Jun 2024 08:37:02 +0330
Subject: [PATCH] added GFX to panel

---
 app/Helpers/Helper.php                        |   4 +
 .../Controllers/Admin/CategoryController.php  |   1 -
 app/Http/Controllers/Admin/GfxController.php  |  26 ++
 app/Models/Gfx.php                            |  11 +
 .../2024_06_30_034527_create_gfxes_table.php  |  31 ++
 database/seeders/DatabaseSeeder.php           |   1 +
 database/seeders/GfxSeeder.php                |  76 ++++
 database/seeders/StateSeeder.php              |  11 +
 resources/js/app.js                           |   3 +
 resources/js/components/BorderRadiosInput.vue | 124 ++++++
 resources/js/components/Gfxer.vue             | 399 ++++++++++++++++++
 resources/js/components/ShadowInput.vue       |  85 ++++
 resources/views/admin/commons/gfx.blade.php   |  20 +
 resources/views/components/err.blade.php      |   2 +
 .../components/panel-side-navbar.blade.php    |   2 +-
 routes/web.php                                |   7 +
 16 files changed, 801 insertions(+), 2 deletions(-)
 create mode 100644 app/Http/Controllers/Admin/GfxController.php
 create mode 100644 app/Models/Gfx.php
 create mode 100644 database/migrations/2024_06_30_034527_create_gfxes_table.php
 create mode 100644 database/seeders/GfxSeeder.php
 create mode 100644 resources/js/components/BorderRadiosInput.vue
 create mode 100644 resources/js/components/Gfxer.vue
 create mode 100644 resources/js/components/ShadowInput.vue
 create mode 100644 resources/views/admin/commons/gfx.blade.php

diff --git a/app/Helpers/Helper.php b/app/Helpers/Helper.php
index 1303b9e..2b022a7 100644
--- a/app/Helpers/Helper.php
+++ b/app/Helpers/Helper.php
@@ -212,6 +212,10 @@ function logAdmin($method, $cls, $id): void
     ]);
 }
 
+function gfx(){
+    return \App\Models\Gfx::pluck('value','key');
+}
+
 
 /**
  * build query with excepts
diff --git a/app/Http/Controllers/Admin/CategoryController.php b/app/Http/Controllers/Admin/CategoryController.php
index 66e1e49..adb439b 100644
--- a/app/Http/Controllers/Admin/CategoryController.php
+++ b/app/Http/Controllers/Admin/CategoryController.php
@@ -154,5 +154,4 @@ class CategoryController extends XController
     /*sort**/
 
 
-
 }
diff --git a/app/Http/Controllers/Admin/GfxController.php b/app/Http/Controllers/Admin/GfxController.php
new file mode 100644
index 0000000..5433ae8
--- /dev/null
+++ b/app/Http/Controllers/Admin/GfxController.php
@@ -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')]);
+    }
+}
diff --git a/app/Models/Gfx.php b/app/Models/Gfx.php
new file mode 100644
index 0000000..5b49707
--- /dev/null
+++ b/app/Models/Gfx.php
@@ -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;
+}
diff --git a/database/migrations/2024_06_30_034527_create_gfxes_table.php b/database/migrations/2024_06_30_034527_create_gfxes_table.php
new file mode 100644
index 0000000..790b4b9
--- /dev/null
+++ b/database/migrations/2024_06_30_034527_create_gfxes_table.php
@@ -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');
+    }
+};
diff --git a/database/seeders/DatabaseSeeder.php b/database/seeders/DatabaseSeeder.php
index 400b0b0..38cb4c8 100644
--- a/database/seeders/DatabaseSeeder.php
+++ b/database/seeders/DatabaseSeeder.php
@@ -33,6 +33,7 @@ class DatabaseSeeder extends Seeder
                 ProductSeeder::class,
                 CommentSeeder::class,
                 SettingSeeder::class,
+                GfxSeeder::class,
             ]
         );
     }
diff --git a/database/seeders/GfxSeeder.php b/database/seeders/GfxSeeder.php
new file mode 100644
index 0000000..edfd66a
--- /dev/null
+++ b/database/seeders/GfxSeeder.php
@@ -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);
+        }
+    }
+}
diff --git a/database/seeders/StateSeeder.php b/database/seeders/StateSeeder.php
index b79e23c..d1f5cd6 100644
--- a/database/seeders/StateSeeder.php
+++ b/database/seeders/StateSeeder.php
@@ -70,5 +70,16 @@ class StateSeeder extends Seeder
                 $c->save();
             }
         }
+
+        // dehloran
+        City::whereId(250)->update([
+            'lat'=> 32.6894,
+            'lng' => 47.2691,
+        ]);
+        // karaj
+        City::whereId(228)->update([
+            'lat'=> 35.8439,
+            'lng' => 50.9715,
+        ]);
     }
 }
diff --git a/resources/js/app.js b/resources/js/app.js
index d9b083f..a04354f 100644
--- a/resources/js/app.js
+++ b/resources/js/app.js
@@ -87,6 +87,9 @@ app.component('meta-input', MetaInput);
 import MorphSelector from "./components/MorphSelector.vue";
 app.component('morph-selector', MorphSelector);
 
+import Gfxer from "./components/Gfxer.vue";
+app.component('gfxer', Gfxer);
+
 
 /**
  * The following block of code may be used to automatically register your
diff --git a/resources/js/components/BorderRadiosInput.vue b/resources/js/components/BorderRadiosInput.vue
new file mode 100644
index 0000000..5010cd7
--- /dev/null
+++ b/resources/js/components/BorderRadiosInput.vue
@@ -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>
diff --git a/resources/js/components/Gfxer.vue b/resources/js/components/Gfxer.vue
new file mode 100644
index 0000000..8c4c31b
--- /dev/null
+++ b/resources/js/components/Gfxer.vue
@@ -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>
diff --git a/resources/js/components/ShadowInput.vue b/resources/js/components/ShadowInput.vue
new file mode 100644
index 0000000..152309b
--- /dev/null
+++ b/resources/js/components/ShadowInput.vue
@@ -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>
diff --git a/resources/views/admin/commons/gfx.blade.php b/resources/views/admin/commons/gfx.blade.php
new file mode 100644
index 0000000..88abd3d
--- /dev/null
+++ b/resources/views/admin/commons/gfx.blade.php
@@ -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
diff --git a/resources/views/components/err.blade.php b/resources/views/components/err.blade.php
index 5d30f23..4b55b28 100755
--- a/resources/views/components/err.blade.php
+++ b/resources/views/components/err.blade.php
@@ -1,10 +1,12 @@
 @if(session()->has('message'))
     <div class="alert alert-info">
+        <i class="ri-check-double-line"></i>
         {{ session()->get('message') }}
     </div>
 @endif
 @foreach($errors->all() as $err)
     <div class="alert alert-danger">
+        <i class="ri-error-warning-line"></i>
         {{$err}}
     </div>
 @endforeach
diff --git a/resources/views/components/panel-side-navbar.blade.php b/resources/views/components/panel-side-navbar.blade.php
index 3cbc827..91ba02f 100644
--- a/resources/views/components/panel-side-navbar.blade.php
+++ b/resources/views/components/panel-side-navbar.blade.php
@@ -129,7 +129,7 @@
                     </a>
                 </li>
                 <li>
-                    <a href="">
+                    <a href="{{route('admin.gfx.index')}}">
                         <i class="ri-color-filter-line"></i>
                         {{__("Graphic")}}
                     </a>
diff --git a/routes/web.php b/routes/web.php
index 13a563b..1ea2132 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -265,6 +265,13 @@ Route::prefix(config('app.panel.prefix'))->name('admin.')->group(
                         Route::post('update', [\App\Http\Controllers\Admin\SettingController::class, "update"])->name('update');
                     }
                 );
+                Route::prefix('gfx')->name('gfx.')->group(
+                    function () {
+                        Route::get('index', [\App\Http\Controllers\Admin\GfxController::class, "index"])->name('index');
+//                        Route::post('store', [\App\Http\Controllers\Admin\SettingController::class, "store"])->name('store');
+                        Route::post('update', [\App\Http\Controllers\Admin\GfxController::class, "update"])->name('update');
+                    }
+                );
 
             });