3 border: 10px solid #ddd;
7 <div id="getting-started-modal-window" class="modal">
8 <div class="modal-dialog modal-with-loading-spinner" style="width:80%">
9 <div class="modal-content">
10 <div class="modal-header">
11 <button type="button" class="close" data-dismiss="modal" aria-hidden="true">x</button>
13 <div class="col-sm-8"> <h4 class="modal-title"> Getting Started with Arvados </h4> </div>
14 <div class="spinner spinner-32px spinner-h-center col-sm-1" hidden="true"></div>
19 <div class="modal-body" style="height: 38em; overflow-y: scroll">
22 <div class="container">
24 <div class="col-md-6">
25 <strong>How does this work?</strong> What you're looking at right now is Workbench, the graphical interface to the Arvados system.
27 Click the <span class="btn btn-sm btn-primary">Next ></span> button below for a quick tour of Arvados.
30 <br><br>Get started by running your first pipeline in 3 quick steps:<br><br>
31 <ol><li> Go to the <span class="btn btn-sm btn-default"><i class="fa fa-lg fa-fw fa-dashboard"></i> Dashboard</span> > <span class="btn btn-sm btn-primary"><i class="fa fa-fw fa-gear"></i> Run a pipeline...</span> <br><br>
32 <%= image_tag "mouse-move.gif", :class => "style_image" %>.
34 <li> <span class="btn btn-sm btn-default"><i class="fa fa-fw fa-gear"></i>Mason Lab -- Ancestry Mapper (public)</span> > <span class="btn btn-sm btn-primary">Next: choose inputs <i class="fa fa-fw fa-arrow-circle-right"></i></span></li><br>
35 <li> <span class="btn btn-sm btn-primary">Run <i class="fa fa-fw fa-play"></i></span></li>
37 </div> <div class="col-md-6" style="border-left: solid; border-width: 1px">
39 <i class="fa fa-flag fa-flip-horizontal" style="color: green"></i> <i class="fa fa-child"></i>
40 <strong>Voila!</strong> <i class="fa fa-child"></i> <i class="fa fa-flag" style="color: green"></i>
41 Your pipeline is now spooling up and getting ready to run!
45 Go ahead, try it for yourself right now. <span class="glyphicon glyphicon-thumbs-up"></span>
47 <%= image_tag "pipeline-running.gif", :class => "style_image" %>
50 <em><strong>Note:</strong> You can always come back to this Getting Started guide by clicking the <span class="fa fa-lg fa-question-circle"></span> in the upper-right corner.</em>
57 <div class="modal-body" style="height: 38em; overflow-y: scroll">
60 <div class="modal-body" style="height: 38em; overflow-y: scroll">
63 <div class="modal-body" style="height: 38em; overflow-y: scroll">
67 <div class="modal-footer">
68 <div style="text-align:center">
69 <button class="btn btn-default pager-prev"><i class="fa fa-fw fa-chevron-left"></i><span style="font-weight: bold;"> Prev</span></button>
70 <button class="btn btn-default pager-next"><span style="font-weight: bold;">Next </span><i class="fa fa-fw fa-chevron-right"></i></button>
71 <div class="pager-count pull-right"><span style="margin:5px"></span></div>