improved dillo vs chrome css

src/.args

@@ -1,7 +1,7 @@
 -H
 Access-Control-Allow-Origin: *
 -H
-Access-Control-Allow-Method: GET, POST, OPTIONS
+Access-Control-Allow-Method: GET, OPTIONS
 -H
 Allow: GET, POST, OPTIONS
 -D

src/.lua/config.lua

@@ -5,9 +5,9 @@ return function(app)
   local config = { -- default
     name = "XRForge",
     baseurl="/",
-    title="Your XR Forge",
+    title="your.xr.forge",
     subtitle="Portable XR experiences for Phone, VRheadset & desktop.",
-    admin_title = "XRForge Admin",
+    admin_title = "xrforge admin panel",
     admin_subtitle = "Manage your XR experiences here",
   }
 

src/.lua/util.lua

@@ -84,12 +84,13 @@ end
 util.template = function(content,data)
   local mdata          = util.merge(data or app,{})
   mdata                = util.merge(mdata, {opts = app.opts}) 
+  -- set fallback vars
+  mdata.urlpath        = GetPath()
+  mdata.url            = mdata.url or util.getURL()
   mdata.title          = mdata.title or app.opts.subtitle
   mdata.header_include = mdata.header_include or ''
   mdata.header         = app.tpl( LoadAsset('page/header.html'), mdata )
   mdata.footer         = app.tpl( LoadAsset('page/footer.html'), mdata )
-  -- set view url
-  mdata.url = mdata.url or util.getURL()
   return app.tpl( content, mdata )
 end
 

src/cmd/server.lua

@@ -2,5 +2,7 @@ return function(app,argv)
   print("starting server")
   if arg[1] == 'admin' then
     LaunchBrowser('/admin')
+  else
+    LaunchBrowser('/')
   end
 end

src/css/xrforge.css

@@ -1,17 +1,11 @@
 /* Progressive enhancment 
  * NetSurf and Dillo will ignore this entirely because of the modern orientation/feature query 
  */
-body{
-  background:#000000;
-}
-
-.max{
-  display:none;
-}
-
 @import url("xrforge.max.css") supports(display: grid);
 
 /* color palette */ 
+
+.col0{ color:#fff; }
 .col1{ color:#f3f; }
 .col12{ color:#83f; }
 .col2{ color:#AAD; }
@@ -45,6 +39,7 @@ body,html {
 }
 
 body{
+  background:#000;
   margin:20px;
 }
 
@@ -120,6 +115,9 @@ a:hover,
   cursor:pointer;
   border-bottom:1px dotted #f3f;
 }
+.tile a{
+  border:none;
+}
 
 table{
   table-layout: fixed;
@@ -182,13 +180,12 @@ h1{
 
 .header td a{
   border:none;
-  font-weight:bold;
 }
 
 /* logo */
 .logo *{ 
   font-size:15px; 
-  display:inline-block;
+  display:inline;
 }
 .logo .cube{
   font-size: 27px;
@@ -226,7 +223,7 @@ ul{
 .grid .tile{ border-radius:5px; }
 .grid .tile .text{ padding:3px 0px; }
 .grid .tile .img{
-  border-radius:5px 5px 0px 0px;
+  border-radius:20px;
   visibility: hidden;
 }
 
@@ -291,6 +288,13 @@ blockquote{
   display: inline-block;
 }
 
+table.footer tr td {
+  line-height:35px;
+}
+table.footer tr td a{
+ color:#878; 
+}
+
 /* progressive enhancement quirks */
 
 .spectrum{ display:none }

src/css/xrforge.max.css

@@ -1,15 +1,24 @@
+hr{
+  display:none !important;
+}
+
+body{
+  background: linear-gradient(0deg,black,#0000,#0000), linear-gradient(180deg,#0000,#aa77FF22,#0000,#0000), linear-gradient(0deg,black,black) !important;
+  margin: 20px;
+  min-height: 100%;
+}
 
 .grid .tile .img{
+  background: linear-gradient(45deg,#114,#224,#114,#3367,#424,#224);
   visibility: visible;
   border:1px solid #223;
   background-size:cover;
   background-position:center;
   background-repeat: no-repeat;
-  border-radius:5px 5px 0px 0px;
   height:33vh;
 }
 .grid .tile{
-  margin: 0px 15px 15px 0px;
+  margin: 0px 20px 20px 0px;
   width:31%;
   float:left;
   background-color:#2230;
@@ -45,22 +54,29 @@
   font-size:14px;
 }
 
-.grid .tile img.icon.folder{
-  transform: translate(0,-2px);
+.grid .tile img.icon.list-tree{
+  filter: invert(1);
 }
 .grid .tile img.icon.play{
   filter: invert(1);
   transform: translate(0,-1px);
 }
 
+.icon {
+  display:inline;
+}
+.menu .icon{
+  filter: invert(1);
+  padding-right: 9px;
+  opacity: 0.6;
+}
+
 .clear{
   clear:both;
 }
 
 .jumbotron{
   padding:20px 20px;
-  background:linear-gradient(45deg,#0000,#0000,#F7F2,#0000,#07F2,#0000,#0000); 
-  background:url(./../img/backdrop.jpg);
   background-size: cover;
   background-position: bottom;
   background-repeat: no-repeat;
@@ -74,6 +90,7 @@ img.icon{
 }
 
 #viewer{
+  z-index:1000;
   position: absolute;
   width: 100%;
   height: calc( 99.7vh - 59px);
@@ -163,19 +180,10 @@ u span{
 
 .spectrum > div,
 .ruler{
-  margin:3px 0px;
+  margin:1px 0px 0px 0px;
   clear:both;
   background:linear-gradient(90deg, #F07, #77F, #F07);
-  height:2px;
-}
-
-#spectrumheader{
-  position: absolute;
-  top: 57px;
-  z-index: 1000;
-  left: 0px;
-  height: 5px;
-  width: 100%;
+  height:1px;
 }
 
 /* css tabs */
@@ -262,6 +270,7 @@ div.tab-frame > input#info:checked ~ .info{
 }
 
 #popup .icon.close{
+  display:inline-block;
   cursor:pointer;
   width: 40px;
   filter: invert(1);
@@ -269,3 +278,4 @@ div.tab-frame > input#info:checked ~ .info{
   right: 20px;
   top: 20px;
 }
+

src/img/list-tree.svg

@@ -0,0 +1,14 @@
+<svg
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <path
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="M9 1H1V9H9V6H11V20H15V23H23V15H15V18H13V6H15V9H23V1H15V4H9V1ZM21 3H17V7H21V3ZM17 17H21V21H17V17Z"
+    fill="currentColor"
+  />
+</svg>

src/myverse/tronverse/tron/README.md

@@ -0,0 +1,7 @@
+# Tron World 1
+
+This is a test
+
+> This is a blockquote
+
+And [this](https://xrfragment.org) is an URL.

src/page/about.html

@@ -6,7 +6,7 @@ header h2{
   font-weight: normal;
 }
 header{
-  background: url(/img/backdrop.jpg);
+  background: url(/myverse/tronverse/tron/tron.png);
   background-position-x: 0%;
   background-position-y: 0%;
   background-repeat: repeat;
@@ -72,6 +72,10 @@ div#xrecosystem{
         </a>
       </div>
       &nbsp;&nbsp;&nbsp;
+      <noscript>
+        <br/>
+        <br/>
+      </noscript>
       <div class="btn">
         <a href="https://chat.isvery.ninja" class="secondary" style="text-align:left">
           <img src="/img/obsidian.png" style="width:20px">

src/page/admin/index.html

@@ -1,9 +1,6 @@
 ${header}
 
-<div style="height:120px;" class="jumbotron">
-  <h1>${opts.admin_title}</h1>
-  ${opts.admin_subtitle}
-</div>
+<br/>
 <hr style="margin-top:0">
 
 ${notification}

src/page/admin/index.lua

@@ -84,5 +84,5 @@ local html = util.template( LoadAsset("page/admin/index.html"),data)
 
 
 SetStatus(200)
-SetHeader('Content-Type', 'text/html; charset=utf-8')
+SetHeader('Content-Type', 'text/html')
 Write( html )

src/page/dir.html

@@ -2,17 +2,18 @@ ${header}
 
 {if parent ~= nil and parent.parent == nil then
   print([[
-    <div style="height:120px;" class="jumbotron">
-      <h1>${opts.title}</h1>
-      ${opts.subtitle}
+    <div style="height:90px;" class="jumbotron">
+      <h1 style="display:none">${opts.title}</h1>
+      <br>
+      <center class="col3">${opts.subtitle}</center>
     </div>
-    <hr style="margin-top:0">
+    <hr style="margin-top:0"/>
   ]])
 end}
 
 {if parent ~= nil and parent.parent ~= nil then
   print([[
-    <h2>${parent.name}</h2>
+    <h2><span class="col1">//</span> ${parent.name}</h2>
   ]])
 end}
 
@@ -20,14 +21,16 @@ end}
   {if items then 
     for i=1,#items do 
       local item = items[i]
-      local icon = 'folder'
+      local icon = 'list-tree'
+      local thumbnail = ''
+      if #item.thumbnail > 0 then thumbnail = 'style="background-image: url(' .. item.thumbnail .. ');"' end
       if item.view3D or item.portal3D == false then icon = 'play' end
       print([[
         <div class="tile">
           <a href="]] .. item.url .. [[">
-            <div class="img" style="background-image: url(]] .. item.thumbnail .. [[);"></div>
+            <div class="img" ]] .. thumbnail .. [[></div>
             <div class="text">
-              <img src="img/]] .. icon .. [[.svg" class="icon ]] .. icon .. [["/>&nbsp;]] .. item.title .. [[ 
+              <img src="img/]] .. icon .. [[.svg" class="icon ]] .. icon .. [["/>&nbsp;<a href="]] .. item.url .. [[">]] .. item.title .. [[</a> 
             </div>
           </a>
         </div>

src/page/dir.lua

@@ -42,9 +42,6 @@ return {
               local parent = app.cache.items[ v.parent.id ]
               res.items[ v.id ] = v
               res.parent = parent
-              if v.thumbnail then
-                print_r(v.name .. " => " .. v.thumbnail)
-              end
             end
 
           end
@@ -79,7 +76,7 @@ return {
         next()
       else 
         res.status(200)
-        res.header('content-type','text/html; charset=utf-8')
+        res.header('content-type','text/html')
         res.body( app.cache.url[ urlpath ] )
         next()
       end

src/page/footer.html

@@ -1,8 +1,13 @@
 
                   <div class="clear"></div>
+                  <br/>
+                  <hr/>
+                  <div class="spectrum span">
+                    <div></div>
+                  </div>
+                  <br/>
+                  <br/>
 
-                  <br>
-                  <hr>
 
                   <table width="100%" class="footer">
                     <tr>

src/page/header.html

@@ -1,4 +1,3 @@
-<?xml version="1.0" encoding="utf-8"?>
 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
 <html>
   <head>
@@ -6,25 +5,28 @@
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <base href="${opts.baseurl}" />
     <title>${title}</title>
-    <link rel="stylesheet" href="css/xrforge.css"></link>
+    <link rel="stylesheet" href="/css/xrforge.css"></link>
     ${header_include}
     <noscript>
-      <meta http-equiv="refresh" content="0;url=experiences">
+      {if urlpath == '/' or urlpath == '/index.html' then
+        print('<meta http-equiv="refresh" content="0;url=${opts.plugin_diskscan_dirname}">')
+      end}
     </noscript>
   </head> 
   <body background="#000000" class="${page}">
     <table width="100%" class="header">
       <tr>
-        <td width="100">
+        <td>
           <div class="margin1L">
             <a href="${opts.baseurl}">
               <div class="logo max">
-                <div class="col1">&lt;</div><div class="cube col2">⧉</div><div class="col1">&gt;</div>
-                your title here
-              </div>
-              <div class="logo min">
-                &lt;⧉&gt;
-                your title here
+                <span class="col1">[</span><span class="col2">&lt;&gt;</span><span class="col1">]</span>
+                <span class="col3">${opts.title}
+                  {if url:match("admin") then
+                    print('<span class="col1">//<span>')
+                    print('<span class="col0">${opts.admin_title}</span>')
+                  end}
+                </span>
               </div>
             </a>
           </div>
@@ -32,15 +34,11 @@
         <td class="menu">
           <div class="margin1L">
             <!-- important: no spaces between anchor tags for older browsers without flexbox -->
-            <a href="/${opts.plugin_diskscan_dirname}">${opts.plugin_diskscan_dirname}</a><a href="/about">about</a>
+            <a href="/${opts.plugin_diskscan_dirname}"><img class="icon" src="/img/list-tree.svg">${opts.plugin_diskscan_dirname}</a>&nbsp;<a href="/about">about</a>
             <!--<a class="xl" href="/howto">Howto</a></div>-->
         </td>
       </tr>
     </table>
-    <hr style="margin:0"/>
-    <div class="spectrum" id="spectrumheader">
-      <div></div>
-    </div>
     
     <table width="100%">
       <tr>

src/page/index.html

@@ -1,14 +1,20 @@
 ${header}
+<div class="spectrum span" style="top:60px; z-index:2000">
+  <div></div>
+</div>
 
 <iframe border="0" frameborder="0" src="/janusweb/index.html#janus.url=${url}" id="viewer"></iframe>
 
 {if item and item.parent and item.parent.info then 
   print([[
     <div id="popup" class="content">
-      <img src="/img/close.svg" class="icon close" onclick="document.querySelector('#popup').style.display = 'none'"/>
-      <div class="spectrum span">
+    <div class="spectrum span" style="top:-1px">
       <div></div>
     </div>
+    <noscript>
+      <img src="${item.parent.thumbnail}" width="100%"/> 
+    </noscript>
+    <img src="/img/close.svg" width="20" class="icon close" onclick="document.querySelector('#popup').style.display = 'none'"/>
     ]] .. item.parent.info .. [[
     </div>
   ]])