5 <meta http-equiv="X-UA-Compatible" content="IE=edge">
6 <meta name="viewport" content="width=device-width, initial-scale=1.0">
8 <title>Tizen Image Creator (TIC)</title>
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:// -->
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>
23 <body data-spy="scroll" data-target=".navbar-fixed-top">
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>
34 <a class="navbar-brand tic-page-scroll" href="#tic-package-section"><img id="tic-brand-img" src="image/tizen_32.png"/> Tizen Image Creator (TIC)</a>
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">
41 <a class="tic-page-scroll" href="#tic-package-section">Package</a>
44 <a class="tic-page-scroll"href="#tic-image-section">Image</a>
47 <a class="tic-page-scroll"href="#tic-settings-section">Settings</a>
50 </div><!--/.nav-collapse -->
51 </div><!-- /.container -->
55 <!-- Package Section -->
56 <section id="tic-package-section">
57 <div class="container">
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>
68 <div class="btn-group">
69 <button type="button" class="btn btn-primary">Common</button>
71 <div class="btn-group">
72 <button type="button" class="btn btn-primary">Mobile</button>
74 <div class="btn-group">
75 <button type="button" class="btn btn-primary">Wearable</button>
77 <div class="btn-group">
78 <button type="button" class="btn btn-primary">TV</button>
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>
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>
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>
96 <button type="button" class="btn btn-default" id="tic-package-left-col-tree-toolbar-collapse-all">
97 <i class="fa fa-minus"></i>
99 <button type="button" class="btn btn-default" id="tic-package-left-col-tree-toolbar-expand-all">
100 <i class="fa fa-plus"></i>
105 <!-- Package Tree -->
106 <div id="tic-package-left-col-tree">
110 </div><!-- /End Package Left Column -->
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">
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 <span class="badge" id="tic-package-info-dependency-badge"></span></td><td id="tic-package-info-dependency"></td></tr>
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">
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>Package List <span class="badge" id="tic-package-list-badge"></span></td><td id="tic-package-list"></td></tr>
144 <div class="panel-footer">
145 <a type="button" id="tic-package-create" class="btn btn-primary disabled" href="#tic-image-section">Create Image</a>
148 </div><!-- /End Package Right Column -->
150 </div><!-- /.container -->
154 <!-- Image Section -->
155 <section id="tic-image-section">
156 <div class="container">
158 <!-- Image Column -->
159 <div class="col-md-6">
160 <div class="panel panel-primary">
161 <div class="panel-heading">Image</div>
162 <div class="panel-body">
163 <table id="tic-image-summary" class="table table-condensed">
165 <tr><td>Image Size</td><td id="tic-image-image-size"></td></tr>
166 <tr><td>Image Installed Size</td><td id="tic-image-image-installed-size"></td></tr>
167 <tr><td>Package List <span class="badge" id="tic-image-package-list-badge"></span></td><td id="tic-image-package-list"></td></tr>
173 <div class="panel panel-primary">
174 <div class="panel-heading">Create Image</div>
175 <div class="panel-body">
176 <div id="tic-image-new-log"></div>
178 <div class="panel-footer">
179 <button type="button" id="tic-image-create" class="btn btn-primary">Create Image</button>
180 <button type="button" id="tic-image-cancel" class="btn btn-danger hidden">Cancel</button>
183 </div><!-- /End Image Column -->
185 <!-- Image List Column -->
186 <div class="col-md-6">
187 <div class="panel panel-primary">
188 <div class="panel-heading">Image List</div>
189 <div class="panel-body">
190 <ul class="list-group" id="tic-image-list"></ul>
193 </div><!-- /End Image List Column -->
195 </div><!-- /.container -->
199 <!-- Settings Section -->
200 <section id="tic-settings-section">
201 <div class="container">
203 <!-- Settings Column -->
204 <div class="col-md-12">
205 <div class="panel panel-primary">
206 <div class="panel-heading">Settings</div>
207 <div class="panel-body">
208 <!-- Settings Toolbar -->
209 <div id="tic-repository-toolbar">
210 <button type="button" id="tic-repository-recipe-import" class="btn btn-default"><i class="fa fa-download"></i> Recipe Import</button>
211 <button type="button" id="tic-repository-recipe-export" class="btn btn-default"><i class="fa fa-upload"></i> Recipe Export</button>
214 <!-- Repository Column -->
215 <div class="panel panel-primary">
216 <div class="panel-heading">Repository</div>
217 <div class="panel-body">
218 <div class="input-group">
219 <div class="form-group has-feedback has-clear">
220 <input id="tic-repository-input" type="text" class="form-control" placeholder="Enter repository URL">
221 <span id="tic-repository-input-clear" class="form-control-clear glyphicon glyphicon-remove form-control-feedback hidden"></span>
223 <span class="input-group-btn">
224 <button type="button" id="tic-repository-add"class="btn btn-default">Add Repository</button>
227 <ol id="tic-repository-list" class="list-group"></ol>
232 <div class="panel-footer">
233 <a id="tic-repository-apply" type="button" class="btn btn-primary" href="#tic-package-section">Apply</a>
236 </div><!-- /End Settings Column -->
238 </div><!-- /.container -->
242 <!-- Loading Dialog -->
243 <div class="modal fade" id="tic-load-dialog" tabindex="-1" role="dialog" aria-hidden="true" data-backdrop="static">
244 <i class="fa fa-spinner fa-pulse fa-3x fa-fw"></i>
245 </div><!-- /End Loading Dialog -->
247 <!-- Alert Dialog -->
248 <div class="modal fade" id="tic-alert-dialog" tabindex="-1" role="dialog" aria-hidden="true" data-backdrop="static">
249 <div class="modal-dialog modal-sm">
250 <div class="modal-content">
251 <div class="modal-body">
252 <p id="tic-alert-content"></p>
254 <div class="modal-footer">
255 <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
259 </div><!-- /End Alert Dialog -->
261 <!-- Confirm Dialog -->
262 <div class="modal fade" id="tic-confirm-dialog" tabindex="-1" role="dialog" aria-hidden="true" data-backdrop="static">
263 <div class="modal-dialog modal-sm">
264 <div class="modal-content">
265 <div class="modal-body">
266 <p id="tic-confirm-content"></p>
268 <div class="modal-footer">
269 <button id="tic-confirm-ok" type="button" class="btn btn-primary" data-dismiss="modal">OK</button>
270 <button id="tic-confirm-cancel" type="button" class="btn btn-danger" data-dismiss="modal">Cancel</button>
274 </div><!-- /End Confirm Dialog -->
277 <!-- library loading -->
278 <script src="/socket.io/socket.io.js"></script>
279 <script src="/lib/jquery/jquery.js"></script>
280 <script src="/lib/jquery-sortable/jquery-sortable.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/lodash/lodash.js"></script>
284 <script src="/js/config.js"></script>
285 <script src="/lib/requirejs/require.js" data-main="js/main"></script>