added tutorial with screenshot to start page

superx_budget/pyramid/static/style.css

@@ -1,3 +1,7 @@
+ol.suprex li {
+    margin-top:2em;
+    }
+
 .form input.form-control.currency {
     display: inline-block;
     vertical-align:middle;

superx_budget/pyramid/templates/layout.jinja2

@@ -5,7 +5,7 @@
 
   	<title>SuperX -> Budget Overview</title>
 
-	<link href="{{request.static_url('superx_budget.pyramid:static/img/favicon.ico')}}" type="image/x-icon" rel="shortcut icon">
+	<link href="{{request.static_url('superx_budget.pyramid:static/favicon.ico')}}" type="image/x-icon" rel="shortcut icon">
 
     <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
     <link rel="stylesheet" href="{{request.static_url('superx_budget.pyramid:static/style.css')}}" type="text/css" media="screen" />
@@ -59,7 +59,7 @@
     <p>No content</p>
 {% endblock content %}
 
-    <div class="row mt-3">
+    <div class="row mt-4">
         <div class="col">
             <footer>
                 <p class="bg-light p-3">Any problems or questions? Please contact <a href="https://wiki.cpi.imtek.uni-freiburg.de/HolgerFrey">Holgi</a>.</p>

superx_budget/pyramid/templates/overview.jinja2

@@ -52,7 +52,7 @@
                 <h4 class="mt-5">Who should receive the list </h4>
                 <label for="recipients">Please separate the recipients by new lines:</label>
                 <textarea class="form-control" name="recipients" id="recipients" rows="{{ recipients|count + 3 }}">{{ recipients|join("\n") }}{{ "\n" }}</textarea>
-                <p class="mt-5">
+                <p class="mt-4">
                     <button type="submit" name="submit" value="submitted" class="btn btn-primary">Send List</button>
                 </p>
 

superx_budget/pyramid/templates/start.jinja2

@@ -5,15 +5,24 @@
     <div class="row">
         <div class="col">
             <h2>Procedure to get the right SuperX export</h2>
-            <ol>
-                <li>Log in to SuperX</li>
-                <li>select …</li>
-                <li>select …</li>
-                <li>select …</li>
-                <li>select …</li>
-                <li>select …</li>
+            <ol class="suprex">
+                <li>Log in to <a href="https://www.verwaltung.uni-freiburg.de/superx/" target="_blank" rel="noopener noreferrer">SuperX</a></li>
+                <li>
+                    <div>Select <span class="text-info">"SAP Berichte (ab 2015)"</span> in the left menu, then <span class="text-info">"Verwendungsnachweis und Kassenstand SAP"</span>.</div>
+                    <div><img src="{{request.static_url('superx_budget.pyramid:static/screenshot-1.jpg')}}" alt="screenshot superx, part 1"></div>
+
+                </li>
+                <li>
+                    <div>Enter the correct year for the report and select <span class="text-info">"automatisch"</span> for the <span class="text-info">"Gruppierung"</span>.</div>
+                    <div><img src="{{request.static_url('superx_budget.pyramid:static/screenshot-2.jpg')}}" alt="screenshot superx, part 2"></div>
+                </li>
+                <li>Generating the list might take some time, please be patient.</li>
+                <li>
+                    <div>Click on the small Excel icon and download the file to a location where you can find it easily.</div>
+                    <div><img src="{{request.static_url('superx_budget.pyramid:static/screenshot-3.jpg')}}" alt="screenshot superx, part 3"></div>
+                </li>
             </ol>
-            <h4>Done?</h4>
+            <h4 class="pt-4">Done?</h4>
             <form enctype="multipart/form-data" method="post" action="/">
                 <div class="form-group">
                     <label for="fileupload">Then please upload the just exported Excel file:</label>