code2url/index.html at main · utact/code2url · 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
<!DOCTYPE html>
<html lang="ko">

<head>
  <!-- Google Tag Manager -->
  <script>(function (w, d, s, l, i) {
      w[l] = w[l] || []; w[l].push({
        'gtm.start':
          new Date().getTime(), event: 'gtm.js'
      }); var f = d.getElementsByTagName(s)[0],
        j = d.createElement(s), dl = l != 'dataLayer' ? '&l=' + l : ''; j.async = true; j.src =
          'https://www.googletagmanager.com/gtm.js?id=' + i + dl; f.parentNode.insertBefore(j, f);
    })(window, document, 'script', 'dataLayer', 'GTM-KX4TPDCH');</script>
  <!-- End Google Tag Manager -->

  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Code2URL</title>
  <meta name="description" content="코드를 타이핑하면 URL이 바뀝니다. 저장 버튼 없이, 주소창 복사만으로 코드 공유 끝." />
  <meta name="theme-color" content="#1e1e2e" />

  <!-- Favicon -->
  <link rel="icon" type="image/png" href="assets/favicon.png" />

  <!-- Prism.js — Syntax Highlighting (core + languages) -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism-tomorrow.min.css" />
  <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/prism.min.js" defer></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-python.min.js" defer></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-java.min.js" defer></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-javascript.min.js" defer></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-c.min.js" defer></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-cpp.min.js" defer></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-csharp.min.js" defer></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-go.min.js" defer></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-rust.min.js" defer></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-typescript.min.js" defer></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-kotlin.min.js" defer></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-swift.min.js" defer></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-ruby.min.js" defer></script>

  <!-- lz-string — Compression -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/lz-string/1.5.0/lz-string.min.js" defer></script>

  <!-- App Styles -->
  <link rel="stylesheet" href="css/style.css?v=4" />

  <!-- App Logic -->
  <script type="module" src="js/app.js" defer></script>
</head>

<body>
  <!-- Google Tag Manager (noscript) -->
  <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-KX4TPDCH" height="0" width="0"
      style="display:none;visibility:hidden"></iframe></noscript>
  <!-- End Google Tag Manager (noscript) -->

  <!-- ── Header ──────────────────────────────────────────────────────── -->
  <header class="header">
    <div class="header__brand">
      <img class="header__brand-icon" src="assets/favicon.png" alt="Code2URL" />
      <span>Code2URL</span>
    </div>
    <div class="header__info">
      <select id="lang-select" class="lang-select" aria-label="Select language">
        <option value="auto" selected>Auto</option>
        <option value="c">C</option>
        <option value="cpp">C++</option>
        <option value="csharp">C#</option>
        <option value="go">Go</option>
        <option value="java">Java</option>
        <option value="javascript">JavaScript</option>
        <option value="kotlin">Kotlin</option>
        <option value="python">Python</option>
        <option value="ruby">Ruby</option>
        <option value="rust">Rust</option>
        <option value="swift">Swift</option>
        <option value="typescript">TypeScript</option>
      </select>
      <span id="char-counter" class="char-counter">0 / 3,000</span>
      <button id="copy-btn" class="copy-btn" aria-label="Copy URL to clipboard">
        📋 Copy URL
      </button>
    </div>
  </header>

  <!-- ── Editor ──────────────────────────────────────────────────────── -->
  <main class="editor-container">
    <!-- Line numbers gutter -->
    <div id="line-numbers" class="line-numbers" aria-hidden="true">
      <div class="line-numbers__inner">1</div>
    </div>

    <!-- Syntax-highlighted code (behind textarea) -->
    <pre id="editor-highlight" class="editor-layer editor-highlight"
      aria-hidden="true"><code id="editor-code" class="language-python"></code></pre>

    <!-- Transparent textarea (user input layer) -->
    <textarea id="editor-textarea" class="editor-layer editor-textarea"
      placeholder="# 여기에 코드를 입력하세요...&#10;# URL이 자동으로 업데이트됩니다." spellcheck="false" autocomplete="off" autocorrect="off"
      autocapitalize="off" aria-label="Code editor"></textarea>
  </main>


  <!-- ── Toast Notification ──────────────────────────────────────────── -->
  <div id="toast" class="toast" role="status" aria-live="polite"></div>

</body>

</html>