@@ -161,9 +161,41 @@ <h1 class="text-5xl font-bold mb-4 text-gray-50">
161161 <!--A new path to collective intelligence: <span class='text-red-400'>private</span>, <span class='text-yellow-400'>dynamic</span>, and <span class='text-teal-400'>owned by all</span>.-->
162162 </ p >
163163
164- <!-- Command + Copy Button -->
164+ <!-- Download Button + Documentation Button -->
165165 < div class ="flex items-center space-x-6 ">
166- < button id ="join-network " href ='https://distributedknowledge.org/download ' class ='uk-btn uk-btn-default bg-gray-50 text-gray-700 hover:text-gray-700 '> Join the Network</ button >
166+ < div class ="relative inline-block ">
167+ < div class ="flex ">
168+ < button id ="download-button " class ='uk-btn uk-btn-default bg-gray-50 text-gray-700 hover:text-gray-700 download-btn flex items-center gap-x-2 rounded-r-none '>
169+ < span > Download</ span >
170+ < span id ="os-icon "> </ span >
171+ </ button >
172+ < button id ="dropdown-toggle " class ='uk-btn uk-btn-default bg-gray-50 text-gray-700 hover:text-gray-700 border-l border-gray-300 rounded-l-none px-2 '>
173+ < i data-lucide ="chevron-down " class ="w-4 h-4 "> </ i >
174+ </ button >
175+ </ div >
176+ < div id ="os-dropdown " class ="absolute left-0 mt-1 bg-gray-50 border border-gray-300 rounded-md shadow-lg z-10 w-full hidden ">
177+ < ul class ="py-1 ">
178+ < li >
179+ < a href ="/download/app/windows " class ="flex items-center px-4 py-2 text-sm text-gray-700 hover:bg-gray-200 ">
180+ < img src ="/static/images/windows_logo.svg " width ="20 " height ="20 " class ="mr-2 " />
181+ Windows
182+ </ a >
183+ </ li >
184+ < li >
185+ < a href ="/download/app/darwin " class ="flex items-center px-4 py-2 text-sm text-gray-700 hover:bg-gray-200 ">
186+ < img src ="/static/images/apple_logo.svg " width ="20 " height ="20 " class ="mr-2 " />
187+ macOS
188+ </ a >
189+ </ li >
190+ < li >
191+ < a href ="/download/app/linux " class ="flex items-center px-4 py-2 text-sm text-gray-700 hover:bg-gray-200 ">
192+ < img src ="/static/images/linux_logo.svg " width ="20 " height ="20 " class ="mr-2 " />
193+ Linux
194+ </ a >
195+ </ li >
196+ </ ul >
197+ </ div >
198+ </ div >
167199 < button id ="documentation-button " href ='https://openmined.github.io/DistributedKnowledge/ ' class ='uk-btn uk-btn-default gap-x-1 '>
168200 < i data-lucide ="book-text " class ="w-5 h-5 "> </ i >
169201 Documentation
@@ -463,9 +495,59 @@ <h1 class='text-3xl text-center'>The next advance of AI isn't bigger, it's conn
463495 } ) ;
464496 } ) ;
465497
466- document . getElementById ( 'join-network' ) . addEventListener ( 'click' , function ( event ) {
498+ // Detect OS and show appropriate icon
499+ function detectOS ( ) {
500+ let userAgent = window . navigator . userAgent ;
501+ let osIcon = document . getElementById ( 'os-icon' ) ;
502+
503+ if ( userAgent . indexOf ( "Windows" ) !== - 1 ) {
504+ osIcon . innerHTML = '<img src="/static/images/windows_logo.svg" width="24" height="24" data-uk-svg />' ;
505+ return "windows" ;
506+ } else if ( userAgent . indexOf ( "Mac" ) !== - 1 ) {
507+ osIcon . innerHTML = '<img src="/static/images/apple_logo.svg" width="24" height="24" data-uk-svg />' ;
508+ return "mac" ;
509+ } else if ( userAgent . indexOf ( "Linux" ) !== - 1 ) {
510+ osIcon . innerHTML = '<img src="/static/images/linux_logo.svg" width="24" height="24" data-uk-svg />' ;
511+ return "linux" ;
512+ } else {
513+ // Default icon if OS can't be detected
514+ osIcon . innerHTML = '' ;
515+ return "unknown" ;
516+ }
517+ }
518+
519+ // Run OS detection when page loads
520+ let currentOS = detectOS ( ) ;
521+
522+ // Handle main download button click
523+ document . getElementById ( 'download-button' ) . addEventListener ( 'click' , function ( event ) {
467524 event . preventDefault ( ) ; // Prevent default action
468- window . location . href += "/download" ; // Manually navigate
525+ if ( currentOS === "windows" ) {
526+ window . location . href += "/download/app/windows" ;
527+ } else if ( currentOS === "mac" ) {
528+ window . location . href += "/download/app/darwin" ;
529+ } else if ( currentOS === "linux" ) {
530+ window . location . href += "/download/app/linux" ;
531+ } else {
532+ window . location . href += "/download" ; // Default download page
533+ }
534+ } ) ;
535+
536+ // Handle dropdown toggle
537+ document . getElementById ( 'dropdown-toggle' ) . addEventListener ( 'click' , function ( event ) {
538+ event . preventDefault ( ) ;
539+ event . stopPropagation ( ) ;
540+ document . getElementById ( 'os-dropdown' ) . classList . toggle ( 'hidden' ) ;
541+ } ) ;
542+
543+ // Close dropdown when clicking outside
544+ document . addEventListener ( 'click' , function ( event ) {
545+ const dropdown = document . getElementById ( 'os-dropdown' ) ;
546+ const dropdownToggle = document . getElementById ( 'dropdown-toggle' ) ;
547+
548+ if ( ! dropdown . contains ( event . target ) && event . target !== dropdownToggle ) {
549+ dropdown . classList . add ( 'hidden' ) ;
550+ }
469551 } ) ;
470552
471553 document . getElementById ( 'documentation-button' ) . addEventListener ( 'click' , function ( event ) {
@@ -476,7 +558,15 @@ <h1 class='text-3xl text-center'>The next advance of AI isn't bigger, it's conn
476558
477559 document . getElementById ( 'join-network-again' ) . addEventListener ( 'click' , function ( event ) {
478560 event . preventDefault ( ) ; // Prevent default action
479- window . location . href += "/download" ; // Manually navigate
561+ if ( currentOS === "windows" ) {
562+ window . location . href += "/download/app/windows" ;
563+ } else if ( currentOS === "mac" ) {
564+ window . location . href += "/download/app/darwin" ;
565+ } else if ( currentOS === "linux" ) {
566+ window . location . href += "/download/app/linux" ;
567+ } else {
568+ window . location . href += "/download" ; // Default download page
569+ }
480570 } ) ;
481571
482572
0 commit comments