Hugging Face's logo

Spaces:
triflix
/
NotePad
Sleeping

App Files Community
triflix commited on
Commit
b1957ae
·
verified ·
1 Parent(s): dd3a65c

Update templates/index.html

Browse files
Files changed (1) hide show
  1. templates/index.html +170 -91
templates/index.html CHANGED
@@ -1,91 +1,170 @@
1
- <!DOCTYPE html>
2
- <html lang="en">
3
- <head>
4
- <meta charset="UTF-8">
5
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>Notepad App</title>
7
- <script src="https://cdn.tailwindcss.com"></script>
8
- <script>
9
- tailwind.config = {
10
- theme: {
11
- extend: {
12
- spacing: {
13
- '18': '4.5rem',
14
- },
15
- }
16
- }
17
- }
18
- </script>
19
- </head>
20
- <body class="bg-white min-h-screen">
21
- <div class="container mx-auto px-4 py-8 sm:py-12">
22
- <div class="max-w-xl mx-auto bg-white rounded-lg shadow-sm border border-gray-200 p-5 sm:p-8">
23
- <h1 class="text-3xl font-bold text-center text-black mb-4 sm:mb-6">Notepad</h1>
24
- <p class="text-gray-700 mb-6 text-center text-sm sm:text-base">Create a note with text, emojis, and image URLs</p>
25
-
26
- <form action="/create" method="post" class="space-y-6">
27
- <div>
28
- <label for="content" class="block text-sm font-medium text-black mb-2">Your Note</label>
29
- <textarea
30
- id="content"
31
- name="content"
32
- rows="10"
33
- 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"
34
- placeholder="Write your note here. Image URLs (ending in .jpg, .png, etc.) will be displayed as images."
35
- required
36
- ></textarea>
37
- </div>
38
-
39
- <div class="flex items-center py-2">
40
- <input
41
- type="checkbox"
42
- id="is_private"
43
- name="is_private"
44
- class="h-5 w-5 text-black focus:ring-black border-gray-400 rounded"
45
- onchange="togglePasswordField()"
46
- >
47
- <label for="is_private" class="ml-3 block text-base text-black">
48
- Make this note private
49
- </label>
50
- </div>
51
-
52
- <div id="password_field" class="hidden">
53
- <label for="password" class="block text-sm font-medium text-black mb-2">Password</label>
54
- <input
55
- type="password"
56
- id="password"
57
- name="password"
58
- 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"
59
- placeholder="Enter a password to protect your note"
60
- >
61
- <p class="mt-2 text-sm text-gray-600">This password will be required to view the note</p>
62
- </div>
63
-
64
- <div class="mt-8">
65
- <button
66
- type="submit"
67
- 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"
68
- >
69
- Create Note
70
- </button>
71
- </div>
72
- </form>
73
- </div>
74
- </div>
75
-
76
- <script>
77
- function togglePasswordField() {
78
- const isPrivate = document.getElementById('is_private').checked;
79
- const passwordField = document.getElementById('password_field');
80
-
81
- if (isPrivate) {
82
- passwordField.classList.remove('hidden');
83
- document.getElementById('password').setAttribute('required', 'required');
84
- } else {
85
- passwordField.classList.add('hidden');
86
- document.getElementById('password').removeAttribute('required');
87
- }
88
- }
89
- </script>
90
- </body>
91
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Notepad App | Developed by Aditya Devarshi</title>
7
+
8
+ <!-- SEO Meta Tags -->
9
+ <meta name="description" content="Notepad App by Aditya Devarshi. Create notes with text, emojis, and image URLs. Check out Aditya's portfolio and social links.">
10
+ <meta name="keywords" content="Notepad, FastAPI, Tailwind, Aditya Devarshi, Portfolio, Developer, Python, SQLAlchemy">
11
+ <meta name="author" content="Aditya Devarshi">
12
+
13
+ <!-- Font Awesome for Icons -->
14
+ <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" />
15
+
16
+ <!-- Tailwind CSS -->
17
+ <script src="https://cdn.tailwindcss.com"></script>
18
+ <script>
19
+ tailwind.config = {
20
+ theme: {
21
+ extend: {
22
+ spacing: {
23
+ '18': '4.5rem',
24
+ },
25
+ }
26
+ }
27
+ }
28
+ </script>
29
+
30
+ <style>
31
+ /* Popup modal styling */
32
+ .modal {
33
+ transition: opacity 0.25s ease;
34
+ }
35
+ .modal-active {
36
+ overflow-x: hidden;
37
+ overflow-y: visible !important;
38
+ }
39
+ </style>
40
+ </head>
41
+ <body class="bg-white min-h-screen">
42
+ <!-- Popup Modal for Developer Info -->
43
+ <div id="devModal" class="modal fixed inset-0 flex items-center justify-center bg-black bg-opacity-50 opacity-0 pointer-events-none">
44
+ <div class="bg-white rounded-lg shadow-xl max-w-md w-full p-6 relative">
45
+ <button onclick="toggleModal()" class="absolute top-2 right-2 text-gray-500 hover:text-gray-700">
46
+ <i class="fas fa-times"></i>
47
+ </button>
48
+ <h2 class="text-2xl font-bold text-center mb-4">About Aditya Devarshi</h2>
49
+ <ul class="space-y-3">
50
+ <li>
51
+ <i class="fas fa-globe text-gray-700"></i>
52
+ <a href="https://www.adityadevarshi.online" target="_blank" class="text-blue-600 hover:underline">Personal Website</a>
53
+ </li>
54
+ <li>
55
+ <i class="fab fa-github text-gray-700"></i>
56
+ <a href="https://github.com/devarshiadi/" target="_blank" class="text-blue-600 hover:underline">GitHub Portfolio</a>
57
+ </li>
58
+ <li>
59
+ <i class="fab fa-linkedin text-gray-700"></i>
60
+ <a href="https://www.linkedin.com/in/aditya-devarshi/" target="_blank" class="text-blue-600 hover:underline">LinkedIn</a>
61
+ </li>
62
+ <li>
63
+ <i class="fab fa-instagram text-gray-700"></i>
64
+ <a href="https://www.instagram.com/curseofwitcher/" target="_blank" class="text-blue-600 hover:underline">Instagram</a>
65
+ </li>
66
+ <li>
67
+ <i class="fab fa-medium text-gray-700"></i>
68
+ <a href="https://medium.com/@devarshia5" target="_blank" class="text-blue-600 hover:underline">Medium</a>
69
+ </li>
70
+ </ul>
71
+ </div>
72
+ </div>
73
+
74
+ <!-- Button to Open Developer Popup -->
75
+ <button onclick="toggleModal()" class="fixed bottom-5 right-5 bg-black text-white p-3 rounded-full shadow-lg hover:bg-gray-800 focus:outline-none">
76
+ <i class="fas fa-info"></i>
77
+ </button>
78
+
79
+ <!-- Main Container -->
80
+ <div class="container mx-auto px-4 py-8 sm:py-12">
81
+ <div class="max-w-xl mx-auto bg-white rounded-lg shadow-sm border border-gray-200 p-5 sm:p-8">
82
+ <h1 class="text-3xl font-bold text-center text-black mb-4 sm:mb-6">Notepad</h1>
83
+ <p class="text-gray-700 mb-6 text-center text-sm sm:text-base">Create a note with text, emojis, and image URLs</p>
84
+
85
+ <form action="/create" method="post" class="space-y-6">
86
+ <div>
87
+ <label for="content" class="block text-sm font-medium text-black mb-2">Your Note</label>
88
+ <textarea
89
+ id="content"
90
+ name="content"
91
+ rows="10"
92
+ 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"
93
+ placeholder="Write your note here. Image URLs (ending in .jpg, .png, etc.) will be displayed as images."
94
+ required
95
+ ></textarea>
96
+ </div>
97
+
98
+ <div class="flex items-center py-2">
99
+ <input
100
+ type="checkbox"
101
+ id="is_private"
102
+ name="is_private"
103
+ class="h-5 w-5 text-black focus:ring-black border-gray-400 rounded"
104
+ onchange="togglePasswordField()"
105
+ >
106
+ <label for="is_private" class="ml-3 block text-base text-black">
107
+ Make this note private
108
+ </label>
109
+ </div>
110
+
111
+ <div id="password_field" class="hidden">
112
+ <label for="password" class="block text-sm font-medium text-black mb-2">Password</label>
113
+ <input
114
+ type="password"
115
+ id="password"
116
+ name="password"
117
+ 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"
118
+ placeholder="Enter a password to protect your note"
119
+ >
120
+ <p class="mt-2 text-sm text-gray-600">This password will be required to view the note</p>
121
+ </div>
122
+
123
+ <div class="mt-8">
124
+ <button
125
+ type="submit"
126
+ 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"
127
+ >
128
+ Create Note
129
+ </button>
130
+ </div>
131
+ </form>
132
+ </div>
133
+ </div>
134
+
135
+ <script>
136
+ function togglePasswordField() {
137
+ const isPrivate = document.getElementById('is_private').checked;
138
+ const passwordField = document.getElementById('password_field');
139
+
140
+ if (isPrivate) {
141
+ passwordField.classList.remove('hidden');
142
+ document.getElementById('password').setAttribute('required', 'required');
143
+ } else {
144
+ passwordField.classList.add('hidden');
145
+ document.getElementById('password').removeAttribute('required');
146
+ }
147
+ }
148
+
149
+ // Modal toggle functionality
150
+ function toggleModal() {
151
+ const modal = document.getElementById('devModal');
152
+ if (modal.classList.contains('opacity-0')) {
153
+ modal.classList.remove('opacity-0', 'pointer-events-none');
154
+ document.body.classList.add('modal-active');
155
+ } else {
156
+ modal.classList.add('opacity-0', 'pointer-events-none');
157
+ document.body.classList.remove('modal-active');
158
+ }
159
+ }
160
+
161
+ // Log developer info in the console
162
+ console.log("About Aditya Devarshi");
163
+ console.log("Personal Website: https://www.adityadevarshi.online");
164
+ console.log("Portfolio: https://github.com/devarshiadi/");
165
+ console.log("LinkedIn: https://www.linkedin.com/in/aditya-devarshi/");
166
+ console.log("Instagram: https://www.instagram.com/curseofwitcher/");
167
+ console.log("Medium: https://medium.com/@devarshia5");
168
+ </script>
169
+ </body>
170
+ </html>