-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
147 lines (135 loc) · 5.53 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
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
141
142
143
144
145
146
147
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-144232062-2"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag() {
dataLayer.push(arguments);
}
gtag("js", new Date());
gtag("config", "UA-144232062-2");
</script>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>MeraType | मेरा Type | मेरा टाइप</title>
<meta name="description"
content="Speak in Hindi, and magically convert your speech to text! Perfect for content writers who don't have a Hindi keyboard." />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.min.css" />
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="tootik.min.css" />
</head>
<body>
<section class="section">
<div class="container">
<div class="heading">
<h1 class="title is-2">Just talk, I'll type!</h1>
<br /><br />
</div>
<div class="paragraph">
<p class="subtitle">
We all know how annoying it can get to type in Hindi,
<em>ESPECIALLY</em> if you don't have a हिंदी keyboard lying around
<small>(like most of us)</small><br />
<br />
Fear not फ्रेंड, I'm here to help. My name is
<strong>MeraType</strong>, and I'm definitely...<br />
<em>तेरे टाइप का APP</em> 😊<br />
<br />
Just press the button, speak Hindi into your mic
<em>
<small>(Click "Allow" when I ask for permission to use your
microphone!)</small>
</em>
aaaand <strong>MAGIC!</strong> 🎉✨ <br />
<br />
Once you're done talking, simply click on the text that shows up to
<strong>automatically</strong> copy it to your clipboard.
<em>
Then just paste wherever you want to!
</em>
</p>
</div>
</div>
</section>
<section class="section">
<div class="container is-fluid">
<div class="heading">
<h2 id="hindiResponse" class="content copyContent" data-clipboard-target="#hindiResponse"
data-tootik="Click to Copy to Clipboard"></h2>
<button class="talk button is-warning is-large is-rounded">
<strong>SPEAK</strong>
</button>
</div>
</div>
</section>
<section class="section">
<div class="container is-fluid">
<h3 class="title is-3">TRANSCRIPTION HISTORY</h3>
<h4 class="historyContent title is-4"></h4>
</div>
</section>
<section class="section">
<div class="container is-fluid">
<div class="footer">
<p>
Made with ❤ by <a href="#">Aman Bhargava. </a> <br />
<style>
.bmc-button img {
width: 27px !important;
margin-bottom: 1px !important;
box-shadow: none !important;
border: none !important;
vertical-align: middle !important;
}
.bmc-button {
line-height: 36px !important;
height: 37px !important;
text-decoration: none !important;
display: inline-flex !important;
color: #ffffff !important;
background-color: #ff813f !important;
border-radius: 3px !important;
border: 1px solid transparent !important;
padding: 1px 9px !important;
font-size: 22px !important;
letter-spacing: 0.6px !important;
-webkit-box-shadow: 0px 1px 2px 2px rgba(190, 190, 190, 0.5) !important;
box-shadow: 0px 1px 2px rgba(190, 190, 190, 0.5) !important;
margin: 0 auto !important;
font-family: "Cookie", cursive !important;
-webkit-box-sizing: border-box !important;
box-sizing: border-box !important;
-o-transition: 0.3s all linear !important;
-webkit-transition: 0.3s all linear !important;
-moz-transition: 0.3s all linear !important;
-ms-transition: 0.3s all linear !important;
transition: 0.3s all linear !important;
}
.bmc-button:hover,
.bmc-button:active,
.bmc-button:focus {
-webkit-box-shadow: 0px 1px 2px 2px rgba(190, 190, 190, 0.5) !important;
text-decoration: none !important;
box-shadow: 0px 1px 2px 2px rgba(190, 190, 190, 0.5) !important;
opacity: 0.85 !important;
color: #ffffff !important;
}
</style>
<link href="https://fonts.googleapis.com/css?family=Cookie" rel="noopener stylesheet" /><a class="bmc-button"
target="_blank" href="https://www.buymeacoffee.com/bhargavaman"><img
src="https://bmc-cdn.nyc3.digitaloceanspaces.com/BMC-button-images/BMC-btn-logo.svg" alt="Buy me a coffee" /><span
style="margin-left:5px">Buy me a coffee</span></a>
</p>
</div>
</div>
</section>
<script src="talk.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.4/clipboard.min.js"></script>
<script type="text/javascript">
new ClipboardJS(".copyContent");
</script>
</body>
</html>