<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DeepSeek AI Plagiarism Checker</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
:root {
--primary: #3498db;
--secondary: #2c3e50;
--accent: #e74c3c;
--light: #ecf0f1;
--dark: #2c3e50;
--success: #2ecc71;
--warning: #f39c12;
--danger: #e74c3c;
--gray: #95a5a6;
--light-gray: #f8f9fa;
--ai-purple: #9b59b6;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
body {
background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
min-height: 100vh;
padding: 20px;
color: var(--dark);
}
.container {
max-width: 1400px;
margin: 0 auto;
}
header {
background: var(--secondary);
color: white;
padding: 20px;
border-radius: 10px 10px 0 0;
display: flex;
justify-content: space-between;
align-items: center;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.logo {
display: flex;
align-items: center;
gap: 15px;
}
.logo i {
font-size: 32px;
color: var(--primary);
}
.logo h1 {
font-size: 28px;
font-weight: 700;
}
.logo span {
color: var(--ai-purple);
}
nav ul {
display: flex;
list-style: none;
gap: 25px;
}
nav a {
color: var(--light);
text-decoration: none;
font-weight: 500;
transition: color 0.3s;
display: flex;
align-items: center;
gap: 5px;
}
nav a:hover {
color: var(--primary);
}
.user-actions {
display: flex;
gap: 15px;
}
.btn {
padding: 10px 20px;
border-radius: 6px;
cursor: pointer;
font-size: 16px;
font-weight: 600;
transition: all 0.3s;
border: none;
display: flex;
align-items: center;
gap: 8px;
}
.btn-primary {
background: var(--primary);
color: white;
}
.btn-primary:hover {
background: #2980b9;
}
.btn-outline {
background: transparent;
border: 2px solid var(--primary);
color: var(--primary);
}
.btn-outline:hover {
background: var(--primary);
color: white;
}
.btn-success {
background: var(--success);
color: white;
}
.btn-success:hover {
background: #27ae60;
}
.btn-ai {
background: var(--ai-purple);
color: white;
}
.btn-ai:hover {
background: #8e44ad;
}
.main-content {
display: grid;
grid-template-columns: 1fr 1.2fr;
gap: 30px;
margin-top: 30px;
}
.upload-section {
background: white;
padding: 30px;
border-radius: 10px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}
.section-title {
font-size: 24px;
margin-bottom: 20px;
color: var(--secondary);
display: flex;
align-items: center;
gap: 10px;
}
.section-title i {
color: var(--primary);
}
.upload-area {
border: 2px dashed var(--primary);
border-radius: 8px;
padding: 40px 20px;
text-align: center;
margin-bottom: 25px;
transition: all 0.3s;
cursor: pointer;
}
.upload-area:hover {
background: var(--light-gray);
transform: translateY(-5px);
}
.upload-area i {
font-size: 48px;
color: var(--primary);
margin-bottom: 15px;
}
.upload-area h3 {
font-size: 22px;
margin-bottom: 10px;
color: var(--secondary);
}
.upload-area p {
color: var(--gray);
margin-bottom: 15px;
}
.file-info {
background: var(--light-gray);
padding: 15px;
border-radius: 8px;
margin: 20px 0;
display: none;
}
.file-info.active {
display: block;
}
.file-info p {
margin: 5px 0;
display: flex;
justify-content: space-between;
}
.file-info span {
font-weight: 600;
}
.options {
margin: 25px 0;
}
.option-group {
margin: 15px 0;
}
.option-group label {
display: flex;
align-items: center;
gap: 10px;
margin: 10px 0;
cursor: pointer;
}
.option-group input[type="checkbox"] {
width: 18px;
height: 18px;
}
.option-group select {
padding: 10px;
border-radius: 6px;
border: 1px solid #ddd;
width: 100%;
margin-top: 5px;
}
.repository-options {
background: var(--light-gray);
padding: 20px;
border-radius: 8px;
margin: 20px 0;
}
.results-section {
background: white;
padding: 30px;
border-radius: 10px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}
.results-placeholder {
text-align: center;
padding: 40px 20px;
color: var(--gray);
}
.results-placeholder i {
font-size: 64px;
margin-bottom: 20px;
color: #e0e0e0;
}
.results-content {
display: none;
}
.similarity-score {
text-align: center;
margin-bottom: 30px;
padding: 20px;
background: var(--light-gray);
border-radius: 10px;
}
.score {
font-size: 48px;
font-weight: 700;
margin: 15px 0;
}
.score-low {
color: var(--success);
}
.score-medium {
color: var(--warning);
}
.score-high {
color: var(--danger);
}
.progress-bar {
height: 10px;
background: #eee;
border-radius: 5px;
margin: 15px 0;
overflow: hidden;
}
.progress {
height: 100%;
border-radius: 5px;
transition: width 1s ease-in-out;
}
.sources-list {
margin-top: 20px;
max-height: 300px;
overflow-y: auto;
}
.source-item {
padding: 15px;
border-bottom: 1px solid var(--light);
display: flex;
justify-content: space-between;
align-items: center;
}
.source-item:last-child {
border-bottom: none;
}
.source-info {
flex: 1;
}
.source-title {
font-weight: 600;
margin-bottom: 5px;
}
.source-url {
color: var(--primary);
font-size: 14px;
}
.source-similarity {
color: var(--danger);
font-weight: 600;
font-size: 18px;
}
.ai-analysis {
background: linear-gradient(135deg, #f5f7fa 0%, #e8deee 100%);
padding: 20px;
border-radius: 8px;
margin: 20px 0;
border-left: 4px solid var(--ai-purple);
}
.ai-header {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 15px;
color: var(--ai-purple);
}
.features {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
margin-top: 30px;
}
.feature-card {
background: white;
padding: 25px;
border-radius: 10px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
text-align: center;
transition: transform 0.3s;
}
.feature-card:hover {
transform: translateY(-5px);
}
.feature-card i {
font-size: 36px;
color: var(--primary);
margin-bottom: 15px;
}
.feature-card h3 {
font-size: 18px;
margin-bottom: 10px;
color: var(--secondary);
}
.feature-card p {
color: var(--gray);
font-size: 14px;
}
.report-actions {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 15px;
margin-top: 20px;
}
footer {
text-align: center;
margin-top: 50px;
padding: 20px;
color: var(--gray);
background: white;
border-radius: 0 0 10px 10px;
}
.stats {
display: flex;
justify-content: space-around;
margin: 30px 0;
text-align: center;
}
.stat-item {
background: white;
padding: 20px;
border-radius: 10px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
flex: 1;
margin: 0 10px;
}
.stat-number {
font-size: 32px;
font-weight: 700;
color: var(--primary);
margin: 10px 0;
}
.stat-label {
color: var(--gray);
}
@media (max-width: 1100px) {
.main-content {
grid-template-columns: 1fr;
}
.features {
grid-template-columns: 1fr 1fr;
}
}
@media (max-width: 768px) {
header {
flex-direction: column;
gap: 15px;
}
nav ul {
gap: 15px;
flex-wrap: wrap;
justify-content: center;
}
.features {
grid-template-columns: 1fr;
}
.stats {
flex-direction: column;
gap: 15px;
}
.stat-item {
margin: 5px 0;
}
}
.loading {
display: none;
text-align: center;
padding: 30px;
}
.loading i {
font-size: 40px;
color: var(--primary);
margin-bottom: 15px;
animation: spin 1.5s linear infinite;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.tab-container {
margin: 20px 0;
}
.tabs {
display: flex;
border-bottom: 2px solid #eee;
}
.tab {
padding: 12px 20px;
cursor: pointer;
border-bottom: 3px solid transparent;
transition: all 0.3s;
}
.tab.active {
border-bottom: 3px solid var(--primary);
color: var(--primary);
font-weight: 600;
}
.tab-content {
display: none;
padding: 20px 0;
}
.tab-content.active {
display: block;
}
.repository-badge {
display: inline-block;
background: var(--ai-purple);
color: white;
padding: 3px 8px;
border-radius: 4px;
font-size: 12px;
margin-left: 8px;
}
</style>
</head>
<body>
<div class="container">
<header>
<div class="logo">
<i class="fas fa-robot"></i>
<h1>DeepSeek <span>AI Plagiarism Checker</span></h1>
</div>
<nav>
<ul>
<li><a href="#"><i class="fas fa-home"></i> Home</a></li>
<li><a href="#"><i class="fas fa-history"></i> History</a></li>
<li><a href="#"><i class="fas fa-chart-bar"></i> Reports</a></li>
<li><a href="#"><i class="fas fa-database"></i> Repository</a></li>
</ul>
</nav>
<div class="user-actions">
<button class="btn btn-outline"><i class="fas fa-user"></i> Login</button>
<button class="btn btn-primary"><i class="fas fa-user-plus"></i> Register</button>
</div>
</header>
<div class="stats">
<div class="stat-item">
<i class="fas fa-file-alt"></i>
<div class="stat-number">842,869</div>
<div class="stat-label">Documents Checked</div>
</div>
<div class="stat-item">
<i class="fas fa-database"></i>
<div class="stat-number">25M+</div>
<div class="stat-label">Repository Sources</div>
</div>
<div class="stat-item">
<i class="fas fa-robot"></i>
<div class="stat-number">98.7%</div>
<div class="stat-label">AI Accuracy</div>
</div>
</div>
<div class="main-content">
<div class="upload-section">
<h2 class="section-title"><i class="fas fa-file-upload"></i> Check Your Document</h2>
<div class="upload-area" id="uploadArea">
<i class="fas fa-cloud-upload-alt"></i>
<h3>Upload Your Document</h3>
<p>Supported formats: .doc, .docx, .pdf, .txt, .rtf</p>
<p>Max file size: 25MB</p>
<button class="btn btn-primary"><i class="fas fa-upload"></i> Select File</button>
</div>
<div class="file-info" id="fileInfo">
<p>File Name: <span id="fileName">document.pdf</span></p>
<p>File Size: <span id="fileSize">2.4 MB</span></p>
<p>File Type: <span id="fileType">PDF</span></p>
</div>
<div class="options">
<h3 class="section-title"><i class="fas fa-cog"></i> Check Options</h3>
<div class="option-group">
<label>
<input type="checkbox" checked>
Check against web pages
</label>
</div>
<div class="option-group">
<label>
<input type="checkbox" checked>
Check against academic databases
</label>
</div>
<div class="option-group">
<label>
<input type="checkbox" checked id="repoCheck">
Check against repository <span class="repository-badge">AI Powered</span>
</label>
</div>
<div class="option-group">
<label>
<input type="checkbox">
Exclude quotes
</label>
</div>
<div class="option-group">
<label>
<input type="checkbox">
Exclude bibliography
</label>
</div>
<div class="option-group">
<label>Scan Sensitivity:</label>
<select>
<option>Standard</option>
<option>Strict</option>
<option>Relaxed</option>
</select>
</div>
</div>
<div class="repository-options" id="repoOptions">
<h3 class="section-title"><i class="fas fa-database"></i> Repository Options</h3>
<div class="option-group">
<label>Repository Source:</label>
<select>
<option>All Repositories</option>
<option>Academic Papers</option>
<option>Published Books</option>
<option>Web Content</option>
<option>Student Submissions</option>
</select>
</div>
<div class="option-group">
<label>Date Range:</label>
<select>
<option>Any Time</option>
<option>Last 5 Years</option>
<option>Last 3 Years</option>
<option>Last Year</option>
</select>
</div>
</div>
<button class="btn btn-ai" style="width: 100%;" onclick="runCheck()">
<i class="fas fa-robot"></i> Run AI-Powered Check
</button>
</div>
<div class="results-section">
<h2 class="section-title"><i class="fas fa-chart-pie"></i> Similarity Report</h2>
<div class="results-placeholder" id="resultsPlaceholder">
<i class="fas fa-file-alt"></i>
<h3>Results will appear here</h3>
<p>Upload a document and run the check to see the similarity report</p>
</div>
<div class="loading" id="loadingIndicator">
<i class="fas fa-spinner"></i>
<h3>AI Analysis in Progress...</h3>
<p>Scanning against 25M+ repository sources</p>
<div class="progress-bar">
<div class="progress" style="width: 0%; background: var(--ai-purple);" id="aiProgress"></div>
</div>
</div>
<div class="results-content" id="resultsContent">
<div class="similarity-score">
<h3>Overall Similarity Score</h3>
<div class="score score-medium" id="similarityScore">18%</div>
<p>This document's similarity index</p>
<div class="progress-bar">
<div class="progress" style="width: 18%; background: var(--warning);"></div>
</div>
<p>Acceptable: <15% | Caution: 15-25% | High: >25%</p>
</div>
<div class="ai-analysis">
<div class="ai-header">
<i class="fas fa-robot"></i>
<h3>AI Analysis Results</h3>
</div>
<p>Our AI detected potential paraphrasing in 3 sections and recommends checking citations for 2 sources. Writing style appears consistent with academic standards.</p>
<button class="btn btn-ai" style="margin-top: 10px;">
<i class="fas fa-lightbulb"></i> View AI Suggestions
</button>
</div>
<div class="tab-container">
<div class="tabs">
<div class="tab active" onclick="switchTab('sources')">Matching Sources</div>
<div class="tab" onclick="switchTab('full-report')">Full Report</div>
<div class="tab" onclick="switchTab('repository')">Repository Matches</div>
</div>
<div class="tab-content active" id="sources-tab">
<div class="sources-list">
<div class="source-item">
<div class="source-info">
<div class="source-title">Wikipedia: Artificial Intelligence</div>
<div class="source-url">https://en.wikipedia.org/wiki/Artificial_intelligence</div>
</div>
<div class="source-similarity">12%</div>
</div>
<div class="source-item">
<div class="source-info">
<div class="source-title">ResearchGate: Machine Learning Paper (2020)</div>
<div class="source-url">https://www.researchgate.net/publication/123456789</div>
</div>
<div class="source-similarity">4%</div>
</div>
<div class="source-item">
<div class="source-info">
<div class="source-title">Stanford University: CS229 Lecture Notes</div>
<div class="source-url">https://stanford.edu/cs229/notes</div>
</div>
<div class="source-similarity">2%</div>
</div>
</div>
</div>
<div class="tab-content" id="full-report-tab">
<p>Detailed analysis showing highlighted sections and their original sources.</p>
<div style="margin: 20px 0;">
<button class="btn btn-primary"><i class="fas fa-download"></i> Download PDF Report</button>
</div>
</div>
<div class="tab-content" id="repository-tab">
<p>The following matches were found in our repository database:</p>
<div class="sources-list">
<div class="source-item">
<div class="source-info">
<div class="source-title">Academic Paper: "Neural Networks in NLP" (2021) <span class="repository-badge">Repository</span></div>
<div class="source-url">Journal of AI Research, Vol. 15, Issue 2</div>
</div>
<div class="source-similarity">7%</div>
</div>
<div class="source-item">
<div class="source-info">
<div class="source-title">Thesis: "Deep Learning Approaches" (2022) <span class="repository-badge">Repository</span></div>
<div class="source-url">MIT Library Database</div>
</div>
<div class="source-similarity">3%</div>
</div>
</div>
</div>
</div>
<div class="report-actions">
<button class="btn btn-outline">
<i class="fas fa-download"></i> Download Report
</button>
<button class="btn btn-primary">
<i class="fas fa-share-alt"></i> Share Results
</button>
</div>
</div>
</div>
</div>
<div class="features">
<div class="feature-card">
<i class="fas fa-robot"></i>
<h3>AI-Powered Analysis</h3>
<p>Advanced algorithms detect paraphrasing and writing style inconsistencies</p>
</div>
<div class="feature-card">
<i class="fas fa-database"></i>
<h3>Repository Scanning</h3>
<p>Check against 25M+ academic papers, books, and online sources</p>
</div>
<div class="feature-card">
<i class="fas fa-lock"></i>
<h3>Secure & Private</h3>
<p>Your documents are never stored or shared with third parties</p>
</div>
</div>
<footer>
<p>© 2023 DeepSeek AI Plagiarism Checker. This is a demo interface for educational purposes.</p>
<p>Note: This is a frontend demonstration and does not actually check for plagiarism.</p>
</footer>
</div>
<script>
// Show repository options when repo check is selected
document.getElementById('repoCheck').addEventListener('change', function() {
document.getElementById('repoOptions').style.display = this.checked ? 'block' : 'none';
});
// Initialize - hide repo options by default
document.getElementById('repoOptions').style.display = 'none';
function runCheck() {
// Show loading state
document.getElementById('resultsPlaceholder').style.display = 'none';
document.getElementById('loadingIndicator').style.display = 'block';
document.getElementById('resultsContent').style.display = 'none';
// Simulate AI progress
let progress = 0;
const progressInterval = setInterval(() => {
progress += Math.random() * 10;
if (progress >= 100) {
progress = 100;
clearInterval(progressInterval);
// Show results after progress completes
setTimeout(() => {
document.getElementById('loadingIndicator').style.display = 'none';
document.getElementById('resultsContent').style.display = 'block';
// Generate a random similarity score for demo purposes
const score = Math.floor(Math.random() * 50) + 5;
document.getElementById('similarityScore').textContent = score + '%';
// Change color based on score
if (score < 15) {
document.getElementById('similarityScore').className = 'score score-low';
document.querySelector('.progress').style.background = 'var(--success)';
} else if (score < 30) {
document.getElementById('similarityScore').className = 'score score-medium';
document.querySelector('.progress').style.background = 'var(--warning)';
} else {
document.getElementById('similarityScore').className = 'score score-high';
document.querySelector('.progress').style.background = 'var(--danger)';
}
// Update progress bar width
document.querySelector('.progress').style.width = score + '%';
}, 500);
}
document.getElementById('aiProgress').style.width = progress + '%';
}, 200);
}
function switchTab(tabName) {
// Hide all tab contents
document.querySelectorAll('.tab-content').forEach(tab => {
tab.classList.remove('active');
});
// Deactivate all tabs
document.querySelectorAll('.tab').forEach(tab => {
tab.classList.remove('active');
});
// Activate selected tab
document.getElementById(tabName + '-tab').classList.add('active');
// Activate tab button
document.querySelectorAll('.tab').forEach(tab => {
if (tab.textContent.toLowerCase().includes(tabName)) {
tab.classList.add('active');
}
});
}
// Add event listener to upload area
document.getElementById('uploadArea').addEventListener('click', function() {
document.getElementById('fileInfo').classList.add('active');
});
</script>
</body>
</html>