update readme. some unfinished work on writings. adding some javascript playing. can now import models from json data. tested and verified working on links

33 files changed, 7914 insertions, 38 deletions

diff --git a/README.md b/README.md
index 7dc9caf..b5e7a64 100644
--- a/README.md
+++ b/README.md
@@ -7,3 +7,18 @@ https://laravel.com/api/11.x/
 
 https://laravel.com/docs/11.x/blade
 
+#### TODO:
+- writing
+    - add drag-drop file to upload and then generate appropriate html to embed that file
+    - auto capitalization   https://marked.js.org/using_pro
+    - index filter and sort
+    - quickbuttons, for adding in snippets of things like embedding an image
+    - update markup on a timer instead of every character (and/or see if i can prevent it from making unnecessary network requests like loading embedded files)
+
+- general
+    - import any model via json
+    - links
+    - break out the canvas cursor renderer from main.js
+    
+- user dashboard system
+    
\ No newline at end of file
diff --git a/app/Http/Controllers/DashboardController.php b/app/Http/Controllers/DashboardController.php
new file mode 100644
index 0000000..7335629
--- /dev/null
+++ b/app/Http/Controllers/DashboardController.php
@@ -0,0 +1,54 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use Illuminate\Http\Request;
+use Illuminate\Support\Facades\Auth;
+
+class DashboardController extends Controller
+{
+    /**
+     * Show the user dashboard.
+     *
+     * @return \Illuminate\Contracts\Support\Renderable
+     */
+    public function index()
+    {
+        $user = Auth::user();
+
+        // You can add any additional data preparation here
+        // before passing to the view
+        
+        return view('dashboard');
+    }
+    
+    /**
+     * Show activity statistics.
+     *
+     * @return \Illuminate\Http\JsonResponse
+     */
+    public function statistics()
+    {
+        $user = Auth::user();
+        
+        $stats = [
+            'files' => [
+                'count' => $user->files()->count(),
+                'size' => $user->files()->sum('size'),
+                'recent' => $user->files()->latest()->take(5)->get()
+            ],
+            'writings' => [
+                'count' => $user->writings()->count(),
+                'recent' => $user->writings()->latest()->take(5)->get()
+            ],
+            'storage' => [
+                'used' => $user->getStorageUsed(),
+                'total' => $user->storage_quota,
+                'percent' => min(100, round(($user->getStorageUsed() / max(1, $user->storage_quota)) * 100))
+            ]
+        ];
+        
+        return response()->json($stats);
+    }
+
+}
diff --git a/app/Http/Controllers/FileController.php b/app/Http/Controllers/FileController.php
index c56b6f2..5283ad5 100644
--- a/app/Http/Controllers/FileController.php
+++ b/app/Http/Controllers/FileController.php
@@ -3,63 +3,259 @@
 namespace App\Http\Controllers;
 
 use App\Models\File;
+use App\Models\Tag;
 use Illuminate\Http\Request;
+use Illuminate\Support\Facades\Storage;
+use Illuminate\Support\Facades\Auth;
+use Carbon\Carbon;
 
 class FileController extends Controller
 {
     /**
-     * Display a listing of the resource.
+     * Display a listing of files.
      */
-    public function index()
+    public function index(Request $request)
     {
-        //
+        $baseDir = 'storage/uploads/';
+        $currentDir = $baseDir;
+
+        // Directory handling logic (similar to f.blade.php)
+        if ($request->has('dir')) {
+            $dir = $request->dir;
+            // Security checks...
+            $currentDir = "${baseDir}/${dir}";
+        }
+
+        // Get file listings
+        $contents = scandir($currentDir);
+        $fileData = [];
+        
+        foreach ($contents as $item) {
+            if ($item !== "." && $item !== "..") {
+                $path = $currentDir . '/' . $item;
+                $isDir = is_dir($path);
+                
+                if (!$isDir) {
+                    // Try to find file in database to get tags
+                    $fileModel = File::where('filename', $item)->first();
+                    $tags = $fileModel ? $fileModel->tags : collect();
+                } else {
+                    $tags = collect();
+                }
+                
+                // Build file info
+                $fileData[] = [
+                    'name' => $item,
+                    'path' => $path,
+                    'is_dir' => $isDir,
+                    'size' => $isDir ? 0 : filesize($path),
+                    'modified' => filemtime($path),
+                    'extension' => $isDir ? '' : pathinfo($item, PATHINFO_EXTENSION),
+                    'tags' => $tags
+                ];
+            }
+        }
+        
+        // Get all available tags for the tagging UI
+        $allTags = Tag::orderBy('label')->get();
+        
+        return view('files.index', compact('fileData', 'allTags', 'currentDir'));
     }
 
     /**
-     * Show the form for creating a new resource.
+     * Store a newly created file in storage.
      */
-    public function create()
+    public function store(Request $request)
     {
-        //
+        $dir = 'uploads';
+        if ($request->has('current_dir')) {
+            // Extract relative directory path if provided
+            $dir = str_replace('storage/', '', $request->current_dir);
+        }
+        
+        // Validate files
+        $maxsize = config('filesystems.max_upload_size', 10240); // Default to 10MB
+        $validated = $request->validate([
+            'f' => "required|array|max:${maxsize}",
+            'f.*' => "required|file|max:${maxsize}"
+        ]);
+
+        $results = [
+            'num_files' => count($request->file('f')),
+            'num_uploaded' => 0,
+            'files' => []
+        ];
+        
+        // Process tags
+        $tags = [];
+        if ($request->has('tags') && !empty($request->tags)) {
+            $tags = array_map('trim', explode(',', $request->tags));
+        }
+
+        foreach ($request->file('f') as $file) {
+            $filename = $file->getClientOriginalName();
+            
+            // Avoid duplicate filenames by adding timestamp
+            if (Storage::disk('public')->exists("${dir}/${filename}")) {
+                $filename = Carbon::now()->timestamp . '_' . $filename;
+            }
+            
+            // Store the file
+            $path = $file->storeAs($dir, $filename, 'public');
+            
+            if ($path) {
+                // Create file record in database
+                $fileModel = File::create([
+                    'filename' => $filename,
+                    'path' => $path,
+                    'source' => $request->ip(),
+                    'description' => '',
+                    'md5' => md5_file($file->getRealPath()),
+                    'size' => $file->getSize(),
+                    'mime_type' => $file->getMimeType(),
+                    'user_id' => Auth::id()
+                ]);
+                
+                // Add tags if provided
+                if (!empty($tags)) {
+                    $fileModel->addTags($tags);
+                }
+                
+                $results['num_uploaded']++;
+                $results['files'][] = [
+                    'filename' => $filename,
+                    'path' => $path,
+                    'id' => $fileModel->id
+                ];
+            }
+        }
+
+        // Return based on requested response format
+        if ($request->input('response_format') === 'html') {
+            return redirect()->back()->with('success', "{$results['num_uploaded']} files uploaded successfully");
+        }
+        
+        return response()->json($results);
     }
 
     /**
-     * Store a newly created resource in storage.
+     * Add tags to an existing file
      */
-    public function store(Request $request)
+    public function addTags(Request $request, $fileId)
     {
-        //
+        $file = File::findOrFail($fileId);
+        
+        $validated = $request->validate([
+            'tags' => 'required|string'
+        ]);
+        
+        $tags = array_map('trim', explode(',', $validated['tags']));
+        $file->addTags($tags);
+        
+        if ($request->wantsJson()) {
+            return response()->json([
+                'success' => true,
+                'tags' => $file->tags
+            ]);
+        }
+        
+        return redirect()->back()->with('success', 'Tags added successfully');
     }
 
     /**
-     * Display the specified resource.
+     * Remove a tag from a file
      */
-    public function show(File $file)
+    public function removeTag(Request $request, $fileId, $tagId)
     {
-        //
+        $file = File::findOrFail($fileId);
+        $tag = Tag::findOrFail($tagId);
+        
+        $file->tags()->detach($tagId);
+        $tag->decrement('refs');
+        
+        if ($request->wantsJson()) {
+            return response()->json([
+                'success' => true
+            ]);
+        }
+        
+        return redirect()->back()->with('success', 'Tag removed');
     }
 
     /**
-     * Show the form for editing the specified resource.
+     * Display the specified file info
      */
-    public function edit(File $file)
+    public function show(File $file)
     {
-        //
+        return view('files.show', compact('file'));
     }
 
     /**
-     * Update the specified resource in storage.
+     * Update the specified file's info
      */
     public function update(Request $request, File $file)
     {
-        //
+        $validated = $request->validate([
+            'description' => 'nullable|string',
+            'tags' => 'nullable|string'
+        ]);
+        
+        $file->description = $validated['description'] ?? $file->description;
+        $file->save();
+        
+        if (isset($validated['tags'])) {
+            $tags = array_map('trim', explode(',', $validated['tags']));
+            $file->tags()->detach();
+            $file->addTags($tags);
+        }
+        
+        return redirect()->back()->with('success', 'File updated successfully');
     }
 
     /**
-     * Remove the specified resource from storage.
+     * Remove the specified file
      */
     public function destroy(File $file)
     {
-        //
+        // Remove the file from storage
+        if (Storage::disk('public')->exists($file->path)) {
+            Storage::disk('public')->delete($file->path);
+        }
+        
+        // Delete from database (will auto detach tags)
+        $file->delete();
+        
+        return redirect()->route('files.index')->with('success', 'File deleted successfully');
+    }
+
+    /**
+     * Download a file
+     */
+    public function download($filename)
+    {
+        $file = File::where('filename', $filename)->first();
+        
+        if (!$file) {
+            // Try to find file in storage even if not in DB
+            $path = 'uploads/' . $filename;
+            if (Storage::disk('public')->exists($path)) {
+                return Storage::disk('public')->download($path);
+            }
+            
+            abort(404, 'File not found');
+        }
+        
+        return Storage::disk('public')->download($file->path);
+    }
+
+    /**
+     * List files by tag
+     */
+    public function byTag($tagId)
+    {
+        $tag = Tag::findOrFail($tagId);
+        $files = $tag->files()->paginate(20);
+        
+        return view('files.by-tag', compact('tag', 'files'));
     }
-}
+}
\ No newline at end of file
diff --git a/app/Http/Controllers/SiteController.php b/app/Http/Controllers/SiteController.php
index 2a2df47..722cc91 100644
--- a/app/Http/Controllers/SiteController.php
+++ b/app/Http/Controllers/SiteController.php
@@ -3,6 +3,7 @@
 namespace App\Http\Controllers;
 
 use Illuminate\Http\Request;
+use Illuminate\Support\Facades\Auth;
 
 use Storage;
 use Carbon\Carbon;
@@ -10,6 +11,29 @@ use Carbon\Carbon;
 class SiteController extends Controller
 {
 
+    public static $MODELS = [
+        'User',
+        'File',
+        'Link',
+        'Tag',
+        'Writing',
+        'Inventory',
+        'Item',
+        'Role',
+        'Transaction'
+    ];
+    public static $MODELS_LC_PLURAL = [
+        'users',
+        'files',
+        'links',
+        'tags',
+        'writings',
+        'inventories',
+        'items',
+        'roles',
+        'transactions'
+    ];
+
     //returns an env mapping to be used by client. pretty much a subset of laravel app's env, but might also have addition things
     public static function jsenv(){
         $vars = [
@@ -105,17 +129,29 @@ class SiteController extends Controller
 
     //todo 2/14
     public function importItems(Request $request) {
+        if (Auth::user()->role != 0) { //admin
+            return response()->json([
+                'success' => false,
+                'message' => 'Unauthorized'
+            ], 401);
+        }
         if (isset($request->modelType)){ //model type must be specified as a string
             $modelClass = 'App\\Models\\' . ucfirst($request->modelType);
             if (class_exists($modelClass)){
                 $jsonFile = $request->file('jsonFile');
-                var_dump($jsonFile);
-                return;
-            
+                if ($jsonFile == null){
+                    return response()->json([
+                        'success' => false,
+                        'message' => 'No file uploaded'
+                    ], 400);
+                }
+                $f = str($jsonFile->get());
+                $items = json_decode($f); //this should be an array
+                //TODO verify valid json
                 if (!is_array($items)) {
                     return response()->json([
                         'success' => false,
-                        'message' => 'Input must be an array of items'
+                        'message' => 'json in submitted file must be an array of items'
                     ], 400);
                 }
 
@@ -125,8 +161,13 @@ class SiteController extends Controller
                 foreach ($items as $item) {
                     try {
                         $instance = new $modelClass();
-                        $instance->fill($item);
-                        $instance->save();
+                        foreach ($instance->fillable as $field) {
+                            if (isset($item->$field)){
+                                $instance->$field = $item->$field;
+                            }
+                        }
+                        $instance->user_id = Auth::user()->id;
+                        $instance->saveOrFail();
                         $imported++;
                     } catch (\Exception $e) {
                         $failed++;
diff --git a/app/Models/File.php b/app/Models/File.php
index e73ce08..8fb08ab 100644
--- a/app/Models/File.php
+++ b/app/Models/File.php
@@ -9,7 +9,71 @@ class File extends Model
 {
     use AutoFillable;    
 
-    public function tags(){
+    protected $fillable = [
+        'filename',
+        'path',
+        'source',
+        'description',
+        'md5',
+        'size',
+        'mime_type',
+        'user_id'
+    ];
+
+    public function tags()
+    {
         return $this->belongsToMany(Tag::class);
     }
-}
+
+    public function user()
+    {
+        return $this->belongsTo(User::class);
+    }
+
+    // Helper methods for tags
+    public function addTags(array $tagNames)
+    {
+        $tagIds = [];
+        
+        foreach ($tagNames as $tagName) {
+            $tagName = trim($tagName);
+            if (empty($tagName)) continue;
+            
+            // Find or create tag
+            $tag = Tag::firstOrCreate(
+                ['label' => $tagName],
+                ['refs' => 0]
+            );
+            
+            // Increment ref count if new relationship
+            if (!$this->tags->contains($tag->id)) {
+                $tag->increment('refs');
+            }
+            
+            $tagIds[] = $tag->id;
+        }
+        
+        if (!empty($tagIds)) {
+            $this->tags()->syncWithoutDetaching($tagIds);
+        }
+        
+        return $this;
+    }
+    
+    public function removeTags(array $tagNames)
+    {
+        $tagsToRemove = Tag::whereIn('label', $tagNames)->get();
+        
+        foreach ($tagsToRemove as $tag) {
+            $this->tags()->detach($tag->id);
+            $tag->decrement('refs');
+        }
+        
+        return $this;
+    }
+    
+    public function getTagsString()
+    {
+        return $this->tags->pluck('label')->implode(', ');
+    }
+}
\ No newline at end of file
diff --git a/app/Models/Link.php b/app/Models/Link.php
index 3373510..6f3648c 100644
--- a/app/Models/Link.php
+++ b/app/Models/Link.php
@@ -8,7 +8,7 @@ use App\Models\Traits\AutoFillable;
 class Link extends Model
 {
     //use AutoFillable;
-    protected $fillable = ['label', 'url', 'description', 'user_id'];
+    public $fillable = ['label', 'url', 'description', 'user_id'];
 
     public function tags(){
         return $this->belongsToMany(Tag::class);
diff --git a/app/Models/Role.php b/app/Models/Role.php
index e9a5f86..78412c4 100644
--- a/app/Models/Role.php
+++ b/app/Models/Role.php
@@ -6,6 +6,14 @@ use Illuminate\Database\Eloquent\Model;
 
 class Role extends Model
 {
+
+    protected $fillable = [
+        'name',
+        'description',
+        'max_filesize',
+        'storage_quota'
+    ];
+
     public function users()
     {
         return $this->belongsToMany(User::class);
diff --git a/app/Models/User.php b/app/Models/User.php
index e908679..3c5e429 100755
--- a/app/Models/User.php
+++ b/app/Models/User.php
@@ -60,4 +60,19 @@ class User extends Authenticatable
     public function links(){
         return $this->hasMany(Link::class);
     }
+
+    public function getStorageQuota(){
+        $roles = $this->roles();
+        $quota = 0;
+        foreach ($roles as $r){
+            if ($role->storage_quota > $quota){
+                $quota = $role->storage_quota;
+            }
+        }
+        return $quota;
+    }
+
+    public function getStorageUsed(){
+        
+    }
 }
diff --git a/database/migrations/2025_02_26_223431_roles_add_filefields.php b/database/migrations/2025_02_26_223431_roles_add_filefields.php
new file mode 100644
index 0000000..22222b5
--- /dev/null
+++ b/database/migrations/2025_02_26_223431_roles_add_filefields.php
@@ -0,0 +1,35 @@
+<?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::table('roles', function (Blueprint $table) {
+            if (!Schema::hasColumn('roles', 'max_file_size')) {
+                $table->integer('max_filesize')->default(0); // in KB, 0 means use system default
+            }
+            
+            if (!Schema::hasColumn('roles', 'storage_quota')) {
+                $table->integer('storage_quota')->default(102400)->after('max_filesize'); // 100MB in KB
+            }
+        });
+        
+    }
+
+    /**
+     * Reverse the migrations.
+     */
+    public function down(): void
+    {
+        Schema::table('roles', function (Blueprint $table) {
+            $table->dropColumn(['max_filesize', 'storage_quota']);
+        });
+    }
+};
diff --git a/database/migrations/2025_03_04_050210_link_url_unique.php b/database/migrations/2025_03_04_050210_link_url_unique.php
new file mode 100644
index 0000000..1d75c06
--- /dev/null
+++ b/database/migrations/2025_03_04_050210_link_url_unique.php
@@ -0,0 +1,28 @@
+<?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::table('links', function (Blueprint $table) {
+            if (Schema::hasColumn('links', 'url')){
+                $table->unique('url');
+            }
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     */
+    public function down(): void
+    {
+        $table->dropUnique('url');
+    }
+};
diff --git a/database/migrations/99999_pivots.php b/database/migrations/99999_pivots.php
index 94f155d..5cae45a 100644
--- a/database/migrations/99999_pivots.php
+++ b/database/migrations/99999_pivots.php
@@ -36,12 +36,12 @@ return new class extends Migration
             $table->integer('tag_id')->unsigned()->index();
             $table->foreign('tag_id')->references('id')->on('tags')->onDelete('cascade');
         });
-        /* TODO Schema::create('role_user', function (Blueprint $table) {
+        Schema::create('role_user', function (Blueprint $table) {
             $table->integer('user_id')->unsigned()->index();
             $table->foreign('user_id')->references('id')->on('users')->onDelete('cascade');
             $table->integer('role_id')->unsigned()->index();
             $table->foreign('role_id')->references('id')->on('roles')->onDelete('cascade');
-        });*/
+        });
     }
 
     /**
diff --git a/database/seeders/RoleSeeder.php b/database/seeders/RoleSeeder.php
index f129660..93969ed 100644
--- a/database/seeders/RoleSeeder.php
+++ b/database/seeders/RoleSeeder.php
@@ -12,6 +12,23 @@ class RoleSeeder extends Seeder
      */
     public function run(): void
     {
-        //
+        $roles = [
+            [
+                'name' => 'admin',
+                'description' => 'Administrator',
+                'max_filesize' => 1000000000,
+                'storage_quota' => 1000000000
+            ],
+            [
+                'name' => 'user',
+                'description' => 'User',
+                'max_filesize' => 10000000,
+                'storage_quota' => 10000000
+            ]
+        ];
+
+        foreach ($roles as $role) {
+            \App\Models\Role::create($role);
+        }
     }
 }
diff --git a/resources/css/jstoys.css b/resources/css/jstoys.css
new file mode 100644
index 0000000..add19e2
--- /dev/null
+++ b/resources/css/jstoys.css
@@ -0,0 +1,85 @@
+body {
+    margin: 0;
+    padding: 20px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    font-family: Arial, sans-serif;
+    color: #FFF;
+}
+
+canvas {
+    border: 1px solid #333;
+    margin-bottom: 20px;
+    background: #000;
+}
+
+.controls {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 15px;
+    margin-bottom: 20px;
+    max-width: 800px;
+}
+
+.control-group {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+label {
+    margin-bottom: 5px;
+}
+
+button {
+    padding: 8px 16px;
+    background: #8B0000;
+    color: white;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+    font-weight: bold;
+    margin: 0 5px;
+}
+
+button:hover {
+    background: #A00000;
+}
+
+#bloodCanvas {
+    cursor: crosshair;
+}
+
+.action-buttons {
+    display: flex;
+    gap: 10px;
+    margin-bottom: 15px;
+}
+
+.status {
+    background: rgba(50, 50, 50, 0.8);
+    padding: 10px 20px;
+    border-radius: 4px;
+    margin-bottom: 20px;
+}
+
+.status span {
+    font-weight: bold;
+}
+
+.status.success {
+    color: #90ee90;
+}
+
+.status.error {
+    color: #ff6666;
+}
+
+.performance {
+    background: rgba(30, 30, 30, 0.8);
+    padding: 8px 16px;
+    border-radius: 4px;
+    margin-top: 10px;
+    font-family: monospace;
+}
\ No newline at end of file
diff --git a/resources/css/normalize.css b/resources/css/normalize.css
new file mode 100755
index 0000000..81c6f31
--- /dev/null
+++ b/resources/css/normalize.css
@@ -0,0 +1,427 @@
+/*! normalize.css v3.0.2 | MIT License | git.io/normalize */
+
+/**
+ * 1. Set default font family to sans-serif.
+ * 2. Prevent iOS text size adjust after orientation change, without disabling
+ *    user zoom.
+ */
+
+html {
+  font-family: sans-serif; /* 1 */
+  -ms-text-size-adjust: 100%; /* 2 */
+  -webkit-text-size-adjust: 100%; /* 2 */
+}
+
+/**
+ * Remove default margin.
+ */
+
+body {
+  margin: 0;
+}
+
+/* HTML5 display definitions
+   ========================================================================== */
+
+/**
+ * Correct `block` display not defined for any HTML5 element in IE 8/9.
+ * Correct `block` display not defined for `details` or `summary` in IE 10/11
+ * and Firefox.
+ * Correct `block` display not defined for `main` in IE 11.
+ */
+
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+main,
+menu,
+nav,
+section,
+summary {
+  display: block;
+}
+
+/**
+ * 1. Correct `inline-block` display not defined in IE 8/9.
+ * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
+ */
+
+audio,
+canvas,
+progress,
+video {
+  display: inline-block; /* 1 */
+  vertical-align: baseline; /* 2 */
+}
+
+/**
+ * Prevent modern browsers from displaying `audio` without controls.
+ * Remove excess height in iOS 5 devices.
+ */
+
+audio:not([controls]) {
+  display: none;
+  height: 0;
+}
+
+/**
+ * Address `[hidden]` styling not present in IE 8/9/10.
+ * Hide the `template` element in IE 8/9/11, Safari, and Firefox < 22.
+ */
+
+[hidden],
+template {
+  display: none;
+}
+
+/* Links
+   ========================================================================== */
+
+/**
+ * Remove the gray background color from active links in IE 10.
+ */
+
+a {
+  background-color: transparent;
+}
+
+/**
+ * Improve readability when focused and also mouse hovered in all browsers.
+ */
+
+a:active,
+a:hover {
+  outline: 0;
+}
+
+/* Text-level semantics
+   ========================================================================== */
+
+/**
+ * Address styling not present in IE 8/9/10/11, Safari, and Chrome.
+ */
+
+abbr[title] {
+  border-bottom: 1px dotted;
+}
+
+/**
+ * Address style set to `bolder` in Firefox 4+, Safari, and Chrome.
+ */
+
+b,
+strong {
+  font-weight: bold;
+}
+
+/**
+ * Address styling not present in Safari and Chrome.
+ */
+
+dfn {
+  font-style: italic;
+}
+
+/**
+ * Address variable `h1` font-size and margin within `section` and `article`
+ * contexts in Firefox 4+, Safari, and Chrome.
+ */
+
+h1 {
+  font-size: 2em;
+  margin: 0.67em 0;
+}
+
+/**
+ * Address styling not present in IE 8/9.
+ */
+
+mark {
+  background: #ff0;
+  color: #000;
+}
+
+/**
+ * Address inconsistent and variable font size in all browsers.
+ */
+
+small {
+  font-size: 80%;
+}
+
+/**
+ * Prevent `sub` and `sup` affecting `line-height` in all browsers.
+ */
+
+sub,
+sup {
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
+
+sup {
+  top: -0.5em;
+}
+
+sub {
+  bottom: -0.25em;
+}
+
+/* Embedded content
+   ========================================================================== */
+
+/**
+ * Remove border when inside `a` element in IE 8/9/10.
+ */
+
+img {
+  border: 0;
+}
+
+/**
+ * Correct overflow not hidden in IE 9/10/11.
+ */
+
+svg:not(:root) {
+  overflow: hidden;
+}
+
+/* Grouping content
+   ========================================================================== */
+
+/**
+ * Address margin not present in IE 8/9 and Safari.
+ */
+
+figure {
+  margin: 1em 40px;
+}
+
+/**
+ * Address differences between Firefox and other browsers.
+ */
+
+hr {
+  -moz-box-sizing: content-box;
+  box-sizing: content-box;
+  height: 0;
+}
+
+/**
+ * Contain overflow in all browsers.
+ */
+
+pre {
+  overflow: auto;
+}
+
+/**
+ * Address odd `em`-unit font size rendering in all browsers.
+ */
+
+code,
+kbd,
+pre,
+samp {
+  font-family: monospace, monospace;
+  font-size: 1em;
+}
+
+/* Forms
+   ========================================================================== */
+
+/**
+ * Known limitation: by default, Chrome and Safari on OS X allow very limited
+ * styling of `select`, unless a `border` property is set.
+ */
+
+/**
+ * 1. Correct color not being inherited.
+ *    Known issue: affects color of disabled elements.
+ * 2. Correct font properties not being inherited.
+ * 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
+ */
+
+button,
+input,
+optgroup,
+select,
+textarea {
+  color: inherit; /* 1 */
+  font: inherit; /* 2 */
+  margin: 0; /* 3 */
+}
+
+/**
+ * Address `overflow` set to `hidden` in IE 8/9/10/11.
+ */
+
+button {
+  overflow: visible;
+}
+
+/**
+ * Address inconsistent `text-transform` inheritance for `button` and `select`.
+ * All other form control elements do not inherit `text-transform` values.
+ * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
+ * Correct `select` style inheritance in Firefox.
+ */
+
+button,
+select {
+  text-transform: none;
+}
+
+/**
+ * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
+ *    and `video` controls.
+ * 2. Correct inability to style clickable `input` types in iOS.
+ * 3. Improve usability and consistency of cursor style between image-type
+ *    `input` and others.
+ */
+
+button,
+html input[type="button"], /* 1 */
+input[type="reset"],
+input[type="submit"] {
+  -webkit-appearance: button; /* 2 */
+  cursor: pointer; /* 3 */
+}
+
+/**
+ * Re-set default cursor for disabled elements.
+ */
+
+button[disabled],
+html input[disabled] {
+  cursor: default;
+}
+
+/**
+ * Remove inner padding and border in Firefox 4+.
+ */
+
+button::-moz-focus-inner,
+input::-moz-focus-inner {
+  border: 0;
+  padding: 0;
+}
+
+/**
+ * Address Firefox 4+ setting `line-height` on `input` using `!important` in
+ * the UA stylesheet.
+ */
+
+input {
+  line-height: normal;
+}
+
+/**
+ * It's recommended that you don't attempt to style these elements.
+ * Firefox's implementation doesn't respect box-sizing, padding, or width.
+ *
+ * 1. Address box sizing set to `content-box` in IE 8/9/10.
+ * 2. Remove excess padding in IE 8/9/10.
+ */
+
+input[type="checkbox"],
+input[type="radio"] {
+  box-sizing: border-box; /* 1 */
+  padding: 0; /* 2 */
+}
+
+/**
+ * Fix the cursor style for Chrome's increment/decrement buttons. For certain
+ * `font-size` values of the `input`, it causes the cursor style of the
+ * decrement button to change from `default` to `text`.
+ */
+
+input[type="number"]::-webkit-inner-spin-button,
+input[type="number"]::-webkit-outer-spin-button {
+  height: auto;
+}
+
+/**
+ * 1. Address `appearance` set to `searchfield` in Safari and Chrome.
+ * 2. Address `box-sizing` set to `border-box` in Safari and Chrome
+ *    (include `-moz` to future-proof).
+ */
+
+input[type="search"] {
+  -webkit-appearance: textfield; /* 1 */
+  -moz-box-sizing: content-box;
+  -webkit-box-sizing: content-box; /* 2 */
+  box-sizing: content-box;
+}
+
+/**
+ * Remove inner padding and search cancel button in Safari and Chrome on OS X.
+ * Safari (but not Chrome) clips the cancel button when the search input has
+ * padding (and `textfield` appearance).
+ */
+
+input[type="search"]::-webkit-search-cancel-button,
+input[type="search"]::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
+/**
+ * Define consistent border, margin, and padding.
+ */
+
+fieldset {
+  border: 1px solid #c0c0c0;
+  margin: 0 2px;
+  padding: 0.35em 0.625em 0.75em;
+}
+
+/**
+ * 1. Correct `color` not being inherited in IE 8/9/10/11.
+ * 2. Remove padding so people aren't caught out if they zero out fieldsets.
+ */
+
+legend {
+  border: 0; /* 1 */
+  padding: 0; /* 2 */
+}
+
+/**
+ * Remove default vertical scrollbar in IE 8/9/10/11.
+ */
+
+textarea {
+  overflow: auto;
+}
+
+/**
+ * Don't inherit the `font-weight` (applied by a rule above).
+ * NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
+ */
+
+optgroup {
+  font-weight: bold;
+}
+
+/* Tables
+   ========================================================================== */
+
+/**
+ * Remove most spacing between table cells.
+ */
+
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+
+td,
+th {
+  padding: 0;
+}
\ No newline at end of file
diff --git a/resources/css/skeleton.css b/resources/css/skeleton.css
new file mode 100755
index 0000000..c3fda1c
--- /dev/null
+++ b/resources/css/skeleton.css
@@ -0,0 +1,419 @@
+/*
+* Skeleton V2.0.4
+* Copyright 2014, Dave Gamache
+* www.getskeleton.com
+* Free to use under the MIT license.
+* http://www.opensource.org/licenses/mit-license.php
+* 12/29/2014
+*/
+
+
+/* Table of contents
+––––––––––––––––––––––––––––––––––––––––––––––––––
+- Grid
+- Base Styles
+- Typography
+- Links
+- Buttons
+- Forms
+- Lists
+- Code
+- Tables
+- Spacing
+- Utilities
+- Clearing
+- Media Queries
+*/
+
+
+/* Grid
+–––––––––––––––––––––––––––––––––––––––––––––––––– */
+.container {
+  position: relative;
+  width: 100%;
+  max-width: 960px;
+  margin: 0 auto;
+  padding: 0 20px;
+  box-sizing: border-box; }
+.column,
+.columns {
+  width: 100%;
+  float: left;
+  box-sizing: border-box; }
+
+/* For devices larger than 400px */
+@media (min-width: 400px) {
+  .container {
+    width: 85%;
+    padding: 0; }
+}
+
+/* For devices larger than 550px */
+@media (min-width: 550px) {
+  .container {
+    width: 80%; }
+  .column,
+  .columns {
+    margin-left: 4%; }
+  .column:first-child,
+  .columns:first-child {
+    margin-left: 0; }
+
+  .one.column,
+  .col1,
+  .one.columns                    { width: 4.66666666667%; }
+  .two.columns                    { width: 13.3333333333%; }
+  .three.columns                  { width: 22%;            }
+  .four.columns                   { width: 30.6666666667%; }
+  .five.columns                   { width: 39.3333333333%; }
+  .six.columns                    { width: 48%;            }
+  .seven.columns                  { width: 56.6666666667%; }
+  .eight.columns                  { width: 65.3333333333%; }
+  .nine.columns                   { width: 74.0%;          }
+  .ten.columns                    { width: 82.6666666667%; }
+  .eleven.columns                 { width: 91.3333333333%; }
+  .twelve.columns                 { width: 100%; margin-left: 0; }
+
+  .one-third.column               { width: 30.6666666667%; }
+  .two-thirds.column              { width: 65.3333333333%; }
+
+  .one-half.column                { width: 48%; }
+
+  /* Offsets */
+  .offset-by-one.column,
+  .offset-by-one.columns          { margin-left: 8.66666666667%; }
+  .offset-by-two.column,
+  .offset-by-two.columns          { margin-left: 17.3333333333%; }
+  .offset-by-three.column,
+  .offset-by-three.columns        { margin-left: 26%;            }
+  .offset-by-four.column,
+  .offset-by-four.columns         { margin-left: 34.6666666667%; }
+  .offset-by-five.column,
+  .offset-by-five.columns         { margin-left: 43.3333333333%; }
+  .offset-by-six.column,
+  .offset-by-six.columns          { margin-left: 52%;            }
+  .offset-by-seven.column,
+  .offset-by-seven.columns        { margin-left: 60.6666666667%; }
+  .offset-by-eight.column,
+  .offset-by-eight.columns        { margin-left: 69.3333333333%; }
+  .offset-by-nine.column,
+  .offset-by-nine.columns         { margin-left: 78.0%;          }
+  .offset-by-ten.column,
+  .offset-by-ten.columns          { margin-left: 86.6666666667%; }
+  .offset-by-eleven.column,
+  .offset-by-eleven.columns       { margin-left: 95.3333333333%; }
+
+  .offset-by-one-third.column,
+  .offset-by-one-third.columns    { margin-left: 34.6666666667%; }
+  .offset-by-two-thirds.column,
+  .offset-by-two-thirds.columns   { margin-left: 69.3333333333%; }
+
+  .offset-by-one-half.column,
+  .offset-by-one-half.columns     { margin-left: 52%; }
+
+}
+
+
+/* Base Styles
+–––––––––––––––––––––––––––––––––––––––––––––––––– */
+/* NOTE
+html is set to 62.5% so that all the REM measurements throughout Skeleton
+are based on 10px sizing. So basically 1.5rem = 15px :) */
+html {
+  font-size: 62.5%; }
+body {
+  font-size: 1.5em; /* currently ems cause chrome bug misinterpreting rems on body element */
+  line-height: 1.6;
+  font-weight: 400;
+  font-family: "Raleway", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  color: #222; }
+
+
+/* Typography
+–––––––––––––––––––––––––––––––––––––––––––––––––– */
+h1, h2, h3, h4, h5, h6 {
+  margin-top: 0;
+  margin-bottom: 2rem;
+  font-weight: 300; }
+h1 { font-size: 4.0rem; line-height: 1.2;  letter-spacing: -.1rem;}
+h2 { font-size: 3.6rem; line-height: 1.25; letter-spacing: -.1rem; }
+h3 { font-size: 3.0rem; line-height: 1.3;  letter-spacing: -.1rem; }
+h4 { font-size: 2.4rem; line-height: 1.35; letter-spacing: -.08rem; }
+h5 { font-size: 1.8rem; line-height: 1.5;  letter-spacing: -.05rem; }
+h6 { font-size: 1.5rem; line-height: 1.6;  letter-spacing: 0; }
+
+/* Larger than phablet */
+@media (min-width: 550px) {
+  h1 { font-size: 5.0rem; }
+  h2 { font-size: 4.2rem; }
+  h3 { font-size: 3.6rem; }
+  h4 { font-size: 3.0rem; }
+  h5 { font-size: 2.4rem; }
+  h6 { font-size: 1.5rem; }
+}
+
+p {
+  margin-top: 0; }
+
+
+/* Links
+–––––––––––––––––––––––––––––––––––––––––––––––––– */
+a {
+  color: #1EAEDB; }
+a:hover {
+  color: #0FA0CE; }
+
+
+/* Buttons
+–––––––––––––––––––––––––––––––––––––––––––––––––– */
+.button,
+button,
+input[type="submit"],
+input[type="reset"],
+input[type="button"] {
+  display: inline-block;
+  height: 38px;
+  padding: 0 30px;
+  color: #555;
+  text-align: center;
+  font-size: 11px;
+  font-weight: 600;
+  line-height: 38px;
+  letter-spacing: .1rem;
+  text-transform: uppercase;
+  text-decoration: none;
+  white-space: nowrap;
+  background-color: transparent;
+  border-radius: 4px;
+  border: 1px solid #bbb;
+  cursor: pointer;
+  box-sizing: border-box; }
+.button:hover,
+button:hover,
+input[type="submit"]:hover,
+input[type="reset"]:hover,
+input[type="button"]:hover,
+.button:focus,
+button:focus,
+input[type="submit"]:focus,
+input[type="reset"]:focus,
+input[type="button"]:focus {
+  color: #333;
+  border-color: #888;
+  outline: 0; }
+.button.button-primary,
+button.button-primary,
+input[type="submit"].button-primary,
+input[type="reset"].button-primary,
+input[type="button"].button-primary {
+  color: #FFF;
+  background-color: #33C3F0;
+  border-color: #33C3F0; }
+.button.button-primary:hover,
+button.button-primary:hover,
+input[type="submit"].button-primary:hover,
+input[type="reset"].button-primary:hover,
+input[type="button"].button-primary:hover,
+.button.button-primary:focus,
+button.button-primary:focus,
+input[type="submit"].button-primary:focus,
+input[type="reset"].button-primary:focus,
+input[type="button"].button-primary:focus {
+  color: #FFF;
+  background-color: #1EAEDB;
+  border-color: #1EAEDB; }
+
+
+/* Forms
+–––––––––––––––––––––––––––––––––––––––––––––––––– */
+input[type="email"],
+input[type="number"],
+input[type="search"],
+input[type="text"],
+input[type="tel"],
+input[type="url"],
+input[type="password"],
+textarea,
+select {
+  height: 38px;
+  padding: 6px 10px; /* The 6px vertically centers text on FF, ignored by Webkit */
+  background-color: #fff;
+  border: 1px solid #D1D1D1;
+  border-radius: 4px;
+  box-shadow: none;
+  box-sizing: border-box; }
+/* Removes awkward default styles on some inputs for iOS */
+input[type="email"],
+input[type="number"],
+input[type="search"],
+input[type="text"],
+input[type="tel"],
+input[type="url"],
+input[type="password"],
+textarea {
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none; }
+textarea {
+  min-height: 65px;
+  padding-top: 6px;
+  padding-bottom: 6px; }
+input[type="email"]:focus,
+input[type="number"]:focus,
+input[type="search"]:focus,
+input[type="text"]:focus,
+input[type="tel"]:focus,
+input[type="url"]:focus,
+input[type="password"]:focus,
+textarea:focus,
+select:focus {
+  border: 1px solid #33C3F0;
+  outline: 0; }
+label,
+legend {
+  display: block;
+  margin-bottom: .5rem;
+  font-weight: 600; }
+fieldset {
+  padding: 0;
+  border-width: 0; }
+input[type="checkbox"],
+input[type="radio"] {
+  display: inline; }
+label > .label-body {
+  display: inline-block;
+  margin-left: .5rem;
+  font-weight: normal; }
+
+
+/* Lists
+–––––––––––––––––––––––––––––––––––––––––––––––––– */
+ul {
+  list-style: circle inside; }
+ol {
+  list-style: decimal inside; }
+ol, ul {
+  padding-left: 0;
+  margin-top: 0; }
+ul ul,
+ul ol,
+ol ol,
+ol ul {
+  margin: 1.5rem 0 1.5rem 3rem;
+  font-size: 90%; }
+li {
+  margin-bottom: 1rem; }
+
+
+/* Code
+–––––––––––––––––––––––––––––––––––––––––––––––––– */
+code {
+  padding: .2rem .5rem;
+  margin: 0 .2rem;
+  font-size: 90%;
+  white-space: nowrap;
+  background: #F1F1F1;
+  border: 1px solid #E1E1E1;
+  border-radius: 4px; }
+pre > code {
+  display: block;
+  padding: 1rem 1.5rem;
+  white-space: pre; }
+
+
+/* Tables
+–––––––––––––––––––––––––––––––––––––––––––––––––– */
+th,
+td {
+  padding: 12px 15px;
+  text-align: left;
+  border-bottom: 1px solid #E1E1E1; }
+th:first-child,
+td:first-child {
+  padding-left: 0; }
+th:last-child,
+td:last-child {
+  padding-right: 0; }
+
+
+/* Spacing
+–––––––––––––––––––––––––––––––––––––––––––––––––– */
+button,
+.button {
+  margin-bottom: 1rem; }
+input,
+textarea,
+select,
+fieldset {
+  margin-bottom: 1.5rem; }
+pre,
+blockquote,
+dl,
+figure,
+table,
+p,
+ul,
+ol,
+form {
+  margin-bottom: 2.5rem; }
+
+
+/* Utilities
+–––––––––––––––––––––––––––––––––––––––––––––––––– */
+.u-full-width {
+  width: 100%;
+  box-sizing: border-box; }
+.u-max-full-width {
+  max-width: 100%;
+  box-sizing: border-box; }
+.u-pull-right {
+  float: right; }
+.u-pull-left {
+  float: left; }
+
+
+/* Misc
+–––––––––––––––––––––––––––––––––––––––––––––––––– */
+hr {
+  margin-top: 3rem;
+  margin-bottom: 3.5rem;
+  border-width: 0;
+  border-top: 1px solid #E1E1E1; }
+
+
+/* Clearing
+–––––––––––––––––––––––––––––––––––––––––––––––––– */
+
+/* Self Clearing Goodness */
+.container:after,
+.row:after,
+.u-cf {
+  content: "";
+  display: table;
+  clear: both; }
+
+
+/* Media Queries
+–––––––––––––––––––––––––––––––––––––––––––––––––– */
+/*
+Note: The best way to structure the use of media queries is to create the queries
+near the relevant code. For example, if you wanted to change the styles for buttons
+on small devices, paste the mobile query code up in the buttons section and style it
+there.
+*/
+
+
+/* Larger than mobile */
+@media (min-width: 400px) {}
+
+/* Larger than phablet (also point when grid becomes active) */
+@media (min-width: 550px) {}
+
+/* Larger than tablet */
+@media (min-width: 750px) {}
+
+/* Larger than desktop */
+@media (min-width: 1000px) {}
+
+/* Larger than Desktop HD */
+@media (min-width: 1200px) {}
diff --git a/resources/css/style.css b/resources/css/style.css
index b22c7a6..cdd0d3f 100644
--- a/resources/css/style.css
+++ b/resources/css/style.css
@@ -120,6 +120,12 @@ ul {
     font-size: 0.9em;
 }
 
+form {
+    display: inline-flex;
+    flex-direction: column;
+    gap: 1rem;
+}
+
 /* Form Containers */
 .form-container {
     background-color: #ffffff;
diff --git a/resources/js/blood.js b/resources/js/blood.js
new file mode 100644
index 0000000..c45663a
--- /dev/null
+++ b/resources/js/blood.js
@@ -0,0 +1,593 @@
+class BloodEffect {
+    constructor(canvas) {
+      this.canvas = canvas;
+      this.ctx = canvas.getContext('2d');
+      this.width = canvas.width;
+      this.height = canvas.height;
+      
+      // Blood parameters
+      this.gravity = 0.15;
+      this.viscosity = 0.92;
+      this.particleCount = 100;
+      this.particleSize = 3;
+      this.sprayForce = 10;
+      this.splatterSize = 5;
+      this.spread = 0.3;
+      this.colorVariation = 15;
+      this.enableDrips = true;
+      this.enablePooling = true;
+      
+      // Animation state
+      this.paused = false;
+      this.animationId = null;
+      
+      // Particles and splatters
+      this.particles = [];
+      this.splatters = [];
+      this.pools = [];
+      this.drips = [];
+      
+      // Mouse interactions
+      this.mouseDown = false;
+      this.mouseX = 0;
+      this.mouseY = 0;
+      this.lastMouseX = 0;
+      this.lastMouseY = 0;
+      
+      // Initialize event listeners
+      this.initEvents();
+    }
+    
+    initEvents() {
+      this.canvas.addEventListener('mousedown', (e) => {
+        this.mouseDown = true;
+        this.updateMousePosition(e);
+        this.lastMouseX = this.mouseX;
+        this.lastMouseY = this.mouseY;
+        this.createSpray(this.mouseX, this.mouseY, 0, 0);
+      });
+      
+      this.canvas.addEventListener('mousemove', (e) => {
+        if (this.mouseDown) {
+          const lastX = this.mouseX;
+          const lastY = this.mouseY;
+          this.updateMousePosition(e);
+          
+          // Calculate velocity for direction
+          const velX = this.mouseX - lastX;
+          const velY = this.mouseY - lastY;
+          
+          // Create spray based on movement
+          if (Math.abs(velX) > 0.5 || Math.abs(velY) > 0.5) {
+            this.createSpray(this.mouseX, this.mouseY, velX, velY);
+          }
+        }
+      });
+      
+      this.canvas.addEventListener('mouseup', () => {
+        this.mouseDown = false;
+      });
+      
+      this.canvas.addEventListener('mouseleave', () => {
+        this.mouseDown = false;
+      });
+    }
+    
+    updateMousePosition(e) {
+      const rect = this.canvas.getBoundingClientRect();
+      this.mouseX = e.clientX - rect.left;
+      this.mouseY = e.clientY - rect.top;
+    }
+    
+    createSpray(x, y, velX, velY) {
+      // Direction influence from velocity
+      const dirX = velX === 0 ? 0 : Math.sign(velX);
+      const dirY = velY === 0 ? 0 : Math.sign(velY);
+      const speed = Math.sqrt(velX * velX + velY * velY);
+      
+      for (let i = 0; i < this.particleCount; i++) {
+        // Calculate random spray direction with influence from movement
+        const angle = Math.random() * Math.PI * 2;
+        const force = this.sprayForce * (0.5 + Math.random() * 0.5);
+        
+        // Base velocities with randomness
+        let vx = Math.cos(angle) * force * this.spread;
+        let vy = Math.sin(angle) * force * this.spread;
+        
+        // Add influence from mouse movement
+        if (speed > 1) {
+          vx += dirX * force * (1 - this.spread) * Math.random();
+          vy += dirY * force * (1 - this.spread) * Math.random();
+        }
+        
+        // Random size variation
+        const size = this.particleSize * (0.5 + Math.random());
+        
+        // Random color variation (darker/lighter red)
+        const r = 120 + Math.floor(Math.random() * this.colorVariation);
+        const g = 0 + Math.floor(Math.random() * (this.colorVariation * 0.4));
+        const b = 0 + Math.floor(Math.random() * (this.colorVariation * 0.2));
+        const color = `rgb(${r}, ${g}, ${b})`;
+        
+        // Add blood particle
+        this.particles.push({
+          x: x + (Math.random() - 0.5) * 5,
+          y: y + (Math.random() - 0.5) * 5,
+          vx: vx,
+          vy: vy,
+          size: size,
+          color: color,
+          gravity: this.gravity * (0.8 + Math.random() * 0.4),
+          life: 1.0, // Life percentage (1.0 = full life, 0.0 = dead)
+          decay: 0.01 + Math.random() * 0.02
+        });
+      }
+    }
+    
+    createRandomSpray() {
+      const x = Math.random() * this.width;
+      const y = Math.random() * (this.height / 2);
+      const velX = (Math.random() - 0.5) * 20;
+      const velY = Math.random() * 10;
+      this.createSpray(x, y, velX, velY);
+    }
+    
+    createBloodBurst() {
+      const x = this.width / 2 + (Math.random() - 0.5) * 200;
+      const y = this.height / 2 + (Math.random() - 0.5) * 100;
+      
+      // Create a more intense spray for burst
+      const oldParticleCount = this.particleCount;
+      const oldSprayForce = this.sprayForce;
+      
+      this.particleCount = this.particleCount * 3;
+      this.sprayForce = this.sprayForce * 1.5;
+      
+      this.createSpray(x, y, 0, 0);
+      
+      // Reset to original values
+      this.particleCount = oldParticleCount;
+      this.sprayForce = oldSprayForce;
+    }
+    
+    createSplatter(x, y, size, color) {
+      // Create a blood splatter at impact location
+      const splatterSize = size * this.splatterSize;
+      
+      this.splatters.push({
+        x: x,
+        y: y,
+        size: splatterSize,
+        color: color,
+        // Random shapes for splatters
+        shape: Math.floor(Math.random() * 3),
+        angle: Math.random() * Math.PI * 2,
+        // Stretch factor for directional impact
+        stretchX: 0.5 + Math.random(),
+        stretchY: 0.5 + Math.random(),
+        // How much it has dried/darkened (0 = fresh, 1 = dried)
+        dried: 0
+      });
+      
+      // Possibly create a drip
+      if (this.enableDrips && Math.random() < 0.3) {
+        this.createDrip(x, y, color);
+      }
+      
+      // Possibly create a pool below the splatter
+      if (this.enablePooling && y > this.height * 0.7 && Math.random() < 0.5) {
+        this.createPool(x, y, splatterSize * 1.5, color);
+      }
+    }
+    
+    createDrip(x, y, color) {
+      const length = 10 + Math.random() * 30;
+      const width = 2 + Math.random() * 4;
+      
+      this.drips.push({
+        x: x,
+        y: y,
+        targetY: y + length,
+        width: width,
+        color: color,
+        progress: 0,
+        speed: 0.005 + Math.random() * 0.01, // How fast it drips down
+        dried: 0
+      });
+    }
+    
+    createPool(x, y, size, color) {
+      this.pools.push({
+        x: x,
+        y: y,
+        currentSize: 0,
+        targetSize: size * (1 + Math.random()),
+        growSpeed: 0.1 + Math.random() * 0.2,
+        color: color,
+        dried: 0
+      });
+    }
+    
+    updatePhysics() {
+      // Update particles
+      for (let i = this.particles.length - 1; i >= 0; i--) {
+        const particle = this.particles[i];
+        
+        // Apply physics
+        particle.vy += particle.gravity;
+        particle.vx *= this.viscosity;
+        particle.vy *= this.viscosity;
+        
+        // Update position
+        particle.x += particle.vx;
+        particle.y += particle.vy;
+        
+        // Check for collisions with bottom or sides
+        if (particle.y > this.height - particle.size) {
+          // Bottom collision - create splatter
+          this.createSplatter(particle.x, this.height, particle.size, particle.color);
+          this.particles.splice(i, 1);
+        } else if (particle.x < 0 || particle.x > this.width) {
+          // Side collision - create splatter
+          const x = particle.x < 0 ? 0 : this.width;
+          this.createSplatter(x, particle.y, particle.size, particle.color);
+          this.particles.splice(i, 1);
+        } else {
+          // Decay life
+          particle.life -= particle.decay;
+          if (particle.life <= 0) {
+            this.particles.splice(i, 1);
+          }
+        }
+      }
+      
+      // Update drips
+      for (let i = this.drips.length - 1; i >= 0; i--) {
+        const drip = this.drips[i];
+        
+        // Grow drip down
+        drip.progress += drip.speed;
+        if (drip.progress >= 1) {
+          // When drip reaches target, it stops
+          drip.progress = 1;
+          // Slowly dry
+          drip.dried += 0.001;
+          
+          // Remove very dried drips
+          if (drip.dried > 0.7) {
+            this.drips.splice(i, 1);
+          }
+        }
+      }
+      
+      // Update pools
+      for (let i = 0; i < this.pools.length; i++) {
+        const pool = this.pools[i];
+        
+        // Grow pool
+        if (pool.currentSize < pool.targetSize) {
+          pool.currentSize += pool.growSpeed;
+        } else {
+          // Slowly dry
+          pool.dried += 0.0005;
+        }
+      }
+      
+      // Update splatters
+      for (let i = 0; i < this.splatters.length; i++) {
+        // Slowly dry
+        this.splatters[i].dried += 0.0002;
+      }
+    }
+    
+    render() {
+      // Draw particles
+      for (const particle of this.particles) {
+        this.ctx.beginPath();
+        this.ctx.fillStyle = particle.color;
+        this.ctx.globalAlpha = particle.life;
+        this.ctx.arc(particle.x, particle.y, particle.size, 0, Math.PI * 2);
+        this.ctx.fill();
+      }
+      
+      // Draw splatters
+      for (const splatter of this.splatters) {
+        // Darker color as it dries
+        const color = this.adjustColorForDrying(splatter.color, splatter.dried);
+        this.ctx.fillStyle = color;
+        this.ctx.globalAlpha = 1;
+        
+        this.ctx.save();
+        this.ctx.translate(splatter.x, splatter.y);
+        this.ctx.rotate(splatter.angle);
+        this.ctx.scale(splatter.stretchX, splatter.stretchY);
+        
+        // Different splatter shapes
+        switch (splatter.shape) {
+          case 0:
+            // Circular splatter
+            this.ctx.beginPath();
+            this.ctx.arc(0, 0, splatter.size, 0, Math.PI * 2);
+            this.ctx.fill();
+            break;
+          case 1:
+            // Star-like splatter
+            this.ctx.beginPath();
+            const points = 5 + Math.floor(Math.random() * 4);
+            for (let i = 0; i < points * 2; i++) {
+              const radius = i % 2 === 0 ? splatter.size : splatter.size * 0.5;
+              const angle = (i * Math.PI) / points;
+              const x = Math.cos(angle) * radius;
+              const y = Math.sin(angle) * radius;
+              if (i === 0) this.ctx.moveTo(x, y);
+              else this.ctx.lineTo(x, y);
+            }
+            this.ctx.closePath();
+            this.ctx.fill();
+            break;
+          case 2:
+            // Irregular blob
+            this.ctx.beginPath();
+            const segments = 8 + Math.floor(Math.random() * 5);
+            for (let i = 0; i <= segments; i++) {
+              const angle = (i / segments) * Math.PI * 2;
+              const radius = splatter.size * (0.7 + Math.random() * 0.6);
+              const x = Math.cos(angle) * radius;
+              const y = Math.sin(angle) * radius;
+              if (i === 0) this.ctx.moveTo(x, y);
+              else this.ctx.bezierCurveTo(
+                x - Math.random() * 10, y - Math.random() * 10,
+                x + Math.random() * 10, y + Math.random() * 10,
+                x, y
+              );
+            }
+            this.ctx.closePath();
+            this.ctx.fill();
+            break;
+        }
+        
+        this.ctx.restore();
+      }
+      
+      // Draw drips
+      for (const drip of this.drips) {
+        const color = this.adjustColorForDrying(drip.color, drip.dried);
+        this.ctx.fillStyle = color;
+        this.ctx.globalAlpha = 1;
+        
+        // Calculate current height based on progress
+        const currentY = drip.y + (drip.targetY - drip.y) * drip.progress;
+        
+        // Draw drip as elongated teardrop
+        this.ctx.beginPath();
+        this.ctx.moveTo(drip.x - drip.width/2, drip.y);
+        this.ctx.bezierCurveTo(
+          drip.x - drip.width, drip.y + (currentY - drip.y) * 0.3,
+          drip.x - drip.width/3, currentY - drip.width,
+          drip.x, currentY
+        );
+        this.ctx.bezierCurveTo(
+          drip.x + drip.width/3, currentY - drip.width,
+          drip.x + drip.width, drip.y + (currentY - drip.y) * 0.3,
+          drip.x + drip.width/2, drip.y
+        );
+        this.ctx.closePath();
+        this.ctx.fill();
+      }
+      
+      // Draw pools
+      for (const pool of this.pools) {
+        const color = this.adjustColorForDrying(pool.color, pool.dried);
+        this.ctx.fillStyle = color;
+        this.ctx.globalAlpha = 1;
+        
+        // Draw pool as irregular ellipse
+        this.ctx.beginPath();
+        const segments = 12;
+        for (let i = 0; i <= segments; i++) {
+          const angle = (i / segments) * Math.PI * 2;
+          // Make pool wider than tall
+          const radiusX = pool.currentSize * (1.2 + Math.sin(angle * 3) * 0.2);
+          const radiusY = pool.currentSize * (0.6 + Math.cos(angle * 2) * 0.1);
+          const x = pool.x + Math.cos(angle) * radiusX;
+          const y = pool.y + Math.sin(angle) * radiusY;
+          if (i === 0) this.ctx.moveTo(x, y);
+          else this.ctx.bezierCurveTo(
+            x - Math.random() * 5, y - Math.random() * 2,
+            x + Math.random() * 5, y + Math.random() * 2,
+            x, y
+          );
+        }
+        this.ctx.closePath();
+        this.ctx.fill();
+      }
+      
+      // Reset alpha
+      this.ctx.globalAlpha = 1;
+    }
+    
+    adjustColorForDrying(color, driedAmount) {
+      // Extract RGB components
+      const rgbMatch = color.match(/\d+/g);
+      if (!rgbMatch || rgbMatch.length < 3) return color;
+      
+      const r = parseInt(rgbMatch[0]);
+      const g = parseInt(rgbMatch[1]);
+      const b = parseInt(rgbMatch[2]);
+      
+      // Calculate dried color (darker, more brown)
+      const driedR = Math.max(0, Math.floor(r - (driedAmount * 80)));
+      const driedG = Math.max(0, Math.floor(g - (driedAmount * 10)));
+      const driedB = Math.max(0, Math.floor(b - (driedAmount * 10)));
+      
+      return `rgb(${driedR}, ${driedG}, ${driedB})`;
+    }
+    
+    animate() {
+      if (this.paused) return;
+      
+      // Update physics
+      this.updatePhysics();
+      
+      // Render
+      this.render();
+      
+      // Schedule next frame
+      this.animationId = requestAnimationFrame(() => this.animate());
+    }
+    
+    start() {
+      this.paused = false;
+      if (!this.animationId) {
+        this.animate();
+      }
+    }
+    
+    pause() {
+      this.paused = true;
+      if (this.animationId) {
+        cancelAnimationFrame(this.animationId);
+        this.animationId = null;
+      }
+    }
+    
+    togglePause() {
+      if (this.paused) {
+        this.start();
+      } else {
+        this.pause();
+      }
+    }
+    
+    clear() {
+      this.ctx.clearRect(0, 0, this.width, this.height);
+      this.particles = [];
+      this.splatters = [];
+      this.pools = [];
+      this.drips = [];
+    }
+    
+    // Parameter setters
+    setGravity(value) {
+      this.gravity = value;
+    }
+    
+    setViscosity(value) {
+      this.viscosity = value;
+    }
+    
+    setParticleCount(value) {
+      this.particleCount = value;
+    }
+    
+    setParticleSize(value) {
+      this.particleSize = value;
+    }
+    
+    setSprayForce(value) {
+      this.sprayForce = value;
+    }
+    
+    setSplatterSize(value) {
+      this.splatterSize = value;
+    }
+    
+    setSpread(value) {
+      this.spread = value;
+    }
+    
+    setEnableDrips(value) {
+      this.enableDrips = value;
+    }
+    
+    setEnablePooling(value) {
+      this.enablePooling = value;
+    }
+    
+    setColorVariation(value) {
+      this.colorVariation = value;
+    }
+  }
+  
+  // Initialize the blood effect
+  const canvas = document.getElementById('sprayCanvas');
+  const bloodEffect = new BloodEffect(canvas);
+  
+  // Start the animation
+  bloodEffect.start();
+  
+  // Set up UI controls
+  const gravitySlider = document.getElementById('gravitySlider');
+  const viscositySlider = document.getElementById('viscositySlider');
+  const particleCountSlider = document.getElementById('particleCountSlider');
+  const particleSizeSlider = document.getElementById('particleSizeSlider');
+  const sprayForceSlider = document.getElementById('sprayForceSlider');
+  const splatterSizeSlider = document.getElementById('splatterSizeSlider');
+  const spreadSlider = document.getElementById('spreadSlider');
+  const dripToggle = document.getElementById('dripToggle');
+  const poolToggle = document.getElementById('poolToggle');
+  const colorVariationSlider = document.getElementById('colorVariationSlider');
+  
+  const clearBtn = document.getElementById('clearBtn');
+  const randomSprayBtn = document.getElementById('randomSprayBtn');
+  const burstBtn = document.getElementById('burstBtn');
+  const pauseBtn = document.getElementById('pauseBtn');
+  
+  // Event listeners for sliders
+  gravitySlider.addEventListener('input', function() {
+    bloodEffect.setGravity(parseFloat(this.value));
+  });
+  
+  viscositySlider.addEventListener('input', function() {
+    bloodEffect.setViscosity(parseFloat(this.value));
+  });
+  
+  particleCountSlider.addEventListener('input', function() {
+    bloodEffect.setParticleCount(parseInt(this.value));
+  });
+  
+  particleSizeSlider.addEventListener('input', function() {
+    bloodEffect.setParticleSize(parseInt(this.value));
+  });
+  
+  sprayForceSlider.addEventListener('input', function() {
+    bloodEffect.setSprayForce(parseInt(this.value));
+  });
+  
+  splatterSizeSlider.addEventListener('input', function() {
+    bloodEffect.setSplatterSize(parseInt(this.value));
+  });
+  
+  spreadSlider.addEventListener('input', function() {
+    bloodEffect.setSpread(parseFloat(this.value));
+  });
+  
+  dripToggle.addEventListener('change', function() {
+    bloodEffect.setEnableDrips(this.checked);
+  });
+  
+  poolToggle.addEventListener('change', function() {
+    bloodEffect.setEnablePooling(this.checked);
+  });
+  
+  colorVariationSlider.addEventListener('input', function() {
+    bloodEffect.setColorVariation(parseInt(this.value));
+  });
+  
+  // Button event listeners
+  clearBtn.addEventListener('click', function() {
+    bloodEffect.clear();
+  });
+  
+  randomSprayBtn.addEventListener('click', function() {
+    bloodEffect.createRandomSpray();
+  });
+  
+  burstBtn.addEventListener('click', function() {
+    bloodEffect.createBloodBurst();
+  });
+  
+  pauseBtn.addEventListener('click', function() {
+    bloodEffect.togglePause();
+    this.textContent = bloodEffect.paused ? 'Resume' : 'Pause';
+  });
\ No newline at end of file
diff --git a/resources/js/blood_gpu.js b/resources/js/blood_gpu.js
new file mode 100644
index 0000000..19d88c4
--- /dev/null
+++ b/resources/js/blood_gpu.js
@@ -0,0 +1,656 @@
+// This code demonstrates how to implement the blood simulation using WebGPU
+// Note: WebGPU is still evolving and requires modern browsers with WebGPU enabled
+
+export class WebGPUBloodSimulation {
+  constructor(canvas) {
+    this.canvas = canvas;
+    this.particles = [];
+    this.splatters = [];
+    
+    // Simulation parameters
+    this.particleCount = 10000; // Much higher with GPU acceleration
+    this.gravity = 0.15;
+    this.viscosity = 0.92;
+    this.particleSize = 3;
+    this.sprayForce = 10;
+    this.splatterSize = 5;
+    this.spread = 0.3;
+    
+    // WebGPU state
+    this.device = null;
+    this.context = null;
+    this.particleBuffer = null;
+    this.computePipeline = null;
+    this.renderPipeline = null;
+    this.uniformBuffer = null;
+    this.bindGroups = [];
+    
+    // Double buffering for particles (read from one, write to the other)
+    this.particleBuffers = [null, null];
+    this.currentBuffer = 0;
+    
+    this.animationId = null;
+    this.paused = false;
+    
+    // Initialize WebGPU
+    this.initWebGPU();
+  }
+  
+  async initWebGPU() {
+    try {
+      this.context = this.canvas.getContext('webgpu');
+      // Check if WebGPU is supported
+      if (!navigator.gpu) {
+        console.log(navigator);
+        throw new Error("WebGPU not supported on this browser.");
+      }
+      
+      // Request adapter
+      const adapter = await navigator.gpu.requestAdapter();
+      if (!adapter) {
+        throw new Error("No appropriate GPU adapter found.");
+      }
+      
+      // Request device
+      this.device = await adapter.requestDevice();
+      console.log(this.device);
+      
+      // Configure canvas context
+      const canvasFormat = navigator.gpu.getPreferredCanvasFormat();
+      this.context.configure({
+        device: this.device,
+        format: canvasFormat,
+        alphaMode: 'premultiplied'
+      });
+      
+      // Initialize particle buffer
+      await this.initializeParticles();
+      
+      // Create shader modules
+      await this.createShaders();
+      
+      // Create uniform buffer (simulation parameters)
+      this.createUniformBuffer();
+      
+      // Start rendering
+      this.startAnimation();
+      
+      console.log("WebGPU Blood Simulation initialized successfully");
+    } catch (error) {
+      console.error("Failed to initialize WebGPU:", error);
+      // Fallback to Canvas2D implementation if WebGPU isn't available
+    }
+  }
+  
+  async initializeParticles() {
+    // Create structured particle buffer
+    const particleBufferSize = this.particleCount * 8 * Float32Array.BYTES_PER_ELEMENT; // position(2), velocity(2), color(3), life(1)
+    
+    // Create double buffered particles for ping-pong computation
+    this.particleBuffers[0] = this.device.createBuffer({
+      size: particleBufferSize,
+      usage: GPUBufferUsage.STORAGE | GPUBufferUsage.COPY_DST | GPUBufferUsage.COPY_SRC,
+    });
+    
+    this.particleBuffers[1] = this.device.createBuffer({
+      size: particleBufferSize,
+      usage: GPUBufferUsage.STORAGE | GPUBufferUsage.COPY_DST | GPUBufferUsage.COPY_SRC,
+    });
+    
+    // Initialize particles on CPU then upload to GPU
+    const particleData = new Float32Array(this.particleCount * 8);
+    for (let i = 0; i < this.particleCount; i++) {
+      const baseIndex = i * 8;
+      // Position (off-screen initially)
+      particleData[baseIndex] = -100;
+      particleData[baseIndex + 1] = -100;
+      // Velocity
+      particleData[baseIndex + 2] = 0;
+      particleData[baseIndex + 3] = 0;
+      // Color (red with slight variation)
+      particleData[baseIndex + 4] = 0.8 + Math.random() * 0.2; // r
+      particleData[baseIndex + 5] = 0.0 + Math.random() * 0.1; // g
+      particleData[baseIndex + 6] = 0.0 + Math.random() * 0.05; // b
+      // Life
+      particleData[baseIndex + 7] = 0.0; // Initially inactive
+    }
+    
+    // Upload initial particle data
+    this.device.queue.writeBuffer(this.particleBuffers[0], 0, particleData);
+    this.device.queue.writeBuffer(this.particleBuffers[1], 0, particleData);
+    
+    // Create vertex buffer for particle rendering
+    this.vertexBuffer = this.device.createBuffer({
+      size: 6 * 2 * Float32Array.BYTES_PER_ELEMENT, // 6 vertices for quad, 2 floats per vertex
+      usage: GPUBufferUsage.VERTEX | GPUBufferUsage.COPY_DST,
+      mappedAtCreation: true,
+    });
+    
+    // Create a quad (two triangles) for each particle
+    const vertexData = new Float32Array(this.vertexBuffer.getMappedRange());
+    // Triangle 1
+    vertexData[0] = -1; vertexData[1] = -1; // bottom-left
+    vertexData[2] = 1;  vertexData[3] = -1; // bottom-right
+    vertexData[4] = -1; vertexData[5] = 1;  // top-left
+    // Triangle 2
+    vertexData[6] = -1; vertexData[7] = 1;  // top-left
+    vertexData[8] = 1;  vertexData[9] = -1; // bottom-right
+    vertexData[10] = 1; vertexData[11] = 1; // top-right
+    
+    this.vertexBuffer.unmap();
+  }
+  
+  async createShaders() {
+    // Create compute shader for particle physics
+    const computeShaderModule = this.device.createShaderModule({
+      label: "Blood Particle Compute Shader",
+      code: `
+        struct Particle {
+          position: vec2f,
+          velocity: vec2f,
+          color: vec3f,
+          life: f32,
+        };
+        
+        struct SimParams {
+          deltaTime: f32,
+          gravity: f32,
+          viscosity: f32,
+          canvasWidth: f32,
+          canvasHeight: f32,
+          mouseX: f32,
+          mouseY: f32,
+          mouseDown: f32,
+          forceMultiplier: f32,
+          particleCount: f32,
+        };
+        
+        @group(0) @binding(0) var<storage, read> particlesA: array<Particle>;
+        @group(0) @binding(1) var<storage, read_write> particlesB: array<Particle>;
+        @group(0) @binding(2) var<uniform> params: SimParams;
+        
+        // Random number generation on GPU
+        fn rand(seed: f32) -> f32 {
+          return fract(sin(seed * 78.233) * 43758.5453);
+        }
+        
+        @compute @workgroup_size(64)
+        fn computeMain(@builtin(global_invocation_id) global_id: vec3u) {
+          let index = global_id.x;
+          if (index >= u32(params.particleCount)) {
+            return;
+          }
+          
+          var particle = particlesA[index];
+          
+          // Skip inactive particles
+          if (particle.life <= 0.0) {
+            // Check if we should spawn a new particle at mouse position
+            if (params.mouseDown > 0.5) {
+              let spawnChance = rand(f32(index) + params.deltaTime);
+              if (spawnChance < 0.05) { // Control spawn rate
+                // Create new particle at mouse position
+                particle.position = vec2f(params.mouseX, params.mouseY);
+                
+                // Random direction with bias towards mouse movement
+                let angle = rand(f32(index) * params.deltaTime) * 6.283185;
+                let force = params.forceMultiplier * (0.5 + rand(f32(index) + 0.1) * 0.5);
+                
+                // Set random velocity
+                particle.velocity.x = cos(angle) * force;
+                particle.velocity.y = sin(angle) * force;
+                
+                // Set color (red with variation)
+                particle.color.x = 0.8 + rand(f32(index) + 0.2) * 0.2;
+                particle.color.y = rand(f32(index) + 0.3) * 0.1;
+                particle.color.z = rand(f32(index) + 0.4) * 0.05;
+                
+                // Set life
+                particle.life = 1.0;
+              }
+            }
+          } else {
+            // Apply physics to active particles
+            
+            // Apply gravity
+            particle.velocity.y += params.gravity;
+            
+            // Apply viscosity (air resistance)
+            particle.velocity *= params.viscosity;
+            
+            // Update position
+            particle.position += particle.velocity;
+            
+            // Check boundaries
+            if (particle.position.y > params.canvasHeight) {
+              // Hit bottom - create splatter (handled on CPU for now)
+              particle.life = -1.0; // Special value to signal splatter creation on CPU
+            } else if (particle.position.x < 0.0 || particle.position.x > params.canvasWidth) {
+              // Hit sides
+              particle.life = -1.0;
+            } else {
+              // Decay life
+              particle.life -= 0.005;
+            }
+          }
+          
+          // Write updated particle
+          particlesB[index] = particle;
+        }
+      `
+    });
+    
+    // Create vertex/fragment shader for rendering
+    const renderShaderModule = this.device.createShaderModule({
+      label: "Blood Particle Render Shader",
+      code: `
+        struct VertexOutput {
+          @builtin(position) position: vec4f,
+          @location(0) color: vec3f,
+          @location(1) quadPosition: vec2f,
+        };
+        
+        struct Particle {
+          position: vec2f,
+          velocity: vec2f,
+          color: vec3f,
+          life: f32,
+        };
+        
+        struct SimParams {
+          deltaTime: f32,
+          gravity: f32,
+          viscosity: f32,
+          canvasWidth: f32,
+          canvasHeight: f32,
+          mouseX: f32,
+          mouseY: f32,
+          mouseDown: f32,
+          forceMultiplier: f32,
+          particleCount: f32,
+        };
+        
+        @group(0) @binding(0) var<storage, read> particles: array<Particle>;
+        @group(0) @binding(2) var<uniform> params: SimParams;
+        
+        @vertex
+        fn vertexMain(
+          @location(0) position: vec2f,
+          @builtin(instance_index) instance: u32
+        ) -> VertexOutput {
+          var output: VertexOutput;
+          
+          let particle = particles[instance];
+          
+          // Only process active particles
+          if (particle.life <= 0.0) {
+            // Place inactive particles offscreen
+            output.position = vec4f(-10.0, -10.0, 0.0, 1.0);
+            output.color = vec3f(0.0);
+            output.quadPosition = vec2f(0.0);
+            return output;
+          }
+          
+          // Particle size based on life
+          let size = 3.0 * particle.life;
+          
+          // Transform quad to particle position and size
+          let worldPosition = particle.position + position * size;
+          
+          // Convert to clip space
+          let clipPosition = vec2f(
+            worldPosition.x / params.canvasWidth * 2.0 - 1.0,
+            -(worldPosition.y / params.canvasHeight * 2.0 - 1.0) // Y is flipped in clip space
+          );
+          
+          output.position = vec4f(clipPosition, 0.0, 1.0);
+          output.color = particle.color;
+          output.quadPosition = position;
+          
+          return output;
+        }
+        
+        @fragment
+        fn fragmentMain(in: VertexOutput) -> @location(0) vec4f {
+          // Calculate distance from center of quad for circular particles
+          let distFromCenter = length(in.quadPosition);
+          
+          // Smooth circle with soft edges
+          let alpha = smoothstep(1.0, 0.8, distFromCenter) * in.color.r;
+          
+          return vec4f(in.color, alpha);
+        }
+      `
+    });
+    
+    // Create compute pipeline
+    this.computePipeline = this.device.createComputePipeline({
+      label: "Blood Particle Compute Pipeline",
+      layout: 'auto',
+      compute: {
+        module: computeShaderModule,
+        entryPoint: 'computeMain',
+      }
+    });
+    
+    // Create render pipeline
+    this.renderPipeline = this.device.createRenderPipeline({
+      label: "Blood Particle Render Pipeline",
+      layout: 'auto',
+      vertex: {
+        module: renderShaderModule,
+        entryPoint: 'vertexMain',
+        buffers: [
+          {
+            arrayStride: 2 * Float32Array.BYTES_PER_ELEMENT,
+            attributes: [
+              {
+                shaderLocation: 0,
+                offset: 0,
+                format: 'float32x2',
+              },
+            ],
+          },
+        ],
+      },
+      /*fragment: {
+        module: renderShaderModule,
+        entryPoint: 'fragmentMain',
+        targets: [
+          {
+            format: navigator.gpu.getPreferredCanvasFormat(),
+            blend: {
+              color: {
+                srcFactor: 'src-alpha',
+                dstFactor: 'one',
+                operation: 'add',
+              },
+              alpha: {
+                srcFactor: 'src-alpha',
+                dstFactor: 'one',
+                operation: 'add',
+              },
+            },
+          },
+        ],
+      },*/
+    });
+  }
+  
+  createUniformBuffer() {
+    this.uniformBuffer = this.device.createBuffer({
+      size: 10 * Float32Array.BYTES_PER_ELEMENT, // 10 parameters
+      usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST,
+    });
+    
+    // Initial values
+    this.updateUniformBuffer();
+    
+    // Create bind groups for double buffering
+    for (let i = 0; i < 2; i++) {
+      this.bindGroups[i] = this.device.createBindGroup({
+        layout: this.computePipeline.getBindGroupLayout(0),
+        entries: [
+          {
+            binding: 0,
+            resource: { buffer: this.particleBuffers[i] }
+          },
+          {
+            binding: 1,
+            resource: { buffer: this.particleBuffers[(i + 1) % 2] }
+          },
+          {
+            binding: 2,
+            resource: { buffer: this.uniformBuffer }
+          },
+        ],
+      });
+    }
+    
+    // Create render bind group
+    this.renderBindGroup = this.device.createBindGroup({
+      layout: this.renderPipeline.getBindGroupLayout(0),
+      entries: [
+        {
+          binding: 0,
+          resource: { buffer: this.particleBuffers[0] }
+        },
+        {
+          binding: 2,
+          resource: { buffer: this.uniformBuffer }
+        },
+      ],
+    });
+  }
+  
+  updateUniformBuffer(mouseX = 0, mouseY = 0, mouseDown = 0) {
+    // Create typed array for uniform data
+    const uniformData = new Float32Array([
+      0.016, // deltaTime (assuming 60fps)
+      this.gravity,
+      this.viscosity,
+      this.canvas.width,
+      this.canvas.height,
+      mouseX,
+      mouseY,
+      mouseDown,
+      this.sprayForce,
+      this.particleCount,
+    ]);
+    
+    // Upload to GPU
+    this.device.queue.writeBuffer(this.uniformBuffer, 0, uniformData);
+  }
+  
+  simulate(mouseX = 0, mouseY = 0, mouseDown = 0) {
+    if (this.paused) return;
+    
+    // Update parameters
+    this.updateUniformBuffer(mouseX, mouseY, mouseDown);
+    
+    // Begin command encoding
+    const commandEncoder = this.device.createCommandEncoder();
+    
+    // Run compute shader
+    const computePass = commandEncoder.beginComputePass();
+    computePass.setPipeline(this.computePipeline);
+    computePass.setBindGroup(0, this.bindGroups[this.currentBuffer]);
+    computePass.dispatchWorkgroups(Math.ceil(this.particleCount / 64));
+    computePass.end();
+    
+    // Swap buffers
+    this.currentBuffer = (this.currentBuffer + 1) % 2;
+    
+    // Update render bind group to use current particle buffer
+    this.renderBindGroup = this.device.createBindGroup({
+      layout: this.renderPipeline.getBindGroupLayout(0),
+      entries: [
+        {
+          binding: 0,
+          resource: { buffer: this.particleBuffers[this.currentBuffer] }
+        },
+        {
+          binding: 2,
+          resource: { buffer: this.uniformBuffer }
+        },
+      ],
+    });
+    
+    // Render particles
+    const renderPass = commandEncoder.beginRenderPass({
+      colorAttachments: [
+        {
+          view: this.context.getCurrentTexture().createView(),
+          clearValue: { r: 0.0, g: 0.0, b: 0.0, a: 1.0 },
+          loadOp: 'clear',
+          storeOp: 'store',
+        },
+      ],
+    });
+    
+    renderPass.setPipeline(this.renderPipeline);
+    renderPass.setBindGroup(0, this.renderBindGroup);
+    renderPass.setVertexBuffer(0, this.vertexBuffer);
+    renderPass.draw(6, this.particleCount, 0, 0); // 6 vertices per particle (2 triangles)
+    renderPass.end();
+    
+    // Submit GPU commands
+    this.device.queue.submit([commandEncoder.finish()]);
+  }
+  
+  startAnimation() {
+    if (this.paused) return;
+    
+    let lastMouseX = 0;
+    let lastMouseY = 0;
+    let mouseDown = 0;
+    
+    // Handle mouse events
+    this.canvas.addEventListener('mousedown', (e) => {
+      mouseDown = 1;
+      lastMouseX = e.offsetX;
+      lastMouseY = e.offsetY;
+    });
+    
+    this.canvas.addEventListener('mousemove', (e) => {
+      lastMouseX = e.offsetX;
+      lastMouseY = e.offsetY;
+    });
+    
+    this.canvas.addEventListener('mouseup', () => {
+      mouseDown = 0;
+    });
+    
+    this.canvas.addEventListener('mouseleave', () => {
+      mouseDown = 0;
+    });
+    
+    // Animation loop
+    const animate = () => {
+      this.simulate(lastMouseX, lastMouseY, mouseDown);
+      this.animationId = requestAnimationFrame(animate);
+    };
+    
+    animate();
+  }
+  
+  togglePause() {
+    this.paused = !this.paused;
+    if (!this.paused) {
+      this.startAnimation();
+    }
+  }
+  
+  createBloodBurst(x, y) {
+    // Create a burst from a specific location
+    // We'll need to handle this via transferring data to the GPU
+    // This method would modify particle data on the CPU then upload to GPU
+    
+    const particleData = new Float32Array(this.particleCount * 8);
+    let activeCount = 0;
+    const maxBurstParticles = Math.min(this.particleCount, 2000);
+    
+    // First read existing particle data
+    const readBuffer = this.device.createBuffer({
+      size: this.particleCount * 8 * Float32Array.BYTES_PER_ELEMENT,
+      usage: GPUBufferUsage.COPY_DST | GPUBufferUsage.MAP_READ,
+    });
+    
+    const commandEncoder = this.device.createCommandEncoder();
+    commandEncoder.copyBufferToBuffer(
+      this.particleBuffers[this.currentBuffer], 0,
+      readBuffer, 0,
+      this.particleCount * 8 * Float32Array.BYTES_PER_ELEMENT
+    );
+    this.device.queue.submit([commandEncoder.finish()]);
+    
+    // Wait for the buffer to be mapped
+    readBuffer.mapAsync(GPUMapMode.READ).then(() => {
+      const mappedArray = new Float32Array(readBuffer.getMappedRange());
+      
+      // Copy existing particles
+      for (let i = 0; i < this.particleCount; i++) {
+        const baseIndex = i * 8;
+        // If particle is active, preserve it
+        if (mappedArray[baseIndex + 7] > 0) {
+          for (let j = 0; j < 8; j++) {
+            particleData[baseIndex + j] = mappedArray[baseIndex + j];
+          }
+          activeCount++;
+        }
+      }
+      
+      // Add burst particles
+      for (let i = activeCount; i < activeCount + maxBurstParticles && i < this.particleCount; i++) {
+        const baseIndex = i * 8;
+        // Position
+        particleData[baseIndex] = x;
+        particleData[baseIndex + 1] = y;
+        
+        // Velocity - random in all directions
+        const angle = Math.random() * Math.PI * 2;
+        const force = 5 + Math.random() * 15;
+        particleData[baseIndex + 2] = Math.cos(angle) * force;
+        particleData[baseIndex + 3] = Math.sin(angle) * force;
+        
+        // Color - red with variation
+        particleData[baseIndex + 4] = 0.8 + Math.random() * 0.2; // r
+        particleData[baseIndex + 5] = Math.random() * 0.1; // g
+        particleData[baseIndex + 6] = Math.random() * 0.05; // b
+        
+        // Life
+        particleData[baseIndex + 7] = 1.0;
+      }
+      
+      readBuffer.unmap();
+      
+      // Write the updated particle data to the GPU
+      this.device.queue.writeBuffer(this.particleBuffers[this.currentBuffer], 0, particleData);
+    });
+  }
+  
+  clear() {
+    // Reset all particles to inactive
+    const particleData = new Float32Array(this.particleCount * 8);
+    for (let i = 0; i < this.particleCount; i++) {
+      const baseIndex = i * 8;
+      // Position (off-screen)
+      particleData[baseIndex] = -100;
+      particleData[baseIndex + 1] = -100;
+      // Velocity
+      particleData[baseIndex + 2] = 0;
+      particleData[baseIndex + 3] = 0;
+      // Color
+      particleData[baseIndex + 4] = 0.8 + Math.random() * 0.2;
+      particleData[baseIndex + 5] = 0;
+      particleData[baseIndex + 6] = 0;
+      // Life (inactive)
+      particleData[baseIndex + 7] = 0;
+    }
+    
+    // Upload to both buffers
+    this.device.queue.writeBuffer(this.particleBuffers[0], 0, particleData);
+    this.device.queue.writeBuffer(this.particleBuffers[1], 0, particleData);
+  }
+  
+  // Methods to adjust simulation parameters
+  setGravity(value) {
+    this.gravity = value;
+  }
+  
+  setViscosity(value) {
+    this.viscosity = value;
+  }
+  
+  setParticleCount(value) {
+    // WebGPU allows for much higher particle counts
+    this.particleCount = Math.min(value, 100000);
+  }
+  
+  setSprayForce(value) {
+    this.sprayForce = value;
+  }
+}
+
+//make the class accessible to the browser
+window.WebGPUBloodSimulation = WebGPUBloodSimulation;
\ No newline at end of file
diff --git a/resources/js/home.js b/resources/js/home.js
new file mode 100644
index 0000000..e69de29
--- /dev/null
+++ b/resources/js/home.js
diff --git a/resources/js/writing_index.js b/resources/js/writing_index.js
new file mode 100644
index 0000000..b8a2ed1
--- /dev/null
+++ b/resources/js/writing_index.js
@@ -0,0 +1,59 @@
+
+let dom = {};
+
+$(function() {
+    initDOM();
+
+    
+    marked.setOptions({
+        breaks: true,
+        sanitize: true
+    })
+
+    dom.inputText.oninput = ()=>{
+        dom.contentPreview.innerHTML = marked.parse(dom.inputText.value);
+    };
+
+    let restoredContent = localStorage.getItem('writing_draft_content');
+    if (restoredContent != null){
+        if (localStorage.getItem('writing_draft_expiration') < Date.now()){
+            localStorage.removeItem('writing_draft_content');
+            localStorage.removeItem('writing_draft_expiration');
+        } else {
+            dom.inputText.value = restoredContent;
+            dom.contentPreview.innerHTML = marked.parse(dom.inputText.value);
+        }
+    }
+
+    //periodically save the contents to client to prevent data loss
+    const intervalId = setInterval(() => {
+        const content = dom.inputText.value;
+        localStorage.setItem('writing_draft_content', content);
+        localStorage.setItem('writing_draft_expiration', Date.now() + 1000*3600*96);
+    }, 5000);
+
+});
+
+function initDOM(){
+    dom.filterMethod = $('#filter_method')[0];
+    dom.sortMethod = $('#sort_method')[0];
+    
+}
+
+function performReplace(){
+
+        
+    // Save current state to history for undo
+    editorHistory.push(dom.inputText.value);
+    
+    // Perform the replacement
+    const regex = new RegExp(dom.findStr.value, dom.toggleMultiline.checked ? 'gm' : 'g');
+    dom.inputText.value = dom.inputText.value.replace(regex, dom.replaceStr.value);
+    dom.contentPreview.innerHTML = marked.parse(dom.inputText.value);
+
+    
+    editorHistory.push(dom.inputText.value);
+
+    dom.inputText.value = dom.inputText.value.replace(regex, dom.replaceStr.value);
+    dom.contentPreview.innerHTML = marked.parse(dom.inputText.value);
+};
\ No newline at end of file
diff --git a/resources/views/dashboard.blade.php b/resources/views/dashboard.blade.php
index cf36537..77de9ed 100644
--- a/resources/views/dashboard.blade.php
+++ b/resources/views/dashboard.blade.php
@@ -1,6 +1,378 @@
 @extends('template')
+
+@section('head')
+<style>
+    .dashboard-container {
+        display: grid;
+        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+        gap: 20px;
+        margin-bottom: 30px;
+    }
+    
+    .dashboard-card {
+        background-color: white;
+        border-radius: 8px;
+        box-shadow: 0 4px 6px rgba(0,0,0,0.1);
+        padding: 20px;
+        transition: transform 0.2s;
+    }
+    
+    .dashboard-card:hover {
+        transform: translateY(-5px);
+    }
+    
+    .dashboard-card h2 {
+        margin-top: 0;
+        border-bottom: 1px solid #eee;
+        padding-bottom: 10px;
+        font-size: 1.4rem;
+    }
+    
+    .dashboard-card-footer {
+        margin-top: 15px;
+        text-align: right;
+    }
+    
+    .dashboard-stats {
+        display: flex;
+        justify-content: space-between;
+        margin-bottom: 15px;
+    }
+    
+    .stat-item {
+        text-align: center;
+        padding: 10px;
+        background-color: #f8f9fa;
+        border-radius: 5px;
+        flex-grow: 1;
+        margin: 0 5px;
+    }
+    
+    .stat-number {
+        font-size: 1.5rem;
+        font-weight: bold;
+        color: #4a69bd;
+    }
+    
+    .stat-label {
+        font-size: 0.85rem;
+        color: #666;
+    }
+    
+    .progress-container {
+        margin: 15px 0;
+    }
+    
+    .progress-bar {
+        height: 10px;
+        background-color: #e9ecef;
+        border-radius: 5px;
+        overflow: hidden;
+    }
+    
+    .progress-fill {
+        height: 100%;
+        background-color: #4a69bd;
+        transition: width 0.3s ease;
+    }
+    
+    .item-list {
+        list-style-type: none;
+        padding: 0;
+        margin: 0;
+    }
+    
+    .item-list li {
+        padding: 8px 0;
+        border-bottom: 1px solid #f1f1f1;
+    }
+    
+    .item-list li:last-child {
+        border-bottom: none;
+    }
+    
+    .badge {
+        display: inline-block;
+        padding: 3px 8px;
+        font-size: 0.8rem;
+        font-weight: 500;
+        border-radius: 12px;
+    }
+    
+    .badge-primary {
+        background-color: #e1eaff;
+        color: #4a69bd;
+    }
+    
+    .badge-success {
+        background-color: #e3fcef;
+        color: #00a86b;
+    }
+    
+    .badge-warning {
+        background-color: #fff8e1;
+        color: #ffa000;
+    }
+    
+    .empty-state {
+        text-align: center;
+        padding: 20px;
+        color: #999;
+        font-style: italic;
+    }
+    
+    .avatar-container {
+        display: flex;
+        align-items: center;
+    }
+    
+    .avatar {
+        width: 50px;
+        height: 50px;
+        border-radius: 50%;
+        background-color: #4a69bd;
+        color: white;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-size: 1.2rem;
+        margin-right: 15px;
+    }
+    
+    .profile-info {
+        flex-grow: 1;
+    }
+    
+    .tag-list {
+        margin-top: 10px;
+    }
+    
+    .tag {
+        display: inline-block;
+        font-size: 12px;
+        padding: 2px 8px;
+        margin-right: 5px;
+        margin-bottom: 5px;
+        background-color: #f1f1f1;
+        border-radius: 12px;
+    }
+</style>
+@endsection
+
 @section('body')
 <main>
-    <p>this is just a dashboard which currently serves no purpose</p>
+    <h1>Dashboard</h1>
+    
+    @php
+        $user = Auth::user();
+        
+        // Storage stats
+        $usedStorage = $user->getStorageUsed();
+        $totalStorage = $user->storage_quota;
+        $storagePercent = $totalStorage > 0 ? min(100, round(($usedStorage / $totalStorage) * 100)) : 0;
+        
+        // File stats
+        $fileCount = $user->files()->count();
+        $recentFiles = $user->files()->orderBy('created_at', 'desc')->take(3)->get();
+        
+        // Writing stats
+        $writingCount = $user->writings()->count();
+        $recentWritings = $user->writings()->orderBy('created_at', 'desc')->take(3)->get();
+        
+        // Quest stats (if implemented)
+        $questCount = method_exists($user, 'quests') ? $user->quests()->count() : 0;
+        $activeQuests = method_exists($user, 'quests') ? $user->quests()
+            ->wherePivot('status', 'in_progress')
+            ->orderBy('created_at', 'desc')
+            ->take(3)
+            ->get() : collect();
+        
+        // Inventory stats (placeholder)
+        $inventoryCount = 0; // Update when inventory is implemented
+    @endphp
+    
+    <!-- Profile Overview -->
+    <div class="dashboard-card" style="margin-bottom: 20px;">
+        <div class="avatar-container">
+            <div class="avatar">{{ strtoupper(substr($user->name, 0, 1)) }}</div>
+            <div class="profile-info">
+                <h2>{{ $user->name }}</h2>
+                <p>{{ $user->email }}</p>
+                <p>
+                    <span class="badge badge-primary">{{ $user->role == 0 ? 'Admin' : 'User' }}</span>
+                    <span class="badge badge-success">Member since {{ $user->created_at->format('M Y') }}</span>
+                </p>
+            </div>
+        </div>
+    </div>
+
+    <!-- Activity Stats -->
+    <div class="dashboard-stats">
+        <div class="stat-item">
+            <div class="stat-number">{{ $fileCount }}</div>
+            <div class="stat-label">Files</div>
+        </div>
+        <div class="stat-item">
+            <div class="stat-number">{{ $writingCount }}</div>
+            <div class="stat-label">Writings</div>
+        </div>
+        <div class="stat-item">
+            <div class="stat-number">{{ $questCount }}</div>
+            <div class="stat-label">Quests</div>
+        </div>
+        <div class="stat-item">
+            <div class="stat-number">{{ $inventoryCount }}</div>
+            <div class="stat-label">Items</div>
+        </div>
+    </div>
+
+    <div class="dashboard-container">
+        <!-- Storage Card -->
+        <div class="dashboard-card">
+            <h2>Storage</h2>
+            
+            <div class="progress-container">
+                <div style="display: flex; justify-content: space-between; margin-bottom: 5px;">
+                    <span>{{ round($usedStorage / 1024, 2) }} MB used</span>
+                    <span>{{ round($totalStorage / 1024, 2) }} MB total</span>
+                </div>
+                <div class="progress-bar">
+                    <div class="progress-fill" style="width: {{ $storagePercent }}%"></div>
+                </div>
+            </div>
+            
+            <h3>Recent Files</h3>
+            @if($recentFiles->count() > 0)
+                <ul class="item-list">
+                    @foreach($recentFiles as $file)
+                        <li>
+                            <div style="display: flex; justify-content: space-between;">
+                                <div>
+                                    <a href="/f/{{ $file->filename }}">{{ Str::limit($file->filename, 25) }}</a>
+                                    <div style="font-size: 0.8rem; color: #666;">
+                                        {{ round($file->size / 1024 / 1024, 2) }} MB • {{ $file->created_at->diffForHumans() }}
+                                    </div>
+                                </div>
+                                <div>
+                                    <a href="?file={{ $file->path }}" title="Download">⬇️</a>
+                                </div>
+                            </div>
+                        </li>
+                    @endforeach
+                </ul>
+            @else
+                <div class="empty-state">No files uploaded yet</div>
+            @endif
+            
+            <div class="dashboard-card-footer">
+                <a href="/f">Manage Files →</a>
+            </div>
+        </div>
+
+        <!-- Writings Card -->
+        <div class="dashboard-card">
+            <h2>Writings</h2>
+            
+            @if($recentWritings->count() > 0)
+                <ul class="item-list">
+                    @foreach($recentWritings as $writing)
+                        <li>
+                            <div>
+                                <a href="{{ route('w.show', $writing->id) }}">{{ Str::limit($writing->title, 35) }}</a>
+                                <div style="font-size: 0.8rem; color: #666;">
+                                    {{ Str::limit(strip_tags(Str::markdown($writing->content)), 60) }}
+                                </div>
+                                <div style="font-size: 0.8rem; color: #666;">
+                                    {{ $writing->created_at->diffForHumans() }}
+                                </div>
+                            </div>
+                        </li>
+                    @endforeach
+                </ul>
+            @else
+                <div class="empty-state">No writings created yet</div>
+            @endif
+            
+            <div class="dashboard-card-footer">
+                <a href="{{ route('w.create') }}">New Writing</a> • 
+                <a href="{{ route('w.index') }}">All Writings →</a>
+            </div>
+        </div>
+
+        <!-- Quests Card -->
+        <div class="dashboard-card">
+            <h2>Quests</h2>
+            
+            @if(method_exists($user, 'quests') && $activeQuests->count() > 0)
+                <ul class="item-list">
+                    @foreach($activeQuests as $quest)
+                        <li>
+                            <div>
+                                <a href="{{ route('quests.show', $quest->id) }}">{{ Str::limit($quest->title, 35) }}</a>
+                                <div style="font-size: 0.8rem; color: #666;">
+                                    Progress: {{ $quest->pivot->progress }}%
+                                </div>
+                                <div class="progress-bar" style="margin: 5px 0; height: 6px;">
+                                    <div class="progress-fill" style="width: {{ $quest->pivot->progress }}%; background-color: #00a86b;"></div>
+                                </div>
+                                <div style="font-size: 0.8rem; color: #666;">
+                                    <span class="badge badge-{{ $quest->difficulty == 'easy' ? 'success' : ($quest->difficulty == 'hard' ? 'warning' : 'primary') }}">
+                                        {{ ucfirst($quest->difficulty) }}
+                                    </span>
+                                    {{ $quest->reward_points }} points
+                                </div>
+                            </div>
+                        </li>
+                    @endforeach
+                </ul>
+            @else
+                <div class="empty-state">No active quests</div>
+            @endif
+            
+            <div class="dashboard-card-footer">
+                @if(method_exists($user, 'quests'))
+                    <a href="{{ route('quests.index') }}">View Quests →</a>
+                @else
+                    <span style="color: #999;">Coming soon</span>
+                @endif
+            </div>
+        </div>
+
+        <!-- Inventory Card (Placeholder) -->
+        <div class="dashboard-card">
+            <h2>Inventory</h2>
+            
+            <div class="empty-state">Inventory system coming soon</div>
+            
+            <div class="dashboard-card-footer">
+                <span style="color: #999;">Under development</span>
+            </div>
+        </div>
+    </div>
+
+    <!-- Tags Used -->
+    <div class="dashboard-card">
+        <h2>Your Tags</h2>
+        
+        @php
+            // Get all tags from user's content
+            $fileTags = $user->files()->with('tags')->get()->pluck('tags')->flatten();
+            $writingTags = method_exists($user->writings(), 'with') ? 
+                $user->writings()->with('tags')->get()->pluck('tags')->flatten() : 
+                collect();
+            
+            $allTags = $fileTags->merge($writingTags)->unique('id');
+        @endphp
+        
+        @if($allTags->count() > 0)
+            <div class="tag-list">
+                @foreach($allTags as $tag)
+                    <span class="tag">{{ $tag->label }}</span>
+                @endforeach
+            </div>
+        @else
+            <div class="empty-state">No tags used yet</div>
+        @endif
+    </div>
 </main>
 @endsection
\ No newline at end of file
diff --git a/resources/views/home.blade.php b/resources/views/home.blade.php
index d71e5b4..5531a05 100755
--- a/resources/views/home.blade.php
+++ b/resources/views/home.blade.php
@@ -4,6 +4,7 @@
 </canvas>
 <main>
     <header>
+
         <h1>A friendly webserver</h1>
         <h2>in Iowa</h2>
         <p>
@@ -14,7 +15,7 @@
             <br>
             <p>Who are you?</p><input type = "text" id = "input_who" />
         </div>
-        
+        <br>
     </header>
     <section id = "services">
         <h4>Services</h4>
@@ -86,5 +87,18 @@
             <button type = "submit">Import Data from JSON</button>
         </form>
     @endif
+
+    
 </main>
+<?php
+    $files = Storage::disk('public')->files('homeimages');
+    if (count($files) > 0){
+        $homeImgSrc = $files[array_rand($files)];
+    }
+?>
+<section id="home_img_container" style="position: absolute; top: 20%; right: 10%; width: 200px; height: auto;" ondrop="drop(event)" ondragover="allowDrop(event)">
+    <img src="{{ $homeImgSrc }}" id = "img_home" style="max-width: 100%; height: auto;">
+</section>
+
+
 @endsection
\ No newline at end of file
diff --git a/resources/views/import.blade.php b/resources/views/import.blade.php
new file mode 100644
index 0000000..e60a8f0
--- /dev/null
+++ b/resources/views/import.blade.php
@@ -0,0 +1,24 @@
+@extends('template')
+@section('body')
+<main>
+    <header>
+        <h3>Data Importer</h3>
+        <h4>add some data items to the database from a json file</h4>
+    </header>
+
+    <section>
+        <form  action = "/import" method = "post" enctype = "multipart/form-data">
+            @csrf
+            <label = for = "modelType">Type of model being imported: </label>
+            <select name = "modelType" id = "modelType">
+                @foreach (App\Http\Controllers\SiteController::$MODELS as $model)
+                    <option value = "{{ $model }}">{{ $model }}</option>
+                @endforeach
+            </select>
+            <label for = "jsonFile">Select a json file to import</label>
+            <input type = "file" name = "jsonFile" id = "jsonFile">
+            <button type = "submit">Import</button>
+        </form>
+    </section>
+</main>
+@endsection
\ No newline at end of file
diff --git a/resources/views/links/index.blade.php b/resources/views/links/index.blade.php
index 314759d..a18c2d8 100644
--- a/resources/views/links/index.blade.php
+++ b/resources/views/links/index.blade.php
@@ -10,7 +10,7 @@
         <div class="grid">
             @foreach ($links as $link)
                 <article class="">
-                    <a href="{{ route('l.show', $link->id) }}" class="">
+                    <a href="{{ $link->url }}" class="">
                         <h2 class="">
                             {{ $link->label }}
                         </h2>
diff --git a/resources/views/toys/blood-gpu.blade.php b/resources/views/toys/blood-gpu.blade.php
new file mode 100644
index 0000000..e5c898e
--- /dev/null
+++ b/resources/views/toys/blood-gpu.blade.php
@@ -0,0 +1,384 @@
+@extends('template')
+@section('head')
+
+<title>WebGPU Blood Spray Effect</title>
+@vite(['resources/css/jstoys.css', 'resources/js/blood_gpu.js'])
+@endsection
+@section('body')
+  <h1>WebGPU Blood Spray Simulation</h1>
+  
+  <div id="statusBox" class="status">
+    Initializing WebGPU...
+  </div>
+  
+  <div class="action-buttons">
+    <button id="clearBtn">Clear Canvas</button>
+    <button id="randomSprayBtn">Random Spray</button>
+    <button id="burstBtn">Blood Burst</button>
+    <button id="pauseBtn">Pause</button>
+  </div>
+  
+  <canvas id="bloodCanvas" width="800" height="500"></canvas>
+  
+  <div class="controls">
+    <div class="control-group">
+      <label for="gravitySlider">Gravity</label>
+      <input type="range" id="gravitySlider" min="0.01" max="0.5" value="0.15" step="0.01">
+    </div>
+    
+    <div class="control-group">
+      <label for="viscositySlider">Viscosity</label>
+      <input type="range" id="viscositySlider" min="0.75" max="0.99" value="0.92" step="0.01">
+    </div>
+    
+    <div class="control-group">
+      <label for="particleCountSlider">Particle Count</label>
+      <input type="range" id="particleCountSlider" min="10000" max="100000" value="50000">
+      <span id="particleCountValue">50,000</span>
+    </div>
+    
+    <div class="control-group">
+      <label for="sprayForceSlider">Spray Force</label>
+      <input type="range" id="sprayForceSlider" min="5" max="30" value="15">
+    </div>
+  </div>
+  
+  <div class="performance">
+    <div>Active Particles: <span id="activeParticleCount">0</span></div>
+    <div>FPS: <span id="fpsCounter">0</span></div>
+  </div>
+  
+  <p>Click and drag on the canvas to create blood spray. Using WebGPU for GPU-accelerated physics!</p>
+  
+    <script type = "module">
+    // Simple FPS counter
+    let frameCount = 0;
+    let lastTime = performance.now();
+    let fps = 0;
+    
+    function updateFPS() {
+      const now = performance.now();
+      const elapsed = now - lastTime;
+      
+      if (elapsed >= 1000) {
+        fps = Math.round((frameCount * 1000) / elapsed);
+        document.getElementById('fpsCounter').textContent = fps;
+        frameCount = 0;
+        lastTime = now;
+      }
+      
+      frameCount++;
+      requestAnimationFrame(updateFPS);
+    }
+    
+    // Start FPS counter
+    updateFPS();
+    
+    // Fallback Canvas2D implementation for browsers without WebGPU
+    class CanvasBloodEffect {
+      constructor(canvas) {
+        this.canvas = canvas;
+        this.ctx = canvas.getContext('2d');
+        this.width = canvas.width;
+        this.height = canvas.height;
+        
+        // Blood parameters
+        this.gravity = 0.15;
+        this.viscosity = 0.92;
+        this.particleCount = 5000;
+        this.particleSize = 3;
+        this.sprayForce = 15;
+        
+        // Animation state
+        this.paused = false;
+        this.animationId = null;
+        
+        // Particles
+        this.particles = [];
+        
+        // Mouse interactions
+        this.mouseDown = false;
+        this.mouseX = 0;
+        this.mouseY = 0;
+        this.lastMouseX = 0;
+        this.lastMouseY = 0;
+        
+        // Initialize event listeners
+        this.initEvents();
+      }
+      
+      initEvents() {
+        this.canvas.addEventListener('mousedown', (e) => {
+          this.mouseDown = true;
+          this.updateMousePosition(e);
+          this.lastMouseX = this.mouseX;
+          this.lastMouseY = this.mouseY;
+          this.createSpray(this.mouseX, this.mouseY, 0, 0);
+        });
+        
+        this.canvas.addEventListener('mousemove', (e) => {
+          if (this.mouseDown) {
+            const lastX = this.mouseX;
+            const lastY = this.mouseY;
+            this.updateMousePosition(e);
+            
+            // Calculate velocity for direction
+            const velX = this.mouseX - lastX;
+            const velY = this.mouseY - lastY;
+            
+            // Create spray based on movement
+            if (Math.abs(velX) > 0.5 || Math.abs(velY) > 0.5) {
+              this.createSpray(this.mouseX, this.mouseY, velX, velY);
+            }
+          }
+        });
+        
+        this.canvas.addEventListener('mouseup', () => {
+          this.mouseDown = false;
+        });
+        
+        this.canvas.addEventListener('mouseleave', () => {
+          this.mouseDown = false;
+        });
+      }
+      
+      updateMousePosition(e) {
+        const rect = this.canvas.getBoundingClientRect();
+        this.mouseX = e.clientX - rect.left;
+        this.mouseY = e.clientY - rect.top;
+      }
+      
+      createSpray(x, y, velX, velY) {
+        // Direction influence from velocity
+        const dirX = velX === 0 ? 0 : Math.sign(velX);
+        const dirY = velY === 0 ? 0 : Math.sign(velY);
+        const speed = Math.sqrt(velX * velX + velY * velY);
+        
+        const sprayCount = Math.min(500, this.particleCount);
+        
+        for (let i = 0; i < sprayCount; i++) {
+          // Calculate random spray direction with influence from movement
+          const angle = Math.random() * Math.PI * 2;
+          const force = this.sprayForce * (0.5 + Math.random() * 0.5);
+          
+          // Base velocities with randomness
+          let vx = Math.cos(angle) * force * 0.3;
+          let vy = Math.sin(angle) * force * 0.3;
+          
+          // Add influence from mouse movement
+          if (speed > 1) {
+            vx += dirX * force * 0.7 * Math.random();
+            vy += dirY * force * 0.7 * Math.random();
+          }
+          
+          // Random size variation
+          const size = this.particleSize * (0.5 + Math.random());
+          
+          // Random color variation (darker/lighter red)
+          const r = 120 + Math.floor(Math.random() * 80);
+          const g = Math.floor(Math.random() * 30);
+          const b = Math.floor(Math.random() * 20);
+          const color = `rgb(${r}, ${g}, ${b})`;
+          
+          // Add blood particle
+          this.particles.push({
+            x: x + (Math.random() - 0.5) * 5,
+            y: y + (Math.random() - 0.5) * 5,
+            vx: vx,
+            vy: vy,
+            size: size,
+            color: color,
+            gravity: this.gravity * (0.8 + Math.random() * 0.4),
+            life: 1.0 // Life percentage (1.0 = full life, 0.0 = dead)
+          });
+        }
+        
+        // Limit total particles
+        if (this.particles.length > this.particleCount) {
+          this.particles.splice(0, this.particles.length - this.particleCount);
+        }
+        
+        // Update particle counter
+        document.getElementById('activeParticleCount').textContent = this.particles.length.toLocaleString();
+      }
+      
+      createRandomSpray() {
+        const x = Math.random() * this.width;
+        const y = Math.random() * (this.height / 2);
+        const velX = (Math.random() - 0.5) * 20;
+        const velY = Math.random() * 10;
+        this.createSpray(x, y, velX, velY);
+      }
+      
+      createBloodBurst() {
+        const x = this.width / 2 + (Math.random() - 0.5) * 200;
+        const y = this.height / 2 + (Math.random() - 0.5) * 100;
+        
+        // Create multiple sprays for a burst effect
+        for (let i = 0; i < 5; i++) {
+          const offsetX = (Math.random() - 0.5) * 20;
+          const offsetY = (Math.random() - 0.5) * 20;
+          this.createSpray(x + offsetX, y + offsetY, 0, 0);
+        }
+      }
+      
+      updatePhysics() {
+        // Clear canvas
+        this.ctx.fillStyle = 'rgba(0, 0, 0, 0.2)';
+        this.ctx.fillRect(0, 0, this.width, this.height);
+        
+        // Update particles
+        for (let i = this.particles.length - 1; i >= 0; i--) {
+          const particle = this.particles[i];
+          
+          // Apply physics
+          particle.vy += particle.gravity;
+          particle.vx *= this.viscosity;
+          particle.vy *= this.viscosity;
+          
+          // Update position
+          particle.x += particle.vx;
+          particle.y += particle.vy;
+          
+          // Check for collisions with bottom or sides
+          if (particle.y > this.height || particle.x < 0 || particle.x > this.width) {
+            this.particles.splice(i, 1);
+            continue;
+          }
+          
+          // Draw particle
+          this.ctx.beginPath();
+          this.ctx.fillStyle = particle.color;
+          this.ctx.globalAlpha = particle.life;
+          this.ctx.arc(particle.x, particle.y, particle.size, 0, Math.PI * 2);
+          this.ctx.fill();
+          
+          // Decay life
+          particle.life -= 0.005;
+          if (particle.life <= 0) {
+            this.particles.splice(i, 1);
+          }
+        }
+        
+        // Reset alpha
+        this.ctx.globalAlpha = 1;
+        
+        // Update particle counter
+        document.getElementById('activeParticleCount').textContent = this.particles.length.toLocaleString();
+      }
+      
+      animate() {
+        if (this.paused) return;
+        
+        // Update physics and render
+        this.updatePhysics();
+        
+        // Schedule next frame
+        this.animationId = requestAnimationFrame(() => this.animate());
+      }
+      
+      start() {
+        this.paused = false;
+        if (!this.animationId) {
+          this.animate();
+        }
+      }
+      
+      pause() {
+        this.paused = true;
+        if (this.animationId) {
+          cancelAnimationFrame(this.animationId);
+          this.animationId = null;
+        }
+      }
+      
+      togglePause() {
+        if (this.paused) {
+          this.start();
+        } else {
+          this.pause();
+        }
+      }
+      
+      clear() {
+        this.ctx.clearRect(0, 0, this.width, this.height);
+        this.particles = [];
+        document.getElementById('activeParticleCount').textContent = "0";
+      }
+      
+      // Parameter setters
+      setGravity(value) {
+        this.gravity = value;
+      }
+      
+      setViscosity(value) {
+        this.viscosity = value;
+      }
+      
+      setParticleCount(value) {
+        this.particleCount = value;
+      }
+      
+      setSprayForce(value) {
+        this.sprayForce = value;
+      }
+    }
+    
+    document.addEventListener('DOMContentLoaded', async () => {
+      
+      const canvas = document.getElementById('bloodCanvas');
+      console.log(canvas);
+      
+      try {
+        const bloodSim = new WebGPUBloodSimulation(canvas);
+        
+        // Connect UI controls
+        document.getElementById('gravitySlider').addEventListener('input', function() {
+          bloodSim.setGravity(parseFloat(this.value));
+        });
+        
+        document.getElementById('viscositySlider').addEventListener('input', function() {
+          bloodSim.setViscosity(parseFloat(this.value));
+        });
+        
+        document.getElementById('particleCountSlider').addEventListener('input', function() {
+          bloodSim.setParticleCount(parseInt(this.value));
+        });
+        
+        document.getElementById('sprayForceSlider').addEventListener('input', function() {
+          bloodSim.setSprayForce(parseInt(this.value));
+        });
+        
+        document.getElementById('clearBtn').addEventListener('click', function() {
+          bloodSim.clear();
+        });
+        
+        document.getElementById('burstBtn').addEventListener('click', function() {
+          const canvasWidth = canvas.width;
+          const canvasHeight = canvas.height;
+          bloodSim.createBloodBurst(
+            canvasWidth/2 + (Math.random() - 0.5) * 200,
+            canvasHeight/2 + (Math.random() - 0.5) * 100
+          );
+        });
+        
+        document.getElementById('pauseBtn').addEventListener('click', function() {
+          bloodSim.togglePause();
+          this.textContent = bloodSim.paused ? 'Resume' : 'Pause';
+        });
+        
+      } catch (error) {
+        console.error("WebGPU initialization failed:", error);
+        console.log("Falling back to Canvas2D implementation");
+        
+        // Fallback to Canvas2D implementation (original blood effect)
+        const fallbackBlood = new CanvasBloodEffect(canvas);
+        fallbackBlood.start();
+        
+        // Connect UI controls to fallback
+        // (code omitted for brevity, similar to the original implementation)
+      }
+  });
+
+  </script>
+@endsection
\ No newline at end of file
diff --git a/resources/views/toys/blood.blade.php b/resources/views/toys/blood.blade.php
new file mode 100644
index 0000000..4953033
--- /dev/null
+++ b/resources/views/toys/blood.blade.php
@@ -0,0 +1,69 @@
+@extends('template')
+@section('head')
+<h1>Blood Splatters</h1>
+@vite(['resources/css/style.css', 'resources/css/jstoys.css', 'resources/js/blood.js'])
+@endsection
+@section('body')
+<div class="action-buttons">
+    <button id="clearBtn">Clear Canvas</button>
+    <button id="randomSprayBtn">Random Spray</button>
+    <button id="burstBtn">Blood Burst</button>
+    <button id="pauseBtn">Pause</button>
+</div>
+
+<canvas id="sprayCanvas" width="1200" height="800"></canvas>
+
+<div class="controls">
+<div class="control-group">
+    <label for="gravitySlider">Gravity</label>
+    <input type="range" id="gravitySlider" min="0.01" max="0.5" value="0.15" step="0.01">
+</div>
+
+<div class="control-group">
+    <label for="viscositySlider">Viscosity</label>
+    <input type="range" id="viscositySlider" min="0.75" max="0.99" value="0.92" step="0.01">
+</div>
+
+<div class="control-group">
+    <label for="particleCountSlider">Particle Count</label>
+    <input type="range" id="particleCountSlider" min="10" max="300" value="100">
+</div>
+
+<div class="control-group">
+    <label for="particleSizeSlider">Particle Size</label>
+    <input type="range" id="particleSizeSlider" min="1" max="8" value="3">
+</div>
+
+<div class="control-group">
+    <label for="sprayForceSlider">Spray Force</label>
+    <input type="range" id="sprayForceSlider" min="1" max="20" value="10">
+</div>
+
+<div class="control-group">
+    <label for="splatterSizeSlider">Splatter Size</label>
+    <input type="range" id="splatterSizeSlider" min="1" max="10" value="5">
+</div>
+
+<div class="control-group">
+    <label for="spreadSlider">Spread</label>
+    <input type="range" id="spreadSlider" min="0" max="1" value="0.3" step="0.05">
+</div>
+
+<div class="control-group">
+    <label for="dripToggle">Enable Drips</label>
+    <input type="checkbox" id="dripToggle" checked>
+</div>
+
+<div class="control-group">
+    <label for="poolToggle">Enable Pooling</label>
+    <input type="checkbox" id="poolToggle" checked>
+</div>
+
+<div class="control-group">
+    <label for="colorVariationSlider">Color Variation</label>
+    <input type="range" id="colorVariationSlider" min="0" max="50" value="15">
+</div>
+</div>
+
+<p>Click and drag on the canvas to create blood spray.</p>
+@endsection
\ No newline at end of file
diff --git a/resources/views/toys/fire.blade.php b/resources/views/toys/fire.blade.php
new file mode 100644
index 0000000..c82eebc
--- /dev/null
+++ b/resources/views/toys/fire.blade.php
@@ -0,0 +1,504 @@
+@extends('template')
+@section('head')
+<h1>Animated Fire Effect</h1>
+@vite(['resources/css/style.css', 'resources/css/jstoys.css'])
+@endsection
+@section('body')
+  <canvas id="fireCanvas" width="1000" height="800"></canvas>
+  
+  <div class="controls">
+    <div class="control-group">
+      <label for="intensitySlider">Intensity</label>
+      <input type="range" id="intensitySlider" min="1" max="150" value="10">
+    </div>
+    
+    <div class="control-group">
+      <label for="coolingSlider">Cooling</label>
+      <input type="range" id="coolingSlider" min="1" max="10" value="4">
+    </div>
+    
+    <div class="control-group">
+      <label for="speedSlider">Speed</label>
+      <input type="range" id="speedSlider" min=".1" max="25" value="5">
+    </div>
+    
+    <div class="control-group">
+      <label for="windSlider">Wind Direction</label>
+      <input type="range" id="windSlider" min="-10" max="10" value="0" step="0.5">
+      <span id="windValue">0</span>
+    </div>
+    
+    <div class="control-group">
+      <label for="windStrengthSlider">Wind Strength</label>
+      <input type="range" id="windStrengthSlider" min="0" max="10" value="3">
+    </div>
+    
+    <div class="control-group">
+      <label for="windVariabilityToggle">Variable Wind</label>
+      <input type="checkbox" id="windVariabilityToggle" checked>
+    </div>
+    
+    <div class="control-group">
+      <label for="windVariabilitySlider">Wind Variability</label>
+      <input type="range" id="windVariabilitySlider" min="1" max="10" value="5">
+    </div>
+    
+    <div class="control-group">
+      <label for="scatterSlider">Flame Scatter</label>
+      <input type="range" id="scatterSlider" min="1" max="10" value="5">
+    </div>
+    
+    <div class="control-group">
+      <label for="sourceWidthSlider">Fire Width</label>
+      <input type="range" id="sourceWidthSlider" min="10" max="100" value="100">
+      <span id="sourceWidthValue">100%</span>
+    </div>
+    
+    <div class="control-group">
+      <label for="emberToggle">Embers</label>
+      <input type="checkbox" id="emberToggle" checked>
+    </div>
+    
+    <div class="control-group">
+      <label for="emberRateSlider">Ember Rate</label>
+      <input type="range" id="emberRateSlider" min="1" max="20" value="5">
+    </div>
+    
+    <div class="control-group">
+      <label for="emberSizeSlider">Ember Size</label>
+      <input type="range" id="emberSizeSlider" min="1" max="5" value="2">
+    </div>
+  </div>
+  
+  <div>
+    <button id="pauseBtn">Pause</button>
+    <button id="resetBtn">Reset</button>
+  </div>
+  
+  <script>
+    // Fire simulation class
+    class FireEffect {
+      constructor(canvas, width, height) {
+        this.canvas = canvas;
+        this.ctx = canvas.getContext('2d');
+        this.width = width;
+        this.height = height;
+        
+        // Create image data buffer
+        this.imageData = this.ctx.createImageData(this.width, this.height);
+        
+        // Fire parameters - can be adjusted
+        this.intensity = 10;
+        this.cooling = 4;
+        this.speedFactor = 5;
+        this.windDirection = 0;  // Negative = left, Positive = right
+        this.windStrength = 3;   // How much the wind affects the fire
+        this.sourceWidth = 100;  // Width of fire source as percentage of canvas width
+        this.flameScatter = 5;   // How much flames scatter as they rise (1-10)
+        
+        // Wind variability
+        this.windVariabilityEnabled = true;
+        this.windVariability = 5;
+        this.windTime = 0;
+        this.currentVariableWind = 0;
+        this.targetVariableWind = 0;
+        this.windTransitionSpeed = 0.02;
+        
+        // Ember parameters
+        this.embersEnabled = true;
+        this.emberRate = 5;      // How many embers to spawn per frame
+        this.emberSize = 2;      // Size of embers
+        this.embers = [];        // Array to store active ember particles
+        
+        // Animation state
+        this.paused = false;
+        this.animationId = null;
+        
+        // Fire buffer - stores "heat" values
+        this.fireBuffer = new Array(this.width * this.height).fill(0);
+        
+        // Color palette for mapping heat values to colors
+        this.palette = this.createFirePalette();
+        
+        // Initial setup
+        this.initFire();
+      }
+      
+      // Creates a color palette with gradients from black to yellow to red
+      createFirePalette() {
+        const palette = [];
+        // Black to dark red
+        for (let i = 0; i < 32; i++) {
+          palette.push({ r: i * 2, g: 0, b: 0 });
+        }
+        // Dark red to bright red
+        for (let i = 0; i < 32; i++) {
+          palette.push({ r: 64 + i * 3, g: 0, b: 0 });
+        }
+        // Red to orange
+        for (let i = 0; i < 32; i++) {
+          palette.push({ r: 160 + i * 3, g: i * 5, b: 0 });
+        }
+        // Orange to yellow
+        for (let i = 0; i < 32; i++) {
+          palette.push({ r: 255, g: 160 + i * 3, b: i * 2 });
+        }
+        // Yellow to white (at the hottest)
+        for (let i = 0; i < 32; i++) {
+          palette.push({ r: 255, g: 255, b: i * 8 });
+        }
+        return palette;
+      }
+      
+      // Initialize the fire with a hot bottom row
+      initFire() {
+        // Reset all cells to 0
+        this.fireBuffer.fill(0);
+        this.embers = [];
+        
+        // Set bottom row to maximum heat based on source width
+        const sourceStart = Math.floor(this.width * (0.5 - this.sourceWidth/200));
+        const sourceEnd = Math.floor(this.width * (0.5 + this.sourceWidth/200));
+        
+        for (let x = 0; x < this.width; x++) {
+          // Only add heat within the source width
+          if (x >= sourceStart && x <= sourceEnd) {
+            // Add more heat intensity when source is narrower
+            const intensityMultiplier = 100 / this.sourceWidth;
+            const heatValue = Math.min(160, 100 + Math.random() * 60 * intensityMultiplier);
+            this.fireBuffer[(this.height - 1) * this.width + x] = heatValue;
+          } else {
+            this.fireBuffer[(this.height - 1) * this.width + x] = 0;
+          }
+        }
+      }
+      
+      // Update the fire simulation
+      updateFire() {
+        // Update heat values - simulate fire rising and cooling
+        for (let y = 0; y < this.height - 1; y++) {
+          for (let x = 0; x < this.width; x++) {
+            const src = y * this.width + x;
+            
+            // Calculate wind effect - stronger at higher points (more realistic)
+            const heightFactor = 1 - (y / this.height); // 0 at bottom, 1 at top
+            const windEffect = this.windDirection * this.windStrength * heightFactor * 0.05;
+            
+            // Random spread factor plus wind effect
+            const baseSpread = Math.floor(Math.random() * 3) - 1;
+            const windSpread = baseSpread + windEffect;
+            
+            // Apply wind to spread calculation
+            const windOffset = Math.floor(windSpread);
+            
+            // Calculate the destination index with wind-affected spread
+            const dstX = Math.max(0, Math.min(this.width - 1, x + windOffset));
+            const dst = (y + 1) * this.width + dstX;
+            
+            // Apply cooling - more cooling when wind is stronger
+            const windCoolingFactor = 1 + (Math.abs(this.windDirection) * 0.02);
+            let coolAmount = Math.random() * this.cooling * windCoolingFactor;
+            let value = this.fireBuffer[dst] - coolAmount;
+            
+            // Make sure we don't go below 0
+            this.fireBuffer[src] = Math.max(0, value);
+          }
+        }
+        
+        // Add new heat at the bottom for continuous fire based on source width
+        const sourceStart = Math.floor(this.width * (0.5 - this.sourceWidth/200));
+        const sourceEnd = Math.floor(this.width * (0.5 + this.sourceWidth/200));
+        
+        for (let x = 0; x < this.width; x++) {
+          // Only add heat within the source width
+          if (x >= sourceStart && x <= sourceEnd) {
+            if (Math.random() < 0.7) {
+              // Add more heat intensity when source is narrower
+              const intensityMultiplier = 100 / this.sourceWidth;
+              let value = Math.random() * this.intensity * intensityMultiplier;
+              const idx = (this.height - 1) * this.width + x;
+              this.fireBuffer[idx] = Math.min(160, this.fireBuffer[idx] + value);
+            }
+          }
+        }
+        
+        // Generate embers
+        if (this.embersEnabled) {
+          this.generateEmbers();
+        }
+      }
+      
+      // Generate ember particles
+      generateEmbers() {
+        const sourceStart = Math.floor(this.width * (0.5 - this.sourceWidth/200));
+        const sourceEnd = Math.floor(this.width * (0.5 + this.sourceWidth/200));
+        
+        // Generate new embers based on ember rate
+        for (let i = 0; i < this.emberRate; i++) {
+          if (Math.random() < 0.2) {
+            // Generate ember from a random position in the fire source
+            const x = sourceStart + Math.random() * (sourceEnd - sourceStart);
+            const y = this.height - 10 - Math.random() * 30;
+            
+            // Only create ember if the position is hot enough
+            const idx = Math.floor(y) * this.width + Math.floor(x);
+            if (this.fireBuffer[idx] > 80) {
+              // Create a new ember with random properties
+              this.embers.push({
+                x: x,
+                y: y,
+                size: (0.5 + Math.random()) * this.emberSize,
+                vx: (Math.random() - 0.5) * 1.5 + (this.windDirection * 0.1),
+                vy: -1 - Math.random() * 2,
+                life: 1.0,  // Life percentage (1.0 = full life, 0.0 = dead)
+                decay: 0.005 + Math.random() * 0.01
+              });
+            }
+          }
+        }
+        
+        // Update existing embers
+        for (let i = this.embers.length - 1; i >= 0; i--) {
+          const ember = this.embers[i];
+          
+          // Update position
+          ember.x += ember.vx;
+          ember.y += ember.vy;
+          
+          // Apply wind
+          ember.vx += this.windDirection * 0.01;
+          
+          // Apply slight upward acceleration (buoyancy)
+          ember.vy -= 0.01;
+          
+          // Decay life
+          ember.life -= ember.decay;
+          
+          // Remove dead embers
+          if (ember.life <= 0 || ember.x < 0 || ember.x >= this.width || ember.y < 0) {
+            this.embers.splice(i, 1);
+          }
+        }
+      }
+      
+      // Render the fire buffer to the canvas
+      renderFire() {
+        // Clear canvas with black background
+        this.ctx.fillStyle = 'black';
+        this.ctx.fillRect(0, 0, this.width, this.height);
+        
+        // Map heat values to colors and put them in the image data
+        for (let y = 0; y < this.height; y++) {
+          for (let x = 0; x < this.width; x++) {
+            const index = y * this.width + x;
+            const colorIndex = Math.min(this.palette.length - 1, Math.floor(this.fireBuffer[index]));
+            const color = this.palette[colorIndex];
+            
+            // Calculate image data index (4 bytes per pixel: R,G,B,A)
+            const imgDataIdx = (y * this.width + x) * 4;
+            
+            // Set the color
+            this.imageData.data[imgDataIdx] = color.r;
+            this.imageData.data[imgDataIdx + 1] = color.g;
+            this.imageData.data[imgDataIdx + 2] = color.b;
+            this.imageData.data[imgDataIdx + 3] = 255; // Alpha (fully opaque)
+          }
+        }
+        
+        // Put the image data on the canvas
+        this.ctx.putImageData(this.imageData, 0, 0);
+        
+        // Render embers on top of the fire
+        if (this.embersEnabled) {
+          this.ctx.globalCompositeOperation = 'lighter';
+          
+          for (const ember of this.embers) {
+            // Create a gradient for the ember
+            const gradient = this.ctx.createRadialGradient(
+              ember.x, ember.y, 0,
+              ember.x, ember.y, ember.size * 2
+            );
+            
+            // Ember color based on life (yellow-orange to red as it dies)
+            const alpha = ember.life * 0.7;
+            gradient.addColorStop(0, `rgba(255, 255, 200, ${alpha})`);
+            gradient.addColorStop(0.2, `rgba(255, 160, 20, ${alpha * 0.8})`);
+            gradient.addColorStop(1, 'rgba(255, 50, 0, 0)');
+            
+            // Draw the ember
+            this.ctx.fillStyle = gradient;
+            this.ctx.beginPath();
+            this.ctx.arc(ember.x, ember.y, ember.size * 2, 0, Math.PI * 2);
+            this.ctx.fill();
+          }
+          
+          // Reset composite operation
+          this.ctx.globalCompositeOperation = 'source-over';
+        }
+      }
+      
+      // Animation loop
+      animate() {
+        if (this.paused) return;
+        
+        // Update the fire simulation multiple times for smoother animation
+        for (let i = 0; i < this.speedFactor; i++) {
+          this.updateFire();
+        }
+        
+        // Render to canvas
+        this.renderFire();
+        
+        // Schedule next frame
+        this.animationId = requestAnimationFrame(() => this.animate());
+      }
+      
+      // Start the animation
+      start() {
+        this.paused = false;
+        if (!this.animationId) {
+          this.animate();
+        }
+      }
+      
+      // Pause the animation
+      pause() {
+        this.paused = true;
+        if (this.animationId) {
+          cancelAnimationFrame(this.animationId);
+          this.animationId = null;
+        }
+      }
+      
+      // Toggle pause state
+      togglePause() {
+        if (this.paused) {
+          this.start();
+        } else {
+          this.pause();
+        }
+      }
+      
+      // Reset the fire
+      reset() {
+        this.initFire();
+      }
+      
+      // Update parameters
+      setIntensity(value) {
+        this.intensity = value;
+      }
+      
+      setCooling(value) {
+        this.cooling = value;
+      }
+      
+      setSpeed(value) {
+        this.speedFactor = value;
+      }
+      
+      setWindDirection(value) {
+        this.windDirection = value;
+      }
+      
+      setWindStrength(value) {
+        this.windStrength = value;
+      }
+      
+      setSourceWidth(value) {
+        this.sourceWidth = value;
+        this.initFire(); // Reinitialize fire with new width
+      }
+      
+      setEmbersEnabled(enabled) {
+        this.embersEnabled = enabled;
+        if (!enabled) {
+          this.embers = []; // Clear existing embers when disabled
+        }
+      }
+      
+      setEmberRate(value) {
+        this.emberRate = value;
+      }
+      
+      setEmberSize(value) {
+        this.emberSize = value;
+      }
+    }
+    
+    // Get the canvas element
+    const canvas = document.getElementById('fireCanvas');
+    
+    // Create the fire effect
+    const fire = new FireEffect(canvas, canvas.width, canvas.height);
+    
+    // Start the animation
+    fire.start();
+    
+    // Set up UI controls
+    const intensitySlider = document.getElementById('intensitySlider');
+    const coolingSlider = document.getElementById('coolingSlider');
+    const speedSlider = document.getElementById('speedSlider');
+    const windSlider = document.getElementById('windSlider');
+    const windStrengthSlider = document.getElementById('windStrengthSlider');
+    const sourceWidthSlider = document.getElementById('sourceWidthSlider');
+    const emberToggle = document.getElementById('emberToggle');
+    const emberRateSlider = document.getElementById('emberRateSlider');
+    const emberSizeSlider = document.getElementById('emberSizeSlider');
+    const windValueDisplay = document.getElementById('windValue');
+    const sourceWidthValueDisplay = document.getElementById('sourceWidthValue');
+    const pauseBtn = document.getElementById('pauseBtn');
+    const resetBtn = document.getElementById('resetBtn');
+    
+    // Event listeners for sliders
+    intensitySlider.addEventListener('input', function() {
+      fire.setIntensity(parseInt(this.value));
+    });
+    
+    coolingSlider.addEventListener('input', function() {
+      fire.setCooling(parseInt(this.value));
+    });
+    
+    speedSlider.addEventListener('input', function() {
+      fire.setSpeed(parseInt(this.value));
+    });
+    
+    windSlider.addEventListener('input', function() {
+      const value = parseFloat(this.value);
+      fire.setWindDirection(value);
+      windValueDisplay.textContent = value.toFixed(1);
+    });
+    
+    windStrengthSlider.addEventListener('input', function() {
+      fire.setWindStrength(parseInt(this.value));
+    });
+    
+    sourceWidthSlider.addEventListener('input', function() {
+      const value = parseInt(this.value);
+      fire.setSourceWidth(value);
+      sourceWidthValueDisplay.textContent = value + '%';
+    });
+    
+    emberToggle.addEventListener('change', function() {
+      fire.setEmbersEnabled(this.checked);
+    });
+    
+    emberRateSlider.addEventListener('input', function() {
+      fire.setEmberRate(parseInt(this.value));
+    });
+    
+    emberSizeSlider.addEventListener('input', function() {
+      fire.setEmberSize(parseInt(this.value));
+    });
+    
+    // Event listeners for buttons
+    pauseBtn.addEventListener('click', function() {
+      fire.togglePause();
+      this.textContent = fire.paused ? 'Resume' : 'Pause';
+    });
+    
+    resetBtn.addEventListener('click', function() {
+      fire.reset();
+    });
+  </script>
+@endsection
\ No newline at end of file
diff --git a/resources/views/toys/index.blade.php b/resources/views/toys/index.blade.php
new file mode 100644
index 0000000..fd3f834
--- /dev/null
+++ b/resources/views/toys/index.blade.php
@@ -0,0 +1,15 @@
+@extends('template')
+
+@section('head')
+<title>Some Javascript toys</title>
+@endsection
+
+@section('nav')
+<a href = "/toy/blood">Blood Splatters</a>
+<a href = "/toy/fire">Animated Fire</a>
+
+@endsection
+
+@section('body')
+
+@endsection
\ No newline at end of file
diff --git a/resources/views/toys/spriteframework.blade.php b/resources/views/toys/spriteframework.blade.php
new file mode 100644
index 0000000..be0e823
--- /dev/null
+++ b/resources/views/toys/spriteframework.blade.php
@@ -0,0 +1,3736 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>Effect Sprite Generator with GIF Export</title>
+  <style>
+    body {
+      background: #222;
+      margin: 0;
+      padding: 20px;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      font-family: Arial, sans-serif;
+      color: #eee;
+    }
+    
+    h1, h2, h3 {
+      margin-top: 0;
+      color: #fff;
+      text-shadow: 1px 1px 3px rgba(0,0,0,0.5);
+    }
+    
+    .container {
+      display: flex;
+      flex-wrap: wrap;
+      max-width: 1200px;
+      gap: 20px;
+      justify-content: center;
+    }
+    
+    .canvas-container {
+      position: relative;
+      border: 1px solid #444;
+      background: #000;
+      box-shadow: 0 0 10px rgba(0,0,0,0.5);
+      margin-bottom: 10px;
+    }
+    
+    .canvas-container canvas {
+      display: block;
+    }
+    
+    .controls-panel {
+      width: 320px;
+      background: #333;
+      padding: 15px;
+      border-radius: 5px;
+      box-shadow: 0 0 10px rgba(0,0,0,0.5);
+    }
+    
+    .control-section {
+      margin-bottom: 20px;
+      border-bottom: 1px solid #444;
+      padding-bottom: 10px;
+    }
+    
+    .control-section:last-child {
+      margin-bottom: 0;
+      border-bottom: none;
+    }
+    
+    .control-group {
+      margin-bottom: 10px;
+    }
+    
+    label {
+      display: block;
+      margin-bottom: 5px;
+    }
+    
+    select, input[type="range"], input[type="number"], input[type="checkbox"] {
+      width: 100%;
+      margin-bottom: 5px;
+      background: #444;
+      color: #fff;
+      border: 1px solid #555;
+      padding: 5px;
+      border-radius: 4px;
+    }
+    
+    input[type="checkbox"] {
+      width: auto;
+    }
+    
+    select {
+      appearance: none;
+      padding: 8px;
+    }
+    
+    button {
+      background: #4a6cd3;
+      color: white;
+      border: none;
+      padding: 10px 15px;
+      border-radius: 4px;
+      cursor: pointer;
+      margin: 5px 5px 5px 0;
+      transition: background 0.2s;
+    }
+    
+    button:hover {
+      background: #5d7ee6;
+    }
+    
+    button.record {
+      background: #d34a4a;
+    }
+    
+    button.record:hover {
+      background: #e65d5d;
+    }
+    
+    button.export {
+      background: #4ad358;
+    }
+    
+    button.export:hover {
+      background: #5de66b;
+    }
+    
+    .export-panel {
+      margin-top: 20px;
+      padding: 15px;
+      background: #2a2a2a;
+      border-radius: 5px;
+    }
+    
+    .preview-container {
+      width: 600px;
+      background: #333;
+      padding: 15px;
+      border-radius: 5px;
+      box-shadow: 0 0 10px rgba(0,0,0,0.5);
+    }
+    
+    .preview-options {
+      display: flex;
+      flex-wrap: wrap;
+      justify-content: space-between;
+      margin-bottom: 10px;
+    }
+    
+    .preview-frames {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 5px;
+      max-height: 300px;
+      overflow-y: auto;
+      padding: 10px;
+      background: #2a2a2a;
+      border-radius: 4px;
+    }
+    
+    .frame-preview {
+      border: 1px solid #555;
+      background: #000;
+      position: relative;
+    }
+    
+    .frame-preview.selected {
+      border-color: #4a6cd3;
+    }
+    
+    .frame-preview canvas {
+      display: block;
+    }
+    
+    .frame-controls {
+      position: absolute;
+      bottom: 0;
+      right: 0;
+      background: rgba(0,0,0,0.7);
+      padding: 3px;
+    }
+    
+    .frame-controls button {
+      padding: 2px 5px;
+      margin: 0 2px;
+      font-size: 0.7em;
+    }
+    
+    .tabs {
+      display: flex;
+      margin-bottom: 15px;
+    }
+    
+    .tab {
+      padding: 10px 15px;
+      background: #333;
+      cursor: pointer;
+      border-radius: 4px 4px 0 0;
+      margin-right: 5px;
+    }
+    
+    .tab.active {
+      background: #4a6cd3;
+    }
+    
+    .tab-content {
+      display: none;
+    }
+    
+    .tab-content.active {
+      display: block;
+    }
+    
+    #effectPreview {
+      margin: 10px 0;
+    }
+    
+    .recording-indicator {
+      position: absolute;
+      top: 10px;
+      right: 10px;
+      width: 15px;
+      height: 15px;
+      border-radius: 50%;
+      background: #d34a4a;
+      display: none;
+    }
+    
+    .recording-indicator.active {
+      display: block;
+      animation: blink 1s infinite;
+    }
+    
+    @keyframes blink {
+      0% { opacity: 1; }
+      50% { opacity: 0.3; }
+      100% { opacity: 1; }
+    }
+    
+    .loader {
+      display: none;
+      border: 4px solid #f3f3f3;
+      border-top: 4px solid #4a6cd3;
+      border-radius: 50%;
+      width: 20px;
+      height: 20px;
+      animation: spin 2s linear infinite;
+      margin: 0 auto;
+    }
+    
+    @keyframes spin {
+      0% { transform: rotate(0deg); }
+      100% { transform: rotate(360deg); }
+    }
+    
+    .effect-preview {
+      display: inline-block;
+      margin: 10px;
+      text-align: center;
+      cursor: pointer;
+    }
+    
+    .effect-preview img {
+      border: 2px solid transparent;
+      border-radius: 5px;
+    }
+    
+    .effect-preview.selected img {
+      border-color: #4a6cd3;
+    }
+  </style>
+</head>
+<body>
+  <h1>Effect Sprite Generator</h1>
+  
+  <div class="container">
+    <div class="controls-panel">
+      <div class="control-section">
+        <h3>Effect Type</h3>
+        <div class="control-group">
+          <select id="effectType">
+            <option value="fire">Fire</option>
+            <option value="blood">Blood Splatter</option>
+            <option value="smoke">Smoke</option>
+            <option value="explosion">Explosion</option>
+            <option value="magic">Magic Effect</option>
+            <option value="water">Water</option>
+          </select>
+        </div>
+      </div>
+      
+      <div id="fireControls" class="effect-controls">
+        <div class="control-section">
+          <h3>Fire Parameters</h3>
+          <div class="control-group">
+            <label for="fireIntensity">Intensity</label>
+            <input type="range" id="fireIntensity" min="1" max="20" value="10">
+          </div>
+          <div class="control-group">
+            <label for="fireCooling">Cooling</label>
+            <input type="range" id="fireCooling" min="1" max="10" value="4">
+          </div>
+          <div class="control-group">
+            <label for="fireSpeed">Speed</label>
+            <input type="range" id="fireSpeed" min="1" max="10" value="5">
+          </div>
+          <div class="control-group">
+            <label for="fireScatter">Flame Scatter</label>
+            <input type="range" id="fireScatter" min="1" max="10" value="5">
+          </div>
+          <div class="control-group">
+            <label for="fireWidth">Fire Width (%)</label>
+            <input type="range" id="fireWidth" min="10" max="100" value="100">
+          </div>
+          <div class="control-group">
+            <label for="windDirection">Wind Direction</label>
+            <input type="range" id="windDirection" min="-10" max="10" value="0" step="0.5">
+          </div>
+          <div class="control-group">
+            <label for="windStrength">Wind Strength</label>
+            <input type="range" id="windStrength" min="0" max="10" value="3">
+          </div>
+          <div class="control-group">
+            <label>
+              <input type="checkbox" id="windVariability" checked>
+              Wind Variability
+            </label>
+          </div>
+          <div class="control-group">
+            <label for="emberToggle">
+              <input type="checkbox" id="emberToggle" checked>
+              Show Embers
+            </label>
+          </div>
+          <div class="control-group">
+            <label for="fireColor">Fire Color Preset</label>
+            <select id="fireColor">
+              <option value="default">Default (Red/Orange)</option>
+              <option value="blue">Blue Fire</option>
+              <option value="green">Green Fire</option>
+              <option value="purple">Purple Fire</option>
+              <option value="rainbow">Rainbow Fire</option>
+            </select>
+          </div>
+        </div>
+      </div>
+      
+      <div id="bloodControls" class="effect-controls" style="display: none;">
+        <div class="control-section">
+          <h3>Blood Splatter Parameters</h3>
+          <div class="control-group">
+            <label for="bloodGravity">Gravity</label>
+            <input type="range" id="bloodGravity" min="0.01" max="0.5" value="0.15" step="0.01">
+          </div>
+          <div class="control-group">
+            <label for="bloodViscosity">Viscosity</label>
+            <input type="range" id="bloodViscosity" min="0.75" max="0.99" value="0.92" step="0.01">
+          </div>
+          <div class="control-group">
+            <label for="bloodParticleCount">Particle Count</label>
+            <input type="range" id="bloodParticleCount" min="10" max="500" value="100">
+          </div>
+          <div class="control-group">
+            <label for="bloodParticleSize">Particle Size</label>
+            <input type="range" id="bloodParticleSize" min="1" max="8" value="3">
+          </div>
+          <div class="control-group">
+            <label for="bloodSprayForce">Spray Force</label>
+            <input type="range" id="bloodSprayForce" min="1" max="20" value="10">
+          </div>
+          <div class="control-group">
+            <label for="bloodSpread">Spread</label>
+            <input type="range" id="bloodSpread" min="0" max="1" value="0.3" step="0.05">
+          </div>
+          <div class="control-group">
+            <label for="bloodColor">Blood Color</label>
+            <select id="bloodColor">
+              <option value="red">Red</option>
+              <option value="green">Green (Slime)</option>
+              <option value="blue">Blue</option>
+              <option value="black">Black</option>
+              <option value="custom">Custom</option>
+            </select>
+          </div>
+          <div id="customBloodColorGroup" class="control-group" style="display: none;">
+            <label for="customBloodColor">Custom Color</label>
+            <input type="color" id="customBloodColor" value="#ff0000">
+          </div>
+          <div class="control-group">
+            <label>
+              <input type="checkbox" id="dripsToggle" checked>
+              Enable Drips
+            </label>
+          </div>
+          <div class="control-group">
+            <label>
+              <input type="checkbox" id="poolingToggle" checked>
+              Enable Pooling
+            </label>
+          </div>
+        </div>
+      </div>
+      
+      <div id="smokeControls" class="effect-controls" style="display: none;">
+        <div class="control-section">
+          <h3>Smoke Parameters</h3>
+          <div class="control-group">
+            <label for="smokeOpacity">Opacity</label>
+            <input type="range" id="smokeOpacity" min="0.1" max="1" value="0.6" step="0.05">
+          </div>
+          <div class="control-group">
+            <label for="smokeRiseSpeed">Rise Speed</label>
+            <input type="range" id="smokeRiseSpeed" min="0.5" max="5" value="1.5" step="0.1">
+          </div>
+          <div class="control-group">
+            <label for="smokeDensity">Density</label>
+            <input type="range" id="smokeDensity" min="1" max="10" value="5">
+          </div>
+          <div class="control-group">
+            <label for="smokeTurbulence">Turbulence</label>
+            <input type="range" id="smokeTurbulence" min="0" max="10" value="3">
+          </div>
+          <div class="control-group">
+            <label for="smokeSize">Particle Size</label>
+            <input type="range" id="smokeSize" min="5" max="50" value="20">
+          </div>
+          <div class="control-group">
+            <label for="smokeColor">Smoke Color</label>
+            <select id="smokeColor">
+              <option value="white">White</option>
+              <option value="black">Black</option>
+              <option value="gray">Gray</option>
+              <option value="custom">Custom</option>
+            </select>
+          </div>
+          <div id="customSmokeColorGroup" class="control-group" style="display: none;">
+            <label for="customSmokeColor">Custom Color</label>
+            <input type="color" id="customSmokeColor" value="#cccccc">
+          </div>
+        </div>
+      </div>
+      
+      <div id="explosionControls" class="effect-controls" style="display: none;">
+        <div class="control-section">
+          <h3>Explosion Parameters</h3>
+          <div class="control-group">
+            <label for="explosionSize">Size</label>
+            <input type="range" id="explosionSize" min="1" max="10" value="5">
+          </div>
+          <div class="control-group">
+            <label for="explosionSpeed">Speed</label>
+            <input type="range" id="explosionSpeed" min="1" max="10" value="5">
+          </div>
+          <div class="control-group">
+            <label for="explosionParticles">Particle Count</label>
+            <input type="range" id="explosionParticles" min="50" max="500" value="200">
+          </div>
+          <div class="control-group">
+            <label for="explosionColor">Color Scheme</label>
+            <select id="explosionColor">
+              <option value="fire">Fire (Orange/Red)</option>
+              <option value="energy">Energy (Blue/White)</option>
+              <option value="toxic">Toxic (Green/Yellow)</option>
+              <option value="magic">Magic (Purple/Pink)</option>
+            </select>
+          </div>
+          <div class="control-group">
+            <label>
+              <input type="checkbox" id="explosionSmoke" checked>
+              Include Smoke
+            </label>
+          </div>
+          <div class="control-group">
+            <label>
+              <input type="checkbox" id="explosionShockwave" checked>
+              Include Shockwave
+            </label>
+          </div>
+          <div class="control-group">
+            <label>
+              <input type="checkbox" id="explosionLoop">
+              Loop Animation
+            </label>
+          </div>
+        </div>
+      </div>
+      
+      <div id="magicControls" class="effect-controls" style="display: none;">
+        <div class="control-section">
+          <h3>Magic Effect Parameters</h3>
+          <div class="control-group">
+            <label for="magicType">Effect Type</label>
+            <select id="magicType">
+              <option value="sparkles">Sparkles</option>
+              <option value="aura">Aura</option>
+              <option value="bolts">Energy Bolts</option>
+              <option value="portal">Portal</option>
+            </select>
+          </div>
+          <div class="control-group">
+            <label for="magicIntensity">Intensity</label>
+            <input type="range" id="magicIntensity" min="1" max="10" value="5">
+          </div>
+          <div class="control-group">
+            <label for="magicSpeed">Speed</label>
+            <input type="range" id="magicSpeed" min="1" max="10" value="5">
+          </div>
+          <div class="control-group">
+            <label for="magicColor">Color Scheme</label>
+            <select id="magicColor">
+              <option value="arcane">Arcane (Purple)</option>
+              <option value="nature">Nature (Green)</option>
+              <option value="fire">Fire (Red/Orange)</option>
+              <option value="ice">Ice (Blue/White)</option>
+              <option value="holy">Holy (Gold/White)</option>
+              <option value="void">Void (Black/Purple)</option>
+            </select>
+          </div>
+          <div class="control-group">
+            <label for="magicGlow">Glow Intensity</label>
+            <input type="range" id="magicGlow" min="0" max="10" value="5">
+          </div>
+          <div class="control-group">
+            <label>
+              <input type="checkbox" id="magicPulse" checked>
+              Pulsing Effect
+            </label>
+          </div>
+        </div>
+      </div>
+      
+      <div id="waterControls" class="effect-controls" style="display: none;">
+        <div class="control-section">
+          <h3>Water Parameters</h3>
+          <div class="control-group">
+            <label for="waterType">Effect Type</label>
+            <select id="waterType">
+              <option value="splash">Splash</option>
+              <option value="drip">Drip</option>
+              <option value="flow">Flow</option>
+              <option value="ripple">Ripple</option>
+            </select>
+          </div>
+          <div class="control-group">
+            <label for="waterViscosity">Viscosity</label>
+            <input type="range" id="waterViscosity" min="0.8" max="1" value="0.95" step="0.01">
+          </div>
+          <div class="control-group">
+            <label for="waterSpeed">Speed</label>
+            <input type="range" id="waterSpeed" min="1" max="10" value="5">
+          </div>
+          <div class="control-group">
+            <label for="waterParticles">Particle Count</label>
+            <input type="range" id="waterParticles" min="50" max="500" value="200">
+          </div>
+          <div class="control-group">
+            <label for="waterColor">Water Color</label>
+            <select id="waterColor">
+              <option value="clear">Clear Blue</option>
+              <option value="deep">Deep Blue</option>
+              <option value="murky">Murky</option>
+              <option value="toxic">Toxic Green</option>
+              <option value="custom">Custom</option>
+            </select>
+          </div>
+          <div id="customWaterColorGroup" class="control-group" style="display: none;">
+            <label for="customWaterColor">Custom Color</label>
+            <input type="color" id="customWaterColor" value="#4a8eff">
+          </div>
+          <div class="control-group">
+            <label for="waterTransparency">Transparency</label>
+            <input type="range" id="waterTransparency" min="0.1" max="1" value="0.7" step="0.05">
+          </div>
+          <div class="control-group">
+            <label>
+              <input type="checkbox" id="waterReflection" checked>
+              Reflections
+            </label>
+          </div>
+        </div>
+      </div>
+      
+      <div class="control-section">
+        <h3>Animation Settings</h3>
+        <div class="control-group">
+          <label for="canvasWidth">Canvas Width</label>
+          <input type="number" id="canvasWidth" min="64" max="512" value="256">
+        </div>
+        <div class="control-group">
+          <label for="canvasHeight">Canvas Height</label>
+          <input type="number" id="canvasHeight" min="64" max="512" value="256">
+        </div>
+        <div class="control-group">
+          <label for="backgroundColor">Background Color</label>
+          <select id="backgroundColor">
+            <option value="transparent">Transparent</option>
+            <option value="black">Black</option>
+            <option value="white">White</option>
+            <option value="custom">Custom</option>
+          </select>
+        </div>
+        <div id="customBgColorGroup" class="control-group" style="display: none;">
+          <label for="customBgColor">Custom Color</label>
+          <input type="color" id="customBgColor" value="#000000">
+        </div>
+        <div class="control-group">
+          <button id="resizeCanvas">Apply Size</button>
+        </div>
+      </div>
+      
+      <div class="control-section">
+        <h3>GIF Export</h3>
+        <div class="control-group">
+          <label for="gifQuality">Quality</label>
+          <select id="gifQuality">
+            <option value="high">High (more colors, larger file)</option>
+            <option value="medium" selected>Medium</option>
+            <option value="low">Low (fewer colors, smaller file)</option>
+          </select>
+        </div>
+        <div class="control-group">
+          <label for="frameDuration">Frame Duration (ms)</label>
+          <input type="number" id="frameDuration" min="10" max="1000" value="100">
+        </div>
+        <div class="control-group">
+          <label for="loopCount">Loop Count</label>
+          <input type="number" id="loopCount" min="0" max="100" value="0">
+          <small>(0 = infinite loop)</small>
+        </div>
+        <div class="button-group">
+          <button id="recordBtn" class="record">Start Recording</button>
+          <button id="exportGifBtn" class="export" disabled>Export as GIF</button>
+        </div>
+      </div>
+    </div>
+    
+    <div class="preview-container">
+      <h3>Effect Preview</h3>
+      
+      <div class="canvas-container">
+        <canvas id="effectCanvas" width="256" height="256"></canvas>
+        <div id="recordingIndicator" class="recording-indicator"></div>
+      </div>
+      
+      <div id="recordingControls" style="display: none;">
+        <div class="recording-stats">
+          <p>Recording: <span id="frameCount">0</span> frames captured</p>
+          <button id="stopRecordingBtn">Stop Recording</button>
+          <div class="loader" id="exportLoader"></div>
+        </div>
+      </div>
+      
+      <div id="framesPreview" style="display: none;">
+        <h3>Captured Frames</h3>
+        <div class="preview-options">
+          <button id="clearFramesBtn">Clear All Frames</button>
+          <button id="previewAnimationBtn">Preview Animation</button>
+        </div>
+        <div class="preview-frames" id="framesContainer">
+          <!-- Captured frames will be displayed here -->
+        </div>
+      </div>
+      
+      <div id="exportedPreview" style="display: none;">
+        <h3>Exported Animation</h3>
+        <div id="exportResult"></div>
+      </div>
+    </div>
+  </div>
+  
+  <!-- Include gif.js library -->
+  <script src="https://cdnjs.cloudflare.com/gif.js/0.2.0/gif.js"></script>
+  
+  <script>
+    // Global variables
+    let effectCanvas, effectCtx;
+    let currentEffect = 'fire';
+    let recording = false;
+    let frames = [];
+    let currentFireEffect, currentBloodEffect, currentSmokeEffect, currentExplosionEffect, currentMagicEffect, currentWaterEffect;
+    let animationId = null;
+    
+    // Initialize on page load
+    window.addEventListener('DOMContentLoaded', () => {
+      // Get canvas and context
+      effectCanvas = document.getElementById('effectCanvas');
+      effectCtx = effectCanvas.getContext('2d');
+      
+      // Init canvas size
+      updateCanvasSize();
+      
+      // Set up event listeners
+      document.getElementById('effectType').addEventListener('change', handleEffectChange);
+      document.getElementById('recordBtn').addEventListener('click', toggleRecording);
+      document.getElementById('stopRecordingBtn').addEventListener('click', stopRecording);
+      document.getElementById('exportGifBtn').addEventListener('click', exportGif);
+      document.getElementById('resizeCanvas').addEventListener('click', updateCanvasSize);
+      document.getElementById('clearFramesBtn').addEventListener('click', clearFrames);
+      document.getElementById('previewAnimationBtn').addEventListener('click', previewAnimation);
+      
+      // Background color change handler
+      document.getElementById('backgroundColor').addEventListener('change', function() {
+        if (this.value === 'custom') {
+          document.getElementById('customBgColorGroup').style.display = 'block';
+        } else {
+          document.getElementById('customBgColorGroup').style.display = 'none';
+        }
+      });
+      
+      // Custom color handlers
+      document.getElementById('bloodColor').addEventListener('change', function() {
+        document.getElementById('customBloodColorGroup').style.display = 
+          this.value === 'custom' ? 'block' : 'none';
+      });
+      
+      document.getElementById('smokeColor').addEventListener('change', function() {
+        document.getElementById('customSmokeColorGroup').style.display = 
+          this.value === 'custom' ? 'block' : 'none';
+      });
+      
+      document.getElementById('waterColor').addEventListener('change', function() {
+        document.getElementById('customWaterColorGroup').style.display = 
+          this.value === 'custom' ? 'block' : 'none';
+      });
+      
+      // Initialize fire effect
+      initFireEffect();
+      
+      // Start animation loop
+      animate();
+    });
+    
+    function updateCanvasSize() {
+      const width = parseInt(document.getElementById('canvasWidth').value);
+      const height = parseInt(document.getElementById('canvasHeight').value);
+      
+      // Update canvas size
+      effectCanvas.width = width;
+      effectCanvas.height = height;
+      
+      // Re-initialize current effect
+      switch(currentEffect) {
+        case 'fire':
+          initFireEffect();
+          break;
+        case 'blood':
+          initBloodEffect();
+          break;
+        case 'smoke':
+          initSmokeEffect();
+          break;
+        case 'explosion':
+          initExplosionEffect();
+          break;
+        case 'magic':
+          initMagicEffect();
+          break;
+        case 'water':
+          initWaterEffect();
+          break;
+      }
+    }
+    
+    function handleEffectChange() {
+      // Get the selected effect
+      const selectedEffect = document.getElementById('effectType').value;
+      
+      // Hide all effect controls
+      document.querySelectorAll('.effect-controls').forEach(el => {
+        el.style.display = 'none';
+      });
+      
+      // Show the selected effect controls
+      document.getElementById(`${selectedEffect}Controls`).style.display = 'block';
+      
+      // Update the current effect
+      currentEffect = selectedEffect;
+      
+      // Initialize the selected effect if not already initialized
+      switch(selectedEffect) {
+        case 'fire':
+          if (!currentFireEffect) initFireEffect();
+          break;
+        case 'blood':
+          if (!currentBloodEffect) initBloodEffect();
+          break;
+        case 'smoke':
+          if (!currentSmokeEffect) initSmokeEffect();
+          break;
+        case 'explosion':
+          if (!currentExplosionEffect) initExplosionEffect();
+          break;
+        case 'magic':
+          if (!currentMagicEffect) initMagicEffect();
+          break;
+        case 'water':
+          if (!currentWaterEffect) initWaterEffect();
+          break;
+      }
+    }
+    
+    // Frame Recording Functions
+    function toggleRecording() {
+      if (!recording) {
+        startRecording();
+      } else {
+        stopRecording();
+      }
+    }
+    
+    function startRecording() {
+      recording = true;
+      frames = [];
+      document.getElementById('recordBtn').textContent = 'Recording...';
+      document.getElementById('recordBtn').classList.add('recording');
+      document.getElementById('recordingIndicator').classList.add('active');
+      document.getElementById('recordingControls').style.display = 'block';
+      document.getElementById('framesPreview').style.display = 'none';
+      document.getElementById('exportedPreview').style.display = 'none';
+    }
+    
+    function stopRecording() {
+      recording = false;
+      document.getElementById('recordBtn').textContent = 'Start Recording';
+      document.getElementById('recordBtn').classList.remove('recording');
+      document.getElementById('recordingIndicator').classList.remove('active');
+      document.getElementById('exportGifBtn').disabled = frames.length === 0;
+      document.getElementById('frameCount').textContent = frames.length;
+      
+      if (frames.length > 0) {
+        document.getElementById('framesPreview').style.display = 'block';
+        renderFramePreviews();
+      }
+    }
+    
+    function captureFrame() {
+      // Create a new canvas for the frame
+      const frameCanvas = document.createElement('canvas');
+      frameCanvas.width = effectCanvas.width;
+      frameCanvas.height = effectCanvas.height;
+      const frameCtx = frameCanvas.getContext('2d');
+      
+      // Copy the current canvas state
+      frameCtx.drawImage(effectCanvas, 0, 0);
+      
+      // Add to frames array
+      frames.push(frameCanvas.toDataURL('image/png'));
+      
+      // Update frame count
+      document.getElementById('frameCount').textContent = frames.length;
+    }
+    
+    function renderFramePreviews() {
+      const container = document.getElementById('framesContainer');
+      container.innerHTML = '';
+      
+      frames.forEach((frame, index) => {
+        const frameDiv = document.createElement('div');
+        frameDiv.className = 'frame-preview';
+        
+        const frameCanvas = document.createElement('canvas');
+        frameCanvas.width = 80;
+        frameCanvas.height = 80;
+        const frameCtx = frameCanvas.getContext('2d');
+        
+        const img = new Image();
+        img.onload = function() {
+          // Calculate sizing to maintain aspect ratio
+          const aspectRatio = img.width / img.height;
+          let drawWidth, drawHeight;
+          
+          if (aspectRatio > 1) {
+            drawWidth = 80;
+            drawHeight = 80 / aspectRatio;
+          } else {
+            drawHeight = 80;
+            drawWidth = 80 * aspectRatio;
+          }
+          
+          // Center the image
+          const offsetX = (80 - drawWidth) / 2;
+          const offsetY = (80 - drawHeight) / 2;
+          
+          frameCtx.drawImage(img, offsetX, offsetY, drawWidth, drawHeight);
+        };
+        img.src = frame;
+        
+        // Add controls
+        const controls = document.createElement('div');
+        controls.className = 'frame-controls';
+        
+        const deleteBtn = document.createElement('button');
+        deleteBtn.textContent = 'X';
+        deleteBtn.addEventListener('click', () => {
+          frames.splice(index, 1);
+          renderFramePreviews();
+          document.getElementById('frameCount').textContent = frames.length;
+          document.getElementById('exportGifBtn').disabled = frames.length === 0;
+        });
+        
+        controls.appendChild(deleteBtn);
+        frameDiv.appendChild(frameCanvas);
+        frameDiv.appendChild(controls);
+        container.appendChild(frameDiv);
+      });
+    }
+    
+    function clearFrames() {
+      frames = [];
+      document.getElementById('framesContainer').innerHTML = '';
+      document.getElementById('frameCount').textContent = '0';
+      document.getElementById('exportGifBtn').disabled = true;
+      document.getElementById('framesPreview').style.display = 'none';
+    }
+    
+    function previewAnimation() {
+      if (frames.length === 0) return;
+      
+      // Create preview animation container
+      const container = document.getElementById('exportedPreview');
+      container.style.display = 'block';
+      container.querySelector('#exportResult').innerHTML = '';
+      
+      // Create preview canvas
+      const previewCanvas = document.createElement('canvas');
+      previewCanvas.width = effectCanvas.width;
+      previewCanvas.height = effectCanvas.height;
+      const previewCtx = previewCanvas.getContext('2d');
+      
+      document.getElementById('exportResult').appendChild(previewCanvas);
+      
+      // Animation variables
+      let currentFrame = 0;
+      const frameDuration = parseInt(document.getElementById('frameDuration').value);
+      
+      // Clear any existing animation
+      if (animationId) {
+        cancelAnimationFrame(animationId);
+      }
+      
+      // Animation function
+      function animatePreview() {
+        const img = new Image();
+        img.onload = function() {
+          previewCtx.clearRect(0, 0, previewCanvas.width, previewCanvas.height);
+          previewCtx.drawImage(img, 0, 0, previewCanvas.width, previewCanvas.height);
+          
+          currentFrame = (currentFrame + 1) % frames.length;
+          setTimeout(() => {
+            animationId = requestAnimationFrame(animatePreview);
+          }, frameDuration);
+        };
+        img.src = frames[currentFrame];
+      }
+      
+      animatePreview();
+    }
+    
+    function exportGif() {
+      if (frames.length === 0) return;
+      
+      // Show loader
+      document.getElementById('exportLoader').style.display = 'block';
+      
+      // Get export settings
+      const quality = document.getElementById('gifQuality').value;
+      const frameDuration = parseInt(document.getElementById('frameDuration').value);
+      const loopCount = parseInt(document.getElementById('loopCount').value);
+      
+      // Set up GIF encoder with appropriate settings
+      const gif = new GIF({
+        workers: 2,
+        quality: quality === 'high' ? 1 : quality === 'medium' ? 5 : 20,
+        workerScript: 'https://cdnjs.cloudflare.com/gif.js/0.2.0/gif.worker.js',
+        width: effectCanvas.width,
+        height: effectCanvas.height,
+        repeat: loopCount
+      });
+      
+      let framesLoaded = 0;
+      
+      // Add each frame to the gif
+      frames.forEach(frameData => {
+        const img = new Image();
+        img.onload = function() {
+          const tempCanvas = document.createElement('canvas');
+          tempCanvas.width = effectCanvas.width;
+          tempCanvas.height = effectCanvas.height;
+          const tempCtx = tempCanvas.getContext('2d');
+          
+          tempCtx.drawImage(img, 0, 0, effectCanvas.width, effectCanvas.height);
+          gif.addFrame(tempCtx, {delay: frameDuration, copy: true});
+          
+          framesLoaded++;
+          if (framesLoaded === frames.length) {
+            // All frames loaded, render the gif
+            gif.render();
+          }
+        };
+        img.src = frameData;
+      });
+      
+      // When the gif is finished
+      gif.on('finished', function(blob) {
+        // Hide loader
+        document.getElementById('exportLoader').style.display = 'none';
+        
+        // Create preview
+        const container = document.getElementById('exportedPreview');
+        container.style.display = 'block';
+        
+        const resultContainer = document.getElementById('exportResult');
+        resultContainer.innerHTML = '';
+        
+        // Display the gif
+        const img = document.createElement('img');
+        img.src = URL.createObjectURL(blob);
+        resultContainer.appendChild(img);
+        
+        // Add download button
+        const downloadBtn = document.createElement('button');
+        downloadBtn.textContent = 'Download GIF';
+        downloadBtn.className = 'export';
+        downloadBtn.style.marginTop = '10px';
+        downloadBtn.addEventListener('click', () => {
+          const link = document.createElement('a');
+          link.href = URL.createObjectURL(blob);
+          link.download = `${currentEffect}-effect.gif`;
+          link.click();
+        });
+        
+        resultContainer.appendChild(document.createElement('br'));
+        resultContainer.appendChild(downloadBtn);
+      });
+    }
+    
+    // Animation loop
+    function animate() {
+      // Clear canvas
+      clearCanvas();
+      
+      // Update and render current effect
+      switch(currentEffect) {
+        case 'fire':
+          updateFireEffect();
+          break;
+        case 'blood':
+          updateBloodEffect();
+          break;
+        case 'smoke':
+          updateSmokeEffect();
+          break;
+        case 'explosion':
+          updateExplosionEffect();
+          break;
+        case 'magic':
+          updateMagicEffect();
+          break;
+        case 'water':
+          updateWaterEffect();
+          break;
+      }
+      
+      // Capture frame if recording
+      if (recording) {
+        captureFrame();
+      }
+      
+      // Continue animation loop
+      requestAnimationFrame(animate);
+    }
+    
+    function clearCanvas() {
+      const bgColor = document.getElementById('backgroundColor').value;
+      
+      if (bgColor === 'transparent') {
+        effectCtx.clearRect(0, 0, effectCanvas.width, effectCanvas.height);
+      } else if (bgColor === 'custom') {
+        effectCtx.fillStyle = document.getElementById('customBgColor').value;
+        effectCtx.fillRect(0, 0, effectCanvas.width, effectCanvas.height);
+      } else {
+        effectCtx.fillStyle = bgColor;
+        effectCtx.fillRect(0, 0, effectCanvas.width, effectCanvas.height);
+      }
+    }
+    
+    /*** FIRE EFFECT ***/
+    
+    function initFireEffect() {
+      const width = effectCanvas.width;
+      const height = effectCanvas.height;
+      
+      currentFireEffect = {
+        width: width,
+        height: height,
+        fireBuffer: new Array(width * height).fill(0),
+        palette: createFirePalette('default'),
+        particles: [],
+        // Parameters
+        intensity: 10,
+        cooling: 4,
+        speedFactor: 5,
+        windDirection: 0,
+        windStrength: 3,
+        flameScatter: 5,
+        sourceWidth: 100,
+        windVariabilityEnabled: true,
+        windVariability: 5,
+        embersEnabled: true,
+        emberRate: 5,
+        emberSize: 2,
+        // Wind variability
+        windTime: 0,
+        currentVariableWind: 0,
+        targetVariableWind: 0
+      };
+      
+      // Initialize the fire with heat at bottom
+      resetFireBuffer();
+      
+      // Setup event listeners for fire parameters
+      document.getElementById('fireIntensity').addEventListener('input', function() {
+        currentFireEffect.intensity = parseInt(this.value);
+      });
+      
+      document.getElementById('fireCooling').addEventListener('input', function() {
+        currentFireEffect.cooling = parseInt(this.value);
+      });
+      
+      document.getElementById('fireSpeed').addEventListener('input', function() {
+        currentFireEffect.speedFactor = parseInt(this.value);
+      });
+      
+      document.getElementById('fireScatter').addEventListener('input', function() {
+        currentFireEffect.flameScatter = parseInt(this.value);
+      });
+      
+      document.getElementById('fireWidth').addEventListener('input', function() {
+        currentFireEffect.sourceWidth = parseInt(this.value);
+      });
+      
+      document.getElementById('windDirection').addEventListener('input', function() {
+        currentFireEffect.windDirection = parseFloat(this.value);
+      });
+      
+      document.getElementById('windStrength').addEventListener('input', function() {
+        currentFireEffect.windStrength = parseInt(this.value);
+      });
+      
+      document.getElementById('windVariability').addEventListener('change', function() {
+        currentFireEffect.windVariabilityEnabled = this.checked;
+      });
+      
+      document.getElementById('emberToggle').addEventListener('change', function() {
+        currentFireEffect.embersEnabled = this.checked;
+        if (!this.checked) {
+          currentFireEffect.particles = [];
+        }
+      });
+      
+      document.getElementById('fireColor').addEventListener('change', function() {
+        currentFireEffect.palette = createFirePalette(this.value);
+      });
+    }
+    
+    function resetFireBuffer() {
+      if (!currentFireEffect) return;
+      
+      const width = currentFireEffect.width;
+      const height = currentFireEffect.height;
+      
+      // Reset buffer
+      currentFireEffect.fireBuffer.fill(0);
+      
+      // Create heat source based on source width
+      const sourceWidth = currentFireEffect.sourceWidth;
+      const sourceStart = Math.floor(width * (0.5 - sourceWidth/200));
+      const sourceEnd = Math.floor(width * (0.5 + sourceWidth/200));
+      
+      for (let x = 0; x < width; x++) {
+        if (x >= sourceStart && x <= sourceEnd) {
+          currentFireEffect.fireBuffer[(height - 1) * width + x] = 160;
+        }
+      }
+    }
+    
+    function createFirePalette(type) {
+      const palette = [];
+      
+      switch(type) {
+        case 'blue':
+          // Blue fire palette
+          // Black to dark blue
+          for (let i = 0; i < 32; i++) {
+            palette.push({ r: 0, g: 0, b: i * 2 });
+          }
+          // Dark blue to blue
+          for (let i = 0; i < 32; i++) {
+            palette.push({ r: 0, g: i * 2, b: 64 + i * 5 });
+          }
+          // Blue to light blue
+          for (let i = 0; i < 32; i++) {
+            palette.push({ r: 0, g: 64 + i * 3, b: 224 - i * 2 });
+          }
+          // Light blue to white
+          for (let i = 0; i < 32; i++) {
+            palette.push({ r: i * 8, g: 160 + i * 3, b: 160 + i * 3 });
+          }
+          break;
+          
+        case 'green':
+          // Green fire palette
+          // Black to dark green
+          for (let i = 0; i < 32; i++) {
+            palette.push({ r: 0, g: i * 2, b: 0 });
+          }
+          // Dark green to green
+          for (let i = 0; i < 32; i++) {
+            palette.push({ r: 0, g: 64 + i * 3, b: i * 2 });
+          }
+          // Green to light green/yellow
+          for (let i = 0; i < 32; i++) {
+            palette.push({ r: i * 5, g: 160 + i * 3, b: 64 + i });
+          }
+          // Light green to white
+          for (let i = 0; i < 32; i++) {
+            palette.push({ r: 160 + i * 3, g: 224 + i, b: 96 + i * 5 });
+          }
+          break;
+          
+        case 'purple':
+          // Purple fire palette
+          // Black to dark purple
+          for (let i = 0; i < 32; i++) {
+            palette.push({ r: i * 2, g: 0, b: i * 3 });
+          }
+          // Dark purple to purple
+          for (let i = 0; i < 32; i++) {
+            palette.push({ r: 64 + i * 2, g: 0, b: 96 + i * 3 });
+          }
+          // Purple to magenta
+          for (let i = 0; i < 32; i++) {
+            palette.push({ r: 128 + i * 4, g: i * 2, b: 192 - i });
+          }
+          // Magenta to white
+          for (let i = 0; i < 32; i++) {
+            palette.push({ r: 224 + i, g: 64 + i * 6, b: 160 + i * 3 });
+          }
+          break;
+          
+        case 'rainbow':
+          // Rainbow fire palette
+          const steps = 32;
+          const hueStep = 360 / (4 * steps);
+          
+          // Create a rainbow gradient
+          for (let i = 0; i < 4 * steps; i++) {
+            const hue = i * hueStep;
+            const rgb = hslToRgb(hue, 100, Math.min(50 + i / 2, 90));
+            palette.push({ r: rgb[0], g: rgb[1], b: rgb[2] });
+          }
+          break;
+          
+        default:
+          // Default red/orange/yellow fire palette
+          // Black to dark red
+          for (let i = 0; i < 32; i++) {
+            palette.push({ r: i * 2, g: 0, b: 0 });
+          }
+          // Dark red to bright red
+          for (let i = 0; i < 32; i++) {
+            palette.push({ r: 64 + i * 3, g: 0, b: 0 });
+          }
+          // Red to orange
+          for (let i = 0; i < 32; i++) {
+            palette.push({ r: 160 + i * 3, g: i * 5, b: 0 });
+          }
+          // Orange to yellow
+          for (let i = 0; i < 32; i++) {
+            palette.push({ r: 255, g: 160 + i * 3, b: i * 2 });
+          }
+          // Yellow to white
+          for (let i = 0; i < 32; i++) {
+            palette.push({ r: 255, g: 255, b: i * 8 });
+          }
+          break;
+      }
+      
+      return palette;
+    }
+    
+    function updateWindVariability() {
+      if (!currentFireEffect.windVariabilityEnabled) {
+        currentFireEffect.currentVariableWind = 0;
+        return;
+      }
+      
+      // Update wind time
+      currentFireEffect.windTime += 0.01;
+      
+      // Check if we need a new target wind value
+      if (Math.random() < 0.01) {
+        // Set new target wind based on variability
+        const variabilityFactor = currentFireEffect.windVariability / 5;
+        currentFireEffect.targetVariableWind = (Math.random() * 2 - 1) * variabilityFactor * currentFireEffect.windDirection;
+        
+        // If wind direction is near zero, still have some variability
+        if (Math.abs(currentFireEffect.windDirection) < 0.5) {
+          currentFireEffect.targetVariableWind = (Math.random() * 2 - 1) * variabilityFactor * 2;
+        }
+        
+        // Adjust transition speed based on how different the new target is
+        currentFireEffect.windTransitionSpeed = 0.02 + Math.random() * 0.03;
+      }
+      
+      // Smoothly transition to target wind
+      const diff = currentFireEffect.targetVariableWind - currentFireEffect.currentVariableWind;
+      if (Math.abs(diff) > 0.01) {
+        currentFireEffect.currentVariableWind += diff * currentFireEffect.windTransitionSpeed;
+      } else {
+        currentFireEffect.currentVariableWind = currentFireEffect.targetVariableWind;
+      }
+    }
+    
+    function getEffectiveWind() {
+      return currentFireEffect.windDirection + currentFireEffect.currentVariableWind;
+    }
+    
+    function updateFireEffect() {
+      if (!currentFireEffect) return;
+      
+      // Update wind variability
+      updateWindVariability();
+      
+      // Get effective wind direction including variability
+      const effectiveWind = getEffectiveWind();
+      
+      // Update fire simulation multiple times for smoother animation
+      for (let step = 0; step < currentFireEffect.speedFactor; step++) {
+        // Main fire simulation
+        updateFireSimulation(effectiveWind);
+        
+        // Generate embers if enabled
+        if (currentFireEffect.embersEnabled) {
+          updateEmbers(effectiveWind);
+        }
+      }
+      
+      // Render fire to canvas
+      renderFire();
+    }
+    
+    function updateFireSimulation(effectiveWind) {
+      const width = currentFireEffect.width;
+      const height = currentFireEffect.height;
+      const buffer = currentFireEffect.fireBuffer;
+      
+      // Update heat values - simulate fire rising and cooling
+      for (let y = 0; y < height - 1; y++) {
+        for (let x = 0; x < width; x++) {
+          const src = y * width + x;
+          
+          // Calculate height factor for vertical effects
+          const heightFactor = 1 - (y / height); // 0 at bottom, 1 at top
+          
+          // Calculate wind effect - stronger at higher points (more realistic)
+          const windEffect = effectiveWind * currentFireEffect.windStrength * heightFactor * 0.05;
+          
+          // Increased scatter factor based on height and user setting
+          const scatterFactor = 1 + (heightFactor * currentFireEffect.flameScatter * 0.4);
+          
+          // Random spread factor plus wind effect with increased scatter at top
+          const baseSpread = (Math.random() * 5 - 2.5) * scatterFactor;
+          const windSpread = baseSpread + windEffect;
+          
+          // Apply wind to spread calculation
+          const windOffset = Math.floor(windSpread);
+          
+          // Calculate the destination index with wind-affected spread
+          const dstX = Math.max(0, Math.min(width - 1, x + windOffset));
+          const dst = (y + 1) * width + dstX;
+          
+          // Apply cooling - more cooling when wind is stronger
+          const windCoolingFactor = 1 + (Math.abs(effectiveWind) * 0.02);
+          // Also increase cooling with height for natural flame tapering
+          const heightCoolingFactor = 1 + (heightFactor * 0.5);
+          let coolAmount = Math.random() * currentFireEffect.cooling * windCoolingFactor * heightCoolingFactor;
+          let value = buffer[dst] - coolAmount;
+          
+          // Make sure we don't go below 0
+          buffer[src] = Math.max(0, value);
+        }
+      }
+      
+      // Add new heat at the bottom for continuous fire based on source width
+      const sourceWidth = currentFireEffect.sourceWidth;
+      const sourceStart = Math.floor(width * (0.5 - sourceWidth/200));
+      const sourceEnd = Math.floor(width * (0.5 + sourceWidth/200));
+      
+      for (let x = 0; x < width; x++) {
+        // Only add heat within the source width
+        if (x >= sourceStart && x <= sourceEnd) {
+          if (Math.random() < 0.7) {
+            // Add more heat intensity when source is narrower
+            const intensityMultiplier = 100 / sourceWidth;
+            let value = Math.random() * currentFireEffect.intensity * intensityMultiplier;
+            const idx = (height - 1) * width + x;
+            buffer[idx] = Math.min(160, buffer[idx] + value);
+          }
+        }
+      }
+    }
+    
+    function updateEmbers(effectiveWind) {
+      if (!currentFireEffect) return;
+      
+      const width = currentFireEffect.width;
+      const height = currentFireEffect.height;
+      const particles = currentFireEffect.particles;
+      
+      // Source dimensions for ember creation
+      const sourceWidth = currentFireEffect.sourceWidth;
+      const sourceStart = Math.floor(width * (0.5 - sourceWidth/200));
+      const sourceEnd = Math.floor(width * (0.5 + sourceWidth/200));
+      
+      // Create new embers based on ember rate
+      for (let i = 0; i < currentFireEffect.emberRate; i++) {
+        if (Math.random() < 0.2) {
+          // Generate ember from a random position in the fire source
+          const x = sourceStart + Math.random() * (sourceEnd - sourceStart);
+          const y = height - 10 - Math.random() * 30;
+          
+          // Only create ember if the position is hot enough (check fire buffer)
+          const idx = Math.floor(y) * width + Math.floor(x);
+          if (currentFireEffect.fireBuffer[idx] > 80) {
+            // Create a new ember
+            particles.push({
+              x: x,
+              y: y,
+              size: (0.5 + Math.random()) * currentFireEffect.emberSize,
+              vx: (Math.random() - 0.5) * 1.5 + (effectiveWind * 0.1),
+              vy: -1 - Math.random() * 2,
+              life: 1.0,  // Life percentage (1.0 = full life, 0.0 = dead)
+              decay: 0.005 + Math.random() * 0.01
+            });
+          }
+        }
+      }
+      
+      // Update existing embers
+      for (let i = particles.length - 1; i >= 0; i--) {
+        const ember = particles[i];
+        
+        // Update position
+        ember.x += ember.vx;
+        ember.y += ember.vy;
+        
+        // Apply wind with some variability
+        ember.vx += effectiveWind * 0.01 * (0.8 + Math.random() * 0.4);
+        
+        // Apply slight upward acceleration (buoyancy)
+        ember.vy -= 0.01;
+        
+        // Add some random motion to embers
+        ember.vx += (Math.random() - 0.5) * 0.1;
+        ember.vy += (Math.random() - 0.5) * 0.1;
+        
+        // Decay life
+        ember.life -= ember.decay;
+        
+        // Remove dead embers or those that go out of bounds
+        if (ember.life <= 0 || ember.x < 0 || ember.x >= width || ember.y < 0) {
+          particles.splice(i, 1);
+        }
+      }
+    }
+    
+    function renderFire() {
+      if (!currentFireEffect) return;
+      
+      const width = currentFireEffect.width;
+      const height = currentFireEffect.height;
+      const buffer = currentFireEffect.fireBuffer;
+      const palette = currentFireEffect.palette;
+      const particles = currentFireEffect.particles;
+      
+      // Create an image data object
+      const imageData = effectCtx.createImageData(width, height);
+      
+      // Map heat values to colors and put them in the image data
+      for (let y = 0; y < height; y++) {
+        for (let x = 0; x < width; x++) {
+          const index = y * width + x;
+          const colorIndex = Math.min(palette.length - 1, Math.floor(buffer[index]));
+          const color = palette[colorIndex];
+          
+          // Calculate image data index (4 bytes per pixel: R,G,B,A)
+          const imgDataIdx = (y * width + x) * 4;
+          
+          // Set the color
+          imageData.data[imgDataIdx] = color.r;
+          imageData.data[imgDataIdx + 1] = color.g;
+          imageData.data[imgDataIdx + 2] = color.b;
+          imageData.data[imgDataIdx + 3] = buffer[index] > 0 ? 255 : 0; // Transparent if no heat
+        }
+      }
+      
+      // Put the image data on the canvas
+      effectCtx.putImageData(imageData, 0, 0);
+      
+      // Draw embers on top of the fire
+      if (currentFireEffect.embersEnabled) {
+        effectCtx.globalCompositeOperation = 'lighter';
+        
+        for (const ember of particles) {
+          // Create a gradient for the ember
+          const gradient = effectCtx.createRadialGradient(
+            ember.x, ember.y, 0,
+            ember.x, ember.y, ember.size * 2
+          );
+          
+          // Ember color based on life (yellow-orange to red as it dies)
+          const alpha = ember.life * 0.7;
+          gradient.addColorStop(0, `rgba(255, 255, 200, ${alpha})`);
+          gradient.addColorStop(0.2, `rgba(255, 160, 20, ${alpha * 0.8})`);
+          gradient.addColorStop(1, 'rgba(255, 50, 0, 0)');
+          
+          // Draw the ember
+          effectCtx.fillStyle = gradient;
+          effectCtx.beginPath();
+          effectCtx.arc(ember.x, ember.y, ember.size * 2, 0, Math.PI * 2);
+          effectCtx.fill();
+        }
+        
+        // Reset composite operation
+        effectCtx.globalCompositeOperation = 'source-over';
+      }
+    }
+    
+    /*** BLOOD EFFECT ***/
+    
+    function initBloodEffect() {
+      // Create blood effect object
+      currentBloodEffect = {
+        // Blood parameters
+        gravity: 0.15,
+        viscosity: 0.92,
+        particleCount: 100,
+        particleSize: 3,
+        sprayForce: 10,
+        splatterSize: 5,
+        spread: 0.3,
+        colorVariation: 15,
+        enableDrips: true,
+        enablePooling: true,
+        particleColor: 'red',
+        customColor: '#ff0000',
+        
+        // Particles and splatters
+        particles: [],
+        splatters: [],
+        pools: [],
+        drips: [],
+        
+        // Mouse interactions
+        mouseDown: false,
+        mouseX: 0,
+        mouseY: 0,
+        lastMouseX: 0,
+        lastMouseY: 0,
+        
+        // Auto spray settings
+        autoSpray: true,
+        autoSprayTimer: 0,
+        autoSprayInterval: 30
+      };
+      
+      // Set up event listeners for canvas interactions
+      setupBloodCanvasEvents();
+      
+      // Event listeners for blood parameters
+      document.getElementById('bloodGravity').addEventListener('input', function() {
+        currentBloodEffect.gravity = parseFloat(this.value);
+      });
+      
+      document.getElementById('bloodViscosity').addEventListener('input', function() {
+        currentBloodEffect.viscosity = parseFloat(this.value);
+      });
+      
+      document.getElementById('bloodParticleCount').addEventListener('input', function() {
+        currentBloodEffect.particleCount = parseInt(this.value);
+      });
+      
+      document.getElementById('bloodParticleSize').addEventListener('input', function() {
+        currentBloodEffect.particleSize = parseInt(this.value);
+      });
+      
+      document.getElementById('bloodSprayForce').addEventListener('input', function() {
+        currentBloodEffect.sprayForce = parseInt(this.value);
+      });
+      
+      document.getElementById('bloodSpread').addEventListener('input', function() {
+        currentBloodEffect.spread = parseFloat(this.value);
+      });
+      
+      document.getElementById('dripsToggle').addEventListener('change', function() {
+        currentBloodEffect.enableDrips = this.checked;
+      });
+      
+      document.getElementById('poolingToggle').addEventListener('change', function() {
+        currentBloodEffect.enablePooling = this.checked;
+      });
+      
+      document.getElementById('bloodColor').addEventListener('change', function() {
+        currentBloodEffect.particleColor = this.value;
+      });
+      
+      document.getElementById('customBloodColor').addEventListener('input', function() {
+        currentBloodEffect.customColor = this.value;
+      });
+    }
+    
+    function setupBloodCanvasEvents() {
+      // Mouse events for blood effect
+      effectCanvas.addEventListener('mousedown', (e) => {
+        if (currentEffect !== 'blood') return;
+        
+        currentBloodEffect.mouseDown = true;
+        updateBloodMousePosition(e);
+        currentBloodEffect.lastMouseX = currentBloodEffect.mouseX;
+        currentBloodEffect.lastMouseY = currentBloodEffect.mouseY;
+        createBloodSpray(currentBloodEffect.mouseX, currentBloodEffect.mouseY, 0, 0);
+      });
+      
+      effectCanvas.addEventListener('mousemove', (e) => {
+        if (currentEffect !== 'blood') return;
+        
+        if (currentBloodEffect.mouseDown) {
+          const lastX = currentBloodEffect.mouseX;
+          const lastY = currentBloodEffect.mouseY;
+          updateBloodMousePosition(e);
+          
+          // Calculate velocity for direction
+          const velX = currentBloodEffect.mouseX - lastX;
+          const velY = currentBloodEffect.mouseY - lastY;
+          
+          // Create spray based on movement
+          if (Math.abs(velX) > 0.5 || Math.abs(velY) > 0.5) {
+            createBloodSpray(currentBloodEffect.mouseX, currentBloodEffect.mouseY, velX, velY);
+          }
+        }
+      });
+      
+      effectCanvas.addEventListener('mouseup', () => {
+        if (currentEffect !== 'blood') return;
+        currentBloodEffect.mouseDown = false;
+      });
+      
+      effectCanvas.addEventListener('mouseleave', () => {
+        if (currentEffect !== 'blood') return;
+        currentBloodEffect.mouseDown = false;
+      });
+    }
+    
+    function updateBloodMousePosition(e) {
+      const rect = effectCanvas.getBoundingClientRect();
+      currentBloodEffect.mouseX = e.clientX - rect.left;
+      currentBloodEffect.mouseY = e.clientY - rect.top;
+    }
+    
+    function getBloodColor() {
+      const colorType = currentBloodEffect.particleColor;
+      
+      switch(colorType) {
+        case 'red':
+          return [120 + Math.floor(Math.random() * currentBloodEffect.colorVariation), 
+                 0 + Math.floor(Math.random() * (currentBloodEffect.colorVariation * 0.4)), 
+                 0 + Math.floor(Math.random() * (currentBloodEffect.colorVariation * 0.2))];
+        case 'green':
+          return [0 + Math.floor(Math.random() * (currentBloodEffect.colorVariation * 0.2)), 
+                 120 + Math.floor(Math.random() * currentBloodEffect.colorVariation), 
+                 0 + Math.floor(Math.random() * (currentBloodEffect.colorVariation * 0.4))];
+        case 'blue':
+          return [0 + Math.floor(Math.random() * (currentBloodEffect.colorVariation * 0.2)), 
+                 0 + Math.floor(Math.random() * (currentBloodEffect.colorVariation * 0.4)), 
+                 120 + Math.floor(Math.random() * currentBloodEffect.colorVariation)];
+        case 'black':
+          return [0 + Math.floor(Math.random() * (currentBloodEffect.colorVariation * 0.5)), 
+                 0 + Math.floor(Math.random() * (currentBloodEffect.colorVariation * 0.5)), 
+                 0 + Math.floor(Math.random() * (currentBloodEffect.colorVariation * 0.5))];
+        case 'custom':
+          // Parse custom color
+          const hex = currentBloodEffect.customColor.replace('#', '');
+          const r = parseInt(hex.substring(0, 2), 16);
+          const g = parseInt(hex.substring(2, 4), 16);
+          const b = parseInt(hex.substring(4, 6), 16);
+          
+          // Add some variation
+          return [Math.max(0, Math.min(255, r + (Math.random() * 2 - 1) * currentBloodEffect.colorVariation)),
+                 Math.max(0, Math.min(255, g + (Math.random() * 2 - 1) * currentBloodEffect.colorVariation)),
+                 Math.max(0, Math.min(255, b + (Math.random() * 2 - 1) * currentBloodEffect.colorVariation))];
+      }
+    }
+    
+    function createBloodSpray(x, y, velX, velY) {
+      // Direction influence from velocity
+      const dirX = velX === 0 ? 0 : Math.sign(velX);
+      const dirY = velY === 0 ? 0 : Math.sign(velY);
+      const speed = Math.sqrt(velX * velX + velY * velY);
+      
+      for (let i = 0; i < currentBloodEffect.particleCount; i++) {
+        // Calculate random spray direction with influence from movement
+        const angle = Math.random() * Math.PI * 2;
+        const force = currentBloodEffect.sprayForce * (0.5 + Math.random() * 0.5);
+        
+        // Base velocities with randomness
+        let vx = Math.cos(angle) * force * currentBloodEffect.spread;
+        let vy = Math.sin(angle) * force * currentBloodEffect.spread;
+        
+        // Add influence from mouse movement
+        if (speed > 1) {
+          vx += dirX * force * (1 - currentBloodEffect.spread) * Math.random();
+          vy += dirY * force * (1 - currentBloodEffect.spread) * Math.random();
+        }
+        
+        // Random size variation
+        const size = currentBloodEffect.particleSize * (0.5 + Math.random());
+        
+        // Get color
+        const [r, g, b] = getBloodColor();
+        const color = `rgb(${r}, ${g}, ${b})`;
+        
+        // Add blood particle
+        currentBloodEffect.particles.push({
+          x: x + (Math.random() - 0.5) * 5,
+          y: y + (Math.random() - 0.5) * 5,
+          vx: vx,
+          vy: vy,
+          size: size,
+          color: color,
+          gravity: currentBloodEffect.gravity * (0.8 + Math.random() * 0.4),
+          life: 1.0, // Life percentage (1.0 = full life, 0.0 = dead)
+          decay: 0.01 + Math.random() * 0.02
+        });
+      }
+    }
+    
+    function createBloodSplatter(x, y, size, color) {
+      // Create a blood splatter at impact location
+      const splatterSize = size * currentBloodEffect.splatterSize;
+      
+      currentBloodEffect.splatters.push({
+        x: x,
+        y: y,
+        size: splatterSize,
+        color: color,
+        // Random shapes for splatters
+        shape: Math.floor(Math.random() * 3),
+        angle: Math.random() * Math.PI * 2,
+        // Stretch factor for directional impact
+        stretchX: 0.5 + Math.random(),
+        stretchY: 0.5 + Math.random(),
+        // How much it has dried/darkened (0 = fresh, 1 = dried)
+        dried: 0
+      });
+      
+      // Possibly create a drip
+      if (currentBloodEffect.enableDrips && Math.random() < 0.3) {
+        createBloodDrip(x, y, color);
+      }
+      
+      // Possibly create a pool below the splatter
+      if (currentBloodEffect.enablePooling && y > effectCanvas.height * 0.7 && Math.random() < 0.5) {
+        createBloodPool(x, y, splatterSize * 1.5, color);
+      }
+    }
+    
+    function createBloodDrip(x, y, color) {
+      const length = 10 + Math.random() * 30;
+      const width = 2 + Math.random() * 4;
+      
+      currentBloodEffect.drips.push({
+        x: x,
+        y: y,
+        targetY: y + length,
+        width: width,
+        color: color,
+        progress: 0,
+        speed: 0.005 + Math.random() * 0.01, // How fast it drips down
+        dried: 0
+      });
+    }
+    
+    function createBloodPool(x, y, size, color) {
+      currentBloodEffect.pools.push({
+        x: x,
+        y: y,
+        currentSize: 0,
+        targetSize: size * (1 + Math.random()),
+        growSpeed: 0.1 + Math.random() * 0.2,
+        color: color,
+        dried: 0
+      });
+    }
+    
+    function adjustColorForDrying(color, driedAmount) {
+      // Extract RGB components
+      const rgbMatch = color.match(/\d+/g);
+      if (!rgbMatch || rgbMatch.length < 3) return color;
+      
+      const r = parseInt(rgbMatch[0]);
+      const g = parseInt(rgbMatch[1]);
+      const b = parseInt(rgbMatch[2]);
+      
+      // Calculate dried color (darker, more brown)
+      const driedR = Math.max(0, Math.floor(r - (driedAmount * 80)));
+      const driedG = Math.max(0, Math.floor(g - (driedAmount * 10)));
+      const driedB = Math.max(0, Math.floor(b - (driedAmount * 10)));
+      
+      return `rgb(${driedR}, ${driedG}, ${driedB})`;
+    }
+    
+    function updateBloodEffect() {
+      if (!currentBloodEffect) return;
+      
+      // Check if we should auto-spray
+      if (currentBloodEffect.autoSpray) {
+        currentBloodEffect.autoSprayTimer++;
+        
+        if (currentBloodEffect.autoSprayTimer >= currentBloodEffect.autoSprayInterval) {
+          // Create a random spray
+          const x = Math.random() * effectCanvas.width;
+          const y = Math.random() * (effectCanvas.height / 2);
+          const velX = (Math.random() - 0.5) * 20;
+          const velY = Math.random() * 10;
+          
+          createBloodSpray(x, y, velX, velY);
+          
+          // Reset timer
+          currentBloodEffect.autoSprayTimer = 0;
+          
+          // Randomize next interval
+          currentBloodEffect.autoSprayInterval = 10 + Math.floor(Math.random() * 40);
+        }
+      }
+      
+      // Update particles
+      for (let i = currentBloodEffect.particles.length - 1; i >= 0; i--) {
+        const particle = currentBloodEffect.particles[i];
+        
+        // Apply physics
+        particle.vy += particle.gravity;
+        particle.vx *= currentBloodEffect.viscosity;
+        particle.vy *= currentBloodEffect.viscosity;
+        
+        // Update position
+        particle.x += particle.vx;
+        particle.y += particle.vy;
+        
+        // Check for collisions with bottom or sides
+        if (particle.y > effectCanvas.height - particle.size) {
+          // Bottom collision - create splatter
+          createBloodSplatter(particle.x, effectCanvas.height, particle.size, particle.color);
+          currentBloodEffect.particles.splice(i, 1);
+        } else if (particle.x < 0 || particle.x > effectCanvas.width) {
+          // Side collision - create splatter
+          const x = particle.x < 0 ? 0 : effectCanvas.width;
+          createBloodSplatter(x, particle.y, particle.size, particle.color);
+          currentBloodEffect.particles.splice(i, 1);
+        } else {
+          // Decay life
+          particle.life -= particle.decay;
+          if (particle.life <= 0) {
+            currentBloodEffect.particles.splice(i, 1);
+          }
+        }
+      }
+      
+      // Update drips
+      for (let i = currentBloodEffect.drips.length - 1; i >= 0; i--) {
+        const drip = currentBloodEffect.drips[i];
+        
+        // Grow drip down
+        drip.progress += drip.speed;
+        if (drip.progress >= 1) {
+          // When drip reaches target, it stops
+          drip.progress = 1;
+          // Slowly dry
+          drip.dried += 0.001;
+          
+          // Remove very dried drips
+          if (drip.dried > 0.7) {
+            currentBloodEffect.drips.splice(i, 1);
+          }
+        }
+      }
+      
+      // Update pools
+      for (let i = 0; i < currentBloodEffect.pools.length; i++) {
+        const pool = currentBloodEffect.pools[i];
+        
+        // Grow pool
+        if (pool.currentSize < pool.targetSize) {
+          pool.currentSize += pool.growSpeed;
+        } else {
+          // Slowly dry
+          pool.dried += 0.0005;
+        }
+      }
+      
+      // Update splatters
+      for (let i = 0; i < currentBloodEffect.splatters.length; i++) {
+        // Slowly dry
+        currentBloodEffect.splatters[i].dried += 0.0002;
+      }
+      
+      // Render blood
+      renderBlood();
+    }
+    
+    function renderBlood() {
+      // Draw particles
+      for (const particle of currentBloodEffect.particles) {
+        effectCtx.beginPath();
+        effectCtx.fillStyle = particle.color;
+        effectCtx.globalAlpha = particle.life;
+        effectCtx.arc(particle.x, particle.y, particle.size, 0, Math.PI * 2);
+        effectCtx.fill();
+      }
+      
+      // Draw splatters
+      for (const splatter of currentBloodEffect.splatters) {
+        // Darker color as it dries
+        const color = adjustColorForDrying(splatter.color, splatter.dried);
+        effectCtx.fillStyle = color;
+        effectCtx.globalAlpha = 1;
+        
+        effectCtx.save();
+        effectCtx.translate(splatter.x, splatter.y);
+        effectCtx.rotate(splatter.angle);
+        effectCtx.scale(splatter.stretchX, splatter.stretchY);
+        
+        // Different splatter shapes
+        switch (splatter.shape) {
+          case 0:
+            // Circular splatter
+            effectCtx.beginPath();
+            effectCtx.arc(0, 0, splatter.size, 0, Math.PI * 2);
+            effectCtx.fill();
+            break;
+          case 1:
+            // Star-like splatter
+            effectCtx.beginPath();
+            const points = 5 + Math.floor(Math.random() * 4);
+            for (let i = 0; i < points * 2; i++) {
+              const radius = i % 2 === 0 ? splatter.size : splatter.size * 0.5;
+              const angle = (i * Math.PI) / points;
+              const x = Math.cos(angle) * radius;
+              const y = Math.sin(angle) * radius;
+              if (i === 0) effectCtx.moveTo(x, y);
+              else effectCtx.lineTo(x, y);
+            }
+            effectCtx.closePath();
+            effectCtx.fill();
+            break;
+          case 2:
+            // Irregular blob
+            effectCtx.beginPath();
+            const segments = 8 + Math.floor(Math.random() * 5);
+            for (let i = 0; i <= segments; i++) {
+              const angle = (i / segments) * Math.PI * 2;
+              const radius = splatter.size * (0.7 + Math.random() * 0.6);
+              const x = Math.cos(angle) * radius;
+              const y = Math.sin(angle) * radius;
+              if (i === 0) effectCtx.moveTo(x, y);
+              else effectCtx.bezierCurveTo(
+                x - Math.random() * 10, y - Math.random() * 10,
+                x + Math.random() * 10, y + Math.random() * 10,
+                x, y
+              );
+            }
+            effectCtx.closePath();
+            effectCtx.fill();
+            break;
+        }
+        
+        effectCtx.restore();
+      }
+      
+      // Draw drips
+      for (const drip of currentBloodEffect.drips) {
+        const color = adjustColorForDrying(drip.color, drip.dried);
+        effectCtx.fillStyle = color;
+        effectCtx.globalAlpha = 1;
+        
+        // Calculate current height based on progress
+        const currentY = drip.y + (drip.targetY - drip.y) * drip.progress;
+        
+        // Draw drip as elongated teardrop
+        effectCtx.beginPath();
+        effectCtx.moveTo(drip.x - drip.width/2, drip.y);
+        effectCtx.bezierCurveTo(
+          drip.x - drip.width, drip.y + (currentY - drip.y) * 0.3,
+          drip.x - drip.width/3, currentY - drip.width,
+          drip.x, currentY
+        );
+        effectCtx.bezierCurveTo(
+          drip.x + drip.width/3, currentY - drip.width,
+          drip.x + drip.width, drip.y + (currentY - drip.y) * 0.3,
+          drip.x + drip.width/2, drip.y
+        );
+        effectCtx.closePath();
+        effectCtx.fill();
+      }
+      
+      // Draw pools
+      for (const pool of currentBloodEffect.pools) {
+        const color = adjustColorForDrying(pool.color, pool.dried);
+        effectCtx.fillStyle = color;
+        effectCtx.globalAlpha = 1;
+        
+        // Draw pool as irregular ellipse
+        effectCtx.beginPath();
+        const segments = 12;
+        for (let i = 0; i <= segments; i++) {
+          const angle = (i / segments) * Math.PI * 2;
+          // Make pool wider than tall
+          const radiusX = pool.currentSize * (1.2 + Math.sin(angle * 3) * 0.2);
+          const radiusY = pool.currentSize * (0.6 + Math.cos(angle * 2) * 0.1);
+          const x = pool.x + Math.cos(angle) * radiusX;
+          const y = pool.y + Math.sin(angle) * radiusY;
+          if (i === 0) effectCtx.moveTo(x, y);
+          else effectCtx.bezierCurveTo(
+            x - Math.random() * 5, y - Math.random() * 2,
+            x + Math.random() * 5, y + Math.random() * 2,
+            x, y
+          );
+        }
+        effectCtx.closePath();
+        effectCtx.fill();
+      }
+      
+      // Reset alpha
+      effectCtx.globalAlpha = 1;
+    }
+    
+    /*** SMOKE EFFECT ***/
+    
+    function initSmokeEffect() {
+      // Initialize smoke effect settings and particles
+      currentSmokeEffect = {
+        particles: [],
+        opacity: 0.6,
+        riseSpeed: 1.5,
+        density: 5,
+        turbulence: 3,
+        particleSize: 20,
+        smokeColor: 'white',
+        customColor: '#cccccc'
+      };
+      
+      // Event listeners for smoke parameters
+      document.getElementById('smokeOpacity').addEventListener('input', function() {
+        currentSmokeEffect.opacity = parseFloat(this.value);
+      });
+      
+      document.getElementById('smokeRiseSpeed').addEventListener('input', function() {
+        currentSmokeEffect.riseSpeed = parseFloat(this.value);
+      });
+      
+      document.getElementById('smokeDensity').addEventListener('input', function() {
+        currentSmokeEffect.density = parseInt(this.value);
+      });
+      
+      document.getElementById('smokeTurbulence').addEventListener('input', function() {
+        currentSmokeEffect.turbulence = parseInt(this.value);
+      });
+      
+      document.getElementById('smokeSize').addEventListener('input', function() {
+        currentSmokeEffect.particleSize = parseInt(this.value);
+      });
+      
+      document.getElementById('smokeColor').addEventListener('change', function() {
+        currentSmokeEffect.smokeColor = this.value;
+      });
+      
+      document.getElementById('customSmokeColor').addEventListener('input', function() {
+        currentSmokeEffect.customColor = this.value;
+      });
+    }
+    
+    function getSmokeColor() {
+      switch (currentSmokeEffect.smokeColor) {
+        case 'white':
+          return 'rgba(255, 255, 255, ';
+        case 'black':
+          return 'rgba(40, 40, 40, ';
+        case 'gray':
+          return 'rgba(150, 150, 150, ';
+        case 'custom':
+          // Parse custom color
+          const hex = currentSmokeEffect.customColor.replace('#', '');
+          const r = parseInt(hex.substring(0, 2), 16);
+          const g = parseInt(hex.substring(2, 4), 16);
+          const b = parseInt(hex.substring(4, 6), 16);
+          return `rgba(${r}, ${g}, ${b}, `;
+      }
+    }
+    
+    function createSmokeParticle() {
+      const width = effectCanvas.width;
+      const height = effectCanvas.height;
+      
+      // Create new smoke particle
+      currentSmokeEffect.particles.push({
+        x: width / 2 + (Math.random() - 0.5) * width * 0.5,
+        y: height - Math.random() * 20,
+        size: Math.random() * currentSmokeEffect.particleSize + 10,
+        speedX: (Math.random() - 0.5) * 0.5,
+        speedY: -Math.random() * currentSmokeEffect.riseSpeed - 0.5,
+        opacity: Math.random() * currentSmokeEffect.opacity,
+        life: 1.0,
+        decay: 0.003 + Math.random() * 0.005
+      });
+    }
+    
+    function updateSmokeEffect() {
+      if (!currentSmokeEffect) return;
+      
+      // Add new smoke particles based on density
+      for (let i = 0; i < currentSmokeEffect.density; i++) {
+        if (Math.random() < 0.1) {
+          createSmokeParticle();
+        }
+      }
+      
+      // Update existing particles
+      for (let i = currentSmokeEffect.particles.length - 1; i >= 0; i--) {
+        const particle = currentSmokeEffect.particles[i];
+        
+        // Move the particle
+        particle.x += particle.speedX;
+        particle.y += particle.speedY;
+        
+        // Add some turbulence
+        particle.speedX += (Math.random() - 0.5) * 0.01 * currentSmokeEffect.turbulence;
+        particle.speedY -= Math.random() * 0.01; // Acceleration upwards
+        
+        // Increase size as it rises
+        particle.size += 0.1;
+        
+        // Decay life
+        particle.life -= particle.decay;
+        
+        // Update opacity based on life
+        particle.opacity = Math.min(currentSmokeEffect.opacity, particle.life * currentSmokeEffect.opacity);
+        
+        // Remove dead particles
+        if (particle.life <= 0 || particle.y < -particle.size) {
+          currentSmokeEffect.particles.splice(i, 1);
+        }
+      }
+      
+      // Render smoke
+      renderSmoke();
+    }
+    
+    function renderSmoke() {
+      const particles = currentSmokeEffect.particles;
+      const baseColor = getSmokeColor();
+      
+      // Sort particles by size (for proper layering - larger particles behind smaller ones)
+      particles.sort((a, b) => b.size - a.size);
+      
+      // Draw smoke particles
+      for (const particle of particles) {
+        effectCtx.beginPath();
+        
+        // Create radial gradient for each particle
+        const gradient = effectCtx.createRadialGradient(
+          particle.x, particle.y, 0,
+          particle.x, particle.y, particle.size
+        );
+        
+        // Set gradient colors
+        gradient.addColorStop(0, baseColor + particle.opacity + ')');
+        gradient.addColorStop(1, baseColor + '0)');
+        
+        effectCtx.fillStyle = gradient;
+        effectCtx.arc(particle.x, particle.y, particle.size, 0, Math.PI * 2);
+        effectCtx.fill();
+      }
+    }
+    
+    /*** EXPLOSION EFFECT ***/
+    
+    function initExplosionEffect() {
+      currentExplosionEffect = {
+        particles: [],
+        shockwaves: [],
+        smokeParticles: [],
+        size: 5,
+        speed: 5,
+        particleCount: 200,
+        colorScheme: 'fire',
+        includeSmoke: true,
+        includeShockwave: true,
+        loop: false,
+        // Animation state
+        phase: 'initial', // initial, explosion, fade, reset
+        timer: 0,
+        explosionDuration: 60, // frames
+        fadeDuration: 30, // frames
+        resetDuration: 30 // frames
+      };
+      
+      // Event listeners for explosion parameters
+      document.getElementById('explosionSize').addEventListener('input', function() {
+        currentExplosionEffect.size = parseInt(this.value);
+      });
+      
+      document.getElementById('explosionSpeed').addEventListener('input', function() {
+        currentExplosionEffect.speed = parseInt(this.value);
+      });
+      
+      document.getElementById('explosionParticles').addEventListener('input', function() {
+        currentExplosionEffect.particleCount = parseInt(this.value);
+      });
+      
+      document.getElementById('explosionColor').addEventListener('change', function() {
+        currentExplosionEffect.colorScheme = this.value;
+      });
+      
+      document.getElementById('explosionSmoke').addEventListener('change', function() {
+        currentExplosionEffect.includeSmoke = this.checked;
+      });
+      
+      document.getElementById('explosionShockwave').addEventListener('change', function() {
+        currentExplosionEffect.includeShockwave = this.checked;
+      });
+      
+      document.getElementById('explosionLoop').addEventListener('change', function() {
+        currentExplosionEffect.loop = this.checked;
+      });
+      
+      // Trigger initial explosion
+      triggerExplosion();
+    }
+    
+    function getExplosionColor(position, scheme) {
+      // Position from 0 (center/hot) to 1 (edge/cool)
+      switch (scheme) {
+        case 'fire':
+          if (position < 0.2) return `rgba(255, 255, 255, ${1 - position * 5})`;
+          if (position < 0.5) return `rgba(255, 255, 0, ${1 - position})`;
+          return `rgba(255, ${Math.floor(140 * (1 - position))}, 0, ${1 - position})`;
+        
+        case 'energy':
+          if (position < 0.2) return `rgba(255, 255, 255, ${1 - position * 5})`;
+          if (position < 0.5) return `rgba(200, 230, 255, ${1 - position})`;
+          return `rgba(0, ${Math.floor(120 * (1 - position))}, 255, ${1 - position})`;
+        
+        case 'toxic':
+          if (position < 0.2) return `rgba(230, 255, 150, ${1 - position * 5})`;
+          if (position < 0.5) return `rgba(160, 255, 0, ${1 - position})`;
+          return `rgba(${Math.floor(100 * (1 - position))}, 200, 0, ${1 - position})`;
+        
+        case 'magic':
+          if (position < 0.2) return `rgba(255, 200, 255, ${1 - position * 5})`;
+          if (position < 0.5) return `rgba(220, 120, 255, ${1 - position})`;
+          return `rgba(180, 0, ${Math.floor(200 * (1 - position))}, ${1 - position})`;
+      }
+    }
+    
+    function triggerExplosion() {
+      // Clear existing particles
+      currentExplosionEffect.particles = [];
+      currentExplosionEffect.shockwaves = [];
+      currentExplosionEffect.smokeParticles = [];
+      
+      // Reset state
+      currentExplosionEffect.phase = 'explosion';
+      currentExplosionEffect.timer = 0;
+      
+      const width = effectCanvas.width;
+      const height = effectCanvas.height;
+      const centerX = width / 2;
+      const centerY = height / 2;
+      const size = currentExplosionEffect.size;
+      
+      // Create explosion particles
+      for (let i = 0; i < currentExplosionEffect.particleCount; i++) {
+        const angle = Math.random() * Math.PI * 2;
+        const distance = Math.random() * 10 * size;
+        const speed = (0.5 + Math.random() * 1.5) * currentExplosionEffect.speed;
+        
+        currentExplosionEffect.particles.push({
+          x: centerX,
+          y: centerY,
+          size: 1 + Math.random() * size * 2,
+          speedX: Math.cos(angle) * speed,
+          speedY: Math.sin(angle) * speed,
+          distance: 0,
+          maxDistance: distance,
+          angle: angle,
+          life: 1.0,
+          decay: 0.01 + Math.random() * 0.02
+        });
+      }
+      
+      // Create shockwave if enabled
+      if (currentExplosionEffect.includeShockwave) {
+        currentExplosionEffect.shockwaves.push({
+          x: centerX,
+          y: centerY,
+          size: 10,
+          targetSize: 100 * size,
+          growth: 2 * currentExplosionEffect.speed,
+          opacity: 1
+        });
+      }
+      
+      // Create initial smoke particles if enabled
+      if (currentExplosionEffect.includeSmoke) {
+        for (let i = 0; i < currentExplosionEffect.particleCount / 2; i++) {
+          const angle = Math.random() * Math.PI * 2;
+          const distance = Math.random() * 20 * size;
+          const speed = (0.2 + Math.random() * 0.8) * currentExplosionEffect.speed;
+          
+          currentExplosionEffect.smokeParticles.push({
+            x: centerX,
+            y: centerY,
+            size: 5 + Math.random() * size * 3,
+            speedX: Math.cos(angle) * speed * 0.5,
+            speedY: Math.sin(angle) * speed * 0.5,
+            opacity: 0.7,
+            life: 1.0,
+            decay: 0.005 + Math.random() * 0.01
+          });
+        }
+      }
+    }
+    
+    function updateExplosionEffect() {
+      if (!currentExplosionEffect) return;
+      
+      // Update based on current phase
+      currentExplosionEffect.timer++;
+      
+      switch (currentExplosionEffect.phase) {
+        case 'initial':
+          // Waiting for trigger
+          if (Math.random() < 0.01) {
+            triggerExplosion();
+          }
+          break;
+          
+        case 'explosion':
+          // Update explosion particles
+          for (let i = currentExplosionEffect.particles.length - 1; i >= 0; i--) {
+            const particle = currentExplosionEffect.particles[i];
+            
+            // Update position
+            particle.x += particle.speedX;
+            particle.y += particle.speedY;
+            
+            // Calculate distance from center
+            const dx = particle.x - effectCanvas.width / 2;
+            const dy = particle.y - effectCanvas.height / 2;
+            particle.distance = Math.sqrt(dx * dx + dy * dy);
+            
+            // Apply deceleration as particles move outward
+            const deceleration = 0.97;
+            particle.speedX *= deceleration;
+            particle.speedY *= deceleration;
+            
+            // Apply gravity
+            particle.speedY += 0.05;
+            
+            // Decay life
+            particle.life -= particle.decay;
+            
+            // Remove dead particles
+            if (particle.life <= 0) {
+              currentExplosionEffect.particles.splice(i, 1);
+            }
+          }
+          
+          // Update shockwaves
+          for (let i = currentExplosionEffect.shockwaves.length - 1; i >= 0; i--) {
+            const shockwave = currentExplosionEffect.shockwaves[i];
+            
+            // Grow the shockwave
+            shockwave.size += shockwave.growth;
+            
+            // Fade out as it grows
+            shockwave.opacity = Math.max(0, 1 - shockwave.size / shockwave.targetSize);
+            
+            // Remove completed shockwaves
+            if (shockwave.size >= shockwave.targetSize) {
+              currentExplosionEffect.shockwaves.splice(i, 1);
+            }
+          }
+          
+          // Update smoke particles
+          for (let i = currentExplosionEffect.smokeParticles.length - 1; i >= 0; i--) {
+            const smoke = currentExplosionEffect.smokeParticles[i];
+            
+            // Update position
+            smoke.x += smoke.speedX;
+            smoke.y += smoke.speedY;
+            
+            // Slow down
+            smoke.speedX *= 0.98;
+            smoke.speedY *= 0.98;
+            
+            // Grow in size
+            smoke.size += 0.2;
+            
+            // Rise upward
+            smoke.speedY -= 0.01;
+            
+            // Add turbulence
+            smoke.speedX += (Math.random() - 0.5) * 0.1;
+            
+            // Decay life
+            smoke.life -= smoke.decay;
+            smoke.opacity = Math.min(0.7, smoke.life * 0.7);
+            
+            // Remove dead smoke
+            if (smoke.life <= 0) {
+              currentExplosionEffect.smokeParticles.splice(i, 1);
+            }
+          }
+          
+          // Check if explosion phase is complete
+          if (currentExplosionEffect.timer >= currentExplosionEffect.explosionDuration) {
+            currentExplosionEffect.phase = 'fade';
+            currentExplosionEffect.timer = 0;
+          }
+          break;
+          
+        case 'fade':
+          // Continue updating remaining particles
+          updateExplosionParticles();
+          
+          // Check if fade phase is complete
+          if (currentExplosionEffect.timer >= currentExplosionEffect.fadeDuration) {
+            currentExplosionEffect.phase = 'reset';
+            currentExplosionEffect.timer = 0;
+          }
+          break;
+          
+        case 'reset':
+          // Brief pause before next explosion (if looping)
+          if (currentExplosionEffect.timer >= currentExplosionEffect.resetDuration) {
+            if (currentExplosionEffect.loop) {
+              triggerExplosion();
+            } else {
+              currentExplosionEffect.phase = 'initial';
+            }
+          }
+          break;
+      }
+      
+      // Render explosion
+      renderExplosion();
+    }
+    
+    function updateExplosionParticles() {
+      // Update remaining particles
+      for (let i = currentExplosionEffect.particles.length - 1; i >= 0; i--) {
+        const particle = currentExplosionEffect.particles[i];
+        
+        // Update position
+        particle.x += particle.speedX;
+        particle.y += particle.speedY;
+        
+        // Apply gravity
+        particle.speedY += 0.05;
+        
+        // Decay life faster during fade
+        particle.life -= particle.decay * 1.5;
+        
+        // Remove dead particles
+        if (particle.life <= 0) {
+          currentExplosionEffect.particles.splice(i, 1);
+        }
+      }
+      
+      // Update smoke particles
+      for (let i = currentExplosionEffect.smokeParticles.length - 1; i >= 0; i--) {
+        const smoke = currentExplosionEffect.smokeParticles[i];
+        
+        smoke.x += smoke.speedX;
+        smoke.y += smoke.speedY;
+        smoke.speedY -= 0.01; // Rise
+        smoke.life -= smoke.decay;
+        smoke.opacity = Math.min(0.7, smoke.life * 0.7);
+        
+        if (smoke.life <= 0) {
+          currentExplosionEffect.smokeParticles.splice(i, 1);
+        }
+      }
+    }
+    
+    function renderExplosion() {
+      // Draw smoke first (behind everything)
+      if (currentExplosionEffect.includeSmoke) {
+        for (const smoke of currentExplosionEffect.smokeParticles) {
+          effectCtx.beginPath();
+          const gradient = effectCtx.createRadialGradient(
+            smoke.x, smoke.y, 0,
+            smoke.x, smoke.y, smoke.size
+          );
+          
+          const alpha = smoke.opacity;
+          gradient.addColorStop(0, `rgba(100, 100, 100, ${alpha})`);
+          gradient.addColorStop(1, `rgba(70, 70, 70, 0)`);
+          
+          effectCtx.fillStyle = gradient;
+          effectCtx.arc(smoke.x, smoke.y, smoke.size, 0, Math.PI * 2);
+          effectCtx.fill();
+        }
+      }
+      
+      // Draw shockwaves
+      for (const shockwave of currentExplosionEffect.shockwaves) {
+        effectCtx.beginPath();
+        effectCtx.strokeStyle = `rgba(255, 255, 255, ${shockwave.opacity})`;
+        effectCtx.lineWidth = 3;
+        effectCtx.arc(shockwave.x, shockwave.y, shockwave.size, 0, Math.PI * 2);
+        effectCtx.stroke();
+      }
+      
+      // Draw explosion particles
+      effectCtx.globalCompositeOperation = 'lighter';
+      
+      for (const particle of currentExplosionEffect.particles) {
+        // Position from center determines color
+        const width = effectCanvas.width;
+        const height = effectCanvas.height;
+        const centerX = width / 2;
+        const centerY = height / 2;
+        
+        const dx = particle.x - centerX;
+        const dy = particle.y - centerY;
+        const distance = Math.sqrt(dx * dx + dy * dy);
+        const maxDistance = 100 * currentExplosionEffect.size;
+        const position = Math.min(1, distance / maxDistance);
+        
+        // Get color based on scheme and position
+        const color = getExplosionColor(position, currentExplosionEffect.colorScheme);
+        
+        // Draw particle
+        effectCtx.beginPath();
+        effectCtx.fillStyle = color;
+        effectCtx.arc(particle.x, particle.y, particle.size, 0, Math.PI * 2);
+        effectCtx.fill();
+      }
+      
+      // Reset composite operation
+      effectCtx.globalCompositeOperation = 'source-over';
+    }
+    
+    /*** MAGIC EFFECT ***/
+    
+    function initMagicEffect() {
+      currentMagicEffect = {
+        particles: [],
+        type: 'sparkles',
+        intensity: 5,
+        speed: 5,
+        colorScheme: 'arcane',
+        glowIntensity: 5,
+        pulseEnabled: true,
+        pulsePhase: 0
+      };
+      
+      // Event listeners for magic effect parameters
+      document.getElementById('magicType').addEventListener('change', function() {
+        currentMagicEffect.type = this.value;
+        initializeMagicParticles();
+      });
+      
+      document.getElementById('magicIntensity').addEventListener('input', function() {
+        currentMagicEffect.intensity = parseInt(this.value);
+      });
+      
+      document.getElementById('magicSpeed').addEventListener('input', function() {
+        currentMagicEffect.speed = parseInt(this.value);
+      });
+      
+      document.getElementById('magicColor').addEventListener('change', function() {
+        currentMagicEffect.colorScheme = this.value;
+      });
+      
+      document.getElementById('magicGlow').addEventListener('input', function() {
+        currentMagicEffect.glowIntensity = parseInt(this.value);
+      });
+      
+      document.getElementById('magicPulse').addEventListener('change', function() {
+        currentMagicEffect.pulseEnabled = this.checked;
+      });
+      
+      // Initialize particles based on selected type
+      initializeMagicParticles();
+    }
+    
+    function initializeMagicParticles() {
+      if (!currentMagicEffect) return;
+      
+      // Clear existing particles
+      currentMagicEffect.particles = [];
+      
+      const width = effectCanvas.width;
+      const height = effectCanvas.height;
+      const centerX = width / 2;
+      const centerY = height / 2;
+      const intensity = currentMagicEffect.intensity;
+      
+      // Create particles based on effect type
+      switch (currentMagicEffect.type) {
+        case 'sparkles':
+          // Create random sparkle particles
+          for (let i = 0; i < 20 * intensity; i++) {
+            currentMagicEffect.particles.push({
+              x: Math.random() * width,
+              y: Math.random() * height,
+              size: 0.5 + Math.random() * 2.5,
+              speedX: (Math.random() - 0.5) * 2,
+              speedY: (Math.random() - 0.5) * 2,
+              alpha: Math.random(),
+              alphaSpeed: 0.01 + Math.random() * 0.05,
+              rotation: Math.random() * Math.PI * 2,
+              rotationSpeed: (Math.random() - 0.5) * 0.1
+            });
+          }
+          break;
+          
+        case 'aura':
+          // Create circular aura
+          const auraRadius = Math.min(width, height) * 0.3;
+          for (let i = 0; i < 30 * intensity; i++) {
+            const angle = Math.random() * Math.PI * 2;
+            const distance = auraRadius * (0.8 + Math.random() * 0.4);
+            
+            currentMagicEffect.particles.push({
+              x: centerX + Math.cos(angle) * distance,
+              y: centerY + Math.sin(angle) * distance,
+              angle: angle,
+              distance: distance,
+              baseDistance: distance,
+              size: 2 + Math.random() * 4,
+              alpha: 0.3 + Math.random() * 0.7,
+              alphaSpeed: 0.01 + Math.random() * 0.03,
+              rotationSpeed: 0.002 + Math.random() * 0.01 * (Math.random() > 0.5 ? 1 : -1)
+            });
+          }
+          break;
+          
+        case 'bolts':
+          // Create energy bolts
+          for (let i = 0; i < 8 * intensity; i++) {
+            const bolt = {
+              segments: [],
+              alpha: 0.7 + Math.random() * 0.3,
+              alphaSpeed: 0.02 + Math.random() * 0.03,
+              lifespan: 20 + Math.floor(Math.random() * 30),
+              age: 0
+            };
+            
+            // Create bolt segments
+            const startAngle = Math.random() * Math.PI * 2;
+            const length = 30 + Math.random() * 40 * (intensity / 5);
+            
+            bolt.segments.push({
+              x: centerX,
+              y: centerY,
+              angle: startAngle
+            });
+            
+            let currentX = centerX;
+            let currentY = centerY;
+            let currentAngle = startAngle;
+            
+            const numSegments = 5 + Math.floor(Math.random() * 5);
+            for (let j = 0; j < numSegments; j++) {
+              // Add some variation to the angle
+              currentAngle += (Math.random() - 0.5) * 1.5;
+              
+              // Calculate new position
+              const segmentLength = length / numSegments;
+              currentX += Math.cos(currentAngle) * segmentLength;
+              currentY += Math.sin(currentAngle) * segmentLength;
+              
+              bolt.segments.push({
+                x: currentX,
+                y: currentY,
+                angle: currentAngle
+              });
+            }
+            
+            currentMagicEffect.particles.push(bolt);
+          }
+          break;
+          
+        case 'portal':
+          // Create portal effect
+          const portalRadius = Math.min(width, height) * 0.25;
+          
+          // Create portal ring
+          for (let i = 0; i < 60; i++) {
+            const angle = (i / 60) * Math.PI * 2;
+            currentMagicEffect.particles.push({
+              type: 'ring',
+              angle: angle,
+              x: centerX + Math.cos(angle) * portalRadius,
+              y: centerY + Math.sin(angle) * portalRadius,
+              radius: portalRadius,
+              size: 3 + Math.random() * 2,
+              alpha: 0.7 + Math.random() * 0.3,
+              rotationSpeed: 0.005 * (Math.random() > 0.5 ? 1 : -1)
+            });
+          }
+          
+          // Create energy particles
+          for (let i = 0; i < 40 * intensity; i++) {
+            const angle = Math.random() * Math.PI * 2;
+            const distance = portalRadius * Math.random();
+            
+            currentMagicEffect.particles.push({
+              type: 'energy',
+              x: centerX + Math.cos(angle) * distance,
+              y: centerY + Math.sin(angle) * distance,
+              angle: Math.random() * Math.PI * 2,
+              speed: 0.2 + Math.random() * 2,
+              size: 1 + Math.random() * 3,
+              alpha: 0.5 + Math.random() * 0.5,
+              alphaSpeed: 0.02 + Math.random() * 0.05
+            });
+          }
+          break;
+      }
+    }
+    
+    function getMagicColor(scheme, position = 0) {
+      // Position from 0 to 1 controls gradient within a color scheme
+      switch (scheme) {
+        case 'arcane':
+          // Purple/pink hues
+          if (position < 0.3) return [180, 100, 255];
+          if (position < 0.6) return [150, 50, 220];
+          return [100, 0, 180];
+          
+        case 'nature':
+          // Green/earthy tones
+          if (position < 0.3) return [200, 255, 150];
+          if (position < 0.6) return [100, 220, 50];
+          return [50, 180, 0];
+          
+        case 'fire':
+          // Red/orange tones
+          if (position < 0.3) return [255, 200, 100];
+          if (position < 0.6) return [255, 150, 50];
+          return [220, 50, 0];
+          
+        case 'ice':
+          // Blue/cyan tones
+          if (position < 0.3) return [200, 240, 255];
+          if (position < 0.6) return [150, 200, 255];
+          return [50, 150, 220];
+          
+        case 'holy':
+          // Gold/white tones
+          if (position < 0.3) return [255, 255, 220];
+          if (position < 0.6) return [255, 240, 150];
+          return [220, 180, 50];
+          
+        case 'void':
+          // Dark purple/black tones
+          if (position < 0.3) return [100, 30, 150];
+          if (position < 0.6) return [70, 10, 100];
+          return [40, 0, 60];
+      }
+    }
+    
+    function updateMagicEffect() {
+      if (!currentMagicEffect) return;
+      
+      // Update pulse phase
+      if (currentMagicEffect.pulseEnabled) {
+        currentMagicEffect.pulsePhase += 0.05;
+        if (currentMagicEffect.pulsePhase > Math.PI * 2) {
+          currentMagicEffect.pulsePhase -= Math.PI * 2;
+        }
+      }
+      
+      const pulseValue = currentMagicEffect.pulseEnabled ? 
+        0.7 + Math.sin(currentMagicEffect.pulsePhase) * 0.3 : 1;
+      
+      const speedFactor = currentMagicEffect.speed / 5;
+      
+      // Update based on effect type
+      switch (currentMagicEffect.type) {
+        case 'sparkles':
+          updateSparkles(pulseValue, speedFactor);
+          break;
+        case 'aura':
+          updateAura(pulseValue, speedFactor);
+          break;
+        case 'bolts':
+          updateBolts(pulseValue, speedFactor);
+          break;
+        case 'portal':
+          updatePortal(pulseValue, speedFactor);
+          break;
+      }
+      
+      // Render magic effect
+      renderMagicEffect(pulseValue);
+    }
+    
+    function updateSparkles(pulseValue, speedFactor) {
+      const width = effectCanvas.width;
+      const height = effectCanvas.height;
+      
+      for (let i = 0; i < currentMagicEffect.particles.length; i++) {
+        const particle = currentMagicEffect.particles[i];
+        
+        // Update position
+        particle.x += particle.speedX * speedFactor;
+        particle.y += particle.speedY * speedFactor;
+        
+        // Update rotation
+        particle.rotation += particle.rotationSpeed * speedFactor;
+        
+        // Pulsate alpha
+        particle.alpha += particle.alphaSpeed * (Math.random() > 0.5 ? 1 : -1);
+        particle.alpha = Math.max(0.1, Math.min(1, particle.alpha));
+        
+        // Wrap around screen
+        if (particle.x < 0) particle.x = width;
+        if (particle.x > width) particle.x = 0;
+        if (particle.y < 0) particle.y = height;
+        if (particle.y > height) particle.y = 0;
+      }
+      
+      // Add new particles occasionally
+      if (Math.random() < 0.1 * pulseValue) {
+        currentMagicEffect.particles.push({
+          x: Math.random() * width,
+          y: Math.random() * height,
+          size: 0.5 + Math.random() * 2.5,
+          speedX: (Math.random() - 0.5) * 2,
+          speedY: (Math.random() - 0.5) * 2,
+          alpha: Math.random(),
+          alphaSpeed: 0.01 + Math.random() * 0.05,
+          rotation: Math.random() * Math.PI * 2,
+          rotationSpeed: (Math.random() - 0.5) * 0.1
+        });
+      }
+    }
+    
+    function updateAura(pulseValue, speedFactor) {
+      const width = effectCanvas.width;
+      const height = effectCanvas.height;
+      const centerX = width / 2;
+      const centerY = height / 2;
+      
+      for (let i = 0; i < currentMagicEffect.particles.length; i++) {
+        const particle = currentMagicEffect.particles[i];
+        
+        // Rotate around center
+        particle.angle += particle.rotationSpeed * speedFactor;
+        
+        // Pulsate distance
+        if (currentMagicEffect.pulseEnabled) {
+          particle.distance = particle.baseDistance * pulseValue;
+        }
+        
+        // Update position
+        particle.x = centerX + Math.cos(particle.angle) * particle.distance;
+        particle.y = centerY + Math.sin(particle.angle) * particle.distance;
+        
+        // Pulsate alpha
+        particle.alpha += particle.alphaSpeed * (Math.random() > 0.5 ? 1 : -1);
+        particle.alpha = Math.max(0.1, Math.min(1, particle.alpha));
+      }
+    }
+    
+    function updateBolts(pulseValue, speedFactor) {
+      const width = effectCanvas.width;
+      const height = effectCanvas.height;
+      const centerX = width / 2;
+      const centerY = height / 2;
+      
+      // Update existing bolts
+      for (let i = currentMagicEffect.particles.length - 1; i >= 0; i--) {
+        const bolt = currentMagicEffect.particles[i];
+        
+        // Increase age
+        bolt.age += speedFactor;
+        
+        // Fade out based on age
+        if (bolt.age > bolt.lifespan * 0.7) {
+          bolt.alpha -= bolt.alphaSpeed * speedFactor;
+        }
+        
+        // Remove old bolts
+        if (bolt.alpha <= 0 || bolt.age >= bolt.lifespan) {
+          currentMagicEffect.particles.splice(i, 1);
+        }
+      }
+      
+      // Add new bolts occasionally
+      if (currentMagicEffect.particles.length < 8 * currentMagicEffect.intensity * pulseValue && 
+          Math.random() < 0.1 * speedFactor) {
+        
+        const bolt = {
+          segments: [],
+          alpha: 0.7 + Math.random() * 0.3,
+          alphaSpeed: 0.02 + Math.random() * 0.03,
+          lifespan: 20 + Math.floor(Math.random() * 30),
+          age: 0
+        };
+        
+        // Create bolt segments
+        const startAngle = Math.random() * Math.PI * 2;
+        const length = 30 + Math.random() * 40 * (currentMagicEffect.intensity / 5);
+        
+        bolt.segments.push({
+          x: centerX,
+          y: centerY,
+          angle: startAngle
+        });
+        
+        let currentX = centerX;
+        let currentY = centerY;
+        let currentAngle = startAngle;
+        
+        const numSegments = 5 + Math.floor(Math.random() * 5);
+        for (let j = 0; j < numSegments; j++) {
+          // Add some variation to the angle
+          currentAngle += (Math.random() - 0.5) * 1.5;
+          
+          // Calculate new position
+          const segmentLength = length / numSegments;
+          currentX += Math.cos(currentAngle) * segmentLength;
+          currentY += Math.sin(currentAngle) * segmentLength;
+          
+          bolt.segments.push({
+            x: currentX,
+            y: currentY,
+            angle: currentAngle
+          });
+        }
+        
+        currentMagicEffect.particles.push(bolt);
+      }
+    }
+    
+    function updatePortal(pulseValue, speedFactor) {
+      const width = effectCanvas.width;
+      const height = effectCanvas.height;
+      const centerX = width / 2;
+      const centerY = height / 2;
+      
+      for (let i = 0; i < currentMagicEffect.particles.length; i++) {
+        const particle = currentMagicEffect.particles[i];
+        
+        if (particle.type === 'ring') {
+          // Rotate ring particles
+          particle.angle += particle.rotationSpeed * speedFactor;
+          
+          // Update position
+          particle.x = centerX + Math.cos(particle.angle) * particle.radius * pulseValue;
+          particle.y = centerY + Math.sin(particle.angle) * particle.radius * pulseValue;
+        } else if (particle.type === 'energy') {
+          // Move energy particles
+          particle.x += Math.cos(particle.angle) * particle.speed * speedFactor;
+          particle.y += Math.sin(particle.angle) * particle.speed * speedFactor;
+          
+          // Pulsate alpha
+          particle.alpha += particle.alphaSpeed * (Math.random() > 0.5 ? 1 : -1);
+          particle.alpha = Math.max(0.1, Math.min(1, particle.alpha));
+          
+          // Check if particle is too far from center
+          const dx = particle.x - centerX;
+          const dy = particle.y - centerY;
+          const distance = Math.sqrt(dx * dx + dy * dy);
+          
+          if (distance > particle.radius * 1.5) {
+            // Reset to a new random position in the portal
+            const newAngle = Math.random() * Math.PI * 2;
+            const newDistance = Math.random() * particle.radius * 0.8;
+            
+            particle.x = centerX + Math.cos(newAngle) * newDistance;
+            particle.y = centerY + Math.sin(newAngle) * newDistance;
+            particle.angle = Math.random() * Math.PI * 2;
+          }
+        }
+      }
+    }
+    
+    function renderMagicEffect(pulseValue) {
+      // Apply glow effect
+      effectCtx.shadowBlur = currentMagicEffect.glowIntensity * 2 * pulseValue;
+      effectCtx.globalCompositeOperation = 'lighter';
+      
+      // Get primary and secondary colors for the scheme
+      const [r1, g1, b1] = getMagicColor(currentMagicEffect.colorScheme, 0.2);
+      const [r2, g2, b2] = getMagicColor(currentMagicEffect.colorScheme, 0.8);
+      
+      // Set shadow color based on scheme
+      effectCtx.shadowColor = `rgb(${r1}, ${g1}, ${b1})`;
+      
+      // Render based on effect type
+      switch (currentMagicEffect.type) {
+        case 'sparkles':
+          renderSparkles(r1, g1, b1, r2, g2, b2, pulseValue);
+          break;
+        case 'aura':
+          renderAura(r1, g1, b1, r2, g2, b2, pulseValue);
+          break;
+        case 'bolts':
+          renderBolts(r1, g1, b1, r2, g2, b2, pulseValue);
+          break;
+        case 'portal':
+          renderPortal(r1, g1, b1, r2, g2, b2, pulseValue);
+          break;
+      }
+      
+      // Reset composite operation and shadow
+      effectCtx.globalCompositeOperation = 'source-over';
+      effectCtx.shadowBlur = 0;
+    }
+    
+    function renderSparkles(r1, g1, b1, r2, g2, b2, pulseValue) {
+      for (const particle of currentMagicEffect.particles) {
+        effectCtx.save();
+        effectCtx.translate(particle.x, particle.y);
+        effectCtx.rotate(particle.rotation);
+        
+        const alpha = particle.alpha * pulseValue;
+        
+        // Draw sparkle (star shape)
+        effectCtx.beginPath();
+        
+        for (let i = 0; i < 5; i++) {
+          const angle = (i * Math.PI * 2) / 5;
+          const outerRadius = particle.size * 2;
+          const innerRadius = particle.size * 0.5;
+          
+          effectCtx.lineTo(Math.cos(angle) * outerRadius, Math.sin(angle) * outerRadius);
+          effectCtx.lineTo(
+            Math.cos(angle + Math.PI / 5) * innerRadius,
+            Math.sin(angle + Math.PI / 5) * innerRadius
+          );
+        }
+        
+        effectCtx.closePath();
+        effectCtx.fillStyle = `rgba(${r1}, ${g1}, ${b1}, ${alpha})`;
+        effectCtx.fill();
+        
+        // Draw center dot
+        effectCtx.beginPath();
+        effectCtx.arc(0, 0, particle.size * 0.5, 0, Math.PI * 2);
+        effectCtx.fillStyle = `rgba(${r2}, ${g2}, ${b2}, ${alpha})`;
+        effectCtx.fill();
+        
+        effectCtx.restore();
+      }
+    }
+    
+    function renderAura(r1, g1, b1, r2, g2, b2, pulseValue) {
+      const width = effectCanvas.width;
+      const height = effectCanvas.height;
+      const centerX = width / 2;
+      const centerY = height / 2;
+      
+      // Draw aura glow
+      const radius = Math.min(width, height) * 0.3 * pulseValue;
+      const gradient = effectCtx.createRadialGradient(
+        centerX, centerY, radius * 0.2,
+        centerX, centerY, radius
+      );
+      
+      gradient.addColorStop(0, `rgba(${r1}, ${g1}, ${b1}, 0.4)`);
+      gradient.addColorStop(0.7, `rgba(${r2}, ${g2}, ${b2}, 0.1)`);
+      gradient.addColorStop(1, `rgba(${r2}, ${g2}, ${b2}, 0)`);
+      
+      effectCtx.beginPath();
+      effectCtx.fillStyle = gradient;
+      effectCtx.arc(centerX, centerY, radius, 0, Math.PI * 2);
+      effectCtx.fill();
+      
+      // Draw particles
+      for (const particle of currentMagicEffect.particles) {
+        const alpha = particle.alpha * pulseValue;
+        
+        effectCtx.beginPath();
+        effectCtx.arc(particle.x, particle.y, particle.size, 0, Math.PI * 2);
+        effectCtx.fillStyle = `rgba(${r1}, ${g1}, ${b1}, ${alpha})`;
+        effectCtx.fill();
+      }
+    }
+    
+    function renderBolts(r1, g1, b1, r2, g2, b2, pulseValue) {
+      // Draw bolts
+      for (const bolt of currentMagicEffect.particles) {
+        const alpha = bolt.alpha * pulseValue;
+        
+        // Set line style
+        effectCtx.strokeStyle = `rgba(${r1}, ${g1}, ${b1}, ${alpha})`;
+        effectCtx.lineWidth = 2 * pulseValue;
+        
+        // Draw main bolt
+        effectCtx.beginPath();
+        effectCtx.moveTo(bolt.segments[0].x, bolt.segments[0].y);
+        
+        for (let i = 1; i < bolt.segments.length; i++) {
+          effectCtx.lineTo(bolt.segments[i].x, bolt.segments[i].y);
+        }
+        
+        effectCtx.stroke();
+        
+        // Draw glow
+        effectCtx.strokeStyle = `rgba(${r2}, ${g2}, ${b2}, ${alpha * 0.5})`;
+        effectCtx.lineWidth = 5 * pulseValue;
+        effectCtx.stroke();
+        
+        // Draw connection points
+        for (const segment of bolt.segments) {
+          effectCtx.beginPath();
+          effectCtx.arc(segment.x, segment.y, 2 * pulseValue, 0, Math.PI * 2);
+          effectCtx.fillStyle = `rgba(${r1}, ${g1}, ${b1}, ${alpha})`;
+          effectCtx.fill();
+        }
+      }
+    }
+    
+    function renderPortal(r1, g1, b1, r2, g2, b2, pulseValue) {
+      const width = effectCanvas.width;
+      const height = effectCanvas.height;
+      const centerX = width / 2;
+      const centerY = height / 2;
+      
+      // Draw portal background
+      const portalRadius = Math.min(width, height) * 0.25 * pulseValue;
+      const gradient = effectCtx.createRadialGradient(
+        centerX, centerY, 0,
+        centerX, centerY, portalRadius
+      );
+      
+      gradient.addColorStop(0, `rgba(${r1}, ${g1}, ${b1}, 0.7)`);
+      gradient.addColorStop(0.5, `rgba(${r2}, ${g2}, ${b2}, 0.3)`);
+      gradient.addColorStop(1, `rgba(${r2}, ${g2}, ${b2}, 0)`);
+      
+      effectCtx.beginPath();
+      effectCtx.fillStyle = gradient;
+      effectCtx.arc(centerX, centerY, portalRadius, 0, Math.PI * 2);
+      effectCtx.fill();
+      
+      // Draw particles
+      for (const particle of currentMagicEffect.particles) {
+        const alpha = particle.alpha * pulseValue;
+        
+        if (particle.type === 'ring') {
+          // Ring particles
+          effectCtx.beginPath();
+          effectCtx.arc(particle.x, particle.y, particle.size, 0, Math.PI * 2);
+          effectCtx.fillStyle = `rgba(${r1}, ${g1}, ${b1}, ${alpha})`;
+          effectCtx.fill();
+        } else if (particle.type === 'energy') {
+          // Energy particles
+          effectCtx.beginPath();
+          effectCtx.arc(particle.x, particle.y, particle.size, 0, Math.PI * 2);
+          effectCtx.fillStyle = `rgba(${r2}, ${g2}, ${b2}, ${alpha})`;
+          effectCtx.fill();
+        }
+      }
+      
+      // Draw portal ring
+      effectCtx.beginPath();
+      effectCtx.arc(centerX, centerY, portalRadius, 0, Math.PI * 2);
+      effectCtx.strokeStyle = `rgba(${r1}, ${g1}, ${b1}, 0.8)`;
+      effectCtx.lineWidth = 3 * pulseValue;
+      effectCtx.stroke();
+    }
+    
+    /*** WATER EFFECT ***/
+    
+    function initWaterEffect() {
+      currentWaterEffect = {
+        particles: [],
+        type: 'splash',
+        viscosity: 0.95,
+        speed: 5,
+        particleCount: 200,
+        color: 'clear',
+        customColor: '#4a8eff',
+        transparency: 0.7,
+        reflectionEnabled: true,
+        
+        // Animation state
+        phase: 'active',
+        timer: 0
+      };
+      
+      // Event listeners for water parameters
+      document.getElementById('waterType').addEventListener('change', function() {
+        currentWaterEffect.type = this.value;
+        initializeWaterParticles();
+      });
+      
+      document.getElementById('waterViscosity').addEventListener('input', function() {
+        currentWaterEffect.viscosity = parseFloat(this.value);
+      });
+      
+      document.getElementById('waterSpeed').addEventListener('input', function() {
+        currentWaterEffect.speed = parseInt(this.value);
+      });
+      
+      document.getElementById('waterParticles').addEventListener('input', function() {
+        currentWaterEffect.particleCount = parseInt(this.value);
+      });
+      
+      document.getElementById('waterColor').addEventListener('change', function() {
+        currentWaterEffect.color = this.value;
+      });
+      
+      document.getElementById('customWaterColor').addEventListener('input', function() {
+        currentWaterEffect.customColor = this.value;
+      });
+      
+      document.getElementById('waterTransparency').addEventListener('input', function() {
+        currentWaterEffect.transparency = parseFloat(this.value);
+      });
+      
+      document.getElementById('waterReflection').addEventListener('change', function() {
+        currentWaterEffect.reflectionEnabled = this.checked;
+      });
+      
+      // Initialize water particles
+      initializeWaterParticles();
+    }
+    
+    function initializeWaterParticles() {
+      if (!currentWaterEffect) return;
+      
+      // Clear existing particles
+      currentWaterEffect.particles = [];
+      
+      const width = effectCanvas.width;
+      const height = effectCanvas.height;
+      const centerX = width / 2;
+      const centerY = height / 2;
+      
+      // Create particles based on effect type
+      switch (currentWaterEffect.type) {
+        case 'splash':
+          // Create splash particles
+          for (let i = 0; i < currentWaterEffect.particleCount; i++) {
+            const angle = Math.random() * Math.PI * 2;
+            const speed = 1 + Math.random() * 5;
+            
+            currentWaterEffect.particles.push({
+              x: centerX,
+              y: centerY,
+              size: 2 + Math.random() * 4,
+              speedX: Math.cos(angle) * speed,
+              speedY: Math.sin(angle) * speed - 5, // Initial upward velocity
+              gravity: 0.2,
+              alpha: 0.7 + Math.random() * 0.3,
+              trail: []
+            });
+          }
+          break;
+          
+        case 'drip':
+          // Create water drips
+          for (let i = 0; i < currentWaterEffect.particleCount / 10; i++) {
+            createWaterDrip();
+          }
+          break;
+          
+        case 'flow':
+          // Create flowing water particles
+          for (let i = 0; i < currentWaterEffect.particleCount; i++) {
+            currentWaterEffect.particles.push({
+              x: Math.random() * width,
+              y: Math.random() * height,
+              size: 1 + Math.random() * 3,
+              speedX: 0.5 + Math.random() * 1.5,
+              speedY: 0.1 + Math.random() * 0.5,
+              alpha: 0.3 + Math.random() * 0.7,
+              wavePhase: Math.random() * Math.PI * 2,
+              waveAmplitude: 0.5 + Math.random() * 1.5
+            });
+          }
+          break;
+          
+        case 'ripple':
+          // Create ripple waves
+          for (let i = 0; i < 10; i++) {
+            currentWaterEffect.particles.push({
+              x: centerX,
+              y: centerY,
+              radius: 10 + i * 15,
+              targetRadius: 100 + i * 20,
+              thickness: 2,
+              alpha: 1 - i * 0.1,
+              speed: 0.5 + Math.random() * 0.5
+            });
+          }
+          break;
+      }
+    }
+    
+    function createWaterDrip() {
+      const width = effectCanvas.width;
+      const startX = Math.random() * width;
+      
+      currentWaterEffect.particles.push({
+        x: startX,
+        y: 0,
+        size: 3 + Math.random() * 5,
+        length: 10 + Math.random() * 20,
+        speedY: 1 + Math.random() * 2,
+        alpha: 0.6 + Math.random() * 0.4,
+        droplets: [],
+        readyToDrop: false,
+        dropDelay: 30 + Math.floor(Math.random() * 60)
+      });
+    }
+    
+    function getWaterColor(alpha = 1) {
+      switch (currentWaterEffect.color) {
+        case 'clear':
+          return `rgba(74, 142, 255, ${alpha * currentWaterEffect.transparency})`;
+        case 'deep':
+          return `rgba(0, 80, 180, ${alpha * currentWaterEffect.transparency})`;
+        case 'murky':
+          return `rgba(100, 125, 130, ${alpha * currentWaterEffect.transparency})`;
+        case 'toxic':
+          return `rgba(80, 220, 75, ${alpha * currentWaterEffect.transparency})`;
+        case 'custom':
+          // Parse custom color
+          const hex = currentWaterEffect.customColor.replace('#', '');
+          const r = parseInt(hex.substring(0, 2), 16);
+          const g = parseInt(hex.substring(2, 4), 16);
+          const b = parseInt(hex.substring(4, 6), 16);
+          return `rgba(${r}, ${g}, ${b}, ${alpha * currentWaterEffect.transparency})`;
+      }
+    }
+    
+    function updateWaterEffect() {
+      if (!currentWaterEffect) return;
+      
+      const speedFactor = currentWaterEffect.speed / 5;
+      
+      // Update based on effect type
+      switch (currentWaterEffect.type) {
+        case 'splash':
+          updateWaterSplash(speedFactor);
+          break;
+        case 'drip':
+          updateWaterDrip(speedFactor);
+          break;
+        case 'flow':
+          updateWaterFlow(speedFactor);
+          break;
+        case 'ripple':
+          updateWaterRipple(speedFactor);
+          break;
+      }
+      
+      // Render water effect
+      renderWaterEffect();
+    }
+    
+    function updateWaterSplash(speedFactor) {
+      const height = effectCanvas.height;
+      
+      for (let i = currentWaterEffect.particles.length - 1; i >= 0; i--) {
+        const particle = currentWaterEffect.particles[i];
+        
+        // Add position to trail (limited length)
+        particle.trail.push({x: particle.x, y: particle.y});
+        if (particle.trail.length > 5) {
+          particle.trail.shift();
+        }
+        
+        // Update position
+        particle.x += particle.speedX * speedFactor;
+        particle.y += particle.speedY * speedFactor;
+        
+        // Apply gravity
+        particle.speedY += particle.gravity * speedFactor;
+        
+        // Apply resistance
+        particle.speedX *= currentWaterEffect.viscosity;
+        particle.speedY *= currentWaterEffect.viscosity;
+        
+        // Check for ground collision
+        if (particle.y > height - particle.size) {
+          // Bounce with energy loss
+          particle.y = height - particle.size;
+          particle.speedY = -particle.speedY * 0.6;
+          
+          // Reduce horizontal speed (friction)
+          particle.speedX *= 0.8;
+          
+          // Remove very slow particles
+          if (Math.abs(particle.speedY) < 0.5) {
+            currentWaterEffect.particles.splice(i, 1);
+          }
+        }
+      }
+      
+      // Reset if all particles are gone
+      if (currentWaterEffect.particles.length === 0) {
+        initializeWaterParticles();
+      }
+    }
+    
+    function updateWaterDrip(speedFactor) {
+      const height = effectCanvas.height;
+      
+      for (let i = currentWaterEffect.particles.length - 1; i >= 0; i--) {
+        const drip = currentWaterEffect.particles[i];
+        
+        // Update drip position
+        drip.y += drip.speedY * speedFactor;
+        
+        // Check if it's time to create a droplet
+        if (!drip.readyToDrop) {
+          drip.dropDelay -= speedFactor;
+          if (drip.dropDelay <= 0) {
+            drip.readyToDrop = true;
+          }
+        }
+        
+        // Create droplet if ready and at bottom of drip
+        if (drip.readyToDrop && drip.y > drip.length && Math.random() < 0.03 * speedFactor) {
+          drip.droplets.push({
+            x: drip.x,
+            y: drip.y + drip.length,
+            size: drip.size * 0.7,
+            speedY: 1 + Math.random() * 3,
+            alpha: drip.alpha
+          });
+          
+          // Reset drip length
+          drip.length = 3 + Math.random() * 8;
+          drip.readyToDrop = false;
+          drip.dropDelay = 10 + Math.floor(Math.random() * 20);
+        } else {
+          // Increase length until ready to drop
+          drip.length += 0.1 * speedFactor;
+        }
+        
+        // Update droplets
+        for (let j = drip.droplets.length - 1; j >= 0; j--) {
+          const droplet = drip.droplets[j];
+          
+          // Update droplet position
+          droplet.y += droplet.speedY * speedFactor;
+          
+          // Remove droplets that fall off screen
+          if (droplet.y > height) {
+            drip.droplets.splice(j, 1);
+          }
+        }
+        
+        // Create new drips occasionally
+        if (currentWaterEffect.particles.length < currentWaterEffect.particleCount / 10 && 
+            Math.random() < 0.02 * speedFactor) {
+          createWaterDrip();
+        }
+      }
+    }
+    
+    function updateWaterFlow(speedFactor) {
+      const width = effectCanvas.width;
+      const height = effectCanvas.height;
+      
+      for (let i = currentWaterEffect.particles.length - 1; i >= 0; i--) {
+        const particle = currentWaterEffect.particles[i];
+        
+        // Update position
+        particle.x += particle.speedX * speedFactor;
+        particle.y += particle.speedY * speedFactor;
+        
+        // Add wave motion
+        particle.wavePhase += 0.1 * speedFactor;
+        particle.x += Math.sin(particle.wavePhase) * particle.waveAmplitude;
+        
+        // Wrap around screen
+        if (particle.x > width) {
+          particle.x = 0;
+        }
+        
+        if (particle.y > height) {
+          particle.y = 0;
+          particle.x = Math.random() * width;
+        }
+      }
+    }
+    
+    function updateWaterRipple(speedFactor) {
+      const width = effectCanvas.width;
+      const height = effectCanvas.height;
+      const centerX = width / 2;
+      const centerY = height / 2;
+      
+      let allComplete = true;
+      
+      for (let i = currentWaterEffect.particles.length - 1; i >= 0; i--) {
+        const ripple = currentWaterEffect.particles[i];
+        
+        // Expand ripple
+        ripple.radius += ripple.speed * speedFactor;
+        
+        // Fade out as it expands
+        ripple.alpha = Math.max(0, 1 - (ripple.radius / ripple.targetRadius));
+        
+        // Check if ripple is complete
+        if (ripple.radius < ripple.targetRadius) {
+          allComplete = false;
+        }
+      }
+      
+      // Reset ripples if all complete
+      if (allComplete) {
+        initializeWaterParticles();
+      }
+      
+      // Create new ripple occasionally
+      if (Math.random() < 0.01 * speedFactor) {
+        const x = centerX + (Math.random() - 0.5) * width * 0.5;
+        const y = centerY + (Math.random() - 0.5) * height * 0.5;
+        
+        // Add a new small ripple
+        currentWaterEffect.particles.push({
+          x: x,
+          y: y,
+          radius: 5,
+          targetRadius: 30 + Math.random() * 30,
+          thickness: 1.5,
+          alpha: 0.7 + Math.random() * 0.3,
+          speed: 0.3 + Math.random() * 0.3
+        });
+      }
+    }
+    
+    function renderWaterEffect() {
+      // Set water properties
+      const baseColor = getWaterColor(1);
+      const lightColor = getWaterColor(0.7);
+      
+      // Apply transparency settings
+      effectCtx.globalAlpha = currentWaterEffect.transparency;
+      
+      // Add reflections if enabled
+      if (currentWaterEffect.reflectionEnabled) {
+        effectCtx.shadowColor = lightColor;
+        effectCtx.shadowBlur = 5;
+      }
+      
+      switch (currentWaterEffect.type) {
+        case 'splash':
+          renderWaterSplash(baseColor, lightColor);
+          break;
+        case 'drip':
+          renderWaterDrip(baseColor, lightColor);
+          break;
+        case 'flow':
+          renderWaterFlow(baseColor, lightColor);
+          break;
+        case 'ripple':
+          renderWaterRipple(baseColor, lightColor);
+          break;
+      }
+      
+      // Reset properties
+      effectCtx.globalAlpha = 1;
+      effectCtx.shadowBlur = 0;
+    }
+    
+    function renderWaterSplash(baseColor, lightColor) {
+      // Draw water particles
+      for (const particle of currentWaterEffect.particles) {
+        // Draw particle trails (for motion blur effect)
+        if (particle.trail.length > 1) {
+          effectCtx.beginPath();
+          effectCtx.moveTo(particle.trail[0].x, particle.trail[0].y);
+          
+          for (let i = 1; i < particle.trail.length; i++) {
+            effectCtx.lineTo(particle.trail[i].x, particle.trail[i].y);
+          }
+          
+          effectCtx.lineWidth = particle.size / 2;
+          effectCtx.strokeStyle = lightColor;
+          effectCtx.stroke();
+        }
+        
+        // Draw the particle
+        effectCtx.beginPath();
+        effectCtx.arc(particle.x, particle.y, particle.size, 0, Math.PI * 2);
+        effectCtx.fillStyle = baseColor;
+        effectCtx.fill();
+        
+        // Draw highlight
+        effectCtx.beginPath();
+        effectCtx.arc(
+          particle.x - particle.size * 0.3, 
+          particle.y - particle.size * 0.3, 
+          particle.size * 0.4, 
+          0, Math.PI * 2
+        );
+        effectCtx.fillStyle = 'rgba(255, 255, 255, 0.3)';
+        effectCtx.fill();
+      }
+    }
+    
+    function renderWaterDrip(baseColor, lightColor) {
+      for (const drip of currentWaterEffect.particles) {
+        // Draw the drip
+        effectCtx.beginPath();
+        effectCtx.fillStyle = baseColor;
+        
+        // Teardrop shape for the drip
+        const width = drip.size;
+        const height = drip.length;
+        
+        // Draw drip body (rounded rectangle)
+        effectCtx.roundRect(
+          drip.x - width/2, 
+          drip.y, 
+          width, 
+          height, 
+          [0, 0, width/2, width/2]
+        );
+        effectCtx.fill();
+        
+        // Draw droplets
+        for (const droplet of drip.droplets) {
+          // Teardrop shape for droplets
+          effectCtx.beginPath();
+          effectCtx.arc(droplet.x, droplet.y, droplet.size, 0, Math.PI * 2);
+          effectCtx.fillStyle = baseColor;
+          effectCtx.fill();
+          
+          // Add highlight
+          effectCtx.beginPath();
+          effectCtx.arc(
+            droplet.x - droplet.size * 0.3, 
+            droplet.y - droplet.size * 0.3, 
+            droplet.size * 0.4, 
+            0, Math.PI * 2
+          );
+          effectCtx.fillStyle = 'rgba(255, 255, 255, 0.3)';
+          effectCtx.fill();
+        }
+      }
+    }
+    
+    function renderWaterFlow(baseColor, lightColor) {
+      // Draw flowing water particles
+      for (const particle of currentWaterEffect.particles) {
+        effectCtx.beginPath();
+        effectCtx.arc(particle.x, particle.y, particle.size, 0, Math.PI * 2);
+        effectCtx.fillStyle = baseColor;
+        effectCtx.fill();
+        
+        // Draw trail (elongated in direction of movement)
+        effectCtx.beginPath();
+        effectCtx.ellipse(
+          particle.x - particle.speedX * 2, 
+          particle.y - particle.speedY * 2,
+          particle.size * 0.8,
+          particle.size * 1.5,
+          Math.atan2(particle.speedY, particle.speedX),
+          0, Math.PI * 2
+        );
+        effectCtx.fillStyle = lightColor;
+        effectCtx.fill();
+      }
+    }
+    
+    function renderWaterRipple(baseColor, lightColor) {
+      for (const ripple of currentWaterEffect.particles) {
+        // Draw ripple circle
+        effectCtx.beginPath();
+        effectCtx.arc(ripple.x, ripple.y, ripple.radius, 0, Math.PI * 2);
+        effectCtx.strokeStyle = `rgba(74, 142, 255, ${ripple.alpha * currentWaterEffect.transparency})`;
+        effectCtx.lineWidth = ripple.thickness;
+        effectCtx.stroke();
+        
+        // Draw secondary ripple for effect
+        effectCtx.beginPath();
+        effectCtx.arc(ripple.x, ripple.y, ripple.radius * 0.8, 0, Math.PI * 2);
+        effectCtx.strokeStyle = `rgba(255, 255, 255, ${ripple.alpha * 0.5 * currentWaterEffect.transparency})`;
+        effectCtx.lineWidth = ripple.thickness * 0.5;
+        effectCtx.stroke();
+      }
+    }
+    
+    // Helper function: HSL to RGB conversion
+    function hslToRgb(h, s, l) {
+      h /= 360;
+      s /= 100;
+      l /= 100;
+      
+      let r, g, b;
+      
+      if (s === 0) {
+        r = g = b = l; // achromatic
+      } else {
+        const hue2rgb = (p, q, t) => {
+          if (t < 0) t += 1;
+          if (t > 1) t -= 1;
+          if (t < 1/6) return p + (q - p) * 6 * t;
+          if (t < 1/2) return q;
+          if (t < 2/3) return p + (q - p) * (2/3 - t) * 6;
+          return p;
+        };
+        
+        const q = l < 0.5 ? l * (1 + s) : l + s - l * s;
+        const p = 2 * l - q;
+        
+        r = hue2rgb(p, q, h + 1/3);
+        g = hue2rgb(p, q, h);
+        b = hue2rgb(p, q, h - 1/3);
+      }
+      
+      return [Math.round(r * 255), Math.round(g * 255), Math.round(b * 255)];
+    }
+  </script>
+</body>
+</html>
\ No newline at end of file
diff --git a/resources/views/writings/edit.blade.php b/resources/views/writings/edit.blade.php
index 85e1f14..3dbe36c 100644
--- a/resources/views/writings/edit.blade.php
+++ b/resources/views/writings/edit.blade.php
@@ -4,7 +4,7 @@
 @vite(['resources/js/writing_show.js', 'resources/css/writings.css'])
 @endsection
 
-@section('body')
+@section('body')    
     <main>
     @if (Auth::user() != null)
         <div class="container">
diff --git a/resources/views/writings/index.blade.php b/resources/views/writings/index.blade.php
index 6fd1e84..36cb735 100644
--- a/resources/views/writings/index.blade.php
+++ b/resources/views/writings/index.blade.php
@@ -7,6 +7,22 @@
             <p >Thoughts, ideas, words potentially worth publishing</p>
             <a href = "/w/create">Write Something</a>
             <!-- TODO search -->
+            <div class = "sidebar">
+                <legend>Sort by: </legend>
+                <select name = "sort_method">
+                    <option value = "date">Date</option>
+                    <option value = "user">Author</option>
+                    <option value = "title">Title</option>        
+                </select>
+                <fieldset id = "filter_method">
+                    <legend>Filter: </legend>
+                    <div>
+                      <input type="checkbox" id="checkbox_author1" name="checkbox_author1" value="Author 1 (placeholder TODO)">
+                      <label for="checkbox_author1">Author 1 (placeholder TODO)</label>
+                    </div>
+                </fieldset>
+            </div>
+            
         </section>
 
         <section>
@@ -29,6 +45,8 @@
             @endforeach
         </section>
 
+
+
         @if ($writings->hasPages())
             <div >
                 {{ $writings->links() }}
diff --git a/routes/web.php b/routes/web.php
index 76ef3a7..b0d36e8 100755
--- a/routes/web.php
+++ b/routes/web.php
@@ -5,6 +5,7 @@ use App\Http\Controllers\SiteController;
 use App\Http\Controllers\ProfileController;
 use App\Http\Controllers\WritingController;
 use App\Http\Controllers\LinkController;
+use App\Http\Controllers\DashboardController;
 use Illuminate\Http\Request;
 
 Route::get('/', function () {
@@ -59,6 +60,8 @@ Route::middleware('auth')->group(function () {
     Route::get('/profile', [ProfileController::class, 'edit'])->name('profile.edit');
     Route::patch('/profile', [ProfileController::class, 'update'])->name('profile.update');
     Route::delete('/profile', [ProfileController::class, 'destroy'])->name('profile.destroy');
+    Route::get('/dashboard', [DashboardController::class, 'index'])->name('dashboard');
+    Route::get('/dashboard/stats', [DashboardController::class, 'statistics'])->name('dashboard.stats');
 });
 
 Route::post('/update-session', function(Request $req){
@@ -70,6 +73,13 @@ Route::post('/update-session', function(Request $req){
 
 require __DIR__.'/auth.php';
 
+Route::get('/toy/{v}', function($v){
+    if (is_null($v)){
+        return view('toys.index');
+    }
+    return view('toys.'.$v);
+});
+
 Route::get('/{v}', function($v){
     return view($v);
 });
diff --git a/vite.config.js b/vite.config.js
index a380d5c..0af0b6a 100755
--- a/vite.config.js
+++ b/vite.config.js
@@ -4,12 +4,24 @@ import laravel from 'laravel-vite-plugin';
 export default defineConfig({
     plugins: [
         laravel({
-            input: ['resources/css/app.css', 'resources/css/style.css', 'resources/css/writings.css','resources/js/main.js', 'resources/js/marked.js', 'resources/js/writing_create.js', 'resources/js/writing_show.js'],
+            input: [
+                'resources/css/app.css', 
+                'resources/css/skeleton.css', 
+                'resources/css/normalize.css', 
+                'resources/css/style.css', 
+                'resources/css/writings.css',
+                'resources/css/jstoys.css',
+                'resources/js/main.js', 
+                'resources/js/marked.js', 
+                'resources/js/writing_create.js', 
+                'resources/js/writing_show.js',
+                'resources/js/blood_gpu.js',
+                'resources/js/blood.js'],
             refresh: true
         }),
     ],
     server: {
-        host: 'localhost',
+        host: '192.168.4.32',
         cors: true
     }
 });