Add files via upload

css/style.css

@@ -0,0 +1,200 @@
+/*
+ * Copyright (c) 2016, 2024, 5 Mode
+ * All rights reserved.
+ * 
+ * This file is part of BoxToBox.
+ * 
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software 
+ * and associated documentation files (the "Software"), to deal in the Software 
+ * without restriction, including without limitation the rights to use, copy, modify, merge, publish, 
+ * distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the 
+ * Software is furnished to do so, subject to the following conditions:
+ * 
+ * The above copyright notice and this permission notice shall be included in all copies or 
+ * substantial portions of the Software.
+ * 
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, 
+ * INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A 
+ * PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR 
+ * COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN 
+ * AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION 
+ * WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ * 
+ * style sheet.
+ *
+ * @author Daniele Bonini <my25mb@aol.com>
+ * @copyrights (c) 2021, 2024, 5 Mode 
+ */
+
+@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');
+
+body {
+  font-size:11px;
+  margin-top:20px;
+  background:#000000;
+}
+#boxHtml {
+  float:left;
+  width:50%;
+  height:50%;
+  font-size:12px;
+  background: #333;
+  border:1px solid lightgray;
+  text-align: center;
+}
+#boxCss {
+  float:left;
+  width:50%;
+  height:50%;
+  font-size:12px;
+  background: #333;
+  border:1px solid lightgray;
+  text-align: center;
+}
+#boxRendering {
+  float:left;
+  width:50%;
+  height:50%;
+  font-size:12px;
+  background: #333;
+  border:1px solid lightgray;
+  text-align: center;
+}
+#boxJs {
+  float:left;
+  width:50%;
+  height:50%;
+  font-size:12px;
+  background: #333;
+  border:1px solid lightgray;
+  text-align: center;
+}
+.code {
+  width:98%;
+  height:92%;
+  color:#FFFFFF;
+  background:transparent;
+  border: 1px solid lightgray;
+  resize:none;
+}
+#coding {
+  float:left;  
+  width:100%;
+}
+#content {
+ font-size:11px; 
+}
+#finalResult {
+  width:98%;
+  height:92%;
+  border: 1px solid lightgray;
+  background:transparent;
+  margin:auto;
+  margin-top:22px;
+  color:#FFFFFF;
+}
+#footerCont {
+  position: fixed; 
+  top: 2000px; 
+  left:-10px;
+  width: 102%; 
+  border: 1px solid #C2DBF2; 
+  padding: 7px; 
+  background: white; 
+  opacity: 0.3;
+  color:white; 
+  font-family: Arial,Sans,Vardana;
+  font-size: 12px; 
+  text-align: center; 
+  z-index: 99998;
+}
+#footer {
+  position: fixed;
+  float: right;
+  top: 2000px; 
+  left:-10px;
+  width: 100%; 
+  border: 0px solid #C2DBF2; 
+  padding: 7px; 
+  opacity: 1.0;
+  color:black; 
+  font-family: Arial,Sans,Vardana;
+  font-size: 12px; 
+  font-weight: 400;
+  text-align: right; 
+  margin-top:8px;
+  z-index: 99999;
+}
+#hashMe {
+  position:relative; 
+  left:-2px; 
+  top:+5px; 
+  font-size:18px; 
+  font-weight:900; 
+  color:#000000;
+}
+#header {
+  background: #222;
+  color:#FFFFFF;
+  height: 43px;
+  padding:3px;
+  padding-top:8px;
+  border:1px solid lightgray;
+}
+#Password {
+  font-size:18px;  
+  background:transparent; 
+  width: 60%; 
+  border-radius:3px; 
+  font-weight:900;
+}
+#passworddisplay {
+  float:left;
+  position:fixed;
+  top:680px;
+  left:50px;
+  width:255px;
+  height:120px;
+  background:darkgray;
+  text-align:left;
+  white-space:nowrap; 
+  font-family:Arial,Sans,Verdana; 
+  color:#000000; 
+  font-weight:900;
+  z-index:99999;
+}
+#resizeBanner {
+  text-align:center;
+  vertical-align:middle;
+  margin-top:38%;
+  width:100%;
+  height:100%;
+}
+#Salt {
+  position:relative; 
+  top:+5px; 
+  font-size:18px; 
+  background:transparent;
+  width: 90%; 
+  border-radius:3px; 
+  font-weight:900;
+}
+#side-bar {
+  float:left;
+  background: #222;
+  color:#FFFFFF;
+  width: 18%;
+  height: 1200px;
+  border:1px solid lightgray;
+  padding: 8px;
+  padding-top: 6px;
+}
+.title {
+  float:left;
+  width:100%;
+  font-size:11px;
+  color: #FFFFFF;
+  margin-top:6px;
+  margin-left:8px;
+  text-align:left;
+}

index.html

@@ -0,0 +1,124 @@
+<!DOCTYPE html>
+<html lang="en-US">
+<head>
+
+  <meta name="viewport" content="width=device-width, initial-scale=1"/>
+
+<!--
+Copyright (c) 2016, 2024, 5 Mode
+All rights reserved.
+
+This file is part of BoxToBox.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software 
+and associated documentation files (the "Software"), to deal in the Software 
+without restriction, including without limitation the rights to use, copy, modify, merge, publish, 
+distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the 
+Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or 
+substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, 
+INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A 
+PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR 
+COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN 
+AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION 
+WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+https://opensource.org/licenses/MIT
+-->  
+
+  <title>BoxToBox</title>
+
+  <link rel="shortcut icon" href="/favicon.ico" />
+
+  <meta name="description" content="Welcome to BoxToBox! Let everyone have its code by boxes. Happy coding!"/>
+  <meta name="keywords" content="BoxToBox,code,coding,pby,boxes,on,premise,solution"/>
+  <meta name="robots" content="index,follow"/>
+  <meta name="author" content="5 Mode"/>
+
+  <script src="/js/jquery-3.6.0.min.js" type="text/javascript"></script>
+  <script src="/js/sha.js" type="text/javascript"></script>
+  <script src="/js/common.js" type="text/javascript"></script>  
+
+  <link href="/css/style.css?r=<?PHP echo(time());?>" type="text/css" rel="stylesheet">
+
+  <link href="/css/bootstrap.min.css" type="text/css" rel="stylesheet">
+
+</head>
+<body>
+
+<form id="frmUpload" role="form" method="post" action="/?hl=<?PHP echo($lang);?>" target="_self" enctype="multipart/form-data">  
+
+<div id="resizeBanner">
+    BoxMe is bigger!
+</div>  
+
+<div id="content">
+
+    <div id="header">
+      <img src="/res/logo2.png" style="width:38px;position:relative;top:-5px;">&nbsp;BoxToBox&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#" onclick="BOXMErun();"><img src="/res/run.png" style="width:21px;position:relative;top:-5px;">&nbsp;Go!</a>&nbsp;&nbsp;&nbsp;<a href="#" onclick="BOXMEclearAll()"><img src="/res/clear.png" style="width:21px;position:relative;top:-5px;">&nbsp;Clear</a>&nbsp;&nbsp;&nbsp;
+    </div>  
+
+    <div id="coding"> 
+
+        <div id="boxHtml">
+          <div class="title">HTML</div>
+           <textarea id="txtHTMLCode" class="code"></textarea>
+        </div>  
+
+        <div id="boxCss">
+          <div class="title">CSS</div>
+           <textarea id="txtCSSCode" class="code"></textarea>
+        </div>  
+
+        <div id="boxJs">
+          <div class="title">Javascript</div>
+           <textarea id="txtJSCode" class="code"></textarea>
+        </div>  
+
+        <div id="boxRendering">
+          <div class="title">Rendering&nbsp;</div>
+          <div id="finalResult">
+                &nbsp;
+          </div>
+        </div>  
+
+    </div><!-- coding -->
+
+    <div id="footerCont">&nbsp;</div>
+    <div id="footer"><span style="background:#FFFFFF; opacity:0.7;">&nbsp;&nbsp;A <a href="http://5mode.com" class="aaa">5 Mode</a> project and <a href="http://demo.5mode.com" class="aaa">WYSIWYG</a> system. <?PHP echo(getResource0("Some rights reserved", $lang));?>.</span></div>
+
+</div><!-- content -->    
+
+</form>       
+
+<script>  
+  function BOXMErun() {
+    CSSCode = "<style>"+document.getElementById("txtCSSCode").value+"</style>";
+    JSCode = "<script>"+document.getElementById("txtJSCode").value+"\<\/script\>";
+    if (JSCode.indexOf("BOXME")>0) {
+      alert("You can't use <BOXME> code inside your own script!");
+      return;
+    }  
+    HTMLCode = document.getElementById("txtHTMLCode").value;
+    $("#finalResult").html(CSSCode+"\n"+JSCode+"\n"+HTMLCode+"\n");
+  }
+
+  function BOXMEclearAll() {
+    $("#txtHTMLCode").val("");
+    $("#txtCSSCode").val("");
+    $("#txtJSCode").val("");
+    $("#finalResult").html("");
+  }
+
+  function BOXMEshowNudity() {
+    document.getElementById("finalResult").innerHTML = $("#finalResult").html();
+  }  
+</script>
+
+<script src="/js/home.js" type="text/javascript"></script>   
+
+</body>
+</html>