Skip to content

Commit

Permalink
Made a Click and Create Interface for Mobile (#7)
Browse files Browse the repository at this point in the history
  • Loading branch information
@JeelDobariya38
JeelDobariya38 authored Jul 4, 2024
2 parents cd0cba8 + 98472b3 commit 9fc0d24
Show file tree
Hide file tree
Showing 13 changed files with 320 additions and 79 deletions.
15 changes: 9 additions & 6 deletions create-script.html → desktop-create-script.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,9 +2,13 @@
<html lang="en">

<head>
<!-- It load First Due, To Redirects Handling -->
<script src="./scripts/website_adjust.js"></script>

<!-- Normal Head Content -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ScriptMaker | Create</title>
<title>Script Maker | Create</title>

<script src="https://cdnjs.cloudflare.com/ajax/libs/typed.js/2.0.0/typed.js"
integrity="sha512-ioFpA4cD4gmoOhHglW4f6gep7w+YL7UMKtXx4ebJ5NN4SscmnZYYmSjkA+DaHGvBI4wpYVPx2C7DmmV9TgbIbQ=="
Expand All @@ -29,10 +33,10 @@ <h1 class="text-4xl font-black text-center p-2">Create Scripts that Automate Wor

<div class="script-container m-4">
<div id="toast-info" class="my-4 text-xs"></div>
<h1 class="text-3xl font-bold">Script Content</h1>
<h2 class="text-3xl font-bold">Script Content</h2>
<div class="py-2 flex justify-between">
<div>
<label for="language-option">Choose a language: </label>
<label for="language-option">Select a language: </label>
<select name="language" id="language-option">
<option class="stable" value="powershell">PowerShell (Windows)</option>
<option class="stable" value="bash">Bash (Linux/MacOs)</option>
Expand All @@ -41,9 +45,8 @@ <h1 class="text-3xl font-bold">Script Content</h1>
</select>
</div>
<div>
<button id="copybtn" class="btn btnfeedback"><i class="px-2 fa-solid fa-clipboard"></i
class="responsive"><span class="responsive-hide">Copy To
ClipBoard</span></button>
<button id="copybtn" class="btn btnfeedback"><i class="px-2 fa-solid fa-clipboard"></i><span
class="responsive-hide">Copy To ClipBoard</span></button>
<button id="downloadbtn" class="btn btnfeedback"><i
class="px-2 fa-solid fa-file-arrow-down"></i><span
class="responsive-hide">Download</span></button>
Expand Down
0 explore.html → desktop-explore.html
View file
File renamed without changes.
60 changes: 60 additions & 0 deletions desktop-homepage.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,60 @@
<!DOCTYPE html>
<html lang="en">

<head>
<!-- It load First Due, To Redirects Handling -->
<script src="./scripts/website_adjust.js"></script>

<!-- Normal Head Content -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Script Maker | Home</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/typed.js/2.0.0/typed.js"
integrity="sha512-ioFpA4cD4gmoOhHglW4f6gep7w+YL7UMKtXx4ebJ5NN4SscmnZYYmSjkA+DaHGvBI4wpYVPx2C7DmmV9TgbIbQ=="
crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css"
integrity="sha512-SnH5WK+bZxgPHs44uWIX+LLJAJ9/2PkPKZ5QiAj6Ta86w+fsb2TkcmfRyVX3pBnMFcV7oQPJkl9QevSCWr3W6A=="
crossorigin="anonymous" referrerpolicy="no-referrer" />
<!-- <script src="https://cdn.tailwindcss.com"></script> -->
<link rel="icon" type="image/x-icon" href="./assets/favicon.ico">
<link rel="stylesheet" href="./styles/style.css">
<link rel="stylesheet" href="./styles/tailwind/output.css">
<script src="./scripts/utils.js"></script>
<script src="./scripts/script.js"></script>
</head>

<body class="dark-theme">
<main>
<div class="flex-center flex-col full-screen">
<h1 class="text-6xl">ScriptMaker</h1>
<p class="text-lg">
Make Scripts that <span id="typer" class="text-slate-400"></span>
</p>
<div class="flex-center gap-8 p-4">
<a href="desktop-explore.html">
<div class="btn"><i class="icon fa-solid fa-plus"></i>Explore</div>
</a>
<a href="desktop-create-script.html">
<div class="btn"><i class="icon fa-solid fa-arrow-up-right-from-square"></i>Create</div>
</a>
</div>
</div>
</main>

<footer class="flex justify-center">
<a href="https://github.com/JeelDobariya38/ScriptMaker">
<div class="p-4 flex items-center gap-2">
<h2 class="text-lg font-black">Repository: </h2>
<p class="text-sm font-bold text-blue-500">JeelDobariya38/ScriptMaker</p>
</div>
</a>
<a href="https://raw.githubusercontent.com/JeelDobariya38/ScriptMaker/master/LICENSE.txt">
<div class="p-4 flex items-center gap-2">
<h2 class="text-lg font-black">License: </h2>
<p class="text-sm font-bold text-blue-500">MIT</p>
</div>
</a>
</footer>
</body>

</html>
66 changes: 12 additions & 54 deletions index.html
View file
Original file line number Diff line number Diff line change
@@ -1,60 +1,18 @@
<!DOCTYPE html>
<html lang="en">

<head>
<!-- It load First Due, To Redirects Handling -->
<script src="./scripts/website_adjust.js"></script>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Script Maker | Inital Page</title>
</head>

<!-- Normal Head Content -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ScriptMaker | Home</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/typed.js/2.0.0/typed.js"
integrity="sha512-ioFpA4cD4gmoOhHglW4f6gep7w+YL7UMKtXx4ebJ5NN4SscmnZYYmSjkA+DaHGvBI4wpYVPx2C7DmmV9TgbIbQ=="
crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css"
integrity="sha512-SnH5WK+bZxgPHs44uWIX+LLJAJ9/2PkPKZ5QiAj6Ta86w+fsb2TkcmfRyVX3pBnMFcV7oQPJkl9QevSCWr3W6A=="
crossorigin="anonymous" referrerpolicy="no-referrer" />
<!-- <script src="https://cdn.tailwindcss.com"></script> -->
<link rel="icon" type="image/x-icon" href="./assets/favicon.ico">
<link rel="stylesheet" href="./styles/style.css">
<link rel="stylesheet" href="./styles/tailwind/output.css">
<script src="./scripts/utils.js"></script>
<script src="./scripts/script.js"></script>
</head>

<body class="dark-theme">
<main>
<div class="flex-center flex-col full-screen">
<h1 class="text-6xl">ScriptMaker</h1>
<p class="text-lg">
Make Scripts that <span id="typer" class="text-slate-400"></span>
</p>
<div class="flex-center gap-8 p-4">
<a href="explore.html">
<div class="btn"><i class="icon fa-solid fa-plus"></i>Explore</div>
</a>
<a href="create-script.html">
<div class="btn"><i class="icon fa-solid fa-arrow-up-right-from-square"></i>Create</div>
</a>
</div>
</div>
</main>

<footer class="flex justify-center">
<a href="https://github.com/JeelDobariya38/ScriptMaker">
<div class="p-4 flex items-center gap-2">
<h2 class="text-lg font-black">Repository: </h2>
<p class="text-sm font-bold text-blue-500">JeelDobariya38/ScriptMaker</p>
</div>
</a>
<a href="https://raw.githubusercontent.com/JeelDobariya38/ScriptMaker/master/LICENSE.txt">
<div class="p-4 flex items-center gap-2">
<h2 class="text-lg font-black">License: </h2>
<p class="text-sm font-bold text-blue-500">MIT</p>
</div>
</a>
</footer>
</body>
<body>
<h1>Script Maker | Inital Page</h1>
<p>Please Wait we redirecting you!!</p>
<script>
window.location.pathname += "mobile-homepage.html";
</script>
</body>

</html>
110 changes: 110 additions & 0 deletions mobile-create-script.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,110 @@
<!DOCTYPE html>
<html lang="en">

<head>
<!-- It load First Due, To Redirects Handling -->
<script src="./scripts/website_adjust.js"></script>

<!-- Normal Head Content -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Script Maker | Create</title>

<script src="https://cdnjs.cloudflare.com/ajax/libs/typed.js/2.0.0/typed.js"
integrity="sha512-ioFpA4cD4gmoOhHglW4f6gep7w+YL7UMKtXx4ebJ5NN4SscmnZYYmSjkA+DaHGvBI4wpYVPx2C7DmmV9TgbIbQ=="
crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css"
integrity="sha512-SnH5WK+bZxgPHs44uWIX+LLJAJ9/2PkPKZ5QiAj6Ta86w+fsb2TkcmfRyVX3pBnMFcV7oQPJkl9QevSCWr3W6A=="
crossorigin="anonymous" referrerpolicy="no-referrer" />
<!-- <script src="https://cdn.tailwindcss.com"></script> -->
<link rel="icon" type="image/x-icon" href="./assets/favicon.ico">
<link rel="stylesheet" href="./styles/tailwind/output.css">
<link rel="stylesheet" href="./styles/style.css">
<script src="./scripts/utils.js"></script>
<script src="./scripts/compile.js"></script>
<script src="./scripts/extract_script_content.js"></script>
<script src="./scripts/clickcreate.js"></script>
<script src="./scripts/script.js"></script>
</head>

<body class="dark-theme">
<h1 class="text-2xl font-black text-center p-2">Create Scripts that Automate World!!!</h1>

<div class="script-container m-2 my-4">
<div id="toast-info" class="my-4 text-xs"></div>
<h2 class="text-2xl text-center font-bold">Script Content</h2>
<div class="py-2 flex flex-col justify-between">
<div class="m-2">
<label for="language-option">Select a language: </label>
<select name="language" id="language-option">
<option class="stable" value="powershell">PowerShell (Windows)</option>
<option class="stable" value="bash">Bash (Linux/MacOs)</option>
<option class="stable" value="python">Python 3.9+</option>
<option class="depecreted" value="bat">Depecreted: Batch (Bat)</option>
</select>
</div>
<div class="m-2 flex justify-between">
<button id="copybtn" class="btn btnfeedback"><i class="px-2 fa-solid fa-clipboard"></i>Copy To
ClipBoard</button>
<button id="downloadbtn" class="btn btnfeedback"><i
class="px-2 fa-solid fa-file-arrow-down"></i>Download</button>
</div>
</div>
<div class="my-8">
<div class="m-1">
<label for="elem-option">Select a element: </label>
<select id="elem-option">
<option value="printmsg">Print A Message</option>
<option value="mkdir">Make a Directory</option>
<option value="mkfile">Make a File</option>
<option value="writefile">Write to File</option>
</select>
<input class="px-2 border-2 rounded-lg transition-colors hover:text-slate-900 hover:bg-slate-100"
type="button" id="addelem" value="Add Element" />
</div>

<div class="m-1">

<div class="script-content min-h-48 small-container">

</div>

<div class="hidden script-snippits w-5/12">
<div id="printmsg" class="btn w-full m-2 dragable">
<h3>Print A Message</h3>
<div id="details" class="hidden details p-2">
<label for="messageinput">Message: </label>
<input type="text" id="messageinput" class="args">
</div>
</div>
<div id="mkdir" class="btn w-full m-2 dragable">
<h3>Make a Directory</h3>
<div id="details" class="hidden details p-2">
<label for="directorynameinput">DirectoryName: </label>
<input type="text" id="directorynameinput" class="args">
</div>
</div>
<div id="mkfile" class="btn w-full m-2 dragable">
<h3>Make a File</h3>
<div id="details" class="hidden details p-2">
<label for="filenameinput">FileName: </label>
<input type="text" id="filenameinput" class="args">
</div>
</div>
<div id="writefile" class="btn w-full m-2 dragable">
<h3>Write to File</h3>
<div id="details" class="hidden details p-2">
<label for="filenameinput">FileName: </label>
<input type="text" id="filenameinput" class="args">
<br />
<label for="contentinput">Content: </label>
<input type="text" id="contentinput" class="args">
</div>
</div>
</div>
</div>
</div>
</div>
</body>

</html>
1 change: 1 addition & 0 deletions mobile-explore.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
<h1>404 - Page Not Found!!</h1>
8 changes: 4 additions & 4 deletions smallscreens_homepage.html → mobile-homepage.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@
<!-- Normal Head Content -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ScriptMaker | Home</title>
<title>Script Maker | Home</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/typed.js/2.0.0/typed.js"
integrity="sha512-ioFpA4cD4gmoOhHglW4f6gep7w+YL7UMKtXx4ebJ5NN4SscmnZYYmSjkA+DaHGvBI4wpYVPx2C7DmmV9TgbIbQ=="
crossorigin="anonymous" referrerpolicy="no-referrer"></script>
Expand All @@ -23,17 +23,17 @@
<script src="./scripts/script.js"></script>
</head>

<body class="light-theme">
<body class="dark-theme">
<div class="flex-center flex-col full-screen">
<h1 class="text-4xl font-black">ScriptMaker</h1>
<p class="text-xs">
Make Scripts that <span id="typer" class="text-slate-400">
</p>
<div class="flex-center gap-2 p-4">
<a href="small_explore.html">
<a href="mobile-explore.html">
<div class="btn"><i class="icon fa-solid fa-plus"></i>Explore</div>
</a>
<a href="small_create-script.html">
<a href="mobile-create-script.html">
<div class="btn"><i class="icon fa-solid fa-arrow-up-right-from-square"></i>Create</div>
</a>
</div>
Expand Down
36 changes: 36 additions & 0 deletions scripts/clickcreate.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,36 @@
const setup_click_and_create_functionality = (selectElem, addElemBtn, finalzoneElem) => {
addElemBtn.addEventListener("click", () => {
let elemToAdd = document.querySelector("#" + selectElem.value);
elemToAdd = elemToAdd.cloneNode(true);
elemToAdd.classList.add("show-full");
finalzoneElem.appendChild(elemToAdd);
})

};


const get_require_elements = (selectSelector, addelembtnSelector, finalzoneSelector) => {
let selectElem = document.querySelector(selectSelector);
let addElemBtn = document.querySelector(addelembtnSelector);
let finalzoneElem = document.querySelector(finalzoneSelector);

if (!selectElem) {
throw new Error(`ElementNotFoundError: Can't found elements with selector: "${selectSelector}"`);
}

if (!addElemBtn) {
throw new Error(`ElementNotFoundError: Can't found elements with selector: "${addelembtnSelector}"`);
}

if (!finalzoneElem) {
throw new Error(`ElementNotFoundError: Can't found elements with selector: "${finalzoneSelector}"`);
}

return [selectElem, addElemBtn, finalzoneElem];
};


document.addEventListener("DOMContentLoaded", () => {
let [selectElem, addElemBtn, finalzoneElem] = get_require_elements("#elem-option", "#addelem", ".script-content");
setup_click_and_create_functionality(selectElem, addElemBtn, finalzoneElem);
});
Loading

0 comments on commit 9fc0d24

Please sign in to comment.