UNPKG

colorways/index.html

Version:

1<!DOCTYPE html>
2<html lang="en">
3
4<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>colorways</title>
<link href="output.css" rel="stylesheet">
9</head>
10
11<style>
.rotate {
  transform: perspective(60rem) rotateY(22deg);
}
.outline {
  outline: 5px dashed rgba(100, 100, 255, .3);
  outline-offset: 10px;
}
/*  state */
@keyframes shine {
  0% {transform:translateX(-100%);}
  100% {transform:translateX(100%);}
}
.loading:after {
 content:'';
  top:0;
  transform:translateX(100%);
  width: 100%;
  height: 100%;
  position: absolute;
  z-index:1;
  animation: shine 1.1s infinite 1s;
  background: linear-gradient(to right, rgba(255,255,255,0) 0%,rgba(255,255,255,0.8) 50%,rgba(128,186,232,0) 99%,rgba(125,185,232,0) 100%); 
}
/* loading state */
36</style>
37
38<body class=" bg-[#efefef] transition-all duration-[800ms] font-['Sporting'] font-[700]">
<div
  class="px-[2rem] py-[1rem] min-h-[100vh] m-[0] flex flex-col  justify-between items-center overflow-hidden ">
  <div class="header uppercase relative w-full  "
  style="-webkit-text-stroke: 1px black;
  -webkit-text-fill-color: transparent;">
    <div class="text-[2rem] lg:text-[3.5rem]" id="title">Colorways</div>
  </div>
  <!-- section -->
  <div class="flex transition-all duration-[1200ms] flex-col mt-[5rem] space-y-[10rem] lg:mt-0 lg:flex-row h-full w-full items-center justify-evenly">
    <!-- card -->
    <div id="img-card"
      class=" w-[40vw] h-[50vh] skewer  duration-[1200ms] relative flex items-center justify-center overflow-hidden rounded-[2rem] shadow-[0_35px_60px_15px_rgba(0,0,0,0.5)] bg-white ">
      <img id="src-image" src=""
        class="opacity-0 absolute w-full top-[50%] left-[50%] translate-y-[-50%] translate-x-[-50%]  transition-opacity duration-[1s] bg-cover" />
        <!-- <input id="image-input" type="file" name="imageInput"  -->
        <!-- accept="image/png, image/gif, image/jpeg" /> -->
      </div>
    <!-- /card -->
    <div class="h-full w-full lg:w-[30%] flex justify-center items-center">
      <div id="palette-card" class="opacity-0  transition-opacity duration-[1200ms] h-[500px] mx-[2rem] flex flex-col w-full">
      </div>
    </div>
61
  </div>
  <!-- /section -->
  <div class="footer w-full text-[1rem] lg:text-[1.8rem] flex justify-between">
    <div id="footer-left" class=" bg-yellow-200 px-[1rem]">
      (drag and drop in your own image 👆)
    </div>
    <div id="footer-right">
    built w/ 👟 by <a class="underline" href="https://remyhunt.net">Remy Hunter</a>
    </div>
  </div>
</div>
73</body>
74
75<script type="module" src="./src/main.js"></script>
76
77</html>
\No newline at end of file

1	`<!DOCTYPE html>`
2	`<html lang="en">`
3
4	`<head>`
5	`<meta charset="UTF-8" />`
6	`<meta name="viewport" content="width=device-width, initial-scale=1.0" />`
7	`<title>colorways</title>`
8	`<link href="output.css" rel="stylesheet">`
9	`</head>`
10
11	`<style>`
12	`.rotate {`
13	`transform: perspective(60rem) rotateY(22deg);`
14	`}`
15	`.outline {`
16	`outline: 5px dashed rgba(100, 100, 255, .3);`
17	`outline-offset: 10px;`
18	`}`
19	`/* state */`
20	`@keyframes shine {`
21	`0% {transform:translateX(-100%);}`
22	`100% {transform:translateX(100%);}`
23	`}`
24	`.loading:after {`
25	`content:'';`
26	`top:0;`
27	`transform:translateX(100%);`
28	`width: 100%;`
29	`height: 100%;`
30	`position: absolute;`
31	`z-index:1;`
32	`animation: shine 1.1s infinite 1s;`
33	`background: linear-gradient(to right, rgba(255,255,255,0) 0%,rgba(255,255,255,0.8) 50%,rgba(128,186,232,0) 99%,rgba(125,185,232,0) 100%);`
34	`}`
35	`/* loading state */`
36	`</style>`
37
38	`<body class=" bg-[#efefef] transition-all duration-[800ms] font-['Sporting'] font-[700]">`
39	`<div`
40	`class="px-[2rem] py-[1rem] min-h-[100vh] m-[0] flex flex-col justify-between items-center overflow-hidden ">`
41	`<div class="header uppercase relative w-full "`
42	`style="-webkit-text-stroke: 1px black;`
43	`-webkit-text-fill-color: transparent;">`
44	`<div class="text-[2rem] lg:text-[3.5rem]" id="title">Colorways</div>`
45	`</div>`
46	`<!-- section -->`
47	`<div class="flex transition-all duration-[1200ms] flex-col mt-[5rem] space-y-[10rem] lg:mt-0 lg:flex-row h-full w-full items-center justify-evenly">`
48	`<!-- card -->`
49	`<div id="img-card"`
50	`class=" w-[40vw] h-[50vh] skewer duration-[1200ms] relative flex items-center justify-center overflow-hidden rounded-[2rem] shadow-[0_35px_60px_15px_rgba(0,0,0,0.5)] bg-white ">`
51	`<img id="src-image" src=""`
52	`class="opacity-0 absolute w-full top-[50%] left-[50%] translate-y-[-50%] translate-x-[-50%] transition-opacity duration-[1s] bg-cover" />`
53	`<!-- <input id="image-input" type="file" name="imageInput" -->`
54	`<!-- accept="image/png, image/gif, image/jpeg" /> -->`
55	`</div>`
56	`<!-- /card -->`
57	`<div class="h-full w-full lg:w-[30%] flex justify-center items-center">`
58	`<div id="palette-card" class="opacity-0 transition-opacity duration-[1200ms] h-[500px] mx-[2rem] flex flex-col w-full">`
59	`</div>`
60	`</div>`
61
62	`</div>`
63	`<!-- /section -->`
64	`<div class="footer w-full text-[1rem] lg:text-[1.8rem] flex justify-between">`
65	`<div id="footer-left" class=" bg-yellow-200 px-[1rem]">`
66	`(drag and drop in your own image 👆)`
67	`</div>`
68	`<div id="footer-right">`
69	`built w/ 👟 by <a class="underline" href="https://remyhunt.net">Remy Hunter</a>`
70	`</div>`
71	`</div>`
72	`</div>`
73	`</body>`
74
75	`<script type="module" src="./src/main.js"></script>`
76
77	`</html>`
\	No newline at end of file