-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
157 lines (126 loc) · 4 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
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="A “Distraction-Free Phone” life.">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Phone. WTF!</title>
<meta property="og:title" content="Phone. WTF!">
<meta property="og:type" content="website">
<meta property="og:url" content="https://phone.wtf/">
<meta property="og:image" content="https://phone.wtf/phone.wtf.jpg">
<style>
:root {
/* Tailwind inspired */
--color-zinc-50: #fafafa;
--color-zinc-100: #f4f4f5;
--color-zinc-200: #e4e4e7;
--color-zinc-300: #d4d4d8;
--color-zinc-400: #a1a1aa;
--color-zinc-500: #71717a;
--color-zinc-600: #52525b;
--color-zinc-700: #3f3f46;
--color-zinc-800: #18181b;
--color-zinc-900: #18181b;
--font-family-sans-serif: system-ui, -apple-system, 'Segoe UI', 'Roboto', Ubuntu, Cantarell, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
--font-family-serif: 'Iowan Old Style', 'Apple Garamond', Baskerville, 'Times New Roman', 'Droid Serif', Times, 'Source Serif Pro', serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
--border-radius: 13px;
}
html {
background: var(--color-zinc-100);
}
body {
margin: auto;
width: 90%;
max-width: 600px;
font-family: var(--font-family-serif);
font-size: 18px;
line-height: 1.6;
color: var(--color-zinc-700);
/* vertical center */
display: grid;
min-height: 100vh;
place-content: center;
}
ul,
ol {
padding: 0 0.5rem;
margin: 0 1rem;
}
h1 {
margin: 0;
padding: 2rem;
font-size: 1.6rem;
}
h2 {
margin: 0;
padding: 0 0 1rem;
font-size: 1.4rem;
}
p {
font-size: 1rem;
}
main {
padding: 1.6rem 2rem;
background: var(--color-zinc-50);
border-radius: var(--border-radius);
box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px;
}
section {
margin: 4em auto;
padding: 1rem;
}
footer {
margin: 1rem;
padding: 1rem 2rem;
font-family: var(--font-family-sans-serif);
}
.wrapper {
}
</style>
</head>
<body>
<h1>Phone. WTF!</h1>
<main>
<h2>I chose a “Distraction-Free Phone” life.</h2>
<ol>
<li>Please call once; not repeatedly. I’ll call you back.</li>
<li>My phone is always silent and on DND (do not disturb).</li>
<li>Email and other forms of texts are preferred alternatives.</li>
<li>I prefer to avoid all unscheduled and unknown calls.</li>
<!-- <li>No. Nothing is an urgency.</li> -->
</ol>
</main>
<!--
I need to re-think this.
The intelligent people at HackerNews think this is a privilege rambling.
Stick with a minimal simple messaging.
https://news.ycombinator.com/item?id=37228412
https://news.ycombinator.com/item?id=28258363
<section>
<h3>Society</h3>
<p>
We should start treating loud ringing phones in public like smoking - an irritant and polluting agent for people around. Almost all phones have a way to indicate an incoming phone call -- be it the vibrate mode or the blinking light. It is possible not to have phones that ring every time there is an incoming call.
</p>
<h3>Phone Makers</h3>
<p>
Phone makers can help transition to a better world by implementing silent phones by default.
</p>
<ol>
<li>Phones are on silent mode by default and have to explicitely turn the mode off (reverse of the current trend).</li>
<li>Make vibrate mode default instead of ringing sound.</li>
<li>Notifications, alerts, etc. should have sound disabled by default except for emergencies and government mandated global alerts.</li>
</ol>
</section>
-->
<footer>
<p>
<small>
License MIT
<a href="//github.com/oinam/no.phone.wtf">Contribute / Source / Copy</a>
</small>
</p>
</footer>
</body>
</html>