Skip to content

Commit

Permalink
Merge pull request #383 from statikbe/knockknockv2
Browse files Browse the repository at this point in the history 
[Feature] improve design custom knock knock template
  • Loading branch information
@HannahDeWachter
HannahDeWachter authored Sep 12, 2024
2 parents 0feb56f + a53493f commit f227214
Show file tree
Hide file tree
Showing 2 changed files with 117 additions and 19 deletions.
5 changes: 3 additions & 2 deletions config/knock-knock.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
'enabled' => false,
'enableCpProtection' => false,
'loginPath' => 'restricted-access',
// 'template' => '_knock-knock.twig',
'template' => '_knock-knock.twig',
'siteSettings' => [],
'checkInvalidLogins' => false,
'invalidLoginWindowDuration' => '3600',
Expand All @@ -29,4 +29,5 @@
'enabled' => false,
'password' => getenv('SITE_PASSWORD'),
]
];
];

131 changes: 114 additions & 17 deletions templates/_knock-knock.twig
View file
Original file line number Diff line number Diff line change
@@ -1,25 +1,122 @@
<html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<meta name="robots" content="noindex">
{% hook 'seo-fields' %}
<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=Comfortaa:[email protected]&family=Jost:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
<style>
body{
margin: 0;
padding: 0;
font-family: "Jost", sans-serif;
background-color: rgb(249 249 249);
}
.wrapper{
background-color: #fff;
display: flex;
height: 100vh;
width: 100%;
justify-content: center;
align-items: center;
}
form{
display: flex;
flex-direction: column;
align-items: stretch;
margin: 2rem 0 0;
}
label[for="password"]{
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border-width: 0;
}
input[type="password"]{
margin-top: auto;
display: block;
appearance: none;
border-radius: .25rem;
border-width: 1px;
border-color: rgb(0 0 0 );
background-color: rgb(255 255 255);
padding: .5rem .75rem;
font-size: 1rem;
line-height: 1.5rem;
line-height: 1.25;
color: rgb(0 0 0 );
font-family: "Jost", sans-serif;
}
button{
background-color: rgb(0 0 0 / 1);
color: rgb(255 255 255 / 1);
text-decoration-line: none;
display: inline-flex;
justify-content: center;
min-height: 2.625rem;
width: 100%;
align-items: center;
border-radius: 9999px;
border: 0 none;
padding: .5rem 1.25rem;
font-size: 1rem;
line-height: 1.5rem;
font-weight: 600;
line-height: 1;
letter-spacing: .025em;
transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform;
transition-timing-function: ease-in-out;
transition-duration: .2s;
margin-top: 0.5rem;
cursor: pointer;
}
button:hover{
background-color: rgb(254 206 0);
color: rgb(0 0 0);
text-decoration-line: none;
}
.errors{
list-style-type: none;
padding: 0;
margin: .5rem 0;
color: white;
background-color: #FE3000;
border-radius: .25rem;
padding: 0.25rem;
}
</style>
</head>
<body>
<form method="post" accept-charset="utf-8">
<input type="hidden" name="action" value="knock-knock/default/answer">
<input type="hidden" name="redirect" value="{{ redirect | hash }}">
{{ csrfInput() }}
<div class="wrapper">
<div class="">
<svg class="" width="273" height="111" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 273 111" role="img" aria-label="logo"><g transform="translate(.5 .51)"><polygon points="215.075 15.556 215.075 107.809 239.321 107.809 239.321 62.803 239.321 15.556"></polygon><polygon points="263.915 65.691 241.461 65.691 241.461 62.803 239.321 62.803 247.934 107.809 272.478 107.809"></polygon><path d="M270.03854 36.4164894 246.489825 36.4164894C246.489825 46.1247333 246.639182 56.2810501 241.511238 62.8527845 247.485542 64.0974311 270.03854 66.0888658 270.03854 36.4164894ZM116.847429 89.0899361C114.407921 89.0899361 114.407921 85.5053537 114.407921 82.2194865 114.407921 74.203962 114.407921 68.0803004 119.535865 63.2012855 90.1124183 63.2012855 90.1124183 85.6049254 90.1124183 91.0315849 90.1124183 97.3046041 91.5562084 109.751071 105.944324 109.751071 122.921304 109.751071 122.37366 89.488223 119.535865 81.3233409 119.535865 85.5551396 119.535865 89.0899361 116.847429 89.0899361Z"></path><path d="M117.992504,33.8276243 C107.288542,33.8276243 96.2858657,39.8517142 90.1622042,45.6766605 L90.1622042,69.5240906 C97.8790135,61.5085661 106.890255,57.2269815 112.864559,57.2269815 C116.847429,57.2269815 119.585651,59.2184162 119.585651,63.2510714 L119.585651,81.3731268 L122.871518,81.3731268 L126.854388,107.809422 L143.831368,107.809422 L143.831368,63.2510714 C143.831368,53.8415426 142.985008,33.8276243 117.992504,33.8276243 Z"></path><circle cx="196.997" cy="18.403" r="14.437" transform="rotate(-19.33 196.997 18.403)"></circle><polygon points="175.445 36.416 175.445 15.556 158.419 15.556 154.436 31.239 146.271 36.416 146.271 49.411 151.15 49.411 151.15 107.809 175.445 107.809 175.445 49.411 184.755 49.411 184.755 107.809 209.001 107.809 209.001 36.416"></polygon><polygon points="81.499 15.556 64.522 15.556 60.54 31.239 52.375 36.416 52.375 49.411 57.254 49.411 57.254 107.809 81.499 107.809 81.499 49.411 86.926 49.411 86.926 36.416 81.499 36.416"></polygon><path d="M0.547644531,76.2949684 C9.60867223,87.646146 32.0123121,90.4839403 32.0123121,86.0529982 C32.0123121,80.7259105 0,84.3104929 0,56.9282664 C0,41.9925064 9.2103853,33.8276243 25.1418626,33.8276243 C37.638115,33.8276243 54.1670227,35.9684166 51.4288001,66.4373668 L28.5273015,66.4373668 C29.9710916,57.5256967 27.9298711,54.7874741 25.7890788,54.7874741 C23.9470018,54.7874741 22.353854,56.0819066 22.353854,59.666489 C22.353854,65.1429343 25.4903636,67.8313711 30.5187361,69.1258036 C40.5754812,71.5653111 52.0760163,73.3078164 52.0760163,89.6375806 C52.0760163,102.432548 46.599571,110 28.0792287,110 C17.3254815,110 6.82066371,107.261777 0.497858665,102.233405 L0.497858665,76.2949684 L0.547644531,76.2949684 Z"></path></g></svg>
<form method="post" accept-charset="utf-8">
<input type="hidden" name="action" value="knock-knock/default/answer">
<input type="hidden" name="redirect" value="{{ redirect | hash }}">
{{ csrfInput() }}

<label for="password">Password</label>
<input id="password" type="password" name="password" autocomplete="off" placeholder="Password" autofocus/>
<label for="password">Password</label>
<input id="password" type="password" name="password" autocomplete="off" placeholder="Password" autofocus />

<button type="submit" name="unlock" value="Unlock">Unlock</button>
<button type="submit" name="unlock" value="Unlock">Unlock</button>

{% if errors is defined %}
<ul class="errors">
{% for error in errors %}
<li>{{ error }}</li>
{% endfor %}
</ul>
{% endif %}
</form>
{% if errors is defined %}
<ul class="errors">
{% for error in errors %}
<li>{{ error }}</li>
{% endfor %}
</ul>
{% endif %}
</form>
</div>
</div>
</body>
</html>
</html>

0 comments on commit f227214

Please sign in to comment.