File size: 8,718 Bytes
b1957ae b464313 b1957ae b464313 b1957ae b464313 b1957ae b464313 b1957ae b464313 b1957ae b464313 b1957ae b464313 b1957ae b464313 b1957ae b464313 b1957ae b464313 b1957ae b464313 b1957ae |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Notepad App | Developed by Aditya Devarshi</title>
<!-- SEO Meta Tags -->
<meta name="description" content="Notepad App by Aditya Devarshi. Create notes with text, emojis, and image URLs. Explore Aditya's portfolio and social profiles.">
<meta name="keywords" content="Notepad, FastAPI, Tailwind, Aditya Devarshi, Portfolio, Developer, Python, SQLAlchemy, Minimalist, Monochrome">
<meta name="author" content="Aditya Devarshi">
<!-- Open Graph / Facebook -->
<meta property="og:type" content="website">
<meta property="og:title" content="Notepad App | Developed by Aditya Devarshi">
<meta property="og:description" content="Create notes with text, emojis, and image URLs. Check out Aditya Devarshi's portfolio and social profiles.">
<meta property="og:url" content="https://triflix-notepad.hf.space">
<meta property="og:image" content="https://triflix-notepad.hf.space/static/og-image.jpg">
<!-- Twitter -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Notepad App | Developed by Aditya Devarshi">
<meta name="twitter:description" content="Create notes with text, emojis, and image URLs. Explore Aditya Devarshi's work.">
<meta name="twitter:image" content="https://triflix-notepad.hf.space/static/og-image.jpg">
<!-- Font Awesome for Icons -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" integrity="sha512-pap6k1gE+T1/2y5P5/9e6e+fDqBpcFjeDFMEBWfMJrP+y6O78x4AbMFTaQ3WkZs9F6h4vY+PC2ZChT1fIN7S3g==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<!-- Tailwind CSS -->
<script src="https://cdn.tailwindcss.com"></script>
<script>
tailwind.config = {
theme: {
extend: {
spacing: {
'18': '4.5rem',
},
transitionDuration: {
'400': '400ms'
}
}
}
}
</script>
<style>
/* Popup modal styling with animation */
.modal {
transition: opacity 0.4s ease, transform 0.4s ease;
transform: translateY(-20px);
}
.modal-active {
opacity: 1;
transform: translateY(0);
}
.modal-hidden {
opacity: 0;
pointer-events: none;
}
/* Monochrome error effect */
.error-effect {
animation: shake 0.5s;
}
@keyframes shake {
0%, 100% { transform: translateX(0); }
20%, 60% { transform: translateX(-10px); }
40%, 80% { transform: translateX(10px); }
}
</style>
</head>
<body class="bg-white min-h-screen">
<!-- Popup Modal for Developer Info -->
<div id="devModal" class="modal fixed inset-0 flex items-center justify-center bg-black bg-opacity-50 modal-hidden">
<div class="bg-white rounded-lg shadow-xl max-w-md w-full p-6 relative">
<button onclick="closeModal()" class="absolute top-2 right-2 text-gray-500 hover:text-gray-700">
<i class="fas fa-times"></i>
</button>
<h2 class="text-2xl font-bold text-center mb-4">About Aditya Devarshi</h2>
<ul class="space-y-3">
<li>
<i class="fas fa-globe text-gray-700"></i>
<a href="https://www.adityadevarshi.online" target="_blank" class="text-blue-600 hover:underline">Personal Website</a>
</li>
<li>
<i class="fab fa-github text-gray-700"></i>
<a href="https://github.com/devarshiadi/" target="_blank" class="text-blue-600 hover:underline">GitHub Portfolio</a>
</li>
<li>
<i class="fab fa-linkedin text-gray-700"></i>
<a href="https://www.linkedin.com/in/aditya-devarshi/" target="_blank" class="text-blue-600 hover:underline">LinkedIn</a>
</li>
<li>
<i class="fab fa-instagram text-gray-700"></i>
<a href="https://www.instagram.com/curseofwitcher/" target="_blank" class="text-blue-600 hover:underline">Instagram</a>
</li>
<li>
<i class="fab fa-medium text-gray-700"></i>
<a href="https://medium.com/@devarshia5" target="_blank" class="text-blue-600 hover:underline">Medium</a>
</li>
</ul>
</div>
</div>
<!-- Main Container -->
<div class="container mx-auto px-4 py-8 sm:py-12">
<div class="max-w-xl mx-auto bg-white rounded-lg shadow-sm border border-gray-200 p-5 sm:p-8">
<h1 class="text-3xl font-bold text-center text-black mb-4 sm:mb-6">Notepad</h1>
<p class="text-gray-700 mb-6 text-center text-sm sm:text-base">Create a note with text, emojis, and image URLs</p>
<form action="/create" method="post" class="space-y-6">
<div>
<label for="content" class="block text-sm font-medium text-black mb-2">Your Note</label>
<textarea
id="content"
name="content"
rows="10"
class="w-full px-4 py-3 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-black focus:border-black text-base"
placeholder="Write your note here. Image URLs (ending in .jpg, .png, etc.) will be displayed as images."
required
></textarea>
</div>
<div class="flex items-center py-2">
<input
type="checkbox"
id="is_private"
name="is_private"
class="h-5 w-5 text-black focus:ring-black border-gray-400 rounded"
onchange="togglePasswordField()"
>
<label for="is_private" class="ml-3 block text-base text-black">
Make this note private
</label>
</div>
<div id="password_field" class="hidden">
<label for="password" class="block text-sm font-medium text-black mb-2">Password</label>
<input
type="password"
id="password"
name="password"
class="w-full px-4 py-3 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-black focus:border-black text-base"
placeholder="Enter a password to protect your note"
>
<p class="mt-2 text-sm text-gray-600">This password will be required to view the note</p>
</div>
<div class="mt-8">
<button
type="submit"
class="w-full flex justify-center py-3 px-4 border border-gray-800 rounded-lg shadow-sm text-base font-medium text-white bg-black hover:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500 transition-colors duration-200"
>
Create Note
</button>
</div>
</form>
</div>
</div>
<script>
function togglePasswordField() {
const isPrivate = document.getElementById('is_private').checked;
const passwordField = document.getElementById('password_field');
if (isPrivate) {
passwordField.classList.remove('hidden');
document.getElementById('password').setAttribute('required', 'required');
} else {
passwordField.classList.add('hidden');
document.getElementById('password').removeAttribute('required');
}
}
// Modal functions
function showModal() {
const modal = document.getElementById('devModal');
modal.classList.remove('modal-hidden');
modal.classList.add('modal-active');
}
function closeModal() {
const modal = document.getElementById('devModal');
modal.classList.remove('modal-active');
modal.classList.add('modal-hidden');
}
// Auto-show modal once per user using localStorage
window.addEventListener('load', function() {
if (!localStorage.getItem('modalShown')) {
showModal();
localStorage.setItem('modalShown', 'true');
}
});
// Attractive console logs with styling
console.log("%cAbout Aditya Devarshi", "color: white; background-color: black; font-size: 20px; padding: 4px 8px;");
console.log("%cPersonal Website: %chttps://www.adityadevarshi.online", "color: black; font-weight: bold;", "color: blue;");
console.log("%cPortfolio: %chttps://github.com/devarshiadi/", "color: black; font-weight: bold;", "color: blue;");
console.log("%cLinkedIn: %chttps://www.linkedin.com/in/aditya-devarshi/", "color: black; font-weight: bold;", "color: blue;");
console.log("%cInstagram: %chttps://www.instagram.com/curseofwitcher/", "color: black; font-weight: bold;", "color: blue;");
console.log("%cMedium: %chttps://medium.com/@devarshia5", "color: black; font-weight: bold;", "color: blue;");
</script>
</body>
</html>
|