cphipps/NetAlertX
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Streamlining the design of the frontend

Browse Source 
- 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
Download Patch File Download Diff File Expand all files Collapse all files

55
front/devices.php
View File

@@ -27,69 +27,74 @@
<!-- top small box 1 ------------------------------------------------------- -->
<div class="row">
<div class="col-lg-2 col-sm-4 col-xs-6">
<a href="#" onclick="javascript: getDevicesList('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['Device_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['Device_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: getDevicesList('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['Device_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['Device_Shortcut_Connected'];?></p>
</div>
<div class="icon"><i class="fa fa-plug text-green-40"></i></div>
</div>
</a>
</div>
<!-- top small box 3 ------------------------------------------------------- -->
<div class="col-lg-2 col-sm-4 col-xs-6">
<a href="#" onclick="javascript: getDevicesList('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['Device_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['Device_Shortcut_Favorites'];?></p>
</div>
<div class="icon"><i class="fa fa-star text-yellow-40"></i></div>
</div>
</a>
</div>
<!-- top small box 4 ------------------------------------------------------- -->
<div class="col-lg-2 col-sm-4 col-xs-6">
<a href="#" onclick="javascript: getDevicesList('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['Device_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['Device_Shortcut_NewDevices'];?></p>
</div>
<div class="icon"><i class="ion ion-plus-round text-yellow-40"></i></div>
</div>
</a>
</div>
<!-- top small box 5 ------------------------------------------------------- -->
<div class="col-lg-2 col-sm-4 col-xs-6">
<a href="#" onclick="javascript: getDevicesList('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['Device_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['Device_Shortcut_DownAlerts'];?></p>
</div>
<div class="icon"><i class="fa fa-warning text-red-40"></i></div>
</div>
</a>
</div>
<!-- top small box 6 ------------------------------------------------------- -->
<div class="col-lg-2 col-sm-4 col-xs-6">
<a href="#" onclick="javascript: getDevicesList('archived');">
<div class="small-box bg-gray pa-small-box-gray pa-small-box-2">
<div class="inner"> <h3 id="devicesArchived"> -- </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['Device_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="devicesArchived"> -- </h3>
<p class="infobox_label"><?php echo $pia_lang['Device_Shortcut_Archived'];?></p>
</div>
<div class="icon"><i class="fa fa-eye-slash text-gray-40"></i></div>
</div>
</a>
</div>