SA-MP Forums

Go Back   SA-MP Forums > SA-MP Scripting and Plugins > Filterscripts > Tools and Files

Reply
 
Thread Tools Display Modes
Old 27/08/2017, 03:27 AM   #1
ZukerCup
Little Clucker
 
ZukerCup's Avatar
 
Join Date: Dec 2016
Location: Egypt
Posts: 32
Reputation: 7
Default A Simple Login And Register Pages for UCP


Here We Gooo... Today I'm Gonna Share With You a very simple login & register pages for your UCP or whatever...
You can easily edit the colors and its very fast in loading...
Here Is some pictures

Login page! http://imgur.com/a/NRbY2
Register page! http://imgur.com/a/gIumh

I Used FontAwesome Library Only

*Download*
Source File ===> https://www.mediafire.com/file/ltca3...ter_Design.zip

NOTE:I'm Just a Web Designer And If You'er Making A UCP and you need me for the designs you can pm or contact me at fb https://*******/elmoshaghb2019 , And Sorry for My Bad English.
__________________

91.121.223.142:7775



《《《《《《 Be mature 》》》》》》
ZukerCup is offline   Reply With Quote
Old 12/11/2017, 06:46 PM   #2
Awide
Big Clucker
 
Join Date: Mar 2014
Posts: 86
Reputation: 6
Default Re: A Simple Login And Register Pages for UCP

Clean interface. Thank you!
Awide is offline   Reply With Quote
Old 12/11/2017, 07:38 PM   #3
prineside
Huge Clucker
 
Join Date: Jan 2013
Posts: 226
Reputation: 114
Default Re: A Simple Login And Register Pages for UCP

You have a few things to do:
  1. Background image is not correctly positioned. On large screens background image will be asymmetrically repeated (https://imgur.com/I7cCb5D)
  2. X coordinate of orange circle with black user icon depends on screen resolution. It is centered only in your case, anyone with higher screen resolution will see this circle on the right side of the form, with lower - on the left. On mobile devices this circle will move out of screen (see my previous image link)
  3. On screens with low vertical resolution the emptiness above the form will look like a waste of space and will force user to scroll the page. On big screens this form will appear higher than screen center.
  4. Default fonts. On different OS and in different browsers you'll get different fonts. Default font for Chrome on Windows (which is used by most SA-MP players) is Times New Roman, which is OK for documents & papers and looks ugly on sites. You should use custom font (Open Sans / Roboto or at least just "sans-serif")
  5. Form fields are not properly centered and appear closer to the right side of form
  6. When input is focused, it's lower border slowly becomes larger, moving everything beneath it down (and also moves everything up when focus is lost). It is critical for input elements to always stay at the same place (except situations when form elements must be added / removed)
  7. Don't write each word with a capital letter, this is a mistake
  8. Black text on black background is hardly visible. If you use background image with lower brightness, it will become even worse
  9. Border-radius for form background is way too large / not proportional to any other page element. But it is a matter of taste, so it is OK if you like it
  10. Black user icon on orange circle is not properly centered vertically
  11. Don't redefine classes from FontAwesome, you will break everything. If you add one more user icon to your page, it will look like your orange... thing. You should encapsulate clean tags with "fa-..." classes into tags with your styles, something like this:

    HTML Code:
    <div class="orange-thingy">
        <i class="fa fa-user"></i>
    </div>
    <style>
        .orange-thingy {
            background: orange;
        }
        .orange-thingy i.fa {
            font-size:28px;
        }
    </style>
  12. Don't change style of default tags (I'm talking about input) to fit just your form, there are other places where such tags will be used and your styles will not fit. Add a class and change it's styles instead
  13. Don't use style sellectors like "a[href=register.html]", they are slow and work wrong. You should consider a place where this link is put, not page it links to. Links "Forget password?" and "Register now!" must look the same for user to understand they both are links
  14. Input placeholders are not visible when fields are filled with something or focused, use labels to give a hint for user
  15. Button looks good, but it not behaves like a button when you click it or move cursor over it. It must change its color or change cursor shape to something like "pointer" when hovered. Currently it does nothing and makes user think it is not possible to click on it

Keep working & learning and some day you'll get the rank of web designer By the way, I'm not a web designer.
__________________


Prineside DevTools





therainycat (prineside.com)
prineside is offline   Reply With Quote
Reply

Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
[FilterScript] Simple Register / Login epic.matrix Filterscripts 10 17/12/2014 12:00 PM
[FilterScript] Simple register/login system Tuck Filterscripts 6 05/02/2014 07:43 PM
[FilterScript] [FS]LLOGIN ~ The New And Simple way to login, and register! ~ lowrida018 Filterscripts 10 23/05/2011 05:34 AM


All times are GMT. The time now is 11:34 PM.


Powered by vBulletin® Version 3.8.6
Copyright ©2000 - 2019, Jelsoft Enterprises Ltd.