diff --git a/create-script.html b/desktop-create-script.html similarity index 91% rename from create-script.html rename to desktop-create-script.html index 59776f4..bfd4c61 100644 --- a/create-script.html +++ b/desktop-create-script.html @@ -2,9 +2,13 @@ + + + + - ScriptMaker | Create + Script Maker | Create + + + + + Script Maker | Home + + + + + + + + + + + +
+
+

ScriptMaker

+

+ Make Scripts that +

+
+ +
Explore
+ + +
Create
+ +
+
+
+ + + + + \ No newline at end of file diff --git a/index.html b/index.html index 41a1a94..341284e 100644 --- a/index.html +++ b/index.html @@ -1,60 +1,18 @@ - - - + + + + Script Maker | Inital Page + - - - - ScriptMaker | Home - - - - - - - - - - - -
-
-

ScriptMaker

-

- Make Scripts that -

-
- -
Explore
- - -
Create
- -
-
-
- - - + +

Script Maker | Inital Page

+

Please Wait we redirecting you!!

+ + \ No newline at end of file diff --git a/mobile-create-script.html b/mobile-create-script.html new file mode 100644 index 0000000..360947f --- /dev/null +++ b/mobile-create-script.html @@ -0,0 +1,110 @@ + + + + + + + + + + + Script Maker | Create + + + + + + + + + + + + + + + +

Create Scripts that Automate World!!!

+ +
+
+

Script Content

+
+
+ + +
+
+ + +
+
+
+
+ + + +
+ +
+ +
+ +
+ + +
+
+
+ + + \ No newline at end of file diff --git a/mobile-explore.html b/mobile-explore.html new file mode 100644 index 0000000..0b3bd2a --- /dev/null +++ b/mobile-explore.html @@ -0,0 +1 @@ +

404 - Page Not Found!!

\ No newline at end of file diff --git a/smallscreens_homepage.html b/mobile-homepage.html similarity index 93% rename from smallscreens_homepage.html rename to mobile-homepage.html index a53eccd..d4a956e 100644 --- a/smallscreens_homepage.html +++ b/mobile-homepage.html @@ -8,7 +8,7 @@ - ScriptMaker | Home + Script Maker | Home @@ -23,17 +23,17 @@ - +

ScriptMaker

Make Scripts that

- +
Explore
 - +
Create
diff --git a/scripts/clickcreate.js b/scripts/clickcreate.js new file mode 100644 index 0000000..f2a67a0 --- /dev/null +++ b/scripts/clickcreate.js @@ -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); +}); diff --git a/scripts/website_adjust.js b/scripts/website_adjust.js index 22e0340..9316e24 100644 --- a/scripts/website_adjust.js +++ b/scripts/website_adjust.js @@ -1,27 +1,33 @@ function getMobileWebsite() { - return window.location.href.replace("index.html", "smallscreens_homepage.html"); + return window.location.href.replace("desktop", "mobile"); } function getDestopWebsite() { - return window.location.href.replace("smallscreens_homepage.html", "index.html"); + return window.location.href.replace("mobile", "desktop"); } function checkScreenWidth() { - if (window.innerWidth <= 650) { + if (window.innerWidth <= 768) { // from approx tablet onwards... console.log("It seems like you are on a Phone!!!!"); - if (window.location.href.includes("index.html")) { + if (window.location.href.includes("desktop")) { window.location.href = getMobileWebsite(); } } else { console.log("It seems like you are on a Desktop!!!!"); - if (window.location.href.includes("homepage.html")) { + if (window.location.href.includes("mobile")) { window.location.href = getDestopWebsite(); } } } -if (!window.location.pathname.includes(".html")) { - window.location.pathname += "index.html"; +function Setup_Adjuster() { + if (!window.location.pathname.includes(".html")) { + window.location.pathname += "mobile-homepage.html"; + } + + window.addEventListener("load", checkScreenWidth); + window.addEventListener("resize", checkScreenWidth); } -window.onload = checkScreenWidth; + +Setup_Adjuster(); \ No newline at end of file diff --git a/styles/style.css b/styles/style.css index 07f9585..98d0a90 100644 --- a/styles/style.css +++ b/styles/style.css @@ -54,12 +54,6 @@ select { text-align: center; } -@media (max-width: 800px) { - .responsive-hide { - display: none; - } -} - .stable { color: var(--active-color); } @@ -74,3 +68,16 @@ select { border: 2px solid red; border-radius: 24px; } + +@media (max-width: 450px) { + .up-down { + display: flex; + flex-direction: column; + } +} + +@media (max-width: 800px) { + .responsive-hide { + display: none; + } +} diff --git a/styles/tailwind/input.css b/styles/tailwind/input.css index 4c20f03..5deafbf 100644 --- a/styles/tailwind/input.css +++ b/styles/tailwind/input.css @@ -27,5 +27,9 @@ } .container { - @apply p-4 my-4 border-2 rounded-lg; + @apply p-4 pr-8 my-4 border-2 rounded-lg; +} + +.small-container { + @apply p-2 pr-4 my-2 border-2 rounded-lg; } diff --git a/styles/tailwind/output.css b/styles/tailwind/output.css index dc9c9ad..5ac67c2 100644 --- a/styles/tailwind/output.css +++ b/styles/tailwind/output.css @@ -604,6 +604,10 @@ video { position: relative; } +.m-1 { + margin: 0.25rem; +} + .m-2 { margin: 0.5rem; } @@ -617,6 +621,11 @@ video { margin-bottom: 1rem; } +.my-8 { + margin-top: 2rem; + margin-bottom: 2rem; +} + .block { display: block; } @@ -649,6 +658,10 @@ video { min-height: 4rem; } +.min-h-48 { + min-height: 12rem; +} + .w-5\/12 { width: 41.666667%; } @@ -699,10 +712,18 @@ video { white-space: nowrap; } +.rounded-lg { + border-radius: 0.5rem; +} + .border { border-width: 1px; } +.border-2 { + border-width: 2px; +} + .p-2 { padding: 0.5rem; } @@ -725,6 +746,11 @@ video { text-align: center; } +.text-2xl { + font-size: 1.5rem; + line-height: 2rem; +} + .text-3xl { font-size: 1.875rem; line-height: 2.25rem; @@ -814,6 +840,12 @@ video { filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); } +.transition-colors { + transition-property: color, background-color, border-color, text-decoration-color, fill, stroke; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transition-duration: 150ms; +} + .\[-\:\=\] { -: =; } @@ -870,4 +902,24 @@ video { border-radius: 0.5rem; border-width: 2px; padding: 1rem; + padding-right: 2rem; +} + +.small-container { + margin-top: 0.5rem; + margin-bottom: 0.5rem; + border-radius: 0.5rem; + border-width: 2px; + padding: 0.5rem; + padding-right: 1rem; +} + +.hover\:bg-slate-100:hover { + --tw-bg-opacity: 1; + background-color: rgb(241 245 249 / var(--tw-bg-opacity)); +} + +.hover\:text-slate-900:hover { + --tw-text-opacity: 1; + color: rgb(15 23 42 / var(--tw-text-opacity)); } diff --git a/tailwind.config.js b/tailwind.config.js index 1f1dbfe..22b1044 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -4,6 +4,10 @@ module.exports = { "./**/*.{html,js}", ], theme: { + screen: { + xs: "480px", + ms: "800px", + }, extend: {}, }, plugins: [],