|
|
<!DOCTYPE html>
|
|
|
<html lang="en">
|
|
|
<head>
|
|
|
<meta charset="UTF-8" />
|
|
|
<title>Dashboard – TrueWrite Scan</title>
|
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
|
</head>
|
|
|
<body class="bg-slate-950 text-white min-h-screen flex flex-col">
|
|
|
|
|
|
<header class="border-b border-slate-800 bg-slate-950/90 backdrop-blur sticky top-0 z-20">
|
|
|
<div class="max-w-6xl mx-auto px-4 py-3 flex items-center justify-between">
|
|
|
|
|
|
<div class="flex items-center gap-3">
|
|
|
<img src="logo.png" alt="TrueWrite Scan logo"
|
|
|
class="w-10 h-10 rounded-2xl border border-slate-700 object-cover" />
|
|
|
<div>
|
|
|
<p class="text-xl md:text-2xl font-extrabold tracking-tight">
|
|
|
<span class="bg-gradient-to-r from-indigo-400 via-fuchsia-400 to-emerald-400 bg-clip-text text-transparent">
|
|
|
TrueWrite
|
|
|
</span>
|
|
|
<span class="text-slate-100"> Scan</span>
|
|
|
</p>
|
|
|
<p class="text-[11px] text-slate-400 uppercase tracking-[0.22em]">
|
|
|
Honest. Original. Authenticated
|
|
|
</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="flex items-center gap-3">
|
|
|
<span id="userName" class="text-xs text-slate-300"></span>
|
|
|
<a href="history.html"
|
|
|
class="text-xs px-3 py-1 rounded-full border border-slate-600 hover:bg-slate-800">
|
|
|
History
|
|
|
</a>
|
|
|
<button id="logoutBtn"
|
|
|
class="text-xs px-3 py-1 rounded-full border border-slate-600 hover:bg-slate-800">
|
|
|
Logout
|
|
|
</button>
|
|
|
</div>
|
|
|
</div>
|
|
|
</header>
|
|
|
|
|
|
<main class="flex-1 max-w-6xl mx-auto px-4 py-8 space-y-12">
|
|
|
|
|
|
<section class="grid md:grid-cols-[3fr,2fr] gap-8 items-center">
|
|
|
<div>
|
|
|
<h1 class="text-3xl md:text-4xl font-bold mb-3">
|
|
|
Write it once. <span class="text-indigo-400">Check it all.</span>
|
|
|
</h1>
|
|
|
<p class="text-sm md:text-base text-slate-300 mb-4">
|
|
|
TrueWrite Scan is your all-in-one writing assistant inspired by different platforms and alsp it is different. From spotting grammar mistakes to estimating plagiarism and and get a rough signal
|
|
|
of AI-generated content — all in one unified dashboard — right in your browser.
|
|
|
</p>
|
|
|
<ul class="text-sm text-slate-300 space-y-1 mb-2 list-disc list-inside">
|
|
|
<li>Check grammar for up to 1000 words in a single click.</li>
|
|
|
<li>Paste or upload text for plagiarism estimation.</li>
|
|
|
<li>Get a heuristic AI-content probability with clear summaries.</li>
|
|
|
<li>Download PDF reports for every scan.</li>
|
|
|
</ul>
|
|
|
</div>
|
|
|
|
|
|
|
|
|
<div class="relative">
|
|
|
<div class="absolute inset-0 bg-gradient-to-tr from-indigo-500/30 via-purple-500/20 to-emerald-400/30 blur-3xl -z-10"></div>
|
|
|
<img
|
|
|
src="dashboard-main.png"
|
|
|
alt="TrueWrite Scan dashboard preview"
|
|
|
class="rounded-3xl border border-slate-800 shadow-2xl shadow-indigo-500/30"
|
|
|
/>
|
|
|
</div>
|
|
|
</section>
|
|
|
|
|
|
|
|
|
<section class="space-y-4">
|
|
|
<h2 class="text-xl md:text-2xl font-semibold">Choose a tool</h2>
|
|
|
|
|
|
|
|
|
<a href="grammar.html"
|
|
|
class="group flex flex-col md:flex-row items-center gap-6 bg-slate-900/70 border border-slate-800 rounded-2xl p-5
|
|
|
hover:border-fuchsia-400 hover:-translate-y-1 hover:shadow-xl hover:shadow-fuchsia-500/30 transition">
|
|
|
<div class="flex-1">
|
|
|
<p class="text-xs uppercase tracking-wide text-fuchsia-300 mb-1">Tool 1</p>
|
|
|
<h3 class="text-lg md:text-xl font-semibold mb-1">Grammar Check</h3>
|
|
|
<p class="text-sm text-slate-300 mb-3">
|
|
|
Instantly highlight basic grammar, punctuation, and spelling issues for up to
|
|
|
<strong>1000 words</strong>. Perfect for assignments and quick edits.
|
|
|
</p>
|
|
|
<button
|
|
|
class="px-4 py-2 rounded-full bg-fuchsia-500 group-hover:bg-fuchsia-600 text-xs font-medium">
|
|
|
Scan Text →
|
|
|
</button>
|
|
|
</div>
|
|
|
<img
|
|
|
src="grammar.png"
|
|
|
alt="Grammar checker preview"
|
|
|
class="w-full md:w-72 rounded-xl border border-slate-700"
|
|
|
/>
|
|
|
</a>
|
|
|
|
|
|
|
|
|
|
|
|
<a href="plagiarism.html"
|
|
|
class="group flex flex-col md:flex-row items-center gap-6 bg-gradient-to-br from-emerald-500/20 via-slate-900 to-slate-900 border border-emerald-500/40 rounded-2xl p-5 hover:-translate-y-1 hover:shadow-xl hover:shadow-emerald-500/30 transition">
|
|
|
|
|
|
|
|
|
<img
|
|
|
src="Plagiarism2.png"
|
|
|
alt="Plagiarism checker preview"
|
|
|
class="w-full md:w-72 rounded-xl border border-slate-700 object-cover"
|
|
|
/>
|
|
|
|
|
|
|
|
|
<div class="flex-1">
|
|
|
<p class="text-xs uppercase tracking-wide text-emerald-300 mb-1">Tool 2</p>
|
|
|
<h3 class="text-lg md:text-xl font-semibold mb-1">Plagiarism Check</h3>
|
|
|
<p class="text-sm text-slate-200 mb-3">
|
|
|
Paste your text or upload a file and compare it against documents to get a real plagiarism percentage with a detailed <strong>PDF report</strong>.
|
|
|
</p>
|
|
|
<div class="mt-3 flex justify-end">
|
|
|
<button
|
|
|
class="px-4 py-2 rounded-full bg-emerald-500 group-hover:bg-emerald-600 text-xs font-medium">
|
|
|
Scan document →
|
|
|
</button>
|
|
|
</div>
|
|
|
</div>
|
|
|
</a>
|
|
|
|
|
|
|
|
|
|
|
|
<a href="ai-check.html"
|
|
|
class="group flex flex-col md:flex-row items-center gap-6 bg-slate-900/70 border border-slate-800 rounded-2xl p-5
|
|
|
hover:border-indigo-400 hover:-translate-y-1 hover:shadow-xl hover:shadow-indigo-500/30 transition">
|
|
|
<div class="flex-1">
|
|
|
<p class="text-xs uppercase tracking-wide text-indigo-300 mb-1">Tool 3</p>
|
|
|
<h3 class="text-lg md:text-xl font-semibold mb-1">AI Content Check</h3>
|
|
|
<p class="text-sm text-slate-300 mb-3">
|
|
|
Analyze your writing using different models to estimate how likely it appears
|
|
|
AI-generated vs human-written, and save the result as a PDF report.
|
|
|
</p>
|
|
|
<button
|
|
|
class="px-4 py-2 rounded-full bg-indigo-500 group-hover:bg-indigo-600 text-xs font-medium">
|
|
|
Analyze AI Content →
|
|
|
</button>
|
|
|
</div>
|
|
|
<img
|
|
|
src="ai.png"
|
|
|
alt="AI content checker preview"
|
|
|
class="w-full md:w-72 rounded-xl border border-slate-700"
|
|
|
/>
|
|
|
</a>
|
|
|
</section>
|
|
|
|
|
|
|
|
|
<section class="mt-4">
|
|
|
<h2 class="text-xl md:text-2xl font-semibold mb-3">What users are saying</h2>
|
|
|
<div class="bg-slate-900/80 border border-slate-800 rounded-2xl p-5 md:p-6 relative overflow-hidden">
|
|
|
<div id="reviewCard" class="transition-all duration-500">
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="flex items-center justify-between mt-4">
|
|
|
<div id="reviewDots" class="flex gap-1.5"></div>
|
|
|
<div class="flex gap-2">
|
|
|
<button id="prevReview"
|
|
|
class="w-8 h-8 rounded-full border border-slate-600 flex items-center justify-center text-xs hover:bg-slate-800">
|
|
|
‹
|
|
|
</button>
|
|
|
<button id="nextReview"
|
|
|
class="w-8 h-8 rounded-full border border-slate-600 flex items-center justify-center text-xs hover:bg-slate-800">
|
|
|
›
|
|
|
</button>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</section>
|
|
|
</main>
|
|
|
|
|
|
|
|
|
<footer class="border-t border-slate-800 mt-8">
|
|
|
<div class="max-w-6xl mx-auto px-4 py-4 text-[11px] text-slate-400 flex flex-col md:flex-row items-center justify-between gap-2">
|
|
|
<p>© 2025 TrueWrite Scan. All rights reserved.</p>
|
|
|
<p>Designed & developed by <span class="text-indigo-300 font-medium">Gopal Krushna Mahapatra</span>.</p>
|
|
|
</div>
|
|
|
</footer>
|
|
|
|
|
|
<script>
|
|
|
|
|
|
if (!localStorage.getItem('truewriteUser')) {
|
|
|
window.location.href = 'login.html';
|
|
|
}
|
|
|
|
|
|
document.getElementById('logoutBtn').onclick = () => {
|
|
|
localStorage.removeItem('truewriteUser');
|
|
|
window.location.href = 'index.html';
|
|
|
};
|
|
|
|
|
|
|
|
|
const reviews = [
|
|
|
{
|
|
|
name: "Aarav S.",
|
|
|
role: "B.Tech Student",
|
|
|
text: "TrueWrite Scan makes it easy to quickly check my lab reports for basic errors before submitting.",
|
|
|
stars: 5
|
|
|
},
|
|
|
{
|
|
|
name: "Priya K.",
|
|
|
role: "Research Scholar",
|
|
|
text: "I love the clean dashboard. Switching between grammar, plagiarism, and AI checks feels effortless.",
|
|
|
stars: 5
|
|
|
},
|
|
|
{
|
|
|
name: "Rahul M.",
|
|
|
role: "Content Writer",
|
|
|
text: "The PDF reports are very handy when I want to keep track of changes and share results with my team.",
|
|
|
stars: 4
|
|
|
},
|
|
|
{
|
|
|
name: "Sneha R.",
|
|
|
role: "M.Sc. Student",
|
|
|
text: "Great for understanding how plagiarism and AI detectors roughly work under the hood.",
|
|
|
stars: 5
|
|
|
},
|
|
|
{
|
|
|
name: "Vikram J.",
|
|
|
role: "Developer",
|
|
|
text: "Perfect demo project to learn front-end + basic text processing. The UI looks super polished.",
|
|
|
stars: 4
|
|
|
},
|
|
|
{
|
|
|
name: "Ananya P.",
|
|
|
role: "Teacher",
|
|
|
text: "I show this tool to my students so they understand the importance of original writing.",
|
|
|
stars: 5
|
|
|
},
|
|
|
{
|
|
|
name: "Kunal D.",
|
|
|
role: "Freelance Writer",
|
|
|
text: "The grammar checker catches little issues that I tend to miss when I’m in a hurry.",
|
|
|
stars: 4
|
|
|
},
|
|
|
{
|
|
|
name: "Meera L.",
|
|
|
role: "College Student",
|
|
|
text: "Having grammar, plagiarism and AI content checkers in one place saves me a lot of time.",
|
|
|
stars: 5
|
|
|
},
|
|
|
{
|
|
|
name: "Siddharth G.",
|
|
|
role: "Tech Enthusiast",
|
|
|
text: "A nice example of how text tools can be built using only front-end technologies and JavaScript.",
|
|
|
stars: 4
|
|
|
},
|
|
|
{
|
|
|
name: "Riya S.",
|
|
|
role: "BCA Student",
|
|
|
text: "Very intuitive layout. Feels similar to popular tools like QuillBot but customised for learning.",
|
|
|
stars: 5
|
|
|
}
|
|
|
];
|
|
|
|
|
|
let currentReview = 0;
|
|
|
const reviewCard = document.getElementById('reviewCard');
|
|
|
const reviewDots = document.getElementById('reviewDots');
|
|
|
|
|
|
function starRow(stars) {
|
|
|
let html = "";
|
|
|
for (let i = 0; i < 5; i++) {
|
|
|
html += `<span class="${i < stars ? 'text-yellow-400' : 'text-slate-600'} text-sm">★</span>`;
|
|
|
}
|
|
|
return html;
|
|
|
}
|
|
|
|
|
|
function renderReview() {
|
|
|
const r = reviews[currentReview];
|
|
|
reviewCard.innerHTML = `
|
|
|
<div class="flex items-center gap-2 mb-2">
|
|
|
${starRow(r.stars)}
|
|
|
</div>
|
|
|
<p class="text-sm text-slate-200 mb-3">"${r.text}"</p>
|
|
|
<p class="text-sm font-semibold">${r.name}</p>
|
|
|
<p class="text-xs text-slate-400">${r.role}</p>
|
|
|
`;
|
|
|
|
|
|
reviewDots.innerHTML = reviews
|
|
|
.map(
|
|
|
(_, i) =>
|
|
|
`<span class="w-2 h-2 rounded-full ${
|
|
|
i === currentReview ? 'bg-indigo-400' : 'bg-slate-600'
|
|
|
}"></span>`
|
|
|
)
|
|
|
.join('');
|
|
|
}
|
|
|
|
|
|
function nextReview() {
|
|
|
currentReview = (currentReview + 1) % reviews.length;
|
|
|
renderReview();
|
|
|
}
|
|
|
|
|
|
function prevReview() {
|
|
|
currentReview = (currentReview - 1 + reviews.length) % reviews.length;
|
|
|
renderReview();
|
|
|
}
|
|
|
|
|
|
document.getElementById('nextReview').onclick = nextReview;
|
|
|
document.getElementById('prevReview').onclick = prevReview;
|
|
|
|
|
|
|
|
|
let reviewTimer = setInterval(nextReview, 5000);
|
|
|
|
|
|
document.getElementById('nextReview').addEventListener('click', () => {
|
|
|
clearInterval(reviewTimer);
|
|
|
reviewTimer = setInterval(nextReview, 5000);
|
|
|
});
|
|
|
document.getElementById('prevReview').addEventListener('click', () => {
|
|
|
clearInterval(reviewTimer);
|
|
|
reviewTimer = setInterval(nextReview, 5000);
|
|
|
});
|
|
|
|
|
|
renderReview();
|
|
|
</script>
|
|
|
</body>
|
|
|
</html>
|
|
|
|
