public/src/index.html

   1 <!doctype html>
   2 <html>
   3     <head>
   4         <meta charset="utf-8">
   5         <meta http-equiv="X-UA-Compatible" content="IE=edge">
   6         <meta name="viewport" content="width=device-width, initial-scale=1.0">
   7
   8         <title>Tizen Image Configurator</title>
   9
  10         <link rel="shortcut icon" href="/image/tizen.ico">
  11         <link rel="stylesheet" href="/lib/bootstrap/css/bootstrap.css">
  12         <link rel="stylesheet" href="/lib/bootstrap-treeview/bootstrap-treeview.min.css">
  13         <link rel="stylesheet" href="/css/style.css">
  14         <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
  15         <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
  16         <!--[if lt IE 9]>
  17         <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
  18         <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
  19         <![endif]-->
  20     </head>
  21
  22     <body data-spy="scroll" data-target=".navbar-fixed-top">
  23         <!-- Navigation -->
  24         <nav class="navbar navbar-inverse navbar-fixed-top">
  25             <div class="container">
  26                 <div class="navbar-header">
  27                     <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
  28                         <span class="sr-only">Toggle navigation</span>
  29                         <span class="icon-bar"></span>
  30                         <span class="icon-bar"></span>
  31                         <span class="icon-bar"></span>
  32                     </button>
  33                     <a class="navbar-brand tic-page-scroll" href="#tic-package-section"><img id="tic-brand-img" src="image/tizen_32.png"/> Tizen Image Configurator</a>
  34                 </div>
  35
  36                 <!-- Collect the nav links, forms, and other content for toggling -->
  37                 <div id="navbar" class="collapse navbar-collapse">
  38                     <ul class="nav navbar-nav">
  39                         <li>
  40                             <a class="tic-page-scroll" href="#tic-package-section">Package</a>
  41                         </li>
  42                         <li>
  43                             <a class="tic-page-scroll"href="#tic-image-section">Image</a>
  44                         </li>
  45                         <li>
  46                             <a class="tic-page-scroll"href="#tic-settings-section">Settings</a>
  47                         </li>
  48                     </ul>
  49                 </div><!--/.nav-collapse -->
  50             </div><!-- /.container -->
  51         </nav>
  52
  53
  54         <!-- Package Section -->
  55         <section id="tic-package-section">
  56             <div class="container">
  57                 <div class="row">
  58                     <!-- Package Left Column -->
  59                     <div class="col-md-6">
  60                         <div class="panel panel-primary">
  61                             <div class="panel-body">
  62                                 <!-- Profile Toolbar -->
  63                                 <div class="btn-group btn-group-justified">
  64                                     <div class="btn-group">
  65                                         <button type="button" class="btn btn-primary">All</button>
  66                                     </div>
  67                                     <div class="btn-group">
  68                                         <button type="button" class="btn btn-primary">Common</button>
  69                                     </div>
  70                                     <div class="btn-group">
  71                                         <button type="button" class="btn btn-primary">Mobile</button>
  72                                     </div>
  73                                     <div class="btn-group">
  74                                         <button type="button" class="btn btn-primary">Wearable</button>
  75                                     </div>
  76                                     <div class="btn-group">
  77                                         <button type="button" class="btn btn-primary">TV</button>
  78                                     </div>
  79                                 </div>
  80                                 <!-- Package Tree Toolbar -->
  81                                 <div id="tic-package-left-col-tree-toolbar">
  82                                     <div class="input-group">
  83                                         <input type="text" class="form-control" placeholder="Start typing to filter list of packages" id="tic-package-left-col-tree-toolbar-filter"/>
  84                                         <div class="input-group-btn">
  85                                             <button type="button" class="btn btn-default"><!-- TODO: Filter Option -->
  86                                                 <span class="glyphicon glyphicon glyphicon-menu-hamburger" aria-hidden="true"/>
  87                                             </button>
  88                                             <button type="button" class="btn btn-default" id="tic-package-left-col-tree-toolbar-collapse-all">
  89                                                 <span class="glyphicon glyphicon glyphicon glyphicon-minus" aria-hidden="true"/>
  90                                             </button>
  91                                             <button type="button" class="btn btn-default" id="tic-package-left-col-tree-toolbar-expand-all">
  92                                                 <span class="glyphicon glyphicon glyphicon glyphicon-plus" aria-hidden="true"/>
  93                                             </button>
  94                                         </div>
  95                                     </div>
  96                                 </div>
  97                                 <!-- Package Tree -->
  98                                 <div id="tic-package-left-col-tree">
  99                                 </div>
 100                             </div>
 101                         </div>
 102                     </div><!-- /End Package Left Column -->
 103
 104                     <!-- Package Right Column -->
 105                     <div class="col-md-6">
 106                         <!-- Package Information -->
 107                         <div class="panel panel-primary">
 108                             <div class="panel-heading">Package Information</div>
 109                             <div class="panel-body">
 110                                 <table class="table  table-condensed ">
 111                                     <tbody>
 112                                         <tr><td>Name</td><td>TODO</td></tr>
 113                                         <tr><td>Version</td><td>TODO</td></tr>
 114                                         <tr><td>Summary</td><td>TODO</td></tr>
 115                                         <tr><td>Architecture</td><td>TODO</td></tr>
 116                                         <tr><td>Size</td><td>TODO</td></tr>
 117                                         <tr><td>Installed Size</td><td>TODO</td></tr>
 118                                         <tr><td>Dependency</td><td>TODO</td></tr>
 119                                         <tr><td>Description</td><td>TODO</td></tr>
 120                                     </tbody>
 121                                 </table>
 122                             </div>
 123                         </div>
 124                         <!-- Package Summary -->
 125                         <div class="panel panel-primary">
 126                             <div class="panel-heading">Summary</div>
 127                             <div class="panel-body">
 128                                 <h1>Bla Bla Bla...</h1>
 129                                 <h1>Image Size: Bla...</h1>
 130                             </div>
 131                             <div class="panel-footer">
 132                                 <a type="button" class="btn btn-default" href="#tic-image-section">Create Image</a>
 133                             </div>
 134                         </div>
 135                     </div><!-- /End Package Right Column -->
 136                 </div>
 137             </div><!-- /.container -->
 138         </section>
 139
 140
 141         <!-- Image Section -->
 142         <section id="tic-image-section">
 143             <div class="container">
 144                 <div class="row">
 145                     <!-- Image Column -->
 146                     <div class="col-md-6">
 147                         <div class="panel panel-primary">
 148                             <div class="panel-heading">Image</div>
 149                             <div class="panel-body">
 150                                 <h1>TODO</h1>
 151                                 <h1>Bla Bla Bla...</h1>
 152                                 <h1>Image Size: Bla...</h1>
 153                             </div>
 154                             <div class="panel-footer">
 155                                 <a type="button" class="btn btn-default" href="#tic-image-section">Create Image</a>
 156                             </div>
 157                         </div>
 158                     </div><!-- /End Image Column -->
 159
 160                     <!-- Image List Column -->
 161                     <div class="col-md-6">
 162                         <div class="panel panel-primary">
 163                             <div class="panel-heading">Image List</div>
 164                             <div class="panel-body">
 165                                 <h1>TODO</h1>
 166                                 <h1>Image1 Bla Bla Bla...</h1>
 167                                 <h1>Image2 Bla Bla Bla...</h1>
 168                                 <div class="progress">
 169                                     <div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width: 100%">
 170                                         <span class="sr-only">Time?</span>
 171                                     </div>
 172                                 </div>
 173                             </div>
 174                         </div>
 175                     </div><!-- /End Image List Column -->
 176                 </div>
 177             </div><!-- /.container -->
 178         </section>
 179
 180         <!-- Settings Section -->
 181         <section id="tic-settings-section">
 182             <div class="container">
 183                 <div class="row">
 184                     <!-- Settings Column -->
 185                     <div class="col-md-12">
 186                         <div class="panel panel-primary">
 187                             <div class="panel-body">
 188                                 <!-- Settings Toolbar -->
 189                                 <div>
 190                                     <button type="button" class="btn btn-default"><span class="glyphicon glyphicon glyphicon-import" aria-hidden="true"></span>Recipe Import</button>
 191                                     <button type="button" class="btn btn-default"><span class="glyphicon glyphicon glyphicon-export" aria-hidden="true"></span>Recipe Export</button>
 192                                 </div>
 193
 194                                 <!-- Repository Column -->
 195                                 <div class="panel panel-primary">
 196                                     <div class="panel-heading">Repository</div>
 197                                     <div class="panel-body">
 198                                         <div class="input-group">
 199                                             <input type="text" class="form-control" placeholder="Enter repository URL">
 200                                             <span class="input-group-btn">
 201                                                 <button class="btn btn-default" type="button">Add Repository</button>
 202                                             </span>
 203                                         </div>
 204                                         <div class="list-group">
 205                                             <li class="list-group-item">
 206                                                 TODO: URL
 207                                             </li>
 208                                         </div>
 209                                     </div>
 210                                 </div>
 211                             </div>
 212
 213                             <div class="panel-footer">
 214                                 <a type="button" class="btn btn-default" href="#tic-package-section">Apply</a>
 215                             </div>
 216                         </div>
 217                     </div><!-- /End Settings Column -->
 218                 </div>
 219             </div><!-- /.container -->
 220         </section>
 221
 222         <!-- Loading Dialog -->
 223         <div class="modal fade" id="tic-load-dialog" tabindex="-1" role="dialog" aria-hidden="true" data-backdrop="static">
 224             <div class="modal-dialog modal-sm">
 225                 <div class="modal-content">
 226                     <div class="modal-header">
 227                         <h4 class="modal-title"><span class="glyphicon glyphicon-time"/></span> Loading...</h4>
 228                     </div>
 229                     <div class="modal-body">
 230                         <div class="progress">
 231                             <div class="progress-bar progress-bar-striped active" style="width: 100%"/>
 232                         </div>
 233                     </div>
 234                 </div>
 235             </div>
 236         </div><!-- /End Loading Dialog -->
 237
 238         <!-- Alert Dialog -->
 239         <div class="alert alert-danger fade in">
 240         <!-- /End Alert Dialog -->
 241
 242
 243         <!-- library loading -->
 244         <script src="/socket.io/socket.io.js"></script>
 245         <script src="/lib/jquery/jquery.js"></script>
 246         <script src="/lib/bootstrap/js/bootstrap.js"></script>
 247         <script src="/lib/bootstrap-treeview/bootstrap-treeview.min.js"></script>
 248         <script src="/lib/lodash/lodash.js"></script>
 249         <script src="/js/config.js"></script>
 250         <script src="/lib/requirejs/require.js" data-main="js/main"></script>
 251     </body>
 252 </html>