-
Notifications
You must be signed in to change notification settings - Fork 47
/
index.html
101 lines (88 loc) · 4.68 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
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Display Large Text – Large-Type.com</title>
<meta name="viewport" content="width=device-width, user-scalable=no">
<meta name="description" content="Display & share text in a large font directly from your browser. Read phone numbers, passwords, IP addresses, etc from across the room.">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Large-type utility website">
<meta name="twitter:description" content="Display & share text in a large font directly from your browser. Read phone numbers, passwords, IP addresses, etc from across the room.">
<meta name="twitter:creator" content="@dbader_org">
<meta name="twitter:image" content="http://large-type.com/twitter-card.png?v2">
<meta property="og:title" content="Large-type utility website">
<meta property="og:type" content="website">
<meta property="og:url" content="http://large-type.com/">
<meta property="og:description" content="Display & share text in a large font directly from your browser. Read phone numbers, passwords, IP addresses, etc from across the room.">
<meta property="og:image" content="http://large-type.com/twitter-card.png?v2">
<link rel="icon" type="image/png" href="icon.png">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<!-- Content -->
<div class="main">
<span class="inputarea">
<input type="text" class="inputbox" tabindex="1" placeholder="Enter your text here" />
<span class="button-row">
<a href="" class="js-help-button">What is this?</a>
<a href="" class="js-share-button">Share this text</a>
</span>
</span>
<ul class="text">
<template id="charbox-template">
<li class="charbox">
<span class="char"></span>
</li>
</template>
</ul>
<span class="about">
Made with love by <a href="https://dbader.org">Dan Bader</a> —
Fork or suggest edits on <a href="https://github.com/dbader/large-type.com">GitHub</a> —
<a href="https://twitter.com/share" class="twitter-share-button"
data-url="http://large-type.com"
data-text="Nice utility website to display & share text in a large font directly from your browser"
data-via="dbader_org" data-related="dbader_org">Tweet</a>
</span>
</div>
<!-- Modals -->
<div class="modal js-help-modal">
<h2>What is large-type.com?</h2>
<p>Large-type.com lets you <strong>display & share text in a very large font</strong> directly from your browser. Whoa!</p>
<p>That's handy whenever you need to <strong>read something on your screen from further away</strong>—for example, phone numbers and passwords. Nice!</p>
<p>Even better, when you share text with large-type.com <strong>only the person with the link sees your text</strong>. Rendering happens locally on your browser and your text is not transmitted to any servers. How cool!</p>
<h2>What can I use it for?</h2>
<ul>
<li>
Read a phone number from across the room:<br><a target="_blank" href="/#(555)-123-456">large-type.com/#(555)-123-456</a>
</li>
<li>
Share your IP address with a co-worker:<br><a target="_blank" href="/#192.168.1.23">large-type.com/#192.168.1.23</a>
</li>
<li>
Show your friend the WiFi password:<br><a target="_blank" href="/#P4%24%24w0rd">large-type.com/#P4$$w0rd</a>
</li>
<li>
Profess your love from runaway train:<br><a target="_blank" href="/#I❤U">large-type.com/#I❤U</a>
</li>
</ul>
<p><a target="_blank" href="https://github.com/dbader/large-type.com#faqs">See more examples</a></p>
<h2>Quick, tell your friends!</h2>
<p>
<a href="https://twitter.com/share" class="twitter-share-button"
data-url="http://large-type.com"
data-text="Nice utility website to display & share text in a large font directly from your browser"
data-size="large"
data-via="dbader_org" data-related="dbader_org">Tweet</a>
</p>
<button class="js-modal-close">Close</button>
</div>
<div class="modal js-share-modal">
<h2>Copy the link below:</h2>
<input type="text" class="js-share-link" value=""/>
<p><a href="https://github.com/dbader/large-type.com/blob/gh-pages/README.md#how-secure-is-it">How secure is this?</a></p>
<button class="js-modal-close">Close</button>
</div>
<script src="scripts.js"></script>
<script async src="https://platform.twitter.com/widgets.js"></script>
</body>
</html>