Streamlining the design of the frontend

- Screenshots updated to show the design changes
- Merge parts of b69912fe31
- maintenance page redesigned
This commit is contained in:
leiweibau
2022-07-19 20:32:25 +02:00
parent 65b788bc54
commit 00b9462708
18 changed files with 235 additions and 242 deletions

View File

@@ -30,21 +30,23 @@
<div class="col-lg-2 col-sm-4 col-xs-6">
<a href="#" onclick="javascript: getDevicesPresence('all');">
<div class="small-box bg-aqua pa-small-box-aqua pa-small-box-2">
<div class="inner"> <h3 id="devicesAll"> -- </h3> </div>
<div class="icon"> <i class="fa fa-laptop text-aqua-20"></i> </div>
<div class="small-box-footer pa-small-box-footer"> <?php echo $pia_lang['Presence_Shortcut_AllDevices'];?> <i class="fa fa-arrow-circle-right"></i> </div>
<div class="small-box bg-aqua">
<div class="inner"><h3 id="devicesAll"> -- </h3>
<p class="infobox_label"><?php echo $pia_lang['Presence_Shortcut_AllDevices'];?></p>
</div>
<div class="icon"><i class="fa fa-laptop text-aqua-40"></i></div>
</div>
</a>
</div>
<!-- top small box 2 ------------------------------------------------------- -->
<div class="col-lg-2 col-sm-4 col-xs-6">
<a href="#" onclick="javascript: getDevicesPresence('connected');">
<div class="small-box bg-green pa-small-box-green pa-small-box-2">
<div class="inner"> <h3 id="devicesConnected"> -- </h3> </div>
<div class="icon"> <i class="fa fa-plug text-green-20"></i> </div>
<div class="small-box-footer pa-small-box-footer"> <?php echo $pia_lang['Presence_Shortcut_Connected'];?> <i class="fa fa-arrow-circle-right"></i> </div>
<div class="small-box bg-green">
<div class="inner"> <h3 id="devicesConnected"> -- </h3>
<p class="infobox_label"><?php echo $pia_lang['Presence_Shortcut_Connected'];?></p>
</div>
<div class="icon"> <i class="fa fa-plug text-green-40"></i> </div>
</div>
</a>
</div>
@@ -52,10 +54,11 @@
<!-- top small box 3 ------------------------------------------------------- -->
<div class="col-lg-2 col-sm-4 col-xs-6">
<a href="#" onclick="javascript: getDevicesPresence('favorites');">
<div class="small-box bg-yellow pa-small-box-yellow pa-small-box-2">
<div class="inner"> <h3 id="devicesFavorites"> -- </h3> </div>
<div class="icon"> <i class="fa fa-star text-yellow-20"></i> </div>
<div class="small-box-footer pa-small-box-footer"> <?php echo $pia_lang['Presence_Shortcut_Favorites'];?> <i class="fa fa-arrow-circle-right"></i> </div>
<div class="small-box bg-yellow">
<div class="inner"> <h3 id="devicesFavorites"> -- </h3>
<p class="infobox_label"><?php echo $pia_lang['Presence_Shortcut_Favorites'];?></p>
</div>
<div class="icon"> <i class="fa fa-star text-yellow-40"></i> </div>
</div>
</a>
</div>
@@ -63,10 +66,11 @@
<!-- top small box 4 ------------------------------------------------------- -->
<div class="col-lg-2 col-sm-4 col-xs-6">
<a href="#" onclick="javascript: getDevicesPresence('new');">
<div class="small-box bg-yellow pa-small-box-yellow pa-small-box-2">
<div class="inner"> <h3 id="devicesNew"> -- </h3> </div>
<div class="icon"> <i class="ion ion-plus-round text-yellow-20"></i> </div>
<div class="small-box-footer pa-small-box-footer"> <?php echo $pia_lang['Presence_Shortcut_NewDevices'];?> <i class="fa fa-arrow-circle-right"></i> </div>
<div class="small-box bg-yellow">
<div class="inner"> <h3 id="devicesNew"> -- </h3>
<p class="infobox_label"><?php echo $pia_lang['Presence_Shortcut_NewDevices'];?></p>
</div>
<div class="icon"> <i class="ion ion-plus-round text-yellow-40"></i> </div>
</div>
</a>
</div>
@@ -74,10 +78,11 @@
<!-- top small box 5 ------------------------------------------------------- -->
<div class="col-lg-2 col-sm-4 col-xs-6">
<a href="#" onclick="javascript: getDevicesPresence('down');">
<div class="small-box bg-red pa-small-box-red pa-small-box-2">
<div class="inner"> <h3 id="devicesDown"> -- </h3> </div>
<div class="icon"> <i class="fa fa-warning text-red-20"></i> </div>
<div class="small-box-footer pa-small-box-footer"> <?php echo $pia_lang['Presence_Shortcut_DownAlerts'];?> <i class="fa fa-arrow-circle-right"></i> </div>
<div class="small-box bg-red">
<div class="inner"> <h3 id="devicesDown"> -- </h3>
<p class="infobox_label"><?php echo $pia_lang['Presence_Shortcut_DownAlerts'];?></p>
</div>
<div class="icon"> <i class="fa fa-warning text-red-40"></i> </div>
</div>
</a>
</div>
@@ -85,10 +90,11 @@
<!-- top small box 6 ------------------------------------------------------- -->
<div class="col-lg-2 col-sm-4 col-xs-6">
<a href="#" onclick="javascript: getDevicesPresence('archived');">
<div class="small-box bg-gray pa-small-box-gray pa-small-box-2">
<div class="inner"> <h3 id="devicesHidden"> -- </h3> </div>
<div class="icon"> <i class="fa fa-eye-slash text-gray-20"></i> </div>
<div class="small-box-footer pa-small-box-footer"> <?php echo $pia_lang['Presence_Shortcut_Archived'];?> <i class="fa fa-arrow-circle-right"></i> </div>
<div class="small-box bg-gray top_small_box_gray_text">
<div class="inner"> <h3 id="devicesHidden"> -- </h3>
<p class="infobox_label"><?php echo $pia_lang['Presence_Shortcut_Archived'];?></p>
</div>
<div class="icon"> <i class="fa fa-eye-slash text-gray-40"></i> </div>
</div>
</a>
</div>