@@ -80,10 +80,124 @@ <h1 class="title">
8080 < main class ="main ">
8181 <!-- Floating Decorative Elements (generated by script) -->
8282 < div class ="floating-decorations "> </ div >
83-
83+
84+ <!-- Repository Analysis Section -->
85+ < div class ="card main-card ">
86+ < div class ="card-content ">
87+ < h2 class ="section-title "> Analyze your repository</ h2 >
88+ < p class ="section-description ">
89+ Paste your GitHub repository URL and get personalized Watchflow rule recommendations based on your repository's patterns, contributing guidelines, and history.
90+ </ p >
91+
92+ < div class ="input-section ">
93+ < div class ="input-wrapper ">
94+ < input
95+ type ="url "
96+ id ="repoUrlInput "
97+ class ="repo-input "
98+ placeholder ="https://github.com/owner/repository "
99+ pattern ="https://github\.com/[^/]+/[^/]+ "
100+ >
101+ < button id ="analyzeRepoBtn " class ="btn btn-primary "> Analyze Repository</ button >
102+ </ div >
103+ </ div >
104+
105+ < div id ="repoAnalysisResult " class ="result-section hidden ">
106+ < div class ="success-alert ">
107+ < div class ="success-header ">
108+ < svg class ="check-icon " viewBox ="0 0 24 24 ">
109+ < path d ="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z " fill ="#4CAF50 "/>
110+ </ svg >
111+ < span class ="success-title "> Analysis complete!</ span >
112+ </ div >
113+ < div class ="success-instructions ">
114+ < p > We've analyzed your repository and generated personalized rule recommendations.</ p >
115+ </ div >
116+ </ div >
117+
118+ < div class ="recommendations-section ">
119+ < h3 class ="recommendations-title "> Recommended Rules</ h3 >
120+ < div id ="recommendationsList " class ="recommendations-list ">
121+ <!-- Recommendations will be populated here -->
122+ </ div >
123+
124+ < div class ="pr-plan-section ">
125+ < h4 class ="pr-plan-title "> Pull Request Plan</ h4 >
126+ < div id ="prPlanDetails " class ="pr-plan-details ">
127+ <!-- PR plan details will be populated here -->
128+ </ div >
129+
130+ < div class ="pr-actions ">
131+ < button id ="proceedWithPrBtn " class ="btn btn-primary proceed-btn "> Proceed with PR</ button >
132+ < button id ="downloadRulesBtn " class ="btn btn-secondary download-btn "> Download rules.yaml</ button >
133+ </ div >
134+ </ div >
135+ </ div >
136+
137+ < div class ="code-block ">
138+ < div class ="code-header ">
139+ < div class ="window-controls ">
140+ < div class ="window-dot red "> </ div >
141+ < div class ="window-dot yellow "> </ div >
142+ < div class ="window-dot green "> </ div >
143+ </ div >
144+ < span class ="code-title "> .watchflow/rules.yaml</ span >
145+ </ div >
146+ < div class ="code-container ">
147+ < pre id ="repoCodeContent " class ="code-content "> </ pre >
148+ < button id ="copyRepoCodeBtn " class ="copy-icon-btn " title ="Copy to clipboard ">
149+ < svg viewBox ="0 0 24 24 " width ="16 " height ="16 ">
150+ < path d ="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z " fill ="currentColor "/>
151+ </ svg >
152+ </ button >
153+ </ div >
154+ </ div >
155+ </ div >
156+
157+ < div id ="repoLoadingIndicator " class ="loading hidden ">
158+ < div class ="loading-animation ">
159+ < div class ="robot-container ">
160+ < div class ="robot-head ">
161+ < div class ="robot-antenna ">
162+ < div class ="antenna-ball "> </ div >
163+ </ div >
164+ < div class ="robot-eyes ">
165+ < div class ="robot-eye robot-eye-left "> </ div >
166+ < div class ="robot-eye robot-eye-right "> </ div >
167+ </ div >
168+ < div class ="robot-mouth "> </ div >
169+ </ div >
170+ < div class ="robot-body ">
171+ < div class ="robot-panel ">
172+ < div class ="robot-light robot-light-1 "> </ div >
173+ < div class ="robot-light robot-light-2 "> </ div >
174+ < div class ="robot-light robot-light-3 "> </ div >
175+ </ div >
176+ </ div >
177+ </ div >
178+ </ div >
179+ < span class ="loading-text "> Analyzing repository...</ span >
180+ < span class ="loading-subtext "> This may take a few moments</ span >
181+ </ div >
182+
183+ < div id ="repoErrorAlert " class ="error-alert hidden ">
184+ < div class ="error-header ">
185+ < svg class ="error-icon " viewBox ="0 0 24 24 ">
186+ < path d ="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z " fill ="#F44336 "/>
187+ </ svg >
188+ < span class ="error-title "> Analysis failed</ span >
189+ </ div >
190+ < div class ="error-content ">
191+ < p id ="repoErrorMessage "> Something went wrong during repository analysis. Please try again.</ p >
192+ </ div >
193+ </ div >
194+ </ div >
195+ </ div >
196+
197+ <!-- Rule Generation Section -->
84198 < div class ="card main-card ">
85199 < div class ="card-content ">
86- < h2 class ="section-title "> Your repo, your rules</ h2 >
200+ < h2 class ="section-title "> Create custom rules</ h2 >
87201 < p class ="section-description ">
88202 Use natural language to describe the rule you want to enforce on your repo, and we will generate the Watchflow config for it.
89203 </ p >
0 commit comments