Position beta SVG a little higher

emarsden · Feb 14, 2024 · a48ee9d · a48ee9d
1 parent 834e700
commit a48ee9d
Show file tree

Hide file tree

Showing 5 changed files with 49 additions and 15 deletions.
diff --git a/html/decode.html b/html/decode.html
@@ -14,17 +14,18 @@
   <body>
     <main>
       <noscript>
-        <article style="backgroundColor:#F08080">
+        <article style="background-color:#F08080;margin:2em">
+          <img src="img/error.svg" style="width:1em" alt="">
           This site's functionality is implemented in WebAssembly, and requires Javascript.
         </article>
       </noscript>
     <nav>
       <ul>
         <li><h1>PSSH box decoder</h1></li>
-        <li><img src="img/beta.svg" style="width:2em">
+        <li><img src="img/beta.svg" style="width:2em;position:relative;top:-3ex;" alt="">
       </ul>
       <ul>
-        <li><img src="img/anvil.svg" style="width:1em"> <a href="generate.html">Generate Widevine PSSH</a></li> |
+        <li><img src="img/anvil.svg" style="width:1em" alt=""> <a href="generate.html">Generate Widevine PSSH</a></li> |
         <li><a href="fetch-init.html">Fetch init segment</a></li>
       </ul>
     </nav>

diff --git a/html/fetch-init.html b/html/fetch-init.html
@@ -13,18 +13,19 @@
   <body>
     <main>
       <noscript>
-        <article style="backgroundColor:#F08080">
+        <article style="background-color:#F08080;margin:2em">
+          <img src="img/error.svg" style="width:1em" alt="">
           This site's functionality is implemented in WebAssembly, and requires Javascript.
         </article>
       </noscript>
     <nav>
       <ul>
         <li><h1>Fetch PSSH data</h1></li>
-        <li><img src="img/beta.svg" style="width:2em;vertical-align:top">
+        <li><img src="img/beta.svg" style="width:2em;position:relative;top:-3ex;" alt="">
       </ul>
       <ul>
         <li><a href="decode.html">Decode PSSH</a></li> |
-        <li><img src="img/anvil.svg" style="width:1em"> <a href="generate.html">Generate Widevine PSSH</a></li>
+        <li><img src="img/anvil.svg" style="width:1em" alt=""> <a href="generate.html">Generate Widevine PSSH</a></li>
       </ul>
     </nav>
      <form>
@@ -40,7 +41,10 @@
     <div id="output" style="margin-top:2em;padding:1em"></div>
 
     <p style="margin-top:2em">This tool fetches an initialization segment from a web server (an MP4
-    fragment), extracts any DRM initialization data (PSSH boxes) and decodes them. Here is a
+    fragment), extracts any DRM initialization data (PSSH boxes) and decodes and prints them. Please
+    note that the initialization segment is fetched using your own web browser.
+
+    <p>Here is a
     <a href="https://m.dtv.fi/dash/dasherh264v3/drm/a1/i.mp4">sample URL</a> for testing.
 
     <p><strong>Privacy</strong>: this tool is implemented in WebAssembly and runs locally in your

diff --git a/html/generate.html b/html/generate.html
@@ -10,18 +10,24 @@
       crossorigin="anonymous" referrerpolicy="no-referrer" />
     <link rel="icon" href="data:," />
     <meta name="description" content="Generate a Widevine PSSH box directly in your browser (WASM)." />
+    <style>
+    body {
+      font-size:15px;
+    }
+    </style>
   </head>
   <body>
     <main>
       <noscript>
-        <article style="backgroundColor:#F08080">
+        <article style="background-color:#F08080;margin:2em">
+          <img src="img/error.svg" style="width:1em" alt="">
           This site's functionality is implemented in WebAssembly, and requires Javascript.
         </article>
       </noscript>
       <nav>
         <ul>
-          <li><h1>PSSH box generator</h1></li>
-          <li><img src="img/beta.svg" style="width:2em">
+          <li><h1><img src="img/anvil.svg" style="width:1em" alt=""> PSSH box generator</h1></li>
+          <li><img src="img/beta.svg" style="width:2em;position:relative;top:-3ex;" alt="">
         </ul>
         <ul>
           <li><a href="decode.html">Decode PSSH</a></li> |

diff --git a/html/img/beta.svg b/html/img/beta.svg
diff --git a/html/index.html b/html/index.html
@@ -9,8 +9,7 @@
       integrity="sha512-eoG3B3AJGSRXIEn/4X2/QrbAXRM1Bp+JNA4QKVdLAwno9AOv56TZo07rojZK4NHiMigWAMFM2YkZv986MsGwkg=="
       crossorigin="anonymous" referrerpolicy="no-referrer" />
     <link rel="icon" href="data:," />
-    <meta name="description" content="WASM tools to decode, generate and fetch PSSH boxes in your browser."
-    />
+    <meta name="description" content="WASM tools to decode, generate and fetch PSSH boxes in your browser." />
     <style>
     body {
       font-size:16px;
@@ -21,14 +20,14 @@
     <main>
       <noscript>
         <article style="background-color:#F08080;margin:2em">
-          <img src="img/error.svg" style="width:1em">
+          <img src="img/error.svg" style="width:1em" alt="">
           This site's functionality is implemented in WebAssembly, and requires Javascript.
         </article>
       </noscript>
       <nav>
         <ul>
           <li><h1>PSSH box tools</h1></li>
-          <li><img src="img/beta.svg" style="width:2em">
+          <li><img src="img/beta.svg" style="width:2em;position:relative;top:-3ex;" alt="">
         </ul>
       </nav>