Add button to subscribe with Zune. Add Zune-like styles

CorySanin · Aug 14, 2019 · 2435ccd · 2435ccd
1 parent 43169e8
commit 2435ccd
Show file tree

Hide file tree

Showing 5 changed files with 76 additions and 13 deletions.
diff --git a/http-root/assets/FRAMEBACKGROUND00.PNG b/http-root/assets/FRAMEBACKGROUND00.PNG
diff --git a/http-root/assets/favicon.png b/http-root/assets/favicon.png
diff --git a/http-root/index.html b/http-root/index.html
@@ -3,20 +3,24 @@
     <head>
         <meta charset="UTF-8">
         <title>Patreon to Zune | Import Patreon Podcasts to the Zune Software</title>
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <link rel="icon" type="image/png" href="/assets/favicon.png" sizes="32x32">
         <link rel="stylesheet" href="/styles/reset.css">
         <link rel="stylesheet" href="/styles/styles.css">
         <script src="/scripts/compute.js"></script>
     </head>
     <body>
+        <div id="brandtag"></div>
         <div id="container">
             <form action="/out.xml" method="GET" id="feedform" onsubmit="return computeurl()">
-                <label for="urlinput">Feed URL:</label>
+                <label for="urlinput">FEED URL:</label>
                 <input name="in" type="text" id="urlinput"/>
-                <input type="submit" value="→" id="submitbtn"/>
+                <input type="submit" value="→" id="submitbtn" class="button floatright"/>
             </form>
             <div id="outputfields" style="display:none">
-                <label for="urloutput" title="give this to the Zune Software" id="outlabel">Proxied URL:</label>
-                <input type="text" readonly id="urloutput"/>
+                <label for="urloutput" title="give this to the Zune Software" id="outlabel">PROXIED URL:</label>
+                <input type="text" readonly id="urloutput"/><br/><br/>
+                <a class="button floatright" href="" id="zunesubscribe">SUBSCRIBE WITH ZUNE</a>
             </div>
         </div>
     </body>

diff --git a/http-root/scripts/compute.js b/http-root/scripts/compute.js
@@ -1,13 +1,17 @@
 const URL = window.location.href;
+const URLPREFIX = URL + 'out.xml?in=';
+const ZUNESUB = 'zune://subscribe/?patreontozune=';
 
 var computeurl;
 window.onload = function() {
     var urlinput = document.getElementById('urlinput');
     var outlabel = document.getElementById('outlabel');
     var urloutput = document.getElementById('urloutput');
+    var zunesubscribe = document.getElementById('zunesubscribe');
 
     var update = function(){
-        urloutput.value = URL + 'out.xml?in=' + encodeURIComponent(urlinput.value);
+        urloutput.value = URLPREFIX + encodeURIComponent(urlinput.value);
+        zunesubscribe.href = ZUNESUB + URLPREFIX + urlinput.value;
     }
 
     var copyurl = function(){

diff --git a/http-root/styles/styles.css b/http-root/styles/styles.css
@@ -1,26 +1,81 @@
+html, body{
+    height:100%;
+}
 body{
     font-family:sans-serif;
     line-height:1.4em;
+    color:#373a3d;
+    box-sizing:border-box;
+    background-image:url(../assets/FRAMEBACKGROUND00.PNG);
+    background-size:cover;
+}
+body *{
+    box-sizing:inherit;
+}
+input[type=text]{
+    color:#373a3d;
+    border:1px solid #cccccc;
+    border-radius:0px;
+    line-height:inherit;
+}
+input[type=text]:focus{
+    border-color:#fa6ec9;
 }
 #container{
-    max-width: 800px;
+    width: 800px;
+    max-width:90%;
     margin:auto;
     position:absolute;
     left:0;
     right:0;
     top:25%;
-    box-sizing:border-box;
+    background:linear-gradient(to bottom, rgba(255,255,255,1) 0%, rgba(240,240,240,1) 100%);
+    border:1px solid rgba(0,0,0,.19);
+    box-shadow:0px 0px 19px -3px rgba(0,0,0,0.75);
+    padding:1em;
 }
-#container *{
+#container input{
     width:100%;
-    box-sizing:inherit;
+    padding:2px;
 }
-#outputfields{
-    margin-top:1em;
+#container label{
+    font-weight:bold;
+    font-size:1.2em;
 }
-#urlinput{
+#container #urlinput{
     width:calc(100% - 40px);
 }
-#submitbtn{
+#container #submitbtn{
     width:35px;
+    line-height:inherit;
+}
+#outputfields{
+    margin-top:1em;
+}
+#brandtag{
+    position:fixed;
+    top:32px;
+    left:0px;
+    height:53px;
+    width:15px;
+    background:linear-gradient(to bottom, rgba(241,13,161,1) 0%, rgba(233,80,20,1) 100%);
+}
+.floatright{
+    float:right;
+}
+.button{
+    color:#373a3d;
+    background:linear-gradient(to bottom, rgba(234,234,234,1) 0%, rgba(212,212,212,1) 100%);
+    font-weight:bold;
+    text-decoration:none;
+    border:1px solid #c4c4c4;
+    border-radius:5px;
+    padding:.2em;
+}
+.button:active{
+    background:linear-gradient(to bottom, rgba(248,248,248,1) 0%, rgba(228,228,228,1) 100%);
+}
+::selection {
+    background: #f10da2;
+    color:#fff
 }