Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Text mask playground #3

Merged
merged 4 commits into from
Mar 23, 2022
Merged

Text mask playground #3

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
43d5c78
initial commit
tombigel Mar 22, 2022
9ca1c0c
fixed dragging
tombigel Mar 23, 2022
00370ec
a bit of index styling
tombigel Mar 23, 2022
4d3a750
we have initial mask!
tombigel Mar 23, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 5 additions & 1 deletion index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,10 +3,11 @@
<head>
<meta charset="UTF-8">
<title>wow!Team Demos</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h1>wow!Team Demos</h1>
<h1>Wow!Team Demos</h1>
</header>
<nav>
<ul>
Expand All @@ -22,6 +23,9 @@ <h1>wow!Team Demos</h1>
<li>
<a href="./shape-divider/index.html">Shape Divider Playground</a>
</li>
<li>
<a href="./text-mask/index.html">Text Mask Playground</a>
</li>
</ul>
</nav>
</body>
Expand Down
28 changes: 28 additions & 0 deletions style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
body {
padding: 0;
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}

h1 {
font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
font-size: 3em;
margin: 0;
padding: 20px;
border-bottom: 4px solid;
}

ul {
margin: 0;
padding: 0;
}
li {
list-style-type: none;
margin: 0;
padding: 1em;
font-size: 1.6em;
}

li:hover {
background: hsl(60, 0%, 90%);
}
56 changes: 56 additions & 0 deletions text-mask/data.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,56 @@
{
"fonts": [
{
"url": "https://fonts.gstatic.com/s/abrilfatface/v12/zOL64pLDlL1D99S8g8PtiKchq-lmiw.woff",
"family": "Abril Fatface",
"features": {}
},
{
"url": "https://fonts.gstatic.com/s/gorditas/v10/ll84K2aTVD26DsPEtThUIroPtg0.woff",
"family": "Gorditas",
"features": {}
},
{
"url": "https://fonts.gstatic.com/s/inconsolata/v21/QldgNThLqRwH-OJ1UHjlKENVzkWGVkL3GZQmAwLYxYWI2qfdm7Lppyw7WRP2kQ.woff",
"family": "Inconsolata",
"features": {}
},
{
"url": "https://fonts.gstatic.com/s/loversquarrel/v14/~ChAKDkxvdmVycyBRdWFycmVsEAkgAw==.woff",
"family": "Lovers Quarrel",
"features": {}
},
{
"url": "https://fonts.gstatic.com/s/tomorrow/v5/WBLjrETNbFtZCeGqgRXXQ8XOPMmJiw.woff",
"family": "Tomorrow",
"features": {}
}
],
"media": [
{
"thumb": "https://picsum.photos/id/1062/150/100",
"url": "https://picsum.photos/id/1062/1920/1200",
"type": "image"
},
{
"thumb": "https://picsum.photos/id/1020/150/100",
"url": "https://picsum.photos/id/1020/1920/1200",
"type": "image"
},
{
"thumb": "https://picsum.photos/id/62/150/100",
"url": "https://picsum.photos/id/62/1920/1200",
"type": "image"
},
{
"thumb": "https://video.wixstatic.com/video/11062b_d14ea38398994dd3af199158a56b311a/480p/mp4/file.mp4",
"url": "https://video.wixstatic.com/video/11062b_d14ea38398994dd3af199158a56b311a/1080p/mp4/file.mp4",
"type": "video"
},
{
"thumb": "https://video.wixstatic.com/video/11062b_0f8758e51a5341cd8b26833e9484ff97/480p/mp4/file.mp4",
"url": "https://video.wixstatic.com/video/11062b_0f8758e51a5341cd8b26833e9484ff97/1080p/mp4/file.mp4",
"type": "video"
}
]
}
80 changes: 80 additions & 0 deletions text-mask/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,80 @@
<!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">
<title>Text Mask</title>



</head>

<body>
<div class="container">
<div class="text-input">
<input form="form" size="1" type="text" name="text" class="text-input-text" value="Wow!">
<button form="form" name="submit" type="submit" class="text-input-submit">Change</button>
</div>
<div class="font-list">
<input form="form" data-font-url type="hidden" name="fontUrl" value="">
<ul id="fontList">
<template id="font-item-template">
<li class="font-item">
<label>
<input form="form" data-font-input class="font-input" type="radio" name="fontFamily"
value="">
<span data-font-name class="font-name">Font Name</span>
</label>
</li>
</template>
</ul>
</div>
<div class="media">
<input form="form" data-media-type type="hidden" name="mediaType" value="">
<ul id="mediaList">
<template id="media-item-image-template">
<li class="media-item">
<label>
<input form="form" data-media-input class="media-input" type="radio" name="mediaItem"
value="">
<img data-thumb class="media-thumb" src="" alt="" />
</label>
</li>
</template>
<template id="media-item-video-template">
<li class="media-item">
<label>
<input form="form" data-media-input class="media-input" type="radio" name="mediaItem"
value="">
<video data-thumb class="media-thumb" src="" muted></video>
</label>
</li>
</template>
</ul>
</div>
<div class="result" id="result">
<div id="text-box" class="text-box">
<div id="text-box-content" class="text-box-content">
<svg id="text-svg" class="text-svg" xmlns="http://www.w3.org/2000/svg">
<path fill="#ffffff" id="text-as-path"/>
</svg>
<div id="text-media" class="text-media">
<video id="media-video" src="" autoplay mutted hidden loop></video>
<img id="media-image" src="" hidden />
</div>
</div>
<div class="text-box-handle" data-handle="top-left"></div>
<div class="text-box-handle" data-handle="top-right"></div>
<div class="text-box-handle" data-handle="bottom-left"></div>
<div class="text-box-handle" data-handle="bottom-right"></div>
</div>
</div>
</div>
<form name="form" id="form" action=""></form>
<script type="module" src="./index.js"></script>
</body>

</html>
Loading