index.php 2.5 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798
  1. <html>
  2. <head>
  3. <script>
  4. function showUser(str) {
  5. if (str == "") {
  6. document.getElementById("url").innerHTML = "";
  7. return;
  8. } else {
  9. if (window.XMLHttpRequest) {
  10. xmlhttp = new XMLHttpRequest();
  11. } else {
  12. xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
  13. }
  14. xmlhttp.onreadystatechange = function() {
  15. if (this.readyState == 4 && this.status == 200) {
  16. document.getElementById("report").innerHTML = this.responseText;
  17. }
  18. };
  19. xmlhttp.open("GET","shorten.php?url="+str,true);
  20. xmlhttp.send();
  21. }
  22. }
  23. </script>
  24. <style>
  25. input[type=text],select {
  26. width: 600px;
  27. padding: 12px 15px;
  28. margin: 10px 5;
  29. display: inline-block;
  30. border: 1px solid #ccc;
  31. border-radius: 4px;
  32. box-sizing: border-box;
  33. }
  34. input[type=submit] {
  35. width: 200px;
  36. background-color: #4CAF50;
  37. color: white;
  38. padding: 14px 15px;
  39. margin: 10px 5;
  40. border: none;
  41. border-radius: 4px;
  42. cursor: pointer;
  43. display: block;
  44. margin-left: auto;
  45. margin-right: auto;
  46. }
  47. input[type=submit]:hover {
  48. background-color: #45a049;
  49. }
  50. div {
  51. width: 610px;
  52. border-radius: 5px;
  53. background-color: #A9A9A9;
  54. padding: 5px;
  55. display: inline-block;
  56. display: block;
  57. margin-left: auto;
  58. margin-right: auto;
  59. }
  60. #report {
  61. width: 400px;
  62. padding: 5px;
  63. display: inline-block;
  64. display: block;
  65. margin-left: auto;
  66. margin-right: auto;
  67. }
  68. h2 {
  69. width: 350px;
  70. border-radius: 5px;
  71. background-color: #DCDCDC;
  72. padding: 5px;
  73. display: inline-block;
  74. display: block;
  75. margin-left: auto;
  76. margin-right: auto;
  77. text-align: center;
  78. color: #0000FF;
  79. }
  80. </style>
  81. </head>
  82. <body>
  83. <h2>NFCG Php/Sqlite Url Shortener</h2>
  84. <div>
  85. <form>
  86. <input id="url" type="text" name="url" placeholder="Enter Your URL...">
  87. <input type="submit" value="Shorten" onclick="showUser(url.value); return false;">
  88. </form>
  89. </div>
  90. </br>
  91. <p id="report"></p>
  92. </body>
  93. </html>