Add files via upload

RishiWebDeveloper1 · May 6, 2024 · 0b460fa · 0b460fa
1 parent 2211461
commit 0b460fa
Show file tree

Hide file tree

Showing 30 changed files with 3,776 additions and 0 deletions.
diff --git a/README.md b/README.md
@@ -0,0 +1 @@
+# windows-11_interface
diff --git a/components/application.css b/components/application.css
@@ -0,0 +1,151 @@
+.application-box {
+    width: 100%;
+    height: calc(100vh - 60px);
+    display: flex;
+    flex-wrap: wrap;
+}
+
+.application {
+    width: 50%;
+    height: 50%;
+    box-shadow: 0 0 0 0.5px white;
+}
+
+.title-bar {
+    width: 100%;
+    height: 40px;
+    display: flex;
+    justify-content: space-between;
+    color: white;
+    background-color: black;
+}
+
+.app-name {
+    width: 100px;
+    height: 100%;
+    text-align: center;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.operation-box {
+    width: 120px;
+    height: 100%;
+    display: flex;
+    justify-content: flex-end;
+}
+
+.test {
+    width: calc(100% - 219px);
+    height: 40px;
+    min-width: 40px;
+    min-height: 40px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.minimize-box {
+    width: 40px;
+    height: 40px;
+    min-width: 40px;
+    min-height: 40px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.minimize-box:hover {
+    background-color: rgb(97, 94, 94);
+}
+
+.minimize-icon {
+    width: 22px;
+}
+
+.maximize-box {
+    width: 40px;
+    height: 40px;
+    min-width: 40px;
+    min-height: 40px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.maximize-box:hover {
+    background-color: rgb(97, 94, 94);
+}
+
+.maximize-icon {
+    width: 15px;
+}
+
+.close-box {
+    width: 40px;
+    height: 40px;
+    min-width: 40px;
+    min-height: 40px;
+    background-color: rgb(167, 5, 5);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.close-box:hover {
+    background-color: red;
+}
+
+.close-icon {
+    width: 15px;
+}
+
+.app-page {
+    width: 100%;
+    height: calc(100% - 40px);
+}
+
+.iframe {
+    width: 100%;
+    height: 100%;
+    background-color: white;
+}
+
+/* ********************** alert window ****************** */
+
+.alert-window-box {
+    width: 300px;
+    height: 100px;
+    padding-top: 20px;
+    background-color: rgb(230, 211, 188);
+    border: 2px solid black;
+    box-shadow: 0 0 0 1px white;
+    border-radius: 9px;
+    position: fixed;
+    top: 40%;
+    right: 45%;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+}
+
+.alert-message {
+    color: black;
+}
+
+.alert-button {
+    width: 40%;
+    height: 20px;
+    padding: 20px;
+    margin: 20px;
+    color: white;
+    background-color: rgb(236, 79, 79);
+    border: 2px solid black;
+    box-shadow: 0 0 0 1px white;
+    border-radius: 9px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
diff --git a/components/application.js b/components/application.js
@@ -0,0 +1,180 @@
+let noOfApplicatons = 0;
+console.log(window.matchMedia)
+
+function applicationLayoutManager() {
+    let application = document.getElementsByClassName('application');
+
+    if (noOfApplicatons <= 2) {
+        for (let element of application) {
+            element.style.height = '100%';
+        }
+    }
+    else if (noOfApplicatons <= 4) {
+        for (let element of application) {
+            element.style.height = '50%';
+        }
+    }
+    else if (noOfApplicatons > 4) {
+        for (let element of application) {
+            element.style.width = '33%';
+        }
+    }
+}
+
+function nothingToDo() {
+    console.log('nothing for do');
+}
+
+function createApplication(text, url) {
+    if (noOfApplicatons >= 6) {
+        createAlertWindow();
+    }
+    else {
+        let randomId = (Math.random() + 1).toString(36).substring(7);
+
+        let applicatonBox = document.getElementById('applicationBox');
+        let applicaton = document.createElement('div');
+        applicaton.id = randomId;
+        let titleBar = document.createElement('div');
+        let appName = document.createElement('div');
+        appName.onclick = function () {
+            maximizeWindow(randomId);
+        }
+        let test = document.createElement('div');
+        test.onclick = function () {
+            maximizeWindow(randomId);
+        }
+        let operationBox = document.createElement('div');
+        let minimizeBox = document.createElement('div');
+        minimizeBox.onclick = function () {
+            minimizeWindow(randomId);
+        }
+        let minimizeIcon = document.createElement('img');
+        let maximizeBox = document.createElement('div')
+        maximizeBox.onclick = function () {
+            maximizeWindow(randomId);
+        }
+        let maximizeIcon = document.createElement('img')
+        let closeBox = document.createElement('div')
+        closeBox.onclick = function () {
+            deleteWindow(randomId);
+        }
+        let closeIcon = document.createElement('img')
+        let appPage = document.createElement('div')
+        let ifarme = document.createElement('iframe')
+
+        applicaton.classList.add('application');
+        titleBar.classList.add('title-bar');
+        appName.classList.add('app-name');
+        operationBox.classList.add('operation-box');
+        test.classList.add('test');
+        minimizeBox.classList.add('minimize-box');
+        minimizeIcon.classList.add('minimize-icon');
+        maximizeBox.classList.add('maximize-box');
+        maximizeIcon.classList.add('maximize-icon');
+        closeBox.classList.add('close-box');
+        closeIcon.classList.add('close-icon');
+        appPage.classList.add('app-page');
+        ifarme.classList.add('iframe');
+
+        minimizeIcon.src = 'images/minimize_icon.png';
+        maximizeIcon.src = 'images/maximize_icon.png';
+        closeIcon.src = 'https://static-00.iconduck.com/assets.00/cross-icon-2048x2048-vz9m0pj3.png';
+
+        noOfApplicatons = noOfApplicatons + 1;
+
+        minimizeBox.appendChild(minimizeIcon);
+        maximizeBox.appendChild(maximizeIcon);
+        closeBox.appendChild(closeIcon);
+        operationBox.appendChild(minimizeBox);
+        operationBox.appendChild(maximizeBox);
+        operationBox.appendChild(closeBox);
+        titleBar.appendChild(appName);
+        titleBar.appendChild(test);
+        titleBar.appendChild(operationBox);
+        appPage.appendChild(ifarme);
+        applicaton.appendChild(titleBar);
+        applicaton.appendChild(appPage);
+        applicatonBox.appendChild(applicaton);
+
+        appName.textContent = text;
+        ifarme.src = url;
+        ifarme.style.border = '0';
+
+        applicationLayoutManager();
+    }
+}
+
+function createAlertWindow() {
+    let alertWindowBox = document.createElement('div');
+    let alertmessage = document.createElement('div');
+    let alertbutton = document.createElement('div');
+    alertbutton.addEventListener('click', deleteAlertWindow);
+
+    alertWindowBox.id = "alertWindowBox";
+    alertWindowBox.classList.add('alert-window-box');
+    alertmessage.classList.add('alert-messag');
+    alertbutton.classList.add('alert-button');
+
+    alertmessage.textContent = "Can't open more then 6 application";
+    alertbutton.textContent = "OK";
+
+    alertWindowBox.appendChild(alertmessage);
+    alertWindowBox.appendChild(alertbutton);
+
+    let applicatonBox = document.getElementById('applicationBox');
+    applicatonBox.appendChild(alertWindowBox);
+}
+
+function deleteAlertWindow() {
+    var windowFrame = document.getElementById("alertWindowBox");
+    console.log(windowFrame);
+    windowFrame.remove();
+}
+
+let fullScreenCheck = false;
+function minimizeWindow(idName) {
+    if (fullScreenCheck == true) {
+        if (document.exitFullscreen) {
+            document.exitFullscreen();
+        } else if (document.webkitExitFullscreen) { /* Safari */
+            document.webkitExitFullscreen();
+        } else if (document.msExitFullscreen) { /* IE11 */
+            document.msExitFullscreen();
+        }
+        fullScreenCheck = false;
+    }
+
+    let fullScreen = document.getElementById('fullScreen');
+    if (fullScreen.requestFullscreen) {
+        fullScreen.requestFullscreen();
+    }
+    else if (fullScreen.webkitRequestFullscreen) { /* Safari */
+        fullScreen.webkitRequestFullscreen();
+    }
+    else if (fullScreen.msRequestFullscreen) { /* IE11 */
+        fullScreen.msRequestFullscreen();
+    }
+}
+
+function maximizeWindow(idName) {
+    let appFullScreen = document.getElementById(idName)
+
+    if (appFullScreen.requestFullscreen) {
+        appFullScreen.requestFullscreen();
+    }
+    else if (appFullScreen.webkitRequestFullscreen) { /* Safari */
+        appFullScreen.webkitRequestFullscreen();
+    }
+    else if (appFullScreen.msRequestFullscreen) { /* IE11 */
+        appFullScreen.msRequestFullscreen();
+    }
+    fullScreenCheck = true;
+}
+
+function deleteWindow(idName) {
+    var windowFrame = document.getElementById(idName);
+    windowFrame.remove();
+
+    noOfApplicatons = noOfApplicatons - 1;
+}