@@ -225,4 +225,75 @@ html(lang=lang, dir=dir)
225225
226226 .zen-quote = t .summary .quote
227227
228- script( src ="src/main.js" )
228+ script .
229+ // JavaScript functions from original HTML
230+ const frameworks = [' React' , ' Vue.js' , ' Angular' , ' Svelte' , ' Solid' , ' Alpine.js' , ' Lit' , ' Preact' , ' Qwik' , ' SvelteKit' , ' Next.js' , ' Nuxt.js' ];
231+
232+ function filterFrameworks (value ) {
233+ const results = document .getElementById (' js-results' );
234+ if (! value) {
235+ results .style .display = ' none' ;
236+ return ;
237+ }
238+ const filtered = frameworks .filter (fw => fw .toLowerCase ().includes (value .toLowerCase ()));
239+ results .innerHTML = filtered .map (fw => ` <div style="padding:8px; cursor:pointer;" onclick="selectFramework('${ fw} ')">${ fw} </div>` ).join (' ' );
240+ results .style .display = filtered .length ? ' block' : ' none' ;
241+ }
242+
243+ function selectFramework (fw ) {
244+ document .getElementById (' js-search' ).value = fw;
245+ document .getElementById (' js-results' ).style .display = ' none' ;
246+ }
247+
248+ function startNativeProgress () {
249+ const progress = document .getElementById (' nativeProgress' );
250+ const text = document .getElementById (' nativeProgressText' );
251+ let value = 0 ;
252+ const interval = setInterval (() => {
253+ value += Math .random () * 15 ;
254+ if (value >= 100 ) {
255+ value = 100 ;
256+ clearInterval (interval);
257+ }
258+ progress .value = value;
259+ text .textContent = Math .round (value) + ' %' ;
260+ }, 200 );
261+ }
262+
263+ function toggleContent (id ) {
264+ document .getElementById (id).classList .toggle (" active" );
265+ }
266+
267+ function openJSModal () {
268+ document .getElementById (' jsModal' ).style .display = ' flex' ;
269+ }
270+
271+ function closeJSModal () {
272+ document .getElementById (' jsModal' ).style .display = ' none' ;
273+ }
274+
275+ function validateJSForm (event ) {
276+ event .preventDefault ();
277+ alert (' Custom validation would run here' );
278+ return false ;
279+ }
280+
281+ function startJSProgress () {
282+ const bar = document .getElementById (' jsProgress' );
283+ const text = document .getElementById (' jsProgressText' );
284+ let width = 0 ;
285+ const interval = setInterval (() => {
286+ width += Math .random () * 15 ;
287+ if (width >= 100 ) {
288+ width = 100 ;
289+ clearInterval (interval);
290+ }
291+ bar .style .width = width + ' %' ;
292+ text .textContent = Math .round (width) + ' %' ;
293+ }, 200 );
294+ }
295+
296+ function openDatePicker () {
297+ const picker = document .getElementById (' datePicker' );
298+ picker .style .display = picker .style .display === ' none' ? ' block' : ' none' ;
299+ }
0 commit comments