]> git.ekhem.eu.org Git - ydlpd.git/commitdiff
projects / ydlpd.git / commitdiff
? search:
summary | shortlog | log | commit | commitdiff | tree
raw | patch | inline | side by side (parent: 801d554)
Use CSS viewport.
authorJakub Czajka <jczajka@google.com>
Sun, 24 Dec 2023 18:03:29 +0000 (19:03 +0100)
committerJakub Czajka <jakub@ekhem.eu.org>
Mon, 1 Jan 2024 20:45:30 +0000 (21:45 +0100)
download.sh patch | blob | history
ydlpd.sh patch | blob | history

diff --git a/download.sh b/download.sh
index 29c4f9bf4a99ed5df47ba37648cb940e2a6ac2b0..1822747e9308e96eb43be01ea85616e3c8a925ea 100755 (executable)
--- a/download.sh
+++ b/download.sh
@@ -29,8 +29,9 @@ echo "Content-Type: text/html"
 echo "
 <!DOCTYPE html>
 <html>
+<meta name='viewport' content='width=device-width'>
+<meta http-equiv='Refresh' content='0;URL=/${LINK_ID}${EXT}' />
 <head>
-  <meta http-equiv='Refresh' content='0;URL=/${LINK_ID}${EXT}' />
   <style>
     body {
       white-space: pre-wrap;
diff --git a/ydlpd.sh b/ydlpd.sh
index c2e93cd992753d909c3d5cf427a898cbe3641bcc..68f322526d3f8342454be82a728d07fd2895040f 100755 (executable)
--- a/ydlpd.sh
+++ b/ydlpd.sh
@@ -4,50 +4,58 @@
 
 YOUTUBE_URL_RE="(https:\/\/)?(www\.)?youtu(\.be|be\.com)\/watch\?v=([\w\-_]+)"
 
-echo "HTTP/1.1 200 OK"
-echo "Content-type: text/html"
-echo "
+PAGE="
 <!DOCTYPE html>
 <html>
+<meta name='viewport' content='width=device-width'>
 <head>
   <title>YT Download</title>
   <style>
     body {
-      border: ridge 5px;
-      max-width: max-content;
-    }
-    .container {
-      background-color: PowderBlue;
-      padding: 7px;
+      background-color: #7fa99b;
     }
     form {
-      display: grid;
-      grid-gap: 5px;
-      grid-template-columns: 1fr 4fr;
+      width: min(400px, 100%);
+    }
+    fieldset {
+      background-color: #f1d18a;
+      display: flex;
+      flex-direction: column;
+      row-gap: 5px;
     }
-    #format {
-      justify-self: end;
-      width: 50%;
+    label {
+      column-gap: 5px;
+      display: flex;
+    }
+    input {
+      width: 100%;
     }
   </style>
 </head>
 <body>
-  <div class='container'>
-    <form action='/download'>
-      <label for='url'>URL:</label>
-      <input type='text' id='url' name='url' pattern='${YOUTUBE_URL_RE}'
-        required />
+  <form action='/download'>
+    <fieldset>
+      <label>
+        URL:
+        <input type='text' id='url' name='url' pattern='${YOUTUBE_URL_RE}' required />
+      </label>
 
-      <label for='format'>Format:</label>
-      <input list='formats' id='format' name='format'>
+      <label>
+        Format:
+        <input list='formats' id='format' name='format'>
+      </label>
 
       <datalist id='formats'>
         <option value='video' />
         <option value='audio' />
       </datalist>
 
-      <input type='submit'>
-    </form>
-  </div>
+      <button type='submit'>Download</button>
+    </fieldset>
+  </form>
 </body>
 </html>"
+
+echo "HTTP/1.1 200 OK"
+echo "Content-type: text/html"
+echo "${PAGE}" | sed 's/^[ \t]*//g'
HTTP interface for yt-dlp.