-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
135 lines (118 loc) · 6.51 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
<!DOCTYPE html>
<html lang="en">
<head>
<title>⚡ZAP⚡</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="./css/output.css" rel="stylesheet">
<script src="./language-highlight/highlight.min.js"></script>
<link rel="stylesheet" href="./language-highlight/styles/atom-one-dark.css">
<script>hljs.highlightAll();</script>
<!-- Hamburger menu icon -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script>
// Toggle between showing and hiding the navigation menu links.
function toggleMenu() {
const x = document.getElementById("links");
x.classList.toggle("hidden");
}
</script>
</head>
<body class="h-screen">
<div id="header" class="flex justify-between items-center py-2 px-4 md:px-10 border-b-zap-yellow border-b-solid border-b-2">
<span class="text-3xl font-bold hover:underline decoration-zap-yellow"><a href="index.html">⚡ZAP⚡</a></span>
<div class="hidden sm:flex gap-5">
<span class="text-xl hover:underline decoration-zap-yellow"><a href="learn.html">Learn</a></span>
<span class="text-xl hover:underline decoration-zap-yellow"><a href="https://zigzap.org/zap" target="_blank" rel="noopener noreferrer">Docs</a></span>
<span class="text-xl hover:underline decoration-zap-yellow"><a href="https://github.com/zigzap/zap" target="_blank" rel="noopener noreferrer">GitHub</a></span>
</div>
<button class="block sm:hidden" onclick="toggleMenu()">
<i class="fa fa-bars fa-lg"></i>
</button>
</div>
<div id="links" class="hidden sm:hidden py-2 flex flex-col gap-2 justify-center items-center border-b-zap-yellow border-b-solid border-b-2">
<span class="text-xl hover:underline decoration-zap-yellow"><a href="learn.html">Learn</a></span>
<span class="text-xl hover:underline decoration-zap-yellow"><a href="https://zigzap.org/zap" target="_blank" rel="noopener noreferrer">Docs</a></span>
<span class="text-xl hover:underline decoration-zap-yellow"><a href="https://github.com/zigzap/zap" target="_blank" rel="noopener noreferrer">GitHub</a></span>
</div>
<div class="my-2 sm:my-14" />
<div class="pt-5 mb-10 mx-auto px-5 w-full lg:max-w-[120ch]">
<div id="title" class="flex justify-center items-center flex-col">
<h1 class="text-5xl font-bold mb-3">⚡ZAP⚡</h1>
<h2 class="text-2xl font-medium w-full md:w-[50%] text-center opacity-65">Unleash the Low-Level Power of
Zig for Blazingly Fast and Robust Web Applications.</h3>
<button
onclick="location.href='learn.html';"
class="text-white text-xl bg-zap-red px-8 py-2 rounded-lg mt-9 hover:underline decoration-zap-yellow">Get
Started</button>
</div>
<div class="my-16 lg:my-32" />
<div id="features" class="grid grid-rows-4 sm:grid-cols-2 sm:grid-rows-2 gap-8 sm:gap-16 text-center">
<div class="flex items-center justify-top flex-col">
<h3 class="text-2xl font-semibold">Blazingly Fast Performance</h3>
<p class="opacity-65 text-xl">Zap leverages the facilitation of the powerful evented networking C
library,
facil.io, to deliver exceptional speed.</p>
</div>
<div class="flex items-center justify-top flex-col">
<h3 class="text-2xl font-semibold">Robust and Stable Operation</h3>
<p class="opacity-65 text-xl">With over six months of successful production use, Zap has proven to be
extremely
robust and stable.</p>
</div>
<div class="flex items-center justify-top flex-col">
<h3 class="text-2xl font-semibold">Memory-Safe Development</h3>
<p class="opacity-65 text-xl">Zap is built with Zig's strengths in mind, ensuring memory safety and
error
handling.</p>
</div>
<div class="flex items-center justify-top flex-col">
<h3 class="text-2xl font-semibold">TLS/HTTPS Support</h3>
<p class="opacity-65 text-xl">Zap supports secure communication with TLS/HTTPS, allowing for encrypted
data
transmission.</p>
</div>
</div>
<div class="my-16 lg:my-32" />
<div id="code-example" class="flex flex-col md:flex-row md:gap-10 md:items-center">
<div class="w-full lg:w-auto">
<div class="block lg:hidden mb-5">
<h3 class="text-3xl font-semibold underline decoration-zap-yellow">Hello, Zap!</h3>
<p class="text-lg">Getting started with Zap is simple! Take a look at the <a href="#"
class="underline decoration-zap-yellow" target="_blank" rel="noopener noreferrer">learn</a>
page to see what else Zap can do or jump straight into the <a href="#"
class="underline decoration-zap-yellow" target="_blank" rel="noopener noreferrer">docs</a>.</p>
</div>
<pre>
<code class="language-zig rounded-lg !pl-7 !pr-14">const std = @import("std");
const zap = @import("zap");
fn on_request(r: zap.Request) void {
r.sendBody("Hello, Zap!") catch return;
}
pub fn main() !void {
var listener = zap.HttpListener.init(.{
.port = 3000,
.on_request = on_request,
.log = true,
.max_clients = 100000,
});
try listener.listen();
std.debug.print("Listening on 0.0.0.0:3000\n", .{});
zap.start(.{
.threads = 2,
.workers = 1, // 1 worker enables sharing state between threads
});
}</code>
<pre>
</div>
<div class="hidden lg:block">
<h3 class="text-3xl font-semibold underline decoration-zap-yellow mb-2">Hello, Zap!</h3>
<p class="text-lg">Getting started with Zap is simple! Take a look at the <a href="learn.html"
class="underline decoration-zap-yellow">learn</a>
page to see what else Zap can do or jump straight into the <a href="https://zigzap.org/zap"
class="underline decoration-zap-yellow" target="_blank" rel="noopener noreferrer">docs</a>.</p>
</div>
</div>
</div>
</body>
</html>