bootstrap 4 mockups
This commit is contained in:
pom2ter
parent
c874efeb79
commit
9fd2ffe400
143
mockup/bs4/chatbox.php
Normal file
143
mockup/bs4/chatbox.php
Normal file
@ -0,0 +1,143 @@
|
|||||||
|
<?php include('head.html'); ?>
|
||||||
|
<link type="text/css" rel="stylesheet" media="screen" href="https://cdn.conversejs.org/3.2.1/css/inverse.min.css" />
|
||||||
|
<link type="text/css" rel="stylesheet" media="screen" href="css/mockup.css" />
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<?php include('menu.html'); ?>
|
||||||
|
|
||||||
|
<div class="container-fluid">
|
||||||
|
<div id="conversejs" class="fullscreen chatbox">
|
||||||
|
<div id="controlbox" class="chatbox">
|
||||||
|
<div class="flyout box-flyout">
|
||||||
|
<div class="controlbox-panes">
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-xl-2 col-md-3">
|
||||||
|
<?php include('sidebar.html'); ?>
|
||||||
|
<?php include('user-panel.html'); ?>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="chatbox" id="37c0c87392010303765fe36b05c0967d62c6b70f">
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-xl-10 offset-xl-2 col-md-9 offset-md-3">
|
||||||
|
<div class="flyout box-flyout">
|
||||||
|
<div class="chat-head chat-head-chatbox d-flex">
|
||||||
|
<div><canvas height="44" width="44" class="avatar"></canvas></div>
|
||||||
|
<div class="chat-title w-100">JC Brand
|
||||||
|
<p class="user-custom-message" title="10000ft in the air">10000ft in the air</p>
|
||||||
|
</div>
|
||||||
|
<a class="chatbox-btn fa fa-vcard" title="Contact profile" data-toggle="modal" data-target="#contactProfileModal"></a>
|
||||||
|
<a class="chatbox-btn fa fa-close" title="Close this chat box"></a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="chat-body">
|
||||||
|
<div class="chat-content">
|
||||||
|
<div class="chat-info">
|
||||||
|
<span class="badge badge-info">This is an info message</span></div>
|
||||||
|
<div class="chat-info">
|
||||||
|
<span class="badge badge-danger">This is an error message</span></div>
|
||||||
|
<div class="chat-message">
|
||||||
|
<span class="chat-msg-author chat-msg-me">09:35
|
||||||
|
<canvas height="24" width="24" class="avatar"></canvas>
|
||||||
|
<span class="chat-msg-me">me: </span>
|
||||||
|
</span>
|
||||||
|
<span class="chat-msg-content">Hello world
|
||||||
|
<span class="fa fa-smile-o"></span>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div class="chat-message">
|
||||||
|
<span class="chat-msg-author chat-msg-them">19:25
|
||||||
|
<canvas height="24" width="24" class="avatar"></canvas>
|
||||||
|
<span class="chat-msg-them">Benedict-John: </span>
|
||||||
|
</span>
|
||||||
|
<span class="chat-msg-content">Dagsê</span>
|
||||||
|
</div>
|
||||||
|
<div class="chat-message">
|
||||||
|
<span class="chat-msg-author chat-msg-me">19:39
|
||||||
|
<canvas height="24" width="24" class="avatar"></canvas>
|
||||||
|
<span class="chat-msg-me">me: </span>
|
||||||
|
</span>
|
||||||
|
<span class="chat-msg-content">This is a relatively long message to check that wrapping works as expected.</span>
|
||||||
|
</div>
|
||||||
|
<div class="chat-message">
|
||||||
|
<span class="chat-msg-author chat-msg-me">19:42
|
||||||
|
<canvas height="24" width="24" class="avatar"></canvas>
|
||||||
|
<span class="chat-msg-me">me: </span>
|
||||||
|
</span>
|
||||||
|
<span class="chat-msg-content">Supercalifragilisticexpialidociousstillnotlongenough</span>
|
||||||
|
</div>
|
||||||
|
<div class="chat-info chat-event">
|
||||||
|
<span class="badge badge-success">JC Brand is busy</span>
|
||||||
|
</div>
|
||||||
|
<div class="chat-message">
|
||||||
|
<span class="chat-msg-author chat-msg-me">19:43
|
||||||
|
<canvas height="24" width="24" class="avatar"></canvas>
|
||||||
|
<span class="chat-msg-me">me: </span>
|
||||||
|
</span>
|
||||||
|
<span class="chat-msg-content">Another message to check that scrolling works.</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<form class="sendXMPPMessage">
|
||||||
|
<div class="form-group">
|
||||||
|
<ul class="chat-toolbar no-text-select">
|
||||||
|
<li class="toggle-toolbar-menu toggle-smiley fa fa-smile-o" title="Insert a smiley">
|
||||||
|
<div class="emoji-picker-container toolbar-menu collapsed"></div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="toggle-clear">
|
||||||
|
<a class="fa fa-trash" title="Clear all messages"></a>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="toggle-toolbar-menu toggle-otr unencrypted" title="Your messages are not encrypted. Click here to enable OTR encryption.">
|
||||||
|
<span class="chat-toolbar-text">unencrypted</span>
|
||||||
|
<span class="fa fa-unlock"></span>
|
||||||
|
<ul class="toolbar-menu collapsed">
|
||||||
|
<li>
|
||||||
|
<a class="start-otr" href="#">Start encrypted conversation</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="http://www.cypherpunks.ca/otr/help/3.2.0/levels.php" target="_blank" rel="noopener">What's this?</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<textarea class="form-control" placeholder="Personal message"></textarea>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Contact Profile Modal -->
|
||||||
|
<div class="modal fade" id="contactProfileModal" tabindex="-1" role="dialog" aria-labelledby="contactProfileModalLabel" aria-hidden="true">
|
||||||
|
<div class="modal-dialog" role="document">
|
||||||
|
<div class="modal-content">
|
||||||
|
<div class="modal-header">
|
||||||
|
<h5 class="modal-title" id="contactProfileModalLabel">JC Brand User Profile</h5>
|
||||||
|
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
||||||
|
<span aria-hidden="true">×</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div class="modal-body">
|
||||||
|
</div>
|
||||||
|
<div class="modal-footer">
|
||||||
|
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<?php include('modals.html'); ?>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
142
mockup/bs4/chatroom.php
Normal file
142
mockup/bs4/chatroom.php
Normal file
@ -0,0 +1,142 @@
|
|||||||
|
<?php include('head.html'); ?>
|
||||||
|
<link type="text/css" rel="stylesheet" media="screen" href="https://cdn.conversejs.org/3.2.1/css/inverse.min.css" />
|
||||||
|
<link type="text/css" rel="stylesheet" media="screen" href="css/mockup.css" />
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<?php include('menu.html'); ?>
|
||||||
|
|
||||||
|
<div class="container-fluid">
|
||||||
|
<div id="conversejs" class="fullscreen chatbox">
|
||||||
|
<div id="controlbox" class="chatbox">
|
||||||
|
<div class="flyout box-flyout">
|
||||||
|
<div class="controlbox-panes">
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-xl-2 col-md-3">
|
||||||
|
<?php include('sidebar.html'); ?>
|
||||||
|
<?php include('user-panel.html'); ?>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="chatbox chatroom" id="4a77380f1cd9d392627b0e1469688f9ca44e9392">
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-xl-10 offset-xl-2 col-md-9 offset-md-3">
|
||||||
|
<div class="flyout box-flyout">
|
||||||
|
<div class="chat-head chat-head-chatroom d-flex">
|
||||||
|
<div class="w-100">
|
||||||
|
<div class="chat-title">Chatroom</div>
|
||||||
|
<p class="chatroom-topic">May the force be with you</p>
|
||||||
|
</div>
|
||||||
|
<a class="chatbox-btn fa fa-wrench"></a>
|
||||||
|
<a class="chatbox-btn fa fa-minus"></a>
|
||||||
|
<a class="chatbox-btn fa fa-close"></a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="chat-body chatroom-body">
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-md-9 col-8">
|
||||||
|
<div class="chat-area">
|
||||||
|
<div class="chat-content">
|
||||||
|
<div class="chat-message">
|
||||||
|
<span class="chat-msg-author chat-msg-room">18:50
|
||||||
|
<canvas height="24" width="24" class="avatar"></canvas>
|
||||||
|
<span class="chat-msg-room">luke: </span>
|
||||||
|
</span>
|
||||||
|
<span class="chat-msg-content">leia: hi :)</span>
|
||||||
|
</div>
|
||||||
|
<div class="chat-message">
|
||||||
|
<span class="chat-msg-author chat-msg-room">19:40
|
||||||
|
<canvas height="24" width="24" class="avatar"></canvas>
|
||||||
|
<span class="chat-msg-room">leia: </span>
|
||||||
|
</span>
|
||||||
|
<span class="chat-msg-content">I'll be gone for a while, will be back in about an hour</span>
|
||||||
|
</div>
|
||||||
|
<time class="chat-info badge badge-info" datetime="2013-06-04T00:00:00.000Z">Tue Jun 04 2013</time>
|
||||||
|
<div class="chat-message">
|
||||||
|
<span class="chat-msg-author chat-msg-room">19:40
|
||||||
|
<canvas height="24" width="24" class="avatar"></canvas>
|
||||||
|
<span class="chat-msg-room">Obi-wan Kenobi, Jedi Master: </span>
|
||||||
|
</span>
|
||||||
|
<span class="chat-msg-content">I'll be gone for a while, will be back in about an hour</span>
|
||||||
|
</div>
|
||||||
|
<div class="chat-message">
|
||||||
|
<span class="chat-msg-author chat-msg-me">19:42
|
||||||
|
<canvas height="24" width="24" class="avatar"></canvas>
|
||||||
|
<span class="chat-msg-me">me: </span>
|
||||||
|
</span>
|
||||||
|
<span class="chat-msg-content">Supercalifragilisticexpialidociousstillnotlongenough</span>
|
||||||
|
</div>
|
||||||
|
<div class="chat-message">
|
||||||
|
<span class="chat-msg-author chat-msg-room">19:43
|
||||||
|
<canvas height="24" width="24" class="avatar"></canvas>
|
||||||
|
<span class="chat-msg-roomme">Obi-wan Kenobi, Jedi Master: </span>
|
||||||
|
</span>
|
||||||
|
<span class="chat-msg-content">Another message to check that scrolling works.</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<form class="sendXMPPMessage">
|
||||||
|
<div class="form-group">
|
||||||
|
<ul class="chat-toolbar no-text-select">
|
||||||
|
<li class="toggle-smiley fa fa-smile-o" title="Insert a smiley"></li>
|
||||||
|
<li class="toggle-occupants"><a class="fa fa-user-times" title="Hide the list of occupants"></a></li>
|
||||||
|
<li class="toggle-clear"><a class="fa fa-times" title="Clear all messages"></a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<textarea class="form-control" placeholder="Message"></textarea>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="col-md-3 col-4">
|
||||||
|
<div class="occupants w-100">
|
||||||
|
<p class="occupants-heading">Occupants:</p>
|
||||||
|
<form class="pure-form room-invite">
|
||||||
|
<div class="form-control">
|
||||||
|
<input class="form-control" placeholder="Invite..." type="text" autocomplete="off" spellcheck="false" dir="auto">
|
||||||
|
</div>
|
||||||
|
<pre aria-hidden="true" style="position: absolute; visibility: hidden; white-space: pre;"></pre>
|
||||||
|
</form>
|
||||||
|
|
||||||
|
<ul class="occupant-list">
|
||||||
|
<li class="moderator occupant" title="This user is a moderator. Click to mention luke in your message.">
|
||||||
|
<div class="occupant-status occupant-online circle" title="Online"></div>luke</li>
|
||||||
|
<li class="participant occupant" title="Click to mention leia in your message.">
|
||||||
|
<div class="occupant-status occupant-online circle" title="Online"></div>leia</li>
|
||||||
|
<li class="participant occupant" title="Click to mention Obi-wan Kenobi, Jedi Master in your message.">
|
||||||
|
<div class="occupant-status occupant-online circle" title="Online"></div>Obi-wan Kenobi, Jedi Master</li>
|
||||||
|
<li class="participant occupant" title="Click to mention jabber the hut in your message.">
|
||||||
|
<div class="occupant-status occupant-online circle" title="Online"></div>jabber the hut</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<div class="chatroom-features">
|
||||||
|
<p class="occupants-heading">Features</p>
|
||||||
|
<ul class="features-list">
|
||||||
|
<li class="feature" title="Unsecured: This room requires a password before entry"><span class="fa fa-unlock"></span> </li>
|
||||||
|
<li class="feature" title="Public: This room is publicly searchable"><span class="fa fa-eye"></span> </li>
|
||||||
|
<li class="feature" title="Open: Anyone can join this roo"><span class="fa fa-globe"></span> </li>
|
||||||
|
<li class="feature" title="Persistent: This room persists even if it's unoccupied"><span class="fa fa-save"></span> </li>
|
||||||
|
<li class="feature" title="Non-anonymous: All other room occupants can see your XMPP username"><span class="fa fa-vcard"></span> </li>
|
||||||
|
<li class="feature" title="Unmoderated: This room is not being moderated"><span class="fa fa-info-circle"></span> </li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<?php include('modals.html'); ?>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
281
mockup/bs4/converse.php
Normal file
281
mockup/bs4/converse.php
Normal file
@ -0,0 +1,281 @@
|
|||||||
|
<?php include('head.html'); ?>
|
||||||
|
<link type="text/css" rel="stylesheet" media="screen" href="https://cdn.conversejs.org/3.2.1/css/converse.min.css" />
|
||||||
|
<link type="text/css" rel="stylesheet" media="screen" href="css/mockup.css" />
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<?php include('menu.html'); ?>
|
||||||
|
|
||||||
|
<div id="conversejs" class="chatbox">
|
||||||
|
<div id="controlbox" class="chatbox">
|
||||||
|
<div class="flyout box-flyout">
|
||||||
|
<div class="controlbox-panes">
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-12">
|
||||||
|
<?php include('sidebar.html'); ?>
|
||||||
|
<?php include('user-panel.html'); ?>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="chatbox" id="37c0c87392010303765fe36b05c0967d62c6b70f">
|
||||||
|
<div class="flyout box-flyout">
|
||||||
|
<div class="chat-head chat-head-chatbox d-flex">
|
||||||
|
<div><canvas height="32" width="32" class="avatar"></canvas></div>
|
||||||
|
<div class="chat-title w-100">JC Brand
|
||||||
|
<p class="user-custom-message" title="10000ft in the air">10000ft in the air</p>
|
||||||
|
</div>
|
||||||
|
<a class="chatbox-btn fa fa-vcard" title="Contact profile" data-toggle="modal" data-target="#contactProfileModal"></a>
|
||||||
|
<a class="chatbox-btn fa fa-close" title="Close this chat box"></a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="chat-body">
|
||||||
|
<div class="chat-content">
|
||||||
|
<div class="chat-info">
|
||||||
|
<span class="badge badge-info">This is an info message</span></div>
|
||||||
|
<div class="chat-info">
|
||||||
|
<span class="badge badge-danger">This is an error message</span></div>
|
||||||
|
<div class="chat-message">
|
||||||
|
<span class="chat-msg-author chat-msg-me">09:35
|
||||||
|
<canvas height="24" width="24" class="avatar"></canvas>
|
||||||
|
<span class="chat-msg-me">me: </span>
|
||||||
|
</span>
|
||||||
|
<span class="chat-msg-content">Hello world
|
||||||
|
<span class="fa fa-smile-o"></span>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div class="chat-message">
|
||||||
|
<span class="chat-msg-author chat-msg-them">19:25
|
||||||
|
<canvas height="24" width="24" class="avatar"></canvas>
|
||||||
|
<span class="chat-msg-them">Benedict-John: </span>
|
||||||
|
</span>
|
||||||
|
<span class="chat-msg-content">Dagsê</span>
|
||||||
|
</div>
|
||||||
|
<div class="chat-message">
|
||||||
|
<span class="chat-msg-author chat-msg-me">19:39
|
||||||
|
<canvas height="24" width="24" class="avatar"></canvas>
|
||||||
|
<span class="chat-msg-me">me: </span>
|
||||||
|
</span>
|
||||||
|
<span class="chat-msg-content">This is a relatively long message to check that wrapping works as expected.</span>
|
||||||
|
</div>
|
||||||
|
<div class="chat-message">
|
||||||
|
<span class="chat-msg-author chat-msg-me">19:42
|
||||||
|
<canvas height="24" width="24" class="avatar"></canvas>
|
||||||
|
<span class="chat-msg-me">me: </span>
|
||||||
|
</span>
|
||||||
|
<span class="chat-msg-content">Supercalifragilisticexpialidociousstillnotlongenough</span>
|
||||||
|
</div>
|
||||||
|
<div class="chat-info chat-event">
|
||||||
|
<span class="badge badge-success">JC Brand is busy</span>
|
||||||
|
</div>
|
||||||
|
<div class="chat-message">
|
||||||
|
<span class="chat-msg-author chat-msg-me">19:43
|
||||||
|
<canvas height="24" width="24" class="avatar"></canvas>
|
||||||
|
<span class="chat-msg-me">me: </span>
|
||||||
|
</span>
|
||||||
|
<span class="chat-msg-content">Another message to check that scrolling works.</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<form class="sendXMPPMessage">
|
||||||
|
<div class="form-group">
|
||||||
|
<ul class="chat-toolbar no-text-select">
|
||||||
|
<li class="toggle-toolbar-menu toggle-smiley fa fa-smile-o" title="Insert a smiley">
|
||||||
|
<div class="emoji-picker-container toolbar-menu collapsed"></div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="toggle-clear">
|
||||||
|
<a class="fa fa-trash" title="Clear all messages"></a>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="toggle-toolbar-menu toggle-otr unencrypted" title="Your messages are not encrypted. Click here to enable OTR encryption.">
|
||||||
|
<span class="chat-toolbar-text">unencrypted</span>
|
||||||
|
<span class="fa fa-unlock"></span>
|
||||||
|
<ul class="toolbar-menu collapsed">
|
||||||
|
<li>
|
||||||
|
<a class="start-otr" href="#">Start encrypted conversation</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="http://www.cypherpunks.ca/otr/help/3.2.0/levels.php" target="_blank" rel="noopener">What's this?</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<textarea class="form-control" placeholder="Personal message"></textarea>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="chatbox chatroom" id="4a77380f1cd9d392627b0e1469688f9ca44e9392">
|
||||||
|
<div class="flyout box-flyout">
|
||||||
|
<div class="chat-head chat-head-chatroom d-flex">
|
||||||
|
<div class="w-100">
|
||||||
|
<div class="chat-title">Chatroom</div>
|
||||||
|
<p class="chatroom-topic">May the force be with you</p>
|
||||||
|
</div>
|
||||||
|
<a class="chatbox-btn fa fa-wrench"></a>
|
||||||
|
<a class="chatbox-btn fa fa-minus"></a>
|
||||||
|
<a class="chatbox-btn fa fa-close"></a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="chat-body chatroom-body">
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-md-9 col-8">
|
||||||
|
<div class="chat-area">
|
||||||
|
<div class="chat-content">
|
||||||
|
<div class="chat-message">
|
||||||
|
<span class="chat-msg-author chat-msg-room">18:50
|
||||||
|
<canvas height="24" width="24" class="avatar"></canvas>
|
||||||
|
<span class="chat-msg-room">luke: </span>
|
||||||
|
</span>
|
||||||
|
<span class="chat-msg-content">leia: hi :)</span>
|
||||||
|
</div>
|
||||||
|
<div class="chat-message">
|
||||||
|
<span class="chat-msg-author chat-msg-room">19:40
|
||||||
|
<canvas height="24" width="24" class="avatar"></canvas>
|
||||||
|
<span class="chat-msg-room">leia: </span>
|
||||||
|
</span>
|
||||||
|
<span class="chat-msg-content">I'll be gone for a while, will be back in about an hour</span>
|
||||||
|
</div>
|
||||||
|
<time class="chat-info badge badge-info" datetime="2013-06-04T00:00:00.000Z">Tue Jun 04 2013</time>
|
||||||
|
<div class="chat-message">
|
||||||
|
<span class="chat-msg-author chat-msg-room">19:40
|
||||||
|
<canvas height="24" width="24" class="avatar"></canvas>
|
||||||
|
<span class="chat-msg-room">Obi-wan Kenobi, Jedi Master: </span>
|
||||||
|
</span>
|
||||||
|
<span class="chat-msg-content">I'll be gone for a while, will be back in about an hour</span>
|
||||||
|
</div>
|
||||||
|
<div class="chat-message">
|
||||||
|
<span class="chat-msg-author chat-msg-me">19:42
|
||||||
|
<canvas height="24" width="24" class="avatar"></canvas>
|
||||||
|
<span class="chat-msg-me">me: </span>
|
||||||
|
</span>
|
||||||
|
<span class="chat-msg-content">Supercalifragilisticexpialidociousstillnotlongenough</span>
|
||||||
|
</div>
|
||||||
|
<div class="chat-message">
|
||||||
|
<span class="chat-msg-author chat-msg-room">19:43
|
||||||
|
<canvas height="24" width="24" class="avatar"></canvas>
|
||||||
|
<span class="chat-msg-roomme">Obi-wan Kenobi, Jedi Master: </span>
|
||||||
|
</span>
|
||||||
|
<span class="chat-msg-content">Another message to check that scrolling works.</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<form class="sendXMPPMessage">
|
||||||
|
<div class="form-group">
|
||||||
|
<ul class="chat-toolbar no-text-select">
|
||||||
|
<li class="toggle-smiley fa fa-smile-o" title="Insert a smiley"></li>
|
||||||
|
<li class="toggle-occupants"><a class="fa fa-user-times" title="Hide the list of occupants"></a></li>
|
||||||
|
<li class="toggle-clear"><a class="fa fa-times" title="Clear all messages"></a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<textarea class="form-control" placeholder="Message"></textarea>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="col-md-3 col-4">
|
||||||
|
<div class="occupants w-100">
|
||||||
|
<p class="occupants-heading">Occupants:</p>
|
||||||
|
<form class="pure-form room-invite">
|
||||||
|
<div class="form-control">
|
||||||
|
<input class="form-control" placeholder="Invite..." type="text" autocomplete="off" spellcheck="false" dir="auto">
|
||||||
|
</div>
|
||||||
|
<pre aria-hidden="true" style="position: absolute; visibility: hidden; white-space: pre;"></pre>
|
||||||
|
</form>
|
||||||
|
|
||||||
|
<ul class="occupant-list">
|
||||||
|
<li class="moderator occupant" title="This user is a moderator. Click to mention luke in your message.">
|
||||||
|
<div class="occupant-status occupant-online circle" title="Online"></div>luke</li>
|
||||||
|
<li class="participant occupant" title="Click to mention leia in your message.">
|
||||||
|
<div class="occupant-status occupant-online circle" title="Online"></div>leia</li>
|
||||||
|
<li class="participant occupant" title="Click to mention Obi-wan Kenobi, Jedi Master in your message.">
|
||||||
|
<div class="occupant-status occupant-online circle" title="Online"></div>Obi-wan Kenobi, Jedi Master</li>
|
||||||
|
<li class="participant occupant" title="Click to mention jabber the hut in your message.">
|
||||||
|
<div class="occupant-status occupant-online circle" title="Online"></div>jabber the hut</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<div class="chatroom-features">
|
||||||
|
<p class="occupants-heading">Features</p>
|
||||||
|
<ul class="features-list">
|
||||||
|
<li class="feature" title="Unsecured: This room requires a password before entry"><span class="fa fa-unlock"></span> </li>
|
||||||
|
<li class="feature" title="Public: This room is publicly searchable"><span class="fa fa-eye"></span> </li>
|
||||||
|
<li class="feature" title="Open: Anyone can join this roo"><span class="fa fa-globe"></span> </li>
|
||||||
|
<li class="feature" title="Persistent: This room persists even if it's unoccupied"><span class="fa fa-save"></span> </li>
|
||||||
|
<li class="feature" title="Non-anonymous: All other room occupants can see your XMPP username"><span class="fa fa-vcard"></span> </li>
|
||||||
|
<li class="feature" title="Unmoderated: This room is not being moderated"><span class="fa fa-info-circle"></span> </li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="minimized-chats">
|
||||||
|
<a id="toggle-minimized-chats" href="#">Minimized
|
||||||
|
<span id="minimized-count">(0)</span>
|
||||||
|
<span class="badge badge-light">322</span>
|
||||||
|
</a>
|
||||||
|
<div class="flyout minimized-chats-flyout">
|
||||||
|
<div class="chat-head chat-head-chatroom d-flex">
|
||||||
|
<span class="badge badge-light">3</span>
|
||||||
|
<a href="#" class="restore-chat w-100 align-self-center" title="Click to maximize this chat">Restricted Chatroom</a>
|
||||||
|
<a class="chatbox-btn close-chatbox-button fa fa-times"></a>
|
||||||
|
</div>
|
||||||
|
<div class="chat-head chat-head-chatbox d-flex">
|
||||||
|
<span class="badge badge-light">42</span>
|
||||||
|
<a href="#" class="restore-chat w-100 align-self-center" title="Click to maximize this chat">JC Brand</a>
|
||||||
|
<a class="chatbox-btn close-chatbox-button fa fa-times"></a>
|
||||||
|
</div>
|
||||||
|
<div class="chat-head chat-head-chatroom d-flex">
|
||||||
|
<a href="#" class="restore-chat w-100 align-self-center" title="Click to maximize this chat">My Chatroom</a>
|
||||||
|
<a class="chatbox-btn close-chatbox-button fa fa-times"></a>
|
||||||
|
</div>
|
||||||
|
<div class="chat-head chat-head-chatbox d-flex">
|
||||||
|
<a href="#" class="restore-chat w-100 align-self-center" title="Click to maximize this chat">Annegreet Gomez</a>
|
||||||
|
<a class="chatbox-btn close-chatbox-button fa fa-times"></a>
|
||||||
|
</div>
|
||||||
|
<div class="chat-head chat-head-chatbox d-flex">
|
||||||
|
<span class="badge badge-light">842</span>
|
||||||
|
<a href="#" class="restore-chat w-100 align-self-center" title="Click to maximize this chat">Asmaa Haakman</a>
|
||||||
|
<a class="chatbox-btn close-chatbox-button fa fa-times"></a>
|
||||||
|
</div>
|
||||||
|
<div class="chat-head chat-head-chatbox d-flex">
|
||||||
|
<a href="#" class="restore-chat w-100 align-self-center">Lena Grunewald</a>
|
||||||
|
<a class="chatbox-btn close-chatbox-button fa fa-times"></a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Contact Profile Modal -->
|
||||||
|
<div class="modal fade" id="contactProfileModal" tabindex="-1" role="dialog" aria-labelledby="contactProfileModalLabel" aria-hidden="true">
|
||||||
|
<div class="modal-dialog" role="document">
|
||||||
|
<div class="modal-content">
|
||||||
|
<div class="modal-header">
|
||||||
|
<h5 class="modal-title" id="contactProfileModalLabel">JC Brand User Profile</h5>
|
||||||
|
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
||||||
|
<span aria-hidden="true">×</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div class="modal-body">
|
||||||
|
</div>
|
||||||
|
<div class="modal-footer">
|
||||||
|
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<?php include('modals.html'); ?>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
7
mockup/bs4/css/bootstrap.min.css
vendored
Normal file
7
mockup/bs4/css/bootstrap.min.css
vendored
Normal file
File diff suppressed because one or more lines are too long
4
mockup/bs4/css/font-awesome.min.css
vendored
Normal file
4
mockup/bs4/css/font-awesome.min.css
vendored
Normal file
File diff suppressed because one or more lines are too long
459
mockup/bs4/css/mockup.css
Normal file
459
mockup/bs4/css/mockup.css
Normal file
@ -0,0 +1,459 @@
|
|||||||
|
body {
|
||||||
|
height: 100vh;
|
||||||
|
background-color: #578ea9;
|
||||||
|
color: #212529;
|
||||||
|
}
|
||||||
|
body .brand-heading {
|
||||||
|
margin: auto;
|
||||||
|
font-size: 6em;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
body .brand-heading .icon-conversejs {
|
||||||
|
font-size: 0.88em;
|
||||||
|
}
|
||||||
|
.converse-bg {
|
||||||
|
position: relative;
|
||||||
|
height: 100vh;
|
||||||
|
text-align: center;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
.converse-bg .brand-heading {
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
-webkit-transform: translate(-50%, -50%);
|
||||||
|
-ms-transform: translate(-50%, -50%);
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
}
|
||||||
|
.xmpp-status .online,
|
||||||
|
.xmpp-status-menu .online {
|
||||||
|
color: #28a745;
|
||||||
|
}
|
||||||
|
.xmpp-status .dnd,
|
||||||
|
.xmpp-status-menu .dnd {
|
||||||
|
color: #dc3545;
|
||||||
|
}
|
||||||
|
.xmpp-status .away,
|
||||||
|
.xmpp-status-menu .away {
|
||||||
|
color: #17a2b8;
|
||||||
|
}
|
||||||
|
.xmpp-status .logout,
|
||||||
|
.xmpp-status-menu .logout,
|
||||||
|
.xmpp-status .offline,
|
||||||
|
.xmpp-status-menu .offline {
|
||||||
|
color: #868e96;
|
||||||
|
}
|
||||||
|
#mockups {
|
||||||
|
position: fixed;
|
||||||
|
bottom: 0;
|
||||||
|
left: 50%;
|
||||||
|
padding: 7px;
|
||||||
|
z-index: 2000;
|
||||||
|
background-color: #578ea9;
|
||||||
|
-webkit-transform: translate(-50%, 0%);
|
||||||
|
-ms-transform: translate(-50%, 0%);
|
||||||
|
transform: translate(-50%, 0%);
|
||||||
|
}
|
||||||
|
#mockups a {
|
||||||
|
width: 30px;
|
||||||
|
padding: 4px;
|
||||||
|
background: #aaa;
|
||||||
|
border: 1px solid #000;
|
||||||
|
color: #000;
|
||||||
|
font-size: 0.9em;
|
||||||
|
}
|
||||||
|
#conversejs {
|
||||||
|
margin: 10px 0 0;
|
||||||
|
}
|
||||||
|
#conversejs p {
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
|
#conversejs a,
|
||||||
|
#conversejs a:visited {
|
||||||
|
color: #007bff;
|
||||||
|
}
|
||||||
|
#conversejs a:hover {
|
||||||
|
color: #0056b3;
|
||||||
|
}
|
||||||
|
#conversejs canvas {
|
||||||
|
background: #000;
|
||||||
|
border-radius: 4px;
|
||||||
|
margin: 2px 0;
|
||||||
|
}
|
||||||
|
#conversejs form.pure-form.converse-form input[type=button],
|
||||||
|
#conversejs form.pure-form.converse-form input[type=submit] {
|
||||||
|
margin-right: 0;
|
||||||
|
}
|
||||||
|
#conversejs .badge {
|
||||||
|
padding: 0.25em 0.4em;
|
||||||
|
line-height: 1;
|
||||||
|
font-weight: 700;
|
||||||
|
font-size: 0.9em;
|
||||||
|
}
|
||||||
|
#conversejs .btn.btn-primary {
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
#conversejs .chat-head .avatar {
|
||||||
|
border-radius: 5px;
|
||||||
|
}
|
||||||
|
#conversejs .fa {
|
||||||
|
font: normal normal normal 14px/1 FontAwesome;
|
||||||
|
display: inline-block;
|
||||||
|
font-size: inherit;
|
||||||
|
text-rendering: auto;
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
-moz-osx-font-smoothing: grayscale;
|
||||||
|
}
|
||||||
|
#conversejs #controlbox {
|
||||||
|
margin-right: 0.5em;
|
||||||
|
}
|
||||||
|
#conversejs #controlbox .controlbox-pane {
|
||||||
|
height: 100%;
|
||||||
|
border-radius: 5px;
|
||||||
|
}
|
||||||
|
#conversejs #controlbox .controlbox-pane label {
|
||||||
|
margin: 8px;
|
||||||
|
}
|
||||||
|
#conversejs #controlbox #login-dialog .brand-heading {
|
||||||
|
margin-top: 3.5%;
|
||||||
|
font-size: 2.5em;
|
||||||
|
color: #578ea9;
|
||||||
|
}
|
||||||
|
#conversejs #controlbox #chatrooms .rooms-list-container {
|
||||||
|
margin: 10px 0;
|
||||||
|
}
|
||||||
|
#conversejs #converse-roster {
|
||||||
|
height: calc(100% - 70px);
|
||||||
|
margin-top: 0;
|
||||||
|
padding-bottom: 15px;
|
||||||
|
overflow: auto;
|
||||||
|
border-bottom: 1px solid #777;
|
||||||
|
}
|
||||||
|
#conversejs #converse-roster .roster-filter-form {
|
||||||
|
margin: 5px 0 0;
|
||||||
|
}
|
||||||
|
#conversejs #converse-roster .roster-filter-form input {
|
||||||
|
width: 56%;
|
||||||
|
margin-right: 5px;
|
||||||
|
}
|
||||||
|
#conversejs #converse-roster .roster-filter-form span {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0.2em;
|
||||||
|
color: #888;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
#conversejs #converse-roster .roster-filter-form span.fa-user {
|
||||||
|
color: #000;
|
||||||
|
}
|
||||||
|
#conversejs #converse-roster .roster-filter-form .form-group {
|
||||||
|
margin-bottom: 0.5rem;
|
||||||
|
}
|
||||||
|
#conversejs #converse-roster .roster-contacts {
|
||||||
|
height: auto;
|
||||||
|
font-size: 0.875rem;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
#conversejs #converse-roster .roster-contacts dd {
|
||||||
|
height: 28px;
|
||||||
|
}
|
||||||
|
#conversejs #converse-roster .roster-contacts dd a {
|
||||||
|
text-overflow: initial;
|
||||||
|
overflow: visible;
|
||||||
|
}
|
||||||
|
#conversejs #converse-roster .roster-contacts dd a.remove-xmpp-contact {
|
||||||
|
font-size: 0.95em;
|
||||||
|
}
|
||||||
|
#conversejs #minimized-chats .badge {
|
||||||
|
position: absolute;
|
||||||
|
right: 122px;
|
||||||
|
bottom: 8px;
|
||||||
|
border: 1px solid #111;
|
||||||
|
}
|
||||||
|
#conversejs.fullscreen {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
color: #212529;
|
||||||
|
}
|
||||||
|
#conversejs.fullscreen.login {
|
||||||
|
width: calc(100vw - 20px);
|
||||||
|
height: calc(100vh - 20px);
|
||||||
|
}
|
||||||
|
#conversejs.fullscreen.login #controlbox #login-dialog {
|
||||||
|
height: 100%;
|
||||||
|
border-radius: 5px;
|
||||||
|
}
|
||||||
|
#conversejs.fullscreen.login #controlbox #login-dialog .brand-heading {
|
||||||
|
font-size: 6em;
|
||||||
|
}
|
||||||
|
#conversejs.fullscreen.login #controlbox #login-dialog .converse-form {
|
||||||
|
margin: 0;
|
||||||
|
padding: 3em 2em 3em;
|
||||||
|
}
|
||||||
|
#conversejs.fullscreen.chatbox {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
#conversejs.fullscreen.chatbox .chatbox {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
#conversejs.fullscreen.chatbox .chatbox .box-flyout {
|
||||||
|
width: 100%;
|
||||||
|
height: 100vh;
|
||||||
|
}
|
||||||
|
#conversejs.fullscreen #controlbox {
|
||||||
|
width: 100%;
|
||||||
|
margin-right: 0;
|
||||||
|
}
|
||||||
|
#conversejs.fullscreen #controlbox .box-flyout {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
#conversejs.fullscreen #controlbox .controlbox-pane {
|
||||||
|
height: 100vh;
|
||||||
|
border-radius: 0;
|
||||||
|
}
|
||||||
|
#conversejs.fullscreen .chatroom .box-flyout .chatroom-body .chat-area {
|
||||||
|
height: calc(100vh - 95px);
|
||||||
|
}
|
||||||
|
#conversejs .sidebar {
|
||||||
|
display: none;
|
||||||
|
position: absolute;
|
||||||
|
width: 50px;
|
||||||
|
height: 100vh;
|
||||||
|
padding: 10px 0;
|
||||||
|
background-color: #578ea9;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
#conversejs .sidebar .chatbox-btn {
|
||||||
|
float: none;
|
||||||
|
margin: 0;
|
||||||
|
font-size: 1.35em;
|
||||||
|
}
|
||||||
|
#conversejs .sidebar .chatbox-btn.fa-vcard {
|
||||||
|
margin-top: 30px;
|
||||||
|
}
|
||||||
|
#conversejs .sidebar .bottom {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 10px;
|
||||||
|
}
|
||||||
|
#conversejs .chatbox .chat-content {
|
||||||
|
padding: 0.5em;
|
||||||
|
}
|
||||||
|
#conversejs .chatbox .chat-body {
|
||||||
|
background: #fff;
|
||||||
|
}
|
||||||
|
#conversejs .chatbox .chat-body .chat-message {
|
||||||
|
margin: 0.3em;
|
||||||
|
}
|
||||||
|
#conversejs .chatbox .chat-body .chat-message canvas {
|
||||||
|
vertical-align: middle;
|
||||||
|
background: #777;
|
||||||
|
}
|
||||||
|
#conversejs .chatbox .chat-body .chat-message .chat-msg-me canvas {
|
||||||
|
background: #578ea9;
|
||||||
|
}
|
||||||
|
#conversejs .chatbox .chat-body .chat-message .chat-msg-them canvas {
|
||||||
|
background: #e77051;
|
||||||
|
}
|
||||||
|
#conversejs .chatbox .chat-body .chat-message .chat-msg-author {
|
||||||
|
float: none;
|
||||||
|
}
|
||||||
|
#conversejs .chatbox form.sendXMPPMessage textarea {
|
||||||
|
resize: none;
|
||||||
|
border: none;
|
||||||
|
border-top-left-radius: 0;
|
||||||
|
border-top-right-radius: 0;
|
||||||
|
}
|
||||||
|
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar a,
|
||||||
|
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar li.toggle-toolbar-menu {
|
||||||
|
color: #212529;
|
||||||
|
}
|
||||||
|
#conversejs .chatroom .box-flyout .chatroom-body .chat-area {
|
||||||
|
min-width: 100%;
|
||||||
|
height: 395px;
|
||||||
|
}
|
||||||
|
#conversejs .chatroom .box-flyout .chatroom-body .chat-area .chat-content {
|
||||||
|
padding: 0.5em;
|
||||||
|
}
|
||||||
|
#conversejs .chatroom .box-flyout .chatroom-body .chat-info {
|
||||||
|
color: #fff;
|
||||||
|
line-height: normal;
|
||||||
|
}
|
||||||
|
#conversejs .chatroom .box-flyout .chatroom-body .occupants .chatroom-features {
|
||||||
|
bottom: 0;
|
||||||
|
width: auto;
|
||||||
|
}
|
||||||
|
#conversejs .chatroom .box-flyout .chatroom-body .occupants ul li.feature {
|
||||||
|
float: left;
|
||||||
|
margin-right: 0.5em;
|
||||||
|
padding-right: 0;
|
||||||
|
font-size: 1em;
|
||||||
|
cursor: help;
|
||||||
|
}
|
||||||
|
#conversejs #users {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
#conversejs #users #chatrooms {
|
||||||
|
padding-bottom: 5px;
|
||||||
|
border-bottom: 1px solid #aaa;
|
||||||
|
}
|
||||||
|
#conversejs #users #chatrooms .rooms-list-container dl.rooms-list .available-chatroom,
|
||||||
|
#conversejs #users #chatrooms .rooms-list-container dl.rooms-list .open-chatroom {
|
||||||
|
padding: 0.1em 0;
|
||||||
|
}
|
||||||
|
#conversejs #users #chatrooms .rooms-list-container dl.rooms-list a + a {
|
||||||
|
line-height: 22px;
|
||||||
|
}
|
||||||
|
#conversejs #users #chatrooms,
|
||||||
|
#conversejs #users #contacts {
|
||||||
|
margin-top: 0.75em;
|
||||||
|
}
|
||||||
|
#conversejs #users .userinfo {
|
||||||
|
padding-bottom: 10px;
|
||||||
|
border-bottom: 1px solid #aaa;
|
||||||
|
}
|
||||||
|
#conversejs #users .userinfo .username {
|
||||||
|
margin-left: 5px;
|
||||||
|
}
|
||||||
|
#conversejs #users .userinfo .d-flex {
|
||||||
|
margin-bottom: 2px;
|
||||||
|
}
|
||||||
|
#conversejs #users.controlbox-pane {
|
||||||
|
height: 450px;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
#conversejs #users .chatbox-btn {
|
||||||
|
margin: 0;
|
||||||
|
color: #007bff;
|
||||||
|
}
|
||||||
|
@media screen and (max-width: 575px) {
|
||||||
|
body .brand-heading {
|
||||||
|
font-size: 3.75em;
|
||||||
|
}
|
||||||
|
#conversejs.fullscreen.login #controlbox #login-dialog .brand-heading,
|
||||||
|
#conversejs #controlbox #login-dialog .brand-heading {
|
||||||
|
font-size: 3.75em;
|
||||||
|
}
|
||||||
|
#conversejs .chatbox .chat-body {
|
||||||
|
border-radius: 7px;
|
||||||
|
}
|
||||||
|
#conversejs .flyout {
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media screen and (max-width: 767px) {
|
||||||
|
#conversejs {
|
||||||
|
left: 0;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
#conversejs.fullscreen.chatbox > .chatbox,
|
||||||
|
#conversejs.fullscreen.chatbox .chatroom {
|
||||||
|
width: calc(100% - 50px);
|
||||||
|
}
|
||||||
|
#conversejs.fullscreen.chatbox.sidebar-open #controlbox #users {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
#conversejs.fullscreen.chatbox.sidebar-open > .chatbox:not(#controlbox),
|
||||||
|
#conversejs.fullscreen.chatbox.sidebar-open .chatroom {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
#conversejs.fullscreen.chatbox .chatbox .box-flyout {
|
||||||
|
left: 0;
|
||||||
|
}
|
||||||
|
#conversejs.login {
|
||||||
|
margin: 10px;
|
||||||
|
}
|
||||||
|
#conversejs.login #controlbox {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
#conversejs.login #controlbox .controlbox-pane {
|
||||||
|
font-size: 1.15em;
|
||||||
|
}
|
||||||
|
#conversejs.login #controlbox.chatbox {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
#conversejs.login .chatbox .box-flyout {
|
||||||
|
height: calc(100vh - 20px);
|
||||||
|
width: 100%;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
}
|
||||||
|
#conversejs.sidebar-open #controlbox #users {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
#conversejs.sidebar-open > .chatbox:not(#controlbox) {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
#conversejs #controlbox #users {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 50px;
|
||||||
|
display: none;
|
||||||
|
width: calc(100% - 50px);
|
||||||
|
}
|
||||||
|
#conversejs #controlbox .box-flyout {
|
||||||
|
width: 100%;
|
||||||
|
left: 0;
|
||||||
|
}
|
||||||
|
#conversejs #controlbox .sidebar {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
#conversejs #users.controlbox-pane {
|
||||||
|
height: 100vh;
|
||||||
|
}
|
||||||
|
#conversejs #login-dialog .pure-form.converse-form {
|
||||||
|
padding: 3em 2em 3em;
|
||||||
|
}
|
||||||
|
#conversejs > .chatbox {
|
||||||
|
width: calc(100% - 50px);
|
||||||
|
}
|
||||||
|
#conversejs .chatbox .chat-body .chat-message .chat-msg-author {
|
||||||
|
white-space: normal;
|
||||||
|
}
|
||||||
|
#conversejs .chatbox .box-flyout {
|
||||||
|
left: 50px;
|
||||||
|
bottom: 0;
|
||||||
|
width: calc(100% - 50px);
|
||||||
|
height: 100vh;
|
||||||
|
box-shadow: none;
|
||||||
|
}
|
||||||
|
#conversejs .chatbox .box-flyout .chatroom-body .chat-area {
|
||||||
|
height: calc(100vh - 55px);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media screen and (min-width: 576px) {
|
||||||
|
#conversejs .offset-sm-2 {
|
||||||
|
margin-left: 16.666667%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media screen and (min-width: 768px) {
|
||||||
|
#conversejs .offset-md-2 {
|
||||||
|
margin-left: 16.666667%;
|
||||||
|
}
|
||||||
|
#conversejs .offset-md-3 {
|
||||||
|
margin-left: 25%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media screen and (min-width: 992px) {
|
||||||
|
#conversejs .offset-lg-2 {
|
||||||
|
margin-left: 16.666667%;
|
||||||
|
}
|
||||||
|
#conversejs .offset-lg-3 {
|
||||||
|
margin-left: 25%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media screen and (min-width: 1200px) {
|
||||||
|
#conversejs .offset-xl-2 {
|
||||||
|
margin-left: 16.666667%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media screen and (max-height: 450px) {
|
||||||
|
#conversejs {
|
||||||
|
left: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media screen and (max-width: 480px) {
|
||||||
|
#conversejs {
|
||||||
|
width: auto;
|
||||||
|
}
|
||||||
|
}
|
||||||
7
mockup/bs4/fonticons/Read Me.txt
Normal file
7
mockup/bs4/fonticons/Read Me.txt
Normal file
@ -0,0 +1,7 @@
|
|||||||
|
Open *demo.html* to see a list of all the glyphs in your font along with their codes/ligatures.
|
||||||
|
|
||||||
|
To use the generated font in desktop programs, you can install the TTF font. In order to copy the character associated with each icon, refer to the text box at the bottom right corner of each glyph in demo.html. The character inside this text box may be invisible; but it can still be copied. See this guide for more info: https://icomoon.io/#docs/local-fonts
|
||||||
|
|
||||||
|
You won't need any of the files located under the *demo-files* directory when including the generated font in your own projects.
|
||||||
|
|
||||||
|
You can import *selection.json* back to the IcoMoon app using the *Import Icons* button (or via Main Menu → Manage Projects) to retrieve your icon selection.
|
||||||
155
mockup/bs4/fonticons/demo-files/demo.css
Normal file
155
mockup/bs4/fonticons/demo-files/demo.css
Normal file
@ -0,0 +1,155 @@
|
|||||||
|
body {
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
font-family: sans-serif;
|
||||||
|
font-size: 1em;
|
||||||
|
line-height: 1.5;
|
||||||
|
color: #555;
|
||||||
|
background: #fff;
|
||||||
|
}
|
||||||
|
h1 {
|
||||||
|
font-size: 1.5em;
|
||||||
|
font-weight: normal;
|
||||||
|
}
|
||||||
|
small {
|
||||||
|
font-size: .66666667em;
|
||||||
|
}
|
||||||
|
a {
|
||||||
|
color: #e74c3c;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
a:hover, a:focus {
|
||||||
|
box-shadow: 0 1px #e74c3c;
|
||||||
|
}
|
||||||
|
.bshadow0, input {
|
||||||
|
box-shadow: inset 0 -2px #e7e7e7;
|
||||||
|
}
|
||||||
|
input:hover {
|
||||||
|
box-shadow: inset 0 -2px #ccc;
|
||||||
|
}
|
||||||
|
input, fieldset {
|
||||||
|
font-family: sans-serif;
|
||||||
|
font-size: 1em;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
border: 0;
|
||||||
|
}
|
||||||
|
input {
|
||||||
|
color: inherit;
|
||||||
|
line-height: 1.5;
|
||||||
|
height: 1.5em;
|
||||||
|
padding: .25em 0;
|
||||||
|
}
|
||||||
|
input:focus {
|
||||||
|
outline: none;
|
||||||
|
box-shadow: inset 0 -2px #449fdb;
|
||||||
|
}
|
||||||
|
.glyph {
|
||||||
|
font-size: 16px;
|
||||||
|
width: 15em;
|
||||||
|
padding-bottom: 1em;
|
||||||
|
margin-right: 4em;
|
||||||
|
margin-bottom: 1em;
|
||||||
|
float: left;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
.liga {
|
||||||
|
width: 80%;
|
||||||
|
width: calc(100% - 2.5em);
|
||||||
|
}
|
||||||
|
.talign-right {
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
.talign-center {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.bgc1 {
|
||||||
|
background: #f1f1f1;
|
||||||
|
}
|
||||||
|
.fgc1 {
|
||||||
|
color: #999;
|
||||||
|
}
|
||||||
|
.fgc0 {
|
||||||
|
color: #000;
|
||||||
|
}
|
||||||
|
p {
|
||||||
|
margin-top: 1em;
|
||||||
|
margin-bottom: 1em;
|
||||||
|
}
|
||||||
|
.mvm {
|
||||||
|
margin-top: .75em;
|
||||||
|
margin-bottom: .75em;
|
||||||
|
}
|
||||||
|
.mtn {
|
||||||
|
margin-top: 0;
|
||||||
|
}
|
||||||
|
.mtl, .mal {
|
||||||
|
margin-top: 1.5em;
|
||||||
|
}
|
||||||
|
.mbl, .mal {
|
||||||
|
margin-bottom: 1.5em;
|
||||||
|
}
|
||||||
|
.mal, .mhl {
|
||||||
|
margin-left: 1.5em;
|
||||||
|
margin-right: 1.5em;
|
||||||
|
}
|
||||||
|
.mhmm {
|
||||||
|
margin-left: 1em;
|
||||||
|
margin-right: 1em;
|
||||||
|
}
|
||||||
|
.mls {
|
||||||
|
margin-left: .25em;
|
||||||
|
}
|
||||||
|
.ptl {
|
||||||
|
padding-top: 1.5em;
|
||||||
|
}
|
||||||
|
.pbs, .pvs {
|
||||||
|
padding-bottom: .25em;
|
||||||
|
}
|
||||||
|
.pvs, .pts {
|
||||||
|
padding-top: .25em;
|
||||||
|
}
|
||||||
|
.unit {
|
||||||
|
float: left;
|
||||||
|
}
|
||||||
|
.unitRight {
|
||||||
|
float: right;
|
||||||
|
}
|
||||||
|
.size1of2 {
|
||||||
|
width: 50%;
|
||||||
|
}
|
||||||
|
.size1of1 {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
.clearfix:before, .clearfix:after {
|
||||||
|
content: " ";
|
||||||
|
display: table;
|
||||||
|
}
|
||||||
|
.clearfix:after {
|
||||||
|
clear: both;
|
||||||
|
}
|
||||||
|
.hidden-true {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.textbox0 {
|
||||||
|
width: 3em;
|
||||||
|
background: #f1f1f1;
|
||||||
|
padding: .25em .5em;
|
||||||
|
line-height: 1.5;
|
||||||
|
height: 1.5em;
|
||||||
|
}
|
||||||
|
#testDrive {
|
||||||
|
display: block;
|
||||||
|
padding-top: 24px;
|
||||||
|
line-height: 1.5;
|
||||||
|
}
|
||||||
|
.fs0 {
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
.fs1 {
|
||||||
|
font-size: 32px;
|
||||||
|
}
|
||||||
|
.fs2 {
|
||||||
|
font-size: 32px;
|
||||||
|
}
|
||||||
|
|
||||||
30
mockup/bs4/fonticons/demo-files/demo.js
Normal file
30
mockup/bs4/fonticons/demo-files/demo.js
Normal file
@ -0,0 +1,30 @@
|
|||||||
|
if (!('boxShadow' in document.body.style)) {
|
||||||
|
document.body.setAttribute('class', 'noBoxShadow');
|
||||||
|
}
|
||||||
|
|
||||||
|
document.body.addEventListener("click", function(e) {
|
||||||
|
var target = e.target;
|
||||||
|
if (target.tagName === "INPUT" &&
|
||||||
|
target.getAttribute('class').indexOf('liga') === -1) {
|
||||||
|
target.select();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
(function() {
|
||||||
|
var fontSize = document.getElementById('fontSize'),
|
||||||
|
testDrive = document.getElementById('testDrive'),
|
||||||
|
testText = document.getElementById('testText');
|
||||||
|
function updateTest() {
|
||||||
|
testDrive.innerHTML = testText.value || String.fromCharCode(160);
|
||||||
|
if (window.icomoonLiga) {
|
||||||
|
window.icomoonLiga(testDrive);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
function updateSize() {
|
||||||
|
testDrive.style.fontSize = fontSize.value + 'px';
|
||||||
|
}
|
||||||
|
fontSize.addEventListener('change', updateSize, false);
|
||||||
|
testText.addEventListener('input', updateTest, false);
|
||||||
|
testText.addEventListener('change', updateTest, false);
|
||||||
|
updateSize();
|
||||||
|
}());
|
||||||
1385
mockup/bs4/fonticons/demo.html
Normal file
1385
mockup/bs4/fonticons/demo.html
Normal file
File diff suppressed because it is too large
Load Diff
BIN
mockup/bs4/fonticons/fonts/icomoon.eot
Normal file
BIN
mockup/bs4/fonticons/fonts/icomoon.eot
Normal file
Binary file not shown.
94
mockup/bs4/fonticons/fonts/icomoon.svg
Normal file
94
mockup/bs4/fonticons/fonts/icomoon.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 63 KiB |
BIN
mockup/bs4/fonticons/fonts/icomoon.ttf
Normal file
BIN
mockup/bs4/fonticons/fonts/icomoon.ttf
Normal file
Binary file not shown.
BIN
mockup/bs4/fonticons/fonts/icomoon.woff
Normal file
BIN
mockup/bs4/fonticons/fonts/icomoon.woff
Normal file
Binary file not shown.
2562
mockup/bs4/fonticons/selection.json
Normal file
2562
mockup/bs4/fonticons/selection.json
Normal file
File diff suppressed because one or more lines are too long
278
mockup/bs4/fonticons/style.css
Normal file
278
mockup/bs4/fonticons/style.css
Normal file
@ -0,0 +1,278 @@
|
|||||||
|
@font-face {
|
||||||
|
font-family: 'icomoon';
|
||||||
|
src: url('fonts/icomoon.eot?uikzla');
|
||||||
|
src: url('fonts/icomoon.eot?uikzla#iefix') format('embedded-opentype'),
|
||||||
|
url('fonts/icomoon.ttf?uikzla') format('truetype'),
|
||||||
|
url('fonts/icomoon.woff?uikzla') format('woff'),
|
||||||
|
url('fonts/icomoon.svg?uikzla#icomoon') format('svg');
|
||||||
|
font-weight: normal;
|
||||||
|
font-style: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
[class^="icon-"], [class*=" icon-"] {
|
||||||
|
/* use !important to prevent issues with browser extensions that change fonts */
|
||||||
|
font-family: 'icomoon' !important;
|
||||||
|
speak: none;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: normal;
|
||||||
|
font-variant: normal;
|
||||||
|
text-transform: none;
|
||||||
|
line-height: 1;
|
||||||
|
|
||||||
|
/* Better Font Rendering =========== */
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
-moz-osx-font-smoothing: grayscale;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-save:before {
|
||||||
|
content: "\f0c7";
|
||||||
|
}
|
||||||
|
.icon-idcard-dark:before {
|
||||||
|
content: "\f2c2";
|
||||||
|
}
|
||||||
|
.icon-idcard:before {
|
||||||
|
content: "\f2c3";
|
||||||
|
}
|
||||||
|
.icon-snowflake:before {
|
||||||
|
content: "\f2dc";
|
||||||
|
}
|
||||||
|
.icon-globe:before {
|
||||||
|
content: "\f0ac";
|
||||||
|
}
|
||||||
|
.icon-legal:before {
|
||||||
|
content: "\f0e3";
|
||||||
|
}
|
||||||
|
.icon-group:before {
|
||||||
|
content: "\f0c0";
|
||||||
|
}
|
||||||
|
.icon-database:before {
|
||||||
|
content: "\f1c0";
|
||||||
|
}
|
||||||
|
.icon-xa:before {
|
||||||
|
content: "\e602";
|
||||||
|
}
|
||||||
|
.icon-conversejs:before {
|
||||||
|
content: "\e600";
|
||||||
|
}
|
||||||
|
.icon-closed:before {
|
||||||
|
content: "\25ba";
|
||||||
|
}
|
||||||
|
.icon-opened:before {
|
||||||
|
content: "\25bc";
|
||||||
|
}
|
||||||
|
.icon-checkmark:before {
|
||||||
|
content: "\2713";
|
||||||
|
}
|
||||||
|
.icon-home:before {
|
||||||
|
content: "\e000";
|
||||||
|
}
|
||||||
|
.icon-pencil:before {
|
||||||
|
content: "\270e";
|
||||||
|
}
|
||||||
|
.icon-music:before {
|
||||||
|
content: "\266b";
|
||||||
|
}
|
||||||
|
.icon-phone:before {
|
||||||
|
content: "\260f";
|
||||||
|
}
|
||||||
|
.icon-phone-hang-up:before {
|
||||||
|
content: "\260e";
|
||||||
|
}
|
||||||
|
.icon-address-book:before {
|
||||||
|
content: "\270f";
|
||||||
|
}
|
||||||
|
.icon-notebook:before {
|
||||||
|
content: "\2710";
|
||||||
|
}
|
||||||
|
.icon-pushpin:before {
|
||||||
|
content: "\e012";
|
||||||
|
}
|
||||||
|
.icon-online:before {
|
||||||
|
content: "\25fc";
|
||||||
|
}
|
||||||
|
.icon-away:before {
|
||||||
|
content: "\25fb";
|
||||||
|
}
|
||||||
|
.icon-bubbles:before {
|
||||||
|
content: "\e015";
|
||||||
|
}
|
||||||
|
.icon-bubbles2:before {
|
||||||
|
content: "\e016";
|
||||||
|
}
|
||||||
|
.icon-bubbles3:before {
|
||||||
|
content: "\e017";
|
||||||
|
}
|
||||||
|
.icon-user:before {
|
||||||
|
content: "\e01a";
|
||||||
|
}
|
||||||
|
.icon-hide-users:before {
|
||||||
|
content: "\e01c";
|
||||||
|
}
|
||||||
|
.icon-show-users:before {
|
||||||
|
content: "\e01e";
|
||||||
|
}
|
||||||
|
.icon-users:before {
|
||||||
|
content: "\e01b";
|
||||||
|
}
|
||||||
|
.icon-quotes-left:before {
|
||||||
|
content: "\e01d";
|
||||||
|
}
|
||||||
|
.icon-spinner:before {
|
||||||
|
content: "\231b";
|
||||||
|
}
|
||||||
|
.icon-search:before {
|
||||||
|
content: "\e021";
|
||||||
|
}
|
||||||
|
.icon-cogs:before {
|
||||||
|
content: "\e022";
|
||||||
|
}
|
||||||
|
.icon-wrench:before {
|
||||||
|
content: "\e024";
|
||||||
|
}
|
||||||
|
.icon-unlocked:before {
|
||||||
|
content: "\e025";
|
||||||
|
}
|
||||||
|
.icon-lock-2:before {
|
||||||
|
content: "\e027";
|
||||||
|
}
|
||||||
|
.icon-key:before {
|
||||||
|
content: "\e028";
|
||||||
|
}
|
||||||
|
.icon-zoomout:before {
|
||||||
|
content: "\e02a";
|
||||||
|
}
|
||||||
|
.icon-zoomin:before {
|
||||||
|
content: "\e02b";
|
||||||
|
}
|
||||||
|
.icon-cog:before {
|
||||||
|
content: "\e02f";
|
||||||
|
}
|
||||||
|
.icon-remove:before {
|
||||||
|
content: "\e02d";
|
||||||
|
}
|
||||||
|
.icon-eye:before {
|
||||||
|
content: "\e030";
|
||||||
|
}
|
||||||
|
.icon-eye-blocked:before {
|
||||||
|
content: "\e031";
|
||||||
|
}
|
||||||
|
.icon-attachment:before {
|
||||||
|
content: "\e032";
|
||||||
|
}
|
||||||
|
.icon-heart:before {
|
||||||
|
content: "\2764";
|
||||||
|
}
|
||||||
|
.icon-happy:before {
|
||||||
|
content: "\263b";
|
||||||
|
}
|
||||||
|
.icon-thumbs-up:before {
|
||||||
|
content: "\261d";
|
||||||
|
}
|
||||||
|
.icon-smiley:before {
|
||||||
|
content: "\263a";
|
||||||
|
}
|
||||||
|
.icon-tongue:before {
|
||||||
|
content: "\e038";
|
||||||
|
}
|
||||||
|
.icon-sad:before {
|
||||||
|
content: "\2639";
|
||||||
|
}
|
||||||
|
.icon-wink:before {
|
||||||
|
content: "\e03a";
|
||||||
|
}
|
||||||
|
.icon-wondering:before {
|
||||||
|
content: "\2369";
|
||||||
|
}
|
||||||
|
.icon-confused:before {
|
||||||
|
content: "\2368";
|
||||||
|
}
|
||||||
|
.icon-shocked:before {
|
||||||
|
content: "\2364";
|
||||||
|
}
|
||||||
|
.icon-evil:before {
|
||||||
|
content: "\261f";
|
||||||
|
}
|
||||||
|
.icon-angry:before {
|
||||||
|
content: "\e03f";
|
||||||
|
}
|
||||||
|
.icon-cool:before {
|
||||||
|
content: "\e040";
|
||||||
|
}
|
||||||
|
.icon-grin:before {
|
||||||
|
content: "\e041";
|
||||||
|
}
|
||||||
|
.icon-info:before {
|
||||||
|
content: "\2360";
|
||||||
|
}
|
||||||
|
.icon-notification:before {
|
||||||
|
content: "\e01f";
|
||||||
|
}
|
||||||
|
.icon-warning:before {
|
||||||
|
content: "\26a0";
|
||||||
|
}
|
||||||
|
.icon-spell-check:before {
|
||||||
|
content: "\e045";
|
||||||
|
}
|
||||||
|
.icon-bold:before {
|
||||||
|
content: "\e04d";
|
||||||
|
}
|
||||||
|
.icon-underline:before {
|
||||||
|
content: "\e04e";
|
||||||
|
}
|
||||||
|
.icon-italic:before {
|
||||||
|
content: "\e04f";
|
||||||
|
}
|
||||||
|
.icon-strikethrough:before {
|
||||||
|
content: "\e050";
|
||||||
|
}
|
||||||
|
.icon-newtab:before {
|
||||||
|
content: "\e053";
|
||||||
|
}
|
||||||
|
.icon-close:before {
|
||||||
|
content: "\2715";
|
||||||
|
}
|
||||||
|
.icon-blocked:before {
|
||||||
|
content: "\2718";
|
||||||
|
}
|
||||||
|
.icon-cancel-circle:before {
|
||||||
|
content: "\e058";
|
||||||
|
}
|
||||||
|
.icon-minus:before {
|
||||||
|
content: "\e05a";
|
||||||
|
}
|
||||||
|
.icon-plus:before {
|
||||||
|
content: "\271a";
|
||||||
|
}
|
||||||
|
.icon-checkbox-checked:before {
|
||||||
|
content: "\2611";
|
||||||
|
}
|
||||||
|
.icon-checkbox-unchecked:before {
|
||||||
|
content: "\2b27";
|
||||||
|
}
|
||||||
|
.icon-checkbox-partial:before {
|
||||||
|
content: "\2b28";
|
||||||
|
}
|
||||||
|
.icon-radio-checked:before {
|
||||||
|
content: "\2b26";
|
||||||
|
}
|
||||||
|
.icon-radio-unchecked:before {
|
||||||
|
content: "\2b25";
|
||||||
|
}
|
||||||
|
.icon-room-info:before {
|
||||||
|
content: "\e059";
|
||||||
|
}
|
||||||
|
.icon-newspaper:before {
|
||||||
|
content: "\e001";
|
||||||
|
}
|
||||||
|
.icon-image:before {
|
||||||
|
content: "\2b14";
|
||||||
|
}
|
||||||
|
.icon-offline:before {
|
||||||
|
content: "\e002";
|
||||||
|
}
|
||||||
|
.icon-busy:before {
|
||||||
|
content: "\e004";
|
||||||
|
}
|
||||||
|
.icon-exit:before {
|
||||||
|
content: "\e601";
|
||||||
|
}
|
||||||
BIN
mockup/bs4/fonts/FontAwesome.otf
Normal file
BIN
mockup/bs4/fonts/FontAwesome.otf
Normal file
Binary file not shown.
BIN
mockup/bs4/fonts/fontawesome-webfont.eot
Normal file
BIN
mockup/bs4/fonts/fontawesome-webfont.eot
Normal file
Binary file not shown.
2671
mockup/bs4/fonts/fontawesome-webfont.svg
Normal file
2671
mockup/bs4/fonts/fontawesome-webfont.svg
Normal file
File diff suppressed because it is too large
Load Diff
|
After Width: | Height: | Size: 434 KiB |
BIN
mockup/bs4/fonts/fontawesome-webfont.ttf
Normal file
BIN
mockup/bs4/fonts/fontawesome-webfont.ttf
Normal file
Binary file not shown.
BIN
mockup/bs4/fonts/fontawesome-webfont.woff
Normal file
BIN
mockup/bs4/fonts/fontawesome-webfont.woff
Normal file
Binary file not shown.
BIN
mockup/bs4/fonts/fontawesome-webfont.woff2
Normal file
BIN
mockup/bs4/fonts/fontawesome-webfont.woff2
Normal file
Binary file not shown.
17
mockup/bs4/head.html
Normal file
17
mockup/bs4/head.html
Normal file
@ -0,0 +1,17 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<html class="no-js" lang="en">
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<title>inVerse Mockups</title>
|
||||||
|
<link type="text/css" rel="stylesheet" media="screen" href="css/bootstrap.min.css" />
|
||||||
|
<link type="text/css" rel="stylesheet" media="screen" href="css/font-awesome.min.css" />
|
||||||
|
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
|
||||||
|
crossorigin="anonymous"></script>
|
||||||
|
<script src="js/bootstrap.bundle.min.js"></script>
|
||||||
|
<script>
|
||||||
|
$(function () {
|
||||||
|
$('[data-toggle="popover"]').popover()
|
||||||
|
});
|
||||||
|
</script>
|
||||||
11
mockup/bs4/index.html
Normal file
11
mockup/bs4/index.html
Normal file
@ -0,0 +1,11 @@
|
|||||||
|
<html>
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<title>inVerse Mockups</title>
|
||||||
|
<meta http-equiv="refresh" content="0; URL=login.php">
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
7
mockup/bs4/js/bootstrap.bundle.min.js
vendored
Normal file
7
mockup/bs4/js/bootstrap.bundle.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
276
mockup/bs4/less/mockup.less
Normal file
276
mockup/bs4/less/mockup.less
Normal file
@ -0,0 +1,276 @@
|
|||||||
|
// overrides for the base css of converse/inverse
|
||||||
|
|
||||||
|
@text-color: #212529;
|
||||||
|
@link-color: #007bff;
|
||||||
|
@hover-color: #0056b3;
|
||||||
|
@bg-color: #578ea9;
|
||||||
|
@primary-bg-color: #007bff;
|
||||||
|
@primary-text-color: #fff;
|
||||||
|
|
||||||
|
|
||||||
|
body {
|
||||||
|
height:100vh; background-color:@bg-color; color:@text-color;
|
||||||
|
.brand-heading {
|
||||||
|
margin:auto; font-size:6em; font-weight:bold;
|
||||||
|
.icon-conversejs { font-size:0.88em; }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.converse-bg {
|
||||||
|
position:relative; height:100vh; text-align:center; color:#fff;
|
||||||
|
.brand-heading { position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); }
|
||||||
|
}
|
||||||
|
|
||||||
|
.xmpp-status, .xmpp-status-menu {
|
||||||
|
.online { color:#28a745; }
|
||||||
|
.dnd { color:#dc3545; }
|
||||||
|
.away { color:#17a2b8; }
|
||||||
|
.logout, .offline { color:#868e96; }
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
#mockups {
|
||||||
|
position:fixed; bottom:0; left:50%; padding:7px; z-index:2000;
|
||||||
|
background-color:@bg-color; transform:translate(-50%, 0%);
|
||||||
|
a {
|
||||||
|
width:30px; padding:4px; background:#aaa; border:1px solid #000;
|
||||||
|
color:#000; font-size:0.9em;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
#conversejs {
|
||||||
|
margin:10px 0 0;
|
||||||
|
p { margin-bottom:1rem; }
|
||||||
|
a, a:visited { color:@link-color; }
|
||||||
|
a:hover { color:@hover-color; }
|
||||||
|
canvas { background:#000; border-radius:4px; margin:2px 0; }
|
||||||
|
form.pure-form.converse-form {
|
||||||
|
input[type=button], input[type=submit] { margin-right:0; }
|
||||||
|
}
|
||||||
|
|
||||||
|
.badge { padding:0.25em 0.4em; line-height:1; font-weight:700; font-size:0.9em; }
|
||||||
|
.btn.btn-primary { color:@primary-text-color; }
|
||||||
|
.chat-head .avatar { border-radius:5px; }
|
||||||
|
|
||||||
|
.fa {
|
||||||
|
font:normal normal normal 14px/1 FontAwesome;
|
||||||
|
display:inline-block; font-size:inherit; text-rendering:auto;
|
||||||
|
-webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
|
||||||
|
}
|
||||||
|
|
||||||
|
#controlbox {
|
||||||
|
margin-right:0.5em;
|
||||||
|
.controlbox-pane { height:100%; border-radius:5px; }
|
||||||
|
.controlbox-pane label { margin:8px; }
|
||||||
|
#login-dialog {
|
||||||
|
.brand-heading { margin-top:3.5%; font-size:2.5em; color:@bg-color; }
|
||||||
|
}
|
||||||
|
#chatrooms .rooms-list-container { margin:10px 0; }
|
||||||
|
}
|
||||||
|
|
||||||
|
#converse-roster {
|
||||||
|
height:calc(~"100% - 70px"); margin-top:0; padding-bottom:15px; overflow:auto;
|
||||||
|
border-bottom:1px solid #777;
|
||||||
|
.roster-filter-form {
|
||||||
|
margin:5px 0 0;
|
||||||
|
input { width:56%; margin-right:5px; }
|
||||||
|
span { margin:0; padding:0.2em; color:#888; cursor:pointer; }
|
||||||
|
span.fa-user { color:#000; }
|
||||||
|
.form-group { margin-bottom:0.5rem; }
|
||||||
|
}
|
||||||
|
.roster-contacts {
|
||||||
|
height:auto; font-size:0.875rem; overflow:hidden;
|
||||||
|
dd {
|
||||||
|
height:28px;
|
||||||
|
a { text-overflow:initial; overflow:visible; }
|
||||||
|
a.remove-xmpp-contact { font-size:0.95em; }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
#minimized-chats .badge { position:absolute; right:122px; bottom:8px; border:1px solid #111; }
|
||||||
|
|
||||||
|
&.fullscreen {
|
||||||
|
width:100%; height:100%; right:0; bottom:0; color:@text-color;
|
||||||
|
&.login {
|
||||||
|
width:calc(~"100vw - 20px"); height:calc(~"100vh - 20px");
|
||||||
|
#controlbox #login-dialog {
|
||||||
|
height:100%; border-radius:5px;
|
||||||
|
.brand-heading { font-size:6em; }
|
||||||
|
.converse-form { margin:0; padding:3em 2em 3em; }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&.chatbox {
|
||||||
|
margin:0;
|
||||||
|
.chatbox { width:100%; }
|
||||||
|
.chatbox .box-flyout { width:100%; height:100vh; }
|
||||||
|
}
|
||||||
|
#controlbox {
|
||||||
|
width:100%; margin-right:0;
|
||||||
|
.box-flyout { width:100%; }
|
||||||
|
.controlbox-pane { height:100vh; border-radius:0; }
|
||||||
|
}
|
||||||
|
.chatroom .box-flyout .chatroom-body .chat-area { height:calc(~"100vh - 95px"); }
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar {
|
||||||
|
display:none; position:absolute; width:50px; height:100vh; padding:10px 0;
|
||||||
|
background-color:@bg-color; text-align:center;
|
||||||
|
.chatbox-btn {
|
||||||
|
float:none; margin:0; font-size:1.35em;
|
||||||
|
&.fa-vcard { margin-top:30px; }
|
||||||
|
}
|
||||||
|
.bottom { position:absolute; bottom:10px; }
|
||||||
|
}
|
||||||
|
|
||||||
|
.chatbox {
|
||||||
|
.chat-content { padding:0.5em; }
|
||||||
|
.chat-body {
|
||||||
|
background:#fff;
|
||||||
|
.chat-message {
|
||||||
|
margin:0.3em;
|
||||||
|
canvas { vertical-align:middle; background:#777; }
|
||||||
|
.chat-msg-me canvas { background:@bg-color; }
|
||||||
|
.chat-msg-them canvas { background:#e77051; }
|
||||||
|
.chat-msg-author { float:none; }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
form.sendXMPPMessage {
|
||||||
|
textarea { resize:none; border:none; border-top-left-radius:0; border-top-right-radius:0; }
|
||||||
|
.chat-toolbar {
|
||||||
|
a, li.toggle-toolbar-menu { color:@text-color; }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.chatroom .box-flyout .chatroom-body {
|
||||||
|
.chat-area {
|
||||||
|
min-width:100%; height:395px;
|
||||||
|
.chat-content { padding:0.5em; }
|
||||||
|
}
|
||||||
|
.chat-info { color:#fff; line-height:normal; }
|
||||||
|
.occupants {
|
||||||
|
.chatroom-features { bottom:0; width:auto; }
|
||||||
|
ul li.feature { float:left; margin-right:0.5em; padding-right:0; font-size:1em; cursor:help; }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
#users {
|
||||||
|
position:relative;
|
||||||
|
#chatrooms {
|
||||||
|
padding-bottom:5px; border-bottom:1px solid #aaa;
|
||||||
|
.rooms-list-container dl.rooms-list {
|
||||||
|
.available-chatroom, .open-chatroom { padding:0.1em 0; }
|
||||||
|
a + a { line-height:22px; }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
#chatrooms, #contacts { margin-top:0.75em; }
|
||||||
|
.userinfo {
|
||||||
|
padding-bottom:10px; border-bottom:1px solid #aaa;
|
||||||
|
.username { margin-left:5px; }
|
||||||
|
.d-flex { margin-bottom:2px; }
|
||||||
|
}
|
||||||
|
&.controlbox-pane { height:450px; text-align:left; }
|
||||||
|
.chatbox-btn { margin:0; color:@link-color; }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
@media screen and (max-width: 575px) {
|
||||||
|
body {
|
||||||
|
.brand-heading { font-size:3.75em; }
|
||||||
|
}
|
||||||
|
|
||||||
|
#conversejs {
|
||||||
|
&.fullscreen.login, & {
|
||||||
|
#controlbox #login-dialog .brand-heading { font-size:3.75em; }
|
||||||
|
}
|
||||||
|
.chatbox .chat-body { border-radius:7px; }
|
||||||
|
.flyout { border-radius:4px; }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: 767px) {
|
||||||
|
#conversejs {
|
||||||
|
left:0; margin:0;
|
||||||
|
&.fullscreen {
|
||||||
|
&.chatbox {
|
||||||
|
> .chatbox, .chatroom { width:calc(~"100% - 50px"); }
|
||||||
|
&.sidebar-open {
|
||||||
|
#controlbox #users { display:block; }
|
||||||
|
> .chatbox:not(#controlbox), .chatroom { display:none; }
|
||||||
|
}
|
||||||
|
.chatbox .box-flyout { left:0; }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&.login {
|
||||||
|
margin:10px;
|
||||||
|
#controlbox {
|
||||||
|
margin:0;
|
||||||
|
.controlbox-pane { font-size:1.15em; }
|
||||||
|
&.chatbox { width:100%; }
|
||||||
|
}
|
||||||
|
.chatbox .box-flyout { height:calc(~"100vh - 20px"); width:100%; bottom:0; left:0; }
|
||||||
|
}
|
||||||
|
&.sidebar-open {
|
||||||
|
#controlbox #users { display:block; }
|
||||||
|
> .chatbox:not(#controlbox) { display:none; }
|
||||||
|
}
|
||||||
|
|
||||||
|
#controlbox {
|
||||||
|
#users {
|
||||||
|
position:absolute; top:0; left:50px; display:none;
|
||||||
|
width:calc(~"100% - 50px");
|
||||||
|
}
|
||||||
|
.box-flyout { width:100%; left:0; }
|
||||||
|
.sidebar { display:block; }
|
||||||
|
}
|
||||||
|
|
||||||
|
#users.controlbox-pane { height:100vh; }
|
||||||
|
#login-dialog .pure-form.converse-form { padding:3em 2em 3em; }
|
||||||
|
> .chatbox { width:calc(~"100% - 50px"); }
|
||||||
|
.chatbox .chat-body .chat-message .chat-msg-author { white-space:normal; }
|
||||||
|
.chatbox .box-flyout {
|
||||||
|
left:50px; bottom:0; width:calc(~"100% - 50px"); height:100vh; box-shadow:none;
|
||||||
|
.chatroom-body .chat-area { height:calc(~"100vh - 55px"); }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (min-width: 576px) {
|
||||||
|
#conversejs {
|
||||||
|
.offset-sm-2 { margin-left: 16.666667%; }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (min-width: 768px) {
|
||||||
|
#conversejs {
|
||||||
|
.offset-md-2 { margin-left: 16.666667%; }
|
||||||
|
.offset-md-3 { margin-left: 25%; }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (min-width: 992px) {
|
||||||
|
#conversejs {
|
||||||
|
.offset-lg-2 { margin-left: 16.666667%; }
|
||||||
|
.offset-lg-3 { margin-left: 25%; }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (min-width: 1200px) {
|
||||||
|
#conversejs {
|
||||||
|
.offset-xl-2 { margin-left: 16.666667%; }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-height: 450px) {
|
||||||
|
#conversejs { left:0; }
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: 480px) {
|
||||||
|
#conversejs { width:auto; }
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
76
mockup/bs4/login-c.php
Normal file
76
mockup/bs4/login-c.php
Normal file
@ -0,0 +1,76 @@
|
|||||||
|
<?php include('head.html'); ?>
|
||||||
|
<link type="text/css" rel="stylesheet" media="screen" href="https://cdn.conversejs.org/3.2.1/css/converse.min.css" />
|
||||||
|
<link type="text/css" rel="stylesheet" media="screen" href="css/mockup.css" />
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<?php include('menu.html'); ?>
|
||||||
|
<div class="container converse-bg">
|
||||||
|
<h1 class="brand-heading"><i class="icon-conversejs"></i> inVerse</h1>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="conversejs" class="login">
|
||||||
|
<div id="controlbox" class="chatbox">
|
||||||
|
<div class="flyout box-flyout">
|
||||||
|
<div class="controlbox-panes">
|
||||||
|
<div id="login-dialog" class="controlbox-pane">
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-12">
|
||||||
|
<h1 class="brand-heading">
|
||||||
|
<i class="icon-conversejs"></i> inVerse</h1>
|
||||||
|
<p>
|
||||||
|
<a href="https://conversejs.org">Open Source</a><br />XMPP chat client</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="col-12">
|
||||||
|
<form class="pure-form converse-form">
|
||||||
|
<div class="form-group">
|
||||||
|
<label for="jid">XMPP Username:</label>
|
||||||
|
<input type="text" name="jid" class="form-control" placeholder="user@server" autocomplete="off">
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<label for="password">Password:</label>
|
||||||
|
<input type="password" name="password" class="form-control" placeholder="password" autocomplete="off">
|
||||||
|
</div>
|
||||||
|
<p></p>
|
||||||
|
<p><input class="btn btn-primary" type="submit" value="Log In"></p>
|
||||||
|
<p>Click <a href="#" data-toggle="modal" data-target="#registerModal">here</a> to register.</p>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Register Modal -->
|
||||||
|
<div class="modal fade" id="registerModal" tabindex="-1" role="dialog" aria-labelledby="registerModalLabel" aria-hidden="true">
|
||||||
|
<div class="modal-dialog" role="document">
|
||||||
|
<div class="modal-content">
|
||||||
|
<div class="modal-header">
|
||||||
|
<h5 class="modal-title" id="registerModalLabel">Register</h5>
|
||||||
|
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
||||||
|
<span aria-hidden="true">×</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div class="modal-body">
|
||||||
|
<form id="converse-register">
|
||||||
|
<div class="form-group">
|
||||||
|
<label for="domain">Your XMPP provider's domain name:</label>
|
||||||
|
<input type="text" name="domain" class="form-control" placeholder=" e.g. conversejs.org">
|
||||||
|
</div>
|
||||||
|
<p>Tip: A list of public XMPP providers is available
|
||||||
|
<a href="https://xmpp.net/directory.php" class="url" target="_blank" rel="noopener">here</a>.</p>
|
||||||
|
<input class="btn btn-primary" type="submit" value="Fetch registration form">
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
<div class="modal-footer">
|
||||||
|
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
80
mockup/bs4/login.php
Normal file
80
mockup/bs4/login.php
Normal file
@ -0,0 +1,80 @@
|
|||||||
|
<?php include('head.html'); ?>
|
||||||
|
<link type="text/css" rel="stylesheet" media="screen" href="https://cdn.conversejs.org/3.2.1/css/inverse.min.css" />
|
||||||
|
<link type="text/css" rel="stylesheet" media="screen" href="css/mockup.css" />
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<?php include('menu.html'); ?>
|
||||||
|
<div class="container converse-bg">
|
||||||
|
<h1 class="brand-heading"><i class="icon-conversejs"></i> inVerse</h1>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="container-fluid">
|
||||||
|
<div id="conversejs" class="fullscreen login">
|
||||||
|
<div id="controlbox" class="chatbox">
|
||||||
|
<div class="flyout box-flyout">
|
||||||
|
<div class="controlbox-panes">
|
||||||
|
<div id="login-dialog" class="controlbox-pane">
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-12">
|
||||||
|
<h1 class="brand-heading">
|
||||||
|
<i class="icon-conversejs"></i> inVerse</h1>
|
||||||
|
<p>
|
||||||
|
<a href="https://conversejs.org">Open Source</a> XMPP chat client</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-sm-8 offset-sm-2 col-md-8 offset-md-2 col-lg-6 offset-lg-3">
|
||||||
|
<form class="pure-form converse-form">
|
||||||
|
<div class="form-group">
|
||||||
|
<label for="jid">XMPP Username:</label>
|
||||||
|
<input type="text" name="jid" class="form-control" placeholder="user@server" autocomplete="off">
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<label for="password">Password:</label>
|
||||||
|
<input type="password" name="password" class="form-control" placeholder="password" autocomplete="off">
|
||||||
|
</div>
|
||||||
|
<p></p>
|
||||||
|
<p><input class="btn btn-primary" type="submit" value="Log In"></p>
|
||||||
|
<p>Click <a href="#" data-toggle="modal" data-target="#registerModal">here</a> to register.</p>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Register Modal -->
|
||||||
|
<div class="modal fade" id="registerModal" tabindex="-1" role="dialog" aria-labelledby="registerModalLabel" aria-hidden="true">
|
||||||
|
<div class="modal-dialog" role="document">
|
||||||
|
<div class="modal-content">
|
||||||
|
<div class="modal-header">
|
||||||
|
<h5 class="modal-title" id="registerModalLabel">Register</h5>
|
||||||
|
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
||||||
|
<span aria-hidden="true">×</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div class="modal-body">
|
||||||
|
<form id="converse-register">
|
||||||
|
<div class="form-group">
|
||||||
|
<label for="domain">Your XMPP provider's domain name:</label>
|
||||||
|
<input type="text" name="domain" class="form-control" placeholder=" e.g. conversejs.org">
|
||||||
|
</div>
|
||||||
|
<p>Tip: A list of public XMPP providers is available
|
||||||
|
<a href="https://xmpp.net/directory.php" class="url" target="_blank" rel="noopener">here</a>.</p>
|
||||||
|
<input class="btn btn-primary" type="submit" value="Fetch registration form">
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
<div class="modal-footer">
|
||||||
|
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
7
mockup/bs4/menu.html
Normal file
7
mockup/bs4/menu.html
Normal file
@ -0,0 +1,7 @@
|
|||||||
|
<div id="mockups">
|
||||||
|
<a href="login.php" class="btn btn-primary">1a</a>
|
||||||
|
<a href="login-c.php" class="btn btn-primary">1b</a>
|
||||||
|
<a href="chatbox.php" class="btn btn-primary">2</a>
|
||||||
|
<a href="chatroom.php" class="btn btn-primary">3</a>
|
||||||
|
<a href="converse.php" class="btn btn-primary">4</a>
|
||||||
|
</div>
|
||||||
142
mockup/bs4/modals.html
Normal file
142
mockup/bs4/modals.html
Normal file
@ -0,0 +1,142 @@
|
|||||||
|
<!-- User Profile Modal -->
|
||||||
|
<div class="modal fade" id="userProfileModal" tabindex="-1" role="dialog" aria-labelledby="userProfileModalLabel" aria-hidden="true">
|
||||||
|
<div class="modal-dialog" role="document">
|
||||||
|
<div class="modal-content">
|
||||||
|
<div class="modal-header">
|
||||||
|
<h5 class="modal-title" id="userProfileModalLabel">Your profile</h5>
|
||||||
|
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
||||||
|
<span aria-hidden="true">×</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div class="modal-body">
|
||||||
|
</div>
|
||||||
|
<div class="modal-footer">
|
||||||
|
<button type="button" class="btn btn-primary">Save changes</button>
|
||||||
|
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Change status Modal -->
|
||||||
|
<div class="modal fade" id="changeStatusModal" tabindex="-1" role="dialog" aria-labelledby="changeStatusModalLabel" aria-hidden="true">
|
||||||
|
<div class="modal-dialog" role="document">
|
||||||
|
<div class="modal-content">
|
||||||
|
<div class="modal-header">
|
||||||
|
<h5 class="modal-title" id="changeStatusModalLabel">Change chat status</h5>
|
||||||
|
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
||||||
|
<span aria-hidden="true">×</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div class="modal-body">
|
||||||
|
<form class="pure-form set-xmpp-status" id="set-xmpp-status">
|
||||||
|
<ul class="xmpp-status-menu">
|
||||||
|
<li>
|
||||||
|
<a href="#" class="online" data-value="online">
|
||||||
|
<span class="fa fa-circle"></span> Online
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="#" class="dnd" data-value="dnd">
|
||||||
|
<span class="fa fa-minus-circle"></span> Busy
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="#" class="away" data-value="away">
|
||||||
|
<span class="fa fa-circle-o"></span> Away
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="#" class="logout" data-value="logout">
|
||||||
|
<span class="fa fa-times-circle"></span> Offline
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<div class="form-group">
|
||||||
|
<input type="text" class="form-control" value="" placeholder="Personal status message">
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
<div class="modal-footer">
|
||||||
|
<button type="button" class="btn btn-primary">Save</button>
|
||||||
|
<button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Add contact Modal -->
|
||||||
|
<div class="modal fade" id="addContactModal" tabindex="-1" role="dialog" aria-labelledby="addContactModalLabel" aria-hidden="true">
|
||||||
|
<div class="modal-dialog" role="document">
|
||||||
|
<div class="modal-content">
|
||||||
|
<div class="modal-header">
|
||||||
|
<h5 class="modal-title" id="addContactModalLabel">Add a contact</h5>
|
||||||
|
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
||||||
|
<span aria-hidden="true">×</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div class="modal-body">
|
||||||
|
<form class="pure-form add-xmpp-contact">
|
||||||
|
<div class="form-group">
|
||||||
|
<input type="text" name="identifier" class="form-control" placeholder="Contact username">
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
<div class="modal-footer">
|
||||||
|
<button type="button" class="btn btn-primary">Add</button>
|
||||||
|
<button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Chatrooms Modal -->
|
||||||
|
<div class="modal fade" id="chatroomsModal" tabindex="-1" role="dialog" aria-labelledby="chatroomsModalLabel" aria-hidden="true">
|
||||||
|
<div class="modal-dialog" role="document">
|
||||||
|
<div class="modal-content">
|
||||||
|
<div class="modal-header">
|
||||||
|
<h5 class="modal-title" id="chatroomsModalLabel">New Chatroom</h5>
|
||||||
|
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
||||||
|
<span aria-hidden="true">×</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div class="modal-body">
|
||||||
|
<form class="pure-form pure-form-stacked converse-form add-chatroom">
|
||||||
|
<div class="form-group">
|
||||||
|
<label for="chatroom">Room name</label>
|
||||||
|
<input type="text" name="chatroom" class="form-control" placeholder="Room name">
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<label for="server">Server</label>
|
||||||
|
<input type="text" name="server" class="form-control" placeholder="Server">
|
||||||
|
</div>
|
||||||
|
<input type="submit" class="btn btn-primary" name="join" value="Join">
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
<div class="modal-footer">
|
||||||
|
<button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Settings Modal -->
|
||||||
|
<div class="modal fade" id="settingsModal" tabindex="-1" role="dialog" aria-labelledby="settingsModalLabel" aria-hidden="true">
|
||||||
|
<div class="modal-dialog" role="document">
|
||||||
|
<div class="modal-content">
|
||||||
|
<div class="modal-header">
|
||||||
|
<h5 class="modal-title" id="settingsModalLabel">Settings</h5>
|
||||||
|
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
||||||
|
<span aria-hidden="true">×</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div class="modal-body">
|
||||||
|
</div>
|
||||||
|
<div class="modal-footer">
|
||||||
|
<button type="button" class="btn btn-primary">Save changes</button>
|
||||||
|
<button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
22
mockup/bs4/sidebar.html
Normal file
22
mockup/bs4/sidebar.html
Normal file
@ -0,0 +1,22 @@
|
|||||||
|
<div class="sidebar">
|
||||||
|
<a class="hamburger chatbox-btn fa fa-bars"></a>
|
||||||
|
<a class="chatbox-btn fa fa-vcard" title="Your profile" data-toggle="modal" data-target="#userProfileModal"></a>
|
||||||
|
<a class="chatbox-btn fa fa-pencil" title="Click to change your chat status" data-toggle="modal" data-target="#changeStatusModal"></a>
|
||||||
|
<div class="bottom">
|
||||||
|
<a class="chatbox-btn fa fa-user-plus" title="Click to add new chat contacts" data-toggle="modal" data-target="#addContactModal"></a>
|
||||||
|
<a class="chatbox-btn fa fa-users" title="Click to change rooms" data-toggle="modal" data-target="#chatroomsModal"></a>
|
||||||
|
<a class="chatbox-btn fa fa-cog" title="Change settings" data-toggle="modal" data-target="#settingsModal"></a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
$('.hamburger').click(function(){
|
||||||
|
if ( $('#conversejs').hasClass('sidebar-open') ) {
|
||||||
|
$('#conversejs').removeClass('sidebar-open');
|
||||||
|
$(this).removeClass('fa-times').addClass('fa-bars');
|
||||||
|
} else {
|
||||||
|
$('#conversejs').addClass('sidebar-open');
|
||||||
|
$(this).removeClass('fa-bars').addClass('fa-times');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
</script>
|
||||||
147
mockup/bs4/user-panel.html
Normal file
147
mockup/bs4/user-panel.html
Normal file
@ -0,0 +1,147 @@
|
|||||||
|
<div id="users" class="controlbox-pane">
|
||||||
|
<div class="userinfo">
|
||||||
|
<div class="d-flex">
|
||||||
|
<canvas height="20" width="20" class="avatar align-self-center"></canvas>
|
||||||
|
<span class="username w-100 align-self-center">Walter White</span>
|
||||||
|
<a class="chatbox-btn fa fa-vcard align-self-center" title="Your profile" data-toggle="modal" data-target="#userProfileModal"></a>
|
||||||
|
<a class="chatbox-btn fa fa-cog align-self-center" title="Change settings" data-toggle="modal" data-target="#settingsModal"></a>
|
||||||
|
</div>
|
||||||
|
<div class="d-flex xmpp-status">
|
||||||
|
<span class="online w-100 align-self-center" data-value="online">
|
||||||
|
<span class="fa fa-circle"></span> Online</span>
|
||||||
|
<a class="chatbox-btn fa fa-pencil" title="Click to change your chat status" data-toggle="modal" data-target="#changeStatusModal"></a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="converse-roster">
|
||||||
|
<div id="chatrooms">
|
||||||
|
<div class="d-flex">
|
||||||
|
<span class="w-100">Chatrooms</span>
|
||||||
|
<a class="chatbox-btn fa fa-users" title="Click to change rooms" data-toggle="modal" data-target="#chatroomsModal"></a>
|
||||||
|
</div>
|
||||||
|
<div class="rooms-list-container">
|
||||||
|
<div class="rooms-list">
|
||||||
|
<div class="available-chatroom d-flex flex-row">
|
||||||
|
<a class="open-room available-room w-100" data-room-jid="public@conference.test.com" title="Click to open this room" href="#">public</a>
|
||||||
|
<a href="#" class="fa fa-info-circle align-self-center" data-container="body" data-toggle="popover" title="Room info"
|
||||||
|
data-html="true" data-content="<b>Room Address (JID): </b><br>public@conference.test.com<br><b>Discussions: </b><br>Public discussions<br><b>Participants: </b>1<br><b>Features: </b><br>Non-anonymous"> </a>
|
||||||
|
<a href="#" class="fa fa-bookmark-o align-self-center" title="Click to bookmark this room"> </a>
|
||||||
|
<a href="#" class="fa fa-times align-self-center" title="Click to leave this room"> </a>
|
||||||
|
</div>
|
||||||
|
<div class="available-chatroom d-flex flex-row">
|
||||||
|
<a class="open-room available-room w-100" data-room-jid="team@conference.test.com" title="Click to open this room" href="#">team</a>
|
||||||
|
<a href="#" class="fa fa-info-circle align-self-center" data-container="body" data-toggle="popover" title="Room info"
|
||||||
|
data-html="true" data-content="<b>Room Address (JID): </b><br>team@conference.test.com<br><b>Discussions: </b><br>Public discussions<br><b>Participants: </b>1<br><b>Features: </b><br>Non-anonymous"> </a>
|
||||||
|
</div>
|
||||||
|
<div class="available-chatroom d-flex flex-row">
|
||||||
|
<a class="open-room available-room w-100" data-room-jid="test@conference.test.com" title="Click to open this room" href="#">test</a>
|
||||||
|
<a href="#" class="fa fa-info-circle align-self-center" data-container="body" data-toggle="popover" title="Room info"
|
||||||
|
data-html="true" data-content="<b>Room Address (JID): </b><br>test@conference.test.com<br><b>Discussions: </b><br>Public discussions<br><b>Participants: </b>1<br><b>Features: </b><br>Non-anonymous"> </a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="contacts">
|
||||||
|
<div class="d-flex">
|
||||||
|
<span class="w-100">Contacts</span>
|
||||||
|
<a class="chatbox-btn fa fa-user-plus" title="Click to add new chat contacts" data-toggle="modal" data-target="#addContactModal"></a>
|
||||||
|
</div>
|
||||||
|
<form class="pure-form roster-filter-form input-button-group">
|
||||||
|
<div class="form-group form-inline">
|
||||||
|
<input value="" class="form-control" placeholder="Filter">
|
||||||
|
<div class="filter-by">
|
||||||
|
<span class="fa fa-user" title="Filter by contacts"></span>
|
||||||
|
<span class="fa fa-users" title="Filter by groups"></span>
|
||||||
|
<span class="fa fa-circle" title="Filter by status"></span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
|
||||||
|
<dl class="roster-contacts" style="display: block;">
|
||||||
|
<dt class="roster-group" style="display: block;">
|
||||||
|
<a href="#" data-group="Colleagues" class="group-toggle" title="Click to hide these contacts">
|
||||||
|
<span class="fa fa-caret-down"></span> Colleagues</a>
|
||||||
|
</dt>
|
||||||
|
<dd class="online current-xmpp-contact d-flex">
|
||||||
|
<a class="open-chat w-100" title="Click to chat with this contact" href="#">
|
||||||
|
<span class="fa fa-circle" title="This contact is online"></span> Victor Matfield</a>
|
||||||
|
<a class="remove-xmpp-contact fa fa-trash align-self-center" title="Click to remove this contact" href="#"></a>
|
||||||
|
</dd>
|
||||||
|
<dd class="away current-xmpp-contact d-flex">
|
||||||
|
<a class="open-chat w-100" title="Click to chat with this contact" href="#">
|
||||||
|
<span class="fa fa-circle-o" title="this contact is away"></span> William Winterbottom</a>
|
||||||
|
<a class="remove-xmpp-contact fa fa-trash align-self-center" title="Click to remove this contact" href="#"></a>
|
||||||
|
</dd>
|
||||||
|
<dd class="dnd current-xmpp-contact d-flex">
|
||||||
|
<a class="open-chat w-100" title="Click to chat with this contact" href="#">
|
||||||
|
<span class="fa fa-minus-circle" title="This contact is busy"></span> Gary Teichmann</a>
|
||||||
|
<a class="remove-xmpp-contact fa fa-trash align-self-center" title="Click to remove this contact" href="#"></a>
|
||||||
|
</dd>
|
||||||
|
<dt class="roster-group" style="display: block;">
|
||||||
|
<a href="#" data-group="Family" class="group-toggle" title="Click to hide these contacts">
|
||||||
|
<span class="fa fa-caret-down"></span> Family</a>
|
||||||
|
</dt>
|
||||||
|
<dd class="away current-xmpp-contact d-flex">
|
||||||
|
<a class="open-chat w-100" title="Click to chat with this contact" href="#">
|
||||||
|
<span class="fa fa-circle-o" title="this contact is away"></span> Allan Donald</a>
|
||||||
|
<a class="remove-xmpp-contact fa fa-trash align-self-center" title="Click to remove this contact" href="#"></a>
|
||||||
|
</dd>
|
||||||
|
<dd class="offline current-xmpp-contact d-flex">
|
||||||
|
<a class="open-chat w-100" title="Click to chat with this contact" href="#">
|
||||||
|
<span class="fa fa-times-circle" title="This contact is offline"></span> Corné Krige</a>
|
||||||
|
<a class="remove-xmpp-contact fa fa-trash align-self-center" title="Click to remove this contact" href="#"></a>
|
||||||
|
</dd>
|
||||||
|
<dt class="roster-group" style="display: block;">
|
||||||
|
<a href="#" data-group="Friends" class="group-toggle" title="Click to hide these contacts">
|
||||||
|
<span class="fa fa-caret-down"></span> Friends</a>
|
||||||
|
</dt>
|
||||||
|
<dd class="online current-xmpp-contact d-flex">
|
||||||
|
<a class="open-chat w-100" title="Click to chat with this contact" href="#">
|
||||||
|
<span class="fa fa-circle" title="This contact is online"></span> John Smit</a>
|
||||||
|
<a class="remove-xmpp-contact fa fa-trash align-self-center" title="Click to remove this contact" href="#"></a>
|
||||||
|
</dd>
|
||||||
|
<dd class="online current-xmpp-contact d-flex">
|
||||||
|
<a class="open-chat w-100" title="Click to chat with this contact" href="#">
|
||||||
|
<span class="fa fa-circle" title="This contact is online"></span> Bakkies Botha</a>
|
||||||
|
<a class="remove-xmpp-contact fa fa-trash align-self-center" title="Click to remove this contact" href="#"></a>
|
||||||
|
</dd>
|
||||||
|
<dt class="roster-group" style="display: block;">
|
||||||
|
<a href="#" class="group-toggle" title="Click to hide these contacts">
|
||||||
|
<span class="fa fa-caret-down"></span> Ungrouped</a>
|
||||||
|
</dt>
|
||||||
|
<dd class="online current-xmpp-contact d-flex">
|
||||||
|
<a class="open-chat w-100" title="Click to chat with this contact" href="#">
|
||||||
|
<span class="fa fa-circle" title="This contact is online"></span> James Small</a>
|
||||||
|
<a class="remove-xmpp-contact fa fa-trash align-self-center" title="Click to remove this contact" href="#"></a>
|
||||||
|
</dd>
|
||||||
|
<dt class="roster-group" id="xmpp-contact-requests" style="display: block;">
|
||||||
|
<a href="#" class="group-toggle" title="Click to hide these contacts">
|
||||||
|
<span class="fa fa-caret-down"></span> Contact Requests</a>
|
||||||
|
</dt>
|
||||||
|
<dd class="offline requesting-xmpp-contact d-flex">
|
||||||
|
<span class="req-contact-name w-100">Bob Skinstad</span>
|
||||||
|
<a class="accept-xmpp-request fa fa-check align-self-center" title="Click here to accept this contact's request" href="#"></a>
|
||||||
|
<a class="decline-xmpp-request fa fa-times align-self-center" title="Click here to decline this contact's request" href="#"></a>
|
||||||
|
</dd>
|
||||||
|
<dd class="offline requesting-xmpp-contact d-flex">
|
||||||
|
<span class="req-contact-name w-100">André Vos</span>
|
||||||
|
<a class="accept-xmpp-request fa fa-check align-self-center" title="Click here to accept this contact's request" href="#"></a>
|
||||||
|
<a class="decline-xmpp-request fa fa-times align-self-center" title="Click here to decline this contact's request" href="#"></a>
|
||||||
|
</dd>
|
||||||
|
<dt class="roster-group" id="pending-xmpp-contacts" style="display: block;">
|
||||||
|
<a href="#" class="group-toggle" title="Click to hide these contacts">
|
||||||
|
<span class="fa fa-caret-down"></span> Pending Contacts</a>
|
||||||
|
</dt>
|
||||||
|
<dd class="offline pending-xmpp-contact d-flex">
|
||||||
|
<span class="pending-contact-name w-100">Rassie Erasmus</span>
|
||||||
|
<a class="remove-xmpp-contact fa fa-trash align-self-center" title="Click to remove this contact" href="#"></a>
|
||||||
|
</dd>
|
||||||
|
<dd class="offline pending-xmpp-contact d-flex">
|
||||||
|
<span class="pending-contact-name w-100">Victor Matfield</span>
|
||||||
|
<a class="remove-xmpp-contact fa fa-trash align-self-center" title="Click to remove this contact" href="#"></a>
|
||||||
|
</dd>
|
||||||
|
</dl>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
Loading…
Reference in New Issue
Block a user