index.html 2.0 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970
  1. <!-- templates/index.html -->
  2. <!DOCTYPE html>
  3. <html lang="zh-CN">
  4. <head>
  5. <meta charset="UTF-8">
  6. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8. <title>短网址生成器</title>
  9. <link rel="shortcut icon" href="https://29455906.s21i.faiusr.com/4/ABUIABAEGAAg9_TSrAYoxvHpgAcwgAI4gAI.png">
  10. <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.0-alpha1/css/bootstrap.min.css" rel="stylesheet">
  11. <style>
  12. body {
  13. font-family: Arial, sans-serif;
  14. margin: 20px;
  15. }
  16. h1, h2, p {
  17. text-align: center;
  18. }
  19. form {
  20. max-width: 400px;
  21. margin: 20px auto;
  22. }
  23. input {
  24. width: 100%;
  25. padding: 10px;
  26. margin: 8px 0;
  27. box-sizing: border-box;
  28. }
  29. button {
  30. background-color: #4CAF50;
  31. color: white;
  32. padding: 10px 15px;
  33. border: none;
  34. border-radius: 5px;
  35. cursor: pointer;
  36. width: 100%;
  37. }
  38. button:hover {
  39. background-color: #45a049;
  40. }
  41. .result {
  42. margin: 20px;
  43. padding: 20px;
  44. border: 1px solid #ddd;
  45. border-radius: 5px;
  46. }
  47. </style>
  48. </head>
  49. <body>
  50. <div class="container">
  51. <h1 class="mt-5">短网址生成器</h1>
  52. <form class="mt-4" action="/shorten" method="post">
  53. <div class="mb-3">
  54. <label for="url" class="form-label">输入原始网址:</label>
  55. <input type="url" id="url" name="url" class="form-control" placeholder="https://example.com" required>
  56. </div>
  57. <button type="submit" class="btn btn-primary">生成短网址</button>
  58. </form>
  59. {% block content %}{% endblock %}
  60. </div>
  61. <script src="https://cdn.bootcdn.net/ajax/libs/bootstrap/5.3.0/js/bootstrap.bundle.min.js"></script>
  62. </body>
  63. </html>