-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
91 lines (91 loc) · 7.24 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<title>Image To CSS</title>
</head>
<body>
<!-- <canvas id="canvas1" class="canvas one"></canvas>
<div id="canvas2" class="canvas two">
<div></div>
</div> -->
<header>
<div class="head">
<h1 class="title">Select an image and convert it to CSS!</h1>
<h3>By @stowaway4331</h3>
</div>
<div class="contact-info">
<a id="github" href="https://github.com/Stowaway4331">
<svg xmlns="http://www.w3.org/2000/svg" width="1.5rem" height="1.5rem" viewBox="0 0 24 24"><path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/></svg>
</a>
<a id="instagram" href="https://www.instagram.com/jer_me_d/">
<svg xmlns="http://www.w3.org/2000/svg" width="1.5rem" height="1.5rem" viewBox="0 0 24 24"><path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z"/></svg>
</a>
<a id="linkedin" href="https://www.linkedin.com/in/jeremie-dsouza/">
<svg xmlns="http://www.w3.org/2000/svg" width="1.5rem" height="1.5rem" viewBox="0 0 24 24"><path d="M4.98 3.5c0 1.381-1.11 2.5-2.48 2.5s-2.48-1.119-2.48-2.5c0-1.38 1.11-2.5 2.48-2.5s2.48 1.12 2.48 2.5zm.02 4.5h-5v16h5v-16zm7.982 0h-4.968v16h4.969v-8.399c0-4.67 6.029-5.052 6.029 0v8.399h4.988v-10.131c0-7.88-8.922-7.593-11.018-3.714v-2.155z"/></svg>
</a>
</div>
</header>
<main>
<div class="selector">
<span>Select an Image
<label id="browse-button">Browse
<input type="file" id="file-selector" accept=".jpg, .jpeg, .png" />
</label>
</span>
<p class="file-info"></p>
</div>
<div class="gist">
<div class="image-area image-preview-area">
<h3>Image preview</h3>
<canvas id="canvas1" class="image-viewer image-preview-box"></canvas>
<p id="image-size">Original size: </p>
<br>
<span class="convert" id="convert">
<label>Convert</label>
</span>
</div>
<div class="image-area rendered-image-area">
<h3>Rendered image</h3>
<div id="canvas2" class="canvas2 image-viewer rendered-image-box">
<div width="1px" height="1px" id="rendered-image-info"></div>
</div>
<p id="image-size">Size after conversion: </p>
</div>
</div>
<div class="get-css-code">
<label class="open-button" id="open-button">Get Image Code</label>
<div class="modal" id="modal" style="display: none;">
<div class="modal-container">
<div class="modal-content" id="modal-content">
<div class="modal-header">
<span class="code-css-header modal-header-item active" id="code-css-header">CSS</span>
<span class="code-base64-header modal-header-item" id="code-base64-header">base64</span>
<button class="close-button" style="cursor: pointer;" id="close-button"><svg xmlns="http://www.w3.org/2000/svg" width="1.5rem" height="1.5rem" viewBox="0 0 24 24" fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
</button>
</div>
<div class="modal-body">
<p id="box-shadow-text">CSS - Lorem ipsum dolor sit amet consectetur adipisicing elit. Nostrum, eius, sunt similique cumque, ex incidunt voluptates sequi distinctio fuga maxime repellat. Aut officiis tempora est distinctio inventore accusantium velit laboriosam. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quidem, perspiciatis dolorem, eos id provident quae nemo nulla, obcaecati delectus cupiditate reprehenderit vel recusandae et error. Sint unde harum provident eius?
</p>
<p id="base64-text" style="display: none;">base64 - Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptatum ratione sit ipsam itaque hic eos recusandae officia aliquid quo cupiditate iusto nobis inventore maiores, non, veritatis excepturi officiis quas quisquam.
</p>
</div>
</div>
</div>
</div>
</div>
<div class="project-info">
<p class="img-info css" style="display: block;"><b>About</b><br>This output was created by resizing and setting each pixel as a <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow">box-shadow</a> of a single pixel div, so no `img` tag or `background-image` is needed. Is this a better way of rendering images? Absolutely not. The generated image is sometimes much bigger than the original and as you can see, worse in quality. <br>Why do it? These images are dynamic and each pixel's position can be controlled by making very few changes to the generated string. This can be used in browser games where textures need to dynamically react to change in camera angle and lighting.
</p>
<p class="img-info base64" style="display: none;">The entire image is embedded inside the '<img>' tag using base64 encoding, so no need of external hosting. base64 is a simple binary to ASCII conversion algorithm where binary numbers 0-63 are assigned unique characters from A-Z, a-z, 0-9, + and / in that order.<br>'=' is used for padding.</p>
</div>
</main>
<footer></footer>
<script src="script.js"></script>
<script src="dialogCode.js"></script>
</body>
</html>