cardsy/index.html at main · YashBhalodi/cardsy · GitHub

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
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
<!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" />

    <title>Cardsy | Handy plugin to generate miro cards in snap</title>
    <meta
      name="description"
      content="Automatically generate loads of cards in your Miro board with a single click. Get to action stage from brainstorming stage in matter of seconds. Generate cards to use in kanban, user story mapping, etc with ease."
    />

    <script src="https://cdn.jsdelivr.net/npm/lodash@4.17.10/lodash.min.js"></script>
    <script src="https://miro.com/app/static/sdk/v2/miro.js"></script>

    <link rel="stylesheet" type="text/css" href="./public/reset.css" />
    <link rel="stylesheet" type="text/css" href="./public/styles.css" />
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
    />

    <link
      rel="icon"
      type="image/svg+xml"
      href="public/assets/images/favicon.svg"
    />
    <link rel="icon" type="image/png" href="public/assets/images/favicon.png" />
  </head>
  <body>
    <section class="light">
      <div class="section-content">
        <div class="logo">
          <div class="brand brandLogo">Cardsy</div>
          <div class="brand brandSubheading">A Miro Plugin</div>
        </div>
        <div class="main-content">
          <div class="headline-container">
            <div class="headline">
              Generate Miro cards in
              <span class="dark-turquoise-text">snap</span>
            </div>
            <div class="subHeadline">
              <span class="dark-turquoise-text">Save time</span> and
              <span class="dark-turquoise-text">speed up</span> your work in
              Miro
            </div>
          </div>
          <div class="cta-container">
            <a
              class="primary-cta"
              target="_blank"
              href="https://miro.com/oauth/authorize/?response_type=code&client_id=3074457347923223678&redirect_uri=/confirm-app-install/"
              >Install Cardsy</a
            >
            <a class="text-cta" href="#how-it-works">How does it work?</a>
          </div>
        </div>
        <div class="main-section-footer">
          <div></div>
          <div id="stat-container">
            <p class="stat-section">
              Generated <span id="generated-cards-count"></span> cards since 4th
              June 2022.
            </p>
            <p class="stat-section">
              That's roughly
              <span id="time-saved-duration"></span> saved!
            </p>
          </div>
        </div>
      </div>
    </section>
    <section class="dark">
      <div class="story-content">
        <div class="story-inner-container">
          <div class="story-title">
            Miro <span class="turquoise-text">Cards</span> are awesome, right?
          </div>
          <div class="story-message">
            They have a title.
            <span class="dimmed-text">(duh!?)</span><br /><br />You can add rich
            descriptions with basic formatting. <br /><br />Also, you can assign
            tags to your cards. <br /><br />Not to mention, you can even assign
            a “due date” and assign the card to one of your team member.
            <br /><br />
            And then you can use these cards in kanban, user story mapping and
            well... you get the gist, right?
          </div>
        </div>
        <div class="continuation-term">but ...</div>
      </div>
    </section>
    <section class="dark">
      <div class="story-content">
        <div class="story-inner-container">
          <div class="story-title">
            You generally don’t start with using cards.
          </div>
          <div class="story-message">
            During brainstorming session, you don't use cards.<br /><br />
            You use simple widgets like
            <span class="turquoise-text">Text</span>,
            <span class="turquoise-text">Shape</span>, and most lovable
            <span class="turquoise-text">Sticky Notes</span>.<br /><br />
            If you are anything like me, you probably went wild with the
            <span class="turquoise-text">Mind Maps</span>.😅
          </div>
        </div>
        <div class="continuation-term">and then ...</div>
      </div>
    </section>
    <section class="dark">
      <div class="story-content">
        <div class="story-inner-container">
          <div class="story-title">
            When you need to put these brilliant ideas in action...
          </div>
          <div class="story-message">
            You realise you should make all these into
            <span class="turquoise-text">Cards</span> and then you can use them
            in kanban or user story mapping etc ...<br /><br />But now you gotta
            copy paste all these items and create cards and fill them with
            details. 😨<br /><br />That sounds like a whole lot of work, and
            obviously we wish we could just snap our fingers and
            <span class="pink-red-text">boom</span>... <br />these are all the
            <span class="turquoise-text">cards</span> I need. 🥳
          </div>
        </div>
        <div class="continuation-term">Here comes your hero ...</div>
      </div>
    </section>
    <section class="dark" id="how-it-works">
      <div class="story-content">
        <div class="story-inner-container">
          <div class="story-title">
            With <span class="turquoise-text">Cardsy</span> plugin installed in
            your Miro board ...
          </div>
          <div class="story-message">
            You just need to follow two simple steps.<br /><br />
            <ul>
              <li>
                <span class="turquoise-text">Select</span> all the stuff that
                you want to generate cards for. It can be anything, Texts,
                Notes, Shapes etc...
              </li>
              <li>
                <span class="turquoise-text">Click</span> on Cardsy plugin
                button.
              </li>
            </ul>
            <br /><br />
            Yep. That’s it!!<br />
            In a matter of few seconds, all your cards will be generated and you
            can carry on with your work.
          </div>
        </div>
        <div class="continuation-term">
          Whoa!!
          <span class="small-text"
            >I wonder how much time you will save with
            <span class="turquoise-text">Cardsy</span>...</span
          >
        </div>
      </div>
    </section>
    <section class="light">
      <div class="demo-section-content">
        <div class="story-title">
          And here is the demo of
          <span class="dark-turquoise-text">Cardsy</span> in action ...
        </div>
        <div class="video-container">
          <iframe
            src="https://www.loom.com/embed/988ab3a3ab2c4da5b86d215e9401e2e1"
            frameborder="0"
            webkitallowfullscreen
            mozallowfullscreen
            allowfullscreen
            style="border-radius: 8px; height: 100%; width: 100%"
          ></iframe>
        </div>
      </div>
    </section>
    <section class="light">
      <div class="section-content">
        <div class="section-light-heading">Ah, I forgot to mention ...</div>
        <div class="main-content">
          <div class="headline-container">
            <div class="headline">
              <span class="dark-turquoise-text">Cardsy</span> is forever
              <span class="dark-turquoise-text">free</span> and
              <span class="dark-turquoise-text">open-source</span>.
            </div>
          </div>
          <div class="cta-container">
            <a
              class="primary-cta"
              target="_blank"
              href="https://miro.com/oauth/authorize/?response_type=code&client_id=3074457347923223678&redirect_uri=/confirm-app-install/"
              >Install Cardsy Now</a
            >
            <a
              class="text-cta"
              href="https://github.com/YashBhalodi/cardsy"
              target="_blank"
              >Source code (Github)</a
            >
          </div>
          <div class="share-section">
            <div class="share-text">
              Share with Miroverse and help save their time
            </div>
            <div class="share-cta-grid">
              <a
                href="https://twitter.com/intent/tweet?text=Hey%2C%20You%20know%20what%20Miro%20is%2C%20right%3F%20I%20just%20found%20pretty%20handy%20plugin%20that%20saved%20me%20lots%20of%20time%20and%20trouble.%20I%20can%20now%20generate%20any%20number%20of%20cards%20with%20a%20single%20click.%20Checkout%20cardsy.yashbhalodi.me%20by%20%40YashBhalodi."
                data-text="Hey, You know what Miro is, right? I just found pretty handy plugin that saved me lots of time and trouble. I can now generate any number of cards with a single click."
                data-url="https://cardsy.yashbhalodi.me"
                data-hashtags="miro, productivity"
                target="_blank"
              >
                <i class="fa fa-twitter share-icon"></i>
              </a>
              <!-- <i class="fa fa-link share-icon"></i> -->
            </div>
          </div>
        </div>
      </div>
    </section>
    <section class="light">
      <div class="section-content">
        <div class="section-light-heading">
          Designed & Developed with <span><i class="fa fa-heart"></i></span> by
          ...
        </div>
        <div class="about-section">
          <div class="bio">
            <div class="bio-name">Yash Bhalodi</div>
            <div class="bio-description">
              Web & Mobile Developer,<br />Driven by passion for UX Design
            </div>
            <div class="social-links">
              <a
                class="link"
                href="https://github.com/YashBhalodi"
                target="_blank"
              >
                <i class="fa fa-github icon"></i>
              </a>
              <a
                class="link"
                href="https://www.linkedin.com/in/YashBhalodi"
                target="_blank"
              >
                <i class="fa fa-linkedin icon"></i>
              </a>
              <a
                class="link"
                href="https://twitter.com/YashBhalodi"
                target="_blank"
              >
                <i class="fa fa-twitter icon"></i>
              </a>
              <a
                class="link"
                href="https://www.behance.net/YashBhalodi"
                target="_blank"
              >
                <i class="fa fa-behance icon"></i>
              </a>
              <a
                class="link"
                href="mailto:hello@yashbhalodi.me"
                target="_blank"
              >
                <i class="fa fa-envelope icon"></i>
              </a>
              <a
                class="link"
                href="https://www.yashbhalodi.me/"
                target="_blank"
              >
                <i class="fa fa-chrome icon"></i>
              </a>
            </div>
          </div>
          <div class="bio-img">
            <img src="public/assets/images/yash.png" alt="Yash Bhalodi" />
          </div>
        </div>
      </div>
    </section>
    <script type="module" src="./plugin/firebase/setup.js"></script>
    <script type="module" src="./plugin/index.js"></script>
    <script type="module" src="./site/trackCount.js"></script>
  </body>
</html>