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"><!-- TODO: Filter Option -->
86 <span class="glyphicon glyphicon glyphicon-menu-hamburger" aria-hidden="true"/>
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"/>
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"/>
98 <div id="tic-package-left-col-tree">
102 </div><!-- /End Package Left Column -->
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 ">
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>
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>
131 <div class="panel-footer">
132 <a type="button" class="btn btn-default" href="#tic-image-section">Create Image</a>
135 </div><!-- /End Package Right Column -->
137 </div><!-- /.container -->
141 <!-- Image Section -->
142 <section id="tic-image-section">
143 <div class="container">
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">
151 <h1>Bla Bla Bla...</h1>
152 <h1>Image Size: Bla...</h1>
154 <div class="panel-footer">
155 <a type="button" class="btn btn-default" href="#tic-image-section">Create Image</a>
158 </div><!-- /End Image Column -->
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">
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>
175 </div><!-- /End Image List Column -->
177 </div><!-- /.container -->
180 <!-- Settings Section -->
181 <section id="tic-settings-section">
182 <div class="container">
184 <!-- Settings Column -->
185 <div class="col-md-12">
186 <div class="panel panel-primary">
187 <div class="panel-body">
188 <!-- Settings Toolbar -->
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>
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>
204 <div class="list-group">
205 <li class="list-group-item">
213 <div class="panel-footer">
214 <a type="button" class="btn btn-default" href="#tic-package-section">Apply</a>
217 </div><!-- /End Settings Column -->
219 </div><!-- /.container -->
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>
229 <div class="modal-body">
230 <div class="progress">
231 <div class="progress-bar progress-bar-striped active" style="width: 100%"/>
236 </div><!-- /End Loading Dialog -->
238 <!-- Alert Dialog -->
239 <div class="alert alert-danger fade in">
240 <!-- /End Alert Dialog -->
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>