url-comics/index.html at master · sidkr/url-comics · 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
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2280%22>💬</text></svg>">

  <!-- HTML Meta Tags -->
  <title>Hash Comics Present...</title>
  <meta name="description" content="Create and Share silly office comic.">

  <!-- Facebook Meta Tags -->
  <meta property="og:url" content="https://app.siddharthakumar.com/comic/">
  <meta property="og:type" content="website">
  <meta property="og:title" content="Hash Comics Present...">
  <meta property="og:description" content="Create and Share silly office comic.">
  <meta property="og:image" content="https://app.siddharthakumar.com/comic/assets/example-min.png">

  <!-- Twitter Meta Tags -->
  <meta name="twitter:card" content="summary_large_image">
  <meta property="twitter:domain" content="">
  <meta property="twitter:url" content="https://app.siddharthakumar.com/comic/">
  <meta name="twitter:title" content="Hash Comics Present...">
  <meta name="twitter:description" content="Create and Share silly office comic.">
  <meta name="twitter:image" content="https://app.siddharthakumar.com/comic/assets/example-min.png">

  <link rel="stylesheet" href="./style.css?4000">


</head>

<body>
  <article id="edit" style="display: none;">
    <div class="col">
      <input type="text" placeholder="Placeholder text 1" class="effect-1">
      <span class="focus-border">
    </div>
    <div class="col">
      <input type="text"  placeholder="Placeholder text 2" class="effect-1">
      <span class="focus-border">
    </div> <div class="col">
      <input type="text"  placeholder="Placeholder text 3" class="effect-1">
      <span class="focus-border">
    </div>

    <button id="generate">Generate</button>
  </article>


  <article class="comic" id="c">
    <div class="panel">
      <p class="text top-left" id="p-0">Placeholder text 1</p>
      <p class="text bottom-right" id="p-1">Placeholder text 2</p>
    </div>
    <div class="panel panel-2">
      <p class="speech" id="p-2">Placeholder text 3</p>
    </div>
    <div class="panel">
      <p class="text bottom-right">THE END</p>
    </div>
  </article>

  <div style="display: none;" id="c-own">
    <a href="./">Create your own</a>
  </div>

  <div class="share-container" style="display: none;">
    <div class="col">
      <label for="share-link">Share URL <span style="color: #7b7b7b;">

        <a href="#" id="share-icon" style="float: right;">
          <?xml version="1.0" encoding="UTF-8"?>
          <svg width="30px" height="30px" viewBox="0 0 14 22" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
              <g id="Icons" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                  <g id="Rounded" transform="translate(-853.000000, -1261.000000)">
                      <g id="Communication" transform="translate(100.000000, 1162.000000)">
                          <g id="-Round-/-Communication-/-mobile_screen_share" transform="translate(748.000000, 98.000000)">
                              <g>
                                  <polygon id="Path" points="0 0 24 0 24 24 0 24"></polygon>
                                  <path d="M17,1 L7,1 C5.9,1 5.01,1.9 5.01,3 L5.01,21 C5.01,22.1 5.9,23 7,23 L17,23 C18.1,23 19,22.1 19,21 L19,3 C19,1.9 18.1,1 17,1 Z M17,19 L7,19 L7,5 L17,5 L17,19 Z M12.8,13.22 L12.8,14.97 L15.61,12.35 C15.82,12.15 15.82,11.82 15.61,11.62 L12.8,9 L12.8,10.7 C9.69,11.13 8.45,13.26 8,15.4 C9.11,13.9 10.58,13.22 12.8,13.22 Z" id="🔹Icon-Color" fill="#1D1D1D"></path>
                              </g>
                          </g>
                      </g>
                  </g>
              </g>
          </svg>
        </a>
      </span></label>
      <input type="text" placeholder="Share Link" id="share-link" class="effect-1">
      <p class="toast">Copied to clipboard !</p>
    </div>
  </div>

  <script src="app.js?4000"></script>
</body>

</html>