RidgwaySystems/rs_website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add hire/resume pages, contact form, security middleware, and admin improvements

Browse Source
This commit is contained in:
Blake Ridgway
2026-03-08 21:36:47 -05:00
parent c916186d78
commit 261745a5b7
22 changed files with 1237 additions and 72 deletions
Download Patch File Download Diff File Expand all files Collapse all files

413
static/css/style.css
View File

@@ -619,6 +619,29 @@ blockquote {
/* === About / Prose === */
.about-header {
display: flex;
align-items: center;
gap: 1.5rem;
margin-bottom: 2rem;
padding-bottom: 1.5rem;
border-bottom: 1px solid var(--border);
}
.about-avatar {
width: 72px;
height: 72px;
border-radius: 6px;
flex-shrink: 0;
border: 1px solid var(--border);
}
.about-header h1 { margin: 0; }
@media (max-width: 480px) {
.about-avatar { width: 52px; height: 52px; }
}
.prose {
max-width: 640px;
line-height: 1.75;
@@ -915,6 +938,396 @@ blockquote {
font-family: var(--font-mono);
}
/* === Post Nav (prev/next) === */
.post-nav {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
font-size: 0.88rem;
font-family: var(--font-mono);
}
.post-nav-prev,
.post-nav-next { flex: 1; }
.post-nav-next { text-align: right; }
.post-nav-all {
color: var(--text-muted);
white-space: nowrap;
}
/* === Error Page === */
.error-page {
text-align: center;
padding: 4rem 1rem;
}
.error-code {
font-family: var(--font-mono);
font-size: 4rem;
font-weight: 700;
color: var(--accent);
line-height: 1;
margin-bottom: 0.25em;
}
.error-page h1 { margin-top: 0; }
.error-page p { color: var(--text-muted); }
.error-page .btn { margin: 0.3rem; }
/* === Upload Browser === */
.upload-browser {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: 1rem;
margin-top: 1rem;
}
.upload-item {
background: var(--bg-alt);
border: 1px solid var(--border);
border-radius: var(--radius);
overflow: hidden;
}
.upload-thumb {
width: 100%;
height: 140px;
object-fit: cover;
display: block;
background: var(--bg-code);
}
.upload-info {
padding: 0.6rem 0.75rem;
display: flex;
flex-direction: column;
gap: 0.3rem;
}
.upload-name,
.upload-md {
font-size: 0.75rem;
word-break: break-all;
color: var(--text-muted);
user-select: all;
}
/* === Hire Page === */
.nav-hire { color: var(--accent) !important; }
.nav-hire:hover { color: var(--accent-dim) !important; }
.hire-page { max-width: var(--max-w); }
.hire-intro {
margin-bottom: 2.5rem;
padding-bottom: 1.5rem;
border-bottom: 1px solid var(--border);
}
.hire-intro h1 { margin-bottom: 0.3em; }
.hire-tagline {
font-size: 1.05rem;
color: var(--text-muted);
font-style: italic;
margin: 0 0 1em;
}
.services-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(195px, 1fr));
gap: 0.85rem;
margin: 1.25rem 0 2.5rem;
}
.service-card {
background: var(--bg-alt);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 0.9rem 1rem;
}
.service-card h3 {
font-family: var(--font-mono);
font-size: 0.88rem;
margin: 0 0 0.4em;
color: var(--accent);
font-weight: 600;
}
.service-card p {
font-size: 0.84rem;
color: var(--text-muted);
margin: 0;
line-height: 1.5;
}
.hire-availability {
background: var(--bg-alt);
border: 1px solid var(--border);
border-left: 3px solid var(--accent);
border-radius: var(--radius);
padding: 0.8rem 1rem;
font-size: 0.9rem;
margin-bottom: 2.5rem;
color: var(--text-muted);
}
.hire-availability strong {
font-family: var(--font-mono);
color: var(--accent);
}
.contact-section h2 { margin-bottom: 0.4em; }
.contact-form {
display: flex;
flex-direction: column;
gap: 1rem;
max-width: 540px;
}
.form-group {
display: flex;
flex-direction: column;
gap: 0.35rem;
}
.form-group label {
font-size: 0.85rem;
font-weight: 600;
color: var(--text-muted);
}
.form-group input,
.form-group textarea {
padding: 0.5em 0.75em;
background: var(--bg);
border: 1px solid var(--border-dark);
border-radius: var(--radius);
color: var(--text);
font-size: 0.95rem;
font-family: var(--font-sans);
line-height: 1.5;
}
.form-group input:focus,
.form-group textarea:focus {
outline: 2px solid var(--accent);
outline-offset: 1px;
border-color: var(--accent);
}
.form-group textarea {
min-height: 140px;
resize: vertical;
line-height: 1.65;
}
.field-note {
font-size: 0.78rem;
color: var(--text-muted);
font-family: var(--font-mono);
font-weight: 400;
}
.required-mark { color: var(--accent); }
.form-success {
background: #efe;
border: 1px solid #9d9;
border-radius: var(--radius);
padding: 0.9rem 1.1rem;
color: #2a7a2a;
margin-bottom: 1rem;
font-size: 0.95rem;
}
@media (prefers-color-scheme: dark) {
.form-success { background: #1a3020; border-color: #2a6a3a; color: #6db88a; }
}
/* === Resume Page === */
.resume-page { max-width: var(--max-w); }
.resume-actions {
display: flex;
align-items: center;
gap: 0.75rem;
margin-bottom: 2rem;
flex-wrap: wrap;
}
.resume-print-hint {
font-size: 0.8rem;
color: var(--text-muted);
font-family: var(--font-mono);
}
.resume-print-hint kbd {
font-family: var(--font-mono);
font-size: 0.78em;
background: var(--bg-alt);
border: 1px solid var(--border-dark);
border-radius: 3px;
padding: 0.1em 0.35em;
}
.resume-header {
margin-bottom: 2rem;
padding-bottom: 1.25rem;
border-bottom: 2px solid var(--border-dark);
}
.resume-header h1 { font-size: 2rem; margin-bottom: 0.1em; }
.resume-tagline {
font-size: 0.95rem;
color: var(--text-muted);
margin: 0 0 0.75em;
}
.resume-contact {
display: flex;
flex-wrap: wrap;
gap: 0.35rem 1.25rem;
font-size: 0.82rem;
font-family: var(--font-mono);
color: var(--text-muted);
}
.resume-contact a { color: var(--text-muted); }
.resume-contact a:hover { color: var(--accent); }
.resume-section { margin-bottom: 2rem; }
.resume-section > p { font-size: 0.9rem; line-height: 1.7; }
.resume-section h2 {
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--text-muted);
border-bottom: 1px solid var(--border);
padding-bottom: 0.3em;
margin: 0 0 1.25rem;
font-family: var(--font-mono);
font-weight: 600;
}
.resume-job { margin-bottom: 1.4rem; }
.resume-job:last-child { margin-bottom: 0; }
.resume-job-header {
display: flex;
justify-content: space-between;
align-items: baseline;
flex-wrap: wrap;
gap: 0.15rem 1rem;
margin-bottom: 0.1em;
}
.resume-role { font-weight: 700; font-size: 0.97rem; }
.resume-dates {
font-family: var(--font-mono);
font-size: 0.78rem;
color: var(--text-muted);
white-space: nowrap;
}
.resume-org {
font-size: 0.88rem;
margin-bottom: 0.45em;
}
.resume-company { font-weight: 600; color: var(--accent); }
.resume-location {
color: var(--text-muted);
font-family: var(--font-mono);
font-size: 0.82rem;
}
.resume-job ul {
margin: 0;
padding-left: 1.2em;
}
.resume-job li {
font-size: 0.87rem;
margin-bottom: 0.3em;
line-height: 1.55;
}
.resume-cert-list {
display: flex;
flex-wrap: wrap;
gap: 0.4rem;
padding: 0;
list-style: none;
margin: 0;
}
.resume-cert {
font-family: var(--font-mono);
font-size: 0.78rem;
background: var(--bg-alt);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 0.2em 0.65em;
color: var(--text-muted);
}
.resume-skills dl {
display: grid;
grid-template-columns: 6rem 1fr;
gap: 0.5em 1em;
font-size: 0.87rem;
margin: 0;
}
.resume-skills dt {
font-weight: 600;
color: var(--text);
line-height: 1.55;
}
.resume-skills dd {
margin: 0;
color: var(--text-muted);
line-height: 1.55;
}
@media (max-width: 500px) {
.resume-skills dl { grid-template-columns: 1fr; gap: 0.15em; }
.resume-skills dt { margin-top: 0.5em; }
}
@media print {
.site-header,
.site-footer,
.resume-actions { display: none !important; }
body { background: #fff !important; color: #000 !important; }
.main-content { max-width: 100%; padding: 0.5cm 1cm; }
a { color: #000 !important; }
.resume-header { border-bottom-color: #999 !important; }
.resume-section h2 { border-bottom-color: #ccc !important; color: #555 !important; }
.resume-company { color: #000 !important; }
.resume-cert { background: #f5f5f5 !important; border-color: #ccc !important; }
.resume-skills dt { color: #000 !important; }
.resume-skills dd { color: #333 !important; }
}
/* === Responsive === */
@media (max-width: 600px) {

14
static/favicon.svg Normal file
View File

@@ -0,0 +1,14 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
<rect width="32" height="32" rx="5" fill="#1a1918"/>
<polyline
points="7,10 18,16 7,22"
fill="none"
stroke="#e8870a"
stroke-width="3.5"
stroke-linecap="round"
stroke-linejoin="round"/>
<line x1="20" y1="22" x2="27" y2="22"
stroke="#e8870a"
stroke-width="3.5"
stroke-linecap="round"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 394 B

24
static/img/avatar.svg Normal file
View File

@@ -0,0 +1,24 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<!-- Background -->
<rect width="512" height="512" fill="#1a1918"/>
<!-- Subtle inner border / frame -->
<rect x="1" y="1" width="510" height="510" fill="none" stroke="#2e2c2a" stroke-width="2"/>
<!-- > chevron -->
<polyline
points="128,172 284,256 128,340"
fill="none"
stroke="#e8870a"
stroke-width="36"
stroke-linecap="round"
stroke-linejoin="round"/>
<!-- _ cursor -->
<line
x1="308" y1="340"
x2="424" y2="340"
stroke="#e8870a"
stroke-width="36"
stroke-linecap="round"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 607 B

190
static/img/wallpaper.svg Normal file
View File

@@ -0,0 +1,190 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1920 1080" shape-rendering="geometricPrecision">
<defs>
<!-- Dot grid -->
<pattern id="dots" width="48" height="48" patternUnits="userSpaceOnUse">
<circle cx="24" cy="24" r="1.1" fill="#c86800" opacity="0.14"/>
</pattern>
<!-- Scan lines -->
<pattern id="scanlines" width="1" height="4" patternUnits="userSpaceOnUse">
<rect width="1" height="2" fill="#000" opacity="1"/>
</pattern>
<!-- Glow for the >_ mark -->
<filter id="glow" x="-40%" y="-40%" width="180%" height="180%">
<feGaussianBlur stdDeviation="16" result="blur1"/>
<feGaussianBlur stdDeviation="5" result="blur2"/>
<feMerge>
<feMergeNode in="blur1"/>
<feMergeNode in="blur1"/>
<feMergeNode in="blur2"/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
<!-- Soft radial glow behind the mark -->
<radialGradient id="centerGlow" cx="50%" cy="50%" r="50%">
<stop offset="0%" stop-color="#e8870a" stop-opacity="0.07"/>
<stop offset="100%" stop-color="#e8870a" stop-opacity="0"/>
</radialGradient>
<!-- Vignette -->
<radialGradient id="vignette" cx="50%" cy="50%" r="72%">
<stop offset="0%" stop-color="#000" stop-opacity="0"/>
<stop offset="100%" stop-color="#000" stop-opacity="0.6"/>
</radialGradient>
</defs>
<!-- ============================================================
1. Background layers
============================================================ -->
<rect width="1920" height="1080" fill="#1a1918"/>
<rect width="1920" height="1080" fill="url(#dots)"/>
<rect width="1920" height="1080" fill="url(#scanlines)" opacity="0.035"/>
<!-- ============================================================
2. Corner text blocks — actual homelab / OpenBSD content
All at low opacity so they read as ambient context,
not competing with the central mark.
============================================================ -->
<!-- === TOP-LEFT: pf.conf (fw01) === -->
<g font-family="'Courier New', Courier, monospace" font-size="13" fill="#8a8075">
<!-- heading -->
<text x="80" y="96" opacity="0.55" fill="#b87838"># /etc/pf.conf -- fw01 (SuperMicro 1U)</text>
<text x="80" y="118" opacity="0.38">ext_if = "em0"</text>
<text x="80" y="136" opacity="0.38">vlan10 = "vlan10" <tspan opacity="0.6" fill="#5a5450"># servers</tspan></text>
<text x="80" y="154" opacity="0.38">vlan20 = "vlan20" <tspan opacity="0.6" fill="#5a5450"># desktop</tspan></text>
<text x="80" y="172" opacity="0.38">vlan30 = "vlan30" <tspan opacity="0.6" fill="#5a5450"># game</tspan></text>
<text x="80" y="190" opacity="0.38">vlan40 = "vlan40" <tspan opacity="0.6" fill="#5a5450"># iot/guest</tspan></text>
<text x="80" y="216" opacity="0.28" fill="#5a5450">set block-policy drop</text>
<text x="80" y="234" opacity="0.28" fill="#5a5450">set skip on lo</text>
<text x="80" y="252" opacity="0.28" fill="#5a5450">block all</text>
<text x="80" y="270" opacity="0.28" fill="#5a5450">antispoof for $ext_if inet</text>
<text x="80" y="296" opacity="0.38">pass in on $ext_if proto tcp \</text>
<text x="80" y="314" opacity="0.38"> to port { 22 80 443 } keep state</text>
<text x="80" y="332" opacity="0.38">pass out on $ext_if all keep state</text>
<text x="80" y="356" opacity="0.28" fill="#5a5450">pass in on $vlan10 all keep state</text>
<text x="80" y="374" opacity="0.28" fill="#5a5450">pass in on $vlan20 to $vlan10</text>
<text x="80" y="392" opacity="0.28" fill="#5a5450">block in on $vlan40 to 10.0.0.0/8</text>
</g>
<!-- === TOP-RIGHT: network topology === -->
<g font-family="'Courier New', Courier, monospace" font-size="13" fill="#8a8075" text-anchor="end">
<text x="1840" y="96" opacity="0.55" fill="#b87838"># ridgwaysystems.org -- network</text>
<text x="1840" y="118" opacity="0.38"> internet</text>
<text x="1840" y="136" opacity="0.28" fill="#5a5450"> |</text>
<text x="1840" y="154" opacity="0.42"> fw01 10.0.1.1 OpenBSD</text>
<text x="1840" y="172" opacity="0.32" fill="#5a5450"> pf relayd unbound wireguard</text>
<text x="1840" y="190" opacity="0.28" fill="#5a5450"> |</text>
<text x="1840" y="216" opacity="0.38">+-- vlan10 10.0.10.0/24 servers</text>
<text x="1840" y="234" opacity="0.28" fill="#5a5450">| srv01 R720 httpd gitea mail</text>
<text x="1840" y="252" opacity="0.28" fill="#5a5450">| srv02 R710 dns vmm backup</text>
<text x="1840" y="270" opacity="0.38">+-- vlan20 10.0.20.0/24 desktop</text>
<text x="1840" y="288" opacity="0.28" fill="#5a5450">| ws01 ansible control node</text>
<text x="1840" y="306" opacity="0.38">+-- vlan30 10.0.30.0/24 game</text>
<text x="1840" y="324" opacity="0.28" fill="#5a5450">| linux VMs via vmm(4)</text>
<text x="1840" y="342" opacity="0.38">+-- vlan40 10.0.40.0/24 iot/guest</text>
<text x="1840" y="360" opacity="0.28" fill="#5a5450"> block to 10.0.0.0/8</text>
</g>
<!-- === BOTTOM-LEFT: service status === -->
<g font-family="'Courier New', Courier, monospace" font-size="13" fill="#8a8075">
<text x="80" y="700" opacity="0.55" fill="#b87838">$ rcctl status</text>
<text x="80" y="722" opacity="0.38">httpd <tspan fill="#4a8a4a" opacity="0.9">active</tspan> srv01 :80 :443</text>
<text x="80" y="740" opacity="0.38">relayd <tspan fill="#4a8a4a" opacity="0.9">active</tspan> fw01 :80 :443</text>
<text x="80" y="758" opacity="0.38">unbound <tspan fill="#4a8a4a" opacity="0.9">active</tspan> fw01 :53</text>
<text x="80" y="776" opacity="0.38">nsd <tspan fill="#4a8a4a" opacity="0.9">active</tspan> srv02 :53</text>
<text x="80" y="794" opacity="0.38">smtpd <tspan fill="#4a8a4a" opacity="0.9">active</tspan> srv01 :25 :465</text>
<text x="80" y="812" opacity="0.38">gitea <tspan fill="#4a8a4a" opacity="0.9">active</tspan> srv01 :3000</text>
<text x="80" y="830" opacity="0.38">prometheus <tspan fill="#4a8a4a" opacity="0.9">active</tspan> srv01 :9090</text>
<text x="80" y="848" opacity="0.38">grafana <tspan fill="#4a8a4a" opacity="0.9">active</tspan> srv01 :3001</text>
<text x="80" y="866" opacity="0.38">wireguard <tspan fill="#4a8a4a" opacity="0.9">active</tspan> fw01 :51820</text>
<text x="80" y="884" opacity="0.38">matrix <tspan fill="#c8a020" opacity="0.9">degraded</tspan> srv01 :8448</text>
<text x="80" y="902" opacity="0.38">jellyfin <tspan fill="#4a8a4a" opacity="0.9">active</tspan> srv02 :8096</text>
<text x="80" y="920" opacity="0.28" fill="#5a5450">game-srv stopped srv02</text>
</g>
<!-- === BOTTOM-RIGHT: hardware inventory === -->
<g font-family="'Courier New', Courier, monospace" font-size="13" fill="#8a8075" text-anchor="end">
<text x="1840" y="700" opacity="0.55" fill="#b87838"># hardware inventory</text>
<text x="1840" y="722" opacity="0.42">fw01 SuperMicro 1U OpenBSD 7.6</text>
<text x="1840" y="740" opacity="0.28" fill="#5a5450"> Xeon E3-1230v2 / 16 GB ECC</text>
<text x="1840" y="758" opacity="0.28" fill="#5a5450"> pf · relayd · wireguard</text>
<text x="1840" y="782" opacity="0.42">srv01 Dell R720 OpenBSD 7.6</text>
<text x="1840" y="800" opacity="0.28" fill="#5a5450"> 2x Xeon E5-2600 / 64 GB ECC</text>
<text x="1840" y="818" opacity="0.28" fill="#5a5450"> httpd · gitea · smtpd · matrix</text>
<text x="1840" y="842" opacity="0.42">srv02 Dell R710 OpenBSD 7.6</text>
<text x="1840" y="860" opacity="0.28" fill="#5a5450"> Xeon X5650 / 48 GB ECC</text>
<text x="1840" y="878" opacity="0.28" fill="#5a5450"> nsd · vmm · jellyfin</text>
<text x="1840" y="902" opacity="0.42">ws01 desktop Linux</text>
<text x="1840" y="920" opacity="0.28" fill="#5a5450"> Ryzen / 32 GB ansible</text>
</g>
<!-- ============================================================
3. Center focal area
============================================================ -->
<!-- Soft radial glow behind the mark -->
<ellipse cx="960" cy="530" rx="540" ry="340" fill="url(#centerGlow)"/>
<!-- "OpenBSD" label above the mark -->
<text
x="960" y="368"
text-anchor="middle"
font-family="'Courier New', Courier, monospace"
font-size="15"
letter-spacing="10"
fill="#b87838"
opacity="0.55">OPENBSD HOMELAB</text>
<!-- >_ mark, centered: x span 740–1180, y span 390–692 -->
<g filter="url(#glow)">
<polyline
points="740,390 940,540 740,690"
fill="none"
stroke="#e8870a"
stroke-width="26"
stroke-linecap="round"
stroke-linejoin="round"/>
<line
x1="980" y1="690"
x2="1180" y2="690"
stroke="#e8870a"
stroke-width="26"
stroke-linecap="round"/>
</g>
<!-- Site name below the mark -->
<text
x="960" y="795"
text-anchor="middle"
font-family="'Courier New', Courier, monospace"
font-size="22"
letter-spacing="6"
fill="#5a5450"
opacity="0.8">ridgwaysystems.org</text>
<!-- ============================================================
4. Finishing
============================================================ -->
<!-- Corner bracket marks (brighter now) -->
<polyline points="52,84 52,52 84,52"
fill="none" stroke="#3a3836" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<polyline points="1836,52 1868,52 1868,84"
fill="none" stroke="#3a3836" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<polyline points="52,996 52,1028 84,1028"
fill="none" stroke="#3a3836" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<polyline points="1836,1028 1868,1028 1868,996"
fill="none" stroke="#3a3836" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<!-- Thin horizontal separator lines flanking the center mark -->
<line x1="80" y1="540" x2="640" y2="540"
stroke="#2e2c2a" stroke-width="1" opacity="0.6"/>
<line x1="1280" y1="540" x2="1840" y2="540"
stroke="#2e2c2a" stroke-width="1" opacity="0.6"/>
<!-- Vignette overlay -->
<rect width="1920" height="1080" fill="url(#vignette)"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 10 KiB

55
static/js/editor.js Normal file
View File

@@ -0,0 +1,55 @@
(function() {
var previewBtn = document.getElementById('preview-btn');
var uploadBtn = document.getElementById('upload-btn');
var imgFile = document.getElementById('img-file');
var textarea = document.getElementById('content');
var output = document.getElementById('preview-output');
var uploadStatus = document.getElementById('upload-status');
if (!textarea) return;
// --- Preview ---
function refreshPreview() {
var fd = new FormData();
fd.append('content', textarea.value);
fetch('/admin/preview', { method: 'POST', body: fd })
.then(function(r) { return r.text(); })
.then(function(html) { output.innerHTML = html; })
.catch(function() { output.innerHTML = '<p class="form-error">Preview failed.</p>'; });
}
if (previewBtn) previewBtn.addEventListener('click', refreshPreview);
if (textarea.value.trim()) { refreshPreview(); }
// --- Image upload ---
if (uploadBtn) uploadBtn.addEventListener('click', function() { imgFile.click(); });
if (imgFile) imgFile.addEventListener('change', function() {
if (!this.files.length) return;
var file = this.files[0];
var fd = new FormData();
fd.append('image', file);
uploadStatus.textContent = 'Uploading\u2026';
uploadBtn.disabled = true;
fetch('/admin/upload', { method: 'POST', body: fd })
.then(function(r) { return r.json(); })
.then(function(data) {
if (data.error) {
uploadStatus.textContent = 'Error: ' + data.error;
return;
}
var pos = textarea.selectionStart;
var before = textarea.value.substring(0, pos);
var after = textarea.value.substring(textarea.selectionEnd);
textarea.value = before + data.markdown + after;
textarea.selectionStart = textarea.selectionEnd = pos + data.markdown.length;
textarea.focus();
uploadStatus.textContent = 'Inserted: ' + data.url;
setTimeout(function() { uploadStatus.textContent = ''; }, 3000);
})
.catch(function() { uploadStatus.textContent = 'Upload failed.'; })
.finally(function() { uploadBtn.disabled = false; imgFile.value = ''; });
});
})();