krisf/imgur-clone
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Picta rebrand: remove all clone/Imgur UI strings, wire /logo.svg, simplify upload (Share CTA, full-page drag overlay, body-scroll lock), scrollbar elimination (hidden tracks, overflow-x hidden, break-word, modal internal scroll)

Browse Source
This commit is contained in:
krisf
2026-08-22 17:12:06 -04:00
parent 7862ad8e20
commit 911958db69
7 changed files with 142 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/index.html
+15 -8
View File
@@ -3,7 +3,7 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Imgur Clone - Share Your World</title>
<title>Picta — Share Your World</title>
<link rel="stylesheet" href="/css/style.css">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
</head>
@@ -12,8 +12,8 @@
<header class="header">
<div class="header-inner">
<div class="logo" onclick="navigateHome()">
<span class="logo-icon">📷</span>
<span class="logo-text">Imgur Clone</span>
<img src="/logo.svg" class="logo-img" alt="Picta">
<span class="logo-text">Picta</span>
</div>
<div class="search-bar">
<input type="text" id="searchInput" placeholder="Search images..." oninput="filterPosts()">
@@ -57,16 +57,15 @@
<div class="modal-overlay" id="uploadModal">
<div class="modal">
<div class="modal-header">
<h2>Create New Post</h2>
<h2>Share</h2>
<button class="modal-close" onclick="closeUploadModal()" aria-label="Close">✕</button>
</div>
<div class="modal-body">
<div class="upload-zone" id="uploadZone">
<div class="upload-prompt" id="uploadPrompt">
<div class="upload-icon">📁</div>
<p class="upload-main-text">Drag &amp; drop an image here</p>
<p class="upload-hint">or click to browse</p>
<p class="upload-paste-hint">or paste an image with <kbd>Ctrl</kbd>+<kbd>V</kbd></p>
<p class="upload-main-text">Drop an image, click to browse, or paste</p>
<p class="upload-paste-hint"><kbd>Ctrl</kbd>+<kbd>V</kbd> works anywhere</p>
<p class="upload-formats">JPEG, PNG, GIF, WebP (max 20MB)</p>
</div>
<input type="file" id="fileInput" accept="image/jpeg,image/png,image/gif,image/webp" hidden>
@@ -92,7 +91,7 @@
<input type="text" id="postAuthor" placeholder="Anonymous" maxlength="30">
</div>
<div id="uploadError" class="error-message" style="display:none;"></div>
<button class="btn-submit" id="submitBtn" onclick="submitPost()">Upload Post</button>
<button class="btn-submit" id="submitBtn" onclick="submitPost()">Share</button>
</div>
</div>
</div>
@@ -141,6 +140,14 @@
<img id="fullscreenImage" src="" alt="">
</div>
<!-- Full-page Drag Overlay -->
<div class="drag-overlay" id="dragOverlay">
<div class="drag-overlay-inner">
<div class="drag-overlay-icon">📥</div>
<p class="drag-overlay-text">Drop to share</p>
</div>
</div>
<!-- Toast Notifications -->
<div class="toast-container" id="toastContainer"></div>