112 lines
3.8 kB
1
defmodule BlogWeb.KeyloggerLive do
2
use BlogWeb, :live_view
3
import BlogWeb.CoreComponents
4
require Logger
5
@meta_attrs [
6
%{name: "title", content: "See what key you are pressing, and have it remembered"},
7
%{name: "description", content: "See what key you are pressing. It also will keep what you type on hand to print if you want"},
8
%{property: "og:title", content: "See what key you are pressing, and have it remembered"},
9
%{property: "og:description", content: "See what key you are pressing. It also will keep what you type on hand to print if you want"},
10
%{property: "og:type", content: "website"}
11
]
12
13
def mount(_params, _session, socket) do
14
{:ok,
15
assign(socket,
16
pressed_key: "",
17
pressed_keys: "",
18
show_modal: true,
19
page_title: "Experiment - sorta typewriter",
20
meta_attrs: @meta_attrs
21
)}
22
end
23
24
def handle_event("keydown", %{"key" => key}, socket) do
25
Logger.info("Key pressed: #{key}")
26
pressed_keys =
27
case key do
28
"Enter" ->
29
socket.assigns.pressed_keys <> "\r\n"
30
_ -> socket.assigns.pressed_keys <> key
31
end
32
{:noreply, assign(socket, pressed_key: key, pressed_keys: pressed_keys) |> assign(show_modal: false)}
33
end
34
35
def handle_event("toggle_modal", %{"value" => _}, socket) do
36
{:noreply, assign(socket, show_modal: !socket.assigns.show_modal)}
37
end
38
def handle_event("toggle_modal", _, socket) do
39
{:noreply, assign(socket, show_modal: !socket.assigns.show_modal)}
40
end
41
42
def render(assigns) do
43
~H"""
44
<style>
45
@media print {
46
/* Hide everything by default */
47
body * {
48
visibility: hidden;
49
}
50
51
/* Only show the content we want to print */
52
#content-of-letter,
53
#content-of-letter * {
54
visibility: visible;
55
}
56
57
/* Position the content at the top of the page */
58
#content-of-letter {
59
position: absolute;
60
left: 0;
61
top: 0;
62
width: 100%;
63
text-align: left;
64
white-space: pre-wrap;
65
font-family: "Courier New", Courier, monospace;
66
font-size: 14px;
67
line-height: 1.5;
68
color: #333;
69
padding: 2rem;
70
}
71
}
72
73
.cursor {
74
display: inline-block;
75
width: 2px;
76
height: 1em;
77
background-color: #333;
78
margin-left: 1px;
79
animation: blink 1s step-end infinite;
80
}
81
</style>
82
83
<.head_tags meta_attrs={@meta_attrs} page_title={@page_title} />
84
<h1 class="text-[75px]">Pressing: <%= @pressed_key %></h1>
85
<%= if @show_modal do %>
86
<div class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center" phx-click="toggle_modal">
87
<div class="bg-white p-8 rounded-lg shadow-lg max-w-lg" phx-click-away="toggle_modal">
88
<div class="prose">
89
<p class="font-mono text-gray-800">
90
Simulate a typewriter. We server this up so that when you type out a letter its as if it were on a typewriter, and we package it up to print for whoever you would like if you press the right key shortcut or button
91
</p>
92
</div>
93
<div class="mt-6 flex justify-end">
94
<button
95
phx-click="toggle_modal"
96
class="px-4 py-2 bg-gray-800 text-gray-100 rounded hover:bg-gray-700 font-mono"
97
>
98
Close
99
</button>
100
</div>
101
</div>
102
</div>
103
<% end %>
104
<div id="content-of-letter" class="mt-4 text-gray-500" phx-window-keydown="keydown">
105
THIS COPY IS PROVIDED WITH NO COPY AND PASTE AND IS ALL HAND WRITTEN BY YOUR COMMON HUMAN FRIEND
106
<br>
107
<div class="whitespace-pre-wrap"><%= @pressed_keys %></div>
108
</div>
109
"""
110
end
111
112
end
113