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 - - - -
- -
-
-
-
- -
- @if (Route::has('login')) - - @endif -
- -
-
- -
- Laravel documentation screenshot - -
-
- -
-
-
- -
- -
-

Documentation

- -

- Laravel has wonderful documentation covering every aspect of the framework. Whether you are a newcomer or have prior experience with Laravel, we recommend reading our documentation from beginning to end. -

-
-
- - -
- - - -
- -
- -
-

Laracasts

- -

- Laracasts offers thousands of video tutorials on Laravel, PHP, and JavaScript development. Check them out, see for yourself, and massively level up your development skills in the process. -

-
- - - - - -
- -
- -
-

Laravel News

- -

- Laravel News is a community driven portal and newsletter aggregating all of the latest and most important news in the Laravel ecosystem, including new package releases and tutorials. -

-
- - - - -
-
- - - - - -
- -
-

Vibrant Ecosystem

- -

- Laravel's robust library of first-party tools and libraries, such as Forge, Vapor, Nova, Envoyer, and Herd help you take your projects to the next level. Pair them with powerful open source libraries like Cashier, Dusk, Echo, Horizon, Sanctum, Telescope, and more. -

-
-
-
-
- -
- Laravel v{{ Illuminate\Foundation\Application::VERSION }} (PHP v{{ PHP_VERSION }}) -
-
-
-
- + + + + + + + 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"