Feature: Better UI - Modern Design Idea

Hi there,

I liked the tool and php is right up my alley so I wanted to give this tool a makeover. I was wondering if that's something you are looking to improve? I made some changes to the UI and I used Bulma CSS and Font-Awesome-Free. I usually write bare-css code to minimize size but since this is self-hosted, two extra libraries shouldn't really be a problem. Anyway, here's the design:

Screenshot 2024-06-11 195904 Screenshot 2024-06-11 180530

I am nowhere near done because I need to upload every type of file and check their specific options. I am having a bit of a hard time because the html structure isn't too straight-forward so I am trying to understand and fix that as I go. It should be easier to manage as well with something like Bulma in the future. Let me know what you think, if you have any pointers, etc.

You can try the code on your own to see if I am following the correct guidelines:

header.php

<?php
// / -----------------------------------------------------------------------------------
// / COPYRIGHT INFORMATION ...
// / HRConvert2, Copyright on 3/5/2024 by Justin Grimes, www.github.com/zelon88
// /
// / LICENSE INFORMATION ...
// / This project is protected by the GNU GPLv3 Open-Source license.
// / https://www.gnu.org/licenses/gpl-3.0.html
// /
// / APPLICATION INFORMATION ...
// / This application is designed to provide a web-interface for converting file formats
// / on a server for users of any web browser without authentication.
// /
// / FILE INFORMATION ...
// / v3.3.1.
// / This file contains language specific GUI elements to be displayed at the top of pages.
// /
// / HARDWARE REQUIREMENTS ...
// / This application requires at least a Raspberry Pi Model B+ or greater.
// / This application will run on just about any x86 or x64 computer.
// /
// / DEPENDENCY REQUIREMENTS ...
// / This application requires Debian Linux (w/3rd Party audio license),
// / Apache 2.4, PHP 8+, LibreOffice, Unoconv, ClamAV, Tesseract, Rar, Unrar, Unzip,
// / 7zipper, FFMPEG, PDFTOTEXT, Dia, PopplerUtils, MeshLab, Mkisofs & ImageMagick.
// /
// / <3 Open-Source
// / -----------------------------------------------------------------------------------

// / -----------------------------------------------------------------------------------
// / Set a flag to tell that the UI has been displayed.
$HeaderDisplayed = TRUE;
// / Check if the core is loaded.
if (!isset($CoreLoaded)) die('ERROR!!! HRConvert2-2, This file cannot process your request! Please submit your file to convertCore.php instead!');
// / Set required resource file related variables.
$FaviconPath = $GuiImageDir.'favicon.ico';
$JqueryPath = $GuiJSDir.'jquery-3.6.3.min.js';
$JsLibraryPath = $GuiJSDir.'HRC2-Functions.js';
$DropzonePath = $GuiJSDir.'dropzone.js';
$StylesheetPath = $GuiCSSDir.'HRConvert2.css';
$DropzoneStylesheetPath = $GuiCSSDir.'dropzone.css';
// / -----------------------------------------------------------------------------------
?>
<html dir='<?php echo $GUIDirection; ?>'>
  <head>
    <meta charset="UTF-8">
    <link rel='shortcut icon' href='<?php echo $FaviconPath; ?>'/>
    <link rel='stylesheet' href='<?php echo $DropzoneStylesheetPath; ?>'/>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@1.0.0/css/bulma.min.css">
    <link href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.5.2/css/fontawesome.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.5.2/js/all.min.js"></script>
    <script type='text/javascript'>var dropzoneText = '<?php echo $GuiHeaderText1; ?>';</script>
    <script type='text/javascript' src='<?php echo $JsLibraryPath; ?>'></script>
    <script type='text/javascript' src='<?php echo $DropzonePath; ?>'></script>
    <title><?php echo $ApplicationName; ?> - <?php echo $ApplicationTitle; ?></title>
  </head>

footer.php

<?php
    // / -----------------------------------------------------------------------------------
    // / APPLICATION INFORMATION ...
    // / HRConvert2, Copyright on 4/17/2023 by Justin Grimes, www.github.com/zelon88
    // /
    // / LICENSE INFORMATION ...
    // / This project is protected by the GNU GPLv3 Open-Source license.
    // / https://www.gnu.org/licenses/gpl-3.0.html
    // /
    // / APPLICATION INFORMATION ...
    // / This application is designed to provide a web-interface for converting file formats
    // / on a server for users of any web browser without authentication.
    // /
    // / FILE INFORMATION ...
    // / v3.2.5.
    // / This file contains language specific GUI elements to be displayed at the bottom of pages.
    // /
    // / HARDWARE REQUIREMENTS ...
    // / This application requires at least a Raspberry Pi Model B+ or greater.
    // / This application will run on just about any x86 or x64 computer.
    // /
    // / DEPENDENCY REQUIREMENTS ...
    // / This application requires Debian Linux (w/3rd Party audio license),
    // / Apache 2.4, PHP 8+, LibreOffice, Unoconv, ClamAV, Tesseract, Rar, Unrar, Unzip,
    // / 7zipper, FFMPEG, PDFTOTEXT, Dia, PopplerUtils, MeshLab, Mkisofs & ImageMagick.
    // /
    // / <3 Open-Source
    // / ----------------------------------------------------------------------------------- 

    // / -----------------------------------------------------------------------------------
    // / Set a flag to tell that the UI has been displayed.
    $FooterDisplayed = TRUE;
    // / Check if the core is loaded.
    if (!isset($CoreLoaded)) die('ERROR!!! HRConvert2-2, This file cannot process your request! Please submit your file to convertCore.php instead!');
    // / -----------------------------------------------------------------------------------

    if ($ShowFinePrint) { ?>
    <footer id='footer' name='footer' class="footer">
      <div class="content has-text-centered">
        <p><?php echo $GuiFooterText1; ?></a></p>
      </div>
    </footer>
  <?php } ?>

  </body>
</html>

convert-Gui1.php

<?php
// / -----------------------------------------------------------------------------------
// / COPYRIGHT INFORMATION ...
// / HRConvert2, Copyright on 6/9/2024 by Justin Grimes, www.github.com/zelon88
// /
// / LICENSE INFORMATION ...
// / This project is protected by the GNU GPLv3 Open-Source license.
// / https://www.gnu.org/licenses/gpl-3.0.html
// /
// / APPLICATION INFORMATION ...
// / This application is designed to provide a web-interface for converting file formats
// / on a server for users of any web browser without authentication.
// /
// / FILE INFORMATION ...
// / v3.3.7.
// / This file contains language specific GUI elements for accepting file uploads.
// /
// / HARDWARE REQUIREMENTS ...
// / This application requires at least a Raspberry Pi Model B+ or greater.
// / This application will run on just about any x86 or x64 computer.
// /
// / DEPENDENCY REQUIREMENTS ...
// / This application requires Debian Linux (w/3rd Party audio license),
// / Apache 2.4, PHP 8+, LibreOffice, Unoconv, ClamAV, Tesseract, Rar, Unrar, Unzip,
// / 7zipper, FFMPEG, PDFTOTEXT, Dia, PopplerUtils, MeshLab, Mkisofs & ImageMagick.
// /
// / <3 Open-Source
// / -----------------------------------------------------------------------------------

// / -----------------------------------------------------------------------------------
// / Set a flag to tell that the UI has been displayed.
$UIDisplayed = TRUE;
// / Check if the core is loaded.
if (!isset($CoreLoaded)) die('ERROR!!! HRConvert2-2, This file cannot process your request! Please submit your file to convertCore.php instead!');
// / Assign temporary variables.
$gui2AudArr = $gui2VidArr = $gui2StreamArr = $gui2DocArr = $gui2SpreadArr = $gui2PresArr = $gui2ArchArr = $gui2ImaArr = $gui2ModArr = $gui2SubArr = $gui2DraArr = $gui2OcrArr = array();
// / -----------------------------------------------------------------------------------
?>
<body>
  <?php
  if (!isset($_GET['noGui'])) { ?>
  <div id='header-text' class="hero is-link is-small">
    <div class="hero-body has-text-centered">
      <h1 class="title"><?php echo $ApplicationName; ?></h1>
      <p class="subtitle mt-2"><?php echo $Gui1Text1; ?></p>
    </div>
    <hr />
  </div>
  <div id='main' class="section">
    <div id='overview' class="content has-text-centered">
      <p><?php echo $Gui1Text2; ?></p>
      <button id='more-info-button' class='info-button button is-primary is-outlined' onclick='toggle_visibility("more-info"); toggle_visibility("more-info-button"); toggle_visibility("supported-formats-show-button"); toggle_visibility("less-info-button");' style='text-align:center; display:block; margin-left:auto; margin-right:auto;'><?php echo $Gui1Text3; ?></button>
      <button id='less-info-button' class='info-button button is-primary is-outlined' onclick='toggle_visibility("more-info"); toggle_visibility("more-info-button"); toggle_visibility("supported-formats-show-button"); toggle_visibility("less-info-button");' style='text-align:center; display:none; margin-left:auto; margin-right:auto;'><?php echo $Gui1Text4; ?></button>
      <div id='more-info' style='display:none;' class="mt-5">

        <p><?php echo $Gui1Text5; ?></p>
        <p><?php echo $Gui1Text6; ?></p>
        <button id='supported-formats-show-button' class='info-button button is-primary is-small is-outlined' onclick='toggle_visibility("supported-formats"); toggle_visibility("supported-formats-show-button"); toggle_visibility("supported-formats-hide-button");' style='text-align:center; display:none; margin-left:auto; margin-right:auto;'><?php echo $Gui1Text7; ?></button>
        <button id='supported-formats-hide-button' class='info-button button is-primary is-small is-outlined' onclick='toggle_visibility("supported-formats"); toggle_visibility("supported-formats-show-button"); toggle_visibility("supported-formats-hide-button");' style='text-align:center; display:none; margin-left:auto; margin-right:auto;'><?php echo $Gui1Text8; ?></button>
        <br>
        <div id='supported-formats' class='supported-formats' style='display:none;'>
          <div class="tabs is-centered is-boxed">
            <ul class="m-0">
              <li class="is-active"><a>Audio</a></li>
              <li><a>Video</a></li>
              <li><a>Stream</a></li>
              <li><a>Document</a></li>
              <li><a>Spreadsheet</a></li>
              <li><a>Presentation</a></li>
              <li><a>Archive</a></li>
              <li><a>Image</a></li>
              <li><a>3D Model</a></li>
              <li><a>Subtitle</a></li>
              <li><a>Drawing</a></li>
              <li><a>OCR</a></li>
            </ul>  
          </div>
          <div class="content">
            <?php if (in_array('Audio', $SupportedConversionTypes)) { ?>
            <div class="tab-content is-active">
              <p class="has-text-centered has-text-weight-semibold"><i><?php echo $Gui1Text11; ?></i></p>
              <div class="grid">
                <?php foreach ($MediaInputArray as $gui1AudArr) { ?>
                <div class="cell py-3 px-4 has-background-link-95 has-text-primary-invert has-radius-normal"><?php echo $gui1AudArr; ?></div>
                <?php } ?>
                </div>
            </div>
            <?php } if (in_array('Video', $SupportedConversionTypes)) { ?>
            <strong><?php echo $Gui1Text12; ?></strong>
            <ol>
              <?php foreach ($VideoInputArray as $gui1VidArr) { ?>
              <li><?php echo $gui1VidArr; ?></li>
              <?php } ?>
            </ol>
            <?php } if (in_array('Stream', $SupportedConversionTypes)) { ?>
            <strong><?php echo $Gui1Text13; ?></strong>
            <p><i><?php echo $Gui1Text30; ?></i></p>
            <ol>
              <?php foreach ($StreamArray as $gui1StreamArr) { ?>
              <li><?php echo $gui1StreamArr; ?></li>
              <?php } ?>
            </ol>
            <?php } if (in_array('Document', $SupportedConversionTypes)) { ?>
            <strong><?php echo $Gui1Text14; ?></strong>
            <ol>
              <?php foreach ($DocumentArray as $gui1DocArr) { ?>
              <li><?php echo $gui1DocArr; ?></li>
              <?php } ?>
            </ol>
            <?php } if (in_array('Document', $SupportedConversionTypes)) { ?>
            <strong><?php echo $Gui1Text15; ?></strong>
            <ol>
              <?php foreach ($SpreadsheetArray as $gui1SpreadArr) { ?>
              <li><?php echo $gui1SpreadArr; ?></li>
              <?php } ?>
            </ol>
            <?php } if (in_array('Document', $SupportedConversionTypes)) { ?>
            <strong><?php echo $Gui1Text16; ?></strong>
            <ol>
              <?php foreach ($PresentationArray as $gui1PresArr) { ?>
              <li><?php echo $gui1PresArr; ?></li>
              <?php } ?>
            </ol>
            <?php } if (in_array('Archive', $SupportedConversionTypes)) { ?>
            <strong><?php echo $Gui1Text17; ?></strong>
            <p><i><?php echo $Gui1Text18; ?></i></p>
            <ol>
              <?php foreach ($DearchiveArray as $gui1ArchArr) { ?>
              <li><?php echo $gui1ArchArr; ?></li>
              <?php } ?>
            </ol>
            <?php } if (in_array('Image', $SupportedConversionTypes)) { ?>
            <strong><?php echo $Gui1Text19; ?></strong>
            <p><i><?php echo $Gui1Text21; ?></i></p>
            <ol>
              <?php foreach ($ImageArray as $gui1ImaArr) { ?>
              <li><?php echo $gui1ImaArr; ?></li>
              <?php } ?>
            </ol>
            <?php } if (in_array('Model', $SupportedConversionTypes)) { ?>
            <strong><?php echo $Gui1Text22; ?></strong>
            <ol>
              <?php foreach ($ModelArray as $gui1ModArr) { ?>
              <li><?php echo $gui1ModArr; ?></li>
              <?php } ?>
            </ol>
            <?php } if (in_array('Subtitle', $SupportedConversionTypes)) { ?>
            <strong><?php echo $Gui1Text31; ?></strong>
            <ol>
              <?php foreach ($SubtitleInputArray as $gui1SubArr) { ?>
              <li><?php echo $gui1SubArr; ?></li>
              <?php } ?>
            </ol>
            <?php } if (in_array('Drawing', $SupportedConversionTypes)) { ?>
            <strong><?php echo $Gui1Text23; ?></strong>
            <p><i><?php echo $Gui1Text24; ?></i></p>
            <ol>
              <?php foreach ($DrawingArray as $gui1DraArr) { ?>
              <li><?php echo $gui1DraArr; ?></li>
              <?php } ?>
            </ol>
            <?php } if (in_array('OCR', $SupportedConversionTypes)) { ?>
            <strong><?php echo $Gui1Text25; ?></strong>
            <p><i><?php echo $Gui1Text20; ?></i></p>
            <p><i><?php echo $Gui1Text26; ?></i></p>
            <ol>
              <li>Jpg</li>
              <li>Jpeg</li>
              <li>Png</li>
              <li>Bmp</li>
              <li>Pdf</li>
              <li>Gif</li>
              <li>Webp</li>
              </ol>
            <p><i><?php echo $Gui1Text27; ?></i></p>
            <ol>
              <li>Doc</li>
              <li>Docx</li>
              <li>Txt</li>
              <li>Rtf</li>
              <li>Odt</li>
              <li>Pdf</li>
            </ol>
            <?php } ?>
          </div>
        </div>
      </div>
      <hr />
    </div>
    <?php } ?>
    <div align='center'>
      <div id='call-to-action1' title='' style='max-width:1000px; text-align:center;'>
        <p><?php echo $Gui1Text28; ?></p>
      </div>
    </div>
    <div align='center'>
      <div id='dropzone' style='max-height:1000px; max-width:1000px; margin:25px;'>
        <form action='convertCore.php' class='dropzone' id='filesToUpload' name='filesToUpload' method='post' enctype='multipart/form-data'>
        <input type='hidden' id='token1' name='Token1' value='<?php echo $Token1; ?>'>
        <input type='hidden' id='token2' name='Token2' value='<?php echo $Token2; ?>'>
        </form>
      </div>
    </div>
    <div align='center'>
      <div id='continue' style='max-width:1000px; text-align:center;'>
        <form action='convertCore.php?showFiles=1<?php if (isset($_GET['noGui'])) echo '&noGui=TRUE'; if (isset($_GET['language'])) echo '&gui='.$_GET['gui']; if (isset($_GET['language'])) echo '&language='.$_GET['language']; if (isset($_GET['color'])) echo '&color='.$_GET['color']; ?>' method='post'>
          <input type='hidden' id='token1' name='Token1' value='<?php echo $Token1; ?>'>
          <input type='hidden' id='token2' name='Token2' value='<?php echo $Token2; ?>'>
          <input type='submit' id='continue-button' class='info-button button is-link' value='<?php echo $Gui1Text29; ?>'>
        </form>
        <br />
        <?php if (!isset($_GET['noGui'])) { ?>
        <hr />
        <?php } ?>
      </div>
    </div>

  <?php if (!isset($_GET['noGui'])) { ?>
  </div>
  <?php }
  // / Manually clean up sensitive memory. Helps to keep track of variable assignments.
  $gui1AudArr = $gui1VidArr = $gui1StreamArr = $gui1DocArr = $gui1SpreadArr = $gui1PresArr = $gui1ArchArr = $gui1ImaArr = $gui1ModArr = $gui2SubArr = $gui1DraArr = NULL;
  unset($gui1AudArr, $gui1VidArr, $gui1StreamArr, $gui1DocArr, $gui1SpreadArr, $gui1PresArr, $gui1ArchArr, $gui1ImaArr, $gui1ModArr, $gui2SubArr, $gui1DraArr);

dropzone.css

remove background property from .dropzone

zelon88 / HRConvert2