random selection from offerings

rowers/templates/frontpage.html

@@ -76,51 +76,20 @@
   <li class="grid_5">
     <h2 class="midden">WHAT WE OFFER</h2>
   </li>
+  {% for offering in offerings %}
   <li class="frontitem">
-    <h3 class="midden">SYNC</h3>
+    <h3 class="midden">{{ offering.name }}</h3>
     <div class="midden">
-      <img src="/static/img/upload.png"
+      <img src="{{ offering.image }}"
            alt="Analyze" width="62px">
       </div>
     <p class="midden">
-      Easily upload data from the most popular devices and apps.
+      {{ offering.text }}
     </p>
   </li>
-  <li class="frontitem">
-    <h3 class="midden">LOG</h3>
-    <div class="midden">
-      <img src="/static/img/log.png"
-           alt="Analyze" width="62px">
-      </div>
-    <p class="midden">
-      Maintain
-      a consistent log for all your rowing (indoor and on the water).
-    </p>
-  </li>
-  <li class="frontitem">
-    <h3 class="midden">ANALYZE</h3>
-    <div class="midden">
-      <img src="/static/img/analyze.png"
-           alt="Analyze" width="62px">
-      </div>
-    <p class="midden">
-      Analyze your workouts with a consistent set of tools
-    </p>
-  </li>
-  <li  class="frontitem">
-    <h3 class="midden">COMPARE</h3>
-    <div class="midden">
-      <img src="/static/img/compare.png"
-           alt="Analyze" width="62px">
-      </div>
-    <p class="midden">
-      Compare your results between workouts and with other rowers in your team
-    </p>
-  </li>
-  <li>
-    <a class="button midden" href="">
-      <h2 class="midden"><div class="rounder whiteborder">and more</div></h2>
-    </a>
+  {% endfor %}
+  <li class="grid_5">
+    <p class="midden">and more</p>
   </li>
   <li>
     &nbsp;

rowsandall_app/views.py

@@ -5,14 +5,77 @@ from rowers.forms import LoginForm
 
 from rowingdata import main as rmain
 
+import random
+
 def rootview(request):
     magicsentence = rmain()
     loginform = LoginForm()
+
+    planoffering = {
+        'name': 'PLAN',
+        'image':'/static/img/Plan.png',
+        'text':'We offer a fully integrated way for you or your coach to set up a training plan. Compare plan vs execution based on time, distance, heart rate or power.'
+        }
+
+    uploadoffering = {
+        'name': 'SYNC',
+        'image':'/static/img/upload.png',
+        'text':'Easily upload data from the most popular devices and apps'
+        }
+
+    logoffering = {
+        'name': 'LOG',
+        'image':'/static/img/log.png',
+        'text':'Maintain a consistent log for all your rowing (indoor and on the water)'
+        }
+
+    analyzeoffering = {
+        'name': 'ANALYZE',
+        'image':'/static/img/analyze.png',
+        'text':'Analyze your workouts with a consistent set of tools'
+        }
+
+    compareoffering = {
+        'name': 'COMPARE',
+        'image':'/static/img/compare.png',
+        'text':'Compare your results between workouts and with other rowers in your team'
+        }
+
+    raceoffering = {
+        'name': 'RACE',
+        'image':'/static/img/Race 01.png',
+        'text':'Virtual regattas are an informal way to add a competitive element to your training and can be used as a quick way to set up small regattas'
+        }
+
+    coachoffering = {
+        'name': 'COACHING',
+        'image':'/static/img/Remote coaching.png',
+        'text':'Rowsandall.com is the ideal platform for remote rowing coaching. As a coach, you can easily manage your athletes, set up plans and monitor execution and technique'
+        }
+    
+    
+    
+    allofferings = [
+        planoffering,
+        uploadoffering,
+        logoffering,
+        analyzeoffering,
+        raceoffering,
+        compareoffering,
+        coachoffering,
+        ]
+
+    aux = list(allofferings)
+    random.shuffle(aux)
+
+    offerings = aux[0:5]
+    
     return render(request,
                   'frontpage.html',
                   {
                       'versionstring': magicsentence,
                       'form':loginform,
+                      'offerings':offerings,
                   })
 
 

static/css/rowsandall2.css

@@ -281,7 +281,7 @@ th.rotate > div > span {
 }
 
 .frontitem {
-    background-color: rgba(255,255,255,0.5);
+    background-color: rgba(255,255,255,0.7);
     border: solid 1px wite;
     padding: 5px;
     margin: 5px;