Skip to content

Instantly share code, notes, and snippets.

@palcodes

palcodes/index.html

Last active January 8, 2021 16:19
Show Gist options
  • Save palcodes/adeef3ac424ae1f1438d8c9e10aa8a32 to your computer and use it in GitHub Desktop.
Save palcodes/adeef3ac424ae1f1438d8c9e10aa8a32 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>{{ Name }}</title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<script type="module" src="/js/bottomsheet_controller.js"></script>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link rel="stylesheet" href="../style.css">
<script
src="https://cdn.skypack.dev/pin/@hotwired/[email protected]/min/@hotwired/turbo.js"></script>
</head>
<body class="font-main">
<div class="grid">
<div class="bg-gray-darkest grid grid-cols-2 divide-x divide-gray-light justify-items-auto">
<a data-turbo-frame="body-edit" class="p-2 text-white text-sm font-semibold text-center"
href="{{Username}}/edit">Edit</a>
<a class="p-2 text-white text-sm font-semibold text-center" href="">Sign Out</a>
</div>
<turbo-frame id="body-edit">
{{!-- The Header Card --}}
<div class="m-4 grid grid-flow-col border rounded-md shadow-md p-4">
<div class="grid border rounded-md w-6 p-12">
</div>
<div class="justify-items-end">
<h1 class="text-xl font-bold text-right">{{ Name }}</h1>
<div class="text-md font-light text-right">
{{ Email }}</div>
</div>
</div>
{{!-- The Bio Card --}}
<div class="m-4 rounded-md bg-gray-lightest mt-6 mb-6">
<p class="m-2 p-2">{{ Bio }}</p>
</div>
{{!-- The Blobs/Sections area --}}
<div class="m-4">
{{!-- <div class="flex flex-row mb-2">
<p class="text-sm">Experience</p>
<hr class="flex-1 mt-2.5 ml-6 bg-gray-300" />
</div> --}}
{{#if Blobs}}
{{!-- Here comes the blobs part --}}
{{> blob }}
{{else}}
<h2 class="font-light text-gray-dark text-4xl">Start by adding your experience, maybe?</h2>
{{/if}}
</div>
<div class="grid">
{{!-- The FAB Button --}}
<div class="fixed right-5 bottom-0 m-2">
<button id="fab" class="text-center text-white px-4 h-10 bg-gray-darkest rounded-full hover:bg-gray-800 active:shadow-2xl mouse shadow-2xl
transition ease-in duration-200 focus:outline-none">
<span>Add</span>
</button>
</div>
{{!-- The bottomsheet that's hidden by default --}}
<div id="bottomsheet"
class="fixed w-full hidden bottom-0 shadow-2xl bg-gray-100 p-5 rounded-t-2xl transition ease-in-out duration-200">
<p class="font-semibold ml-2 mb-4">Add a new Blob about you</p>
<ul>
<li class="p-2"><a>Work Experience</a></li>
<hr>
<li class="p-2"><a>Education</a></li>
<hr>
<li class="p-2"><a>Media</a></li>
<hr>
<li class="p-2"><a>Links</a></li>
<hr>
</ul>
</div>
</div>
</turbo-frame>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment