From b1f78908665f21498833b8c2aa19e0960b32f4f7 Mon Sep 17 00:00:00 2001 From: A1Gard Date: Mon, 6 May 2024 07:35:14 +0330 Subject: [PATCH] make raw page customize login page --- composer.json | 6 +- config/app.php | 1 + package.json | 1 + public/panel/images/xshop-logo.svg | 153 +++++++++++++++ resources/js/app.js | 2 +- resources/js/vendor/raw.js | 147 +++++++++++++++ resources/sass/_common.scss | 15 ++ resources/sass/_fix.scss | 4 + resources/sass/_raw.scss | 46 +++++ resources/sass/app.scss | 18 +- resources/views/auth/login.blade.php | 120 ++++++------ .../views/auth/passwords/confirm.blade.php | 2 +- .../views/auth/passwords/email.blade.php | 2 +- .../views/auth/passwords/reset.blade.php | 2 +- resources/views/auth/register.blade.php | 2 +- resources/views/auth/verify.blade.php | 2 +- resources/views/components/assets.blade.php | 7 + .../views/components/panel-footer.blade.php | 3 + .../views/components/panel-header.blade.php | 19 ++ resources/views/layouts/app.blade.php | 126 ++++++------- resources/views/layouts/raw.blade.php | 10 + resources/views/welcome.blade.php | 177 ++---------------- routes/web.php | 2 +- yarn.lock | 5 + 24 files changed, 573 insertions(+), 299 deletions(-) create mode 100644 public/panel/images/xshop-logo.svg create mode 100644 resources/js/vendor/raw.js create mode 100644 resources/sass/_common.scss create mode 100644 resources/sass/_fix.scss create mode 100644 resources/sass/_raw.scss create mode 100644 resources/views/components/assets.blade.php create mode 100644 resources/views/components/panel-footer.blade.php create mode 100644 resources/views/components/panel-header.blade.php create mode 100644 resources/views/layouts/raw.blade.php diff --git a/composer.json b/composer.json index f286098..05059d9 100644 --- a/composer.json +++ b/composer.json @@ -1,9 +1,9 @@ { - "name": "laravel/laravel", + "name": "xmen/xshop", "type": "project", "description": "The skeleton application for the Laravel framework.", - "keywords": ["laravel", "framework"], - "license": "MIT", + "keywords": ["xshop", "e-shop", "laravel","laravel-shop","open-source-shop"], + "license": "GPL-3.0-or-later", "require": { "php": "^8.2", "carlos-meneses/laravel-mpdf": "^2.1", diff --git a/config/app.php b/config/app.php index f467267..ffd5163 100644 --- a/config/app.php +++ b/config/app.php @@ -40,6 +40,7 @@ return [ */ 'debug' => (bool) env('APP_DEBUG', false), + 'deployed' => (bool) env('APP_DEPLOYED', false), /* |-------------------------------------------------------------------------- diff --git a/package.json b/package.json index 06e478a..0a3595c 100644 --- a/package.json +++ b/package.json @@ -17,6 +17,7 @@ }, "dependencies": { "remixicon": "^4.2.0", + "three": "0.150.0", "vazirmatn": "^33.0.3" } } diff --git a/public/panel/images/xshop-logo.svg b/public/panel/images/xshop-logo.svg new file mode 100644 index 0000000..d114efc --- /dev/null +++ b/public/panel/images/xshop-logo.svg @@ -0,0 +1,153 @@ + + + + diff --git a/resources/js/app.js b/resources/js/app.js index 4158f48..c74182f 100644 --- a/resources/js/app.js +++ b/resources/js/app.js @@ -6,7 +6,7 @@ import './bootstrap'; import { createApp } from 'vue'; - +import './vendor/raw.js'; /** * Next, we will create a fresh Vue application instance. You may then begin * registering components with the application instance so they are ready diff --git a/resources/js/vendor/raw.js b/resources/js/vendor/raw.js new file mode 100644 index 0000000..e2c2af9 --- /dev/null +++ b/resources/js/vendor/raw.js @@ -0,0 +1,147 @@ +import { BufferAttribute, Clock, Color, PerspectiveCamera, PlaneGeometry, Points, Scene, ShaderMaterial, WebGLRenderer } from 'three'; + +window.addEventListener('load',function () { + + if (document.querySelector('canvas#webgl') == null){ + return ; + } + /** + |-------------------------------------------------- + | Constants + |-------------------------------------------------- + */ + const sizes = { + width: window.innerWidth, + height: window.innerHeight + } + const canvas = document.querySelector('canvas#webgl'); + const scene = new Scene() + /** + |-------------------------------------------------- + | Camera + |-------------------------------------------------- + */ + const camera = new PerspectiveCamera(75, sizes.width / sizes.height, 0.1, 100) + camera.position.z = 10 + camera.position.y = 1.1 + camera.position.x = 0 + scene.add(camera) + + + + + +// const color = 0xFFFFFF; +// const intensity = 3; +// const light = new THREE.DirectionalLight( color, intensity ); +// light.position.set( - 1, 2, 4 ); +// scene.add( light ); + + + /** + |-------------------------------------------------- + | Plane + |-------------------------------------------------- + */ + const planeGeometry = new PlaneGeometry(20, 20, 250, 250) + const planeMaterial = new ShaderMaterial({ + uniforms: { + uTime: { value: 0 }, + uElevation: { value: 0.482 } + }, + vertexShader: ` + uniform float uTime; + uniform float uElevation; + + attribute float aSize; + + varying float vPositionY; + varying float vPositionZ; + + void main() { + vec4 modelPosition = modelMatrix * vec4(position, 1.0); + modelPosition.y = sin(modelPosition.x - uTime) * sin(modelPosition.z * 0.6 + uTime) * uElevation; + + vec4 viewPosition = viewMatrix * modelPosition; + gl_Position = projectionMatrix * viewPosition; + + gl_PointSize = 2.0 * aSize; + gl_PointSize *= ( 1.0 / - viewPosition.z ); + + vPositionY = modelPosition.y; + vPositionZ = modelPosition.z; + } + `, + fragmentShader: ` + varying float vPositionY; + varying float vPositionZ; + + void main() { + float strength = (vPositionY + 0.25) * 0.3; + gl_FragColor = vec4(3.0, 0.0, 0.0, strength); + } + `, + transparent: true, + }) + const planeSizesArray = new Float32Array(planeGeometry.attributes.position.count) + for (let i = 0; i < planeSizesArray.length; i++) { + planeSizesArray[i] = Math.random() * 4.0 + } + planeGeometry.setAttribute('aSize', new BufferAttribute(planeSizesArray, 1)) + + const plane = new Points(planeGeometry, planeMaterial) + plane.rotation.x = - Math.PI * 0.4 + scene.add(plane) + + /** + |-------------------------------------------------- + | Resize + |-------------------------------------------------- + */ + window.addEventListener('resize', () => { + // Update sizes + sizes.width = window.innerWidth + sizes.height = window.innerHeight + + // Update camera + camera.aspect = sizes.width / sizes.height + camera.updateProjectionMatrix() + + // Update renderer + renderer.setSize(sizes.width, sizes.height) + renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2)) + }) + + /** + |-------------------------------------------------- + | Renderer + |-------------------------------------------------- + */ + const renderer = new WebGLRenderer({ + canvas: canvas, + alpha: true, + antialias: true + }) + renderer.setSize(sizes.width, sizes.height) + renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2)) + + /** + |-------------------------------------------------- + | Animate Function + |-------------------------------------------------- + */ + const clock = new Clock() + + const animate = () => { + const elapsedTime = clock.getElapsedTime() + + planeMaterial.uniforms.uTime.value = elapsedTime + + renderer.render(scene, camera) + + // Call animate again on the next frame + window.requestAnimationFrame(animate) + } + + animate(); +}); diff --git a/resources/sass/_common.scss b/resources/sass/_common.scss new file mode 100644 index 0000000..212c1b6 --- /dev/null +++ b/resources/sass/_common.scss @@ -0,0 +1,15 @@ +.circle-btn{ + width: 75px; + height: 75px; + border-radius: 50%; + background: rgba(139, 0, 139, 0.86); + backdrop-filter: blur(4px); + border: 0; + box-shadow: 0px 3px 5px #11111177, inset 0 0 0 0 darkred; + user-select: none; + cursor: pointer; + transition: 500ms; + &:hover{ + box-shadow: 0px 3px 5px #11111177, inset 0 0 0 40px darkred; + } +} diff --git a/resources/sass/_fix.scss b/resources/sass/_fix.scss new file mode 100644 index 0000000..4481f92 --- /dev/null +++ b/resources/sass/_fix.scss @@ -0,0 +1,4 @@ +.form-control:focus{ + box-shadow: 0 0 0 0.25rem rgba(133, 13, 253, 0.25); +border-color: #bc86fe; +} diff --git a/resources/sass/_raw.scss b/resources/sass/_raw.scss new file mode 100644 index 0000000..32331f7 --- /dev/null +++ b/resources/sass/_raw.scss @@ -0,0 +1,46 @@ +#raw{ + height: 100vh; + display: flex; + justify-content: center; + align-items: center; + width: 100%; + #raw-form{ + max-width: 95%; + width: 450px; + margin: auto; + background: rgba(var(--bs-body-bg),.5); + backdrop-filter: blur(4px); + box-shadow: -2px -2px 7px #560000, 2px 2px 7px #5e00b5; + position: relative; + .xshop-raw-logo{ + height: 128px; + position: absolute; + top: -64px; + margin: auto; + display: block; + left: 50%; + transform: translateX(-50%); + } + } + .circle-btn{ + position: absolute; + bottom: -35px; + left: 50%; + transform: translateX(-50%); + } +} + +#webgl { + position: fixed; + top: 0; + left: 0; + right: 0; + bottom: 0; + outline: none; + z-index: -1; + background: transparent; + width: 100%; + height: 100vh; +} + + diff --git a/resources/sass/app.scss b/resources/sass/app.scss index 1c5ec91..bfea67e 100644 --- a/resources/sass/app.scss +++ b/resources/sass/app.scss @@ -1,8 +1,24 @@ // Fonts @import 'vazirmatn/Vazirmatn-font-face.css'; - +@import "remixicon/fonts/remixicon.css"; // Variables @import 'variables'; // Bootstrap @import 'bootstrap/scss/bootstrap'; + +*{ + padding: 0; + margin: 0; +} +body{ + min-height: 100vh; + overflow-x: hidden; +} +a{ + text-decoration: none !important; +} + +@import "common"; +@import "raw"; +@import "fix"; diff --git a/resources/views/auth/login.blade.php b/resources/views/auth/login.blade.php index ea9ac94..5e4af59 100644 --- a/resources/views/auth/login.blade.php +++ b/resources/views/auth/login.blade.php @@ -1,73 +1,85 @@ -@extends('layouts.app') - +@extends('layouts.raw') +@section('title') + {{ __('Login') }} | +@endsection @section('content') -
-
-
-
-
{{ __('Login') }}
-
-
- @csrf +
+
+ {{__("Login")}} +
+ +
+ + @csrf -
- +
+ {{-- --}} -
- +
+
+ + + + - @error('email') - +
+ @error('email') + {{ $message }} - @enderror -
-
+ @enderror +
+
+ +
+ {{-- --}} -
- +
+
-
- + + + + - @error('password') - +
+ @error('password') + {{ $message }} - @enderror -
-
- -
-
-
- + @enderror +
+
- -
-
+
+
+
+ +
+
+
+ @if (Route::has('password.request')) + + {{ __('Forgot Your Password?') }} + + @endif +
+
-
-
- - - @if (Route::has('password.request')) - - {{ __('Forgot Your Password?') }} - - @endif -
-
- +
+
-
+
-
@endsection diff --git a/resources/views/auth/passwords/confirm.blade.php b/resources/views/auth/passwords/confirm.blade.php index f8c8e61..97feba6 100644 --- a/resources/views/auth/passwords/confirm.blade.php +++ b/resources/views/auth/passwords/confirm.blade.php @@ -1,4 +1,4 @@ -@extends('layouts.app') +@extends('layouts.raw') @section('content')
diff --git a/resources/views/auth/passwords/email.blade.php b/resources/views/auth/passwords/email.blade.php index d1ac783..2487448 100644 --- a/resources/views/auth/passwords/email.blade.php +++ b/resources/views/auth/passwords/email.blade.php @@ -1,4 +1,4 @@ -@extends('layouts.app') +@extends('layouts.raw') @section('content')
diff --git a/resources/views/auth/passwords/reset.blade.php b/resources/views/auth/passwords/reset.blade.php index dccf6c6..9c98701 100644 --- a/resources/views/auth/passwords/reset.blade.php +++ b/resources/views/auth/passwords/reset.blade.php @@ -1,4 +1,4 @@ -@extends('layouts.app') +@extends('layouts.raw') @section('content')
diff --git a/resources/views/auth/register.blade.php b/resources/views/auth/register.blade.php index 12cad1a..74785f8 100644 --- a/resources/views/auth/register.blade.php +++ b/resources/views/auth/register.blade.php @@ -1,4 +1,4 @@ -@extends('layouts.app') +@extends('layouts.raw') @section('content')
diff --git a/resources/views/auth/verify.blade.php b/resources/views/auth/verify.blade.php index 9f8c1bc..31c57ad 100644 --- a/resources/views/auth/verify.blade.php +++ b/resources/views/auth/verify.blade.php @@ -1,4 +1,4 @@ -@extends('layouts.app') +@extends('layouts.raw') @section('content')
diff --git a/resources/views/components/assets.blade.php b/resources/views/components/assets.blade.php new file mode 100644 index 0000000..875c2c7 --- /dev/null +++ b/resources/views/components/assets.blade.php @@ -0,0 +1,7 @@ +@if(config('app.debug') && !config('app.deployed')) + + @vite(['resources/sass/app.scss', 'resources/js/app.js']) +@else + + +@endif diff --git a/resources/views/components/panel-footer.blade.php b/resources/views/components/panel-footer.blade.php new file mode 100644 index 0000000..934d70d --- /dev/null +++ b/resources/views/components/panel-footer.blade.php @@ -0,0 +1,3 @@ +@yield('js-content') + + diff --git a/resources/views/components/panel-header.blade.php b/resources/views/components/panel-header.blade.php new file mode 100644 index 0000000..3e983a6 --- /dev/null +++ b/resources/views/components/panel-header.blade.php @@ -0,0 +1,19 @@ + + + + + + + + + + + + + @yield('title') {{ config('app.name', 'Laravel') }} + + @include('components.assets') + + + diff --git a/resources/views/layouts/app.blade.php b/resources/views/layouts/app.blade.php index a6970da..1db65d5 100644 --- a/resources/views/layouts/app.blade.php +++ b/resources/views/layouts/app.blade.php @@ -1,80 +1,64 @@ - - - - - +@include('components.panel-header') +
+ +
+ -
- @yield('content') -
-
- - +
+ @yield('content') +
+
+@include('components.panel-footer') diff --git a/resources/views/layouts/raw.blade.php b/resources/views/layouts/raw.blade.php new file mode 100644 index 0000000..8eb39b6 --- /dev/null +++ b/resources/views/layouts/raw.blade.php @@ -0,0 +1,10 @@ +@include('components.panel-header') +
+ +
+
+ @yield('content') +
+
+
+@include('components.panel-footer') diff --git a/resources/views/welcome.blade.php b/resources/views/welcome.blade.php index 4ece386..68ba5cc 100644 --- a/resources/views/welcome.blade.php +++ b/resources/views/welcome.blade.php @@ -1,164 +1,15 @@ - - - - - - - Laravel - - - - - + + + + + + + Document + + +

+ xshop +

+ diff --git a/routes/web.php b/routes/web.php index 29b38e2..0fc9f63 100644 --- a/routes/web.php +++ b/routes/web.php @@ -6,6 +6,6 @@ Route::get('/', function () { return view('welcome'); }); -Auth::routes(); +Auth::routes(['register' => false]); Route::get('/home', [App\Http\Controllers\HomeController::class, 'index'])->name('home'); diff --git a/yarn.lock b/yarn.lock index 3c69fc2..857c2d9 100644 --- a/yarn.lock +++ b/yarn.lock @@ -585,6 +585,11 @@ sass@^1.56.1: resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-1.2.0.tgz#16b809c162517b5b8c3e7dcd315a2a5c2612b2af" integrity sha512-itJW8lvSA0TXEphiRoawsCksnlf8SyvmFzIhltqAHluXd88pkCd+cXJVHTDwdCr0IzwptSm035IHQktUu1QUMg== +three@0.150.0: + version "0.150.0" + resolved "https://registry.yarnpkg.com/three/-/three-0.150.0.tgz#38a324c3976e07799671d06d99f01b02a2fe65c6" + integrity sha512-12oqqBZom9fb5HtX3rD8qPVnamojuiN5Os7r0x8s3HQ+WHRwnEyzl2XU3aEKocsDkG++rkE9+HWzx77O59NXtw== + to-regex-range@^5.0.1: version "5.0.1" resolved "https://registry.yarnpkg.com/to-regex-range/-/to-regex-range-5.0.1.tgz#1648c44aae7c8d988a326018ed72f5b4dd0392e4"