Val Town Code SearchReturn to Val Town

17    return false;
18  });
19  const [imageData, setImageData] = useState(() => {
20    if (typeof localStorage !== 'undefined') {
21      return localStorage.getItem('imageData') || null;
22    }
23    return null;
84  };
85
86  const handleImageUpload = (e) => {
87    const file = e.target.files[0];
88    if (file) {
90      reader.onloadend = () => {
91        const dataUrl = reader.result;
92        setImageData(dataUrl);
93        if (typeof localStorage !== 'undefined') {
94          localStorage.setItem('imageData', dataUrl);
95        }
96      };
130        autoFocus
131      />
132      <div className="image-upload">
133        <input
134          type="file"
135          accept="image/*"
136          onChange={handleImageUpload}
137          id="image-upload"
138        />
139        <label htmlFor="image-upload" className="upload-label">Choose an image</label>
140      </div>
141      {imageData && (
142        <div className="image-container">
143          <img src={imageData} alt="Uploaded image" className="uploaded-image" />
144        </div>
145      )}
282}
283
284.image-upload {
285  margin-top: 1rem;
286}
304}
305
306.image-container {
307  margin-top: 1rem;
308  max-width: 100%;
309}
310
311.uploaded-image {
312  max-width: 100%;
313  height: auto;

3This is a lightweight Blob Admin interface to view and debug your Blob data.
4
5![b7321ca2cd80899250589b9aa08bc3cae9c7cea276282561194e7fc537259b46.png](https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/311a81bb-18d8-4583-b7e3-64bac326f700/public)
6
7## Installation

586  height: 100%;
587  background: linear-gradient(0deg, rgba(0, 20, 0, 0.8) 25%, rgba(0, 0, 0, 0) 100%),
588              url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><text x="10" y="30" fill="%230f0" font-family="monospace" font-size="20">10</text><text x="50" y="70" fill="%230f0" font-family="monospace" font-size="20">01</text></svg>');
589  opacity: 0.1;
590  z-index: -1;

10
11<div align="center">
12<img src="https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/67a1d35e-c37c-41a4-0e5a-03a9ba585d00/public" width="500px"/>
13</div>

3View and interact with your Val Town SQLite data. It's based off Steve's excellent [SQLite Admin](https://www.val.town/v/stevekrouse/sqlite_admin?v=46) val, adding the ability to run SQLite queries directly in the interface. This new version has a revised UI and that's heavily inspired by [LibSQL Studio](https://github.com/invisal/libsql-studio) by [invisal](https://github.com/invisal). This is now more an SPA, with tables, queries and results showing up on the same page. 
4
5![image.webp](https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/c8e102fd-39ca-4bfb-372a-8d36daf43900/public)
6
7## Install 

30    content: "New user! " + data.email_addresses[0].email_address
31      + " "
32      + data.profile_image_url,
33  });
34

378  font-family: 'Roboto', sans-serif;
379  background-color: #1a1a1a;
380  background-image: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23333333' fill-opacity='0.4' fill-rule='evenodd'%3E%3Cpath d='M0 40L40 0H20L0 20M40 40V20L20 40'/%3E%3C/g%3E%3C/svg%3E");
381  display: flex;
382  justify-content: center;

1
2![Screenshot 2024-10-19 at 1.53.26 PM.png](https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/cf3d2427-431f-4063-a339-77fccd3aad00/public)
3Project : Whack-a-Ghost
4

182  margin: 0;
183  padding: 20px;
184  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAZdEVYdFNvZnR3YXJlAHBhaW50Lm5ldCA0LjAuMjHxIGmVAAACkElEQVRoQ+2ZS27CMBCGnUUlWPQAiC1CgkNwlJ6nJ+AYvUJXqGJRVV2VBXKBJqEJSZ3/D4wxrWOcGNvpIo70KyR+Zt54XqOkLMunIAgeb0HL6rru+/65qqrXsixfiqJ4z/P8I03TaZIkH1EUTcMwnIRh+AbwPcMYxuIZnuU3+C3mwFyYs6zlZub7i2gF+Q7ycxAEn3mej7Xib8EcmAtzYm7MsZrVEsz7E6wgLkC+ZVn2pRVWAXNjDayFNbXijwKyb1VVTbTCLoC1sKZW/D7I+BPkh1bQRbA21tAYHgRkzEBea4Vu5O5x8+gee4YxjMUzPMtvzDmwNjpAY7kXiJiBvNEK3Ert/gu0Y9cwhrF4hmd3icLaWCNjuhMkYAbyVStwjdrpFLTjOTCGsXiGZ/kNfmMTAY2JINEKclsrdAPtZA7a8T0whrF4hmd5lt/YREBjupFEK8h3WqEbaAfX0I5vwRjG4hme5Tfm3EBjIki0gtzRCt1E7XwK2vEcGMNYPMOz/Ma+CDQmgkQryG2t0A20gzlox7dgDGPxDM/yG3NuoDERJFpBbmuFbqJ2PgXteA6MYSye4Vl+Y18EGhNBohXktlboBtrBHLTjWzCGsXiGZ/mNOTfQmAgSrSC3tUI3UTufgnY8B8YwFs/wLL+xLwKNiSDRCnJbK3QD7WAO2vEtGMNYPMOz/MacG2hMBIlWkNtaoZuonU9BO54DYxiLZ3iW39gXgcZEkGgFua0VuoF2MAft+BaMYSye4Vl+Y84NNCaCRCvIHa3QTdTOp6AdzwGNiSBR/6Oipdh3Iy1F9mFPS9GNZFqKbuzXUnSD8ZYiG+21FNnwsqXIxs8txf1/vHSUkvIXCx10Xy+tWPsAAAAASUVORK5CYII=');
185  background-repeat: repeat;
186}
191  background-color: rgba(65, 50, 12, 0.9);
192  border: 4px solid #8b7865;
193  border-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAZdEVYdFNvZnR3YXJlAHBhaW50Lm5ldCA0LjAuMjHxIGmVAAAAPklEQVQoU2P4//8/AzqGCqAoQhFAVgRTgGEIVgU4FaErgCnAqQhdAYYCdEXoFGMoQNaILo6hAFkjujgAoQYXNAQKW0AAAAAASUVORK5CYII=') 2;
194  padding: 20px;
195  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);

28          <h2>Pointless Counter: {count}</h2>
29          <button onClick={() => alert("Why did you click me?")}>Don't Click Me</button>
30          <div className="image-container">
31            {Array.from({ length: 10 }, (_, i) => (
32              <img key={i} src={`https://picsum.photos/seed/${i}/1000/1000`} alt="Random large image" />
33            ))}
34          </div>
185  }
186
187  .image-container {
188    display: flex;
189    flex-wrap: wrap;
190  }
191
192  .image-container img {
193    width: 100%;
194    height: auto;
199  }
200
201  .image-container img:hover {
202    transform: rotate(360deg) scale(1.2);
203  }