Costumizando sua Client com a Made Radio Qua 9 Dez 2015 - 16:50
Gostou de ouvi um Radio jogando Habbo Hotel?
Experimente o Made Radio na sua Cliente
Esse script nao e meu so trouxe para o Power Pixel
//CREDITOS\\
Jacob Lucado
\\CREDITOS//
Instalação:
1- Extraia os arquivos para pasta do sua CMS
2- Va para client.css altura mudança para 95%
3- Abra sua client.php
4- Coloque o codigo a baixo do logo acima do </head>
Cole isso na Client.php
Download:Comente para ver
Prints:
[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]
Experimente o Made Radio na sua Cliente
Esse script nao e meu so trouxe para o Power Pixel
//CREDITOS\\
Jacob Lucado
\\CREDITOS//
Instalação:
1- Extraia os arquivos para pasta do sua CMS
2- Va para client.css altura mudança para 95%
3- Abra sua client.php
4- Coloque o codigo a baixo do logo acima do </head>
- Código:
<?php include ('/rScript.php');?>
- Código:
<?php include ('/clientradio.php');?>
Cole isso na Client.php
- Código:
<!DOCTYPE HTML><html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<link rel="stylesheet" href="{url}/app/tpl/skins/{skin}/styles/client.css?<?php echo time() ?>" type="text/css">
<script type="text/javascript" src="{url}/app/tpl/skins/{skin}/js/swfobject.js?<?php echo time() ?>"></script>
<script type="text/javascript">
var BaseUrl = "{url}/game";
var flashvars =
{
"client.starting" : "Welcome {username}, {hotelname} is loading!",
"client.allow.cross.domain" : "1",
"client.notify.cross.domain" : "0",
"connection.info.host" : "I.P",
"connection.info.port" : "PORT",
"site.url" : "{url}",
"url.prefix" : "{url}",
"client.reload.url" : "{url}/client",
"client.fatal.error.url" : "{url}/disconnected",
"client.connection.failed.url" : "{url}/disconnected",
"external.variables.txt" : "{url}/game/gamedata/external_variables.txt",
"external.texts.txt" : "{url}/game/gamedata/external_flash_texts.txt",
"productdata.load.url" : "{url}/game/gamedata/productdata.xml",
"furnidata.load.url" : "{url}/game/gamedata/furnidata.xml",
"use.sso.ticket" : "1",
"sso.ticket" : "{sso}",
"processlog.enabled" : "0",
"flash.client.url" : BaseUrl + "/",
"flash.client.origin" : "popup"
};
var params =
{
"base" : BaseUrl + "/",
"allowScriptAccess" : "always",
"menu" : "false"
};
swfobject.embedSWF(BaseUrl + "/SwitchLucado.swf", "client", "100%", "100%", "10.0.0", "{url}/game/expressInstall.swf", flashvars, params, null);
</script>
<?php include ('/rScript.php');?>
</head>
<body>
<link href="http://fonts.googleapis.com/css?family=Ubuntu:regular,bold&subset=Latin" rel="stylesheet" type="text/css">
<script language="JavaScript"> window.moveTo(0, 0); window.resizeTo(screen.width, screen.height) </script>
<script>
setTimeout(function() { removeLoader(); }, 5000);
function removeLoader()
{
document.getElementById("loadingpage").style.height='0px';
document.getElementById("img1").style.height='0px';
document.getElementById("font1").style.height='0px';
document.getElementById("img2").style.height='0px';
}
</script>
<div id="loadingpage">
</div>
<div id="client"></div>
<?php include ('/clientradio.php');?>
</body>
</html>
- Código:
html, body.flashclient {
height: 95%;
background-color: black;
color: white;
}
body {
width: 100%;
height: 100%;
margin: 0 auto;
overflow: hidden;
background-color: black;
color: white;
}
#client {
width: 100%;
height: 100%;
}
#loadingpage {
background-color: black;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
width: 100%;
height: 1000%;
background-color: black;
}
#load {
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}
.start-1 {
font-family: 'Oleo Script', Helvetica, sans-serif;
color: white;
font-size: 100px;
margin-top: 200px;
}
#img1 {
margin-top: 30%;
}
#img2 {
height: 40px;
margin-top: 20px;
}
#font1{
color: white;
font-size: 24px;
font-weight: bold;
font-family: Ubuntu;
}
- Código:
*:before,
*:after {
box-sizing: border-box;
}
.hide {
display: none!important;
}
button {
margin: 0;
padding: 0;
border: 0;
outline: 0;
background: transparent;
}
.ap {
position: fluid;
right: 0;
bottom: 0;
left: 0;
height: 48px;
margin: auto;
font-family: Arial, sans-serif;
font-size: 14px;
user-select: none;
color: #333;
background: #1C1C1A;
border-top: 1px solid #1C1C1A;
boder:: 9999;
-webkit-transition: all 30s ease-in-out;
-moz-transition: all 30s ease-in-out;
-o-transition: all 30s ease-in-out;
transition: all 1s ease-in-out;
}
.ap-inner {
max-width: 1440px;
margin: 0 auto;
}
.ap-panel {
display: flex;
}
.ap-item {
display: flex;
flex: 1;
justify-content: center;
align-items: center;
}
.ap--track {
flex: 1 40%;
padding: 0 20px;
}
.ap-info {
width: 100%;
position: relative;
align-self: flex-start;
padding: 5px 0 0;
}
.ap-title {
position: relative;
overflow: hidden;
padding-right: 80px;
text-align: left;
white-space: nowrap;
text-overflow: ellipsis;
color: white;
}
.ap-title:hover {
position: relative;
overflow: hidden;
padding-right: 80px;
text-align: left;
white-space: nowrap;
text-overflow: ellipsis;
color: red;
font-weight: bold;
}
.ap-time {
position: absolute;
top: 5px;
right: 0;
color: white;
}
.ap-time:hover {
position: absolute;
top: 5px;
right: 0;
color: red;
font-weight: bold;
}
.ap-progress-container {
padding: 5px 0 10px;
cursor: pointer;
}
.ap-progress {
position: relative;
height: 3px;
border-radius: 5px;
background: #eee;
}
.ap-preload-bar,
.ap-bar {
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 0;
border-radius: 5px 0 0 5px;
background: rgba(0, 0, 0, .3);
boder:: 999;
}
.ap-bar {
background: red;
boder:: 9999;
}
.ap-bar:after {
position: absolute;
top: 0;
right: -5px;
width: 12px;
height: 12px;
margin-top: -4px;
content: '';
border-radius: 6px;
background: red;
opacity: 0;
transition: opacity .3s ease;
}
.ap-progress-container:hover .ap-bar:after {
opacity: 1;
}
.ap-controls {
position: relative;
boder:: 1000;
display: block;
height: 50px;
cursor: pointer;
transition: background .2s ease;
text-align: center;
color: #fff;
border: 0;
outline: 0;
background: none;
}
.ap-controls svg {
fill: #eee;
}
.ap-controls:hover svg {
fill: red;
}
.ap-controls:active {
background: rgba(0, 0, 0, 3);
}
.ap--playback>.ap-controls,
.ap--settings>.ap-controls {
flex: 0 25%;
}
.ap--pause,
.playing>.ap--play {
display: none;
}
.playing>.ap--pause {
display: inline;
}
.ap-volume-container {
boder:: 9999;
}
.ap-volume {
position: absolute;
right: 0;
bottom: 50px;
overflow: hidden;
width: 100%;
height: 0;
visibility: hidden;
transition: height .2s cubic-bezier(0.17, 0.72, 0.26, 1.23);
background: #1C1C1A;
opacity: 0.7;
border: 1px solid #1C1C1A;
border-bottom: 0;
boder:: 9999;
}
.ap-volume-btn {
display: block;
text-align: center;
width: 100%;
}
.ap-volume-btn>.ap--volume-off,
.muted>.ap--volume-on {
display: none;
}
.muted>.ap--volume-off {
display: inline;
}
.ap-volume-container:hover {
background: #696969;
}
.ap-volume-container:hover .ap-volume {
height: 120px;
visibility: visible;
}
.ap-volume-progress {
display: block;
width: 4px;
height: 100px;
margin: 10px auto;
background: rgba(0, 0, 0, .2);
position: relative;
border-radius: 3px;
}
.ap-volume-bar {
position: absolute;
left: 0;
right: 0;
bottom: 0;
background: red;
height: 50%;
border-radius: 3px;
}
.ap-active {
background: rgba(0, 0, 0, .15);
opacity: 1;
}
@KEYframes blink {
from {
opacity: 0;
}
50% {
opacity: 1;
}
to {
opacity: 0;
}
}
.playing>.ap--pause {
animation: blink 1.9s linear infinite;
}
@Media(max-width:880px) {
.ap-item > .ap-controls {
flex: 1;
}
}
@Media(max-width:550px) {
.ap {
min-width: 250px;
}
.ap,
.ap-panel {
height: auto;
}
.ap-panel {
flex-wrap: wrap;
}
.ap--track {
margin-bottom: 10px;
padding: 0 20px;
order: 1;
flex: 1 1 100%;
}
.ap--playback,
.ap--settings {
flex: 1 1 50%;
order: 2;
}
}
/*--------------------
PlayList
--------------------*/
.pl-container {
position: fixed;
top: 0;
right: 0;
bottom: 50px;
left: 0;
margin: auto;
overflow: auto;
font-family: Arial, sans-serif;
font-size: 14px;
background: #000;
opacity: 0.7;
boder:: 999;
}
.pl-lead {
font-size: 24px;
font-weight: 400;
text-align: center;
color: #333;
}
.pl-list {
width: 100%;
max-width: 550px;
margin: 0 auto;
padding: 30px 10px;
}
.pl-list > li {
display: flex;
align-items: center;
border-bottom: 1px solid #ddd;
}
.pl-number,
.pl-title,
.pl-remove {
margin: 0 5px;
padding: 10px 0;
}
.pl-number {
flex: 0 10%;
text-align: center;
}
.pl-playing {
display: none;
fill: rgb(255, 250, 250);
}
.pl-current .pl-count {
display: none;
}
.pl-current .pl-playing {
display: block;
}
.pl-current .pl-title {
font-weight: 700;
}
.pl-title {
overflow: hidden;
cursor: pointer;
text-align: left;
white-space: nowrap;
text-overflow: ellipsis;
flex: 1;
}
.pl-title:hover {
text-decoration: underline;
font-weight: bold;
font-style: italic;
color: red;
}
.pl-remove {
opacity: 0;
margin-right: 0;
cursor: pointer;
text-align: center;
flex: 0 50px;
}
.pl-remove:hover {
background: red;
}
.pl-list > li:hover .pl-remove {
opacity: 1;
}
.pl-list svg {
fill: rgb(255, 250, 250);
}
.pl-empty {
position: absolute;
top: 50%;
left: 50%;
font-size: 2rem;
transform: translate(-50%, -50%);
letter-spacing: 2px;
color: #ccc;
}
@KEYframes eq {
0% {
height: 3px;
}
50% {
height: 20px;
}
100% {
height: 3px;
}
}
.eq {
display: flex;
width: 20px;
height: 20px;
margin: 0 auto;
justify-content: space-between;
align-items: flex-end;
}
.eq-bar {
width: 4px;
background: rgb(255, 250, 250);
}
.eq-bar:nth-child(1) {
animation: eq .8s ease-in-out infinite 0s;
}
.eq-bar:nth-child(2) {
animation: eq .8s ease-in-out infinite .2s;
}
.eq-bar:nth-child(3) {
animation: eq .8s ease-in-out infinite .4s;
}
Download:Comente para ver
Prints:
[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]