thp-web/static/index.html

104 lines
4.0 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>THP: Typed Hypertext Processor</title>
<!-- Tailwind output -->
<link href="/css/out.css" rel="stylesheet">
<link rel="stylesheet" href="/css/xcode-colors.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link
href="https://fonts.googleapis.com/css2?family=Fira+Sans:wght@400;500;600;700;800;900&display=swap"
rel="stylesheet">
<link
href="https://fonts.googleapis.com/css2?family=Fira+Code&family=Josefin+Sans:ital,wght@0,400;1,700&display=swap"
rel="stylesheet">
</head>
<body class="bg-c-bg text-c-text">
<nav class="sticky top-0 h-12 border-b border-[rgba(150,150,150,0.25)] bg-c-nav-bg backdrop-blur-md z-20">
<div class="container mx-auto h-full w-full flex items-center">
<button class="font-display font-bold italic text-2xl">
<span class="text-[#F5A9B8]">t</span><span>h</span><span class="text-[#5BCEFA]">p</span>
</button>
</div>
</nav>
<div class="container mx-auto py-16 grid grid-cols-2 gap-4 px-10">
<div class="pl-10">
<h1 class="font-display font-bold text-[5rem] leading-tight">
Typed
<br>
Hypertext
<br>
Processor
</h1>
<p class="font-display text-c-text opacity-60 text-xl pt-4">
Syntax, stdlib and types for PHP
<br>
Written in Rust
</p>
</div>
<div class="bg-[var(--code-theme-bg-color)] p-6 rounded-lg relative">
<span class="absolute inline-block h-[35rem] w-[35rem] -z-10 top-1/2 left-1/2 rounded-full
transform -translate-x-1/2 -translate-y-1/2" style="background-image: conic-gradient(from 180deg at 50% 50%,#5BCEFA 0deg,#a853ba 180deg,#F5A9B8 1turn);
filter: blur(75px); opacity: 0.75;">
</span>
<svg xmlns="http://www.w3.org/2000/svg" width="54" height="14" viewBox="0 0 54 14">
<g fill="none" fill-rule="evenodd" transform="translate(1 1)">
<circle cx="6" cy="6" r="6" fill="#FF5F56" stroke="#E0443E" stroke-width=".5"></circle>
<circle cx="26" cy="6" r="6" fill="#FFBD2E" stroke="#DEA123" stroke-width=".5"></circle>
<circle cx="46" cy="6" r="6" fill="#27C93F" stroke="#1AAB29" stroke-width=".5"></circle>
</g>
</svg>
<div class="h-1"></div>
<pre style="padding: 0 !important; border: none !important;">
<code class="language-thp">
fun find_person(Str person_id) -> Result[Str] {
val person_id = try person_id.parse[Int]()
try Person::find_by_id(person_id)
}
val id = POST::get("person_id") ?: die
val person = find_person(person_id: id) ?: die
print(
&lt;a href="/person/reports/{person.id}"&gt;
Hello {person.name}
&lt;/a&gt;
)
</code>
</pre>
</div>
</div>
<div class="max-w-[70rem] mx-auto text-center">
<a
class="inline-block font-display text-lg border-2 border-pink-400 hover:bg-pink-400 transition-colors
hover:text-c-bg py-3 px-8 mx-6 rounded"
href="/learn/"
>
Learn
</a>
<a
class="inline-block font-display text-lg border-2 border-sky-400 py-3 px-8 mx-6 rounded
transition-colors hover:text-black hover:bg-sky-400"
href="/install/"
>
Install
</a>
</div>
<script src="/js/prism.min.js"></script>
<script src="/js/prism.thp.js"></script>
</body>
</html>