<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://bootswatch.com/cosmo/bootstrap.min.css">
<div class="mainbody container-fluid">
<div class="row">
<div class="navbar-wrapper">
<div class="container-fluid">
<div class="navbar navbar-default navbar-static-top" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span><span
class="icon-bar"></span><span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="./ORqmj" style="margin-right:-8px; margin-top:-5px;">
<img alt="Brand" src="https://lut.im/7trApsDX08/GeilMRp1FIm4f2p7.png" width="30px" height="30px">
</a>
<a class="navbar-brand" href="./ORqmj">Project*</a>
<i class="brand_network"><small><small>diaspora* Network</small></small></i>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><a href="./ORqmj">Stream</a></li>
<li><a href="#">My Activity</a></li>
<li class="dropdown">
<span class="badge badge-important">2</span><a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-bell-o fa-lg" aria-hidden="true"></i></a>
<ul class="dropdown-menu dropdown-notification" role="menu">
<div class="header">
<div class="pull-right">
<a href="#" id="mark-all-read-link" class="btn btn-default">
Mark all as read
</a>
</div>
<h3>
Recent notifications
</h3>
</div>
<div class="ajax-loader" style="display: none;">
<div class="spinner" style="opacity: 1;"></div>
</div>
<div class="notifications ps-container ps-theme-default ps-active-y" data-ps-id="f8800f93-b9f9-fcc0-8ee2-7a1853baecc7"><div class="media read stream-element" data-guid="35489" data-type="also_commented">
<div class="unread-toggle pull-right">
<i class="fa fa-eye" title="" data-original-title="Mark unread" aria-hidden="true"></i>
</div>
<div class="media-object pull-left">
<a href="#" class="hovercardable hovercardable">
<img alt="Pa Plo" class="avatar img-responsive center-block" title="Pa Plo" data-person_id="793" src="https://lut.im/qw3MLhuFKd/giwr4PCYVzXKSFLa.png">
</a>
</div>
<div class="media-body">
<a data-hovercard="#" href="#" class="hovercardable hovercardable">Pa Plo</a> also commented on Éric’s post <a data-ref="621079" class="hard_object_link" href="#">Lorem ipsum dolor sit amet</a>.
<div>
<time datetime="2017-02-19T14:22:57Z" class="timeago" title="19/02/2017 à 15:22:57" data-time-ago="2017-02-19T14:22:57Z" data-original-title="19/02/2017 à 15:22:57">about an hour ago</time>
</div>
</div>
</div><div class="media stream-element unread" data-guid="35487" data-type="also_commented">
<div class="unread-toggle pull-right">
<i class="fa fa-eye" title="" data-original-title="Mark unread" aria-hidden="true"></i>
</div>
<div class="media-object pull-left">
<a href="#" class="hovercardable hovercardable">
<img alt="Fla" class="avatar img-responsive center-block" title="Fla" data-person_id="52" src="https://lut.im/b4CSwyRBRD/HWJocHMD9vQxLHLK.jpg">
</a>
</div>
<div class="media-body">
<a data-hovercard="#" href="#" class="hovercardable hovercardable">Marty</a> also commented on Jean-Pierre MARTIN’s post <a data-ref="608389" class="hard_object_link" href="#">My flower is beautiful !!!</a>.
<div>
<time datetime="2017-02-19T14:11:10Z" class="timeago" title="19/02/2017 à 15:11:10" data-time-ago="2017-02-19T14:11:10Z" data-original-title="19/02/2017 à 15:11:10">about an hour ago</time>
</div>
</div>
</div><div class="media read stream-element" data-guid="35486" data-type="started_sharing">
<div class="unread-toggle pull-right">
<i class="fa fa-eye" title="" data-original-title="Mark unread" aria-hidden="true"></i>
</div>
<div class="media-object pull-left">
<a href="#" class="hovercardable hovercardable">
<img alt="HNY 2017" class="avatar img-responsive center-block" title="HNY 2017" data-person_id="24071" src="https://lut.im/0hqJy8kij2/6jhAnegLpw7cXNEQ.png">
</a>
</div>
<div class="media-body">
<a data-hovercard="#" href="#" class="hovercardable hovercardable">HNY 2017</a> started sharing with you.
<div>
<time datetime="2017-02-19T14:07:00Z" class="timeago" title="19/02/2017 à 15:07:00" data-time-ago="2017-02-19T14:07:00Z" data-original-title="19/02/2017 à 15:07:00">about an hour ago</time>
</div>
</div>
</div><div class="media read stream-element" data-guid="35485" data-type="liked">
<div class="unread-toggle pull-right">
<i class="fa fa-eye" title="" data-original-title="Mark unread" aria-hidden="true"></i>
</div>
<div class="media-object pull-left">
<a href="#" class="hovercardable hovercardable">
<img alt="HNY 2017" class="avatar img-responsive center-block" title="HNY 2017" data-person_id="24071" src="https://lut.im/0hqJy8kij2/6jhAnegLpw7cXNEQ.png">
</a>
</div>
<div class="media-body">
<a data-hovercard="#" href="#" class="hovercardable hovercardable">HNY 2017</a> has liked your post <a data-ref="624893" class="hard_object_link" href="#">My tailor is rich !</a>.
<div>
<time datetime="2017-02-19T14:06:52Z" class="timeago" title="19/02/2017 à 15:06:52" data-time-ago="2017-02-19T14:06:52Z" data-original-title="19/02/2017 à 15:06:52">about an hour ago</time>
</div>
</div>
</div><div class="media read stream-element" data-guid="35484" data-type="also_commented">
<div class="unread-toggle pull-right">
<i class="fa fa-eye" title="" data-original-title="Mark unread" aria-hidden="true"></i>
</div>
<div class="media-object pull-left">
<a href="#" class="hovercardable hovercardable">
<img alt="HNY 2017" class="avatar img-responsive center-block" title="HNY 2017" data-person_id="24071" src="https://lut.im/0hqJy8kij2/6jhAnegLpw7cXNEQ.png">
</a>
</div>
<div class="media-body">
<a data-hovercard="#" href="#" class="hovercardable hovercardable">HNY 2017</a> also commented on E M’s post <a data-ref="621079" class="hard_object_link" href="#">Lorem ipsum dolor sit amet</a>.
<div>
<time datetime="2017-02-19T14:06:25Z" class="timeago" title="19/02/2017 à 15:06:25" data-time-ago="2017-02-19T14:06:25Z" data-original-title="19/02/2017 à 15:06:25">about an hour ago</time>
</div>
</div>
</div><div class="media read stream-element" data-guid="35483" data-type="also_commented">
<div class="unread-toggle pull-right">
<i class="fa fa-eye" title="" data-original-title="Mark unread" aria-hidden="true"></i>
</div>
<div class="media-object pull-left">
<a href="#" class="hovercardable hovercardable">
<img alt="HNY 2017" class="avatar img-responsive center-block" title="HNY 2017" data-person_id="24071" src="https://lut.im/0hqJy8kij2/6jhAnegLpw7cXNEQ.png">
</a>
</div>
<div class="media-body">
<a data-hovercard="#" href="#" class="hovercardable hovercardable">HNY 2017</a> also commented on E M’s post <a data-ref="621079" class="hard_object_link" href="#">Lorem ipsum dolor sit amet</a>.
<div>
<time datetime="2017-02-19T13:58:00Z" class="timeago" title="19/02/2017 à 14:58:00" data-time-ago="2017-02-19T13:58:00Z" data-original-title="19/02/2017 à 14:58:00">about an hour ago</time>
</div>
</div>
</div><div class="media read stream-element" data-guid="35482" data-type="also_commented">
<div class="unread-toggle pull-right">
<i class="fa fa-eye" title="" data-original-title="Mark unread" aria-hidden="true"></i>
</div>
<div class="media-object pull-left">
<a href="#" class="hovercardable hovercardable">
<img alt="Didier Rolland" class="avatar img-responsive center-block" title="Didier Rolland" data-person_id="20154" src="https://lut.im/UgCci9JrjU/1K5rb7JGbgnzMYwj.png">
</a>
</div>
<div class="media-body">
<a data-hovercard="#" href="#" class="hovercardable hovercardable">Didier Rolland</a> also commented on Jean-Pierre MARTIN’s post <a data-ref="608389" class="hard_object_link" href="#">My flower is beautiful !!!</a>.
<div>
<time datetime="2017-02-19T13:53:12Z" class="timeago" title="19/02/2017 à 14:53:12" data-time-ago="2017-02-19T13:53:12Z" data-original-title="19/02/2017 à 14:53:12">about an hour ago</time>
</div>
</div>
</div><div class="media read stream-element" data-guid="35474" data-type="also_commented">
<div class="unread-toggle pull-right">
<i class="fa fa-eye" title="" data-original-title="Mark unread" aria-hidden="true"></i>
</div>
<div class="media-object pull-left">
<a href="#" class="hovercardable hovercardable">
<img alt="Jean-Pierre MARTIN" class="avatar img-responsive center-block" title="Jean-Pierre MARTIN" data-person_id="8011" src="https://lut.im/9hfgD1rhaJ/yf2ePIqBqnMMbnM3.png">
</a>
</div>
<div class="media-body">
<a data-hovercard="#" href="#" class="hovercardable hovercardable">Jean-Pierre MARTIN</a> and <a data-hovercard="#" href="#" class="hovercardable hovercardable">Didier Rolland</a> also commented on Jean-Pierre MARTIN’s post <a data-ref="608389" class="hard_object_link" href="#">My flower is beautiful !!!</a>.
<div>
<time datetime="2017-02-19T10:50:00Z" class="timeago" title="19/02/2017 à 11:50:00" data-time-ago="2017-02-19T10:50:00Z" data-original-title="19/02/2017 à 11:50:00">about 5 hours ago</time>
</div>
</div>
</div><div class="media read stream-element" data-guid="35469" data-type="also_commented">
<div class="unread-toggle pull-right">
<i class="fa fa-eye" title="" data-original-title="Mark unread" aria-hidden="true"></i>
</div>
<div class="media-object pull-left">
<a href="#" class="hovercardable hovercardable">
<img alt="damien" class="avatar img-responsive center-block" title="damien" data-person_id="448" src="https://lut.im/8jZcWUIJ5r/f4TY34ju1W2c5BDa.gif">
</a>
</div>
<div class="media-body">
<a data-hovercard="#" href="#" class="hovercardable hovercardable">damien</a> and <a data-hovercard="#" href="#" class="hovercardable hovercardable">Alain</a> also commented on E M’s post <a data-ref="621079" class="hard_object_link" href="#">Lorem ipsum dolor sit amet</a>.
<div>
<time datetime="2017-02-19T09:43:21Z" class="timeago" title="19/02/2017 à 10:43:21" data-time-ago="2017-02-19T09:43:21Z" data-original-title="19/02/2017 à 10:43:21">about 6 hours ago</time>
</div>
</div>
</div><div class="media read stream-element" data-guid="35467" data-type="liked">
<div class="unread-toggle pull-right">
<i class="fa fa-eye" title="" data-original-title="Mark unread" aria-hidden="true"></i>
</div>
<div class="media-object pull-left">
<a href="#" class="hovercardable hovercardable">
<img alt="Homer S." class="avatar img-responsive center-block" title="Homer S." data-person_id="13636" src="https://lut.im/Y6YYQghq0s/sXnqU5X41BbN6Vx8.png">
</a>
</div>
<div class="media-body">
<a data-hovercard="#" href="#" class="hovercardable hovercardable">Homer S.</a> has liked your post <a data-ref="501541" class="hard_object_link" href="#">#diaspora is cool.</a>.
<div>
<time datetime="2017-02-19T08:16:55Z" class="timeago" title="19/02/2017 à 09:16:55" data-time-ago="2017-02-19T08:16:55Z" data-original-title="19/02/2017 à 09:16:55">about 7 hours ago</time>
</div>
</div>
</div>
</div>
<div class="view_all">
<a href="#" id="view_all_notifications">
View all
</a>
</div>
</ul>
</li>
<li><a href="#"><i class="fa fa-envelope-o fa-lg" aria-hidden="true"></i></a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">
<span class="user-avatar pull-left" style="margin-right:8px; margin-top:-5px;">
<img src="https://lut.im/7JCpw12uUT/mY0Mb78SvSIcjvkf.png" class="img-responsive img-circle" title="John Doe" alt="John Doe" width="30px" height="30px">
</span>
<span class="user-name">
John Doe
</span>
<b class="caret"></b></a>
<ul class="dropdown-menu">
<li>
<div class="navbar-content">
<div class="row">
<div class="col-md-5">
<img src="https://lut.im/7JCpw12uUT/mY0Mb78SvSIcjvkf.png" alt="Alternate Text" class="img-responsive" width="120px" height="120px" />
<p class="text-center small">
<a href="./3X6zm">Change Photo</a></p>
</div>
<div class="col-md-7">
<span>John Doe</span>
<p class="text-muted small">
example@pods.tld</p>
<div class="divider">
</div>
<a href="./56ExR" class="btn btn-default btn-xs"><i class="fa fa-user-o" aria-hidden="true"></i> Profile</a>
<a href="#" class="btn btn-default btn-xs"><i class="fa fa-address-card-o" aria-hidden="true"></i> Contacts</a>
<a href="#" class="btn btn-default btn-xs"><i class="fa fa-cogs" aria-hidden="true"></i> Settings</a>
<a href="#" class="btn btn-default btn-xs"><i class="fa fa-question-circle-o" aria-hidden="true"></i> Help!</a>
</div>
</div>
</div>
<div class="navbar-footer">
<div class="navbar-footer-content">
<div class="row">
<div class="col-md-6">
<a href="#" class="btn btn-default btn-sm"><i class="fa fa-unlock-alt" aria-hidden="true"></i> Change Passowrd</a>
</div>
<div class="col-md-6">
<a href="#" class="btn btn-default btn-sm pull-right"><i class="fa fa-power-off" aria-hidden="true"></i> Sign Out</a>
</div>
</div>
</div>
</div>
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div style="padding-top:50px;"> </div>
<div class="col-lg-3 col-md-3 hidden-sm hidden-xs">
<div class="list-group">
<a class="list-group-item active" href="#"><i class="fa fa-rss fa-fw" aria-hidden="true"></i> Stream <span class="pull-right"><i class="fa fa-arrow-right" aria-hidden="true"></i></span></a>
<a class="list-group-item" href="#"><i class="fa fa-newspaper-o fa-fw" aria-hidden="true"></i> My Activity</a>
<a class="list-group-item" href="#"><i class="fa fa-at fa-fw" aria-hidden="true"></i> Mentions</a>
<a class="list-group-item" href="#"><i class="fa fa-user-circle-o fa-fw" aria-hidden="true"></i> My Aspects</a>
<a class="list-group-item" href="#"><i class="fa fa-hashtag fa-fw" aria-hidden="true"></i> Followed Tags</a>
<a class="list-group-item" href="#"><i class="fa fa-globe fa-fw" aria-hidden="true"></i> Public Activity</a>
</div>
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingOne">
<a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="false" aria-controls="collapseOne" style="text-decoration:none;">
<h4 class="panel-title">
<i class="fa fa-caret-right fa-fw" aria-hidden="true"></i> Invite your friends
<span class="pull-right"><img src="https://lut.im/1l0TsVbkxs/CWqVdEChujtnHNFU.png" width="30px" height="30px" style="margin-top:-5px;" /></span>
</h4>
</a>
</div>
<div id="collapseOne" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne">
<div class="panel-body">
<small>Share this link via email, blog, or social networks!</small>
<input type="email" class="form-control" id="exampleInputEmail3" placeholder="https://MyPod.tld/i/sdg321sd51sd5" value="https://MyPod.tld/i/sdg321sd51sd5">
<a href="#"><small>Invite people by email</small></a>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingTwo">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo" style="text-decoration:none;">
<h4 class="panel-title">
<i class="fa fa-caret-right fa-fw" aria-hidden="true"></i> Welcome new users
<span class="pull-right"><img src="https://lut.im/tYZEWjA4ar/MWNQ87vpQjgX5USx.png" width="30px" height="30px" style="margin-top:-5px;" /></span>
</h4>
</a>
</div>
<div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
<div class="panel-body">
<small>Follow <a href="#">#newhere</a> and welcome new users to diaspora*!</small><br>
<small><a href="#">Learn more</a></small>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingThree">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree" style="text-decoration:none;">
<h4 class="panel-title">
<i class="fa fa-caret-right fa-fw" aria-hidden="true"></i> Need help?
<span class="pull-right"><img src="https://lut.im/2NaUlxi8tw/ORxUN6TR8LHxFfB5.jpg" width="30px" height="30px" style="margin-top:-5px;" /></span>
</h4>
</a>
</div>
<div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
<div class="panel-body">
<small>The diaspora* community is here!</small><br>
<small>Do You:</small><br>
<small>... have a <a href="#">#question</a>?</small><br>
<small>... find a <a href="#">#bug</a>?</small><br>
<small>... have a <a href="#">#feature</a> suggestion?</small><br>
<small><a href="#"><i class="fa fa-question-circle-o" aria-hidden="true"></i> Help</a>, <a href="#">Tutorials</a> & <a href="#">Wiki</a>: help for your first steps.</small>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingFour">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseFour" aria-expanded="false" aria-controls="collapseThree" style="text-decoration:none;">
<h4 class="panel-title">
<i class="fa fa-caret-right fa-fw" aria-hidden="true"></i> Connect services
<span class="pull-right"><img src="https://lut.im/pzq6ALuuUd/MDX2uPKSBlYp3ZgE.png" width="30px" height="30px" style="margin-top:-5px;" /></span>
</h4>
</a>
</div>
<div id="collapseFour" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingFour">
<div class="panel-body">
<small>You can connect the following services to diaspora*:</small><br>
<div align="center">
<i class="fa fa-wordpress fa-lg" aria-hidden="true"></i>
<i class="fa fa-tumblr-square fa-lg" aria-hidden="true"></i>
<i class="fa fa-twitter-square fa-lg" aria-hidden="true"></i>
</div>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingFive">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseFive" aria-expanded="false" aria-controls="collapseThree" style="text-decoration:none;">
<h4 class="panel-title">
<i class="fa fa-caret-right fa-fw" aria-hidden="true"></i> Bookmarklet
<span class="pull-right"><img src="https://lut.im/rQSoPC9Pgx/FTjYVoZQZXQZ3qIS.svg" width="30px" height="30px" style="margin-top:-5px;" /></span>
</h4>
</a>
</div>
<div id="collapseFive" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingFive">
<div class="panel-body">
<small>Post to diaspora* from anywhere by bookmarking this link => <a href="#">Post to diaspora*</a>.</small>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingSix">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseSix" aria-expanded="false" aria-controls="collapseThree" style="text-decoration:none;">
<h4 class="panel-title">
<i class="fa fa-caret-right fa-fw" aria-hidden="true"></i> Got a problem?
<span class="pull-right"><img src="https://lut.im/MEYKXNQlWC/z0fSndZMAdFttj9B.png" width="30px" height="30px" style="margin-top:-5px;" /></span>
</h4>
</a>
</div>
<div id="collapseSix" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingSix" style="text-decoration:none;">
<div class="panel-body">
<small>Contact the administrator of your pod!<br>
<a href="#">Podmin email</a></small>
</div>
</div>
</div>
<div class="panel panel-footer">
<hr>
<div align="center">
<p>Be excellent to each other! ♥</p>
</div>
<hr>
<small><a href="#">diasporafoundation.org</a></small><br>
<small><a href="#">Wiki</a></small><br>
<small><a href="#">What’s new?</a></small><br>
<small><a href="#">Code 1.2.34.5-a6bc7d8ef</a></small><br>
<small><a href="#">Pod statistics</a></small><br>
<small><a href="#">Toggle mobile</a></small><br>
</div>
</div>
</div>
<div class="col-lg-9 col-md-9 col-sm-12 col-xs-12">
<div class="panel panel-default">
<div class="panel-body">
<div class="media">
<div class="pull-left">
<a href="#">
<img class="media-object img-circle" src="https://lut.im/7JCpw12uUT/mY0Mb78SvSIcjvkf.png" width="50px" height="50px">
</a>
</div>
<div class="media-body">
<textarea class="form-control" rows="2" placeholder="Start a conversation..."></textarea>
</div>
</div>
</div>
</div>
<hr>
<!-- Simple post content example. -->
<div class="panel panel-default">
<div class="panel-body">
<div class="pull-left">
<a href="#">
<img class="media-object img-circle" src="https://lut.im/7JCpw12uUT/mY0Mb78SvSIcjvkf.png" width="50px" height="50px" style="margin-right:8px; margin-top:-5px;">
</a>
</div>
<h4><a href="#" style="text-decoration:none;"><strong>John Doe</strong></a> – <small><small><a href="#" style="text-decoration:none; color:grey;"><i><i class="fa fa-clock-o" aria-hidden="true"></i> 42 minutes ago</i></a></small></small></h4>
<span>
<div class="navbar-right">
<div class="dropdown">
<button class="btn btn-link btn-xs dropdown-toggle" type="button" id="dd1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
<i class="fa fa-cog" aria-hidden="true"></i>
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dd1" style="float: right;">
<li><a href="#"><i class="fa fa-fw fa-exclamation-triangle" aria-hidden="true"></i> Report</a></li>
<li><a href="#"><i class="fa fa-fw fa-ban" aria-hidden="true"></i> Ignore</a></li>
<li><a href="#"><i class="fa fa-fw fa-bell" aria-hidden="true"></i> Enable notifications for this post</a></li>
<li><a href="#"><i class="fa fa-fw fa-eye-slash" aria-hidden="true"></i> Hide</a></li>
<li role="separator" class="divider"></li>
<li><a href="#"><i class="fa fa-fw fa-trash" aria-hidden="true"></i> Delete</a></li>
</ul>
</div>
</div>
</span>
<hr>
<div class="post-content">
<p>Simple post content example.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur vel gravida metus, non ultrices sapien. Morbi odio metus, dapibus non nibh id amet.</p>
</div>
<hr>
<div>
<div class="pull-right btn-group-xs">
<a class="btn btn-default btn-xs"><i class="fa fa-heart" aria-hidden="true"></i> Like</a>
<a class="btn btn-default btn-xs"><i class="fa fa-retweet" aria-hidden="true"></i> Reshare</a>
<a class="btn btn-default btn-xs"><i class="fa fa-comment" aria-hidden="true"></i> Comment</a>
</div>
<div class="pull-left">
<p class="text-muted" style="margin-left:5px;"><i class="fa fa-globe" aria-hidden="true"></i> Public</p>
</div>
<br>
</div>
<hr>
<div class="media">
<div class="pull-left">
<a href="#">
<img class="media-object img-circle" src="https://lut.im/7JCpw12uUT/mY0Mb78SvSIcjvkf.png" width="35px" height="35px" style="margin-left:3px; margin-right:-5px;">
</a>
</div>
<div class="media-body">
<textarea class="form-control" rows="1" placeholder="Comment"></textarea>
</div>
</div>
</div>
</div>
<!-- Reshare Example -->
<div class="panel panel-default">
<div class="panel-body">
<div class="pull-left">
<a href="#">
<img class="media-object img-circle" src="https://lut.im/7JCpw12uUT/mY0Mb78SvSIcjvkf.png" width="50px" height="50px" style="margin-right:8px; margin-top:-5px;">
</a>
</div>
<h4><a href="#" style="text-decoration:none;"><strong>John Doe</strong></a> – <small><small><a href="#" style="text-decoration:none; color:grey;"><i><i class="fa fa-clock-o" aria-hidden="true"></i> 42 minutes ago</i></a></small></small></h4>
<span>
<div class="navbar-right">
<div class="dropdown">
<button class="btn btn-link btn-xs dropdown-toggle" type="button" id="dd1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
<i class="fa fa-cog" aria-hidden="true"></i>
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dd1" style="float: right;">
<li><a href="#"><i class="fa fa-fw fa-exclamation-triangle" aria-hidden="true"></i> Report</a></li>
<li><a href="#"><i class="fa fa-fw fa-ban" aria-hidden="true"></i> Ignore</a></li>
<li><a href="#"><i class="fa fa-fw fa-bell" aria-hidden="true"></i> Enable notifications for this post</a></li>
<li><a href="#"><i class="fa fa-fw fa-eye-slash" aria-hidden="true"></i> Hide</a></li>
<li role="separator" class="divider"></li>
<li><a href="#"><i class="fa fa-fw fa-trash" aria-hidden="true"></i> Delete</a></li>
</ul>
</div>
</div>
</span>
<hr>
<div class="post-content">
<div class="panel panel-default">
<div class="panel-body">
<div class="pull-left">
<a href="#">
<img class="media-object img-circle" src="https://diaspote.org/uploads/images/thumb_large_283df6397c4db3fe0344.png" width="50px" height="50px" style="margin-right:8px; margin-top:-5px;">
</a>
</div>
<h4><a href="#" style="text-decoration:none;"><strong>✪ SтeғOғғιcιel ✪ ツ</strong></a> – <small><small><a href="#" style="text-decoration:none; color:grey;"><i><i class="fa fa-clock-o" aria-hidden="true"></i> about 15 hours ago</i></a></small></small></h4>
<hr>
<div class="post-content">
Reshare post example.
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur vel gravida metus, non ultrices sapien. Morbi odio metus, dapibus non nibh id amet.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur vel gravida metus, non ultrices sapien. Morbi odio metus, dapibus non nibh id amet.</p>
</div>
</div>
</div>
</div>
<hr>
<div>
<div class="pull-right btn-group-xs">
<a class="btn btn-default btn-xs"><i class="fa fa-heart" aria-hidden="true"></i> Like</a>
<a class="btn btn-default btn-xs"><i class="fa fa-retweet" aria-hidden="true"></i> Reshare</a>
<a class="btn btn-default btn-xs"><i class="fa fa-comment" aria-hidden="true"></i> Comment</a>
</div>
<div class="pull-left">
<p class="text-muted" style="margin-left:5px;"><i class="fa fa-globe" aria-hidden="true"></i> Public</p>
</div>
<br>
</div>
<hr>
<div class="media">
<div class="pull-left">
<a href="#">
<img class="media-object img-circle" src="https://lut.im/7JCpw12uUT/mY0Mb78SvSIcjvkf.png" width="35px" height="35px" style="margin-left:3px; margin-right:-5px;">
</a>
</div>
<div class="media-body">
<textarea class="form-control" rows="1" placeholder="Comment"></textarea>
</div>
</div>
</div>
</div>
<!-- Sample post content with picture. -->
<div class="panel panel-default">
<div class="panel-body">
<div class="pull-left">
<a href="#">
<img class="media-object img-circle" src="https://lut.im/7JCpw12uUT/mY0Mb78SvSIcjvkf.png" width="50px" height="50px" style="margin-right:8px; margin-top:-5px;">
</a>
</div>
<h4><a href="#" style="text-decoration:none;"><strong>John Doe</strong></a> – <small><small><a href="#" style="text-decoration:none; color:grey;"><i><i class="fa fa-clock-o" aria-hidden="true"></i> 42 minutes ago</i></a></small></small></h4>
<span>
<div class="navbar-right">
<div class="dropdown">
<button class="btn btn-link btn-xs dropdown-toggle" type="button" id="dd1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
<i class="fa fa-cog" aria-hidden="true"></i>
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dd1" style="float: right;">
<li><a href="#"><i class="fa fa-fw fa-exclamation-triangle" aria-hidden="true"></i> Report</a></li>
<li><a href="#"><i class="fa fa-fw fa-ban" aria-hidden="true"></i> Ignore</a></li>
<li><a href="#"><i class="fa fa-fw fa-bell" aria-hidden="true"></i> Enable notifications for this post</a></li>
<li><a href="#"><i class="fa fa-fw fa-eye-slash" aria-hidden="true"></i> Hide</a></li>
<li role="separator" class="divider"></li>
<li><a href="#"><i class="fa fa-fw fa-trash" aria-hidden="true"></i> Delete</a></li>
</ul>
</div>
</div>
</span>
<hr>
<div class="post-content">
<p>Sample post content with picture.</p>
<img class="img-responsive" src="https://media.giphy.com/media/j1QQj6To9Pbxu/giphy.gif">
<p><br><a href="/tags/christmas" class="tag">#Christmas</a> <a href="/tags/caturday" class="tag">#Caturday</a></p>
</div>
<hr>
<div>
<div class="pull-right btn-group-xs">
<a class="btn btn-default btn-xs"><i class="fa fa-heart" aria-hidden="true"></i> Like</a>
<a class="btn btn-default btn-xs"><i class="fa fa-retweet" aria-hidden="true"></i> Reshare</a>
<a class="btn btn-default btn-xs"><i class="fa fa-comment" aria-hidden="true"></i> Comment</a>
</div>
<div class="pull-left">
<p class="text-muted" style="margin-left:5px;"><i class="fa fa-globe" aria-hidden="true"></i> Public <strong>via mobile</strong></p>
</div>
<br>
</div>
<hr>
<div class="media">
<div class="pull-left">
<a href="#">
<img class="media-object img-circle" src="https://lut.im/7JCpw12uUT/mY0Mb78SvSIcjvkf.png" width="35px" height="35px" style="margin-left:3px; margin-right:-5px;">
</a>
</div>
<div class="media-body">
<textarea class="form-control" rows="1" placeholder="Comment"></textarea>
</div>
</div>
</div>
</div>
<!-- Sample post content with comments. -->
<div class="panel panel-default">
<div class="panel-body">
<div class="pull-left">
<a href="#">
<img class="media-object img-circle" src="https://lut.im/7JCpw12uUT/mY0Mb78SvSIcjvkf.png" width="50px" height="50px" style="margin-right:8px; margin-top:-5px;">
</a>
</div>
<h4><a href="#" style="text-decoration:none;"><strong>John Doe</strong></a> – <small><small><a href="#" style="text-decoration:none; color:grey;"><i><i class="fa fa-clock-o" aria-hidden="true"></i> 42 minutes ago</i></a></small></small></h4>
<span>
<div class="navbar-right">
<div class="dropdown">
<button class="btn btn-link btn-xs dropdown-toggle" type="button" id="dd1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
<i class="fa fa-cog" aria-hidden="true"></i>
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dd1" style="float: right;">
<li><a href="#"><i class="fa fa-fw fa-exclamation-triangle" aria-hidden="true"></i> Report</a></li>
<li><a href="#"><i class="fa fa-fw fa-ban" aria-hidden="true"></i> Ignore</a></li>
<li><a href="#"><i class="fa fa-fw fa-bell" aria-hidden="true"></i> Enable notifications for this post</a></li>
<li><a href="#"><i class="fa fa-fw fa-eye-slash" aria-hidden="true"></i> Hide</a></li>
<li role="separator" class="divider"></li>
<li><a href="#"><i class="fa fa-fw fa-trash" aria-hidden="true"></i> Delete</a></li>
</ul>
</div>
</div>
</span>
<hr>
<div class="post-content">
<p>Sample post content with comments.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur vel gravida metus, non ultrices sapien. Morbi odio metus, dapibus non nibh id amet.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur vel gravida metus, non ultrices sapien. Morbi odio metus, dapibus non nibh id amet.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur vel gravida metus, non ultrices sapien. Morbi odio metus, dapibus non nibh id amet.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur vel gravida metus, non ultrices sapien. Morbi odio metus, dapibus non nibh id amet.</p>
</div>
<hr>
<div>
<div class="pull-right btn-group-xs">
<a class="btn btn-default btn-xs"><i class="fa fa-heart" aria-hidden="true"></i> Like</a>
<a class="btn btn-default btn-xs"><i class="fa fa-comment" aria-hidden="true"></i> Comment</a>
</div>
<div class="pull-left">
<p class="text-muted" style="margin-left:5px;"><i class="fa fa-user-secret" aria-hidden="true"></i> Limited</p>
</div>
<br>
</div>
<hr>
<div>
<a class="btn btn-default btn-xs"><i class="fa fa-bars" aria-hidden="true"></i> Show 12 more comments</a>
<hr>
<div class="post-content">
<div class="panel-default">
<div class="panel-body">
<div class="pull-left">
<a href="#">
<img class="media-object img-circle" src="https://diaspote.org/uploads/images/thumb_large_283df6397c4db3fe0344.png" width="35px" height="35px" style="margin-right:8px; margin-top:-5px;">
</a>
</div>
<h4><a href="#" style="text-decoration:none;"><strong>✪ SтeғOғғιcιel ✪ ツ</strong></a></h4>
<hr>
<div class="post-content">
Comment example.<br><br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque at arcu sapien. Donec laoreet, nisl quis tempor hendrerit, libero augue blandit turpis, in dignissim odio mauris eu tortor. Ut hendrerit ipsum elit, a elementum nulla ultrices eu. In posuere mollis efficitur. Maecenas justo turpis, tristique sit amet ultricies quis, molestie eget ex. Nam vestibulum consequat tincidunt. Morbi vitae placerat sapien. Phasellus quis mi tincidunt sem scelerisque tincidunt. Ut viverra porttitor sagittis. Phasellus aliquam auctor purus, id sollicitudin mauris pulvinar ac. Vivamus vel erat nec orci ultricies iaculis quis sit amet augue. Vestibulum aliquam felis lorem, interdum porttitor sapien sodales ac. Maecenas id ullamcorper risus. Suspendisse id dui sed urna rutrum pharetra. Nam eu lectus et orci vestibulum bibendum. Mauris et pulvinar dui, ac facilisis leo.
<br><small><small><a href="#" style="text-decoration:none; color:grey;"><i><i class="fa fa-clock-o" aria-hidden="true"></i> 12 minutes ago</i></a></small></small>
</div>
</div>
</div>
</div>
<hr>
<div class="post-content">
<div class="panel-default">
<div class="panel-body">
<div class="pull-left">
<a href="#">
<img class="media-object img-circle" src="https://lut.im/yR07xwobAA/bZpvdTZmBBTZDJDd.png" width="35px" height="35px" style="margin-right:8px; margin-top:-5px;">
</a>
</div>
<h4><a href="#" style="text-decoration:none;"><strong>Mi Chleen</strong></a></h4>
<hr>
<div class="post-content">
Another comment.<br><br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque at arcu sapien. Donec laoreet, nisl quis tempor hendrerit, libero augue blandit turpis, in dignissim odio mauris eu tortor. Ut hendrerit ipsum elit, a elementum nulla ultrices eu. In posuere mollis efficitur. Maecenas justo turpis, tristique sit amet ultricies quis, molestie eget ex. Nam vestibulum consequat tincidunt. Morbi vitae placerat sapien. Phasellus quis mi tincidunt sem scelerisque tincidunt. Ut viverra porttitor sagittis. Phasellus aliquam auctor purus, id sollicitudin mauris pulvinar ac. Vivamus vel erat nec orci ultricies iaculis quis sit amet augue. Vestibulum aliquam felis lorem, interdum porttitor sapien sodales ac. Maecenas id ullamcorper risus. Suspendisse id dui sed urna rutrum pharetra. Nam eu lectus et orci vestibulum bibendum. Mauris et pulvinar dui, ac facilisis leo.
<br><small><small><a href="#" style="text-decoration:none; color:grey;"><i><i class="fa fa-clock-o" aria-hidden="true"></i> 9 minutes ago</i></a></small></small>
</div>
</div>
</div>
</div>
<hr>
<div class="post-content">
<div class="panel-default">
<div class="panel-body">
<div class="pull-left">
<a href="#">
<img class="media-object img-circle" src="https://lut.im/7JCpw12uUT/mY0Mb78SvSIcjvkf.png" width="35px" height="35px" style="margin-right:8px; margin-top:-5px;">
</a>
</div>
<h4><a href="#" style="text-decoration:none;"><strong>John Doe</strong></a></h4>
<hr>
<div class="post-content">
Yet another post.<br><br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque at arcu sapien. Donec laoreet, nisl quis tempor hendrerit, libero augue blandit turpis, in dignissim odio mauris eu tortor. Ut hendrerit ipsum elit, a elementum nulla ultrices eu. In posuere mollis efficitur. Maecenas justo turpis, tristique sit amet ultricies quis, molestie eget ex. Nam vestibulum consequat tincidunt. Morbi vitae placerat sapien. Phasellus quis mi tincidunt sem scelerisque tincidunt. Ut viverra porttitor sagittis. Phasellus aliquam auctor purus, id sollicitudin mauris pulvinar ac. Vivamus vel erat nec orci ultricies iaculis quis sit amet augue. Vestibulum aliquam felis lorem, interdum porttitor sapien sodales ac. Maecenas id ullamcorper risus. Suspendisse id dui sed urna rutrum pharetra. Nam eu lectus et orci vestibulum bibendum. Mauris et pulvinar dui, ac facilisis leo.
<br><small><small><a href="#" style="text-decoration:none; color:grey;"><i><i class="fa fa-clock-o" aria-hidden="true"></i> 2 minutes ago</i></a></small></small>
</div>
</div>
</div>
</div>
</div>
<div class="media">
<div class="pull-left">
<a href="#">
<img class="media-object img-circle" src="https://lut.im/7JCpw12uUT/mY0Mb78SvSIcjvkf.png" width="35px" height="35px" style="margin-left:3px; margin-right:-5px;">
</a>
</div>
<div class="media-body">
<textarea class="form-control" rows="1" placeholder="Comment"></textarea>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
.mainbody {
background:#f0f0f0;
}
/* Special class on .container surrounding .navbar, used for positioning it into place. */
.navbar-wrapper {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 20;
margin-left: -15px;
margin-right: -15px;
}
/* Flip around the padding for proper display in narrow viewports */
.navbar-wrapper .container {
padding-left: 0;
padding-right: 0;
}
.navbar-wrapper .navbar {
padding-left: 15px;
padding-right: 15px;
}
.navbar-content
{
width:320px;
padding: 15px;
padding-bottom:0px;
}
.navbar-content:before, .navbar-content:after
{
display: table;
content: "";
line-height: 0;
}
.navbar-nav.navbar-right:last-child {
margin-right: 15px !important;
}
.navbar-footer
{
background-color:#DDD;
}
.navbar-footer-content { padding:15px 15px 15px 15px; }
.dropdown-menu {
padding: 0px;
overflow: hidden;
}
.brand_network {
color: #9D9D9D;
float: left;
position: absolute;
left: 70px;
top: 30px;
font-size: smaller;
}
.post-content {
margin-left:58px;
}
.badge-important {
margin-top: 3px;
margin-left: 25px;
position: absolute;
}
body {
background-color: #e8e8e8;
}
.navbar-default .navbar-nav>li>a:hover {
border-bottom: 4px #2780e3 solid;
margin-bottom: -4px;
}
.nav.navbar-nav .dropdown .dropdown-menu {
border-top: none;
margin-left: -1px;
padding: 4px;
width: 550px;
}
.nav.navbar-nav .dropdown-menu .media-object.pull-left .avatar {
width: 35px;
height: 35px;
}
.nav.navbar-nav .dropdown-menu .notifications {
position: relative;
max-height: 350px;
width: 100%;
}
.ps-container {
-ms-touch-action: none;
touch-action: none;
overflow-x: hidden;
overflow-y: scroll;
-ms-overflow-style: none;
}
.avatar {
border-radius: 1000px;
}
.nav.navbar-nav .dropdown-menu .view_all {
background: -webkit-linear-gradient(top, #3f8fba, #076497);
background: linear-gradient(to bottom, #3f8fba, #076497);
border: none;
text-align: center;
padding: 10px;
}
.nav.navbar-nav .dropdown-menu .view_all a {
color: #FFFFFF;
text-decoration: none;
font-weight: bolder;
}
.notifications .stream-element.media.unread {
background-color: #eee;
padding:2px;
}
@media (max-width: 768px) {
.post-content{
margin-left: 0px;
}
}
.panel-footer small a {
color: #FFF;
}
#accordion .panel-footer {
color: #FFF;
padding-bottom: 100px;
background: #222 URL('https://diasporafoundation.org/assets/logo-e280790b46ace035cde8657c606b7b8cf6d925c7313a48f3d53a6340f59d5dfd.png') no-repeat 0 100% local;
background-position-x: 95%;
}
$(function () {
$('[data-toggle="popover"]').popover()
})
