Skip to content

Commit cef4bb0

Browse files
author
nostowe
committed
updated
1 parent 1b3ffbe commit cef4bb0

File tree

1 file changed

+79
-4
lines changed

1 file changed

+79
-4
lines changed

test/index.html

Lines changed: 79 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,87 @@
1-
<html>
1+
<!DOCTYPE html>
2+
<html lang="en">
23
<head>
4+
<title>Turnstile &dash; Dummy Login Demo</title>
5+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.2.1/css/bootstrap.min.css" integrity="sha512-siwe/oXMhSjGCwLn+scraPOWrJxHlUgMBMZXdPe2Tnk3I0x3ESCoLz7WZ5NTH6SZrywMY+PB1cjyqJ5jAluCOg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
6+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-icons/1.9.1/font/bootstrap-icons.min.css" integrity="sha512-5PV92qsds/16vyYIJo3T/As4m2d8b6oWYfoqV+vtizRB6KhF1F9kYzWzQmsO6T3z3QG2Xdhrx7FQ+5R1LiQdUA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
7+
<script src="https://challenges.cloudflare.com/turnstile/v0/api.js?onload=_turnstileCb" async defer></script>
8+
<style>
9+
html,
10+
body {
11+
height: 100%;
12+
}
313

14+
body {
15+
display: flex;
16+
align-items: center;
17+
padding-top: 40px;
18+
padding-bottom: 40px;
19+
background-color: #fefefe;
20+
}
21+
22+
.form-signin {
23+
width: 100%;
24+
max-width: 330px;
25+
padding: 15px;
26+
margin: auto;
27+
}
28+
29+
.form-signin .checkbox {
30+
font-weight: 400;
31+
}
32+
33+
.form-signin .form-floating:focus-within {
34+
z-index: 2;
35+
}
36+
37+
.form-signin input[type="text"] {
38+
margin-bottom: -1px;
39+
border-bottom-right-radius: 0;
40+
border-bottom-left-radius: 0;
41+
}
42+
43+
.form-signin input[type="password"] {
44+
margin-bottom: 10px;
45+
border-top-left-radius: 0;
46+
border-top-right-radius: 0;
47+
}
48+
</style>
449
</head>
550
<body>
6-
<h1>test test</h1>
51+
<main class="form-signin">
52+
<form method="POST" action="/handler">
53+
<h2 class="h3 mb-3 fw-normal">Turnstile &dash; Dummy Login Demo</h2>
54+
55+
<div class="form-floating">
56+
<input type="text" id="user" class="form-control">
57+
<label for="user">User name</label>
58+
</div>
59+
<div class="form-floating">
60+
<input type="password" id="pass" class="form-control" autocomplete="off" readonly value="CorrectHorseBatteryStaple">
61+
<label for="pass">Password (dummy)</label>
62+
</div>
763

8-
<h3>taco</h3>
64+
<div class="checkbox mb-3">
65+
<!-- The Turnstile widget will be injected in the following div. -->
66+
<div id="myWidget"></div>
67+
<!-- end. -->
68+
</div>
69+
<button class="w-100 btn btn-lg btn-primary" type="submit">Sign in</button>
70+
<p class="mt-5 mb-3 text-muted"><a href="https://github.com/cloudflare/turnstile-demo-workers"><i class="bi bi-github"></i> See code</a></p>
71+
<p class="mt-5 mb-3 text-muted">Go to the <a href="/">implicit render demo</a></p>
72+
</form>
73+
</main>
74+
<script>
75+
// This function is called when the Turnstile script is loaded and ready to be used.
76+
// The function name matches the "onload=..." parameter.
77+
function _turnstileCb() {
78+
console.debug('_turnstileCb called');
979

80+
turnstile.render('#myWidget', {
81+
sitekey: '0x4AAAAAAAJ5XO7IFh_yDRh8',
82+
theme: 'light',
83+
});
84+
}
85+
</script>
1086
</body>
1187
</html>
12-

0 commit comments

Comments
 (0)