☰

Drawaria Avatar Builder ++

Adds a modernized, light-themed UI with upload image input to the avatar builder.

लेखक
YouTubeDrawaria
दैनिक इंस्टॉल
1
एकूण इंस्टॉल
288
रेटिंग
2 0 1
आवृत्ती
2.0
बनवली
2024-12-08
अपडेट केली
2024-12-08
आकार
8.93 KB
License
MIT
यांवर लागू होते:

🚀 Drawaria Avatar Builder ++

🎯 What does this script do? / ¿Qué hace este script?

English: This script enhances the Drawaria Avatar Builder by introducing a modernized, light-themed user interface and a convenient image upload feature. It allows users to easily upload their own images to be used as avatars, replacing or supplementing the existing options. The script integrates seamlessly with the website, providing a user-friendly experience with smooth animations, a clean layout, and improved functionality for avatar creation. It also optimizes the upload process with chunked uploads and progress feedback.

Español: Este script mejora el Creador de Avatares de Drawaria introduciendo una interfaz de usuario modernizada de tema claro y una práctica función de carga de imágenes. Permite a los usuarios cargar fácilmente sus propias imágenes para ser utilizadas como avatares, reemplazando o complementando las opciones existentes. El script se integra perfectamente con el sitio web, brindando una experiencia amigable con animaciones fluidas, un diseño limpio y funcionalidad mejorada para la creación de avatares. También optimiza el proceso de carga con cargas en fragmentos y retroalimentación de progreso.

✨ Features / Características

UI & Functionality Enhancements
  • 🔧 Modern Light Theme - A refreshed, light-themed UI for a cleaner and more pleasant user experience.
  • ⚡ Image Upload Input - Allows users to upload their own images directly as avatars.
  • 🎨 Header Integration - Adds a new image and upload button to the header for easy access.
  • 🚀 Chunked Uploads - Efficiently uploads large image files by breaking them into smaller chunks.
  • 💡 Progress Feedback - Visual progress bar during image uploads to show upload status.
  • 🔒 Smooth Animations - Implements CSS animations for a more dynamic and engaging interface.

Español:

  • 🔧 Tema Claro Moderno - Una interfaz de usuario renovada y de tema claro para una experiencia de usuario más limpia y agradable.
  • ⚡ Entrada de Carga de Imágenes - Permite a los usuarios cargar sus propias imágenes directamente como avatares.
  • 🎨 Integración en la Cabecera - Añade una nueva imagen y botón de carga a la cabecera para un fácil acceso.
  • 🚀 Cargas en Fragmentos - Sube eficientemente archivos de imagen grandes dividiéndolos en fragmentos más pequeños.
  • 💡 Retroalimentación de Progreso - Barra de progreso visual durante las cargas de imágenes para mostrar el estado de la carga.
  • 🔒 Animaciones Fluidas - Implementa animaciones CSS para una interfaz más dinámica y atractiva.

📥 Installation / Instalación

🇺🇸 English Instructions 🇪🇸 Instrucciones en Español
  1. Install Tampermonkey or a similar userscript manager extension.
  2. Create a new userscript and paste the provided code.
  3. Save the script.
  4. Navigate to the Drawaria Avatar Builder page (https://*.drawaria.online/avatar/builder/) or the main page (https://drawaria.online/).
  5. The script will automatically apply the new UI and upload functionality.
  1. Instala la extensión Tampermonkey o un gestor de scripts similar.
  2. Crea un nuevo userscript y pega el código proporcionado.
  3. Guarda el script.
  4. Navega a la página del Creador de Avatares de Drawaria (https://*.drawaria.online/avatar/builder/) o a la página principal (https://drawaria.online/).
  5. El script aplicará automáticamente la nueva UI y la funcionalidad de carga.

🎮 How to Use / Cómo Usar

  • 🔵 Step 1: Go to the Drawaria Avatar Builder page.
    Paso 1: Ve a la página del Creador de Avatares de Drawaria.
  • 🟢 Step 2: Locate the new "Upload Image++" button in the header.
    Paso 2: Localiza el nuevo botón "Upload Image++" en la cabecera.
  • 🟣 Step 3: Click the button and select an image file from your device.
    Paso 3: Haz clic en el botón y selecciona un archivo de imagen de tu dispositivo.
  • 🟠 Step 4: Observe the progress bar as the image uploads. Once complete, the avatar should be updated.
    Paso 4: Observa la barra de progreso mientras se carga la imagen. Una vez completado, el avatar debería actualizarse.

🛠️ Technical Details / Detalles Técnicos

Feature / Característica Details / Detalles
jQuery Dependency Utilizes jQuery for DOM manipulation and AJAX requests, requiring the library to be loaded.
MutationObserver Observes DOM changes to ensure the avatar creation functionality is applied correctly after the main content loads.
File Upload Logic Implements chunked file uploads via AJAX POST requests to handle potentially large image files efficiently.
Image CDN Reference Fetches avatar images from a CDN using a provided cache identifier.

⚠️ Important Warnings / Advertencias Importantes
  • 🚨 Ensure Drawaria's website structure doesn't change significantly, as this might break the script.
  • 🚨 Only upload images in supported formats (e.g., JPG, PNG). Unsupported formats may cause errors.
  • 🚨 The script requires jQuery to be loaded by the page. If it's not, the script might not work.
  • 🚨 Respect Drawaria's terms of service regarding avatar uploads.

Español:

  • 🚨 Asegúrate de que la estructura del sitio web de Drawaria no cambie significativamente, ya que esto podría romper el script.
  • 🚨 Sube solo imágenes en formatos compatibles (por ejemplo, JPG, PNG). Los formatos no compatibles pueden causar errores.
  • 🚨 El script requiere que jQuery sea cargado por la página. Si no lo es, el script podría no funcionar.
  • 🚨 Respeta los términos de servicio de Drawaria con respecto a la carga de avatares.

🔧 Troubleshooting / Solución de Problemas

✅ The new upload button and UI elements appear correctly on the avatar builder page.
✅ El nuevo botón de carga y los elementos de la UI aparecen correctamente en la página del creador de avatares.
⚠️ If the upload button is missing or the UI is broken, try refreshing the page or ensure Tampermonkey is enabled. Check the browser console for errors.
⚠️ Si el botón de carga falta o la UI está rota, intenta actualizar la página o asegúrate de que Tampermonkey esté habilitado. Revisa la consola del navegador en busca de errores.
❌ If image uploads fail, check your internet connection and ensure the image file is not corrupted or too large for the server limits.
❌ Si las cargas de imágenes fallan, verifica tu conexión a internet y asegúrate de que el archivo de imagen no esté corrupto o sea demasiado grande para los límites del servidor.

📊 Compatibility / Compatibilidad

✅ Compatible Browsers / Navegadores Compatibles ✅ Required Extensions / Extensiones Requeridas
Chrome, Firefox, Edge, Opera
(Browsers supporting userscripts and jQuery) 		Tampermonkey or similar userscript manager
(Required for script execution)

🔄 How to Disable / Cómo Desactivar

Method 1 - Script Manager:

Open your userscript manager (e.g., Tampermonkey), find "Drawaria Avatar Builder ++", and disable or delete it.

Método 1 - Gestor de Scripts: Abre tu gestor de userscripts (ej. Tampermonkey), busca "Drawaria Avatar Builder ++" y desactívalo o elimínalo.

Method 2 - Remove Script:

If you don't want to disable it permanently, you can simply remove the script from your manager.

Método 2 - Eliminar Script: Si no deseas deshabilitarlo permanentemente, simplemente puedes eliminar el script de tu gestor.

💡 Pro Tips / Consejos Profesionales

  • Customizable Image Placement: Modify the CSS in the script to change the position and size of the image in the header.
  • Multiple Image Uploads: Extend the script to allow uploading multiple images at once or managing a library of uploaded avatars.
  • Error Handling Improvements: Add more specific error messages based on the type of upload failure.
  • Drag and Drop Support: Implement drag-and-drop functionality for the image upload input for even greater ease of use.
  • Theme Toggle: Add an option to switch between the light theme and a dark theme for the UI.

Español:

  • Colocación de Imagen Personalizable: Modifica el CSS en el script para cambiar la posición y el tamaño de la imagen en la cabecera.
  • Carga de Múltiples Imágenes: Extiende el script para permitir la carga de múltiples imágenes a la vez o la gestión de una biblioteca de avatares subidos.
  • Mejoras en el Manejo de Errores: Agrega mensajes de error más específicos basados en el tipo de fallo de carga.
  • Soporte de Arrastrar y Soltar: Implementa la funcionalidad de arrastrar y soltar para la entrada de carga de imágenes para una mayor facilidad de uso.
  • Interruptor de Tema: Agrega una opción para cambiar entre el tema claro y un tema oscuro para la UI.

🎉 Ready to Use! / ¡Listo para Usar!

Create your perfect avatar with enhanced tools and a beautiful new interface!

¡Crea tu avatar perfecto con herramientas mejoradas y una nueva y hermosa interfaz!

🎨 🚀 ✨ 💫 🌟

Author: YouTubeDrawaria | Version: 2.0 | License: MIT
Support: Report issues in the comments below | Additional Info: Modernizes the Drawaria Avatar Builder with image upload and a light theme.