diff --git a/Documents/000.jpg b/Documents/000.jpg new file mode 100644 index 0000000..3a9d54a Binary files /dev/null and b/Documents/000.jpg differ diff --git a/Images/000.jpg b/Images/000.jpg new file mode 100644 index 0000000..c7524e9 Binary files /dev/null and b/Images/000.jpg differ diff --git a/Images/1.png b/Images/1.png new file mode 100644 index 0000000..fc62279 Binary files /dev/null and b/Images/1.png differ diff --git a/Images/2.png b/Images/2.png new file mode 100644 index 0000000..ac674ea Binary files /dev/null and b/Images/2.png differ diff --git a/Images/3.png b/Images/3.png new file mode 100644 index 0000000..386de4d Binary files /dev/null and b/Images/3.png differ diff --git a/Images/4.png b/Images/4.png new file mode 100644 index 0000000..98fea97 Binary files /dev/null and b/Images/4.png differ diff --git a/Images/5.png b/Images/5.png new file mode 100644 index 0000000..2005d71 Binary files /dev/null and b/Images/5.png differ diff --git a/Music/000.jpg b/Music/000.jpg new file mode 100644 index 0000000..7cd17f4 Binary files /dev/null and b/Music/000.jpg differ diff --git a/README.md b/README.md index f60dc1f..68aba40 100644 --- a/README.md +++ b/README.md @@ -13,6 +13,15 @@ Notes: 3. The provided folders except "resources" are optional. You can add and remove them as you please. 4. The media and image pane can be moved by dragging from the transparentish bar that has the close button and other controls. +# TO-DO +1. Allow for move, copy, delete functionality. +2. Allow for creating folders through the web interface. +3. Fix the ' and & naming issue. +4. Resolve issue were uploading doesn't always prompt an interface update. +5. Impliment themes functionality. +6. Look to refactor code. + + # Images ![1 Home](Images/1.png) diff --git a/Videos/000.jpg b/Videos/000.jpg new file mode 100644 index 0000000..2a1deca Binary files /dev/null and b/Videos/000.jpg differ diff --git a/favicon.png b/favicon.png new file mode 100644 index 0000000..76c6e41 Binary files /dev/null and b/favicon.png differ diff --git a/index.html b/index.html new file mode 100644 index 0000000..2a743d3 --- /dev/null +++ b/index.html @@ -0,0 +1,42 @@ + + + + + Web File Manager + + + + + + + + + +

+
+ + + + + + +
+
+     Path:   +

+ + +
+ + + + + + + + + + + diff --git a/resources/css/base.css b/resources/css/base.css new file mode 100644 index 0000000..40854c9 --- /dev/null +++ b/resources/css/base.css @@ -0,0 +1,14 @@ +html { + margin: 0em; + padding: 0em; +} + +iframe { + position: fixed; + overflow: auto; + background-color: rgba(60, 110, 135, 0.24); + color: rgba(255, 255, 255, 1); + width: 100%; + height: auto; + bottom: 0; +} diff --git a/resources/css/main.css b/resources/css/main.css new file mode 100644 index 0000000..c7f6082 --- /dev/null +++ b/resources/css/main.css @@ -0,0 +1,158 @@ +/* IDs */ + +#DIRPATHUL { + display: none; + width: 1px; + height: 1px; +} + +#bg { + position: fixed; + top: 0%; + left: 0%; + width: 100%; + height: 100%; + z-index: -999; +} +#bg img { + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + width: 100%; + height: 100%; + z-index: -999; +} + +#fullPathHeader, #dynDiv, +.errorStyling, .dirStyle, .movieStyle, .fileStyle { + display: block; + width: 100%; + height: auto; + overflow: auto; + padding-bottom: 0.5em; + color: #ffffff; + text-align: center; + font-size: 1.2em; + background-color: rgba(0,0,0,0.64); +} + +#fullPathHeader { + display: block; + position: fixed; + top: 0.5em; +} + +#dynDiv { + margin-top: 8em; +} + +#imgView, #imgArea, #fileView { + width: 800px; + height: 600px; +} + +#imgView, #fileView { + position: fixed; + bottom: 0em; + z-index: 100; + border-style: solid; + border-color: rgb(114,184,199); + + } + +#fileView { + display: block; + overflow: auto; +} + +#fileViewInner { + position: sticky; + display: inline; + width: 100%; + height: 500px; +} + +#imgArea { + width: 800px; + height: 600px; + overflow-y: scroll; +} + +#imgView { overflow: hidden; left: 15em; } + + +/* Classes */ +.imgViewImg { + width: inherit; + height: auto; +} + + +.dirStyle { background-color: rgba(0, 0, 0, 0.56); } +.movieStyle, .fileStyle { background-color: rgba(101, 101, 101, 0.56); } + +.dirStyle:hover, .movieStyle:hover, .fileStyle:hover { + background-color: rgba(0, 141, 166, 0.56); + cursor: pointer; +} + +.movieStyle { + float: left; + width: 15em; + overflow: hidden; + height: auto; + margin: 0.5em; + padding: 0.5em; +} + +.movieTitle { + width: 15em; + white-space: nowrap; + text-overflow: ellipsis; + overflow: hidden; +} + +.iconImg { + width: 12em; + height: 8em; + margin: 1em; +} + +.popOutBttn, .closeBttn { + float: right; + z-index: 2; + width: 4em; + height: 4em; + text-align: center; + vertical-align: middle; + line-height: 4em; /* the same as your div height */ + background-color: rgba(0,0,0, 0.85); + color: rgb(255,255,255); + border-style:solid; + border-color: rgb(255,255,255); +} + + +/* Hover events */ +.closeBttn:hover, .popOutBttn:hover { + cursor: pointer; +} + +.closeBttn:hover, .popOutBttn:hover { + background-color: rgba(255,255,255, 0.85); + color: #000000; + border-color: #000000; +} + +.error, .warnning, .success { + float: left; + clear: both; +} + +.errorStyling { background-color: rgb(255,0,0); } + +.error { color: rgb(255, 0, 0); } +.warnning { color: rgb(255, 168, 0); } +.success { color: rgb(136, 204, 39); } diff --git a/resources/ffmpegthumbnailer b/resources/ffmpegthumbnailer new file mode 100755 index 0000000..0b6e6e2 Binary files /dev/null and b/resources/ffmpegthumbnailer differ diff --git a/resources/images/backgrounds/000.jpg b/resources/images/backgrounds/000.jpg new file mode 100755 index 0000000..4ffd219 Binary files /dev/null and b/resources/images/backgrounds/000.jpg differ diff --git a/resources/images/thumbnails/placeHolder.txt b/resources/images/thumbnails/placeHolder.txt new file mode 100644 index 0000000..a8fe526 --- /dev/null +++ b/resources/images/thumbnails/placeHolder.txt @@ -0,0 +1 @@ +Place Holder File diff --git a/resources/js/ajax.js b/resources/js/ajax.js new file mode 100644 index 0000000..ee60156 --- /dev/null +++ b/resources/js/ajax.js @@ -0,0 +1,140 @@ +var pathNodes = []; // Path parts Could store a cookie to keep sessions + +function getDirSSE() { + var path = ""; + + // Create path from array of items + for (pathNode of pathNodes) { path += pathNode; } + path = "dirQuery=" + path; + process(path); +} + +function getDir(query) { + var formULPTH = document.getElementById("DIRPATHUL"); + var path = ""; + + // push or pop to path list + if (query === "/") { + if (document.cookie) { + var temp = document.cookie.replace("dirQuery=", ""); + temp = temp.split("/"); + // Subtract one b/c paths end with / and create empty slot + var size = temp.length - 1; + + for (var i = 0; i < size; i++) { + pathNodes.push(temp[i] + "/"); + } + } else { + pathNodes.push("." + query); // If in root of server + } + } else if (query === "../") { + if (pathNodes.length > 1) { pathNodes.pop(); } // Only remove while not in root + } else if (query === "./") { // Do nothing since re-scanning dir + } else { pathNodes.push(query); } // Add path + + // Create path from array of items + for (pathNode of pathNodes) { path += pathNode; } + + formULPTH.value = path; // Used when upoading a file + path = "dirQuery=" + path; + process(path); +} + +function process(path) { + // Get dir info... + var xhttp = new XMLHttpRequest(); // Create the xhttp object + + // This is actually run after open and send are done + xhttp.onreadystatechange = function() { + if (this.readyState === 4 && this.status === 200) { + // Send the returned data to further process + updatePage(this.responseXML); + } + }; + xhttp.open("POST", "resources/php/process.php", true); // Open the connection + xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); + xhttp.overrideMimeType('application/xml'); // Force return to be XML + xhttp.send(path); // Start the process + + // Use a cookie for persistence during browser session.... + document.cookie = path +"; path=" + document.URL; +} + +function updatePage(returnData) { + var dirPath = returnData.getElementsByTagName('PATH_HEAD')[0]; + var dirs = returnData.getElementsByTagName('DIR'); + var videos = returnData.getElementsByTagName('VID_FILE'); + var images = returnData.getElementsByTagName('IMG_FILE'); + var files = returnData.getElementsByTagName('FILE'); + var insertArea = document.getElementById('dynDiv'); + var workingDir = dirPath.innerHTML; + var i = 0; + + // Insert dirs + document.getElementById("path").innerHTML = dirPath.innerHTML; + insertArea.innerHTML = ""; + + if (workingDir === "./") { var i = 2 } // Remove ,. and ../ if in "root" + + var size = dirs.length; + for (; i < size; i++) { + var dir = dirs[i].innerHTML; + + if (dir != "resources/") { + insertArea.innerHTML += "
" + + dir + + ""; + } + } + + // Insert videos + size = videos .length; + for (i = 0; i < size; i++) { + var thumbnail = videos[i].children[0].innerHTML; + var videoPth = videos[i].children[1].innerHTML; + var vidNme = videos[i].children[2].innerHTML; + + insertArea.innerHTML += "" + + "\""" + + "

" + vidNme + "

" + + ""; + } + + // Insert images + size = images.length; + for (i = 0; i < size; i++) { + var thumbnail = images[i].children[0].innerHTML; + var imgTitle = images[i].children[1].innerHTML; + + if (!imgTitle.includes("favicon.png") && !imgTitle.includes("000.png") && + !imgTitle.includes("000.jpg") && !imgTitle.includes("000.gif")) { + insertArea.innerHTML += "\"""; + } + } + + if (images[0] != undefined) { + if (images[0].children[0].innerHTML.includes("000.jpg") || + images[0].children[0].innerHTML.includes("000.png") || + images[0].children[0].innerHTML.includes("000.gif")) { + updateBG(images[0].children[0].innerHTML); + } else { updateBG("resources/images/backgrounds/000.jpg"); } + } else { updateBG("resources/images/backgrounds/000.jpg"); } + + // Insert files + size = files.length; + for (i = 0; i < size; i++) { + var filePath = files[i].children[0].innerHTML; + var fileName = files[i].children[1].innerHTML + + if (fileName != "sse.php" && fileName != "upload.php" && + fileName != "open.php" && fileName != "process.php") { + insertArea.innerHTML += "
" + fileName + ""; + } + } +} diff --git a/resources/js/controlers.js b/resources/js/controlers.js new file mode 100644 index 0000000..659d8fd --- /dev/null +++ b/resources/js/controlers.js @@ -0,0 +1,82 @@ +function showImg(imgLoc) { + var imgView = document.getElementById("imgView"); + var toPlayerButton = "
∽
"; + var popButton = "
↗
"; + var CloseBttn = "
X
"; + + imgView.style.display = "block"; + imgView.innerHTML = CloseBttn + popButton + toPlayerButton; + imgView.innerHTML += "
"; + + dragContainer(imgView); // Set for dragging events +} + +function showMedia(media) { + var tempRef = media.toLowerCase(); + if (tempRef.includes(".mkv") || tempRef.includes(".avi") || tempRef.includes(".flv") || + tempRef.includes(".mov") || tempRef.includes(".m4v") || tempRef.includes(".mpg") || + tempRef.includes(".wmv") || tempRef.includes(".mpeg") || tempRef.includes(".psf")) { + openInLocalProg(media); + } else { + var mediaView = document.getElementById("fileView"); + var toPlayerButton = "
∽
"; + var popButton = "
↗
"; + var CloseBttn = "
X
"; + + mediaView.style.display = "block"; + mediaView.innerHTML = CloseBttn + popButton + toPlayerButton; + mediaView.innerHTML += ""; + + dragContainer(mediaView); // Set for dragging events + } +} + +function openInLocalProg(media) { + var xhttp = new XMLHttpRequest(); + + xhttp.open("POST", "resources/php/open.php", true); + xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); + xhttp.send("media=" + media); +} + +function tgglServerMsgView() { + var serverMsgView = document.getElementById("toggleServerMsg"); + if (serverMsgView.style.display == "none") { + serverMsgView.style.display = "block"; + } else { + serverMsgView.style.display = "none"; + } +} + +function closeImg() { + var imgView = document.getElementById("imgView"); + imgView.style.display = "none"; +} + +function closeMedia() { + var mediaView = document.getElementById("fileView"); + mediaView.style.display = "none"; + mediaView.children[3].src = ""; +} + +function clearDirCookie() { + var expireDate = "Thu, 01 Jan 1970 00:00:00 UTC"; + document.cookie = "dirQuery=; expires=" + expireDate; + location.reload(); +} + +function onloadSetBG() { updateBG("resources/images/backgrounds/000.jpg"); } +function updateBG(bgImg) { document.getElementById("bg").src = bgImg; } + + +// SSE events if supported +if(typeof(EventSource) !== "undefined") { + var source = new EventSource("resources/php/sse.php"); + source.onmessage = function(event) { + if (event.data === "updateListing") { + getDirSSE(); + } + }; +} else { + console.log("SSE Not Supported In Browser..."); +} diff --git a/resources/js/dragContainer.js b/resources/js/dragContainer.js new file mode 100644 index 0000000..281daa2 --- /dev/null +++ b/resources/js/dragContainer.js @@ -0,0 +1,43 @@ +function dragContainer(elmnt) { + var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0; + elmnt.onmousedown = dragMouseDown; + + function dragMouseDown(e) { + e = e || window.event; + pauseEvent(e); + // get the mouse cursor position at startup: + pos3 = e.clientX; + pos4 = e.clientY; + document.onmouseup = closeDragElement; + // call a function whenever the cursor moves: + document.onmousemove = elementDrag; + } + + function elementDrag(e) { + e = e || window.event; + pauseEvent(e); + // calculate the new cursor position: + pos1 = pos3 - e.clientX; + pos2 = pos4 - e.clientY; + pos3 = e.clientX; + pos4 = e.clientY; + // set the element's new position: + elmnt.style.top = (elmnt.offsetTop - pos2) + "px"; + elmnt.style.left = (elmnt.offsetLeft - pos1) + "px"; + } + + function closeDragElement(e) { + // stop moving when mouse button is released: + document.onmouseup = null; + document.onmousemove = null; + } + + function pauseEvent(e) { + if(e.stopPropagation) e.stopPropagation(); + if(e.preventDefault) e.preventDefault(); + + e.cancelBubble=true; + e.returnValue=false; + return false; + } +} diff --git a/resources/php/config.php b/resources/php/config.php new file mode 100644 index 0000000..52d581e --- /dev/null +++ b/resources/php/config.php @@ -0,0 +1,11 @@ + diff --git a/resources/php/open.php b/resources/php/open.php new file mode 100644 index 0000000..74db9ea --- /dev/null +++ b/resources/php/open.php @@ -0,0 +1,23 @@ + diff --git a/resources/php/process.php b/resources/php/process.php new file mode 100644 index 0000000..83cf4ad --- /dev/null +++ b/resources/php/process.php @@ -0,0 +1,53 @@ +" + . "" . $CLEANPATH . ""; + + $dirContents = scandir($PATH); + foreach ($dirContents as $fileName) { + $fullPath = $CLEANPATH . $fileName; + + if (is_dir($PATH . $fileName)) { + $GeneratedXML .= "" . $fileName . "/"; + } elseif (preg_match('/^.*\.(mkv|avi|flv|mov|m4v|mpg|wmv|mpeg|mp4|webm)$/i', strtolower($fileName))) { + $NAMEHASH = hash('sha256', $fileName); + if (!file_exists('../images/thumbnails/' . $NAMEHASH . '.jpg')) { + shell_exec('../ffmpegthumbnailer -t 65% -s 320 -c jpg -i "' + . $PATH . $fileName . '" -o ../images/thumbnails/' + . $NAMEHASH . '.jpg'); + } + $GeneratedXML .= + "" + . "/resources/images/thumbnails/" . $NAMEHASH . ".jpg" + . "" . $fullPath . "" + . "" . $fileName . "" . + ""; + } elseif (preg_match('/^.*\.(png|jpg|gif|jpeg)$/i', strtolower($fileName))) { + $GeneratedXML .= + "" + . "". $fullPath . "" + . "" . $fileName . "" + . ""; + } else { + $GeneratedXML .= + "" + . "" . $fullPath . "" + . "" . $fileName . "" + . ""; + } + } + $GeneratedXML .= ""; + echo $GeneratedXML; +} + +// Determin action +if (isset($_POST['dirQuery'])) { + dirListing(trim($_POST['dirQuery'])); +} else { + echo "

Error! Illegal Access Method!

"; +} + +?> diff --git a/resources/php/sse.php b/resources/php/sse.php new file mode 100644 index 0000000..3cfe746 --- /dev/null +++ b/resources/php/sse.php @@ -0,0 +1,17 @@ + diff --git a/resources/php/upload.php b/resources/php/upload.php new file mode 100755 index 0000000..3a99156 --- /dev/null +++ b/resources/php/upload.php @@ -0,0 +1,71 @@ +" + . "" + . "" + . "" + . ""; + + $numberOfFiles = count($_FILES['filesToUpload']['name']); + for ($i=0; $i < $numberOfFiles; $i++) { + $uploadOk = 1; + $fileName = $_FILES['filesToUpload']['name'][$i]; + $fileTmpName = $_FILES['filesToUpload']['tmp_name'][$i]; + + // Check if file already exists + $targetFile = "../../" . $targetDir . $fileName; + if (file_exists($targetFile)) { + unlink($targetFile); + echo "Server: [Warnning] --> This file already exists. Overwriting it."; + } + + // Check file size + $fileSize = $_FILES['filesToUpload']['size'][$i]; + if ($fileSize > 500000000000) { + echo "Server: [Warnning] --> This file is too large."; + $uploadOk = 0; + } + + // Allow certain file formats + // $ext = pathinfo($targetFile,PATHINFO_EXTENSION); + // if($ext != "rar" && $ext != "iso" && $ext != "img" && $ext != "tar" + // && $ext != "zip" && $ext != "7z" && $ext != "7zip" && $ext != "jpg" + // && $ext != "png" && $ext != "jpeg" && $ext != "gif" && $ext != "mpeg" + // && $ext != "MOV" && $ext != "flv" && $ext != "avi" && $ext != "mp4" + // && $ext != "mov" && $ext != "mp3" && $ext != "m4a" && $ext != "ogg" + // && $ext != "mkv" && $ext != "docx" && $ext != "doc" && $ext != "odt" + // && $ext != "txt" && $ext != "pdf" && $ext != "webm" && $ext != "M4A" + // && $ext != "mpg" ) { + // echo "This file type is not allowed. File Not uploade."; + // $uploadOk = 0; + // } + + // Check if $uploadOk is set to 0 by an error + if ($uploadOk == 0) { + echo "Server: [Error] --> Your file " . $fileName . " was not uploaded."; + // if everything is ok, try to upload file + } else { + if (move_uploaded_file($fileTmpName, $targetFile)) { + echo "Server: [Success] --> The file " . $fileName . " has been uploaded."; + } else { + echo "Server: [Error] --> File not uploaded for the above reason(s)."; + } + } + } + echo ""; + + // Prompt an update clint side when sse checks that there is updateListing. + $myfile = fopen("../vars.txt", "wa+"); + $txt = "updateListing"; + fwrite($myfile, $txt); + fclose($myfile); +} + +// Check access type. +if(isset($_POST["UploadFiles"])) { + uploadFiles($_POST["DIRPATHUL"]); +} else { + echo "Server: [Error] --> Incorrect access attempt!"; +} + +?> diff --git a/resources/themes/Grid List.css b/resources/themes/Grid List.css new file mode 100755 index 0000000..1258939 --- /dev/null +++ b/resources/themes/Grid List.css @@ -0,0 +1,91 @@ +/*START OF HOMEPAGE BUTTON SETTINGS*/ +.homeSection { + float: left; + width: 40%; + height: 14em; + position: relative; + text-align: center; + font-size: 100%; + border-style: solid; + border-width: .2em; + color: rgba(0, 232, 255, .69); /*#00E8FF*/ + background: rgba(19, 21, 21, .6); +} +/*END OF HOMEPAGE BUTTON SETTINGS*/ +.header { + margin-left: auto; + margin-right: auto; + width: 99%; +} +.section, .lnksNdirs, .header { + display: block; + float: left; + text-align: center; + font-size: 100%; + padding-top: 1em; + margin: 1em; + background: rgba(19, 21, 21, .7); + color: rgba(0, 232, 255, .69); /*#00E8FF*/ +/* border-style: solid; + border-width: .2em; +*/ +} +.backbutton { + top: 3.55em; + clear: both; + z-index: 2; + position: fixed; + float: left; + width: 5%; + height: 50px; + opacity: .8; +} +iframe { + position: fixed; + bottom: 2em; + left: 25%; + width: 50%; + height: 360px; + background: rgba(0,0,0,.5); + transition: 0s; + transition-delay:2s; +} +iframe:hover { + left: 2%; + width: 99%; + height: 700px; + transition-delay:2s; +} +.lnkStyl { + clear: right; + float: left; + border-style: solid; +} + +.imgsStyl { + margin-left: 50%; + opacity: 0.699999988079071044921875; + width: 32.333%; + height: 20em; +} +.imgsStyl:hover { + opacity: 1; +} +#bg { + position: fixed; + top: 0%; + left: 0%; + width: 100%; + height: 100%; + z-index: -1; +} +#bg img { + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + width: 100%; + height: 100%; + z-index: -1; +} diff --git a/resources/themes/Horizontal List.css b/resources/themes/Horizontal List.css new file mode 100755 index 0000000..794d073 --- /dev/null +++ b/resources/themes/Horizontal List.css @@ -0,0 +1,89 @@ +body { +width: 600%; +} +/*START OF HOMEPAGE BUTTON SETTINGS*/ +.homeSection { + float: left; + width: 40%; + height: 14em; + position: relative; + text-align: center; + font-size: 100%; + border-style: solid; + border-width: .2em; + color: rgba(0, 232, 255, .69); /*#00E8FF*/ + background: rgba(19, 21, 21, .6); +} +/*END OF HOMEPAGE BUTTON SETTINGS*/ +.header { + margin-left: auto; + margin-right: auto; + width: 99%; +} +.section, .lnksNdirs, .header { + display: block; + clear: right; + float: left; + text-align: center; + font-size: 100%; + padding-top: 1em; + margin: 1em; + background: rgba(19, 21, 21, .7); + color: rgba(0, 232, 255, .69); /*#00E8FF*/ +/* border-style: solid; + border-width: .2em; +*/ +} +.backbutton { + top: 3.55em; + clear: both; + z-index: 2; + position: fixed; + float: left; + width: 5%; + height: 50px; + opacity: .8; +} +iframe { + position: fixed; + bottom: 2em; + left: 25%; + width: 50%; + height: 360px; + background: rgba(0,0,0,.5) + transition: 0s; + transition-delay:2s; +} +.lnkStyl { + clear: right; + float: left; + border-style: solid; +} + +.imgsStyl { + margin-left: 50%; + opacity: 0.699999988079071044921875; + width: 32.333%; + height: 20em; +} +.imgsStyl:hover { + opacity: 1; +} +#bg { + position: fixed; + top: 0%; + left: 0%; + width: 100%; + height: 100%; + z-index: -1; +} +#bg img { + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + width: 100%; + height: 100%; + z-index: -1; +} diff --git a/resources/themes/List Centered.css b/resources/themes/List Centered.css new file mode 100755 index 0000000..0486ad1 --- /dev/null +++ b/resources/themes/List Centered.css @@ -0,0 +1,89 @@ +/*START OF HOMEPAGE BUTTON SETTINGS*/ +.homeSection { + float: left; + width: 40%; + height: 14em; + position: relative; + text-align: center; + font-size: 100%; + border-style: solid; + border-width: .2em; + color: rgba(0, 232, 255, .69); /*#00E8FF*/ + background: rgba(19, 21, 21, .6); +} +/*END OF HOMEPAGE BUTTON SETTINGS*/ +.header { + margin-left: auto; + margin-right: auto; + width: 99%; +} +.section, .lnksNdirs, .header { + position: relative; + text-align: center; + font-size: 100%; + padding-top: 1em; + margin-top: 1em; + background: rgba(19, 21, 21, .7); + color: rgba(0, 232, 255, .69); /*#00E8FF*/ +/* border-style: solid; + border-width: .2em; +*/ +} +.backbutton { + top: 3.55em; + clear: both; + z-index: 2; + position: fixed; + float: left; + width: 5%; + height: 50px; + opacity: .8; +} +iframe { + clear: both; + z-index: 1; + position: fixed; + bottom: 5%; + width: 40%; + height: 500px; + background: rgba(0,0,0,.5) + transition: 0s; + transition-delay:2s; +} +iframe:hover { + width: 99%; + transition-delay:2s; +} +.lnkStyl { + clear: right; + float: left; + border-style: solid; +} + +.imgsStyl { + margin-left: 50%; + opacity: 0.699999988079071044921875; + width: 32.333%; + height: 20em; +} +.imgsStyl:hover { + opacity: 1; +} +#bg { + position: fixed; + top: 0%; + left: 0%; + width: 100%; + height: 100%; + z-index: -1; +} +#bg img { + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + width: 100%; + height: 100%; + z-index: -1; +} diff --git a/resources/themes/List On The Left.css b/resources/themes/List On The Left.css new file mode 100755 index 0000000..1a58d35 --- /dev/null +++ b/resources/themes/List On The Left.css @@ -0,0 +1,110 @@ +/*START OF HOMEPAGE BUTTON SETTINGS*/ +.homeSection { + float: left; + width: 40%; + height: 14em; + position: relative; + text-align: center; + font-size: 100%; + border-style: solid; + border-width: .2em; + color: rgba(0, 232, 255, .69); /*#00E8FF*/ + background: rgba(19, 21, 21, .6); +} +/*END OF HOMEPAGE BUTTON SETTINGS*/ + +.lnkStyl { + clear: right; + float: left; + border-style: solid; +} +.imgsStyl { + clear: both; + float: left; + opacity: 0.699999988079071044921875; + width: 20%; + height: 15em; +} +.imgsStyl:hover { + opacity: 1; +} +.header { + margin-left: auto; + margin-right: auto; + width: 100%; + float: left; +} +.lnksNdirs { + width: 20%; + float:left; +} +/* used to format sections of pgs*/ +.section, .lnksNdirs, .header { + clear: both; + position: relative; + text-align: center; + padding-top: 1em; + margin-top: 1em; + font-size: 100%; + background: rgba(19, 21, 21, .6); + background: rgba(19, 21, 21, .7); + color: rgba(0, 232, 255, .69); /*#00E8FF*/ +/* border-style: solid; + border-width: .2em; +*/ +} +.backbutton { + top: 3em; + clear: both; + z-index: 2; + position: fixed; + float: left; + width: 5%; + height: 55px; + opacity: .8; +} +.ifrmbutton2 { + top: 3em; + float: right; + right: .5em; + z-index:2; + position: fixed; + width: 5%; + height: 30px; + opacity: .6; +} +iframe { + margin-left: 2%; + z-index: 2; + position: fixed; + top: 8em; + right: 0.534em; + bottom: 2%; + width: 75%; + height: 525px; + background: rgba(0,0,0,.5) + transition: 0s; + transition-delay:2s; +} +iframe:hover { + height: 775px; + transition-delay:2s; +} +#bg { + position: fixed; + top: 0%; + left: 0%; + width: 100%; + height: 100%; + z-index: -1; +} +#bg img { + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + width: 100%; + height: 100%; + z-index: -1; +} diff --git a/resources/vars.txt b/resources/vars.txt new file mode 100644 index 0000000..e69de29