templates/home.html.twig line 1

Open in your IDE?
  1. <html>
  2. <head>
  3.     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
  4.     <style>
  5.         .page-holder {
  6.             min-height: 100vh;
  7.         }
  8.         #timer {
  9.             width: 60%;
  10.             margin: 0 auto; }
  12.         #timer {
  13.             /* background: rgba(0, 0, 0, 0.5); */
  14.             /* border: 1px solid rgb(255,255, 255); */
  15.             width: 90%; }
  16.         #timer .time {
  19.             width: 25%;
  20.             font-size: 40px;
  21.             font-weight: 500;
  22.             border-left: 3px solid rgba(0, 0, 0, 0.3);
  23.             color: #fff;
  24.             margin-bottom: 0; }
  25.         @media (max-width: 991.98px) {
  26.             #timer .time {
  27.                 font-size: 30px; } }
  28.         #timer .time:first-child {
  29.             border-left: transparent; }
  30.         #timer .time span {
  31.             font-size: 12px;
  32.             display: block;
  33.             color: #fff;
  34.             letter-spacing: 2px;
  35.             text-transform: uppercase; }
  37.         .text-center {
  39.             text-align: center !important;
  40.         }
  41.         .d-flex {
  42.             padding: 15px;
  43.             margin: auto;
  44.             display: -webkit-box !important;
  45.             display: -ms-flexbox !important;
  46.             display: flex !important;
  47.         }
  48.         .bg-cover {
  49.             background-size: cover !important;
  50.         }
  51.         .vertical-center {
  52.             min-height: 100%;  /* Fallback for browsers do NOT support vh unit */
  53.             min-height: 100vh; /* These two lines are counted as one :-)       */
  55.             display: flex;
  56.             align-items: center;
  57.         }
  59.         .bg-text {
  60.             background-color: rgb(0,0,0); /* Fallback color */
  61.             background-color: rgba(0,0,0, 0.4); /* Black w/opacity/see-through */
  62.             color: white;
  63.             font-weight: bold;
  64.             border: 3px solid #f1f1f1;
  65.             position: absolute;
  66.             top: 50%;
  67.             left: 50%;
  68.             transform: translate(-50%, -50%);
  69.             z-index: 2;
  70.             width: 80%;
  71.             padding: 20px;
  72.             text-align: center;
  73.         }
  74.     </style>
  75. </head>
  76. <body>
  77. <div style="background: url(water.jpg)" class="page-holder bg-cover">
  78. <img src='logo.png' style="margin-top: 15px;margin-left:15px;" />
  79.     <div class="bg-text" style="border-radius: 25px;">
  80.         <div id="timer">
  81.             <div class="d-flex">
  82.                 <div class="time" id="days">{{ devices }}<span>Devices Installed</span></div>
  83.                 <div class="time pl-3" id="hours">{{ alarms }}<span>Alarms Prevented</span></div>
  84.                 <div class="time pl-3" id="minutes">{{ tracked }}<span>m3 Water tracked</span></div>
  85.                 <div class="time pl-3" id="minutes">&nbsp;<span><a href="https://portal.h2o.fi" class="btn btn-secondary" style="border-radius:25px;color: #fff; ">See How... manage.h2o.fi</a>    </span></div>
  86.             </div></div>
  87.     </div>
  89. </div>
  90. </body>
  91. </html>