png results from the CPAN

App-Ikachan

    $res->content_length(length $msg);
    $res->body($msg);
    $res->finalize;
}

sub join_channel {
    my ($channel, $key) = @_;
    $irc->join_channel($channel, $key);
    $join_channels->{$channel} = {
        join_at => time(),
    };
}

my $code = sub {
    my $req = Plack::Request->new(shift);
    my $method = $req->method;
    my $path   = $req->path;

    if ($method eq 'POST' && ! $is_connect) {
        my $html = q{<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>ikachan</title>
    <head>
    <body>
        can not connect to irc server
    </body>
</html>};
        my $res = Plack::Response->new(503);
        $res->content_type('text/html; charset=utf-8');
        $res->content_length(length $html);
        $res->body($html);
        return $res->finalize;
    }

    if ($method eq 'GET') {
        if ($path eq '/channel_list') {
            my $list = [ keys %{ $join_channels } ];
            return rendar(200, join("\n", @$list));
        } elsif ($path eq '/') {
            my $base = $req->base;
            my $logo = get_logo();
            my $css = get_css();
            my $html =<<HTML;
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>ikachan</title>
        <style>
            ${css}

        </style>
    <head>
    <body>
        <div class="container">
        <div class="row"><div class="span12">
        <h1>
            ikachan
            <img src="data:image/png;base64,${logo}" />
        </h1>

        <h2>join channel list</h2>
        <iframe src="/channel_list"></iframe>

        <h2>API usage</u2>

        <h3>channel join</h3>
        <section>
            <table class="table table-bordered">
                <tr><td>method</td><td>POST</td></tr>
                <tr><td>url</td><td>${base}join</td></tr>
                <tr><td>form params</td><td>channel=#channel&channel_keyword=keyword</td></tr>
            </table>
            <h4>testing form</h4>
            <form action="/join" method="post">
                join channel: <input name="channel" /><br />
                channel keyword(option): <input name="channel_keyword" /><input type="submit" value="join" class="btn" />
            </form>
        <section>

        <section>
            <h3>channel leave</h3>
            <table class="table table-bordered">
                <tr><td>method</td><td>POST</td></tr>
                <tr><td>url</td><td>${base}leave</td></tr>
                <tr><td>form params</td><td>channel=#channel</td></tr>
            </table>
            <form action="/leave" method="post">
                leave channel: <input name="channel" /><input type="submit" value="leave" class="btn" />
            </form>
        <section>

        <section>
            <h3>sent notice message to channel</h3>
            <table class="table table-bordered">
                <tr><td>method</td><td>POST</td></tr>
                <tr><td>url</td><td>${base}notice</td></tr>
                <tr><td>form params</td><td>channel=#channel&message=your_message</td></tr>
            </table>
            <form action="/notice" method="post">
                channel: <input name="channel" /><br />
                message: <input name="message" /><input type="submit" value="post" class="btn" />
            </form>
        </section>

        <section>
            <h3>sent privmsg message to channel</h3>
            <table class="table table-bordered">
                <tr><td>method</td><td>POST</td></tr>
                <tr><td>url</td><td>${base}privmsg</td></tr>
                <tr><td>form params</td><td>channel=#channel&message=your_message</td></tr>
            </table>
            <form action="/privmsg" method="post">
                channel: <input name="channel" /><br />
                message: <input name="message" />
                <input type="submit" value="post" class="btn" />
            </form>
        </section>
        </div>

bin/ikachan view on Meta::CPAN

  float: none;
  width: 764px;
  margin-left: 0;
}

.table td.span11,
.table th.span11 {
  float: none;
  width: 844px;
  margin-left: 0;
}

.table td.span12,
.table th.span12 {
  float: none;
  width: 924px;
  margin-left: 0;
}

.table tbody tr.success > td {
  background-color: #dff0d8;
}

.table tbody tr.error > td {
  background-color: #f2dede;
}

.table tbody tr.warning > td {
  background-color: #fcf8e3;
}

.table tbody tr.info > td {
  background-color: #d9edf7;
}

.table-hover tbody tr.success:hover > td {
  background-color: #d0e9c6;
}

.table-hover tbody tr.error:hover > td {
  background-color: #ebcccc;
}

.table-hover tbody tr.warning:hover > td {
  background-color: #faf2cc;
}

.table-hover tbody tr.info:hover > td {
  background-color: #c4e3f3;
}

[class^="icon-"],
[class*=" icon-"] {
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-top: 1px;
  *margin-right: .3em;
  line-height: 14px;
  vertical-align: text-top;
  background-image: url("../img/glyphicons-halflings.png");
  background-position: 14px 14px;
  background-repeat: no-repeat;
}

/* White icons with optional class, or on hover/focus/active states of certain elements */

.icon-white,
.nav-pills > .active > a > [class^="icon-"],
.nav-pills > .active > a > [class*=" icon-"],
.nav-list > .active > a > [class^="icon-"],
.nav-list > .active > a > [class*=" icon-"],
.navbar-inverse .nav > .active > a > [class^="icon-"],
.navbar-inverse .nav > .active > a > [class*=" icon-"],
.dropdown-menu > li > a:hover > [class^="icon-"],
.dropdown-menu > li > a:focus > [class^="icon-"],
.dropdown-menu > li > a:hover > [class*=" icon-"],
.dropdown-menu > li > a:focus > [class*=" icon-"],
.dropdown-menu > .active > a > [class^="icon-"],
.dropdown-menu > .active > a > [class*=" icon-"],
.dropdown-submenu:hover > a > [class^="icon-"],
.dropdown-submenu:focus > a > [class^="icon-"],
.dropdown-submenu:hover > a > [class*=" icon-"],
.dropdown-submenu:focus > a > [class*=" icon-"] {
  background-image: url("../img/glyphicons-halflings-white.png");
}

.icon-glass {
  background-position: 0      0;
}

.icon-music {
  background-position: -24px 0;
}

.icon-search {
  background-position: -48px 0;
}

.icon-envelope {
  background-position: -72px 0;
}

.icon-heart {
  background-position: -96px 0;
}

.icon-star {
  background-position: -120px 0;
}

.icon-star-empty {
  background-position: -144px 0;
}

.icon-user {
  background-position: -168px 0;
}

.icon-film {
  background-position: -192px 0;
}

.icon-th-large {
  background-position: -216px 0;
}

.icon-th {
  background-position: -240px 0;
}

.icon-th-list {
  background-position: -264px 0;
}

.icon-ok {
  background-position: -288px 0;
}

.icon-remove {
  background-position: -312px 0;
}

.icon-zoom-in {
  background-position: -336px 0;

( run in 1.122 second using v1.01-cache-2.11-cpan-b16cb0d3907 )