Hugging Face's logo

Spaces:
ifeCode
/
scholarlyscribe-portal
Running

App Files Community
ifeCode commited on
Commit
b19a62e
·
verified ·
1 Parent(s): 429ad16

<?xml version="1.0" encoding="UTF-8"?>

Browse files

<product_requirements_document>
<metadata>
<title>Journal Management Portal - Product Requirements Document</title>
<version>1.0</version>
<date>2025-10-12</date>
<author>Product Team</author>
</metadata>

<!-- EXECUTIVE SUMMARY -->
<executive_summary>
<product_overview>
<description>The Journal Management Portal is a comprehensive web-based platform designed to streamline the academic journal submission, review, and approval process. The system facilitates collaboration between authors, reviewers, and editors through automated workflows and real-time notifications.</description>
</product_overview>
<objectives>
<objective>Automate journal submission and review workflow</objective>
<objective>Enable efficient communication between all stakeholders</objective>
<objective>Provide real-time status tracking for journal submissions</objective>
<objective>Reduce manual administrative overhead through automated email notifications</objective>
<objective>Create a transparent and accountable review process</objective>
</objectives>
</executive_summary>

<!-- TECHNOLOGY STACK -->
<technology_stack>
<core_technologies>
<technology name="Backend" version="7.4+">PHP (preferably PHP 8.0+)</technology>
<technology name="Database" version="8.0+">MySQL</technology>
<technology name="Frontend">HTML5, CSS3, JavaScript (ES6+)</technology>
<technology name="Real-time Updates">AJAX with jQuery or Vanilla JS</technology>
<technology name="Email Service" version="6.x">PHPMailer with SMTP</technology>
</core_technologies>
<additional_libraries>
<library>Bootstrap 5 or Tailwind CSS for responsive UI</library>
<library>DataTables.js for table management</library>
<library>Chart.js for analytics dashboard</library>
<library>TinyMCE or CKEditor for rich text editing</library>
<library>PDF.js for document preview</library>
</additional_libraries>
</technology_stack>

<!-- USER ROLES AND PERMISSIONS -->
<user_roles>
<role name="Admin/Editor">
<permission>Full system access</permission>
<permission>Manage reviewers and authors</permission>
<permission>Approve/reject journal submissions</permission>
<permission>Monitor entire review process</permission>
<permission>Generate reports and analytics</permission>
</role>
<role name="Reviewer">
<permission>View assigned journals</permission>
<permission>Submit reviews and assessments</permission>
<permission>Comment on journals</permission>
<permission>Update review status</permission>
</role>
<role name="Author">
<permission>Submit journal manuscripts</permission>
<permission>Track submission progress</permission>
<permission>View reviewer comments</permission>
<permission>Resubmit revised manuscripts</permission>
</role>
</user_roles>

<!-- FUNCTIONAL REQUIREMENTS -->
<functional_requirements>

<!-- ADMIN/EDITOR PORTAL -->
<portal name="Admin/Editor Portal">

<module name="Dashboard">
<features>
<feature>Overview of pending submissions</feature>
<feature>Active reviews count</feature>
<feature>Recently approved/rejected journals</feature>
<feature>System activity feed</feature>
<feature>Quick action buttons</feature>
</features>
<technical_implementation>
<implementation>AJAX polling every 30 seconds for real-time updates</implementation>
<implementation>MySQL queries with JOIN operations for aggregated data</implementation>
<implementation>Responsive dashboard widgets</implementation>
</technical_implementation>
</module>

<module name="Reviewer Management">
<feature name="Create/Invite Reviewer">
<form_fields>
<field name="name" type="text" required="true">Reviewer Name</field>
<field name="email" type="email" required="true">Reviewer Email</field>
<field name="specialization" type="text" required="true">Specialization</field>
<field name="bio" type="textarea" required="false">Biography</field>
</form_fields>
<password_generation>
<algorithm>random_int(1000, 9999) . date('dmy')</algorithm>
<storage>Hashed using password_hash() with bcrypt</storage>
</password_generation>
<email_notification>
<template name="reviewer_invitation">
<subject>Invitation to Join [Journal Name] as a Reviewer</subject>
<body><![CDATA[
Dear {{REVIEWER_NAME}},

You have been invited to join our journal review panel.

Login Details:
URL: {{LOGIN_URL}}
Email: {{REVIEWER_EMAIL}}
Temporary Password: {{GENERATED_PASSWORD}}

Please change your password upon first login.

Best regards,
{{JOURNAL_NAME}} Editorial Team
]]></body>
<placeholders>
<placeholder>REVIEWER_NAME</placeholder>
<placeholder>LOGIN_URL</placeholder>
<placeholder>REVIEWER_EMAIL</placeholder>
<placeholder>GENERATED_PASSWORD</placeholder>
<placeholder>JOURNAL_NAME</placeholder>
</placeholders>
</template>
</email_notification>
</feature>

<database_schema>
<table name="reviewers">
<column name="reviewer_id" type="INT" primary_key="true" auto_increment="true"/>
<column name="name" type="VARCHAR(255)" nullable="false"/>
<column name="email" type="VARCHAR(255)" nullable="false" unique="true"/>
<column name="password_hash" type="VARCHAR(255)" nullable="false"/>
<column name="specialization" type="VARCHAR(255)"/>
<column name="bio" type="TEXT"/>
<column name="status" type="ENUM('active','inactive')" default="active"/>
<column name="created_at" type="TIMESTAMP" default="CURRENT_TIMESTAMP"/>
<column name="last_login" type="TIMESTAMP" nullable="true"/>
</table>
</database_schema>
</module>

<module name="Journal Submission Management">
<approval_workflow>
<step order="1">View submission details</step>
<step order="2">Assign reviewers</step>
<step order="3">Monitor review progress</step>
<step order="4">Make final decision (Approve/Reject/Revise)</step>
<step order="5">Automatic email notification at each stage</step>
</approval_workflow>

<email_triggers>
<trigger event="Submission received" recipient="Author"/>
<trigger event="Assigned to reviewer" recipient="Reviewer"/>
<trigger event="Review submitted" recipient="Editor, Author"/>
<trigger event="Final decision made" recipient="Author, Reviewers"/>
<trigger event="Comment added" recipient="Relevant party"/>
</email_triggers>

<database_schema>
<table name="journals">
<column name="journal_id" type="INT" primary_key="true" auto_increment="true"/>
<column name="author_id" type="INT" nullable="false"/>
<column name="title" type="VARCHAR(500)" nullable="false"/>
<column name="abstract" type="TEXT"/>
<column name="file_path" type="VARCHAR(255)"/>
<column name="submission_date" type="TIMESTAMP" default="CURRENT_TIMESTAMP"/>
<column name="status" type="ENUM('submitted','under_review','revision_required','approved','rejected')" default="submitted"/>
<column name="final_decision" type="TEXT"/>
<foreign_key>
<column>author_id</column>
<references table="authors" column="author_id"/>
</foreign_key>
</table>

<table name="review_assignments">
<column name="assignment_id" type="INT" primary_key="true" auto_increment="true"/>
<column name="journal_id" type="INT" nullable="false"/>
<column name="reviewer_id" type="INT" nullable="false"/>
<column name="assigned_date" type="TIMESTAMP" default="CURRENT_TIMESTAMP"/>
<column name="review_status" type="ENUM('pending','in_progress','completed')" default="pending"/>
<foreign_key>
<column>journal_id</column>
<references table="journals" column="journal_id"/>
</foreign_key>
<foreign_key>
<column>reviewer_id</column>
<references table="reviewers" column="reviewer_id"/>
</foreign_key>
</table>
</database_schema>

Files changed (4) hide show
  1. README.md +8 -5
  2. index.html +389 -18
  3. login.html +135 -0
  4. register.html +222 -0
README.md CHANGED
@@ -1,10 +1,13 @@
1
  ---
2
- title: Scholarlyscribe Portal
3
- emoji: ⚡
4
- colorFrom: pink
5
- colorTo: purple
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
 
1
  ---
2
+ title: ScholarlyScribe Portal 📚
3
+ colorFrom: red
4
+ colorTo: yellow
5
+ emoji: 🐳
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite-v3
10
  ---
11
 
12
+ # Welcome to your new DeepSite project!
13
+ This project was created with [DeepSite](https://deepsite.hf.co).
index.html CHANGED
@@ -1,19 +1,390 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
19
  </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>ScholarlyScribe - Journal Management Portal</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <script src="https://unpkg.com/feather-icons"></script>
9
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
10
+ <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.net.min.js"></script>
11
+ <style>
12
+ @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=Roboto:wght@300;400;500;700&display=swap');
13
+
14
+ body {
15
+ font-family: 'Roboto', sans-serif;
16
+ }
17
+
18
+ .title-font {
19
+ font-family: 'Playfair Display', serif;
20
+ }
21
+
22
+ .vanta-bg {
23
+ position: absolute;
24
+ top: 0;
25
+ left: 0;
26
+ width: 100%;
27
+ height: 100%;
28
+ z-index: -1;
29
+ opacity: 0.7;
30
+ }
31
+
32
+ .card-hover:hover {
33
+ transform: translateY(-5px);
34
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
35
+ }
36
+
37
+ .login-container {
38
+ backdrop-filter: blur(10px);
39
+ }
40
+ </style>
41
+ </head>
42
+ <body class="bg-gray-50 min-h-screen relative overflow-x-hidden">
43
+ <div id="vanta-bg" class="vanta-bg"></div>
44
+
45
+ <nav class="bg-white bg-opacity-90 shadow-sm">
46
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
47
+ <div class="flex justify-between h-16">
48
+ <div class="flex items-center">
49
+ <div class="flex-shrink-0 flex items-center">
50
+ <i data-feather="book-open" class="text-amber-600 h-8 w-8"></i>
51
+ <span class="ml-2 title-font text-2xl font-bold text-gray-800">ScholarlyScribe</span>
52
+ </div>
53
+ </div>
54
+ <div class="hidden md:ml-6 md:flex md:items-center space-x-8">
55
+ <a href="#" class="text-gray-700 hover:text-amber-600 px-3 py-2 text-sm font-medium">Features</a>
56
+ <a href="#" class="text-gray-700 hover:text-amber-600 px-3 py-2 text-sm font-medium">Pricing</a>
57
+ <a href="#" class="text-gray-700 hover:text-amber-600 px-3 py-2 text-sm font-medium">About</a>
58
+ <div class="flex space-x-4">
59
+ <a href="login.html" class="px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-amber-600 hover:bg-amber-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-amber-500">
60
+ Login
61
+ </a>
62
+ <a href="register.html" class="px-4 py-2 border border-transparent text-sm font-medium rounded-md text-amber-700 bg-amber-100 hover:bg-amber-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-amber-500">
63
+ Register
64
+ </a>
65
+ </div>
66
+ </div>
67
+ <div class="-mr-2 flex items-center md:hidden">
68
+ <button type="button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-amber-500" aria-controls="mobile-menu" aria-expanded="false">
69
+ <i data-feather="menu"></i>
70
+ </button>
71
+ </div>
72
+ </div>
73
+ </div>
74
+ </nav>
75
+
76
+ <main>
77
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12 md:py-24">
78
+ <div class="lg:grid lg:grid-cols-2 lg:gap-8 items-center">
79
+ <div class="mb-12 lg:mb-0">
80
+ <h1 class="title-font text-4xl md:text-5xl lg:text-6xl font-bold text-gray-900 mb-6">
81
+ Streamline Your Academic <span class="text-amber-600">Journal</span> Workflow
82
+ </h1>
83
+ <p class="text-lg text-gray-600 mb-8">
84
+ ScholarlyScribe provides a comprehensive platform for managing journal submissions, peer reviews, and editorial decisions with automated workflows and real-time tracking.
85
+ </p>
86
+ <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4">
87
+ <a href="register.html" class="px-6 py-3 border border-transparent text-base font-medium rounded-md text-white bg-amber-600 hover:bg-amber-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-amber-500 text-center">
88
+ Get Started
89
+ </a>
90
+ <a href="#" class="px-6 py-3 border border-transparent text-base font-medium rounded-md text-amber-700 bg-amber-100 hover:bg-amber-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-amber-500 text-center">
91
+ Learn More
92
+ </a>
93
+ </div>
94
+ </div>
95
+ <div class="relative">
96
+ <div class="relative w-full overflow-hidden rounded-xl shadow-xl">
97
+ <img src="http://static.photos/education/1024x576/42" alt="Academic journal workflow" class="w-full h-auto">
98
+ <div class="absolute inset-0 bg-gradient-to-t from-gray-900 to-transparent opacity-50"></div>
99
+ <div class="absolute bottom-0 left-0 p-6 text-white">
100
+ <h3 class="title-font text-xl font-bold">Automated Peer Review Process</h3>
101
+ <p class="text-gray-200">Experience seamless collaboration between authors, reviewers and editors</p>
102
+ </div>
103
+ </div>
104
+ </div>
105
+ </div>
106
+ </div>
107
+
108
+ <div class="bg-white py-16">
109
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
110
+ <div class="lg:text-center mb-16">
111
+ <h2 class="title-font text-3xl font-bold text-gray-900 sm:text-4xl mb-4">
112
+ Powerful Features for All Stakeholders
113
+ </h2>
114
+ <p class="max-w-2xl text-lg text-gray-600 lg:mx-auto">
115
+ ScholarlyScribe provides specialized interfaces for authors, reviewers and editors to streamline the academic publication process.
116
+ </p>
117
+ </div>
118
+
119
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
120
+ <div class="bg-white rounded-xl shadow-md overflow-hidden card-hover transition-all duration-300">
121
+ <div class="p-6">
122
+ <div class="flex items-center mb-4">
123
+ <div class="flex-shrink-0 bg-amber-100 p-3 rounded-lg">
124
+ <i data-feather="edit-3" class="text-amber-600 h-6 w-6"></i>
125
+ </div>
126
+ <h3 class="ml-3 title-font text-lg font-medium text-gray-900">For Authors</h3>
127
+ </div>
128
+ <p class="text-gray-600 mb-4">
129
+ Submit manuscripts, track progress, and receive feedback all in one place with our intuitive author dashboard.
130
+ </p>
131
+ <ul class="space-y-2 text-gray-600">
132
+ <li class="flex items-start">
133
+ <i data-feather="check" class="text-green-500 h-4 w-4 mt-1 mr-2"></i>
134
+ <span>Easy manuscript submission</span>
135
+ </li>
136
+ <li class="flex items-start">
137
+ <i data-feather="check" class="text-green-500 h-4 w-4 mt-1 mr-2"></i>
138
+ <span>Real-time progress tracking</span>
139
+ </li>
140
+ <li class="flex items-start">
141
+ <i data-feather="check" class="text-green-500 h-4 w-4 mt-1 mr-2"></i>
142
+ <span>Secure document management</span>
143
+ </li>
144
+ </ul>
145
+ </div>
146
+ </div>
147
+
148
+ <div class="bg-white rounded-xl shadow-md overflow-hidden card-hover transition-all duration-300">
149
+ <div class="p-6">
150
+ <div class="flex items-center mb-4">
151
+ <div class="flex-shrink-0 bg-amber-100 p-3 rounded-lg">
152
+ <i data-feather="search" class="text-amber-600 h-6 w-6"></i>
153
+ </div>
154
+ <h3 class="ml-3 title-font text-lg font-medium text-gray-900">For Reviewers</h3>
155
+ </div>
156
+ <p class="text-gray-600 mb-4">
157
+ Streamline your review workflow with structured assessment forms, deadlines tracking, and easy commenting.
158
+ </p>
159
+ <ul class="space-y-2 text-gray-600">
160
+ <li class="flex items-start">
161
+ <i data-feather="check" class="text-green-500 h-4 w-4 mt-1 mr-2"></i>
162
+ <span>Clear review assignments</span>
163
+ </li>
164
+ <li class="flex items-start">
165
+ <i data-feather="check" class="text-green-500 h-4 w-4 mt-1 mr-2"></i>
166
+ <span>Standardized evaluation criteria</span>
167
+ </li>
168
+ <li class="flex items-start">
169
+ <i data-feather="check" class="text-green-500 h-4 w-4 mt-1 mr-2"></i>
170
+ <span>Confidential commenting</span>
171
+ </li>
172
+ </ul>
173
+ </div>
174
+ </div>
175
+
176
+ <div class="bg-white rounded-xl shadow-md overflow-hidden card-hover transition-all duration-300">
177
+ <div class="p-6">
178
+ <div class="flex items-center mb-4">
179
+ <div class="flex-shrink-0 bg-amber-100 p-3 rounded-lg">
180
+ <i data-feather="settings" class="text-amber-600 h-6 w-6"></i>
181
+ </div>
182
+ <h3 class="ml-3 title-font text-lg font-medium text-gray-900">For Editors</h3>
183
+ </div>
184
+ <p class="text-gray-600 mb-4">
185
+ Manage the entire review process with powerful tools for assignment, decision making, and communication.
186
+ </p>
187
+ <ul class="space-y-2 text-gray-600">
188
+ <li class="flex items-start">
189
+ <i data-feather="check" class="text-green-500 h-4 w-4 mt-1 mr-2"></i>
190
+ <span>Automated workflow management</span>
191
+ </li>
192
+ <li class="flex items-start">
193
+ <i data-feather="check" class="text-green-500 h-4 w-4 mt-1 mr-2"></i>
194
+ <span>Reviewer assignment tools</span>
195
+ </li>
196
+ <li class="flex items-start">
197
+ <i data-feather="check" class="text-green-500 h-4 w-4 mt-1 mr-2"></i>
198
+ <span>Comprehensive analytics</span>
199
+ </li>
200
+ </ul>
201
+ </div>
202
+ </div>
203
+ </div>
204
+ </div>
205
+ </div>
206
+
207
+ <div class="bg-gray-50 py-16">
208
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
209
+ <div class="lg:text-center mb-16">
210
+ <h2 class="title-font text-3xl font-bold text-gray-900 sm:text-4xl mb-4">
211
+ How It Works
212
+ </h2>
213
+ <p class="max-w-2xl text-lg text-gray-600 lg:mx-auto">
214
+ From submission to final decision, ScholarlyScribe guides manuscripts through every stage of the review process.
215
+ </p>
216
+ </div>
217
+
218
+ <div class="relative">
219
+ <div class="hidden md:block absolute top-0 left-1/2 transform -translate-x-1/2 h-full w-0.5 bg-gray-200"></div>
220
+
221
+ <div class="space-y-12">
222
+ <div class="relative flex items-start md:flex-row flex-col">
223
+ <div class="md:w-1/2 md:pr-12 mb-8 md:mb-0 order-1">
224
+ <h3 class="title-font text-xl font-semibold text-gray-900 mb-3">1. Author Submission</h3>
225
+ <p class="text-gray-600">
226
+ Authors submit manuscripts through our intuitive submission form, uploading all required documents and metadata. Our system automatically checks for completeness and sends a confirmation email.
227
+ </p>
228
+ </div>
229
+ <div class="md:w-1/2 md:pl-12 order-2">
230
+ <div class="bg-white p-6 rounded-lg shadow-md">
231
+ <img src="http://static.photos/workspace/640x360/101" alt="Author submission interface" class="rounded w-full h-auto">
232
+ </div>
233
+ </div>
234
+ <div class="hidden md:flex absolute left-1/2 -ml-4 h-8 w-8 rounded-full bg-amber-600 items-center justify-center">
235
+ <span class="text-white font-bold">1</span>
236
+ </div>
237
+ </div>
238
+
239
+ <div class="relative flex items-start md:flex-row flex-col">
240
+ <div class="md:w-1/2 md:pr-12 order-2 md:order-1">
241
+ <div class="bg-white p-6 rounded-lg shadow-md">
242
+ <img src="http://static.photos/office/640x360/102" alt="Editor dashboard" class="rounded w-full h-auto">
243
+ </div>
244
+ </div>
245
+ <div class="md:w-1/2 md:pl-12 mb-8 md:mb-0 order-1 md:order-2">
246
+ <h3 class="title-font text-xl font-semibold text-gray-900 mb-3">2. Editor Assignment</h3>
247
+ <p class="text-gray-600">
248
+ Editors receive new submissions instantly. They can assign reviewers with matching expertise, set deadlines, and track the entire review process from their dashboard.
249
+ </p>
250
+ </div>
251
+ <div class="hidden md:flex absolute left-1/2 -ml-4 h-8 w-8 rounded-full bg-amber-600 items-center justify-center">
252
+ <span class="text-white font-bold">2</span>
253
+ </div>
254
+ </div>
255
+
256
+ <div class="relative flex items-start md:flex-row flex-col">
257
+ <div class="md:w-1/2 md:pr-12 mb-8 md:mb-0 order-1">
258
+ <h3 class="title-font text-xl font-semibold text-gray-900 mb-3">3. Peer Review</h3>
259
+ <p class="text-gray-600">
260
+ Reviewers access assigned manuscripts through their personalized portal. Structured evaluation forms ensure comprehensive feedback while saving time.
261
+ </p>
262
+ </div>
263
+ <div class="md:w-1/2 md:pl-12 order-2">
264
+ <div class="bg-white p-6 rounded-lg shadow-md">
265
+ <img src="http://static.photos/technology/640x360/103" alt="Review interface" class="rounded w-full h-auto">
266
+ </div>
267
+ </div>
268
+ <div class="hidden md:flex absolute left-1/2 -ml-4 h-8 w-8 rounded-full bg-amber-600 items-center justify-center">
269
+ <span class="text-white font-bold">3</span>
270
+ </div>
271
+ </div>
272
+
273
+ <div class="relative flex items-start md:flex-row flex-col">
274
+ <div class="md:w-1/2 md:pr-12 order-2 md:order-1">
275
+ <div class="bg-white p-6 rounded-lg shadow-md">
276
+ <img src="http://static.photos/legal/640x360/104" alt="Decision interface" class="rounded w-full h-auto">
277
+ </div>
278
+ </div>
279
+ <div class="md:w-1/2 md:pl-12 mb-8 md:mb-0 order-1 md:order-2">
280
+ <h3 class="title-font text-xl font-semibold text-gray-900 mb-3">4. Final Decision</h3>
281
+ <p class="text-gray-600">
282
+ Editors make decisions based on reviewer feedback. Authors receive detailed decision letters automatically, with options to submit revisions if needed.
283
+ </p>
284
+ </div>
285
+ <div class="hidden md:flex absolute left-1/2 -ml-4 h-8 w-8 rounded-full bg-amber-600 items-center justify-center">
286
+ <span class="text-white font-bold">4</span>
287
+ </div>
288
+ </div>
289
+ </div>
290
+ </div>
291
+ </div>
292
+ </div>
293
+
294
+ <div class="bg-amber-600 py-16">
295
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
296
+ <div class="text-center">
297
+ <h2 class="title-font text-3xl font-bold text-white sm:text-4xl mb-6">
298
+ Ready to streamline your journal workflow?
299
+ </h2>
300
+ <div class="max-w-2xl mx-auto">
301
+ <p class="text-amber-100 mb-8">
302
+ Join hundreds of academic institutions using ScholarlyScribe to manage their peer review process efficiently and transparently.
303
+ </p>
304
+ <div class="flex flex-col sm:flex-row justify-center space-y-4 sm:space-y-0 sm:space-x-4">
305
+ <a href="register.html" class="px-6 py-3 border border-transparent text-base font-medium rounded-md text-amber-600 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-white text-center">
306
+ Get Started for Free
307
+ </a>
308
+ <a href="#" class="px-6 py-3 border border-white text-base font-medium rounded-md text-white hover:bg-amber-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-amber-500 text-center">
309
+ Request a Demo
310
+ </a>
311
+ </div>
312
+ </div>
313
+ </div>
314
+ </div>
315
+ </div>
316
+ </main>
317
+
318
+ <footer class="bg-gray-800">
319
+ <div class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:px-8">
320
+ <div class="grid grid-cols-2 md:grid-cols-4 gap-8">
321
+ <div class="col-span-2">
322
+ <h3 class="title-font text-xl font-bold text-white mb-4">ScholarlyScribe</h3>
323
+ <p class="text-gray-300">
324
+ The comprehensive solution for academic journal management, bringing authors, reviewers and editors together in one seamless platform.
325
+ </p>
326
+ </div>
327
+ <div>
328
+ <h4 class="text-sm font-semibold text-gray-300 tracking-wider uppercase mb-4">Product</h4>
329
+ <ul class="space-y-3">
330
+ <li><a href="#" class="text-gray-400 hover:text-white">Features</a></li>
331
+ <li><a href="#" class="text-gray-400 hover:text-white">Pricing</a></li>
332
+ <li><a href="#" class="text-gray-400 hover:text-white">Documentation</a></li>
333
+ <li><a href="#" class="text-gray-400 hover:text-white">Releases</a></li>
334
+ </ul>
335
+ </div>
336
+ <div>
337
+ <h4 class="text-sm font-semibold text-gray-300 tracking-wider uppercase mb-4">Company</h4>
338
+ <ul class="space-y-3">
339
+ <li><a href="#" class="text-gray-400 hover:text-white">About</a></li>
340
+ <li><a href="#" class="text-gray-400 hover:text-white">Blog</a></li>
341
+ <li><a href="#" class="text-gray-400 hover:text-white">Careers</a></li>
342
+ <li><a href="#" class="text-gray-400 hover:text-white">Contact</a></li>
343
+ </ul>
344
+ </div>
345
+ </div>
346
+ <div class="mt-12 border-t border-gray-700 pt-8 flex flex-col md:flex-row justify-between items-center">
347
+ <p class="text-gray-400 text-sm">
348
+ &copy; 2025 ScholarlyScribe. All rights reserved.
349
+ </p>
350
+ <div class="flex space-x-6 mt-4 md:mt-0">
351
+ <a href="#" class="text-gray-400 hover:text-white">
352
+ <i data-feather="twitter" class="h-5 w-5"></i>
353
+ </a>
354
+ <a href="#" class="text-gray-400 hover:text-white">
355
+ <i data-feather="facebook" class="h-5 w-5"></i>
356
+ </a>
357
+ <a href="#" class="text-gray-400 hover:text-white">
358
+ <i data-feather="linkedin" class="h-5 w-5"></i>
359
+ </a>
360
+ <a href="#" class="text-gray-400 hover:text-white">
361
+ <i data-feather="github" class="h-5 w-5"></i>
362
+ </a>
363
+ </div>
364
+ </div>
365
+ </div>
366
+ </footer>
367
+
368
+ <script>
369
+ feather.replace();
370
+
371
+ VANTA.NET({
372
+ el: "#vanta-bg",
373
+ mouseControls: true,
374
+ touchControls: true,
375
+ gyroControls: false,
376
+ minHeight: 200.00,
377
+ minWidth: 200.00,
378
+ scale: 1.00,
379
+ scaleMobile: 1.00,
380
+ color: 0xf59e0b,
381
+ backgroundColor: 0xf9fafb,
382
+ points: 12.00,
383
+ maxDistance: 22.00,
384
+ spacing: 17.00
385
+ });
386
+
387
+ // Mobile menu toggle would go here
388
+ </script>
389
+ </body>
390
  </html>
login.html ADDED
@@ -0,0 +1,135 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>Login - ScholarlyScribe</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <script src="https://unpkg.com/feather-icons"></script>
9
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
10
+ <style>
11
+ @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=Roboto:wght@300;400;500;700&display=swap');
12
+
13
+ body {
14
+ font-family: 'Roboto', sans-serif;
15
+ background: linear-gradient(135deg, #f9fafb 0%, #f3f4f6 100%);
16
+ }
17
+
18
+ .title-font {
19
+ font-family: 'Playfair Display', serif;
20
+ }
21
+
22
+ .login-container {
23
+ backdrop-filter: blur(8px);
24
+ background-color: rgba(255, 255, 255, 0.85);
25
+ }
26
+
27
+ .gradient-bg {
28
+ background: linear-gradient(to right, #f59e0b, #f97316);
29
+ }
30
+ </style>
31
+ </head>
32
+ <body class="min-h-screen flex items-center justify-center p-4">
33
+ <div class="absolute inset-0 overflow-hidden">
34
+ <div class="absolute inset-0 bg-gradient-to-br from-amber-100 to-amber-50 opacity-70"></div>
35
+ <div class="absolute top-0 left-0 w-full h-full bg-[url('https://static.photos/education/1200x630/10')] bg-cover bg-center opacity-10"></div>
36
+ </div>
37
+
38
+ <div class="relative w-full max-w-md">
39
+ <div class="login-container rounded-2xl shadow-xl overflow-hidden">
40
+ <div class="gradient-bg py-6 px-8 text-center">
41
+ <div class="flex items-center justify-center mb-4">
42
+ <i data-feather="book-open" class="text-white h-8 w-8"></i>
43
+ <span class="ml-2 title-font text-2xl font-bold text-white">ScholarlyScribe</span>
44
+ </div>
45
+ <h1 class="text-xl font-semibold text-white">Sign in to your account</h1>
46
+ </div>
47
+
48
+ <div class="bg-white py-8 px-8">
49
+ <form class="space-y-6">
50
+ <div>
51
+ <label for="email" class="block text-sm font-medium text-gray-700">Email address</label>
52
+ <div class="mt-1 relative rounded-md shadow-sm">
53
+ <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
54
+ <i data-feather="mail" class="h-5 w-5 text-gray-400"></i>
55
+ </div>
56
+ <input id="email" name="email" type="email" autocomplete="email" required class="py-3 pl-10 block w-full border border-gray-300 rounded-md focus:ring-amber-500 focus:border-amber-500">
57
+ </div>
58
+ </div>
59
+
60
+ <div>
61
+ <label for="password" class="block text-sm font-medium text-gray-700">Password</label>
62
+ <div class="mt-1 relative rounded-md shadow-sm">
63
+ <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
64
+ <i data-feather="lock" class="h-5 w-5 text-gray-400"></i>
65
+ </div>
66
+ <input id="password" name="password" type="password" autocomplete="current-password" required class="py-3 pl-10 block w-full border border-gray-300 rounded-md focus:ring-amber-500 focus:border-amber-500">
67
+ </div>
68
+ </div>
69
+
70
+ <div class="flex items-center justify-between">
71
+ <div class="flex items-center">
72
+ <input id="remember-me" name="remember-me" type="checkbox" class="h-4 w-4 text-amber-600 focus:ring-amber-500 border-gray-300 rounded">
73
+ <label for="remember-me" class="ml-2 block text-sm text-gray-700">Remember me</label>
74
+ </div>
75
+
76
+ <div class="text-sm">
77
+ <a href="#" class="font-medium text-amber-600 hover:text-amber-500">Forgot your password?</a>
78
+ </div>
79
+ </div>
80
+
81
+ <div>
82
+ <button type="submit" class="w-full flex justify-center py-3 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-amber-600 hover:bg-amber-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-amber-500">
83
+ Sign in
84
+ </button>
85
+ </div>
86
+ </form>
87
+
88
+ <div class="mt-6">
89
+ <div class="relative">
90
+ <div class="absolute inset-0 flex items-center">
91
+ <div class="w-full border-t border-gray-300"></div>
92
+ </div>
93
+ <div class="relative flex justify-center text-sm">
94
+ <span class="px-2 bg-white text-gray-500">Or continue with</span>
95
+ </div>
96
+ </div>
97
+
98
+ <div class="mt-6 grid grid-cols-2 gap-3">
99
+ <div>
100
+ <a href="#" class="w-full inline-flex justify-center py-2 px-4 border border-gray-300 rounded-md shadow-sm bg-white text-sm font-medium text-gray-700 hover:bg-gray-50">
101
+ <i data-feather="github" class="h-5 w-5"></i>
102
+ </a>
103
+ </div>
104
+
105
+ <div>
106
+ <a href="#" class="w-full inline-flex justify-center py-2 px-4 border border-gray-300 rounded-md shadow-sm bg-white text-sm font-medium text-gray-700 hover:bg-gray-50">
107
+ <i data-feather="google" class="h-5 w-5"></i>
108
+ </a>
109
+ </div>
110
+ </div>
111
+ </div>
112
+
113
+ <div class="mt-6 text-center">
114
+ <p class="text-sm text-gray-600">
115
+ Don't have an account?
116
+ <a href="register.html" class="font-medium text-amber-600 hover:text-amber-500">Register now</a>
117
+ </p>
118
+ </div>
119
+
120
+ <div class="mt-6 border-t border-gray-200 pt-6 text-xs text-gray-500 text-center">
121
+ <p>By signing in, you agree to our <a href="#" class="text-amber-600 hover:underline">Terms of Service</a> and <a href="#" class="text-amber-600 hover:underline">Privacy Policy</a>.</p>
122
+ </div>
123
+ </div>
124
+ </div>
125
+
126
+ <div class="mt-6 text-center text-xs text-gray-500">
127
+ <p>Need help? <a href="#" class="text-amber-600 hover:underline">Contact support</a></p>
128
+ </div>
129
+ </div>
130
+
131
+ <script>
132
+ feather.replace();
133
+ </script>
134
+ </body>
135
+ </html>
register.html ADDED
@@ -0,0 +1,222 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>Register - ScholarlyScribe</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <script src="https://unpkg.com/feather-icons"></script>
9
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
10
+ <style>
11
+ @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=Roboto:wght@300;400;500;700&display=swap');
12
+
13
+ body {
14
+ font-family: 'Roboto', sans-serif;
15
+ background: linear-gradient(135deg, #f9fafb 0%, #f3f4f6 100%);
16
+ }
17
+
18
+ .title-font {
19
+ font-family: 'Playfair Display', serif;
20
+ }
21
+
22
+ .register-container {
23
+ backdrop-filter: blur(8px);
24
+ background-color: rgba(255, 255, 255, 0.85);
25
+ }
26
+
27
+ .gradient-bg {
28
+ background: linear-gradient(to right, #f59e0b, #f97316);
29
+ }
30
+
31
+ .role-selector input:checked + label {
32
+ border-color: #f59e0b;
33
+ background-color: #fef3c7;
34
+ }
35
+ </style>
36
+ </head>
37
+ <body class="min-h-screen flex items-center justify-center p-4">
38
+ <div class="absolute inset-0 overflow-hidden">
39
+ <div class="absolute inset-0 bg-gradient-to-br from-amber-100 to-amber-50 opacity-70"></div>
40
+ <div class="absolute top-0 left-0 w-full h-full bg-[url('https://static.photos/workspace/1200x630/15')] bg-cover bg-center opacity-10"></div>
41
+ </div>
42
+
43
+ <div class="relative w-full max-w-2xl">
44
+ <div class="register-container rounded-2xl shadow-xl overflow-hidden">
45
+ <div class="gradient-bg py-6 px-8 text-center">
46
+ <div class="flex items-center justify-center mb-4">
47
+ <i data-feather="book-open" class="text-white h-8 w-8"></i>
48
+ <span class="ml-2 title-font text-2xl font-bold text-white">ScholarlyScribe</span>
49
+ </div>
50
+ <h1 class="text-xl font-semibold text-white">Create your account</h1>
51
+ </div>
52
+
53
+ <div class="bg-white py-8 px-8">
54
+ <form class="space-y-6">
55
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
56
+ <div>
57
+ <label for="first-name" class="block text-sm font-medium text-gray-700">First name</label>
58
+ <div class="mt-1 relative rounded-md shadow-sm">
59
+ <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
60
+ <i data-feather="user" class="h-5 w-5 text-gray-400"></i>
61
+ </div>
62
+ <input id="first-name" name="first-name" type="text" autocomplete="given-name" required class="py-3 pl-10 block w-full border border-gray-300 rounded-md focus:ring-amber-500 focus:border-amber-500">
63
+ </div>
64
+ </div>
65
+
66
+ <div>
67
+ <label for="last-name" class="block text-sm font-medium text-gray-700">Last name</label>
68
+ <div class="mt-1 relative rounded-md shadow-sm">
69
+ <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
70
+ <i data-feather="user" class="h-5 w-5 text-gray-400"></i>
71
+ </div>
72
+ <input id="last-name" name="last-name" type="text" autocomplete="family-name" required class="py-3 pl-10 block w-full border border-gray-300 rounded-md focus:ring-amber-500 focus:border-amber-500">
73
+ </div>
74
+ </div>
75
+ </div>
76
+
77
+ <div>
78
+ <label for="email" class="block text-sm font-medium text-gray-700">Email address</label>
79
+ <div class="mt-1 relative rounded-md shadow-sm">
80
+ <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
81
+ <i data-feather="mail" class="h-5 w-5 text-gray-400"></i>
82
+ </div>
83
+ <input id="email" name="email" type="email" autocomplete="email" required class="py-3 pl-10 block w-full border border-gray-300 rounded-md focus:ring-amber-500 focus:border-amber-500">
84
+ </div>
85
+ </div>
86
+
87
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
88
+ <div>
89
+ <label for="password" class="block text-sm font-medium text-gray-700">Password</label>
90
+ <div class="mt-1 relative rounded-md shadow-sm">
91
+ <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
92
+ <i data-feather="lock" class="h-5 w-5 text-gray-400"></i>
93
+ </div>
94
+ <input id="password" name="password" type="password" autocomplete="new-password" required class="py-3 pl-10 block w-full border border-gray-300 rounded-md focus:ring-amber-500 focus:border-amber-500">
95
+ </div>
96
+ <p class="mt-2 text-xs text-gray-500">Must be at least 8 characters</p>
97
+ </div>
98
+
99
+ <div>
100
+ <label for="confirm-password" class="block text-sm font-medium text-gray-700">Confirm password</label>
101
+ <div class="mt-1 relative rounded-md shadow-sm">
102
+ <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
103
+ <i data-feather="lock" class="h-5 w-5 text-gray-400"></i>
104
+ </div>
105
+ <input id="confirm-password" name="confirm-password" type="password" autocomplete="new-password" required class="py-3 pl-10 block w-full border border-gray-300 rounded-md focus:ring-amber-500 focus:border-amber-500">
106
+ </div>
107
+ </div>
108
+ </div>
109
+
110
+ <div>
111
+ <label class="block text-sm font-medium text-gray-700 mb-2">Registering as</label>
112
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
113
+ <div class="role-selector">
114
+ <input type="radio" name="role" id="author" value="author" class="sr-only" checked>
115
+ <label for="author" class="flex flex-col items-center p-4 border border-gray-300 rounded-lg cursor-pointer hover:border-amber-300 hover:bg-amber-50 transition-colors">
116
+ <i data-feather="edit-3" class="h-6 w-6 text-amber-600 mb-2"></i>
117
+ <span class="text-sm font-medium text-gray-900">Author</span>
118
+ <span class="text-xs text-gray-500 text-center mt-1">Submit and track manuscripts</span>
119
+ </label>
120
+ </div>
121
+
122
+ <div class="role-selector">
123
+ <input type="radio" name="role" id="reviewer" value="reviewer" class="sr-only">
124
+ <label for="reviewer" class="flex flex-col items-center p-4 border border-gray-300 rounded-lg cursor-pointer hover:border-amber-300 hover:bg-amber-50 transition-colors">
125
+ <i data-feather="search" class="h-6 w-6 text-amber-600 mb-2"></i>
126
+ <span class="text-sm font-medium text-gray-900">Reviewer</span>
127
+ <span class="text-xs text-gray-500 text-center mt-1">Evaluate submissions</span>
128
+ </label>
129
+ </div>
130
+
131
+ <div class="role-selector">
132
+ <input type="radio" name="role" id="editor" value="editor" class="sr-only">
133
+ <label for="editor" class="flex flex-col items-center p-4 border border-gray-300 rounded-lg cursor-pointer hover:border-amber-300 hover:bg-amber-50 transition-colors">
134
+ <i data-feather="settings" class="h-6 w-6 text-amber-600 mb-2"></i>
135
+ <span class="text-sm font-medium text-gray-900">Editor</span>
136
+ <span class="text-xs text-gray-500 text-center mt-1">Manage review process</span>
137
+ </label>
138
+ </div>
139
+ </div>
140
+ </div>
141
+
142
+ <div class="flex items-start">
143
+ <div class="flex items-center h-5">
144
+ <input id="terms" name="terms" type="checkbox" class="focus:ring-amber-500 h-4 w-4 text-amber-600 border-gray-300 rounded" required>
145
+ </div>
146
+ <div class="ml-3">
147
+ <label for="terms" class="text-sm text-gray-700">
148
+ I agree to the <a href="#" class="font-medium text-amber-600 hover:text-amber-500">Terms of Service</a> and <a href="#" class="font-medium text-amber-600 hover:text-amber-500">Privacy Policy</a>
149
+ </label>
150
+ </div>
151
+ </div>
152
+
153
+ <div>
154
+ <button type="submit" class="w-full flex justify-center py-3 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-amber-600 hover:bg-amber-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-amber-500">
155
+ Create account
156
+ </button>
157
+ </div>
158
+ </form>
159
+
160
+ <div class="mt-6">
161
+ <div class="relative">
162
+ <div class="absolute inset-0 flex items-center">
163
+ <div class="w-full border-t border-gray-300"></div>
164
+ </div>
165
+ <div class="relative flex justify-center text-sm">
166
+ <span class="px-2 bg-white text-gray-500">Or sign up with</span>
167
+ </div>
168
+ </div>
169
+
170
+ <div class="mt-6 grid grid-cols-2 gap-3">
171
+ <div>
172
+ <a href="#" class="w-full inline-flex justify-center py-2 px-4 border border-gray-300 rounded-md shadow-sm bg-white text-sm font-medium text-gray-700 hover:bg-gray-50">
173
+ <i data-feather="github" class="h-5 w-5"></i>
174
+ </a>
175
+ </div>
176
+
177
+ <div>
178
+ <a href="#" class="w-full inline-flex justify-center py-2 px-4 border border-gray-300 rounded-md shadow-sm bg-white text-sm font-medium text-gray-700 hover:bg-gray-50">
179
+ <i data-feather="google" class="h-5 w-5"></i>
180
+ </a>
181
+ </div>
182
+ </div>
183
+ </div>
184
+
185
+ <div class="mt-6 text-center">
186
+ <p class="text-sm text-gray-600">
187
+ Already have an account?
188
+ <a href="login.html" class="font-medium text-amber-600 hover:text-amber-500">Sign in</a>
189
+ </p>
190
+ </div>
191
+ </div>
192
+ </div>
193
+
194
+ <div class="mt-6 text-center text-xs text-gray-500">
195
+ <p>By creating an account, you agree to our <a href="#" class="text-amber-600 hover:underline">Terms</a> and that you have read our <a href="#" class="text-amber-600 hover:underline">Privacy Policy</a>.</p>
196
+ </div>
197
+ </div>
198
+
199
+ <script>
200
+ feather.replace();
201
+
202
+ // Role selection styling
203
+ document.querySelectorAll('.role-selector input').forEach(radio => {
204
+ radio.addEventListener('change', function() {
205
+ document.querySelectorAll('.role-selector label').forEach(label => {
206
+ label.classList.remove('border-amber-500', 'bg-amber-100');
207
+ });
208
+
209
+ if (this.checked) {
210
+ const label = this.nextElementSibling;
211
+ label.classList.add('border-amber-500', 'bg-amber-100');
212
+ }
213
+ });
214
+
215
+ // Initialize first selected
216
+ if (radio.checked) {
217
+ radio.nextElementSibling.classList.add('border-amber-500', 'bg-amber-100');
218
+ }
219
+ });
220
+ </script>
221
+ </body>
222
+ </html>