added more images in carousel

cao_blogr/static/theme.css

@@ -2,8 +2,8 @@
 /* https://www.w3schools.com/bootstrap/bootstrap_theme_band.asp */
 
 body {
-  font: 400 19px/1.8 Georgia, serif;
-  color: #777;
+  font: 400 15px/1.8 Lato, sans-serif;
+  color: #666;
 }
 h3, h4 {
   margin: 10px 0 30px 0;
@@ -12,7 +12,7 @@ h3, h4 {
   color: #111;
 }
 .container {
-  padding: 80px 120px;
+  padding: 60px 80px;
 }
 .person {
   border: 10px solid transparent;
@@ -24,9 +24,10 @@ h3, h4 {
 .person:hover {
   border-color: #f1f1f1;
 }
+.carousel {
+  margin-top: 5em;
+}
 .carousel-inner img {
-  -webkit-filter: grayscale(90%);
-  filter: grayscale(90%); /* make all photos black and white */ 
   width: 100%; /* Set width to 100% */
   margin: auto;
 }
@@ -82,21 +83,32 @@ h3, h4 {
 }  
 .navbar {
   font-family: Montserrat, sans-serif;
-  margin-bottom: 0;
-  background-color: #bc2131;
-  border: 0;
+  color: #000000 !important;
+  background-color: #FBFBFB;
+	border-bottom: 1px solid black;
+	border-radius: 0;
   font-size: 14px !important;
   letter-spacing: 4px;
+  min-height: 82px;
   opacity: 0.9;
 }
+.navbar-brand {
+  transform: translateX(-50%);
+  left: 50%;
+  position: absolute;
+  height: 50px;
+  padding: 0px;
+  font-size: 18px;
+  line-height: 20px;
+}
 .navbar li a, .navbar .navbar-brand { 
-  color: #ffffff !important;
+  color: #000000 !important;
 }
 .navbar-nav li a:hover {
-  color: #fff !important;
+  color: #f4511e !important;
 }
 .navbar-nav li.active a {
-  color: #fff !important;
+  color: #000 !important;
   background-color: #29292c !important;
 }
 .navbar-default .navbar-toggle {
@@ -113,7 +125,7 @@ h3, h4 {
   background-color: red !important;
 }
 footer {
-  background-color: #bc2131;
+  background-color: #2d2d30;
   color: #f5f5f5;
   padding: 32px;
 }

cao_blogr/templates/home.jinja2

@@ -1,5 +1,68 @@
 {% extends "layout.jinja2" %}
 
+{% block carousel %}
+
+<div id="myCarousel" class="carousel slide" data-ride="carousel">
+    <!-- Indicators -->
+    <ol class="carousel-indicators">
+      <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
+      <li data-target="#myCarousel" data-slide-to="1"></li>
+      <li data-target="#myCarousel" data-slide-to="2"></li>
+      <li data-target="#myCarousel" data-slide-to="3"></li>
+      <li data-target="#myCarousel" data-slide-to="4"></li>
+      <li data-target="#myCarousel" data-slide-to="5"></li>
+      <li data-target="#myCarousel" data-slide-to="6"></li>
+      <li data-target="#myCarousel" data-slide-to="7"></li>
+      <li data-target="#myCarousel" data-slide-to="8"></li>
+      <li data-target="#myCarousel" data-slide-to="9"></li>
+    </ol>
+  
+    <!-- Wrapper for slides -->
+    <div class="carousel-inner" role="listbox">
+      <div class="item active">
+        <img src="{{ car_images[0] }}" />
+      </div>
+      <div class="item">
+        <img src="{{ car_images[1] }}" />
+      </div>
+      <div class="item">
+        <img src="{{ car_images[2] }}" />
+      </div>
+      <div class="item">
+        <img src="{{ car_images[3] }}" />
+      </div>
+      <div class="item">
+        <img src="{{ car_images[4] }}" />
+      </div>
+      <div class="item">
+        <img src="{{ car_images[5] }}" />
+      </div>
+      <div class="item">
+        <img src="{{ car_images[6] }}" />
+      </div>
+      <div class="item">
+        <img src="{{ car_images[7] }}" />
+      </div>
+      <div class="item">
+        <img src="{{ car_images[8] }}" />
+      </div>
+      <div class="item">
+        <img src="{{ car_images[9] }}" />
+      </div>
+    </div>
+  
+    <!-- Left and right controls -->
+    <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
+      <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
+      <span class="sr-only">Previous</span>
+    </a>
+    <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
+      <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
+      <span class="sr-only">Next</span>
+    </a>
+  </div>
+{% endblock %}
+
 {% block content %}
 
     {% if request.authenticated_userid %}

cao_blogr/templates/layout.jinja2

@@ -10,8 +10,7 @@
     <title>{{page_title}}</title>
 
     <!-- Bootstrap core CSS -->
-    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" crossorigin="anonymous">
-
+    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
     <!-- Custom styles for this scaffold -->
     <link href="{{request.static_url('cao_blogr:static/theme.css')}}" rel="stylesheet">
 
@@ -32,11 +31,11 @@
             <span class="icon-bar"></span>
             <span class="icon-bar"></span>
         </button>
-        <a class="navbar-brand" href="{{ request.route_url('home') }}">CAO Blogr</a>
+        <a class="navbar-brand" class="text-center" href="{{ request.route_url('home') }}" alt="Accueil">
+          <img src="{{ request.static_url('cao_blogr:static/logo-msp.jpg') }}" class="logo" /></a>
    </div>
     <div class="collapse navbar-collapse" id="myNavbar">
         <ul class="nav navbar-nav navbar-right">
-            <li><a href="#band">TAGS</a></li>
             <li><a href="{{ request.route_url('blog_search') }}"><span class="glyphicon glyphicon-search"></span></a></li>
             <!-- si anonyme, lien pour se connecter  -->
 			      {% if request.authenticated_userid %}
@@ -59,6 +58,7 @@
 
 <!-- Container (The Page Template Section) -->
 <div class="container">
+  <br />
   <!-- Display Page Title -->
 	{% if page_title %}
 		<h1>{{ page_title }}</h1>
@@ -87,7 +87,7 @@
 	<footer class="text-center">
 			<div class="row">
 				<p class="text-center">
-          &copy; 2017&nbsp;-&nbsp;Phuoc Cao
+          &copy; 2022&nbsp;-&nbsp;Phuoc Cao
           &nbsp|&nbsp<a href="{{ request.route_url('apropos')}}">A propos</a>
         
           {% if request.authenticated_userid == 'admin' %}
@@ -101,7 +101,7 @@
     <!-- Bootstrap core JavaScript
     ================================================== -->
     <!-- Placed at the end of the document so the pages load faster -->
-    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
-    <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
-</body>
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
+    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
+  </body>
 </html>

cao_blogr/views/default.py

@@ -10,11 +10,24 @@ from ..models.user import User
 @view_config(route_name='home',
              renderer='cao_blogr:templates/home.jinja2')
 def home(request):
+    # images list for the carousel
+    dir = request.static_url('cao_blogr:static/carousel')
+    car_images = [dir + '/S01.jpg', 
+              dir + '/S02.jpg', 
+              dir + '/S03.jpg', 
+              dir + '/S06.jpg', 
+              dir + '/S09.jpg',
+              dir + '/S12.jpg', 
+              dir + '/S15.jpg', 
+              dir + '/S18.jpg', 
+              dir + '/S21.jpg', 
+              dir + '/S25.jpg']
     page = int(request.params.get('page', 1))
     paginator = BlogRecordService.get_paginator(request, page)
     return {
         'page_title': "Bienvenue sur mon blog",
-        'paginator': paginator
+        'paginator': paginator,
+        'car_images': car_images,
         }