-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathtext-binary-knit-converter.html
140 lines (128 loc) · 5.92 KB
/
text-binary-knit-converter.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
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
<!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="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Alegreya+Sans:ital,wght@0,400;0,500;1,400;1,500&family=Audiowide&family=Chicle&family=Familjen+Grotesk:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&family=Inter&family=Playfair+Display:wght@400;500&family=Send+Flowers&family=Share+Tech+Mono&family=Ubuntu+Mono:ital@0;1&display=swap"
rel="stylesheet"
/>
<link rel="stylesheet" href="styles.css" />
<title>Yarn Help!</title>
</head>
<header>
<!-- A11Y - ADD SKIP TO MAIN CONTENT! -->
<form class="color-picker" action="">
<fieldset>
<legend class="visually-hidden">Pick a color scheme</legend>
<label for="groovy" class="visually-hidden">Groovy Theme</label>
<input type="radio" id="groovy" name="theme" checked />
<label for="starwars-dark" class="visually-hidden"
>Starwars Dark Theme</label
>
<input type="radio" name="theme" id="starwars-dark" />
<label for="elegant" class="visually-hidden">Elegant Theme</label>
<input type="radio" id="elegant" name="theme" />
<label for="simple-dark" class="visually-hidden"
>Simple Dark Dyslexia Friendly Theme</label
>
<input type="radio" id="simple-dark" name="theme" />
</fieldset>
</form>
<nav>
<img src="assets/menu.svg" class="menu" id="menu-btn" alt="open menu" />
<ul class="nav" id="nav">
<li class="exit" id="/assets/exit-btn">
<img
src="assets/exit.svg"
class="menu"
id="exit-btn"
alt="close menu"
/>
</li>
<li><a href="index.html">Home</a></li>
<li><a href="howmuchyarn.html">How Much Yarn?</a></li>
<li><a href="doctorwho.html">Doctor Who Scarf</a></li>
<li><a href="text-binary-knit-converter.html">Text to Binary to Knitting Pattern</a></li>
<li>
<a href="craftingandcode.html"
>Crafting and Code Coffee Chats and Discord
</a>
</li>
<li><a href="about.html">About and Contact</a></li>
<!-- <li><a href="index01.html">Old Site Version 1.0</a></li> -->
</ul>
</nav>
<section class="hero-binary">
<div class="hero--inner">
<div class="hero--inner-title">
<h1>Binary Code Secret Message Generator</h1>
</div>
<h2 class="tagline">
Converts text to binary code then to a knitting pattern so you can have a
secret message in your knitting!
</h2>
</div>
</section>
</header>
<body>
<main>
<div class="wrapper margin--bottom-1rem margin--top-2rem">
<section class="card--content margin--bottom-1rem">
<h2>Binary Secret Message Knitting Pattern Creator</h2>
<h3>Note: This page is in development, so the app isn't working yet.</h3>
<p>
Type your secret message in the text box below. Then tap or click on the "Create Pattern" button. Your message will be displayed below.
</p>
<p>Each letter or space is represented by 8 stitches. Make sure that your project is wide enough to fit the secret message. For example the words: "Hello World" have 11 characters (5 letters + 1 space + 5 letters), so your project needs to be at least 88 stitches wide (11 characters x 8 stitches per character).</p>
</section>
<section class="card--content margin--bottom-1rem">
<form action="#" class="secret-message">
<div class="form-section">
<fieldset>
<div class="form-section padding--top-2">
<label for="input"
>Secret Message Text:
<input type="text" placeholder="" name="text-message-input" id="text-message-input" />
</label>
<button type="submit" id="btn-secret" class="btn-secret btn">
Convert
</button>
</div>
</fieldset>
</div>
</form>
</section>
<section>
<h2 class="text--clr-card-bg">Secret Message!</h2>
<div class="card margin--bottom-1rem">
<h3 class="card__title align--center">Your Message Text</h3>
<p>You wrote:<span class="textMessage"></span>.</p>
</div>
<div class="card margin--bottom-1rem">
<h3 class="card__title align--center">Binary Code</h3>
<p>Your message in binary code: <span class="binaryMessageOutput"></span></p>
</div>
<div class="card margin--bottom-1rem">
<h3 class="card__title align--center">Knitting Pattern</h3>
<p>Your message as a written knit and purl knitting pattern: <span class="knitBinaryMessage"></span></p>
<!-- Add displaying the total number of stitches here -->
</div>
<div class="card margin--bottom-1rem">
<h3 class="card__title align--center">Knitting Chart</h3>
<p>The shaded squares can be knit stiches or your main colour. The blank squares can be purl stitches or your contrasting colour</p>
<p>Your message as a written knitting chart: <span class="knitBinaryChart"></span>.</p>
<p>Developer Note: This needs to be a graph of rectangles with a ratio of 4:5 (height:width). A darker line every 8 stitches to demarcate each byte/character.</p>
</div>
</div>
</section>
</div>
</main>
</body>
<script src="/app.js"></script>
<script src="/nav.js"></script>
<script src="/text-binary-knit-converter.js"></script>
</html>