add quick start guide

diff --git a/a/guide.en b/a/guide.en
new file mode 100644 (file)
index 0000000..780e63c
--- /dev/null
+++ b/a/guide.en
@@ -0,0 +1,80 @@
+\r
+<div class="row clearfix">\r
+\r
+<div class="col-md-8 column">\r
+<div class="jumbotron">\r
+<h2>Quick Start Guide:</h2>\r
+<ul>\r
+       <li>First of all you need to <b>create an account</b>. For this, click the <b>Account</b> button in the navbar.\r
+       When you want to do an action that needs an account you will be requiered to log in. <i>For example see last step in the Submitting part.</i></li>\r
+       <li>In order to <b>take part in a contest</b> <u>you don't need to register to a particular one</u>. You just need to <b>access its page</b> after the contest starts.</li>\r
+       <li>To <b>submit a solution</b> you can either paste your code into the text area for the corresponding problem or browse for the source. In what follows you can see all the steps for submitting:  </li>\r
+</ul>\r
+\r
+<div style="clear: both; display:block; position:relative; float: left; width: 600px">\r
+       <h3>STEP 1: Choosing a problem from the list</h3>\r
+       <img alt="" height="272" src="/static/guide/1.png" width="400" style="float: left; margin:2px 10px">\r
+       <br><p>In order to choose a problem click the <b>Problems</b> button from the \r
+       navbar. </p>\r
+       <p>Then <b>click on</b> the problem you want to solve.\r
+<br><i>For example let's choose <b>A+B</b> problem.</i> </p>\r
+</div>\r
+\r
+<div style="clear: both; display:block; position:relative; float: left">\r
+       <h3>STEP 2: Starting to fill the form</h3>\r
+       <img alt="" height="272" src="/static/guide/2.png" width="400" style="float: left; margin:2px 10px">\r
+       <br>\r
+       <p> From now on we focus on <b>Submit solution</b> area. </p>\r
+       <p> Here we can find the form to be filled in order to upload a solution to any given problem.</p>\r
+</div>\r
+\r
+<div style="clear: both; display:block; position:relative; float: left">\r
+       <h3>STEP 3: Solution source code</h3>\r
+       <table style="margin-left:10px; text-align:center">\r
+       <tr>\r
+               <td style="width:200px"><b>1st Option</b> - Upload the source file<br>\r
+                       <img alt="" height="192" src="/static/guide/3.png" width="350" style="margin:2px 10px"><br>\r
+                       Go to <b>Choose file</b> button from <b>File</b> area and then choose the source file.\r
+               </td>\r
+               <td> or </td>\r
+               <td style="width:200px"><b>2nd Option</b> - Paste the code<br>\r
+                       <img alt="" height="340" src="/static/guide/3.2.png" width="250" style="margin:2px 10px">\r
+               </td>\r
+       </tr>\r
+       </table>\r
+       <i>Here are some examples for how to submit:</i>\r
+       <ul>\r
+               <li><a href="http://ideone.com/58mgdC" target="_blank">C</a></li>\r
+               <li><a href="http://ideone.com/gH3zg1" target="_blank">C++</a></li>\r
+               <li><a href="http://ideone.com/N7TkzK" target="_blank">Java</a></li>\r
+               <li><a href="http://ideone.com/dQgwIT" target="_blank">Pascal</a></li>\r
+               <li><a href="http://ideone.com/gSKAGU" target="_blank">Perl</a></li>\r
+               <li><a href="http://ideone.com/3H6NmV" target="_blank">Python</a></li>\r
+       </ul>\r
+</div>\r
+\r
+\r
+<div style="clear: both; display:block; position:relative; float: left">\r
+       <h3>STEP 4: Selecting the file format</h3>\r
+       <img alt="" height="270" src="/static/guide/4.png" width="250" style="float: left; margin:2px 10px">\r
+       <p> After uploading the source code we have to choose the format \r
+       corresponding to the code we provided as solution.</p>\r
+</div>\r
+\r
+<div style="clear: both; display:block; position:relative; float: left">\r
+       <h3>...and SUBMIT</h3>\r
+       <img alt="" height="260" src="/static/guide/5.png" width="250" style="float: left; margin:2px 10px">\r
+       <p>Click the <b>Submit job</b> button and wait for the results.</p> <p>You will be redirected \r
+       to <b>Job log</b> page where you can see the results. </p>\r
+\r
+</div>\r
+<div style="clear:both"> </div>\r
+\r
+<h3>Good luck!</h3>\r
+\r
+\r
+</div>\r
+<div class="col-md-4 column">\r
+<div id="sponsors"></div>\r
+</div>\r
+</div>
\ No newline at end of file

diff --git a/a/guide.en.title b/a/guide.en.title
new file mode 100644 (file)
index 0000000..1fb0ba9
--- /dev/null
+++ b/a/guide.en.title
@@ -0,0 +1 @@
+Quick start guide
\ No newline at end of file

diff --git a/static/guide/1.png b/static/guide/1.png
new file mode 100755 (executable)
index 0000000..b794601
Binary files /dev/null and b/static/guide/1.png differ

diff --git a/static/guide/2.png b/static/guide/2.png
new file mode 100755 (executable)
index 0000000..cf09867
Binary files /dev/null and b/static/guide/2.png differ

diff --git a/static/guide/3.2.png b/static/guide/3.2.png
new file mode 100755 (executable)
index 0000000..c55eab8
Binary files /dev/null and b/static/guide/3.2.png differ

diff --git a/static/guide/3.png b/static/guide/3.png
new file mode 100755 (executable)
index 0000000..34cdab1
Binary files /dev/null and b/static/guide/3.png differ

diff --git a/static/guide/4.2.png b/static/guide/4.2.png
new file mode 100755 (executable)
index 0000000..90d31a6
Binary files /dev/null and b/static/guide/4.2.png differ

diff --git a/static/guide/4.png b/static/guide/4.png
new file mode 100755 (executable)
index 0000000..dd89593
Binary files /dev/null and b/static/guide/4.png differ

diff --git a/static/guide/5.png b/static/guide/5.png
new file mode 100755 (executable)
index 0000000..c2f1d4d
Binary files /dev/null and b/static/guide/5.png differ