File indexing completed on 2025-01-26 05:27:59 

0001 import React, { Component } from 'react';
0002 import IntroductionDetailCode from '../function/IntroductionDetailCode';
0003 import IntroductionDetailPublish from '../function/IntroductionDetailPublish';
0004 import IntroductionDetailCommunity from '../function/IntroductionDetailCommunity';
0005 import IntroductionDetailPersonal from '../function/IntroductionDetailPersonal';
0006 
0007 class Introduction extends Component {
0008   constructor(props){
0009         super(props);
0010     this.state = {isToggleOn: true};
0011     // This binding is necessary to make `this` work in the callback
0012    this.handleClick = this.handleClick.bind(this);
0013   }
0014 
0015   handleClick(t) {
0016     this.setState(state => ({
0017       isToggleOn: !state.isToggleOn,
0018       section:(t==state.section)?'':t
0019     }));
0020   }
0021   render() {
0022     let introductionDetail=null;
0023     switch (this.state.section) {
0024         case 'code':
0025           introductionDetail = <IntroductionDetailCode />;
0026           break;
0027         case 'publish':
0028           introductionDetail = <IntroductionDetailPublish />;
0029           break;
0030         case 'community':
0031           introductionDetail = <IntroductionDetailCommunity />;
0032           break;
0033         case 'personal':
0034           introductionDetail = <IntroductionDetailPersonal />;
0035           break;
0036         default:
0037           break;
0038       }
0039   return (
0040     <div className="introduction">
0041       <div className="introduction-head">
0042         <div className="intro-desc">
0043           <h1> Welcome to opendesktop.org</h1>
0044           <h4>
0045           OpenDesktop is a <a href="#network-sites">network of sites</a> that are all operated by Hive01 and follow the same <a href="#standards">open standards</a>.
0046           Get one account to use these libre services:
0047 
0048               <a href="#_" className="lightbox" id="network-sites">
0049               <div className="lightbox-container">
0050                 <h2>Network of sites</h2>
0051                 <ul>
0052                   <li>openCode.net</li>
0053                   <li>Pling.com</li>
0054                   <li>Forums and Chat</li>
0055                   <li>Personal cloud</li>
0056                 </ul>
0057               </div>
0058             </a>
0059 
0060             <a href="#_" className="lightbox" id="standards">
0061               <div class="lightbox-container">
0062                 <h2>Open standards</h2>
0063                 <ul>
0064                   <li>100% Libre software</li>
0065                   <li>We respect users privacy</li>
0066                   <li>We do not sell data</li>
0067                 </ul>
0068               </div>
0069             </a>
0070           </h4>
0071         </div>
0072         <div className="intro-menu">
0073         <ul>
0074           <li>
0075               <div className={this.state.section=='code'?'':''}>
0076               <a href={this.props.urlCode}><span className="link-code link-image">Code</span></a>
0077               <span className="showmore"><a className="link-code-showmore" onClick={()=>this.handleClick('code')}>Show more</a></span>
0078               </div>
0079           </li>
0080           <li>
0081             <div className={this.state.section=='publish'?'':''}>
0082               <a href={this.props.urlPublish}><span className="link-publish link-image">Store</span></a>
0083               <span className="showmore"><a className="link-publish-showmore" onClick={()=>this.handleClick('publish')}>Show more</a></span>
0084               </div>
0085           </li>
0086           <li>
0087               <div className={this.state.section=='community'?'':''}>
0088               <a href={this.props.urlCommunity}><span className="link-community link-image">Community</span></a>
0089               <span className="showmore"><a onClick={()=>this.handleClick('community')}>Show more</a></span>
0090               </div>
0091 
0092           </li>
0093           <li>
0094               <div className={this.state.section=='personal'?'':''}>
0095               <a href={this.props.urlPersonal}><span className="link-personal link-image">Personal Services (Beta)</span></a>
0096               <span className="showmore"><a onClick={()=>this.handleClick('personal')}>Show more</a></span>
0097               </div>
0098           </li>
0099         </ul>
0100       </div>
0101       </div>
0102       <div className="introduction-detail">
0103           {introductionDetail}
0104       </div>
0105     </div>
0106 
0107   )
0108   }
0109 }
0110 
0111 export default Introduction;