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="/lib/components-font-awesome/css/font-awesome.min.css">
  14         <link rel="stylesheet" href="/css/style.css">
  15         <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
  16         <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
  17         <!--[if lt IE 9]>
  18         <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
  19         <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
  20         <![endif]-->
  21     </head>
  22
  23     <body data-spy="scroll" data-target=".navbar-fixed-top">
  24         <!-- Navigation -->
  25         <nav class="navbar navbar-inverse navbar-fixed-top">
  26             <div class="container">
  27                 <div class="navbar-header">
  28                     <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
  29                         <span class="sr-only">Toggle navigation</span>
  30                         <span class="icon-bar"></span>
  31                         <span class="icon-bar"></span>
  32                         <span class="icon-bar"></span>
  33                     </button>
  34                     <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>
  35                 </div>
  36
  37                 <!-- Collect the nav links, forms, and other content for toggling -->
  38                 <div id="navbar" class="collapse navbar-collapse">
  39                     <ul class="nav navbar-nav">
  40                         <li>
  41                             <a class="tic-page-scroll" href="#tic-package-section">Package</a>
  42                         </li>
  43                         <li>
  44                             <a class="tic-page-scroll"href="#tic-image-section">Image</a>
  45                         </li>
  46                         <li>
  47                             <a class="tic-page-scroll"href="#tic-settings-section">Settings</a>
  48                         </li>
  49                     </ul>
  50                 </div><!--/.nav-collapse -->
  51             </div><!-- /.container -->
  52         </nav>
  53
  54
  55         <!-- Package Section -->
  56         <section id="tic-package-section">
  57             <div class="container">
  58                 <div class="row">
  59                     <!-- Package Left Column -->
  60                     <div class="col-md-6">
  61                         <div class="panel panel-primary">
  62                             <div class="panel-body">
  63                                 <!-- Profile Toolbar -->
  64                                 <div class="btn-group btn-group-justified">
  65                                     <div class="btn-group">
  66                                         <button type="button" class="btn btn-primary">All</button>
  67                                     </div>
  68                                     <div class="btn-group">
  69                                         <button type="button" class="btn btn-primary">Common</button>
  70                                     </div>
  71                                     <div class="btn-group">
  72                                         <button type="button" class="btn btn-primary">Mobile</button>
  73                                     </div>
  74                                     <div class="btn-group">
  75                                         <button type="button" class="btn btn-primary">Wearable</button>
  76                                     </div>
  77                                     <div class="btn-group">
  78                                         <button type="button" class="btn btn-primary">TV</button>
  79                                     </div>
  80                                 </div>
  81                                 <!-- Package Tree Toolbar -->
  82                                 <div id="tic-package-left-col-tree-toolbar">
  83                                     <div class="input-group">
  84                                         <div class="form-group has-feedback has-clear">
  85                                             <input type="text" class="form-control" placeholder="Start typing to filter list of packages" id="tic-package-toolbar-input"/>
  86                                             <span class="form-control-clear glyphicon glyphicon-remove form-control-feedback hidden" id="tic-package-toolbar-input-clear"></span>
  87                                         </div>
  88                                         <div class="input-group-btn">
  89                                             <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
  90                                                 <i class="fa fa-navicon"></i>
  91                                             </button>
  92                                             <ul class="dropdown-menu dropdown-menu-right">
  93                                                 <li><a id="tic-package-toolbar-checkall">Check All</a></li>
  94                                                 <li><a id="tic-package-toolbar-uncheckall">Uncheck All</a></li>
  95                                             </ul>
  96                                             <button type="button" class="btn btn-default" id="tic-package-left-col-tree-toolbar-collapse-all">
  97                                                 <i class="fa fa-minus"></i>
  98                                             </button>
  99                                             <button type="button" class="btn btn-default" id="tic-package-left-col-tree-toolbar-expand-all">
 100                                                 <i class="fa fa-plus"></i>
 101                                             </button>
 102                                         </div>
 103                                     </div>
 104                                 </div>
 105                                 <!-- Package Tree -->
 106                                 <div id="tic-package-left-col-tree">
 107                                 </div>
 108                             </div>
 109                         </div>
 110                     </div><!-- /End Package Left Column -->
 111
 112                     <!-- Package Right Column -->
 113                     <div class="col-md-6">
 114                         <!-- Package Information -->
 115                         <div class="panel panel-primary">
 116                             <div class="panel-heading">Package Information</div>
 117                             <div class="panel-body">
 118                                 <table id="tic-package-info-table" class="table table-condensed">
 119                                     <tbody>
 120                                         <tr><td>Name</td><td id="tic-package-info-text"></td></tr>
 121                                         <tr><td>Version</td><td id="tic-package-info-version"></td></tr>
 122                                         <tr><td>Architecture</td><td id="tic-package-info-arch"></td></tr>
 123                                         <tr><td>Size</td><td id="tic-package-info-size"></td></tr>
 124                                         <tr><td>Installed Size</td><td id="tic-package-info-installed-size"></td></tr>
 125                                         <tr><td>Summary</td><td id="tic-package-info-summary"></td></tr>
 126                                         <tr><td>Description</td><td id="tic-package-info-description"></td></tr>
 127                                         <tr><td>Dependency</td><td id="tic-package-info-dependency"></td></tr>
 128                                     </tbody>
 129                                 </table>
 130                             </div>
 131                         </div>
 132                         <!-- Package Summary -->
 133                         <div class="panel panel-primary">
 134                             <div class="panel-heading">Summary</div>
 135                             <div class="panel-body">
 136                                 <table id="tic-package-summary" class="table table-condensed">
 137                                     <tbody>
 138                                         <tr><td>Image Size</td><td id="tic-package-image-size"></td></tr>
 139                                         <tr><td>Image Installed Size</td><td id="tic-package-image-installed-size"></td></tr>
 140                                         <tr><td>Number of Packages</td><td id="tic-package-count"></td></tr>
 141                                         <tr><td>Package List</td><td id="tic-package-list"></td></tr>
 142                                     </tbody>
 143                                 </table>
 144                             </div>
 145                             <div class="panel-footer">
 146                                 <a type="button" id="tic-package-create" class="btn btn-primary disabled" href="#tic-image-section">Create Image</a>
 147                             </div>
 148                         </div>
 149                     </div><!-- /End Package Right Column -->
 150                 </div>
 151             </div><!-- /.container -->
 152         </section>
 153
 154
 155         <!-- Image Section -->
 156         <section id="tic-image-section">
 157             <div class="container">
 158                 <div class="row">
 159                     <!-- Image Column -->
 160                     <div class="col-md-6">
 161                         <div class="panel panel-primary">
 162                             <div class="panel-heading">Image</div>
 163                             <div class="panel-body">
 164                                 <table id="tic-image-summary" class="table table-condensed">
 165                                     <tbody>
 166                                         <tr><td>Image Size</td><td id="tic-image-image-size"></td></tr>
 167                                         <tr><td>Image Installed Size</td><td id="tic-image-image-installed-size"></td></tr>
 168                                         <tr><td>Number of Packages</td><td id="tic-image-package-count"></td></tr>
 169                                         <tr><td>Package List</td><td id="tic-image-package-list"></td></tr>
 170                                     </tbody>
 171                                 </table>
 172                             </div>
 173                             <div class="panel-footer">
 174                                 <button type="button" id="tic-image-create" class="btn btn-primary">Create Image</button>
 175                             </div>
 176                         </div>
 177                     </div><!-- /End Image Column -->
 178
 179                     <!-- Image List Column -->
 180                     <div class="col-md-6">
 181                         <div class="panel panel-primary">
 182                             <div class="panel-heading">Image List</div>
 183                             <div class="panel-body">
 184                                 <ul class="list-group" id="tic-image-list"></ul>
 185                                 <!-- Create an image -->
 186                                 <div id="tic-image-new-container">
 187                                     <div class="infoboxheader">
 188                                         <h4>Create an image</h4>
 189                                     </div>
 190                                     <div class="infobox info" id="tic-image-new">
 191                                         <div id="tic-image-new-log"></div>
 192                                     </div>
 193                                 </div>
 194                             </div>
 195                         </div>
 196                     </div><!-- /End Image List Column -->
 197                 </div>
 198             </div><!-- /.container -->
 199         </section>
 200
 201
 202         <!-- Settings Section -->
 203         <section id="tic-settings-section">
 204             <div class="container">
 205                 <div class="row">
 206                     <!-- Settings Column -->
 207                     <div class="col-md-12">
 208                         <div class="panel panel-primary">
 209                             <div class="panel-body">
 210                                 <!-- Settings Toolbar -->
 211                                 <div id="tic-repository-toolbar">
 212                                     <button type="button" id="tic-repository-recipe-import" class="btn btn-default"><i class="fa fa-download"></i> Recipe Import</button>
 213                                     <button type="button" id="tic-repository-recipe-export" class="btn btn-default"><i class="fa fa-upload"></i> Recipe Export</button>
 214                                 </div>
 215
 216                                 <!-- Repository Column -->
 217                                 <div class="panel panel-primary">
 218                                     <div class="panel-heading">Repository</div>
 219                                     <div class="panel-body">
 220                                         <div class="input-group">
 221                                             <div class="form-group has-feedback has-clear">
 222                                                 <input id="tic-repository-input" type="text" class="form-control" placeholder="Enter repository URL">
 223                                                 <span id="tic-repository-input-clear" class="form-control-clear glyphicon glyphicon-remove form-control-feedback hidden"></span>
 224                                             </div>
 225                                             <span class="input-group-btn">
 226                                                 <button type="button" id="tic-repository-add"class="btn btn-default">Add Repository</button>
 227                                             </span>
 228                                         </div>
 229                                         <ol id="tic-repository-list" class="list-group"></ol>
 230                                     </div>
 231                                 </div>
 232                             </div>
 233
 234                             <div class="panel-footer">
 235                                 <a id="tic-repository-apply" type="button" class="btn btn-primary" href="#tic-package-section">Apply</a>
 236                             </div>
 237                         </div>
 238                     </div><!-- /End Settings Column -->
 239                 </div>
 240             </div><!-- /.container -->
 241         </section>
 242
 243
 244         <!-- Loading Dialog -->
 245         <div class="modal fade" id="tic-load-dialog" tabindex="-1" role="dialog" aria-hidden="true" data-backdrop="static">
 246             <i class="fa fa-spinner fa-pulse fa-3x fa-fw"></i>
 247         </div><!-- /End Loading Dialog -->
 248
 249         <!-- Alert Dialog -->
 250         <div class="modal fade" id="tic-alert-dialog" tabindex="-1" role="dialog" aria-hidden="true" data-backdrop="static">
 251             <div class="modal-dialog modal-sm">
 252                 <div class="modal-content">
 253                     <div class="modal-body">
 254                         <p id="tic-alert-content"></p>
 255                     </div>
 256                     <div class="modal-footer">
 257                         <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
 258                 </div>
 259                 </div>
 260             </div>
 261         </div><!-- /End Alert Dialog -->
 262
 263         <!-- Confirm Dialog -->
 264         <div class="modal fade" id="tic-confirm-dialog" tabindex="-1" role="dialog" aria-hidden="true" data-backdrop="static">
 265             <div class="modal-dialog modal-sm">
 266                 <div class="modal-content">
 267                     <div class="modal-body">
 268                         <p id="tic-confirm-content"></p>
 269                     </div>
 270                     <div class="modal-footer">
 271                         <button id="tic-confirm-ok" type="button" class="btn btn-primary" data-dismiss="modal">OK</button>
 272                         <button id="tic-confirm-cancel" type="button" class="btn btn-danger" data-dismiss="modal">Cancel</button>
 273                    </div>
 274                 </div>
 275             </div>
 276         </div><!-- /End Confirm Dialog -->
 277
 278
 279         <!-- library loading -->
 280         <script src="/socket.io/socket.io.js"></script>
 281         <script src="/lib/bootstrap/js/bootstrap.js"></script>
 282         <script src="/lib/bootstrap-treeview/bootstrap-treeview.min.js"></script>
 283         <script src="/lib/jquery/jquery.js"></script>
 284         <script src="/lib/jquery-sortable/jquery-sortable.js"></script>
 285         <script src="/lib/lodash/lodash.js"></script>
 286         <script src="/js/config.js"></script>
 287         <script src="/lib/requirejs/require.js" data-main="js/main"></script>
 288     </body>
 289 </html>