https://picturethewords.com/about

1<!DOCTYPE html>
2<html lang="en">
3<head>
4  <meta charset="UTF-8">
5  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6  <title>About — Picture the Words</title>
7  <meta name="description" content="Why Picture the Words exists, and how it teaches vocabulary through illustration.">
8
9  <link rel="icon" type="image/x-icon" href="assets/icons/favicon.ico">
10  <link rel="icon" type="image/png" sizes="16x16" href="assets/icons/favicon-16.png">
11  <link rel="icon" type="image/png" sizes="32x32" href="assets/icons/favicon-32.png">
12  <link rel="icon" type="image/png" sizes="192x192" href="assets/icons/favicon-192.png">
13  <link rel="apple-touch-icon" sizes="180x180" href="assets/icons/favicon-180.png">
14
15  <link rel="preconnect" href="https://fonts.googleapis.com">
16  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
17  <link href="https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght,SOFT,WONK@0,9..144,400..800,0..100,0..1;1,9..144,400..800,0..100,0..1&family=Inter:opsz,[email protected],400..800&family=Noto+Sans+JP:wght@400;600;700&family=Noto+Serif+JP:wght@600;700&display=swap" rel="stylesheet">
18
19  <!-- SEO -->
20  <link rel="canonical" href="https://picturethewords.com/about.html">
21  <meta property="og:type" content="website">
22  <meta property="og:site_name" content="Picture the Words">
23  <meta property="og:url" content="https://picturethewords.com/about.html">
24  <meta property="og:title" content="About — Picture the Words">
25  <meta property="og:description" content="Why Picture the Words exists, and how it teaches vocabulary through illustration.">
26  <meta property="og:image" content="https://picturethewords.com/assets/icons/og-image.jpg">
27  <meta name="twitter:card" content="summary_large_image">
28  <meta name="twitter:title" content="About — Picture the Words">
29  <meta name="twitter:description" content="Why Picture the Words exists, and how it teaches vocabulary through illustration.">
30  <meta name="twitter:image" content="https://picturethewords.com/assets/icons/og-image.jpg">
31  <meta name="theme-color" content="#0C3846">
32  <link rel="manifest" href="site.webmanifest">
33
34  <link rel="stylesheet" href="styles.css?v=16">
35
36
37  <!-- Supabase (CDN version - no build step / npm needed) -->
38  

38<script src="https://cdn.jsdelivr.net/npm/@supabase/supabase-js@2/dist/umd/supabase.min.js"></script>

38
39  

39<script>
40    // Global Supabase connection, used by auth.js and the account dropdown.
41    const SUPABASE_URL = "https://pqdrtqnmfzgnrderwrzl.supabase.co";
42    const SUPABASE_PUBLISHABLE_KEY = "sb_publishable_yAeNx_8QM8zLa26fQw_wMw_jelTeQep";
43    const supabaseClient = supabase.createClient(SUPABASE_URL, SUPABASE_PUBLISHABLE_KEY);
44  </script>

44
45  <style>
46    /* Inline fallback so this can't break if styles.css is stale/uncached */
47    #auth-overlay { display: none; position: fixed; inset: 0; z-index: 560;
48      background: rgba(12,56,70,.55); align-items: center; justify-content: center; }
49    #auth-overlay.open { display: flex; }
50    #review-overlay { display: none; position: fixed; inset: 0; z-index: 560;
51      background: rgba(12,56,70,.55); align-items: center; justify-content: center; }
52    #review-overlay.open { display: flex; }
53    #review-box { position: relative; background: #fff; border-radius: 16px;
54      max-width: 420px; width: 90%; padding: 32px; text-align: center; }
55    #review-card-area img { max-width: 100%; border-radius: 10px; cursor: pointer; }
56    #review-controls button { padding: 10px 20px; margin: 0 6px; border-radius: 8px;
57      border: none; font-weight: 600; cursor: pointer; }
58    .review-btn-again { background: #f4d4d0; color: #8a2e20; }
59    .review-btn-good { background: #cfe8d8; color: #1a5c33; }
60    #review-card-area img.review-crop-front { clip-path: inset(0 0 14% 0); }
61  </style>  

61<script>
62    // Offline support. Registered on every page so the whole site,
63    // not just the app, survives losing connection.
64    if ('serviceWorker' in navigator) {
65      window.addEventListener('load', () => {
66        navigator.serviceWorker.register('sw.js').catch(() => {});
67      });
68    }
69  </script>

69
70
71</head>
72<body>
73
74<!-- ═══════════ AUTH OVERLAY ═══════════ -->
75<div id="auth-overlay" onclick="if(event.target===this)closeAuth()">
76  <div class="info-box" onclick="event.stopPropagation()" style="max-width:340px;">
77    <button class="focus-close" onclick="closeAuth()" aria-label="Close">✕</button>
78    <div class="auth-tabs" style="display:flex; gap:8px; margin-bottom:14px;">
79      <button id="auth-tab-login" class="nav-info-link" onclick="setAuthTab('login')">Log In</button>
80      <button id="auth-tab-signup" class="nav-info-link" onclick="setAuthTab('signup')">Sign Up</button>
81    </div>
82    <div style="display:flex; flex-direction:column; gap:10px;">
83      <input id="auth-form-email" type="email" placeholder="Email" autocomplete="email">
84      <input id="auth-form-password" type="password" placeholder="Password" autocomplete="current-password">
85      <button id="auth-submit-btn" onclick="submitAuthForm()">Log In</button>
86      <div id="auth-message" style="font-size:13px; min-height:18px;"></div>
87    </div>
88  </div>
89</div>
90
91<!-- ═══════════ REVIEW OVERLAY ═══════════ -->
92<div id="review-overlay" onclick="if(event.target===this)closeReview()">
93  <div id="review-box" onclick="event.stopPropagation()">
94    <button class="focus-close" onclick="closeReview()" aria-label="Close">✕</button>
95    <div id="review-progress" style="font-size:13px; opacity:.7; margin-bottom:10px;"></div>
96    <div id="review-card-area"></div>
97    <div id="review-controls" style="margin-top:16px;"></div>
98  </div>
99</div>
100
101<!-- ═══════════ MY NOTES OVERLAY ═══════════ -->
102<div id="notes-overlay" onclick="if(event.target===this)closeMyNotes()">
103  <div class="info-box" onclick="event.stopPropagation()" style="max-width:520px;">
104    <button class="focus-close" onclick="closeMyNotes()" aria-label="Close">✕</button>
105    <h3 style="margin-bottom:14px;">My Notes</h3>
106    <div id="notes-list-content"></div>
107  </div>
108</div>
109
110<!-- ═══════════ MY ACCOUNT OVERLAY ═══════════ -->
111<div id="account-overlay" onclick="if(event.target===this)closeMyAccount()">
112  <div class="info-box" onclick="event.stopPropagation()" style="max-width:520px;">
113    <button class="focus-close" onclick="closeMyAccount()" aria-label="Close">✕</button>
114    <div id="account-tab-body"></div>
115  </div>
116</div>
117
118<header class="ptw-page-header-wrap">
119  <a href='/'>
120    <img class="ptw-header-banner" src="assets/icons/ptw-header.svg" alt="Picture the Words">
121  </a>
122</header>
123
124<nav class="home-nav">
125  <a class='nav-brand' href='/' style='text-decoration:none;'>
126    <img class="nav-logo" src="assets/icons/ptw-logo.png" alt="Picture the Words logo">
127    <span class="nav-brand-name">Picture the Words</span>
128  </a>
129
130  <div class="nav-links">
131    <a class='nav-info-link' href='/how-to-use'>How it works</a>
132  <a class='nav-info-link' href='/situations'>Situations</a>
133    <a class='nav-info-link' href='/pricing'>Pricing</a>
134    <a class='nav-info-link' href='/included'>What's included</a>
135    <a aria-current='page' class='nav-info-link is-current' href='/about'>About</a>
136  </div>
137
138  <div class="nav-spacer"></div>
139
140  <div class="nav-right">
141    <a class='nav-cta' href='/'>Browse the dictionary</a>
142  <div class="auth-nav-area"></div>
143  </div>
144</nav>
145
146<main class="ptw-page-content">
147  <h1>What is Picture The Words?</h1>
148  <p class="page-lede">Picture The Words (PTW) was inspired by a simple idea: how do we enable anyone from any part of the world to learn thousands of words by associating them with pictures?</p>
149
150  <p>This led to creating an intuitive learning method which combines illustrations, text, and audio.</p>
151
152  <p>The goal of PTW is to make vocabulary easier to understand, recognise, and recall by presenting concepts alongside matching illustrations.</p>
153
154  <h2>How you can use it</h2>
155  <p>There are four ways in, and they share one deck and one set of progress.</p>
156  <ul>
157    <li><strong>As a visual dictionary.</strong> Look any concept up, in any script, and get its
158    illustration, audio, meanings, related words and example sentences. Free, permanently, with no
159    account needed just to browse.</li>
160    <li><strong>As flashcards.</strong> Save what you want to keep and review it on a spaced-repetition
161    schedule, with your own notes and categories.</li>
162    <li><strong>As a browser extension</strong>, while you read. Hover a word on any page and its
163    card appears without leaving the article.</li>
164    <li><strong>On a phone or tablet</strong>, where extensions can't run at all. Add the site to
165    your home screen and look words up by pasting, sharing from another app, or tapping through a
166    passage in <a href='/reader'>

166Reader Mode</a>.</li>
167  </ul>
168
169  <h2>Where we are now</h2>
170  <p><strong>5,000 illustrated concepts</strong> in Japanese, Hindi and French, each translated into
171  English &mdash; Japanese → English, Hindi → English, French → English. Every one of them carries its illustration, its meanings, and
172  recorded audio in all four languages &mdash; not synthesised on the fly, but generated once and
173  shipped. Most carry example sentences too, and about half carry related words; those two are
174  still filling in, and <a href='/included'>What's included</a> says where they stand. Sixteen
175  categories cover everyday life, and one of them &mdash; Grammar &mdash; holds the function words no single picture can
176  carry: pronouns, postpositions, question words, negation, chosen for whether they exist across
177  many of the world's languages rather than for how common they are in English.</p>
178
179  <p>Beyond the illustrated concepts there are <a href='/situations'>Situations</a>, thirty
180  illustrated dialogue scenarios, and a dictionary fallback in all four languages for words PTW
181  doesn't teach. Everything can be <strong>downloaded for offline use</strong>, by category or all
182  at once.</p>
183
184  <p>The design deliberately does not treat English as the default source language: every language
185  is studiable from any other, rather than everything routing through English. More language pairs
186  will follow, and the concept library, illustrations, audio and learning features keep growing.
187  This release lets us gather feedback while that happens &mdash; <a href='/included'>What's
188  included</a> keeps an honest, current account of what works today and what doesn't yet.</p>
189
190  <div class="ptw-content-card">
191    <p>Your insights and support are critical in helping us to scale PTW in a way that always ensures a high quality educational experience.</p>
192  </div>
193
194  <p>Thank you for joining us at the beginning of this journey. We hope Picture The Words becomes a trusted companion throughout your language-learning experience.</p>
195</main>
196
197<footer class="ptw-footer">
198  <div class="ptw-footer-grid">
199    <div class="ptw-footer-brand">
200      <img src="assets/icons/ptw-logo.png" alt="Picture the Words">
201      <p class="ptw-footer-tagline">
202        A visual dictionary and flashcard system for languages, built on illustration
203        rather than translation.
204      </p>
205    </div>
206    <div class="ptw-footer-col">
207      <h4>Product</h4>
208      <ul>
209        <li><a href='/'>Visual dictionary</a></li>
210          <li><a href='/situations'>Situations</a></li>
211        <li><a href='/how-to-use'>Browser extension</a></li>
212        <li><a href='/pricing'>Pricing</a></li>
213        <li><a href='/included'>What's included</a></li>
214      </ul>
215    </div>
216    <div class="ptw-footer-col">
217      <h4>Learn</h4>
218      <ul>
219        <li><a href='/how-to-use'>How it works</a></li>
220        <li><a href='/included#roadmap'>Roadmap</a></li>
221        <li><a href='/about'>About the project</a></li>
222      </ul>
223    </div>
224    <div class="ptw-footer-col">
225      <h4>Company</h4>
226      <ul>
227        <li><a href='/contact'>Contact</a></li>
228        <li><a href='/terms'>Terms of Use</a></li>
229        <li><a href='/privacy'>Privacy Policy</a></li>
230      
231        <li><a href='/sources-and-licenses'>Sources &amp; Licenses</a></li>
232      </ul>
233    </div>
234  </div>
235  <div class="ptw-footer-base">
236    <p>
237      Flashcard content, structural design, and illustrations are original to Picture the Words. &copy; Picture the Words.
238    </p>
239    <p>
240      Dictionary and example-sentence data draw in part on third-party open resources, used under
241      their respective licences. See <a href='/sources-and-licenses'>Sources &amp; Licenses</a>
242      for full details and attribution.
243    </p>
244  </div>
245</footer>
246

247<script src="auth.js?v=9"></script>

247

248<script src="nav-data.js?v=2"></script>

248

249<script src="entitlement.js?v=9"></script>

249

250<script src="notes.js?v=8"></script>

250

251<script src="account.js?v=8"></script>

251

252<script src="srs.js?v=8"></script>

252
253</body>
254</html>