157 lines
5.4 KiB
HTML
157 lines
5.4 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html>
|
||
|
|
<head>
|
||
|
|
<meta charset="utf-8">
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
|
|
<title>Fedilogue</title>
|
||
|
|
<link rel="stylesheet" href="css/main.css" type="text/css"/>
|
||
|
|
<script type="text/javascript" src="js/main.js"></script>
|
||
|
|
</head>
|
||
|
|
<body class="resultpage">
|
||
|
|
|
||
|
|
<div class="navbar">
|
||
|
|
|
||
|
|
<div tabindex="0" class="hbmenu">
|
||
|
|
<span class="hbbtn">☰</span>
|
||
|
|
<div class="menu">
|
||
|
|
<li><a href="#">About</a></li>
|
||
|
|
<li><a href="#">How it works</a></li>
|
||
|
|
<li><a href="#">FAQ</a></li>
|
||
|
|
<li><a href="#">Contact</a></li>
|
||
|
|
<li><a href="#">Trending</a></li>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="logo">
|
||
|
|
<a class="logolink" href="index.html" title="Fedilogue logo">
|
||
|
|
<img src="images/logo.svg" alt="Fedilogue logo image"/>
|
||
|
|
</a>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="searcharea">
|
||
|
|
<form name="search" method="get">
|
||
|
|
<input class="searchinput" type="text" name="q" value="test" />
|
||
|
|
<input class="searchsubmit" type="submit" name="" value="Search" />
|
||
|
|
<div class="clear"></div>
|
||
|
|
</form>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="resultarea">
|
||
|
|
<div class="resultinfo">Search for <strong>test</strong> returned <strong>0000</strong> results.</div>
|
||
|
|
|
||
|
|
<div class="result">
|
||
|
|
<div class="resulttop">
|
||
|
|
<div class="userdata">
|
||
|
|
<a href="#" title="User Avatar" target="_blank" class="useravatar"><img src="images/icon-avatar.png" /></a>
|
||
|
|
<a href="#" title="User Label" target="_blank" class="userlabel">User One</a>
|
||
|
|
<a href="#" title="User ID" target="_blank" class="userident">@userone@instance.tld</a>
|
||
|
|
</div>
|
||
|
|
<div id="test" class="actions">
|
||
|
|
<ul>
|
||
|
|
<li><a href="#" title="Post URL"><img src="images/icon-link.png" /></a></li>
|
||
|
|
<li><a href="#" title="Expand post"><img src="images/icon-expand.png" /></a></li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="resultbody">
|
||
|
|
Lorem ipsum dolor sit amet, est ne nibh noster. No altera probatus gloriatur eam, vim ut postea ornatus meliore, alterum elaboraret nec ex. His summo detraxit menandri eu. Quas commune appellantur duo ad, his an vero ceteros accusam, eu latine eligendi pri.
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="result">
|
||
|
|
<div class="resulttop">
|
||
|
|
<div class="userdata">
|
||
|
|
<a href="#" title="User Avatar" target="_blank" class="useravatar"><img src="images/icon-avatar.png" /></a>
|
||
|
|
<a href="#" title="User Label" target="_blank" class="userlabel">User Two</a>
|
||
|
|
<a href="#" title="User ID" target="_blank" class="userident">@usertwo@instance.tld</a>
|
||
|
|
</div>
|
||
|
|
<div class="actions">
|
||
|
|
<ul>
|
||
|
|
<li><a href="#" title="Post URL"><img src="images/icon-link.png" /></a></li>
|
||
|
|
<li><a href="#" title="Expand post"><img src="images/icon-expand.png" /></a></li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="resultbody">
|
||
|
|
Lorem ipsum dolor sit amet, est ne nibh noster. No altera probatus gloriatur eam, vim ut postea ornatus meliore, alterum elaboraret nec ex. His summo detraxit menandri eu. Quas commune appellantur duo ad, his an vero ceteros accusam, eu latine eligendi pri.
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="result">
|
||
|
|
<div class="resulttop">
|
||
|
|
<div class="userdata">
|
||
|
|
<a href="#" title="User Avatar" target="_blank" class="useravatar"><img src="images/icon-avatar.png" /></a>
|
||
|
|
<a href="#" title="User Label" target="_blank" class="userlabel">User Three</a>
|
||
|
|
<a href="#" title="User ID" target="_blank" class="userident">@userthree@instance.tld</a>
|
||
|
|
</div>
|
||
|
|
<div class="actions">
|
||
|
|
<ul>
|
||
|
|
<li><a href="#" title="Post URL"><img src="images/icon-link.png" /></a></li>
|
||
|
|
<li><a href="#" title="Expand post"><img src="images/icon-expand.png" /></a></li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="resultbody">
|
||
|
|
Lorem ipsum dolor sit amet, est ne nibh noster. No altera probatus gloriatur eam, vim ut postea ornatus meliore, alterum elaboraret nec ex. His summo detraxit menandri eu. Quas commune appellantur duo ad, his an vero ceteros accusam, eu latine eligendi pri.
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="pagin">
|
||
|
|
<ul>
|
||
|
|
<li><a href="#" class="prev">«</a></li>
|
||
|
|
<li><a href="#" class="current">1</a></li>
|
||
|
|
<li><a href="#">2</a></li>
|
||
|
|
<li><a href="#">3</a></li>
|
||
|
|
<li><a href="#" class="next">»</a></li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="sidebar left">
|
||
|
|
<h3>Finetune</h3>
|
||
|
|
<h4>Post time within:</h4>
|
||
|
|
<ul class="list checks">
|
||
|
|
<li class="current"><a href="#">all</a></li>
|
||
|
|
<li><a href="#">24 hours</a></li>
|
||
|
|
<li><a href="#">1 week</a></li>
|
||
|
|
<li><a href="#">1 month</a></li>
|
||
|
|
<li><a href="#">6 months</a></li>
|
||
|
|
<li><a href="#">1 year</a></li>
|
||
|
|
</ul>
|
||
|
|
<h4>Post length:</h4>
|
||
|
|
<ul class="list checks">
|
||
|
|
<li class="current"><a href="#">all</a></li>
|
||
|
|
<li><a href="#">small (150 chars)</a></li>
|
||
|
|
<li><a href="#">toot (500 chars)</a></li>
|
||
|
|
<li><a href="#">longer (1000 chars)</a></li>
|
||
|
|
<li><a href="#">very long (>1000 chars)</a></li>
|
||
|
|
</ul>
|
||
|
|
<h4>Other</h4>
|
||
|
|
<h4>Attachment:</h4>
|
||
|
|
<ul class="list checks">
|
||
|
|
<li class="current"><a href="#">all</a></li>
|
||
|
|
<li><a href="#">with attachments</a></li>
|
||
|
|
<li><a href="#">without attachments</a></li>
|
||
|
|
</ul>
|
||
|
|
<h4>Mentions:</h4>
|
||
|
|
<ul class="list checks">
|
||
|
|
<li class="current"><a href="#">all</a></li>
|
||
|
|
<li><a href="#">with mentions</a></li>
|
||
|
|
<li><a href="#">without mentions</a></li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="sidebar right">
|
||
|
|
<h3>Trending</h3>
|
||
|
|
<ul class="list trending">
|
||
|
|
<li><a href="#">#onehashtag</a></li>
|
||
|
|
<li><a href="#">#somethingelse</a></li>
|
||
|
|
<li><a href="#">#anothertag</a></li>
|
||
|
|
<li><a href="#">#exampletrending</a></li>
|
||
|
|
<li><a href="#">#exampletag</a></li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</body>
|
||
|
|
</html>
|