urlshort/index.html at main · 1234worldcom/urlshort · 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
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>URL Shortener</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1>URL Shortener</h1>
  <div class="container">

    <h1>URL Shortener</h1>
    <p class="usage-count" id="usage-count"></p>
    <p class="daily-limit" id="daily-limit">5 URLS PER DAY</p>
    <form action="/api/shorten" method="post" id="shorten-form">
      <label for="originalUrl">Enter your URL:</label>
      <input type="url" id="originalUrl" name="originalUrl" required>

      <!-- Conditional custom short URL input field -->
      <label for="customShortUrl">Custom Short URL (optional):</label>
      <input type="text" id="customShortUrl" name="customShortUrl" maxlength="10">

      <input type="submit" class="submit-button" value="Shorten">
      <div class="loader"></div>
      <p class="loading-text">Shortening...</p>
  </form>

    <p class="shortened-url" id="shortened-url"></p>
    <button class="copy-button" onclick="copyToClipboard()">Copy Link</button>
    <p class="error-message" id="error-message"></p>

    <!-- New feature: Display usage count and last URL -->
    <p class="usage-count" id="usage-count"></p>
    <p class="last-url" id="last-url"></p>
    <!-- New feature: Daily link limit -->

    <div class="qrcode-container">
      <h2>QR Code</h2>
      <img id="qrCodeImage" src="" alt="QR Code">
<p>Go to <A href="http://localhost:3000/dashboard">Dashboard</A> and <a href="http://localhost:3000/urllist.html">url-list </a> and go on.</p>
    </div>
  </div>

  </div>

  <div class="features">
    <div class="feature">
      <div class="icon">
        <h3 class="aligncenter">Easy</h3>
      </div>
      <h2>Easy to Use</h2>
      <p>URL Shortener is user-friendly and efficient. Simply enter your long link to get a shortened URL.</p>
    </div>

    <div class="feature">
      <div class="icon">
        <h3 class="aligncenter"> Fast</h3>
      </div>
      <h2>Superior Speed</h2>
      <p>Experience lightning-fast link shortening with URL Shortener, regardless of the link's length.</p>
    </div>

    <div class="feature">
      <div class="icon">
        <h3 class="aligncenter">Secure</h3>
      </div>
      <h2>Security First</h2>
      <p>Our service places a high priority on both speed and security. We employ the HTTPS protocol and data encryption to ensure your safety.</p>
    </div>

    <div class="feature">
      <div class="icon">
        <h3 class="aligncenter">Analytics</h3>
      </div>
      <h2>Comprehensive Analytics</h2>
      <p>Track and analyze the number of clicks your shortened URLs receive with our dashboard and url-list.</p>
    </div>

    <div class="feature">
      <div class="icon">
        <h3 class="aligncenter">No login</h3>
      </div>
      <h2>No login required</h2>
      <p>URL Shortener and it's all toools is accessible without any login and personal info.</p>
    </div>

    <div class="feature">
      <div class="icon">
        <h3 class="aligncenter">Multi-Device</h3>
      </div>
      <h2>Universal Compatibility</h2>
      <p>Enjoy seamless access from smartphones, tablets, and desktops, making it convenient for all your needs.</p>
    </div>


    <script src="script.js">

    </script>

</body>
</html>