136 lines
5.7 KiB
Plaintext
136 lines
5.7 KiB
Plaintext
<!DOCTYPE html>
|
|
<html class="dark">
|
|
|
|
<head>
|
|
<title>Social Robot</title>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<link rel="stylesheet" href="/stylesheets/style.css">
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/fork-awesome@1.2.0/css/fork-awesome.min.css"
|
|
integrity="sha256-XoaMnoYC5TH6/+ihMEnospgm0J1PM/nioxbOUdnM8HY=" crossorigin="anonymous">
|
|
</head>
|
|
|
|
<body class="bg-white dark:bg-gray-800 dark:text-white">
|
|
<div class="lg:px-24 mx-auto">
|
|
|
|
<div class="lg:flex mt-2">
|
|
|
|
<div class="lg:w-1/4 lg:overflow-y-scroll ">
|
|
<form method="GET">
|
|
<div class="relative text-gray-600 focus-within:text-gray-400">
|
|
<span class="absolute inset-y-0 left-0 flex items-center pl-2">
|
|
<button type="submit" class="p-1 focus:outline-none focus:shadow-outline">
|
|
<svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
|
viewBox="0 0 24 24" class="w-6 h-6">
|
|
<path d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
|
|
</svg>
|
|
</button>
|
|
</span>
|
|
<input type="search" name="q"
|
|
class="w-full py-2 text-sm dark:text-white dark:bg-gray-900 pl-10 focus:outline-none dark:focus:bg-white dark:focus:text-gray-900"
|
|
placeholder="Search..." autocomplete="off">
|
|
</div>
|
|
</form>
|
|
<div class="flex items-center text-sm mt-5">
|
|
<img src="https://i.pravatar.cc/48" alt="John Doe" class="rounded-md mr-2">
|
|
John Doe
|
|
</div>
|
|
<div class="my-4">
|
|
<form action="">
|
|
<textarea
|
|
class="w-full p-1 dark:text-white dark:bg-gray-900 focus:outline-none dark:focus:bg-white dark:focus:text-gray-900"
|
|
name="body" id="" cols="20" placeholder="What's on your mind?"></textarea>
|
|
<hr class="my-4">
|
|
<div class="flex justify-end">
|
|
<button class="place-content-end bg-blue-500 shadow py-2 px-2 text-white" type="submit">TOOT!</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="lg:flex-1 lg:mx-3 bg-gray-600 text-white" style="max-width: 580px;">
|
|
<div class="bg-gray-900 text-white p-4 flex justify-between absolute w-full z-50" style="max-width: 580px;">
|
|
<div><i class="fa fa-home mr-2"></i>Home</div>
|
|
<div><i class="fa fa-sliders"></i></div>
|
|
</div>
|
|
|
|
<div class="lg:overflow-y-scroll lg:h-screen">
|
|
<div class="max-h-40 overflow-y-hidden align-bottom mt-14">
|
|
<img class="object-none object-center" src="images/e3c4a6d5b1f352ee.jpg" alt="paralax">
|
|
</div>
|
|
<div class="flex justify-between">
|
|
<div class="flex-shrink-0 max-h-10 relative -top-10 px-4">
|
|
<img src="https://i.pravatar.cc/94" alt="John Doe" class="rounded-md overflow-visible">
|
|
</div>
|
|
<div class="flex items-center pt-3 px-2 mx-2">
|
|
<button class="bg-blue-600 py-2 px-5 rounded-md mr-3 focus:outline-none focus:shadow-outline"
|
|
type="submit">Follow</button>
|
|
<button
|
|
class="bg-gray-600 border border-b-gray-400 py-2 px-5 rounded-md focus:outline-none focus:shadow-outline shadow-xl"
|
|
type="submit"><i class="fa fa-ellipsis-v"></i></button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="p-4">
|
|
<div>
|
|
<h4 class="font-bold">John Doe</h4>
|
|
<p class="text-sm text-gray-400">john.doe@uplink.si</p>
|
|
</div>
|
|
<div class="text-sm text-gray-400 mt-3">
|
|
<p>Joined Dec 28, 2021</p>
|
|
<div class="flex">
|
|
<div class="pr-5"><span class="text-white">5</span> Posts</div>
|
|
<div class="pr-5"><span class="text-white">3</span> Following</div>
|
|
<div class="pr-5"><span class="text-white">7</span> Followers</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<% for(var i=0; i < 8; i++) {%>
|
|
<%- include('partials/_toot') %>
|
|
<% } %>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="lg:w-1/4 lg:overflow-y-scroll">
|
|
<ul class="p-5">
|
|
<li>
|
|
<a class="font-bold text-lg mb-4 block"><i class="fa fa-home mr-2"></i>Home</a>
|
|
</li>
|
|
<li>
|
|
<a class="font-bold text-lg mb-4 block"><i class="fa fa-bell mr-2"></i>Notifications</a>
|
|
</li>
|
|
<li>
|
|
<a class="font-bold text-lg mb-4 block"><i class="fa fa-group mr-2"></i>Local</a>
|
|
</li>
|
|
<li>
|
|
<a class="font-bold text-lg mb-4 block"><i class="fa fa-globe mr-2"></i>Federated</a>
|
|
</li>
|
|
<li>
|
|
<a class="font-bold text-lg mb-4 block"><i class="fa fa-envelope mr-2"></i>Direct messages</a>
|
|
</li>
|
|
<li>
|
|
<a class="font-bold text-lg mb-4 block"><i class="fa fa-star mr-2"></i>Favourites</a>
|
|
</li>
|
|
<li>
|
|
<a class="font-bold text-lg mb-4 block"><i class="fa fa-bookmark mr-2"></i>Bookmarks</a>
|
|
</li>
|
|
<li>
|
|
<a class="font-bold text-lg mb-4 block"><i class="fa fa-list mr-2"></i>Lists</a>
|
|
</li>
|
|
<li>
|
|
<a class="font-bold text-lg mb-4 block"><i class="fa fa-address-book mr-2"></i>Profile directory</a>
|
|
</li>
|
|
<li>
|
|
<a class="font-bold text-lg mb-4 block"><i class="fa fa-cog mr-2"></i>Preferences</a>
|
|
</li>
|
|
<li>
|
|
<a class="font-bold text-lg mb-4 block"><i class="fa fa-group mr-2"></i>Follows and followers</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</body>
|
|
|
|
</html> |