ver3-2.html

   1
   2 <!DOCTYPE html>
   3 <html lang="en">
   4         <head>
   5                 <meta charset="utf-8">
   6                 <meta http-equiv="X-UA-Compatible" content="IE=edge">
   7                 <meta name="viewport" content="width=device-width, initial-scale=1">
   8                 <title>Websystem integrated Tems</title>
   9                 <link rel="shortcut icon" type="image/x-icon" href="favicon.png" />
  10                 <link href="fonts/font-awesome-4.1.0/css/font-awesome.min.css" rel="stylesheet">
  11                 <link href="CSS/bootstrap-3.1.1.min.css" rel="stylesheet">
  12                 <link href="CSS/lollies.min.css" rel="stylesheet">
  13                 <link href="CSS/custom.css" rel="stylesheet">
  14                 <script type ="text/javascript" src="JS/practice.js"></script>
  15                 <script type="text/javascript"  src="JS/file.js"></script>
  16                 <script type="text/javascript" src="JS/option.js"></script>
  17                 <script src="JS/jquery-1.7.2.min.js"></script>
  18                 <script type="text/javascript" src="JS/canvas.jp"></script>
  19                 <!--[if lt IE 9]>
  20                         <script src="js/html5shiv-3.7.0.js"></script>
  21                         <script src="js/respond-1.4.2.js"></script>
  22                 <![endif]-->
  23         </head>
  24         <body onload="filemethod();SaveFileContents()">
  25                 <header id="main-header">
  26                         <div class="container">
  27                                 <div class="row">
  28                                         <div class="col-md-3 spacer"></div>
  29                                         <div class="col-md-6">
  30                                                 <!-- LOGO 4️--><b>W</b>ebsystem <b>I</b>ntegrated <b>T</b>ems
  31                                                 <div id="logo"><a href="/"><img src="http://placehold.it/720x200/149cd7/149cd7" /></a></div>
  32                                         </div>
  33                                         <div class="col-md-3 spacer"></div>
  34                                 </div>
  35                         </div>
  36                 </header>
  37                 <nav id="main-nav">
  38                         <div class="container">
  39                                 <div class="row">
  40                                         <div class="col-md-12">
  41                                                 <!-- NAVIGATION -->
  42                                                 <div class="navbar navbar-default" role="navigation">
  43                                                         <div class="navbar-header">
  44                                                                 <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
  45                                                                         <span class="sr-only">Toggle navigation</span>
  46                                                                         <span class="icon-bar"></span>
  47                                                                         <span class="icon-bar"></span>
  48                                                                         <span class="icon-bar"></span>
  49                                                                 </button>
  50                                                         </div>
  51                                                         <div class="navbar-collapse collapse">
  52                                                                 <ul class="nav navbar-nav nav-justified">
  53                                                                         <li id="mtab1"><a href="#" onclick="cngTab('1');FocusTab('mtab1')">Select Electoron Microscopy</a></li>
  54                                                                         <li id="mtab2"><a href="#" onclick="cngTab('2');FocusTab('mtab2')">Eucentric Height</a></li>
  55                                                                         <li id="mtab3"><a href="#" onclick="FocusTab('mtab3')">Single Particle Analysis</a></li>
  56                                                                         <li id="mtab4"><a href="#" onclick="FocusTab('mtab4')">Tomography</a></li>
  57                                                                         <li id="mtab5"><a href="#" onclick="FocusTab('mtab5')">MDS</a></li>
  58                                                                         <li id="mtab6"><a href="#" onclick="FocusTab('mtab6')">Nav Item 6</a></li>
  59                                                                         <li id="mtab7"><a href="#" onclick="FocusTab('mtab7')" >Nav Item7</a></li>
  60                                                                         <li class="dropdown" id="mtab8">
  61                                                                                 <a href="#" class="dropdown-toggle" data-toggle="dropdown" onclick="FocusTab('mtab8')">Option<b class="caret"></b></a>
  62                                                                                 <ul class="dropdown-menu">
  63                                                                                     <li class="dropdown">
  64                                                                                         <a href="#" class="dropdown-toggle" data-toggle="dropdown" onclick="bgColChangeDefault()">Change background<b class="caret"></b></a>
  65                                                                                             <li><a href="#" onclick="bgColChangeWhite()">White</a></li>
  66                                                                                             <li><a href="#" onclick="bgColChangeGrey()">grey</a></li>
  67                                                                                     </li>
  68                                                                                         <li><a href="#">Another action</a></li>
  69                                                                                         <li><a href="#">Something else here</a></li>
  70                                                                                         <li class="divider"></li>
  71                                                                                         <li class="dropdown-header">Nav header</li>
  72                                                                                         <li><a href="#">Separated link</a></li>
  73                                                                                         <li><a href="#">One more separated link</a></li>
  74                                                                                 </ul>
  75                                                                         </li>
  76                                                                 </ul>
  77                                                         </div>
  78                                                 </div>
  79                                         </div>
  80                                 </div>
  81                         </div>
  82                 </nav>
  83         <div id= 'introduce'>
  84                 <div class="content-block">
  85                         <div class="container">
  86                                 <div class="row">
  87                                         <div class="col-md-12">
  88                                                 <h1>You can control three Electron Microscopies from this site.</h1>
  89                                                 <p>Proin eu leo non metus vulputate viverra. Curabitur ac augue ante. Praesent nisl diam, iaculis eget ipsum at, blandit laoreet eros. Nam hendrerit, erat commodo varius consequat, dolor massa tempor massa, vel cursus enim neque pellentesque augue. Aenean ullamcorper et lacus at hendrerit. Phasellus id lectus luctus, congue quam id, tempor justo. Mauris sodales imperdiet nisi eget lacinia. Nulla vehicula eleifend nibh sed malesuada. Praesent eget tortor erat. Nullam a sapien sit amet enim tempor cursus. Sed vehicula nisl sed odio gravida aliquam. Sed metus lorem, vestibulum vel pulvinar vel, condimentum vitae risus. Curabitur in odio ut nisl convallis dapibus sollicitudin vitae orci. Aenean vel molestie massa. Nam vehicula porta arcu, at dapibus nulla pulvinar fermentum. Nam orci enim, elementum ac risus vestibulum, imperdiet placerat mi.</p>
  90
  91
  92                                         </div>
  93                                 </div>
  94                         </div>
  95                 </div>
  96         </div>
  97
  98         <div id="page2">
  99                 <div class="service-block">
 100                         <div class="container">
 101                                 <div class="row">
 102                                         <div class="col-md-4 col-sm-4">
 103                                                 <div class="animate-paraslide animatedEntrance">
 104                                                         <a href="#">
 105                                                                 <img src="http://placehold.it/720x850/21b2eb/058dcd" />
 106                                                                 <div class="overlay">
 107                                                                         <h3>HITACHI EF-2000</h3>
 108                                                                         <p>Connect this Electron Microscopy.</p>
 109                                                                 </div>
 110                                                         </a>
 111                                                 </div>
 112                                         </div>
 113                                         <div class="col-md-4 col-sm-4">
 114                                                 <div class="animate-paraslide animatedEntrance">
 115                                                         <a href="#">
 116                                                                 <img src="http://placehold.it/720x850/21b2eb/058dcd" />
 117                                                                 <div class="overlay">
 118                                                                         <h3>FEI TecnaiG^2 Spirit</h3>
 119                                                                         <p>Connect this Electron Microscopy.</p>
 120                                                                 </div>
 121                                                         </a>
 122                                                 </div>
 123                                         </div>
 124                                         <div class="col-md-4 col-sm-4">
 125                                                 <div class="animate-paraslide animatedEntrance">
 126                                                         <a href="#">
 127                                                                 <img src="http://placehold.it/720x850/21b2eb/058dcd" />
 128                                                                 <div class="overlay">
 129                                                                         <h3>JEOL JEM-2100</h3>
 130                                                                         <p>Connect this Electron Microscopy.</p>
 131                                                                 </div>
 132                                                         </a>
 133                                                 </div>
 134                                         </div>
 135                                 </div>
 136                         </div>
 137                 </div>
 138         </div>
 139         <div id="slider">
 140                 <div id="slider" class="slider-col">
 141                         <div class="container">
 142                                 <div class="row">
 143                                         <div class="col-md-12">
 144                                                 <div class="camera_slider">
 145                                                         <div data-src="http://placehold.it/1110x400/21b2eb/058dcd"></div>
 146                                                         <div data-src="http://placehold.it/1110x400/058dcd/21b2eb"></div>
 147                                                 </div>
 148                                         </div>
 149                                 </div>
 150                         </div>
 151                 </div>
 152         </div>
 153         <div id= 'eucentricheightcontents'>
 154         <div class="content-block">
 155                         <div class="container">
 156                                 <div class="row">
 157                                         <div class="col-md-12">
 158                                                 <h1>Eucentric Height</h1>
 159                                         </div>
 160                                 </div>
 161                                 <div class="row">
 162                                         <div class="col-md-6">
 163                                                 <div id="viewArea">
 164                                                    <canvas id="canvasOne" width="540" height="575"></canvas>
 165                                                 </div>
 166                                         </div>
 167                                         <div class="col-md-6">
 168                                                 <h2>Defines the position of specimen</h2>
 169                                                 <p>Proin eu leo non metus vulputate viverra. Curabitur ac augue ante. Praesent nisl diam, iaculis eget ipsum at, blandit laoreet eros. Nam hendrerit, erat commodo varius consequat, dolor massa tempor massa, vel cursus enim neque pellentesque augue. Aenean ullamcorper et lacus at hendrerit. Phasellus id lectus luctus, congue quam id, tempor justo. Mauris sodales imperdiet nisi eget lacinia. Nulla vehicula eleifend nibh sed malesuada. Praesent eget tortor erat. Nullam a saPpien sit amet enim tempor cursus. Sed vehicula nisl sed odio gravida aliquam.</p>
 170                                                 <h2>Control Electron Microscopy</h2>
 171                                                 <p>
 172                                                 <form name="test">
 173                                                 <input type="file" id="exsample" onchange="SaveFileContents()"/>
 174                                                 <span id="con"></span><br>
 175                                                 <span id="change">/////Value of File/////</span>
 176                                                 </form>
 177                                                 <p>
 178                                                 <form name="eucentric" id="eucentricid" action="">
 179                                                 <div class="form-group">
 180                                                         <label>max tilt</label>
 181                                                         <input type="number" name="maxtilt" id="maxtiltid" onchange="SaveFileContents()" onclick="SaveFileContents()">nm
 182                                                 </div>
 183                                                 </p>
 184                                                 <p>
 185                                                 <div class="form-group">
 186                                                         <label>speed   </label>
 187                                                         &nbsp;&nbsp;
 188                                                         <input type="number" name="speed" id="speed" onchange="SaveFileContents()" onclick="SaveFileContents()">nm
 189                                                 </div>
 190                                                 </p>
 191                                                 <p>
 192                                                 <div class="form-group">
 193                                                         <label>z-shift</label>
 194                                                         &nbsp;&nbsp;
 195                                                         <input type="number" name="zshift" id="zshift" onchange="SaveFileContents()" onclick="SaveFileContents()">nm
 196                                                 </div>
 197                                                 </p>
 198                                                 </form>
 199                                                 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
 200                                                 <button type="submit" class="btn btn-default" id="submit" onclick="SaveFileContents()">Start</button>
 201                                                 &nbsp;&nbsp;
 202                                                 <button type="submit" class="btn btn-default" id="submit">Stop</button>
 203                                                 <br>
 204                                                 <br>
 205                                                 <p>
 206                                                     Save condition<br>
 207                                                     <form name="save" id="saveid">
 208                                                     Condition：<textarea id="text" rows="1" cols="55"></textarea><br>
 209                                                     File name：<input id="name" placeholder="mytext">.txt<br>
 210                                                     &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<button onclick="TextSave()" class="btn btn-default">Save</button><br>
 211                                                     <a id='DL_link'></a>
 212                                                     </form>
 213                                                 </p>
 214                                         </div>
 215                                 </div>
 216                         </div>
 217         </div>
 218         </div>
 219         <div id='form'>
 220         <div class="form-block">
 221                         <div class="container">
 222                                 <div class="row">
 223                                         <div class="col-md-6 col-sm-6">
 224                                                 <img src="http://placehold.it/720x850/21b2eb/058dcd" />
 225                                         </div>
 226                                         <div class="col-md-6 col-sm-6">
 227                                                 <form method="post" id="custom_form" name="custom_form">
 228                                                         <div class="form-group">
 229                                                                 <label >Name</label>
 230                                                                 <input  type="text" id="name" name="name" class="form-control">
 231                                                         </div>
 232                                                         <div class="form-group">
 233                                                                 <label >Email</label>
 234                                                                 <input type="text" id="email" name="email" class="form-control" >
 235                                                         </div>
 236                                                         <div class="form-group">
 237                                                                 <label >Message</label>
 238                                                                 <textarea type="text" id="message" name="message" class="form-control"></textarea>
 239                                                         </div>
 240                                                         <div class="form-group">
 241                                                                 <label>Captcha (case sensitive)</label>
 242                                                                 <div id="spambox">
 243                                                                         <div class="spam"></div>
 244                                                                 </div>
 245                                                         </div>
 246                                                         <button type="submit" class="btn btn-default" id="submit">Submit</button>
 247                                                 </form>
 248                                         </div>
 249                                 </div>
 250                         </div>
 251         </div>
 252         </div>
 253                                                                 <!-- SCRIPTS -->
 254                 <script src="JS/jquery-1.7.2.min.js"></script>
 255                 <script src="JS/bootstrap-3.1.1.min.js"></script>
 256                 <script src="plugins/backstretch/backstretch-2.0.4.min.js"></script>
 257                 <script src="plugins/camera-slider/camera-slider-1.3.4.min.js"></script>
 258                 <script src="plugins/camera-slider/easing-1.3.min.js"></script>
 259                 <script src="plugins/fancybox/fancybox-1.3.4.pack.js"></script>
 260                 <script src="plugins/fancybox/klass-1.0.min.js"></script>
 261                 <script src="plugins/fancybox/photoswipe-3.0.5.min.js"></script>
 262                 <script src="plugins/hover-animations/transform2d.min.js"></script>
 263                 <script src="plugins/hover-animations/hover-animations-1.0.min.js"></script>
 264                 <script src="plugins/match-height/match-height-0.5.1.min.js"></script>
 265                 <script src="plugins/validation/validation-2.2.min.js"></script>
 266                 <script src="http://maps.google.com/maps/api/js?sensor=false"></script>
 267                 <script src="JS/lollies.min.js"></script>
 268                 <script src="JS/custom.js"></script>
 269         </body>
 270 </html>