Buonasera, Cerco qualcuno che se ne intende di programmazione web HTML, CSS e JavaScript front-end avanzato lato client e lato server che può aiutare un mio amico con la modifica di una pagina web dinamica allo stato attuale (il cambiamento della pagina senza premere il pulsante ricarica/aggiorna del browser), grazie per l'aiuto
Programmazione web HTML, CSS e JavaScript
- Autore discussione Mr. Mistery
- Data d'inizio
-
- Tag
- programmazione
- Stato
Questo è il posto per aiutarlo, che problemi ha trovato?
In pratica è la pagina di una chat che deve funzionare dinamicamente allo stato attuale compreso l'invio messaggi che vede solo offline, di seguito allego delle foto e un video
http://android2.altervista.org/kiwiirc_errors.jpg http://android2.altervista.org/kiwiirc_errors2.jpg http://android2.altervista.org/kiwiirc_errors3.jpg http://android2.altervista.org/kiwiirc_errors4.jpg http://android2.altervista.org/kiwiirc_errors5.jpg http://android2.altervista.org/Dynamic web page current state.mp4
http://android2.altervista.org/kiwiirc_errors.jpg http://android2.altervista.org/kiwiirc_errors2.jpg http://android2.altervista.org/kiwiirc_errors3.jpg http://android2.altervista.org/kiwiirc_errors4.jpg http://android2.altervista.org/kiwiirc_errors5.jpg http://android2.altervista.org/Dynamic web page current state.mp4
Sul Forum possiamo aiutare solo vedendo il codice, se è un problema urgente o non può condividerlo allora forse è meglio contattare un programmatore che potrà aiutare personalmente.
Io non ho capito bene il tuo problema.
Spiega in modo dettagliato.
Vuoi creare una chat? Stai usando wordpress?
Quell'errore esce perchè viene bloccato il tentativo di caricare un file. Tu stai caricando un file dal tuo pc ed è normale che ti esce quell'errore dato che il server non riuscirebbe mai a prendere quel file dal tuo pc. Lo devi caricare su un server e poi mettere il riferimento (in HTTPS altrimenti ti compare sempre quell'errore)
Spiega in modo dettagliato.
Vuoi creare una chat? Stai usando wordpress?
Quell'errore esce perchè viene bloccato il tentativo di caricare un file. Tu stai caricando un file dal tuo pc ed è normale che ti esce quell'errore dato che il server non riuscirebbe mai a prendere quel file dal tuo pc. Lo devi caricare su un server e poi mettere il riferimento (in HTTPS altrimenti ti compare sempre quell'errore)
Il mio amico mi ha mandato il codice, ve lo riporto di seguito
Ibernato, il mio amico ha già la pagina della chat, quello che sta cercando è di avere una copia della pagina allo stato attuale, quando clicchi su avvia si carica l'altra schermata e gli piacerebbe avere una copia con quella schermata caricata che funziona in modo dinamico compreso l'invio dei messaggi che vede solo lui offline
Codice:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<base target="_blank">
<title> Kiwi IRC </title>
<link rel="shortcut icon" href="client/assets/img/favicon.ico">
<style type="text/css">
html, body { width: 880%;
height: 780%; }
* { margin:0; padding:0; }
/* Few resets for within the kiwi container */
#kiwi {
overflow:hidden; position:relative;
height:100%;
}
#kiwi * { margin:0px; padding:0px; }
#kiwi p { margin:0.5em 0; }
#kiwi a { color:#20123a; text-decoration:none; cursor:pointer; }
#kiwi a img { border:none; }
#kiwi .format_span a { color: inherit; background-color: inherit; text-decoration: inherit; font-style: inherit; font-weight: inherit;}
#kiwi h1,
#kiwi h2,
#kiwi h3 {
margin-top: 22px;
margin-bottom: 11px;
}
#kiwi h4,
#kiwi h5,
#kiwi h6 {
margin-top: 11px;
margin-bottom: 11px;
}
#kiwi h1 { font-size: 46px; }
#kiwi h2 { font-size: 40px; }
#kiwi h3 { font-size: 34px; }
#kiwi h4 { font-size: 28px; }
#kiwi h5 { font-size: 200px; }
#kiwi h6 { font-size: 160px; }
/**
* Main layout blocks
*/
#kiwi .toolbar { position:absolute; top:0px; width:100%; display:none; z-index:1; }
#kiwi .panels { position:absolute; left:0px; right:200px; bottom:100px; top:100px; }
#kiwi .right_bar { position:absolute; right:0px; width:3100px; bottom:100px; top:100px; overflow:visible; }
#kiwi .right-bar-content { position:relative; height:100%; z-index:0; }
#kiwi .controlbox { position: absolute; bottom:0px; width:100%; z-index: 1; display:none; }
#kiwi .memberlists_resize_handle {
position: absolute; width:10px; z-index:1; cursor:w-resize;
}
#kiwi .toolbar .tabs { margin-right: 200px; overflow: hidden; }
#kiwi .toolbar .panellist {
overflow: hidden;
display:block;
}
#kiwi .toolbar .panellist li {
list-style: none;
display:inline-block; position:relative;
padding:5px; margin:3px;
cursor: pointer;
}
#kiwi .toolbar .panellist .active { padding-right:23px; }
#kiwi .toolbar .panellist .alert_highlight { font-weight: bold; }
#kiwi .toolbar .panellist .alert_activity { font-weight: bold; }
#kiwi .toolbar .panellist .alert_action { font-weight: bold; }
#kiwi .toolbar .panellist li { width: auto; text-align: left; }
#kiwi .toolbar .panellist li .part { position: absolute; top: 7px; right: 5px; }
#kiwi .toolbar .panellist li .part:before { content:"[x]"; }
#kiwi .toolbar .panellist li .part:hover { color: #900; }
#kiwi .toolbar .panellist li img.icon { left:5px; top:2px; height:auto; width:auto; }
#kiwi .toolbar .connections { overflow:hidden; }
#kiwi .toolbar .connections .connection { float:left; }
#kiwi.chanlist_treeview .toolbar .connections .connection { float:none; }
#kiwi .toolbar .connections .panellist { display:inline; }
#kiwi .toolbar .connections .panellist:after { content:""; }
#kiwi .status_message {
position: absolute;
left: 0;
right: 0;
z-index: 2;
background: #FFF;
border-bottom: 1px solid;
text-align: center;
}
#kiwi .channel_tools {
position: absolute;
top: 0;
left: 0;
width: 100%;
z-index: 1;
}
#kiwi .channel_tools i {
width: 32%;
display: inline-block;
text-align: center;
cursor: pointer;
}
#kiwi .panel_container { overflow:auto; height:100%; }
#kiwi .panel {
overflow-x:wrap;
border:none; display: none;
}
#kiwi .messages a {}
#kiwi .messages.active { display:block; }
#kiwi .messages .msg {}
#kiwi .messages .msg .time { display:inline; }
#kiwi .messages .msg .nick { display:inline; cursor: pointer; }
#kiwi .messages .msg .text { display:inline; }
#kiwi .messages .msg.action .nick { display:none; }
#kiwi .messages .msg.action .text { }
#kiwi .messages .msg.action.join { }
#kiwi .messages .msg.action.part .text { }
#kiwi .messages .msg.action.quit .text { }
#kiwi .messages .msg.action.kick .text { }
#kiwi .messages .msg.status .nick { display:none; }
#kiwi .messages .msg.status .text { }
#kiwi .messages .msg.topic .nick { display:none; }
#kiwi .messages .msg.topic .text { }
#kiwi .messages .msg.motd { }
#kiwi .messages .msg.motd .nick { }
#kiwi .messages .msg.motd .text { }
#kiwi .messages .msg.whois .nick { }
#kiwi .messages .msg.whois .text { }
#kiwi .messages .msg.error .text { }
#kiwi .messages .msg.global_nick_highlight { }
#kiwi .messages .msg.highlight { }
#kiwi .messages .msg .media .media_content { white-space: normal; }
#kiwi .right_bar { border-left: 1px solid #8A8A8A; }
#kiwi .right_bar.disabled { width:0; }
#kiwi .right_bar.disabled .channel_tools,
#kiwi .right_bar.disabled .memberlists { display:none; }
#kiwi .right-bar-toggle {
position: absolute;
top: 10px;
left: -2.3em;
width: 1.5em;
font-size: 200px;
font-weight: bold;
text-align: center;
line-height: 1.5em;
background: #e3e3e3;
border: 1px solid;
cursor: pointer;
/*
Some mobile browsers only support long-hand border-radius, and using large
px values instead of 50% ensures the circle
*/
-webkit-border-top-left-radius: 500px;
-webkit-border-top-right-radius: 500px;
-webkit-border-bottom-left-radius: 500px;
-webkit-border-bottom-right-radius: 500px;
border-top-left-radius: 500px;
border-top-right-radius: 500px;
border-bottom-left-radius: 500px;
border-bottom-right-radius: 500px;
}
/* The active channels nicklist */
#kiwi .memberlists {
position: absolute;
left: 0;
bottom: 0;
top: 0;
width: 100%;
overflow-y: auto;
padding-top: 50px;
}
#kiwi .memberlists > div { display:none; }
#kiwi .memberlists > div.active { display:block; }
#kiwi .memberlists ul li { overflow-y:auto; overflow-x:hidden; cursor:pointer; }
#kiwi .memberlists ul li a.nick { }
/* The userbox shown when clicking a nick */
#kiwi .userbox { position:relative; width:100px; }
#kiwi .userbox a { }
#kiwi .userbox a i { width:1em; text-align:center; }
/* Emoticons */
#kiwi .emoticon {
display: inline-block;
height: 15px; width: 17px;
overflow: hidden;
font-size: 0;
background: url(../img/emoticons.png) no-repeat;
}
#kiwi .emoticon.smile { background-position:0px 0; }
#kiwi .emoticon.sad { background-position:-25px 0; }
#kiwi .emoticon.lion { background-position:-50px 0; }
#kiwi .emoticon.winky_lion { background-position:-75px 0; }
#kiwi .emoticon.confused { background-position:-100px 0; }
#kiwi .emoticon.cry { background-position:-125px 0; }
#kiwi .emoticon.wink { background-position:-150px 0; }
#kiwi .emoticon.wink_happy { background-position:-175px 0; }
#kiwi .emoticon.tongue { background-position:-200px 0; }
#kiwi .emoticon.cringe_tongue { background-position:-225px 0; }
#kiwi .emoticon.shocked { background-position:-250px 0; }
#kiwi .emoticon.happy { background-position:-275px 0; }
#kiwi .emoticon.eyebrows { background-position:-300px 0; }
#kiwi .emoticon.heart { background-position:-325px 0; }
#kiwi .emoticon.doh { background-position:-373px 0; }
#kiwi .emoticon.big_grin { background-position:-398px 0; }
#kiwi .emoticon.wide_eye_right { background-position:-423px 0; }
#kiwi .emoticon.wide_eye_left { background-position:-448px 0; }
#kiwi .emoticon.unsure { background-position:-473px 0; }
/**
* Auto complete UI
*/
#kiwi .autocomplete {
position: absolute;
box-sizing: border-box;
left: 12em;
right: 4em;
bottom: 100%;
overflow-y: auto;
display: none;
}
#kiwi .autocomplete-header {
overflow: hidden;
}
#kiwi.narrow .autocomplete-header {
display: none;
}
#kiwi .autocomplete-header-help {
float: right;
}
#kiwi .autocomplete-list {
overflow-y: auto;
}
#kiwi.narrow .autocomplete {
left: 0;
right: 0;
}
#kiwi .autocomplete-item {
list-style: none;
overflow: hidden;
}
#kiwi .autocomplete-item .matches {
margin-left: 2em;
}
#kiwi.narrow .autocomplete-item .matches {
display: none;
}
#kiwi .autocomplete-item .actions {
float: right; margin-right: 2em;
}
#kiwi .autocomplete-item .description {
float: right;
}
/**
* Control box
*/
#kiwi .controlbox .input {
height:1.7em; position:relative;
}
/* The nick label */
#kiwi .controlbox .input .nick { cursor: pointer; }
#kiwi .controlbox .input .nick a { }
/* Wrapper div around the text area input */
#kiwi .controlbox .input .input_wrap { display:inline; }
/* Nick change dialog showed when clicking the nick label */
#kiwi .controlbox .nickchange {
position: absolute;
background: #FFF;
}
#kiwi .controlbox .nickchange input { }
#kiwi .controlbox .nickchange button { }
/* Plugin tools */
#kiwi .controlbox .input_tools { float:right; }
#kiwi .controlbox .input_tools .tool { margin:0 1em; display:inline; }
/**
* Topic bar
*/
#kiwi .toolbar .topic { position:relative; height:2em; }
#kiwi .toolbar .topic div {
position:absolute;
top:0; bottom:0; left:0; right:0;
overflow: hidden;
}
/**
* Server selection dialog
*/
#kiwi .server_select { position:relative; width:320px; margin:0 auto; overflow:hidden; }
#kiwi .server_select.initial { margin-top: 3em; }
#kiwi .server_select .more { display: none; }
#kiwi .server_select button { }
#kiwi .server_select input { }
#kiwi .server_select label { }
#kiwi .server_select br { clear:both; }
#kiwi .server_select .basic input { }
#kiwi .server_select .basic label { }
#kiwi .server_select .basic { border-bottom: 1px solid gray; margin-bottom:1em; }
#kiwi .server_select .basic .show_more { }
#kiwi .server_select .basic tr.pass { display:none; }
#kiwi .server_select .basic tr.key { display:none; }
#kiwi .server_select.single_server .basic { border:none; }
#kiwi .server_select .status { }
/* Channel key icon */
#kiwi .server_select .basic tr.channel td { position: relative; }
#kiwi .server_select .basic tr.channel .fa-key {
position: absolute;
top: 0.4em;
right: 0.6em;
font-size: 1.3em;
cursor: pointer;
}
#kiwi .server_select .basic tr.have_key { display:none; }
/* When connected to an IRC server, .ok is set on the status div */
#kiwi .server_select .status.ok { }
/* IRC server connection error, .error is set on the status div */
#kiwi .server_select .status.error { }
/* Logo and title in the server selection dialog */
#kiwi .server_select .kiwi_logo { text-align: center; display:block; }
#kiwi .server_select .kiwi_logo h1 { }
#kiwi .server_select .kiwi_logo img { }
/* Icons in the top right corner */
#kiwi .toolbar .app_tools { float:right; }
#kiwi .toolbar .app_tools ul li {
display:inline; cursor:pointer;
}
#kiwi .toolbar .app_tools img { height:25px; width:25px; margin: 6px 0.7em 0 0; }
/* Settings applet */
/* Some of these styles will move to global styling later */
#kiwi .settings_container {
padding: 25px;
}
#kiwi .settings_container .settings-category {
display: none;
margin-left: 1220px;
padding: 2em;
}
#kiwi .settings_container .settings-category.active {
display: block;
}
#kiwi .settings_container .settings-category-list {
float: left;
width: 130px;
}
#kiwi .settings_container .settings-category-list a {
display: block;
line-height: 2.5em;
padding: 0 1em;
width: 100%;
}
#kiwi .settings_container .thumbnails:before {
content: ' ';
display: table;
}
#kiwi .settings_container .thumbnails:after {
content: ' ';
display: table;
clear: both;
}
#kiwi .settings_container .thumbnails {
list-style-type: none;
margin: 0;
padding: 0;
}
#kiwi .settings_container .thumbnails > li {
display: inline-block;
}
#kiwi .settings_container label {
cursor: pointer;
}
#kiwi_ form label { display: block; }
#kiwi form input,
#kiwi form select,
#kiwi form textarea {
/*width: 100%;
box-sizing: border-box;*/
}
#kiwi form input[size],
#kiwi form select[size],
#kiwi form textarea[size] {
width: auto;
}
#kiwi form input[type="file"],
#kiwi form input[type="image"],
#kiwi form input[type="submit"],
#kiwi form input[type="reset"],
#kiwi form input[type="button"] {
width: auto;
}
#kiwi form input[type="radio"] {
width: auto;
cursor: pointer;
margin-top: 2px;
}
#kiwi form input[type="checkbox"] {
width: auto;
cursor: pointer;
margin-top: 3px;
}
#kiwi form .radio,
#kiwi form .checkbox {
margin-bottom: 10px;
padding-left: 20px;
}
#kiwi form .radio:last-child,
#kiwi form .checkbox:last-child {
margin-bottom: 0;
}
#kiwi form .radio input[type="radio"],
#kiwi form .checkbox input[type="checkbox"] {
float: left;
margin-left: -20px;
}
#kiwi form .radio+.radio,
#kiwi form .checkbox+.checkbox {
margin-top: -7px;
}
#kiwi .settings_container .thumbnail {
float: left;
margin-right: 15px;
text-align: center;
}
#kiwi .settings_container .thumbnail > .thumbnail_wrapper {
border-radius: 3px;
padding: 3px;
}
#kiwi .settings_container .thumbnail > img {
border-radius: 2px;
}
#kiwi .settings_container .thumbnail.active > .thumbnail_wrapper {
background-color: #a6c42c;
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #a6c42c), color-stop(100%, #76bd2b));
background-image: -webkit-linear-gradient(#a6c42c, #76bd2b);
background-image: linear-gradient(#a6c42c, #76bd2b);
}
#kiwi .settings_container section {
padding-bottom: 20px;
}
#kiwi .settings_container .theme_color {
border-radius: 2px;
height: 75px;
width: 75px;
}
#kiwi .control-group {
margin: 0 0 20px 20px;
}
#kiwi .control-group:last-child {
margin-bottom: 0;
}
#kiwi .settings_container section.language select { width:300px; }
@media screen and (max-width: 768px) {
#kiwi .settings_container {
padding: 25px;
}
}
#kiwi .channel_info label { display: block; }
#kiwi .channel_info .channel_url {
display: none;
}
#kiwi .channel_info .channel-banlist table { display: none; }
#kiwi .channel_info .remove-ban { cursor: pointer; }
/**
* Reusable componants
*/
#kiwi .divider-verticle {
border-left: 1px solid #CFCFCF;
border-right: 1px solid #FFFFFF;
position: absolute;
top:25px; bottom:25px;
right:0;
width:0;
}
#kiwi .divider-horizontal {
border-top: 1px solid #CFCFCF;
border-bottom: 1px solid #FFFFFF;
position: absolute;
left:25px; right:25px;
bottom:0;
height:0;
}
#kiwi .loader {
background:url(../img/loader.gif) no-repeat;
width:43px; height:11px;
display:inline-block;
}
#kiwi .ui_menu {
padding: 0;
z-index:10;
position: absolute;
top: 100px; left: 100px;
background: #fff;
border: 1px solid #bbb;
background-clip: padding-box;
}
#kiwi .ui_menu .ui_menu_title {
padding: 5px 10px 5px 10px; font-weight: bold; overflow:hidden; background:#ddd;
}
#kiwi .ui_menu .ui_menu_content { padding: 5px 10px 5px 10px; border-top:1px solid #e9e9e9; overflow:hidden; position:relative; }
#kiwi .ui_menu .ui_menu_content > a { display: block; }
#kiwi .ui_menu .ui_menu_content > a[class^="fa-"]:before,
#kiwi .ui_menu .ui_menu_content > a[class*=" fa-"]:before { margin-right: 5px; color:#666; }
#kiwi .ui_menu .ui_menu_foot {
padding: 5px; border-top:1px solid #e9e9e9; background:#ddd; overflow:hidden;
}
#kiwi .ui_menu .ui_menu_foot .close { }
#kiwi .applet .applet_chanlist .fa-sort-asc:before, #kiwi .applet .applet_chanlist .fa-sort-desc:before {
padding-left: 1em;
}
#kiwi .applet .applet_chanlist td {
min-width: 120px;
}
#kiwi .notification {
z-index: 1;
position:absolute;
top:3px; right:3px;
width: 300px;
max-width: 90%;
/* .show class reveals this element */
display: none;
}
#kiwi .notification.show { display: block; }
#kiwi .notification-inner {
position:relative;
padding:0 10px 23px 10px;
}
#kiwi .notification .close {
position:absolute;
bottom: 10px;
left: 10px;
margin: -10px;
cursor:pointer;
width: 40px;
}
#kiwi {
background: #fff;
color: #000000;
}
#kiwi,
#kiwi input,
#kiwi button,
#kiwi textarea {
font-family: Roboto;
font-size: 200px;
line-height: 1.4em;
}
#kiwi button, #kiwi input {
padding: 3px 7px;
}
#kiwi input, #kiwi textarea {
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.5),0 1px 0px rgba(255, 255, 255, 0.3);
border: none;
border-radius: 3px;
}
#kiwi button, #kiwi .ui_menu .toggle_banlist {
display: inline-block;
margin-bottom: 0;
font-size: 200px;
font-weight: normal;
line-height: 1.42857143;
text-align: center;
white-space: nowrap;
vertical-align: middle;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
background-image: none;
background-color: #20123a;
color: #FFF;
border: 3px solid transparent;
border-radius: 30px;
}
#kiwi .btn:focus,
#kiwi .btn:active:focus,
#kiwi .btn.active:focus , #kiwi .ui_menu .toggle_banlist:focus {
outline: thin dotted;
outline: 5px auto -webkit-focus-ring-color;
outline-offset: -2px;
}
#kiwi .btn:hover,
#kiwi .btn:focus, #kiwi .ui_menu .toggle_banlist:focus, #kiwi .ui_menu .toggle_banlist:hover {
color: #000;
text-decoration: none;
}
#kiwi .btn:active,
#kiwi .btn.active {
background-image: none;
outline: 0;
-webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
}
#kiwi .btn.disabled,
#kiwi .btn[disabled],
#kiwi fieldset[disabled] .btn {
pointer-events: none;
cursor: not-allowed;
filter: alpha(opacity=65);
-webkit-box-shadow: none;
box-shadow: none;
opacity: .65;
}
#kiwi .btn-primary, #kiwi .ui_menu .toggle_banlist {
color: #000;
background-color: #ffffff;
border-color: #000000;
}
#kiwi .btn-primary:hover,
#kiwi .btn-primary:focus,
#kiwi .btn-primary:active,
#kiwi .btn-primary.active,
#kiwi .btn-primary:active,
#kiwi .btn-primary.active,
#kiwi .btn-primary.disabled,
#kiwi .btn-primary[disabled],
#kiwi fieldset[disabled] .btn-primary,
#kiwi .btn-primary.disabled:hover,
#kiwi .btn-primary[disabled]:hover,
#kiwi fieldset[disabled] .btn-primary:hover,
#kiwi .btn-primary.disabled:focus,
#kiwi .btn-primary[disabled]:focus,
#kiwi fieldset[disabled] .btn-primary:focus,
#kiwi .btn-primary.disabled:active,
#kiwi .btn-primary[disabled]:active,
#kiwi fieldset[disabled] .btn-primary:active,
#kiwi .btn-primary.disabled.active,
#kiwi .btn-primary[disabled].active,
#kiwi fieldset[disabled] .btn-primary.active {
background-color: #ffffff;
border-color: #000000;
}
#kiwi .toolbar {
background-color: #20123a;
font-size: 0.9em;
}
#kiwi .controlbox {
background-color: #20123a;
border-top: 1px solid #ddd;
}
#kiwi.chanlist_treeview .controlbox {
border-top: none;
}
#kiwi .memberlists_resize_handle {
/*display:none; width:0;*/;
}
#kiwi .toolbar .connections { list-style: none; }
#kiwi .toolbar .panellist {
background: #fff;
color: #a5a5a5;
border: 10px solid #fff;
margin: 5px 0 0 5px;
float: left;
}
#kiwi .toolbar .panellist.applets { }
#kiwi .toolbar .panellist li {
display: inline-block;
padding: 6px 10px;
font-size: 200px;
font-weight: normal;
line-height: 1.42857143;
text-align: left;
white-space: nowrap;
vertical-align: middle;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
background-image: none;
border: 3px solid transparent;
color: #000;
background-color: #ffffff;
border-color: #000000;
margin: 0 0 0 3px;
}
#kiwi .toolbar .panellist li span {
font-family: Roboto;
}
#kiwi .toolbar .panellist li span.fa {
font-family: FontAwesome;
}
#kiwi .toolbar .panellist li:hover {
background-color: #ffffff;
}
#kiwi .toolbar .tabs {
padding-top: 6px;
}
#kiwi .toolbar .tabs {
margin-right: 0 !important;
}
#kiwi .toolbar .panellist .alert_highlight {
color: #fff;
background-color: #000000;
border-color: #000000;
}
#kiwi .toolbar .panellist .alert_highlight:hover {
color: #fff;
background-color: #000000;
border-color: #000000;
}
#kiwi .toolbar .panellist .alert_activity {
font-weight: normal;
}
#kiwi .toolbar .tabs .connections {
margin-bottom: 3px;
}
#kiwi .toolbar .panellist .alert_action {
font-weight: normal;
background-color: #21B1D9;
border-color: #5bc0de;
}
#kiwi .toolbar .panellist .active {
padding-right: 190px;
color: #000;
background-color: #ffffff;
border-color: #000000;
}
#kiwi.chanlist_treeview .toolbar .panellist .active {
padding-right: 27px;
}
#kiwi .toolbar .panellist .active:hover {
color: #000;
background-color: #ffffff;
}
#kiwi .toolbar .panellist .alert_activity:hover {
color: #000;
}
#kiwi .toolbar .panellist li .part {
top: 7px;
}
#kiwi .toolbar .panellist li.server span {
padding-left: 5px;
font-weight: bold;
font-family: Roboto;
}
#kiwi.connected .toolbar .panellist li.server:before {
content: "\f0ec";
color: #3f9532;
}
#kiwi .toolbar .panellist li.server:before {
content: "\f06a";
color: #900;
line-height: 1em;
vertical-align: middle;
}
/* Tab texts are within a span */
#kiwi .toolbar .panellist li span {
line-height: 320px;
vertical-align: middle;
display: inline-block;
}
#kiwi.chanlist_treeview .toolbar .panellist li span {
overflow: hidden;
max-width: 100px;
}
#kiwi .toolbar .panellist li .activity {
float: right;
display: inline-block;
min-width: 10px;
padding: 3px 7px;
font-size: 90px;
font-weight: bold;
font-family: Roboto;
line-height: 1;
color: #000000;
text-align: center;
white-space: nowrap;
vertical-align: baseline;
background-color: #fff;
border-radius: 10px;
position: absolute;
right: 10px;
}
#kiwi .toolbar .panellist li .activity.zero {
visibility: hidden;
}
#kiwi .toolbar .panellist.applets li .activity {
display: none;
}
/*
#kiwi .toolbar .panellist li .activity:before { content:"("; }
#kiwi .toolbar .panellist li .activity:after { content:")"; }
*/
#kiwi .status_message {
background: #FEEFB3;
color: #9F6000;
border-bottom: 1px solid #d7bb71;
padding: 0.9em;
text-align: center;
font-size: 1.1em;
}
#kiwi .status_message.err {
color: #D8000C;
background: #FFBABA;
}
#kiwi .channel_tools {
padding: 0 5% 5px 5%;
background: #20123a;
}
#kiwi .channel_tools i {
width: 30%;
font-size: 2.2em;
line-height: 1.6em;
color: #FFF;
}
#kiwi .channel_tools i:hover {
transition: color 0.3s;
color: #7BCCE3;
}
#kiwi .messages {
color: #000000;
}
#kiwi .messages.active {
}
#kiwi .messages a {
text-decoration: none;
}
#kiwi .messages .msg {
border-bottom: 1px solid #DEDEDE;
padding: 1px;
font-family: Roboto;
font-size: 0.9em;
clear: both;
}
#kiwi .messages .msg .time {
width: 4em;
float: right;
color: #aaa;
padding: 1px;
display: none;
font-size: 0.9em;
}
#kiwi .messages .msg .nick {
width: 11em;
float: left;
font-family: Roboto;
text-align: right;
padding: 2px 1px 2px 0;
overflow: hidden;
}
#kiwi .messages .msg .text {
display: block;
margin-left: 11em;
border-left: 1px solid #DEDEDE;
white-space: pre-wrap;
word-wrap: break-word;
font-family: Roboto;
padding: 2px 0 2px 5px;
}
#kiwi .messages .msg.action .text {
color: #ff00ff;
border-left: none;
font-style: italic;
}
#kiwi .messages .msg.action.nick .text, #kiwi .messages .msg.action.mode .text {
color: #F5A734;
}
#kiwi .messages .msg.action.join .text {
color: #F5A734;
}
#kiwi .messages .msg.action.part .text {
color: #60C1DC;
}
#kiwi .messages .msg.action.quit .text {
color: #60C1DC;
}
#kiwi .messages .msg.action.kick .text {
color: #d58512;
}
#kiwi .messages .msg.status .nick {
}
#kiwi .messages .msg.status .text {
color: #990000;
margin-left: 9em;
border-left: none;
font-weight: bold;
}
#kiwi .messages .msg.topic {
margin: 10px;
background: #fcf8e3;
border: 1px solid #F3C572;
border-radius: 5px;
}
#kiwi .messages .msg.topic .time, #kiwi .messages .msg.topic .nick {
display: none;
}
#kiwi .messages .msg.topic .text {
color: #009900;
margin-left: 0;
font-style: italic;
border: none;
}
#kiwi .messages .msg.motd {
border: none;
}
/*#kiwi .messages .msg.motd .nick { display:none; }*/
#kiwi .messages .msg.motd .text {
color: #666;
font-family: Roboto;
}
#kiwi .messages .msg.whois {
background-color: #fcf8e3;
}
#kiwi .messages .msg.whois .nick {
font-weight: normal;
}
#kiwi .messages .msg.whois .text {
margin-left: 18em;
padding-left: 1em;
border-left: 1px dashed #999;
}
#kiwi .messages .msg.error .text {
border: 1px solid #A33F3F;
background-color: #D28A8A;
padding: 0.5em;
margin-top: 1em;
margin-bottom: 1em;
margin-right: 2em;
}
#kiwi.timestamps .messages .msg .time {
display: block;
}
#kiwi.timestamps .messages .msg .text {
margin-left: 11.5em;
padding-left: 0.5em;
}
#kiwi .messages .msg.global_nick_highlight,
#kiwi .messages .msg.highlight {
transition: background 0.3s;
background: #fcf8e3;
}
#kiwi .messages .msg.repeated_nick .nick {
}
/* Narrow styling (window width < 420px) */
#kiwi.narrow .messages .msg .time { display:none; }
#kiwi.narrow .messages .msg .nick { display:block; float:none; text-align:left; padding-bottom:0;}
#kiwi.narrow .messages .msg .text { display:block; white-space:pre-wrap; word-wrap:break-word; padding-top:0; margin:0;}
#kiwi.narrow .messages .msg.action .text { }
#kiwi.narrow .messages .msg.repeated_nick .nick { display:none; }
#kiwi .messages .msg .media {
margin-left: 0.5em;
}
#kiwi .messages .msg .media a {
text-decoration: none;
}
#kiwi .messages .msg .media .media_close {
font-size: 0.9em;
}
#kiwi .messages .msg .media .media_content {
margin: 10px 0 0 2em;
overflow: hidden;
}
#kiwi .messages .msg .media .media_content img {
padding: 3px;
border: 1px solid gray;
}
#kiwi .messages .msg .media .media_content > .content {
background: white;
overflow: hidden;
padding: 10px;
border: #DDD 1px solid;
border-top-color: #EEE;
border-bottom-color: #BBB;
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.15);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
border-radius: 5px;
float: left;
}
#kiwi .messages .notice {
color: #000000;
}
#kiwi .messages .msg .media.twitter .media_content > .content {
background: transparent;
border: none;
overflow: hidden;
box-shadow: none;
padding: 0;
}
#kiwi .messages .msg .media.reddit .thumbnail_nsfw {
display: inline-block;
float: left;
}
#kiwi .messages .msg .media.reddit .thumbnail {
float: left;
margin-right: 0.5em;
}
#kiwi .messages .last_seen {
border-bottom: 2px dashed #B0CF82;
}
#kiwi .right_bar {
background-color: #fff;
border-left: 1px solid #000;
}
#kiwi.narrow .right_bar {
width:100%;
}
#kiwi.narrow .right_bar.disabled {
width:0;
}
#kiwi .right_bar.disabled {
width: 0;
}
#kiwi .memberlists {}
#kiwi .memberlists .meta {
background: #20123a;
line-height: 6.4em;
border-bottom: 1px solid #ddd;
font-size: 1.5em;
margin: -10px 0 5px 0;
padding: 5px 0 5%;
text-align: center;
color: #FFF;
}
#kiwi .memberlists ul {
list-style: none;
}
#kiwi .memberlists ul.active {
}
#kiwi.narrow .memberlists ul li {
padding: 0.5em 1em;
border-bottom: 1px solid lightgray;
text-align: center;
}
#kiwi .memberlists ul li {
padding: 0.2em 0.7em;
}
#kiwi .memberlists ul li:hover {
border-left: 50px solid #88C56A;
-webkit-transition: 0.2s ease;
-moz-transition: 0.2s ease;
-ms-transition: 0.2s ease;
-o-transition: 0.2s ease;
transition: 0.2s ease;
}
#kiwi .memberlists ul li a.nick {
display: block;
color: black;
font-size:1.4em;
}
#kiwi .userbox {
margin: 4px 1em 5px 1em;
padding-bottom: 0.7em;
font-size: 200px;
width: 1300px;
}
#kiwi .userbox a {
display: block;
text-decoration: none;
margin-bottom: 2px;
}
#kiwi .userbox a i {
font-size: 1.1em;
margin-right: 5px;
}
/* User mode styles */
#kiwi .memberlists ul li .prefix {
display: none;
line-height: 0.84em;
width: 370px;
height: 370px;
border-radius: 80px;
margin: 0 10px 0 0;
font-size: 360px;
text-align: center;
color: #ffffff;
}
#kiwi .toolbar .app_tools ul li:last-child {
float: none;
}
#kiwi .autocomplete {
position: absolute;
box-sizing: border-box;
box-shadow: 0 1px 15px rgba(64, 54, 63, 0.25);
border: 1px solid #CCC;
left: 12em;
right: 4em;
bottom: 100%;
background: #eee;
overflow-y: auto;
display: none;
}
#kiwi .autocomplete-header {
background: #DADADA none repeat scroll 0 0 padding-box;
border-bottom: 1px solid #CCC;
color: #8A8A8A;
font-size: 12px;
padding: 5px 10px 4px;
overflow: hidden;
}
#kiwi.narrow .autocomplete-header {
display: none;
}
#kiwi .autocomplete-header-label {
font-weight: bold;
}
#kiwi .autocomplete-header-help {
float: right;
}
#kiwi .autocomplete-list {
overflow-y: auto;
}
#kiwi.narrow .autocomplete {
left: 0;
right: 0;
}
#kiwi .autocomplete-item {
border-bottom: 1px solid #CCC;
background: #fff;
padding: 5px 20px;
list-style: none;
overflow: hidden;
}
#kiwi .autocomplete-item.selected { background: #CDDCEA; }
#kiwi .autocomplete-item .word { font-weight: bold; }
#kiwi .autocomplete-item .matches { font-size: 0.9em; margin-left: 2em; }
#kiwi.narrow .autocomplete-item .matches {display: none;}
#kiwi .autocomplete-item .actions { float: right; font-size: 0.9em; margin-right: 2em; }
#kiwi .autocomplete-item .actions a { margin-left: 1em; }
#kiwi .autocomplete-item .description {
float: right;
margin-right: 1em;
font-style: italic;
}
#kiwi .controlbox .input {
background: #fff;
margin: 3px;
height: 1.7em;
}
#kiwi .controlbox .input .nick {
text-align: right;
width: 11.3em;
left: 0px;
position: absolute;
padding: 30px;
overflow: hidden;
background: #20123a;
color: #FFF;
}
#kiwi.narrow .controlbox .input .nick { display:none; }
#kiwi.narrow .controlbox .input .input_wrap { left:7px; }
#kiwi .controlbox .input .nick:after {
content: ":";
margin-left: 3px;
top: 2px;
}
#kiwi .controlbox .input .nick a {
text-decoration: none;
color: black;
}
#kiwi .controlbox .input .input_wrap {
position: absolute;
right: 3px;
left: 12em;
height: 1.7em;
}
#kiwi .controlbox .input .inp {
line-height: 1.7em;
border: medium none;
box-shadow: none;
border-radius: 0;
resize: none;
overflow: hidden;
position: relative;
height: 100%;
width: 100%;
display: block;
outline: none;
}
#kiwi .controlbox .nickchange {
padding: 10px;
left: 0px;
background: #ffffff;
color: #000;
border: 4px solid #000;
}
#kiwi .controlbox .nickchange input {
padding: 0.3em 0.5em;
margin-left: 0.5em;
}
#kiwi .controlbox .nickchange button {
padding: 0.5em;
margin: 0 0.5em 0 1em;
color: #000;
background-color: #fff;
border-color: #000000;
}
#kiwi .toolbar .topic {
padding-bottom: 1px;
background-color: #20123a;
}
#kiwi .toolbar .topic div {
top: 2;
bottom: 2px;
left: 0;
width: 100%;
padding: 0.2em 1em;
text-align: center;
box-shadow: none;
border-radius: 0;
/* background-color:#fff; */
height: 1.5em;
overflow: hidden;
outline: none;
}
#kiwi .toolbar .topic:hover div {
min-height: 1.5em;
white-space: pre-wrap;
word-wrap: break-word;
overflow: visible;
/* background-color:#d9edf7; */
z-index: 10;
height: auto;
bottom: auto;
border-bottom: 1px dotted #3071a9;
}
#kiwi .toolbar .app_tools { width:2100px; line-height:2.0em; text-align: center; color:#ffffff; }
#kiwi.chanlist_treeview .toolbar .app_tools { width:auto; text-align: right; }
#kiwi.narrow .toolbar .app_tools { width:auto; }
#kiwi .toolbar .app_tools ul li:hover {
color: #7BCCE3;
}
#kiwi.narrow .toolbar .app_tools ul li:hover {
color: #ffffff;
}
#kiwi .toolbar .app_tools img {
}
#kiwi .toolbar .app_tools ul li {
font-size:200px;
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
transition: all .3s ease;
margin-left:10px;
}
/* The server select dialog */
#kiwi .server_select {
margin-left: auto;
margin-right: auto;
}
#kiwi .server_select a {
text-decoration: none;
}
#kiwi .server_select .more {
display: none;
width: 270px;
margin: 0 auto;
}
#kiwi .server_select table tr td {
padding: 5px;
}
#kiwi .server_select button {
padding: 0.5em 1em;
font-size: 1.1em;
width: 3500px;
margin: 20px auto;
display: block;
background-color: #20123a;
color: #FFF;
}
#kiwi .server_select button:hover {
background-color: #20123a;
color: #FFF;
}
#kiwi .server_select input {
padding: 3px 7px;
width: 2400px;
}
#kiwi .server_select label {
}
#kiwi .server_select br {
clear: both;
}
#kiwi .server_select .basic input, .server_select .basic button {
font-size: 1em;
padding: 0.5em 1em;
}
#kiwi .server_select .basic input {
width: 2400px;
}
#kiwi .server_select .basic label {
font-size: 1.3em;
margin-top: 4px;
}
#kiwi .server_select .basic tr.have_pass {
font-size: 0.8em;
}
#kiwi .server_select .basic tr.channel td {
padding-top: 1em;
}
#kiwi .server_select .basic {
border-bottom: 1px dashed gray;
margin-bottom: 1em;
}
#kiwi .server_select .basic .show_more {
display: block;
width: 2200px;
margin: 10px 0 0 0;
font-size: 0.8em;
}
#kiwi .server_select.single_server .basic {
border: none;
}
#kiwi .server_select .status {
text-align: center;
width: 2500px;
font-weight: bold;
padding: 1em;
}
#kiwi .server_select .status.ok {
}
#kiwi .server_select .status.error {
border: 1px solid #A33F3F;
background-color: #D28A8A;
padding: 0.5em;
margin-top: 1em;
margin-bottom: 1em;
margin-right: 2em;
}
#kiwi .server_select .show_server {
margin-left: 1em;
font-size: 0.9em;
color: #555555;
}
#kiwi .server_select .kiwi_logo {
margin-top: 30px;
text-align: center;
display: block;
}
#kiwi .server_select .kiwi_logo h1 {
font-size: 50px;
line-height: 48px;
vertical-align: middle;
color: #555555;
}
#kiwi .server_select .kiwi_logo img {
display: inline;
width: 24px;
}
#kiwi.chanlist_treeview .panels {
left: 160px;
}
#kiwi.chanlist_treeview .toolbar, #kiwi.narrow .toolbar {
position: static;
}
#kiwi.chanlist_treeview .toolbar .app_tools, #kiwi.narrow .toolbar .app_tools {
float: none;
text-align: right;
padding: 3px 0 3px 0;
}
#kiwi.chanlist_treeview .toolbar > div {
margin-left: 0px;
}
#kiwi.chanlist_treeview .toolbar > div.topic {
margin-left: 160px;
}
#kiwi.chanlist_treeview .toolbar .tabs, #kiwi.narrow .toolbar .tabs {
position: absolute;
left: 0px;
bottom: 0px;
top: 0px;
margin: 0;
width: 160px;
background: #428bca;
overflow-y: auto;
padding-top: 0px;
}
#kiwi.chanlist_treeview .tabs ul li, #kiwi.narrow .tabs ul li {
display: block;
float: none;
margin: 0 0 3px 1px;
}
#kiwi.chanlist_treeview .tabs ul li .activity {
float: right;
display: inline-block;
min-width: 10px;
padding: 3px 7px;
font-size: 12px;
font-weight: bold;
font-family: Roboto;
line-height: 1;
color: #428bca;
text-align: center;
white-space: nowrap;
vertical-align: baseline;
background-color: #fff;
border-radius: 10px;
position: absolute;
right: 4px;
top: 8px;
}
#kiwi .ui_menu {
border-radius: 6px;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
}
#kiwi .ui_menu .ui_menu_title, #kiwi .ui_menu .ui_menu_foot {
background: #eeeeee;
}
#kiwi .ui_menu .toggle_banlist {
color: #fff;
background-color: #20123a;
border-color: #357ebd;
}
#kiwi.chanlist_treeview .tabs ul li.active {
margin-right: 0;
border-right-width: 0;
border-bottom-right-radius: 0;
border-top-right-radius: 0;
color: #fff;
background-color: #f90;
border-color: #f88c00;
}
#kiwi.narrow .panels, #kiwi.narrow .controlbox, #kiwi.narrow .toolbar .tabs, #kiwi.narrow .toolbar .main .tabs_menu { -moz-transition-duration:0.3s; -o-transition-duration:0.3s; -webkit-transition-duration:0.3s; transition-duration:0.3s; }
#kiwi.narrow.with_sidebar .panels, #kiwi.narrow.with_sidebar .controlbox { -moz-transform:translateX(160px); -ms-transform:translateX(160px); -webkit-transform:translateX(160px); transform:translateX(160px); }
#kiwi.narrow .panels, #kiwi.narrow .controlbox, #kiwi.narrow.with_sidebar .toolbar .tabs { -moz-transform:translateX(0); -ms-transform:translateX(0); -webkit-transform:translateX(0); transform:translateX(0); }
#kiwi.narrow .panels, #kiwi.narrow .controlbox { left: 0; }
#kiwi.narrow .toolbar .tabs, #kiwi.narrow .toolbar_overlay { top: 41px; }
#kiwi.narrow .toolbar .tabs { -moz-transform:translateX(-160px); -ms-transform:translateX(-160px); -webkit-transform:translateX(-160px); transform:translateX(-160px); z-index: 4; }
#kiwi.narrow.with_sidebar .toolbar .tabs { height: 100% }
#kiwi .toolbar_overlay, #kiwi.narrow .toolbar .topic, #kiwi .toolbar .app_tools ul li.tabs_menu { display: none; }
#kiwi.narrow .toolbar_overlay { position: absolute; left:0; height: 100%; width: 100%; z-index: 3; background-color: rgba(0,0,0,0.5); }
#kiwi.narrow.with_sidebar .toolbar_overlay { display: block; }
#kiwi.narrow.with_sidebar .controlbox { border-top: none; }
#kiwi.narrow.with_sidebar .panels { bottom: 0; }
#kiwi.narrow .toolbar .main { text-align: right; }
#kiwi.narrow .toolbar .main .tabs_menu { position: absolute; left: 0; margin-top: 10px; margin-left: 10px !important; }
#kiwi.narrow.with_sidebar .toolbar .main .tabs_menu { margin-left: 0 !important; }
#kiwi.narrow .tabs_activity {display:none; position: absolute; width: 7px; height: 7px; background-color: rgb(124, 221, 251); z-index: 3; top: 0px; right: -3px; border-radius: 3px; box-shadow: 0px 0px 5px 2px rgb(124, 221, 251);}
#kiwi .tabs_activity {display:none;}
#kiwi.narrow .tabs ul li .activity { float:right; }
#kiwi.narrow .tabs ul li.active { padding-left:1em; }
#kiwi.narrow .toolbar .app_tools ul li.tabs_menu { display: inline; }
#kiwi .applet_chanlist {
margin: 0.5em 1em;
}
#kiwi .applet_chanlist table {
border-collapse: collapse;
width: 100%;
}
#kiwi .applet_chanlist thead {
text-align: center;
}
#kiwi .applet_chanlist tbody td {
border: 1px solid #C4C4C4;
padding: 0.3em 1em;
}
#kiwi .applet_chanlist .chanlist_name, #kiwi .applet_chanlist .chanlist_num_users {
border-width: 0 1px 0 0;
}
#kiwi .applet_chanlist .chanlist_topic {
border-width: 0;
}
#kiwi .applet_chanlist tr:nth-child(even) {
background: none repeat scroll 0 0 #DBDBDB;
}
#kiwi .ui_menu .ui_menu_foot .close {
float: right;
font-size: 0.9em;
margin-right: 1em;
color: #999;
}
#kiwi .ui_menu .ui_menu_foot .close:hover {
color: #222;
}
#kiwi .channel_info .channel-banlist table {
margin-top: 10px;
border-spacing: 10px 3px;
}
#kiwi .channel_info .channel-banlist thead {
font-style: italic;
}
#kiwi .channel_info .remove-ban:hover {
color: #900;
}
#kiwi .notification {
/* .show class reveals this element */
max-height: 0;
overflow: hidden;
-webkit-transition: max-height 1s;
-moz-transition: max-height 1s;
transition: max-height 1s;
display: block;
color: #DBDBDB;
text-shadow: 0 -1px black;
background: rgba(65, 65, 65, 0.95);
background-clip: padding-box;
border: 1px solid;
border-color: rgba(17, 17, 17, 0.6) rgba(17, 17, 17, 0.7) rgba(17, 17, 17, 0.9);
border-radius: 5px;
background-image: -webkit-linear-gradient(top, rgba(242, 242, 242, 0.3), rgba(221, 221, 221, 0.01) 50%, rgba(0, 0, 0, 0.12) 50%, rgba(0, 0, 0, 0.3));
background-image: -moz-linear-gradient(top, rgba(242, 242, 242, 0.3), rgba(221, 221, 221, 0.01) 50%, rgba(0, 0, 0, 0.12) 50%, rgba(0, 0, 0, 0.3));
background-image: -o-linear-gradient(top, rgba(242, 242, 242, 0.3), rgba(221, 221, 221, 0.01) 50%, rgba(0, 0, 0, 0.12) 50%, rgba(0, 0, 0, 0.3));
background-image: linear-gradient(to bottom, rgba(242, 242, 242, 0.3), rgba(221, 221, 221, 0.01) 50%, rgba(0, 0, 0, 0.12) 50%, rgba(0, 0, 0, 0.3));
-webkit-box-shadow: inset 0 0 1px rgba(255, 255, 255, 0.5), 0 1px 2px rgba(0, 0, 0, 0.3);
box-shadow: inset 0 0 1px rgba(255, 255, 255, 0.5), 0 1px 2px rgba(0, 0, 0, 0.3);
}
#kiwi .notification.show { max-height: 500px; }
#kiwi .notification .close {
font-size:16px;
border:1px solid #1b1b1b;
border-left, border-bottom: none;
border-radius: 0 8px 0 0;
line-height: 20px;
text-align: center;
color: #747474;
background-image: -webkit-linear-gradient(top, #383838, #111111);
background-image: -moz-linear-gradient(top, #383838, #111111);
background-image: -o-linear-gradient(top, #383838, #111111);
background-image: linear-gradient(to bottom, #383838, #111111);
-webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.15);
box-shadow: inset 0 1px rgba(255, 255, 255, 0.15);
}
#kiwi .notification .close:hover { color: #DBDBDB; }
#kiwi .settings_container .settings-category > h5 {
border-bottom: 1px solid #428bca;
padding-bottom: 20px;
margin-bottom: 20px;
margin-top: 0;
padding-top: 15px;
}
#kiwi .settings_container .settings-category-list {
margin-top: 3.4em;
}
#kiwi .settings_container .settings-category-list a {
line-height: 2.5em;
border-left: solid 4px #FFF;
color: #999;
}
#kiwi .settings_container .settings-category-list a.active {
border-left: solid 40px #428bca;
color: #36C;
}
/* Rich userlist */
#kiwi .memberlists ul li.rich_userlist.M a.nick {
color: #0066FF;
}
#kiwi .memberlists ul li.rich_userlist.F a.nick {
color: #FF00FF;
}
#kiwi .memberlists ul li.rich_userlist.U a.nick {
color: #000000;
}
#kiwi .memberlists ul li.rich_userlist.M.ircop a.nick,
#kiwi .memberlists ul li.rich_userlist.F.ircop a.nick,
#kiwi .memberlists ul li.rich_userlist.U.ircop a.nick {
color: #FF0000;
}
#kiwi .memberlists ul li.rich_userlist.M.away a.nick,
#kiwi .memberlists ul li.rich_userlist.F.away a.nick,
#kiwi .memberlists ul li.rich_userlist.U.away a.nick {
color: #999;
}
/* Most important modes towards the bottom - they override the top ones! */
#kiwi .memberlists ul li.mode.v .prefix {
display: inline-block;
background: #96c;
}
#kiwi .memberlists ul li.mode.h .prefix {
display: inline-block;
background: #090;
}
#kiwi .memberlists ul li.mode.o .prefix {
display: inline-block;
background: #00ca19;
}
#kiwi .memberlists ul li.mode.a .prefix {
display: inline-block;
background: #f30;
}
#kiwi .memberlists ul li.mode.q .prefix {
display: inline-block;
background: #20123a;
}
#kiwi .memberlists ul li.mode.v a.nick {
color: #000;
}
#kiwi .memberlists ul li.mode.h a.nick {
color: #000;
}
#kiwi .memberlists ul li.mode.o a.nick {
color: #000;
}
#kiwi .memberlists ul li.mode.a a.nick {
color: #000;
}
#kiwi .memberlists ul li.mode.q a.nick {
color: #000;
}
#kiwi .memberlists ul li.rich_userlist.M:hover {
border-left: 5px solid #0066FF;
}
#kiwi .memberlists ul li.rich_userlist.F:hover {
border-left: 5px solid #FF00FF;
}
#kiwi .memberlists ul li.rich_userlist.U:hover {
border-left: 5px solid #ccc;
}
#kiwi .memberlists ul li.mode.v:hover {
border-left: 50px solid #96c;
}
#kiwi .memberlists ul li.mode.h:hover {
border-left: 50px solid #090;
}
#kiwi .memberlists ul li.mode.o:hover {
border-left: 50px solid #00ca19;
}
#kiwi .memberlists ul li.mode.a:hover {
border-left: 50px solid #f30;
}
#kiwi .memberlists ul li.mode.q:hover {
border-left: 50px solid #20123a;
}
#kiwi .memberlists ul li.rich_userlist div.tooltip {
background-clip: padding-box;
background-color: #fff;
border: 1px solid rgba(0, 0, 0, 0.2);
border-radius: 6px;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
display: none;
left: 0;
max-width: 276px;
padding: 1px;
position: fixed;
text-align: left;
top: 0;
white-space: normal;
width: 200px;
}
#kiwi .memberlists ul li.rich_userlist div.tooltip div.tooltipNick {
background-color: #eeeeee;
border-bottom: 1px solid #ebebeb;
border-radius: 5px 5px 0 0;
font-size: 14px;
font-weight: 400;
line-height: 18px;
margin: 0;
padding: 8px 14px;
}
#kiwi .memberlists ul li.rich_userlist div.tooltip div.tooltipInfo {
padding: 9px 14px;
}
/*
#kiwi .memberlists ul li.rich_userlist.M div.tooltip {background-color: #0066FF;}
#kiwi .memberlists ul li.rich_userlist.F div.tooltip {background-color: #FF00FF;}
#kiwi .memberlists ul li.rich_userlist.U div.tooltip {background-color: #000000;}
*/
.popover {
text-align: left;
white-space: normal;
}
.popover.right > .arrow:after {
border-left-width: 0;
border-right-color: #fff;
bottom: -10px;
content: " ";
left: 1px;
}
.popover > .arrow:after {
border-width: 10px;
content: "";
}
.popover > .arrow, .popover > .arrow:after {
border-color: transparent;
border-style: solid;
display: block;
height: 0;
position: absolute;
width: 0;
}
*:before, *:after {
box-sizing: border-box;
}
.popover.right > .arrow {
border-left-width: 0;
border-right-color: rgba(0, 0, 0, 0.25);
left: -11px;
margin-top: -11px;
top: 50%;
}
.popover > .arrow {
border-width: 11px;
}
.popover > .arrow, .popover > .arrow:after {
border-color: transparent;
border-style: solid;
display: block;
height: 0;
position: absolute;
width: 0;
}
/* End rich userlist */
#kiwi .toolbar .panellist li .part:before {
font-family: FontAwesome;
content: "\f00d";
}
#kiwi.narrow .toolbar .panellist li .part:before {
font-size: 26px;
}
#kiwi .toolbar .panellist li .part:hover {
color: #000;
}
[contenteditable="true"],[contenteditable="false"] {
background-color: #fff;
}
[contenteditable="true"]:focus {
min-height: 1.5em;
white-space: pre-wrap;
word-wrap: break-word;
overflow: visible;
background-color: #d9edf7;
z-index: 1;
height: auto;
bottom: auto;
border-bottom: 1px dotted #3071a9;
}
[contenteditable="true"]:hover {
background-color: #d9edf7;
}
@media (min-width: 768px) and (max-width: 1024px) {
#kiwi .app_tools .main li .txt {
display: none;
}
}
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
/* Styles */
#kiwi .app_tools .main li .txt {
display: none;
}
#kiwi .toolbar .panellist li .activity, #kiwi.chanlist_treeview .tabs ul li .activity {
margin: 0;
}
#kiwi .toolbar .panellist li {
line-height: 0.7;
}
}
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
/* Styles */
#kiwi .app_tools .main li .txt {
display: none;
}
#kiwi .toolbar .panellist li .activity, #kiwi.chanlist_treeview .tabs ul li .activity {
margin: 0;
}
#kiwi .toolbar .panellist li {
line-height: 0.7;
}
}
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
#kiwi .app_tools .main li {
margin-top: 3px;
}
#kiwi .right_bar_pv {
display: none;
width: 0px;
}
#kiwi.chanlist_treeview .toolbar .panellist li .activity {
display: none;
}
#kiwi .app_tools .main li .txt {
display: none;
}
#kiwi .toolbar .panellist li .activity, #kiwi.chanlist_treeview .tabs ul li .activity {
margin: 0;
}
#kiwi .toolbar .panellist li {
line-height: 0.7;
}
}
/* Smartphones (landscape) ----------- */
@media only screen
and (min-width : 321px) and (orientation : portrait) {
#kiwi.chanlist_treeview .toolbar .panellist li .activity {
display: none;
}
#kiwi .app_tools .main li {
margin-top: 3px;
}
#kiwi .right_bar_pv {
display: none;
width: 0px;
}
#kiwi .app_tools .main li .txt {
display: none;
}
#kiwi .toolbar .panellist li .activity, #kiwi.chanlist_treeview .tabs ul li .activity {
margin: 0;
}
#kiwi .toolbar .panellist li {
line-height: 0.7;
}
}
/* Smartphones (portrait) ----------- */
@media only screen
and (max-width : 320px) and (orientation : portrait) {
#kiwi.chanlist_treeview .toolbar .panellist li .activity {
display: none;
}
#kiwi .app_tools .main li {
margin-top: 3px;
}
#kiwi .right_bar_pv {
display: none;
width: 0px;
}
#kiwi .app_tools .main li .txt {
display: none;
}
#kiwi .toolbar .panellist li .activity, #kiwi.chanlist_treeview .tabs ul li .activity {
margin: 0;
}
#kiwi .toolbar .panellist li {
line-height: 0.7;
}
}
@font-face {
font-family: "FontAwesome";
src: url("hinted-FontAwesome.eot");
font-weight: normal;
font-style: normal;
}
</style>
<style type="text/css">
#kiwi .powered_by a { display: block; width: 180px; margin: 20px auto; }
#kiwi .powered_by img { width:30px; height:30px; display:block; float:left; }
#kiwi .powered_by span { line-height:30px; margin-left:10px; }
</style>
</head>
<body>
<script type="text/html" id="tmpl_application">
<div id="kiwi" class="theme_relaxed">
<div class="toolbar">
<div class="app_tools">
<ul class="main">
<li class="settings"><i class="fa fa-cogs" title="Settings"></i></li>
<li class="startup"><i class="fa fa-home" title="Home"></i></li>
<li><a href="https://kiwiirc.com/" target="_blank"><img src="client/assets/img/ico.png" alt="KiwiIRC" title="KiwiIRC" /></a></li>
</ul>
</div>
<div class="tabs"></div>
<div class="topic">
<div contenteditable="true"></div>
</div>
<div class="status_message"></div>
</div>
<div class="panels">
<div class="panel_container container1"></div>
</div>
<div class="right_bar disabled">
<div class="right-bar-toggle"><i class=""></i></div>
<div class="right-bar-content">
<div class="channel_tools">
<i class="fa fa-info-circle channel_info" title="Channel Info"></i>
<i class="fa fa-sign-out channel_part" title="Leave Channel"></i>
<i class="fa fa-angle-double-right right-bar-toggle-inner" title="Hide"></i>
</div>
<div class="memberlists"></div>
</div>
</div>
<div class="controlbox">
<div class="autocomplete">
<div class="autocomplete-header">
<span class="autocomplete-header-label">People or channels</span>
<span class="autocomplete-header-help">
<strong>tab</strong> or <strong>↑</strong> <strong>↓</strong> to navigate <strong class="left_margin">↵</strong> to select <strong class="left_margin">esc</strong> to dismiss</span>
</div>
</div>
<div class="input">
<span class="nick"> </span>
<div class="input_wrap"><textarea class="inp" wrap="off"></textarea></div>
<div class="input_tools"></div>
</div>
</div>
</div>
</script>
<script type="text/html" id="tmpl_channel_info">
<div class="channel_info">
<b class="channel_url"><a href=""></a></b>
<form>
<div class="control-group channel_info_modes">
<label>
<input type="checkbox" name="channel_mute" class="channel-mode" data-mode="m" />
Moderated chat
</label>
<label>
<input type="checkbox" name="channel_invite" class="channel-mode" data-mode="i" />
Invite only
</label>
<label>
<input type="checkbox" name="channel_topic" class="channel-mode" data-mode="t" />
Only operators can change the topic
</label>
<label>
<input type="checkbox" name="channel_external_messages" class="channel-mode" data-mode="n" />
Block messages from outside this channel
</label>
</div>
<div class="control-group">
<label>
Password
<input type="text" name="channel_key" class="channel-mode" data-mode="k" />
</label>
</div>
<div class="control-group channel-banlist">
<button class="toggle_banlist">Toggle banlist</button> <span class="banlist-status"></span>
<table>
<thead>
<tr>
<td>Ban Mask</td>
<td>Added By</td>
<td>Date Added</td>
<td></td>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</form>
</div>
</script>
<script type="text/html" id="tmpl_userbox">
<div class="userbox">
<a class="close_menu if_op op"><i class="fa fa-star"></i><%= op %></a>
<a class="close_menu if_op deop"><i class="fa fa-star-o"></i><%= de_op %></a>
<a class="close_menu if_op voice"><i class="fa fa-volume-up"></i><%= voice %></a>
<a class="close_menu if_op devoice"><i class="fa fa-volume-off"></i><%= de_voice %></a>
<a class="close_menu if_op kick"><i class="fa fa-times"></i><%= kick %></a>
<a class="close_menu if_op ban"><i class="fa fa-ban"></i><%= ban %></a>
<a class="close_menu query"><i class="fa fa-comment"></i><%= message %></a>
<a class="close_menu info"><i class="fa fa-info-circle"></i><%= info %></a>
<a class="close_menu ignore"><label><i><input type="checkbox" /></i><%= ignore %></label></a>
</div>
</script>
<script type="text/html" id="tmpl_nickchange">
<form class="nickchange">
<label for="nickchange"><%= new_nick %>:</label> <input type="text" mozactionhint="done" autocomplete="off" spellcheck="false"/> <button><%= change %></button> <a class="cancel"><%= cancel %></a>
</form>
</script>
<script type="text/html" id="tmpl_new_connection_info">
<div style="margin:1em 20px;">
<div id="kiwi_featured_networks"></div>
</div>
</script>
<script type="text/html" id="tmpl_server_select">
<div class="server_select">
<div class="side_panel" style="position:absolute;top:0px;left:320px;">
<div class="content" style="position:relative;width:5000px;">
</div>
</div>
<div class="server_details" style="position:relative;width:1200px;">
<div class="status"><%= think_nick %></div>
<form>
<div class="basic">
<table>
<tr class="nick">
<td><label for="server_select_nick"><%= nickname %></label></td>
<td><input type="text" class="nick" id="server_select_nick"></td>
</tr>
<tr class="have_pass">
<td colspan="2">
<label for="server_select_show_pass"><%= have_password %></label> <input type="checkbox" id="server_select_show_pass" style="width:auto;" />
</td>
</tr>
<tr class="pass">
<td><label for="server_select_password"><%= password %></label></td>
<td><input type="password" class="password" id="server_select_password"></td>
</tr>
<tr class="channel">
<td><label for="server_select_channel"><%= channel %></label></td>
<td>
<div style="position:relative;">
<input type="text" class="channel" id="server_select_channel">
<i class="fa fa-key" title="<%= channel_key %>"></i>
</div>
</td>
</tr>
<tr class="have_key">
<td colspan="2">
<label for="server_select_show_channel_key"><%= require_key %></label> <input type="checkbox" id="server_select_show_channel_key" style="width:auto;" />
</td>
</tr>
<tr class="key">
<td><label for="server_select_channel_key"><%= key %></label></td>
<td><input type="password" class="channel_key" id="server_select_channel_key"></td>
</tr>
<tr class="start">
<td colspan="2">
<button type="submit"><%= start %></button>
<div style="display:none; clear:both; padding-top:20px; text-align:center; font-style:italic; font-size:0.9em;">
Unfortunately Kiwi is currently under DDoS attacks. We are looking into the attacks and apologise for any downtime that you may notice.
</div>
<div style="display:none; clear:both; padding-top:20px; text-align:center; font-style:italic; font-size:0.9em;">
Kiwi is currently under heavy load. We are adding extra capacity to support everybody as we speak. Apologies if you have trouble connecting!
</div>
</td>
</tr>
</table>
<a href="" onclick="return false;" class="show_more"><%= server_network %> <i class="fa fa-caret-down"></i></a>
</div>
<div class="more">
<table>
<tr class="server">
<td><label for="server_select_server"><%= server %></label></td>
<td><input type="text" class="server" id="server_select_server"></td>
<tr>
<tr class="port">
<td><label for="server_select_port"><%= port %></label></td>
<td><input type="text" class="port" id="server_select_port"></td>
</tr>
<tr class="ssl">
<td><label for="server_select_ssl">SSL</label></td>
<td><input type="checkbox" class="ssl" id="server_select_ssl"></td>
</tr>
</table>
</div>
</form>
<a class="kiwi_logo" href="https://kiwiirc.com/" target="_blank">
<h1><span><%= powered_by %></span> <img src="img/ico.png" alt="KiwiIRC Logo" title="Kiwi IRC" /></h1>
</a>
</div>
</div>
</script>
<script type="text/html" id="tmpl_theme_thumbnail">
<a class="thumbnail" data-setting="theme" data-value="<%= name.toLowerCase() %>" href="#">
<div class="thumbnail_wrapper"><div class="theme_color" style="background-color: <%= thumbnail_colour %>;"></div></div>
<div class="caption"><u><%= name %></u></div>
</a>
</script>
<script type="text/html" id="tmpl_applet_settings">
<div class="settings_container">
<div class="settings-category-list">
<a class="show-category show-category-appearance" data-category="appearance"><%= appearance %></a>
<a class="show-category show-category-messages" data-category="messages"><%= messages %></a>
</div>
<form class="settings-category settings-category-messages">
<h5><%= messages %></h5>
<section>
<h6><%= chat_messages %></h6>
<div class="control-group">
<div class="checkbox">
<label>
<input data-setting="show_timestamps" type="checkbox" disabled="disabled">
<%= timestamps %>
</label>
</div>
<div class="checkbox">
<label>
<input data-setting="use_24_hour_timestamps" type="checkbox" disabled="disabled">
<%= timestamp_24 %>
</label>
</div>
<div class="checkbox">
<label>
<input data-setting="show_emoticons" type="checkbox" disabled="disabled">
<%= emoticons %>
</label>
</div>
<div class="checkbox">
<label>
<input data-setting="ignore_new_queries" type="checkbox" disabled="disabled">
<%= queries %>
</label>
</div>
<div class="checkbox">
<label>
<input data-setting="show_autocomplete_slideout" type="checkbox" disabled="disabled">
<%= autocomplete_slideout %>
</label>
</div>
<div>
<label>
<input data-setting="scrollback" class="input-small" type="text" size="4" pattern="\d*" disabled="disabled">
<span><%= scroll_history %></span>
</label>
</div>
</div>
</section>
<section>
<h6><%= alerts_notifications %></h6>
<div class="control-group">
<div class="checkbox">
<label>
<input data-setting="show_joins_parts" type="checkbox" disabled="disabled">
<%= join_part %>
</label>
</div>
<div class="checkbox">
<label>
<input data-setting="count_all_activity" type="checkbox" disabled="disabled">
<%= count_all_activity %>
</label>
</div>
<div class="checkbox">
<label>
<input data-setting="mute_sounds" type="checkbox" disabled="disabled">
<%= mute %>
</label>
</div>
<div>
<label>
<div><%= custom_highlights %></div>
<input data-setting="custom_highlights" class="input-small" type="text" size="20" disabled="disabled">
</label>
</div>
</div>
</section>
</form>
<form class="settings-category settings-category-appearance">
<h5><%= appearance %></h5>
<section>
<h6><%= theme %></h6>
<div class="control-group">
<div class="thumbnails">
<% _.forEach(theme_thumbnails, function(thumbnail) { %>
<%= thumbnail %>
<% }); %>
</div>
</div>
</section>
<section>
<h6><%= channels %></h6>
<div class="control-group">
<div class="radio">
<label>
<input type="radio" name="channel_list_style" data-setting="channel_list_style" value="tabs" disabled="disabled">
<%= tabs %>
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="channel_list_style" data-setting="channel_list_style" value="list" disabled="disabled">
<%= list %><small class="text-muted">(<%= large_amounts_of_chans %>)</small>
</label>
</div>
<label>
<input data-setting="scrollback" class="input-small" type="text" size="4" pattern="\d*" disabled="disabled">
<span><%= scroll_history %></span>
</label>
</div>
</section>
<section class="language">
<h6><%= language %></h6>
<div class="control-group">
<select data-setting="locale" disabled="disabled">
<option value=""></li>
<% _.forEach(languages, function(lang) { %>
<option value="<%= lang.tag %>"><%= lang.language %></li>
<% }); %>
</select>
<br>
<small><%= locale_restart_needed %></small>
</div>
</section>
<section class="protocol_handler">
<h6><%= default_client %></h6>
<div class="control-group">
<button class="register_protocol"><%= make_default %></button>
<br>
<small><%= default_note %></small>
</div>
</section>
<section class="notification_enabler">
<h6><%= html5_notifications %></h6>
<div class="control-group">
<button class="enable_notifications"><%= enable_notifications %></button>
</div>
</section>
</form>
</div>
</script>
<script type="text/html" id="tmpl_channel_list">
<div class="applet_chanlist">
<table>
<thead style="font-weight: bold;">
<tr>
<td><a class="channel_name_title"><%= channel_name %></a></td>
<td><a class="users_title"><%= users %></a></td>
<td style="padding-left: 2em;"><%= topic %></td>
</tr>
</thead>
<tbody style="vertical-align: top;">
</tbody>
</table>
</div>
</script>
<script type="text/html" id="tmpl_script_editor">
<div style="height:100%;">
<style>
#kiwi .script_editor .se_toolbar { padding: 10px 20px; }
#kiwi .script_editor .se_toolbar span.status { margin-left:2em; font-style:italic; }
#kiwi .script_editor .se_toolbar button { height:30px; padding:0 1em; }
#kiwi .script_editor .se_toolbar button i { font-size:1.2em; margin-left:3px; }
</style>
<div class="script_editor" style="height:100%; position:relative;">
<div class="se_toolbar"><button class="btn_save"><%= save %><i class="fa fa-floppy-o"></i></button><span class="status"></span></div>
<div class="editor" style="position:absolute;top:50px;bottom:0px;left:0px;right:0px;"></div>
</div>
</div>
</script>
<script type="text/html" id="tmpl_notifications">
<div class="notification-inner">
<i class="fa fa-times close"></i>
<h6></h6>
<div class="content"></div>
</div>
</script>
<script src="client/assets/libs/jquery-1.11.1.min.js"></script>
<script>
/* Script loader (https://github.com/ded/script.js) */
/*!
* $script.js Async loader & dependency manager
* https://github.com/ded/script.js
* (c) Dustin Diaz, Jacob Thornton 2011
* License: MIT
*/
(function(a,b,c){typeof c["module"]!="undefined"&&c.module.exports?c.module.exports=b():typeof c["define"]!="undefined"&&c["define"]=="function"&&c.define.amd?define(a,b):c[a]=b()})("$script",function(){function p(a,b){for(var c=0,d=a.length;c<d;++c)if(!b(a[c]))return j;return 1}function q(a,b){p(a,function(a){return!b(a)})}function r(a,b,i){function o(a){return a.call?a():d[a]}function t(){if(!--n){d[m]=1,l&&l();for(var a in f)p(a.split("|"),o)&&!q(f[a],o)&&(f[a]=[])}}a=a[k]?a:[a];var j=b&&b.call,l=j?b:i,m=j?a.join(""):b,n=a.length;return setTimeout(function(){q(a,function(a){if(h[a])return m&&(e[m]=1),h[a]==2&&t();h[a]=1,m&&(e[m]=1),s(!c.test(a)&&g?g+a+".js":a,t)})},0),r}function s(c,d){var e=a.createElement("script"),f=j;e.onload=e.onerror=e[o]=function(){if(e[m]&&!/^c|loade/.test(e[m])||f)return;e.onload=e[o]=null,f=1,h[c]=2,d()},e.async=1,e.src=c,b.insertBefore(e,b.firstChild)}var a=document,b=a.getElementsByTagName("head")[0],c=/^https?:\/\//,d={},e={},f={},g,h={},i="string",j=!1,k="push",l="DOMContentLoaded",m="readyState",n="addEventListener",o="onreadystatechange";return!a[m]&&a[n]&&(a[n](l,function t(){a.removeEventListener(l,t,j),a[m]="complete"},j),a[m]="loading"),r.get=s,r.order=function(a,b,c){(function d(e){e=a.shift(),a.length?r(e,d):r(e,b,c)})()},r.path=function(a){g=a},r.ready=function(a,b,c){a=a[k]?a:[a];var e=[];return!q(a,function(a){d[a]||e[k](a)})&&p(a,function(a){return d[a]})?b():!function(a){f[a]=f[a]||[],f[a][k](b),c&&c(e)}(a.join("|")),r},r},this)
// Avoid `console` errors in browsers that lack a console. (https://github.com/h5bp/html5-boilerplate)
function normalizeConsole() {
var method;
var noop = function () {};
var methods = [
'assert', 'clear', 'count', 'debug', 'dir', 'dirxml', 'error',
'exception', 'group', 'groupCollapsed', 'groupEnd', 'info', 'log',
'markTimeline', 'profile', 'profileEnd', 'table', 'time', 'timeEnd',
'timeStamp', 'trace', 'warn'
];
var length = methods.length;
var console = (window.console = window.console || {});
while (length--) {
method = methods[length];
// Only stub undefined methods.
if (!console[method]) {
console[method] = noop;
}
}
};
normalizeConsole();
function getQueryVariable(variable) {
var query = window.location.search.substring(1);
var vars = query.split('&');
for (var i = 0; i < vars.length; i++) {
var pair = vars[i].replace(/\+/g, '%20').split('=');
if (decodeURIComponent(pair[0]) == variable) {
return decodeURIComponent(pair[1]);
}
}
}
(function afterPromiseAvailable() {
var base_path = '/client', // Entry path for the kiwi application
scripts = [],
opts = {
container: $('body'),
base_path: base_path,
settings_path: 'client/assets/settings.json',
locale: getQueryVariable('locale')
},
script_promise, script_promise_resolve,
onload_promise,
settings_promise;
normalizeConsole();
// If the browser doesn't natively support promises load up the polyfill and try again.
if (!window.Promise) {
$script(base_path + "/assets/libs/promise.min.js", afterPromiseAvailable);
return;
}
function loadScripts(scripts) {
return new Promise(function (resolve, reject) {
var to_load, idx,
base = base_path + '/';
if (typeof scripts === 'string') {
to_load = base + scripts;
} else {
to_load = [];
for (idx in scripts) {
to_load.push(base + scripts[idx]);
}
}
$script(to_load, resolve, reject);
});
}
onload_promise = new Promise(function (resolve) {
// Document may already be loaded if we had to load the Promise shim seperately
if (document.readyState === 'complete') {
resolve();
return;
}
window.onload = resolve;
});
// Get a resolve function for the script loading promises
script_promise = new Promise(function (resolve) {
script_promise_resolve = resolve;
});
// Chain each script loading promise
script_promise = script_promise.then(function () {
var idx;
for (idx = 0; idx < scripts.length; idx++) {
(function (idx) {
script_promise = script_promise.then(function () {
return loadScripts(scripts[idx]);
});
})(idx);
}
});
// Debugging will get a list of debugging scripts from settings.json (below)
if (!getQueryVariable('debug')) {
scripts.push(['assets/libs/lodash.min.js']);
scripts.push([
'assets/libs/backbone.min.js',
'assets/libs/jed.js'
]);
scripts.push([
'assets/kiwi.js',
'assets/libs/engine.io.bundle.min.js'
]);
script_promise_resolve();
}
settings_promise = new Promise(function (resolve) {
$.getJSON(opts.settings_path, function (data) {
opts.server_settings = data.server_settings;
opts.client_plugins = data.client_plugins;
opts.translations = data.translations;
opts.locale = data.locale;
opts.themes = data.themes;
if (typeof data.kiwi_server !== 'undefined') {
opts.kiwi_server = data.kiwi_server;
}
resolve();
// If debugging, grab the debug scripts and load them
if (getQueryVariable('debug')) {
scripts = scripts.concat(data.scripts);
script_promise_resolve();
}
// Load themes
if (opts.themes) {
$.each(opts.themes, function (theme_idx, theme) {
var disabled = (opts.server_settings.client.settings.theme.toLowerCase() !== theme.name.toLowerCase());
var link = $.parseHTML('<link rel="stylesheet" type="text/css" data-theme href="'+ opts.base_path + '/assets/themes/' + theme.name.toLowerCase() + '/style.css" title="' + theme.name.toLowerCase() + '" />');
$(link).appendTo($('head'));
if (disabled) {
link.disabled = disabled;
}
});
}
});
});
Promise.all([onload_promise, settings_promise])
.then(function(){return script_promise})
.then(function startApp() {
// Kiwi IRC version this is built from
kiwi.build_version = '0.9.3';
// Start the app after loading plugins
kiwi.init(opts, function() {
if (opts.client_plugins && opts.client_plugins.length > 0) {
// Wait until all plugins are loaded before starting the app
kiwi.plugins.once('loaded', function() {
kiwi.start();
});
_.each(opts.client_plugins, function (plugin_url) {
kiwi.plugins.load(plugin_url);
});
} else {
// No plugins were needed so start the app
kiwi.start();
}
});
});
})();
</script>
<!-- Piwik -->
<noscript><p><img src="https://owa.kiwiirc.com/piwik.php?idsite=1" style="border:0;" alt="" /></p></noscript>
<!-- End Piwik Code -->
<!--<script src="https://cdn.ravenjs.com/1.1.22/jquery,native/raven.min.js"></script>-->
<!--<script>Raven.config('https://7627bfe4b1a4418d82846de3e10234db@app.getsentry.com/54424').install()</script>-->
</body>
</html>
Post unito automaticamente:
Ibernato, il mio amico ha già la pagina della chat, quello che sta cercando è di avere una copia della pagina allo stato attuale, quando clicchi su avvia si carica l'altra schermata e gli piacerebbe avere una copia con quella schermata caricata che funziona in modo dinamico compreso l'invio dei messaggi che vede solo lui offline
Ultima modifica:
Ma per copia che intendi? Mica puoi copiare una pagina e incollarla li.
Perchè non fai scrivere al tuo amico che magari si spiega meglio.
Comunque, per avere una "copia della pagina", in PHP (per esempio), c'è la funziona include per includere lo scheletro di una pagina. Nello scheletro della pagina ci sarà il codice per prelevare tutte le informazioni. Questa funzione è utile per non fare il copia e incolla del codice ogni volta.
Ora in JS non credo esiste questa funzione anche perchè sarebbe inutile.
Se capissi bene, con un esempio, magari potremmo aiutarti...
Ciao sono l'amico di Mistery. Mentre stavo utilizzando la pagina di Kiwi IRC la connessione ha smesso di funzionare e la pagina è rimasta aperta, continuava a funzionare dinamicamente compreso l'invio messaggi. Quello che sto cercando di fare è avere una copia di quella pagina allo stato attuale (cioè quando si clicca sul pulsante avvia per connettersi ad un server IRC e viene caricata un'altra schermata, una copia di quella pagina con l'altra schermata mi piacerebbe avere). Spero che si può fare perchè la pagina è composta da html, css e javascript e come dicevo prima mi è capitato che la connessione internet ha smesso di funzionare e la pagina è rimasta aperta con l'altra schermata che funzionava dinamicamente compreso l'invio messaggio . Penso che esiste un modo per modificarla e salvarla su file per farla funzionare in quel modo. Qualcuno mi aveva detto che si può modificare quella pagina per farla funzionare dinamicamente allo stato attuale ma non saprei come.
Ultima modifica:
Usando F12 del browser puoi esplorare da cosa è composta la pagina andando nel tab dei sorgenti.
A quel punto nella tua cache trovi i singoli file o copi il sorgente direttamente da F12.
Ricostruire il funzionamento comunque non è semplice, ci vuole pazienza e tempo.
Ciao Mursey ho provato anche con gli strumenti di sviluppo del browser F12 ma non so come modificarla per farla funzionare in modo dinamico allo stato attuale compreso l'invio messaggi che vedo solo io offline. Per ricostruire il funzionamento intendi farla funzionare in modo dinamico allo stato attuale con tutte le sue funzioni? Grazie per la cordialità.
In modo dinamico server javascript e fin qui penso ci siamo.
Il problema è che non ti spieghi bene (almeno per me).
Vediamo se ho capito.
Nella prima pagina (pagina A) hai il box messaggi e altra roba.
Nella pagina B (seconda pagina) hai altra roba.
Nella pagina B cosa vuoi integrare di A? Se vuoi integrare tutto e non usi il PHP allora devi fare un copia e incolla perchè in JS (non ne sono sicuro) non esiste una funzione per includere un documento.
Se devi integrare solo il box dei messaggi allora dipende da che cosa stai usando (CMS, framework ecc)
Ibernato ti spiego bene. La prima pagina (pagina A) è la pagina per accedere al server IRC. Una volta che clicco su avvia si carica la seconda pagina (pagina B) e quello che sto cercando di fare è avere una copia della pagina B su file con la textarea, la lista utenti e i canali (non voglio integrare la pagina A) che funziona in modo dinamico compreso l'invio messaggi che vedo solo io offline. Visualizzo errori script ed alcune cose che non sono definite allo stato attuale nella console del browser. Penso che è come dice Mursey che bisogna ricostruire il funzionamento che richiede tempo, modificare e definire negli script le cose non definite allo stato attuale per farla funzionare in modo dinamico. Spero di essere stato chiaro.
Se la pagina fa un uso semplice del backend con richeste chiare dovrebbe essere fattibile ma se è molto legata, come temo, al server la cosa non è fattibile.
Il funzionamento offline si ottiene abbastanza facilmente per tutta quella parte puramente client.
Hai un Database dove ti salvi gli utenti, la lista canali, ecc?
Se si, allora puoi semplicemente fare una query che ti preleva queste info e ricostruisci la pagina B in modo dinamico :)
Ciao Ibernato ma intendi un database MySql? Non saprei come crearlo. Mursey il beckend al server di quella pagina dinamica è quando clicchi sul pulsante avvia e ti carica l'altra schermata (pagina B). Se fosse molto legata al beckend quando la connessione internet smette di funzionare anche la pagina che rimane aperta dovrebbe smettere di funzionare e invece continuava a funzionare in modo dinamico (se scrivo un messaggio lo vedo solo io, se clicco sui menu e sulle cose si aprono e chiudono), penso che questa è la parte client. Il problema che come dicevo prima visualizzo errori e alcune cose che non sono definite. Ho visto altre pagine dinamiche di client IRC che se smetteva di funzionare la connessione internet, smetteva di funzionare anche tutta la pagina (in quel caso è molto legata al beckend). Penso che si può ricostuire per avere una copia di quella pagina web dinamica allo stato attuale su file.
- Stato
