Last time I contributed on the design of the Front-end for PH Steemstats
https://utopian.io/utopian-io/@vallesleoruther/designing-the-ph-steemstats-frontend
Currently it looks like this, deployed on heroku:
http://ph-steemapp.herokuapp.com
From the design contribution, I then converted the PSD Mockups/ Designs to HTML, CSS3, and Javascript.
Summary of Features/Pages Done
- Created a better Page Loader and effects.
- Created the Home Page.
- Created the About Page.
- Created the Active Users Page.
- Created the Inactive Users Page.
- Created the New Users Page.
Page Loader
Every page starts with this loader, the blue color of the Philippine Flag with the logo at the center, then a circle loader to show the progress. After the circle loader is finished the loader then transitions up to reveal the page.
Home Page
The home page is divided into these sections, the header, the navigation, the banner that has the welcome message and a read more button which goes to the about page, quick links blocks that links to the new, inactive, and active users pages, the total count of users fetched by the data, data tables section which displays the data of the users, and the footer.
You can visit the live site here: https://renegade47.github.io/ph-steemstats-frontend
About Page
The about page is divided into two sections, the about page banner which has the page contents, and the quick links blocks which links to the new, inactive, and active users pages.
You can visit the live page here: https://renegade47.github.io/ph-steemstats-frontend/about.html
Active, Inactive, New Users Pages
These pages has the same templates, as they just differ on the data being displayed. The page sections are the user counts for each category, and the data table section which displays the data fetched which depends on the current category/page on.
You can visit the live pages here:
https://renegade47.github.io/ph-steemstats-frontend/new.html
https://renegade47.github.io/ph-steemstats-frontend/active.html
https://renegade47.github.io/ph-steemstats-frontend/inactive.html
Notes
The pages are not yet mobile responsive, it is better to check the pages first on the desktop as we make a desktop first approach. Fix the bugs on the desktop then continue on making the pages mobile responsive.
Links
Repository: https://github.com/renegade47/ph-steemstats-frontend
Commits: https://github.com/renegade47/ph-steemstats-frontend/commit/214e4ab1906f407ecd059a5c51766332eb6dd248
Live Site: https://renegade47.github.io/ph-steemstats-frontend/inactive.html
Github Proof
Inspirations
https://tympanus.net/codrops/tag/preloader/
Posted on Utopian.io - Rewarding Open Source Contributors
Wow another contribution for the project, looking good the loader is awesome I like it how you got the colors of the Philippine flag. Nice to see that there is progress, keep on going :)
Downvoting a post can decrease pending rewards and make it less visible. Common reasons:
Submit
Thank you for the contribution. It has been approved.
Your work is informative, well written, and interesting. Thanks for sharing!
You can contact us on Discord.
[utopian-moderator]
Downvoting a post can decrease pending rewards and make it less visible. Common reasons:
Submit
Thank you so much for looking into my contribution.
Downvoting a post can decrease pending rewards and make it less visible. Common reasons:
Submit
nice work :)
Downvoting a post can decrease pending rewards and make it less visible. Common reasons:
Submit
Thank you very much @sweeverdev
Downvoting a post can decrease pending rewards and make it less visible. Common reasons:
Submit
Will it work in Pakistan as well?
Downvoting a post can decrease pending rewards and make it less visible. Common reasons:
Submit
Yes it will work with Pakistan as long as you change the queries from Philippines to Pakistan, it is possible.
Downvoting a post can decrease pending rewards and make it less visible. Common reasons:
Submit
ok i see , i will try...
Downvoting a post can decrease pending rewards and make it less visible. Common reasons:
Submit
The project is still under development, but you can fork it and try to make one for Pakistan, excited to see it when you try.
Downvoting a post can decrease pending rewards and make it less visible. Common reasons:
Submit
Good explanation, appreciated.
Downvoting a post can decrease pending rewards and make it less visible. Common reasons:
Submit
Thank you very much you understood it.
Downvoting a post can decrease pending rewards and make it less visible. Common reasons:
Submit
Thank you for informing .. Nice sharing ..
Downvoting a post can decrease pending rewards and make it less visible. Common reasons:
Submit
Thank you very much for the comment. What do you think of the design?
Downvoting a post can decrease pending rewards and make it less visible. Common reasons:
Submit
First of all, you have the possibility to work nationally and internationally without being dependent on a particular region, this beautiful thing, everything you do can spread internationally. The design part is totally fun and enjoyable.
I study computer engineering and design courses are very enjoyable ... at first you are free. Control is in your hands.
Downvoting a post can decrease pending rewards and make it less visible. Common reasons:
Submit
Wow thank you for the awesome comment, yes it is very enjoyable to design something and build it step by step until it is a finished product.
Downvoting a post can decrease pending rewards and make it less visible. Common reasons:
Submit
Cool! Thanks!
Downvoting a post can decrease pending rewards and make it less visible. Common reasons:
Submit
Thank you very much bro.
Downvoting a post can decrease pending rewards and make it less visible. Common reasons:
Submit
Downvoting a post can decrease pending rewards and make it less visible. Common reasons:
Submit
Hey @vallesleoruther I am @utopian-io. I have just upvoted you!
Achievements
Community-Driven Witness!
I am the first and only Steem Community-Driven Witness. Participate on Discord. Lets GROW TOGETHER!
Up-vote this comment to grow my power and help Open Source contributions like this one. Want to chat? Join me on Discord https://discord.gg/Pc8HG9x
Downvoting a post can decrease pending rewards and make it less visible. Common reasons:
Submit