Please give the webpage some TLC

tmckay1 commented 4 years ago

I couldn't stand the look of the page, so I made a new page, please consider using this, or modifying it as you see fit. I tested this and verified it worked, but might not have considered every edge case, so please also test this for yourself. I think it could still use some improvement, but this is a good start to get it to look like a more modern web design. Didn't see instructions for contributing, so I will just put this here since it is one page.

Things I changed:

1990's coloring style was ripped and replaced with a more basic modern look. Background gradient was used, and a more minimalist palette was chosen
Made a more modern styling with "floating" modal look, adding box shadow for the styling
Centered text in the modal and fixed input styling

Things I did not change:

Did not change the styling of the directories list we get from the c# server
Did not change the radio styling since this is coupled to the parameters sent to the server
Did not make it responsive for mobile devices since it is supposed to be used for a full sized screen anyway

Here is the before: dyna1

Here is the after: dyna2

Here is the code:

<head>
    <!-- used colors from: https://coolors.co/2452f9-033860-004385-93b7be-d4f5f5-->
    <style>
        a.button {
            -webkit-appearance: button;
            -moz-appearance: button;
            appearance: button;
            text-decoration: none;
            color: #d4f5f5;
            font-size: 20px;
            height: 80px;
            background-color: #2452f9;
            border: none;
            padding: 5px 10px;
            text-align: left font-family: 'Open Sans';
            border-radius: 8px;
            border: 3px solid #D4F5F5;
        }

        .grid-container {
            display: grid;
            height: Auto;
            align-content: Top;
            grid-template-columns: auto auto auto auto auto;
            grid-gap: 5px;
            padding: 5px;
            justify-content: start;
        }

        .settings {
            text-align: left;
            font-family: 'Open Sans';
            font-size: 20px;
        }

        .warningbutton {
            -webkit-appearance: button;
            -moz-appearance: button;
            appearance: button;
            text-decoration: none;
            color: #fff;
            font-size: 20px;
            background-color: red;
            border: none;
            padding: 8px 16px;
            text-align: center;
            font-family: 'Open Sans';
            border-radius: 5px;
            margin: auto;
        }

        .warningbutton:hover {
            cursor: pointer;
            background-color: #a83246;
        }

        .submitbutton {
            -webkit-appearance: button;
            -moz-appearance: button;
            appearance: button;
            text-decoration: none;
            color: #fff;
            font-size: 20px;
            background-color: #2452f9;
            border: none;
            border-radius: 5px;
            padding: 8px 16px;
            text-align: center;
            font-family: 'Open Sans';
            margin: auto;
            margin-bottom: 20px;
        }

        .submitbutton:hover {
            background-color: rgb(124,165,200);
            cursor: pointer;
        }

        h1 {
            text-align: center;
            font-family: 'Open Sans';
            margin-top: 0;
            padding: 16px 8px;
        }

        .form {
            background: #fff;
            border-radius: 16px;
            margin: auto;
            margin-top: 20px;
            width: 65%;
            padding: 20px 100px;
            box-shadow: 5px 10px 18px #888888;
        }

        .form-row {
            display: flex;
            margin-bottom: 16px;
        }

        .form-label {
            width: 40%;
        }

        .form-input {
            width: 60%;
        }

        .dynoframe {
            font-family: monospace;
        }

        input[type="text"] {
            border-radius: 5px;
            font-size: 20px;
            padding: 8px 12px;
            width: 100%;
        }

        input[type="text"]:focus {
            border-color: rgb(124,165,200);
        }

        body {
            background: rgb(124,165,200);
            background: linear-gradient(0deg, rgba(124,165,200,1) 0%, rgba(231,231,231,1) 100%);
        }
    </style>
</head>
<body>
    <form action="default.htm">
        <div class="settings">
            <div class="form">
                <h1>Welcome to <span class="dynoframe">DynaFrame!</span></h1>

                <div class="grid-container">
                    <!-- DIRECTORIES -->
                </div>

                <div class="form-row">
                    <div class="form-label"><span>Infobar (clock) font size:</span></div>
                    <div class="form-input"><input type="text" name="infobarfontsize" placeholder="50" <!--INFOBARFONTSIZE--></div>
                </div>

                <div class="form-row">
                    <div class="form-label"><span>Slideshow duration between slides (milliseconds) font size:</span></div>
                    <div class="form-input"><input type="text" name="slideshowduration" placeholder="30000" <!--SLIDESHOWDURATION--></div>
                </div>

                <div class="form-row">
                    <div class="form-label"><span>Transition duration during fades (milliseconds) font size:</span></div>
                    <div class="form-input"><input type="text" name="transitiontime" placeholder="1600" <!--TRANSITIONTIME--></div>
                </div>

                <!--DIRECTORYTOADD-->
                <div class="form-row">
                    <div class="form-label"><span>Directory to Add:</span></div>
                    <div class="form-input"><input type="text" name="directoryAdd" width="300" placeholder="/home/pi/pics" /></div>
                </div>

                <!--SHUFFLE-->
                <div class="form-row">
                    <div class="form-label"><span>Shuffle:</span></div>
                    <div class="form-input"><input type="radio" name="shuffle" id="shuffle" value="on" /><label for="shuffle">On</label><input id="shuffle-off" type="radio" name="shuffle" value="off" /><label for="shuffle-off">Off</label></div>
                </div>

                <!--SHOWTIME-->
                <div class="form-row">
                    <div class="form-label"><span>Show Time:</span></div>
                    <div class="form-input"><input type="radio" name="clock" id="clock" value="on" /><label for="clock">On</label><input type="radio" name="clock" value="off" id="clock-off"/><label for="clock-off">Off</label></div>
                </div>

                <!--ROTATE-->
                <div class="form-row">
                    <div class="form-label"><span>Rotate:</span></div>
                    <div class="form-input">
                        <input type="radio" name="rotation" value="0" id="radio-0">
                        <label for="radio-0">0</label>
                        <input type="radio" name="rotation" value="90" id="radio-90">
                        <label for="radio-90">90</label>
                        <input type="radio" name="rotation" value="180" id="radio-180">
                        <label for="radio-180">180</label>
                        <input type="radio" name="rotation" value="270" id="radio-270">
                        <label for="radio-270">270</label>
                    </div>
                </div>

                <div class="form-row">
                    <input type="submit" value="Submit" class="submitbutton" />
                </div>

                <!--SHUTDOWN-->
                <div class="form-row">
                    <button name="shutdown" value="oneminute" class="warningbutton">Shutdown system in one minute</button>
                    <button name="shutdown" value="tenseconds" class="warningbutton">Shutdown system in ten seconds</button>
                </div>

            </div>
        </div>
    </form>
</body>

qwksilver commented 4 years ago

@tmckay1 Nice look, you might put it together as a pull request, it will be easier for geektoolkit to merge that way, also consider going dark with it, most web pages are, and they are much more eyeball friendly that way. Better yet an option on page to select between the two.

Geektoolkit commented 4 years ago

Ah it's my fault, I don't have contribution guidelines setup. Tis ok though that was an excellent job, I already have it built and am testing it and it's looking amazing. Huge thanks, I'm going to get a build out tonight hopefully with this in it (and the 'remove directories' work)

LOL@1990s styling...that's about the last time I wrote a webpage! I'm reading what you did and learning a ton, and really really appreciate the work. I'll hopefully be able to get stuff going on the engine side so that this gets to the next level of usability. I'm going to be focusing on it again next week so should see more features and fixes pop out then

Geektoolkit commented 4 years ago

Thanks again for this, it's in 2.05 so you won't have to every see that old UI anymore :)

tmckay1 commented 4 years ago

Awesome thanks for the quick turnaround. No problem, thanks for the library. Definitely this UI could use some iteration but I think this styling will be a good base for that moving forward.

Geektoolkit / Dynaframe3

Please give the webpage some TLC #14