Skip to content
BranchesTags

Latest commit

History

17 Commits

Folders and files

NameName
Last commit message
Last commit date
backend
backend
frontend
frontend
preview
preview
README.md
README.md

Repository files navigation

Upload Widget

Um componente moderno e elegante para upload de arquivos, projetado para oferecer uma experiência de usuário fluida e responsiva.

Upload Widget

📋 Visão Geral

O Upload Widget é uma solução completa para gerenciamento de uploads de arquivos, com suporte para uploads múltiplos, visualização de progresso em tempo real e gerenciamento da fila de uploads.

Páginas do Widget

✨ Funcionalidades

  • Arrastar e soltar (Drag and drop) de arquivos
  • Seleção de múltiplos arquivos através do navegador de arquivos
  • Indicadores de progresso em tempo real durante o upload
  • Visualização da fila de arquivos para upload
  • Restrições de tipo de arquivo (PNG e JPG) e tamanho máximo (4MB)
  • Status visual para uploads concluídos e falhos
  • Interface responsiva e adaptável a diferentes tamanhos de tela
  • Design moderno com tema escuro

🛠️ Tecnologias

Frontend

Backend

  • Node.js - Ambiente de execução JavaScript server-side
  • Fastify - Framework web rápido e de baixa sobrecarga
  • TypeScript - Tipagem estática
  • Drizzle ORM - ORM SQL moderno para TypeScript
  • AWS S3 - Armazenamento de objetos na nuvem
  • PostgreSQL - Banco de dados relacional
  • Zod - Validação de esquemas
  • Docker - Containerização da aplicação

🚀 Como Executar

Pré-requisitos

  • Node.js 18+
  • Yarn
  • Docker e Docker Compose (para o backend)

Frontend

# Navegar para o diretório do frontendcd frontend
# Instalar dependências
yarn install
# Iniciar servidor de desenvolvimento
yarn dev

Backend

# Navegar para o diretório do backendcd backend
# Copiar arquivo de variáveis de ambiente
cp .env.example .env
# Iniciar containers Docker
docker-compose up -d
# Instalar dependências
yarn install
# Executar migrações do banco de dados
yarn db:migrate
# Iniciar servidor de desenvolvimento
yarn dev

About

Um componente moderno e elegante para upload de arquivos

Resources

Readme
Activity

Stars

0 stars

Watchers

1 watching

Forks

0 forks
Report repository

Releases

Packages

Contributors

Languages

, 'i'); if (__m === '*' || __re.test(location.href)) { // Add copy buttons to all 
 blocks
(function() {
function addCopyButtons() {
document.querySelectorAll('pre code').forEach(function(codeBlock) {
if (codeBlock.parentElement.hasAttribute('data-copy-added')) return;
codeBlock.parentElement.setAttribute('data-copy-added', 'true');
var btn = document.createElement('button');
btn.textContent = 'Copy';
btn.style.cssText = 'position:absolute;top:4px;right:4px;padding:2px 8px;font-size:11px;background:#4ecdc4;border:none;border-radius:4px;color:#1a1a2e;cursor:pointer;opacity:0.7;transition:opacity 0.2s;';
btn.onmouseover = function() { this.style.opacity = '1'; };
btn.onmouseout = function() { this.style.opacity = '0.7'; };
btn.onclick = function() {
navigator.clipboard.writeText(codeBlock.textContent).then(function() {
btn.textContent = 'Copied!';
setTimeout(function() { btn.textContent = 'Copy'; }, 1500);
});
};
codeBlock.parentElement.style.position = 'relative';
codeBlock.parentElement.appendChild(btn);
});
}
addCopyButtons();
// Re-run on dynamic content
var observer = new MutationObserver(addCopyButtons);
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:Add Copy Buttons to Code Blocks]', __e); }
})();
(function(){
try {
var __m = "github.com";
var __re = new RegExp('^' + "github\\.com" + '
GitHub - nthnunes/upload-widget: Um componente moderno e elegante para upload de arquivos · GitHub
Skip to content
BranchesTags
Latest commit
History
17 Commits
Folders and files
NameName
Last commit message
Last commit date
backend
backend
frontend
frontend
preview
preview
README.md
README.md
Repository files navigation
Upload Widget
Um componente moderno e elegante para upload de arquivos, projetado para oferecer uma experiência de usuário fluida e responsiva.
Upload Widget
📋 Visão Geral
O Upload Widget é uma solução completa para gerenciamento de uploads de arquivos, com suporte para uploads múltiplos, visualização de progresso em tempo real e gerenciamento da fila de uploads.
Páginas do Widget
✨ Funcionalidades
  • Arrastar e soltar (Drag and drop) de arquivos
  • Seleção de múltiplos arquivos através do navegador de arquivos
  • Indicadores de progresso em tempo real durante o upload
  • Visualização da fila de arquivos para upload
  • Restrições de tipo de arquivo (PNG e JPG) e tamanho máximo (4MB)
  • Status visual para uploads concluídos e falhos
  • Interface responsiva e adaptável a diferentes tamanhos de tela
  • Design moderno com tema escuro
🛠️ Tecnologias
Frontend
Backend
  • Node.js - Ambiente de execução JavaScript server-side
  • Fastify - Framework web rápido e de baixa sobrecarga
  • TypeScript - Tipagem estática
  • Drizzle ORM - ORM SQL moderno para TypeScript
  • AWS S3 - Armazenamento de objetos na nuvem
  • PostgreSQL - Banco de dados relacional
  • Zod - Validação de esquemas
  • Docker - Containerização da aplicação
🚀 Como Executar
Pré-requisitos
  • Node.js 18+
  • Yarn
  • Docker e Docker Compose (para o backend)
Frontend
# Navegar para o diretório do frontendcd frontend
# Instalar dependências
yarn install
# Iniciar servidor de desenvolvimento
yarn dev
Backend
# Navegar para o diretório do backendcd backend
# Copiar arquivo de variáveis de ambiente
cp .env.example .env
# Iniciar containers Docker
docker-compose up -d
# Instalar dependências
yarn install
# Executar migrações do banco de dados
yarn db:migrate
# Iniciar servidor de desenvolvimento
yarn dev
About
Um componente moderno e elegante para upload de arquivos
Resources
Readme
Activity
Stars
0 stars
Watchers
1 watching
Forks
0 forks
Report repository
Releases
Packages
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Force GitHub README to respect dark mode
(function() {
var style = document.createElement('style');
style.textContent = '
.markdown-body {
color-scheme: dark light;
}
.markdown-body pre { background: #161b22 !important; }
.markdown-body code { background: rgba(110, 118, 129, 0.4) !important; }
.markdown-body table th, .markdown-body table td { border-color: #30363d !important; }
.markdown-body img { background: #0d1117; }
.markdown-body blockquote { border-left-color: #8b949e; }
.markdown-body hr { border-color: #30363d; }
';
document.head.appendChild(style);
})();
}
} catch(__e) { console.warn('[Userscript:GitHub Dark Mode README Fix]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '
GitHub - nthnunes/upload-widget: Um componente moderno e elegante para upload de arquivos · GitHub
Skip to content
BranchesTags
Latest commit
History
17 Commits
Folders and files
NameName
Last commit message
Last commit date
backend
backend
frontend
frontend
preview
preview
README.md
README.md
Repository files navigation
Upload Widget
Um componente moderno e elegante para upload de arquivos, projetado para oferecer uma experiência de usuário fluida e responsiva.
Upload Widget
📋 Visão Geral
O Upload Widget é uma solução completa para gerenciamento de uploads de arquivos, com suporte para uploads múltiplos, visualização de progresso em tempo real e gerenciamento da fila de uploads.
Páginas do Widget
✨ Funcionalidades
  • Arrastar e soltar (Drag and drop) de arquivos
  • Seleção de múltiplos arquivos através do navegador de arquivos
  • Indicadores de progresso em tempo real durante o upload
  • Visualização da fila de arquivos para upload
  • Restrições de tipo de arquivo (PNG e JPG) e tamanho máximo (4MB)
  • Status visual para uploads concluídos e falhos
  • Interface responsiva e adaptável a diferentes tamanhos de tela
  • Design moderno com tema escuro
🛠️ Tecnologias
Frontend
Backend
  • Node.js - Ambiente de execução JavaScript server-side
  • Fastify - Framework web rápido e de baixa sobrecarga
  • TypeScript - Tipagem estática
  • Drizzle ORM - ORM SQL moderno para TypeScript
  • AWS S3 - Armazenamento de objetos na nuvem
  • PostgreSQL - Banco de dados relacional
  • Zod - Validação de esquemas
  • Docker - Containerização da aplicação
🚀 Como Executar
Pré-requisitos
  • Node.js 18+
  • Yarn
  • Docker e Docker Compose (para o backend)
Frontend
# Navegar para o diretório do frontendcd frontend
# Instalar dependências
yarn install
# Iniciar servidor de desenvolvimento
yarn dev
Backend
# Navegar para o diretório do backendcd backend
# Copiar arquivo de variáveis de ambiente
cp .env.example .env
# Iniciar containers Docker
docker-compose up -d
# Instalar dependências
yarn install
# Executar migrações do banco de dados
yarn db:migrate
# Iniciar servidor de desenvolvimento
yarn dev
About
Um componente moderno e elegante para upload de arquivos
Resources
Readme
Activity
Stars
0 stars
Watchers
1 watching
Forks
0 forks
Report repository
Releases
Packages
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Highlight search terms from Google/DuckDuckGo/Bing referrer
(function() {
var ref = document.referrer;
var terms = [];
if (ref.includes('google.com') || ref.includes('duckduckgo.com') || ref.includes('bing.com')) {
var url = new URL(ref);
var q = url.searchParams.get('q') || url.searchParams.get('p');
if (q) {
terms = q.split(/\s+/).filter(function(t) { return t.length > 2; });
}
}
if (terms.length === 0) return;
var style = document.createElement('style');
style.textContent = '.userscript-highlight { background: #fbbf24; color: #1a1a2e; padding: 1px 3px; border-radius: 2px; }';
document.head.appendChild(style);
function highlight(node) {
if (node.nodeType === 3) { // text node
var text = node.textContent;
var found = false;
terms.forEach(function(term) {
var regex = new RegExp('(' + term.replace(/[.*+?^${}()|[\]\\]/g, '\\') + ')', 'gi');
if (regex.test(text)) {
found = true;
var frag = document.createDocumentFragment();
var parts = text.split(regex);
parts.forEach(function(part, i) {
if (i % 2 === 0) {
frag.appendChild(document.createTextNode(part));
} else {
var span = document.createElement('span');
span.className = 'userscript-highlight';
span.textContent = part;
frag.appendChild(span);
}
});
node.parentNode.replaceChild(frag, node);
}
});
} else if (node.nodeType === 1 && node.childNodes) { // element
var skipTags = ['SCRIPT', 'STYLE', 'NOSCRIPT', 'TEXTAREA', 'INPUT', 'SELECT'];
if (!skipTags.includes(node.tagName)) {
Array.from(node.childNodes).forEach(highlight);
}
}
}
highlight(document.body);
// Re-highlight on dynamic content
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(m) {
m.addedNodes.forEach(function(node) {
if (node.nodeType === 1 || node.nodeType === 3) highlight(node);
});
});
});
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:Highlight Search Terms]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '
GitHub - nthnunes/upload-widget: Um componente moderno e elegante para upload de arquivos · GitHub
Skip to content
BranchesTags
Latest commit
History
17 Commits
Folders and files
NameName
Last commit message
Last commit date
backend
backend
frontend
frontend
preview
preview
README.md
README.md
Repository files navigation
Upload Widget
Um componente moderno e elegante para upload de arquivos, projetado para oferecer uma experiência de usuário fluida e responsiva.
Upload Widget
📋 Visão Geral
O Upload Widget é uma solução completa para gerenciamento de uploads de arquivos, com suporte para uploads múltiplos, visualização de progresso em tempo real e gerenciamento da fila de uploads.
Páginas do Widget
✨ Funcionalidades
  • Arrastar e soltar (Drag and drop) de arquivos
  • Seleção de múltiplos arquivos através do navegador de arquivos
  • Indicadores de progresso em tempo real durante o upload
  • Visualização da fila de arquivos para upload
  • Restrições de tipo de arquivo (PNG e JPG) e tamanho máximo (4MB)
  • Status visual para uploads concluídos e falhos
  • Interface responsiva e adaptável a diferentes tamanhos de tela
  • Design moderno com tema escuro
🛠️ Tecnologias
Frontend
Backend
  • Node.js - Ambiente de execução JavaScript server-side
  • Fastify - Framework web rápido e de baixa sobrecarga
  • TypeScript - Tipagem estática
  • Drizzle ORM - ORM SQL moderno para TypeScript
  • AWS S3 - Armazenamento de objetos na nuvem
  • PostgreSQL - Banco de dados relacional
  • Zod - Validação de esquemas
  • Docker - Containerização da aplicação
🚀 Como Executar
Pré-requisitos
  • Node.js 18+
  • Yarn
  • Docker e Docker Compose (para o backend)
Frontend
# Navegar para o diretório do frontendcd frontend
# Instalar dependências
yarn install
# Iniciar servidor de desenvolvimento
yarn dev
Backend
# Navegar para o diretório do backendcd backend
# Copiar arquivo de variáveis de ambiente
cp .env.example .env
# Iniciar containers Docker
docker-compose up -d
# Instalar dependências
yarn install
# Executar migrações do banco de dados
yarn db:migrate
# Iniciar servidor de desenvolvimento
yarn dev
About
Um componente moderno e elegante para upload de arquivos
Resources
Readme
Activity
Stars
0 stars
Watchers
1 watching
Forks
0 forks
Report repository
Releases
Packages
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Strip utm_, fbclid, gclid, etc. from all links on page
(function() {
var trackingParams = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content',
'fbclid', 'gclid', 'dclid', 'msclkid', 'yclid',
'ref', 'ref_src', 'source', 'medium', 'campaign'];
function cleanUrl(url) {
try {
var u = new URL(url, window.location.origin);
var changed = false;
trackingParams.forEach(function(p) {
if (u.searchParams.has(p)) {
u.searchParams.delete(p);
changed = true;
}
});
return changed ? u.toString() : url;
} catch (e) {
return url;
}
}
function cleanLinks() {
document.querySelectorAll('a[href]').forEach(function(a) {
var clean = cleanUrl(a.href);
if (clean !== a.href) a.href = clean;
});
}
cleanLinks();
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(m) {
m.addedNodes.forEach(function(node) {
if (node.nodeType === 1) {
if (node.tagName === 'A') cleanLinks();
node.querySelectorAll('a[href]').forEach(function(a) {
var clean = cleanUrl(a.href);
if (clean !== a.href) a.href = clean;
});
}
});
});
});
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:Remove Tracking Parameters from Links]', __e); }
})();
(function(){
try {
var __m = "youtube.com";
var __re = new RegExp('^' + "youtube\\.com" + '
GitHub - nthnunes/upload-widget: Um componente moderno e elegante para upload de arquivos · GitHub
Skip to content
BranchesTags
Latest commit
History
17 Commits
Folders and files
NameName
Last commit message
Last commit date
backend
backend
frontend
frontend
preview
preview
README.md
README.md
Repository files navigation
Upload Widget
Um componente moderno e elegante para upload de arquivos, projetado para oferecer uma experiência de usuário fluida e responsiva.
Upload Widget
📋 Visão Geral
O Upload Widget é uma solução completa para gerenciamento de uploads de arquivos, com suporte para uploads múltiplos, visualização de progresso em tempo real e gerenciamento da fila de uploads.
Páginas do Widget
✨ Funcionalidades
  • Arrastar e soltar (Drag and drop) de arquivos
  • Seleção de múltiplos arquivos através do navegador de arquivos
  • Indicadores de progresso em tempo real durante o upload
  • Visualização da fila de arquivos para upload
  • Restrições de tipo de arquivo (PNG e JPG) e tamanho máximo (4MB)
  • Status visual para uploads concluídos e falhos
  • Interface responsiva e adaptável a diferentes tamanhos de tela
  • Design moderno com tema escuro
🛠️ Tecnologias
Frontend
Backend
  • Node.js - Ambiente de execução JavaScript server-side
  • Fastify - Framework web rápido e de baixa sobrecarga
  • TypeScript - Tipagem estática
  • Drizzle ORM - ORM SQL moderno para TypeScript
  • AWS S3 - Armazenamento de objetos na nuvem
  • PostgreSQL - Banco de dados relacional
  • Zod - Validação de esquemas
  • Docker - Containerização da aplicação
🚀 Como Executar
Pré-requisitos
  • Node.js 18+
  • Yarn
  • Docker e Docker Compose (para o backend)
Frontend
# Navegar para o diretório do frontendcd frontend
# Instalar dependências
yarn install
# Iniciar servidor de desenvolvimento
yarn dev
Backend
# Navegar para o diretório do backendcd backend
# Copiar arquivo de variáveis de ambiente
cp .env.example .env
# Iniciar containers Docker
docker-compose up -d
# Instalar dependências
yarn install
# Executar migrações do banco de dados
yarn db:migrate
# Iniciar servidor de desenvolvimento
yarn dev
About
Um componente moderno e elegante para upload de arquivos
Resources
Readme
Activity
Stars
0 stars
Watchers
1 watching
Forks
0 forks
Report repository
Releases
Packages
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Auto-enable theater mode on YouTube
(function() {
function tryTheater() {
var btn = document.querySelector('button[aria-label="Theater mode"], ytd-player #player button[title="Theater mode"]');
if (btn && !btn.classList.contains('activated')) {
btn.click();
}
}
// Try immediately
tryTheater();
// Try after navigation (SPA)
var lastUrl = location.href;
setInterval(function() {
if (location.href !== lastUrl) {
lastUrl = location.href;
setTimeout(tryTheater, 500);
}
}, 1000);
// Also try on player load
var observer = new MutationObserver(tryTheater);
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:YouTube Theater Mode Default]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '
GitHub - nthnunes/upload-widget: Um componente moderno e elegante para upload de arquivos · GitHub
Skip to content
BranchesTags
Latest commit
History
17 Commits
Folders and files
NameName
Last commit message
Last commit date
backend
backend
frontend
frontend
preview
preview
README.md
README.md
Repository files navigation
Upload Widget
Um componente moderno e elegante para upload de arquivos, projetado para oferecer uma experiência de usuário fluida e responsiva.
Upload Widget
📋 Visão Geral
O Upload Widget é uma solução completa para gerenciamento de uploads de arquivos, com suporte para uploads múltiplos, visualização de progresso em tempo real e gerenciamento da fila de uploads.
Páginas do Widget
✨ Funcionalidades
  • Arrastar e soltar (Drag and drop) de arquivos
  • Seleção de múltiplos arquivos através do navegador de arquivos
  • Indicadores de progresso em tempo real durante o upload
  • Visualização da fila de arquivos para upload
  • Restrições de tipo de arquivo (PNG e JPG) e tamanho máximo (4MB)
  • Status visual para uploads concluídos e falhos
  • Interface responsiva e adaptável a diferentes tamanhos de tela
  • Design moderno com tema escuro
🛠️ Tecnologias
Frontend
Backend
  • Node.js - Ambiente de execução JavaScript server-side
  • Fastify - Framework web rápido e de baixa sobrecarga
  • TypeScript - Tipagem estática
  • Drizzle ORM - ORM SQL moderno para TypeScript
  • AWS S3 - Armazenamento de objetos na nuvem
  • PostgreSQL - Banco de dados relacional
  • Zod - Validação de esquemas
  • Docker - Containerização da aplicação
🚀 Como Executar
Pré-requisitos
  • Node.js 18+
  • Yarn
  • Docker e Docker Compose (para o backend)
Frontend
# Navegar para o diretório do frontendcd frontend
# Instalar dependências
yarn install
# Iniciar servidor de desenvolvimento
yarn dev
Backend
# Navegar para o diretório do backendcd backend
# Copiar arquivo de variáveis de ambiente
cp .env.example .env
# Iniciar containers Docker
docker-compose up -d
# Instalar dependências
yarn install
# Executar migrações do banco de dados
yarn db:migrate
# Iniciar servidor de desenvolvimento
yarn dev
About
Um componente moderno e elegante para upload de arquivos
Resources
Readme
Activity
Stars
0 stars
Watchers
1 watching
Forks
0 forks
Report repository
Releases
Packages
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Remove or un-stick sticky/fixed headers that block content
(function() {
function unstick() {
document.querySelectorAll('header, nav, [role="banner"], .header, .navbar, .sticky, .fixed-top, [style*="position: fixed"], [style*="position:sticky"]').forEach(function(el) {
if (el.style.position === 'fixed' || el.style.position === 'sticky' || getComputedStyle(el).position === 'fixed' || getComputedStyle(el).position === 'sticky') {
el.style.position = 'static';
el.style.top = 'auto';
el.style.zIndex = 'auto';
}
});
}
unstick();
var observer = new MutationObserver(unstick);
observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['style', 'class'] });
})();
}
} catch(__e) { console.warn('[Userscript:Kill Sticky Headers]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '
GitHub - nthnunes/upload-widget: Um componente moderno e elegante para upload de arquivos · GitHub
Skip to content
BranchesTags
Latest commit
History
17 Commits
Folders and files
NameName
Last commit message
Last commit date
backend
backend
frontend
frontend
preview
preview
README.md
README.md
Repository files navigation
Upload Widget
Um componente moderno e elegante para upload de arquivos, projetado para oferecer uma experiência de usuário fluida e responsiva.
Upload Widget
📋 Visão Geral
O Upload Widget é uma solução completa para gerenciamento de uploads de arquivos, com suporte para uploads múltiplos, visualização de progresso em tempo real e gerenciamento da fila de uploads.
Páginas do Widget
✨ Funcionalidades
  • Arrastar e soltar (Drag and drop) de arquivos
  • Seleção de múltiplos arquivos através do navegador de arquivos
  • Indicadores de progresso em tempo real durante o upload
  • Visualização da fila de arquivos para upload
  • Restrições de tipo de arquivo (PNG e JPG) e tamanho máximo (4MB)
  • Status visual para uploads concluídos e falhos
  • Interface responsiva e adaptável a diferentes tamanhos de tela
  • Design moderno com tema escuro
🛠️ Tecnologias
Frontend
Backend
  • Node.js - Ambiente de execução JavaScript server-side
  • Fastify - Framework web rápido e de baixa sobrecarga
  • TypeScript - Tipagem estática
  • Drizzle ORM - ORM SQL moderno para TypeScript
  • AWS S3 - Armazenamento de objetos na nuvem
  • PostgreSQL - Banco de dados relacional
  • Zod - Validação de esquemas
  • Docker - Containerização da aplicação
🚀 Como Executar
Pré-requisitos
  • Node.js 18+
  • Yarn
  • Docker e Docker Compose (para o backend)
Frontend
# Navegar para o diretório do frontendcd frontend
# Instalar dependências
yarn install
# Iniciar servidor de desenvolvimento
yarn dev
Backend
# Navegar para o diretório do backendcd backend
# Copiar arquivo de variáveis de ambiente
cp .env.example .env
# Iniciar containers Docker
docker-compose up -d
# Instalar dependências
yarn install
# Executar migrações do banco de dados
yarn db:migrate
# Iniciar servidor de desenvolvimento
yarn dev
About
Um componente moderno e elegante para upload de arquivos
Resources
Readme
Activity
Stars
0 stars
Watchers
1 watching
Forks
0 forks
Report repository
Releases
Packages
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Universal Dark Mode - works on any site
(function() {
var enabled = true;
function applyDarkMode() {
if (!enabled) return;
// Create style element if it doesn't exist
var style = document.getElementById('universal-dark-mode-style');
if (!style) {
style = document.createElement('style');
style.id = 'universal-dark-mode-style';
document.head.appendChild(style);
}
// Dark mode CSS - inverts colors but preserves images/video
style.textContent = '
/* Invert everything except media */
html {
filter: invert(1) hue-rotate(180deg) !important;
background: #1a1a2e !important;
}
/* Restore images, videos, iframes, canvas */
img, video, iframe, canvas, svg, picture, [style*="background-image"] {
filter: invert(1) hue-rotate(180deg) !important;
}
/* Preserve specific elements that should not be inverted */
.no-dark-mode, .no-dark-mode *,
[data-theme="light"], [data-theme="light"],
.ace_editor, .ace_editor *,
.CodeMirror, .CodeMirror *,
.monaco-editor, .monaco-editor *,
.markdown-body pre, .markdown-body pre *,
.highlight, .highlight *,
pre code, pre code * {
filter: none !important;
}
/* Fix common UI elements */
.modal, .popup, .dropdown-menu, .tooltip, .popover {
filter: invert(1) hue-rotate(180deg) !important;
background: #2d2d44 !important;
border-color: #444 !important;
}
/* Scrollbars */
::-webkit-scrollbar { background: #1a1a2e !important; }
::-webkit-scrollbar-thumb { background: #444 !important; }
::-webkit-scrollbar-thumb:hover { background: #555 !important; }
/* Selection */
::selection { background: #4ecdc4 !important; color: #1a1a2e !important; }
::-moz-selection { background: #4ecdc4 !important; color: #1a1a2e !important; }
';
}
function removeDarkMode() {
var style = document.getElementById('universal-dark-mode-style');
if (style) style.remove();
}
// Toggle with Alt+Shift+D
document.addEventListener('keydown', function(e) {
if (e.altKey && e.shiftKey && e.key === 'D') {
e.preventDefault();
enabled = !enabled;
if (enabled) {
applyDarkMode();
console.log('[Universal Dark Mode] Enabled');
} else {
removeDarkMode();
console.log('[Universal Dark Mode] Disabled');
}
}
});
// Apply on load
applyDarkMode();
// Re-apply on dynamic content
var observer = new MutationObserver(function(mutations) {
if (enabled && !document.getElementById('universal-dark-mode-style')) {
applyDarkMode();
}
});
observer.observe(document.head, { childList: true });
console.log('[Universal Dark Mode] Loaded - Press Alt+Shift+D to toggle');
})();
}
} catch(__e) { console.warn('[Userscript:Universal Dark Mode]', __e); }
})();
})();
GitHub - nthnunes/upload-widget: Um componente moderno e elegante para upload de arquivos · GitHub
Skip to content
BranchesTags
Latest commit
History
17 Commits
Folders and files
NameName
Last commit message
Last commit date
backend
backend
frontend
frontend
preview
preview
README.md
README.md
Repository files navigation
Upload Widget
Um componente moderno e elegante para upload de arquivos, projetado para oferecer uma experiência de usuário fluida e responsiva.
Upload Widget
📋 Visão Geral
O Upload Widget é uma solução completa para gerenciamento de uploads de arquivos, com suporte para uploads múltiplos, visualização de progresso em tempo real e gerenciamento da fila de uploads.
Páginas do Widget
✨ Funcionalidades
  • Arrastar e soltar (Drag and drop) de arquivos
  • Seleção de múltiplos arquivos através do navegador de arquivos
  • Indicadores de progresso em tempo real durante o upload
  • Visualização da fila de arquivos para upload
  • Restrições de tipo de arquivo (PNG e JPG) e tamanho máximo (4MB)
  • Status visual para uploads concluídos e falhos
  • Interface responsiva e adaptável a diferentes tamanhos de tela
  • Design moderno com tema escuro
🛠️ Tecnologias
Frontend
Backend
  • Node.js - Ambiente de execução JavaScript server-side
  • Fastify - Framework web rápido e de baixa sobrecarga
  • TypeScript - Tipagem estática
  • Drizzle ORM - ORM SQL moderno para TypeScript
  • AWS S3 - Armazenamento de objetos na nuvem
  • PostgreSQL - Banco de dados relacional
  • Zod - Validação de esquemas
  • Docker - Containerização da aplicação
🚀 Como Executar
Pré-requisitos
  • Node.js 18+
  • Yarn
  • Docker e Docker Compose (para o backend)
Frontend
# Navegar para o diretório do frontendcd frontend
# Instalar dependências
yarn install
# Iniciar servidor de desenvolvimento
yarn dev
Backend
# Navegar para o diretório do backendcd backend
# Copiar arquivo de variáveis de ambiente
cp .env.example .env
# Iniciar containers Docker
docker-compose up -d
# Instalar dependências
yarn install
# Executar migrações do banco de dados
yarn db:migrate
# Iniciar servidor de desenvolvimento
yarn dev
About
Um componente moderno e elegante para upload de arquivos
Resources
Readme
Activity
Stars
0 stars
Watchers
1 watching
Forks
0 forks
Report repository
Releases
Packages
Contributors
Languages