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 Configurator</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="/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:// -->
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>
22 <body data-spy="scroll" data-target=".navbar-fixed-top">
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>
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>
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">
40 <a class="tic-page-scroll" href="#tic-package-section">Package</a>
43 <a class="tic-page-scroll"href="#tic-image-section">Image</a>
46 <a class="tic-page-scroll"href="#tic-settings-section">Settings</a>
49 </div><!--/.nav-collapse -->
50 </div><!-- /.container -->
54 <!-- Package Section -->
55 <section id="tic-package-section">
56 <div class="container">
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>
67 <div class="btn-group">
68 <button type="button" class="btn btn-primary">Common</button>
70 <div class="btn-group">
71 <button type="button" class="btn btn-primary">Mobile</button>
73 <div class="btn-group">
74 <button type="button" class="btn btn-primary">Wearable</button>
76 <div class="btn-group">
77 <button type="button" class="btn btn-primary">TV</button>
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 dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
86 <span class="glyphicon glyphicon glyphicon-menu-hamburger"></span>
88 <ul class="dropdown-menu dropdown-menu-right">
89 <li><a href="#">Action</a></li>
90 <li><a href="#">Another action</a></li>
91 <li><a href="#">Something else here</a></li>
92 <li role="separator" class="divider"></li>
93 <li><a href="#">Separated link</a></li>
96 <button type="button" class="btn btn-default" id="tic-package-left-col-tree-toolbar-collapse-all">
97 <span class="glyphicon glyphicon glyphicon glyphicon-minus" aria-hidden="true"/>
99 <button type="button" class="btn btn-default" id="tic-package-left-col-tree-toolbar-expand-all">
100 <span class="glyphicon glyphicon glyphicon glyphicon-plus" aria-hidden="true"/>
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-name"></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>
132 <!-- Package Summary -->
133 <div class="panel panel-primary">
134 <div class="panel-heading">Summary</div>
135 <div class="panel-body">
136 <h1>Bla Bla Bla...</h1>
137 <h1>Image Size: Bla...</h1>
139 <div class="panel-footer">
140 <a type="button" class="btn btn-default" href="#tic-image-section">Create Image</a>
143 </div><!-- /End Package Right Column -->
145 </div><!-- /.container -->
149 <!-- Image Section -->
150 <section id="tic-image-section">
151 <div class="container">
153 <!-- Image Column -->
154 <div class="col-md-6">
155 <div class="panel panel-primary">
156 <div class="panel-heading">Image</div>
157 <div class="panel-body">
159 <h1>Bla Bla Bla...</h1>
160 <h1>Image Size: Bla...</h1>
162 <div class="panel-footer">
163 <a type="button" class="btn btn-default" href="#tic-image-section">Create Image</a>
166 </div><!-- /End Image Column -->
168 <!-- Image List Column -->
169 <div class="col-md-6">
170 <div class="panel panel-primary">
171 <div class="panel-heading">Image List</div>
172 <div class="panel-body">
174 <h1>Image1 Bla Bla Bla...</h1>
175 <h1>Image2 Bla Bla Bla...</h1>
176 <div class="progress">
177 <div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width: 100%">
178 <span class="sr-only">Time?</span>
183 </div><!-- /End Image List Column -->
185 </div><!-- /.container -->
188 <!-- Settings Section -->
189 <section id="tic-settings-section">
190 <div class="container">
192 <!-- Settings Column -->
193 <div class="col-md-12">
194 <div class="panel panel-primary">
195 <div class="panel-body">
196 <!-- Settings Toolbar -->
198 <button type="button" class="btn btn-default"><span class="glyphicon glyphicon glyphicon-import" aria-hidden="true"></span>Recipe Import</button>
199 <button type="button" class="btn btn-default"><span class="glyphicon glyphicon glyphicon-export" aria-hidden="true"></span>Recipe Export</button>
202 <!-- Repository Column -->
203 <div class="panel panel-primary">
204 <div class="panel-heading">Repository</div>
205 <div class="panel-body">
206 <div class="input-group">
207 <input type="text" class="form-control" placeholder="Enter repository URL">
208 <span class="input-group-btn">
209 <button class="btn btn-default" type="button">Add Repository</button>
212 <div class="list-group">
213 <li class="list-group-item">
221 <div class="panel-footer">
222 <a type="button" class="btn btn-default" href="#tic-package-section">Apply</a>
225 </div><!-- /End Settings Column -->
227 </div><!-- /.container -->
230 <!-- Loading Dialog -->
231 <div class="modal fade" id="tic-load-dialog" tabindex="-1" role="dialog" aria-hidden="true" data-backdrop="static">
232 <div class="modal-dialog modal-sm">
233 <div class="modal-content">
234 <div class="modal-header">
235 <h4 class="modal-title"><span class="glyphicon glyphicon-time"/></span> Loading...</h4>
237 <div class="modal-body">
238 <div class="progress">
239 <div class="progress-bar progress-bar-striped active" style="width: 100%"/>
244 </div><!-- /End Loading Dialog -->
246 <!-- TODO: Alert Dialog -->
247 <div class="alert alert-danger fade in">
248 <!-- /End Alert Dialog -->
251 <!-- library loading -->
252 <script src="/socket.io/socket.io.js"></script>
253 <script src="/lib/jquery/jquery.js"></script>
254 <script src="/lib/bootstrap/js/bootstrap.js"></script>
255 <script src="/lib/bootstrap-treeview/bootstrap-treeview.min.js"></script>
256 <script src="/lib/lodash/lodash.js"></script>
257 <script src="/js/config.js"></script>
258 <script src="/lib/requirejs/require.js" data-main="js/main"></script>