weekly_report.html 5.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. body {
  6. font-family: monospace, "Trebuchet MS", Arial, Helvetica, sans-serif;
  7. color: #352823;
  8. }
  9. .customers {
  10. border-collapse: collapse;
  11. width: 100%;
  12. }
  13. .customers td, .customers th {
  14. border: 1px solid rgb(41, 39, 39);
  15. padding: 8px;
  16. text-align: center;
  17. }
  18. .customers tr:nth-child(even){background-color: #f2f2f2;}
  19. .customers tr:hover {background-color: #ddd;}
  20. .customers th {
  21. padding-top: 12px;
  22. padding-bottom: 12px;
  23. text-align: left;
  24. background-color: #4e5253;
  25. color: rgb(255, 255, 255);
  26. text-align: center;
  27. }
  28. table{
  29. table-layout: fixed;
  30. }
  31. p {
  32. margin: 5px
  33. }
  34. .bordered, .n-bordered{
  35. border: 1px solid black;
  36. border-collapse: collapse;
  37. }
  38. .n-bordered{
  39. border: none;
  40. }
  41. .bordered td, .n-bordered td{
  42. border: 1px solid black;
  43. }
  44. .n-bordered tr:first-child td{
  45. border-top: none;
  46. }
  47. .n-bordered tr:last-child td{
  48. border-bottom: none;
  49. }
  50. .n-bordered tr td:first-child{
  51. border-left: none;
  52. }
  53. .n-bordered tr td:last-child{
  54. border-right: none;
  55. }
  56. .card {
  57. width: 80%;
  58. transition: 0.3s;
  59. border-radius: 5px;
  60. margin: 1rem;
  61. }
  62. .card:hover {
  63. box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
  64. }
  65. .container {
  66. box-shadow: 0 2px 4px 0 rgba(0,0,0,0.2);
  67. padding: .5rem;
  68. border-radius: 5px;
  69. }
  70. .in-cont {
  71. padding: .5rem;
  72. border: solid #c0c3bf 2px;
  73. border-radius: 5px;
  74. }
  75. </style>
  76. </head>
  77. <body>
  78. <div align="center" style="margin-top: 25px;">
  79. <h2 style="text-align:center; margin-top: 50px"> Review Report of Google & Facebook at {{ location.care_name }}</h2>
  80. <img src="https://ercare24.com/wp-content/uploads/2016/07/signature-care-resized-e1462918690585.png" alt="Avatar" class="image" width=50% >
  81. <h2 style="text-align:center; margin-top: 50px"> Review Summary ( {{ date.end | date:"M jS" }} - {{ date.start | date:"M jS" }})</h2>
  82. </div>
  83. <div align="center">
  84. <table class="customers" style="width: 60%">
  85. <tr>
  86. <th style="width: 50%;">Platform</th>
  87. <th>Ratings</th>
  88. </tr>
  89. <!-- Google Reviews Summary -->
  90. <tr>
  91. <td style="padding: 1rem">
  92. <span>Google</span> <br>
  93. <span style="display: inline-block; margin-top:.5rem">Map Link: <a href="{{ location.review_site_url }}" target="_blank">Click here</a></span>
  94. </td>
  95. <td>
  96. {% if google_ratings.count == 0 %}
  97. <span style="color: red; font-weight: bold;">No Ratings!</span>
  98. {% else %}
  99. {% for r in google_ratings %}
  100. {% if r.star_rating < 3 %}
  101. <p style="color: red; font-weight: bold;">{{ r.star_rating }}* star: {{ r.total }}</p>
  102. {% else %}
  103. <p>{{ r.star_rating }}* star: {{ r.total }}</p>
  104. {% endif %}
  105. {% endfor %}
  106. {% endif %}
  107. </td>
  108. </tr>
  109. <!-- Facebook Reviews Summary-->
  110. <tr>
  111. <td style="padding: 1rem">
  112. <span>Facebook</span> <br>
  113. <span style="display: inline-block; margin-top:.5rem">Page Link: <a href="https://facebook.com/{{ location.facebookpage.id }}" target="_blank">Click here</a></span>
  114. </td>
  115. <td>
  116. {% if facebook_ratings %}
  117. {% for r in facebook_ratings %}
  118. {% if r.recommendation_type == True %}
  119. <p style="color: green; font-weight: green;">Positive: {{ r.total }}</p>
  120. {% else %}
  121. <p style="color: red; font-weight: red;">Negative: {{ r.total }}</p> </br>
  122. {% endif %}
  123. {% endfor %}
  124. {% else %}
  125. <span style="color: red; font-weight: bold;">No Ratings!</span>
  126. {% endif %}
  127. </td>
  128. </tr>
  129. </table>
  130. {% if google_pos_reviews %}
  131. <h2 style="text-align:center; margin-top: 50px">All reviews that been posted this week.</h2>
  132. {% endif %}
  133. {% for review in google_pos_reviews %}
  134. <div class="card">
  135. {% if review.positive %}
  136. <div class="container" style="background: #CDFFC2">
  137. {% else %}
  138. <div class="container" style="background: #FFC2C2">
  139. {% endif %}
  140. <div class="in-cont">
  141. {% if review.platform == "Google" %}
  142. <div style="text-align: left; padding: 0rem 1rem 0rem 1rem"><b style="font-size: 1rem;"> {{ review.reviewer_name }}</b><span> on {{ review.platform }}</span> <span style="float: right;"> {{ review.create_time }}</span></div>
  143. {% else %}
  144. <div style="text-align: left; padding: 0rem 1rem 0rem 1rem"><b style="font-size: 1rem;"> <a href="https://facebook.com/{{ review.reviewer_name }}" target="_blank">Click here...</a></b><span> on {{ review.platform }}</span> <span style="float: right;"> {{ review.create_time }}</span></div>
  145. {% endif %}
  146. <hr>
  147. <div><p>{{ review.comment | safe }}</p></div>
  148. </div>
  149. </div>
  150. </div>
  151. {% endfor %}
  152. </div>
  153. </div>
  154. </body>
  155. </html>