[Mockup] Habbo Desktop's Base UI

Jerry

not rly active lol
Jul 8, 2013
1,956
522
Hi,

I coded a UI (from Jeff's Habbo UI mockups) in HTML and CSS a long time ago, but I don't have any use of it anymore so I am going to release it.

Screenshot:
e9ca1d8b86da4c79a63c434c9c93d4b0.png

unknown.png


CSS:
Code:
#user-interface {
    position: absolute;
    left: 305px;
    bottom: 30px;
    height: 50px;
    padding: 4px 0;
    margin-left: 4px;
}

#user-interface .user-interface-btn {
    color: #FFF;
    background-color: #886E9E;
    width: 48px;
    height: 48px;
    border-radius: 32px;
    box-shadow: inset 2px 2px 0 rgba(255, 255, 255, 0.5), inset 2px -2px 0 rgba(255, 255, 255, 0.5), inset -2px 2px 0 rgba(255, 255, 255, 0.5), inset -2px -2px 0 rgba(255, 255, 255, 0.5);
    font-size: 25px;
    line-height: 48px;
    text-align: center;
    text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.7);
    display: inline-block;
    position: relative;
    bottom: -10px;
    right: -10px;
}

#user-interface .user-interface-btn-small {
    color: #FFF;
    background-color: #446688;
    width: 36px;
    height: 36px;
    border-radius: 32px;
    box-shadow: inset 2px 2px 0 rgba(255, 255, 255, 0.5), inset 2px -2px 0 rgba(255, 255, 255, 0.5), inset -2px 2px 0 rgba(255, 255, 255, 0.5), inset -2px -2px 0 rgba(255, 255, 255, 0.5);
    font-size: 16px;
    line-height: 36px;
    text-align: center;
    text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.7);
    display: inline-block;
    position: relative;
    bottom: -10px;
    right: -10px;
}

#user-interface #lol1 {
    left: -85px;
    bottom: 5px;
}

#user-interface #lol2 {
    left: -117px;
    bottom: 45px;
}

#user-interface #lol3 {
    left: -117px;
    bottom: 55px;
    background-color: #27787B;
}

#user-interface #lol4 {
    left: -117px;
    bottom: 45px;
}

#user-interface #lol5 {
    left: -149px;
    bottom: 5px;
}

#user-interface #big-1 {
    left: -125px;
    bottom: 5px;
}

#user-interface #big-2 {
    left: -120px;
    bottom: 5px;
    background-color: #565082;
}

#user-interface #big-phone {
    left: 580px;
    bottom: 5px;
    background-color: #C0174E;
}

#user-interface #big-help {
    left: 575px;
    bottom: 5px;
    background-color: #C0174E;
}

#user-interface .user-interface-btn:active, #user-interface .user-interface-btn-small:active {
    opacity: 0.6;
}

HTML:
HTML:
<div id="user-interface">
    <div class="user-interface-btn" style="background-image: url(https://game.holorp.com/habbo-imaging/avatarimage?figure=ch-3077-110.fa-327…82.lg-270-110.hr-115-61.-3163-1407&gesture=srp&head_direction=2&headonly=1);background-position-x: -3px;background-position-y: -6px;"></div>
    <div class="user-interface-btn-small fa fa-trophy" id="lol1"></div>
    <div class="user-interface-btn-small fa fa-building" id="lol2"></div>
    <div class="user-interface-btn-small fa fa-black-tie" id="lol3"></div>
    <div class="user-interface-btn-small fa fa-tasks" id="lol4"></div>
    <div class="user-interface-btn-small fa fa-dot-circle-o" id="lol5"></div>
    <div class="user-interface-btn fa fa-shopping-cart" id="big-1"></div>
    <div class="user-interface-btn fa fa-shopping-basket" id="big-2"></div>
    <div class="user-interface-btn fa fa-question" id="big-help"></div>
    <div class="user-interface-btn fa fa-mobile" id="big-phone"></div>
</div>

Note
This may not be aligned correctly on bigger screen resolutions.

EDIT: I used FontAwesome for the icons, so you need to link the css for it to your HTML page for the icons to load.

The concept of the UI goes to Jeff Stehney.
 
Last edited:

NathanCarn3y

Leaving a legacy
Sep 14, 2016
625
195
Hi,

I coded a UI (from Jeff's Habbo UI mockups) in HTML and CSS a long time ago, and I don't have any use of it anymore so I am going to release it.

Screenshot:
e9ca1d8b86da4c79a63c434c9c93d4b0.png

unknown.png


CSS:
Code:
#user-interface {
    position: absolute;
    left: 305px;
    bottom: 30px;
    height: 50px;
    padding: 4px 0;
    margin-left: 4px;
}

#user-interface .user-interface-btn {
    color: #FFF;
    background-color: #886E9E;
    width: 48px;
    height: 48px;
    border-radius: 32px;
    box-shadow: inset 2px 2px 0 rgba(255, 255, 255, 0.5), inset 2px -2px 0 rgba(255, 255, 255, 0.5), inset -2px 2px 0 rgba(255, 255, 255, 0.5), inset -2px -2px 0 rgba(255, 255, 255, 0.5);
    font-size: 25px;
    line-height: 48px;
    text-align: center;
    text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.7);
    display: inline-block;
    position: relative;
    bottom: -10px;
    right: -10px;
}

#user-interface .user-interface-btn-small {
    color: #FFF;
    background-color: #446688;
    width: 36px;
    height: 36px;
    border-radius: 32px;
    box-shadow: inset 2px 2px 0 rgba(255, 255, 255, 0.5), inset 2px -2px 0 rgba(255, 255, 255, 0.5), inset -2px 2px 0 rgba(255, 255, 255, 0.5), inset -2px -2px 0 rgba(255, 255, 255, 0.5);
    font-size: 16px;
    line-height: 36px;
    text-align: center;
    text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.7);
    display: inline-block;
    position: relative;
    bottom: -10px;
    right: -10px;
}

#user-interface #lol1 {
    left: -85px;
    bottom: 5px;
}

#user-interface #lol2 {
    left: -117px;
    bottom: 45px;
}

#user-interface #lol3 {
    left: -117px;
    bottom: 55px;
    background-color: #27787B;
}

#user-interface #lol4 {
    left: -117px;
    bottom: 45px;
}

#user-interface #lol5 {
    left: -149px;
    bottom: 5px;
}

#user-interface #big-1 {
    left: -125px;
    bottom: 5px;
}

#user-interface #big-2 {
    left: -120px;
    bottom: 5px;
    background-color: #565082;
}

#user-interface #big-phone {
    left: 580px;
    bottom: 5px;
    background-color: #C0174E;
}

#user-interface #big-help {
    left: 575px;
    bottom: 5px;
    background-color: #C0174E;
}

#user-interface .user-interface-btn:active, #user-interface .user-interface-btn-small:active {
    opacity: 0.6;
}

HTML:
HTML:
<div id="user-interface">
    <div class="user-interface-btn" style="background-image: url(https://game.holorp.com/habbo-imaging/avatarimage?figure=ch-3077-110.fa-327…82.lg-270-110.hr-115-61.-3163-1407&gesture=srp&head_direction=2&headonly=1);background-position-x: -3px;background-position-y: -6px;"></div>
    <div class="user-interface-btn-small fa fa-trophy" id="lol1"></div>
    <div class="user-interface-btn-small fa fa-building" id="lol2"></div>
    <div class="user-interface-btn-small fa fa-black-tie" id="lol3"></div>
    <div class="user-interface-btn-small fa fa-tasks" id="lol4"></div>
    <div class="user-interface-btn-small fa fa-dot-circle-o" id="lol5"></div>
    <div class="user-interface-btn fa fa-shopping-cart" id="big-1"></div>
    <div class="user-interface-btn fa fa-shopping-basket" id="big-2"></div>
    <div class="user-interface-btn fa fa-question" id="big-help"></div>
    <div class="user-interface-btn fa fa-mobile" id="big-phone"></div>
</div>

Note
This may not be aligned correctly on bigger screen resolutions.

The concept of the UI goes to Jeff Stehney.
Thanks for release. Might go to use in the near future. :p
 

asdasd34

New Member
Dec 28, 2018
3
1
nasıl kullanacağım
Post automatically merged:

nasıl kullanacağım
Post automatically merged:

how will i use
 

Willians

New Member
Oct 18, 2015
4
0
If I want to make the buttons open through the socket, for example .. the store or the inventory, how do I do it?
 

Karel

Member
May 15, 2019
80
13
You can create RCON Commands and create a connection. Then add an event on the buttons that triggers your commands. I dont know if there's another way haha
 
Last edited:

Users who are viewing this thread

Top