go
/
twitter-for-coders
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
This is an idea for a Twitter clone for programmers, similar to how Dribbble is twitter for designers. It'll most likely not feature any images other than people's avatars, and no videos, or audio. Just text. 'Cause we're coders.
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
1 Commit
1 Branch
0 Tags
486 KiB
Tag: Branch: Tree: b959361efc
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from 'b959361efc'
${ noResults }
twitter-for-coders/pages/examples/twitch.html

204 lines
7.9 KiB
Raw Normal View History Unescape

Initial commit with a simple starter UI for mobile.
3 weeks ago
<div class="text-gray-950 bg-gray-200">
<bar class="bg-gray-400 justify-evenly items-center">
<img src="/icons/twitch.svg" />
<span>Browse</span>
<img src="/icons/menu.svg" />
<bar class="p-0! bg-gray-300 rounded-lg border-1 border-gray-700">
<input placeholder="Search" />
<img src="/icons/search.svg" />
</bar>
<img src="/icons/crown.svg" />
<button type="button">Log In</button>
<button type="button">Sign Up</button>
<img src="/icons/person-standing.svg" />
</bar>
<div class="p-1">
<bar>
<img src="/icons/chevron-left.svg" />
<shape class="video">
Main Video
</shape>
<img src="/icons/chevron-right.svg" />
</bar>
<block>
<a class="text-xl">Live on Twitch</a>
<grid class="grid-cols-2 p-0! gap-2">
<block class="p-0!">
<shape class="video">Sample Video</shape>
<div class="flex align-top gap-3">
<shape class="bg-green-400! top-3 left-3 rounded-full aspect-square! max-w-15 max-h-15">Avatar</shape>
<div class="flex flex-col gap-1">
<span class="font-bold">Title</span>
<span>Name</span>
<span>Game Title</span>
<span>
<a class="bg-gray-700 text-gray-300 rounded-lg p-1" href="#">Pill</a>
<a class="bg-gray-700 text-gray-300 rounded-lg p-1" href="#">Pill</a>
<a class="bg-gray-700 text-gray-300 rounded-lg p-1" href="#">Pill</a>
<a class="bg-gray-700 text-gray-300 rounded-lg p-1" href="#">Pill</a>
</span>
</div>
</div>
</block>
<block class="p-0!">
<shape class="video">Sample Video</shape>
<div class="flex align-top gap-3">
<shape class="bg-green-400! top-3 left-3 rounded-full aspect-square! max-w-15 max-h-15">Avatar</shape>
<div class="flex flex-col gap-1">
<span class="font-bold">Title</span>
<span>Name</span>
<span>Game Title</span>
<span>
<a class="bg-gray-700 text-gray-300 rounded-lg p-1" href="#">Pill</a>
<a class="bg-gray-700 text-gray-300 rounded-lg p-1" href="#">Pill</a>
<a class="bg-gray-700 text-gray-300 rounded-lg p-1" href="#">Pill</a>
<a class="bg-gray-700 text-gray-300 rounded-lg p-1" href="#">Pill</a>
</span>
</div>
</div>
</block>
</bar>
</block>
<div class="flex justify-center items-center">
<a href="#">Show more v</a>
</div>
<block>
<span><a href="#">Categories</a> we think you'll like</span>
<grid class="grid-cols-4 p-0! gap-2">
<block class="p-0!">
<shape class="aspect-[9/12]!">Category</shape>
<div class="flex flex-col gap-1">
<span class="font-bold">Title</span>
<span>Name</span>
<span>Game Title</span>
<span>
<a class="bg-gray-700 text-gray-300 rounded-lg p-1" href="#">Pill</a>
<a class="bg-gray-700 text-gray-300 rounded-lg p-1" href="#">Pill</a>
<a class="bg-gray-700 text-gray-300 rounded-lg p-1" href="#">Pill</a>
<a class="bg-gray-700 text-gray-300 rounded-lg p-1" href="#">Pill</a>
</span>
</div>
</block>
<block class="p-0!">
<shape class="aspect-[9/12]!">Category</shape>
<div class="flex flex-col gap-1">
<span class="font-bold">Title</span>
<span>Name</span>
<span>Game Title</span>
<span>
<a class="bg-gray-700 text-gray-300 rounded-lg p-1" href="#">Pill</a>
<a class="bg-gray-700 text-gray-300 rounded-lg p-1" href="#">Pill</a>
<a class="bg-gray-700 text-gray-300 rounded-lg p-1" href="#">Pill</a>
<a class="bg-gray-700 text-gray-300 rounded-lg p-1" href="#">Pill</a>
</span>
</div>
</block>
<block class="p-0!">
<shape class="aspect-[9/12]!">Category</shape>
<div class="flex flex-col gap-1">
<span class="font-bold">Title</span>
<span>Name</span>
<span>Game Title</span>
<span>
<a class="bg-gray-700 text-gray-300 rounded-lg p-1" href="#">Pill</a>
<a class="bg-gray-700 text-gray-300 rounded-lg p-1" href="#">Pill</a>
<a class="bg-gray-700 text-gray-300 rounded-lg p-1" href="#">Pill</a>
<a class="bg-gray-700 text-gray-300 rounded-lg p-1" href="#">Pill</a>
</span>
</div>
</block>
<block class="p-0!">
<shape class="aspect-[9/12]!">Category</shape>
<div class="flex flex-col gap-1">
<span class="font-bold">Title</span>
<span>Name</span>
<span>Game Title</span>
<span>
<a class="bg-gray-700 text-gray-300 rounded-lg p-1" href="#">Pill</a>
<a class="bg-gray-700 text-gray-300 rounded-lg p-1" href="#">Pill</a>
<a class="bg-gray-700 text-gray-300 rounded-lg p-1" href="#">Pill</a>
<a class="bg-gray-700 text-gray-300 rounded-lg p-1" href="#">Pill</a>
</span>
</div>
</block>
</grid>
</block>
<grid class="grid-cols-3">
<stack class="p-0!">
<button type="button" class="rounded-xxl text-left text-xxl">Games</button>
<img class="left-40 bottom-6 max-w-20 max-h-20" src="/icons/gamepad.svg" />
</stack>
<stack class="p-0!">
<button type="button" class="rounded-xxl text-left text-xxl">IRL</button>
<img class="left-40 bottom-6 max-w-20 max-h-20" src="/icons/mic.svg" />
</stack>
<stack class="p-0!">
<button type="button" class="rounded-xxl text-left text-xxl">Music</button>
<img class="left-40 bottom-6 max-w-20 max-h-20" src="/icons/headphones.svg" />
</stack>
<stack class="p-0!">
<button type="button" class="rounded-xxl text-left text-xxl">Creative</button>
<img class="left-40 bottom-6 max-w-20 max-h-20" src="/icons/paintbrush.svg" />
</stack>
<stack class="p-0!">
<button type="button" class="rounded-xxl text-left text-xxl">Esports</button>
<img class="left-40 bottom-6 max-w-20 max-h-20" src="/icons/trophy.svg" />
</stack>
</grid>
<block>
<a class="text-xl">Live on Twitch</a>
<grid class="grid-cols-2 p-0! gap-2">
<block class="p-0!">
<shape class="video">Sample Video</shape>
<div class="flex align-top gap-3">
<shape class="bg-green-400! top-3 left-3 rounded-full aspect-square! max-w-15 max-h-15">Avatar</shape>
<div class="flex flex-col gap-1">
<span class="font-bold">Title</span>
<span>Name</span>
<span>Game Title</span>
<span>
<a class="bg-gray-700 text-gray-300 rounded-lg p-1" href="#">Pill</a>
<a class="bg-gray-700 text-gray-300 rounded-lg p-1" href="#">Pill</a>
<a class="bg-gray-700 text-gray-300 rounded-lg p-1" href="#">Pill</a>
<a class="bg-gray-700 text-gray-300 rounded-lg p-1" href="#">Pill</a>
</span>
</div>
</div>
</block>
<block class="p-0!">
<shape class="video">Sample Video</shape>
<div class="flex align-top gap-3">
<shape class="bg-green-400! top-3 left-3 rounded-full aspect-square! max-w-15 max-h-15">Avatar</shape>
<div class="flex flex-col gap-1">
<span class="font-bold">Title</span>
<span>Name</span>
<span>Game Title</span>
<span>
<a class="bg-gray-700 text-gray-300 rounded-lg p-1" href="#">Pill</a>
<a class="bg-gray-700 text-gray-300 rounded-lg p-1" href="#">Pill</a>
<a class="bg-gray-700 text-gray-300 rounded-lg p-1" href="#">Pill</a>
<a class="bg-gray-700 text-gray-300 rounded-lg p-1" href="#">Pill</a>
</span>
</div>
</div>
</block>
</bar>
</block>
<block class="justify-center items-center">
<h4>an amazon company</h4>
</block>
</div>
</div>