Skip to content

Build a solution to detect duplicate pirated images(using MERN stack) #7

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
anoop2000 wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Build a solution to detect duplicate pirated images(using MERN stack) #7

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
The table of contents is too big for display.
Diff view
Diff view
  •  
  •  
  •  
The diff you're trying to view is too large. We only load the first 3000 changed files.
2 changes: 2 additions & 0 deletions .env
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
MONGODB_URI=mongodb://localhost:27017/image-comparison
PORT=3000
289 changes: 289 additions & 0 deletions Challenge_1/detect-duplicate.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,289 @@

/* Container and layout */
.container {
max-width: 1200px;
margin: 0 auto;
padding: 2rem;
}

.upload-box {
background: white;
border-radius: 12px;
padding: 2rem;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.title {
text-align: center;
color: #333;
margin-bottom: 2rem;
}

.section {
margin-bottom: 2rem;
padding: 1.5rem;
border: 2px dashed #e2e8f0;
border-radius: 8px;
}

.section h3 {
color: #4a5568;
margin-bottom: 1rem;
}

/* File input area */
.file-label {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 2rem;
cursor: pointer;
transition: all 0.3s ease;
}

.file-label:hover {
background: #f7fafc;
}

.hidden-input {
display: none;
}

.preview-image {
max-width: 100%;
max-height: 300px;
object-fit: contain;
border-radius: 8px;
}

.icon {
width: 48px;
height: 48px;
color: #718096;
margin-bottom: 1rem;
}

.icon-small {
width: 24px;
height: 24px;
margin-right: 0.5rem;
}

.label-text {
color: #718096;
font-size: 1.1rem;
}

.results-section {
margin-top: 2rem;
}

.results-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 20px;
margin-top: 20px;
}

.result-card {
background: white;
border-radius: 12px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
overflow: hidden;
transition: transform 0.2s;
}

.result-card:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.result-image {
width: 100%;
height: 200px;
object-fit: cover;
}

.result-info {
padding: 1rem;
}

.result-info p {
margin: 0.5rem 0;
color: #4a5568;
}

.status {
display: flex;
align-items: center;
margin-top: 0.5rem;
}

.success {
color: #48bb78;
}

.error {
color: #e53e3e;
}

/* Upload button */
.upload-button {
display: flex;
align-items: center;
justify-content: center;
background: #4299e1;
color: white;
padding: 0.75rem 1.5rem;
border-radius: 6px;
border: none;
cursor: pointer;
transition: background 0.3s ease;
margin-top: 1rem;
}

.upload-button:hover {
background: #3182ce;
}

.upload-button:disabled {
background: #cbd5e0;
cursor: not-allowed;
}

.error-message {
display: flex;
align-items: center;
background-color: #fff5f5;
color: #c53030;
padding: 1rem;
border-radius: 8px;
margin-bottom: 1rem;
border: 1px solid #fed7d7;
}

.error-message .icon-small {
margin-right: 0.5rem;
}

/* Original Image Preview Styles */
.original-image-container {
display: flex;
justify-content: center;
margin: 1rem 0;
}

.thumbnail-container {
position: relative;
width: 150px;
height: 150px;
cursor: pointer;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
transition: transform 0.3s ease;
}

.thumbnail-container:hover {
transform: scale(1.05);
}

.thumbnail-image {
width: 100%;
height: 100%;
object-fit: cover;
}

.thumbnail-overlay {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.7);
color: white;
padding: 0.5rem;
text-align: center;
font-size: 0.9rem;
opacity: 0;
transition: opacity 0.3s ease;
}

.thumbnail-container:hover .thumbnail-overlay {
opacity: 1;
}

/* Preview Modal Styles */
.preview-modal {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.8);
display: flex;
justify-content: center;
align-items: center;
z-index: 1000;
}

.preview-content {
position: relative;
max-width: 90%;
max-height: 90vh;
background: white;
padding: 1rem;
border-radius: 8px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.close-button {
position: absolute;
top: 0.5rem;
right: 0.5rem;
background: none;
border: none;
color: #4a5568;
cursor: pointer;
padding: 0.5rem;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
transition: background-color 0.3s ease;
}

.close-button:hover {
background-color: #e83b0b;
}

.preview-full-image {
max-width: 100%;
max-height: 80vh;
object-fit: contain;
border-radius: 4px;
}

.image-name {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.7);
color: white;
padding: 4px 8px;
font-size: 12px;
text-align: center;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}

.comparison-image {
position: relative;
width: 100%;
height: 200px;
overflow: hidden;
border-radius: 8px;
}

Loading