- added my ide

Supraboy981322 · Feb 28, 2024 · 4e52c31 · 4e52c31
1 parent 60c3dbf
commit 4e52c31
Show file tree

Hide file tree

Showing 3 changed files with 141 additions and 0 deletions.
diff --git a/dev/devBreak/index.html b/dev/devBreak/index.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="en">
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<link rel="stylesheet" href="style.css">
+<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
+<body>
+	<div class="main">
+		<div class="box" id="dev">
+			<input class="url urlDevEnvironment" id="devEnvironmentURL" type="text">
+			<button class="bar" onclick="setFrame('devEnvironment');">Go</button>
+			<br>
+			<iframe class="frame" id="devEnvironmentFrame" src=""></iframe>
+		</div>
+		<div class="box" id="preview">
+			<input class="url urlPreview" id="previewURL" type="text">	
+			<button class="bar" onclick="setFrame('preview');">Go</button>
+			<button class="bar" id="reload" onclick="refreshPreview()">&#x27F3;</button>
+			<br>
+			<iframe class="frame" id="previewFrame"></iframe>
+		</div>
+	</div>
+</body>
+<script src="script.js"></script>
+</html>
diff --git a/dev/devBreak/script.js b/dev/devBreak/script.js
@@ -0,0 +1,12 @@
+function setFrame(which) {
+    let url = document.getElementById(((which == "devEnvironment") ? "devEnvironmentURL" : "previewURL")).value;
+      let frame = document.getElementById(((which == "devEnvironment") ? "devEnvironmentFrame" : "previewFrame"));
+    frame.setAttribute("src", url);
+console.log("preview loaded");
+};
+
+function refreshPreview() {
+let preview = document.getElementById("previewFrame");
+preview.src += '';
+console.log("preview refreshed");
+}
diff --git a/dev/devBreak/style.css b/dev/devBreak/style.css
@@ -0,0 +1,104 @@
+body {
+	margin: 0px;
+	padding: 0px;
+	background-image: url('/embeded-content/background.png');
+	background-repeat: no-repeat;
+	background-attachment: fixed;
+	background-size: cover;
+	background-position: right;
+}
+
+.main {
+	top: 0px;
+	margin: 0px;
+	padding: 0px;
+}
+
+.box {  
+	background: rgba(192, 243, 252, 0.1);
+	backdrop-filter: blur(3px);
+	border-radius: 25px;
+}
+
+.url {
+	padding-left: 10px;
+	margin: 20px 10px 10px 20px;
+	border-radius: 10px;
+	border: 5px;
+}
+
+.urlDevEnvironment {
+	width: calc(100% - 96px);
+}
+
+.urlPreview {
+	width: calc(100% - 136px);
+}
+
+.frame {
+	width: calc(100% - 20px);
+	margin: 0px 10px 0px 10px;
+	border-radius: 16px;
+	border: 0px;
+}
+
+.bar {
+	height: 27px;
+}
+
+#reload {
+	margin: 0px 0px 0px 10px;
+	padding: 0px 4px 0px 6px;
+	font-size: 15px;
+	font-weight: bold;
+}
+
+@media (orientation: landscape) {
+
+	.main {
+		display: flex;
+	}
+
+        #dev {
+       		margin: 10px 5px 10px 10px;
+       		flex: 1;
+       	}
+
+       	#preview {
+               	margin: 10px 10px 10px 5px;
+               	flex: 2;
+       	}
+
+        .box {
+               	height: calc(100vh - 20px);
+               	width: calc(50vw - 20px);
+       	}
+
+	.frame {
+		height: calc(100vh - 80px);
+	}
+
+}
+
+@media (orientation: portrait) {
+    .main {
+		display: block;
+	}
+
+	#dev {
+		margin: 10px 10px 5px 10px;
+	}
+
+	#preview {
+		margin: 5px 10px 10px 10px;
+	}
+
+	.box {
+		height: calc(50vh - 20px);
+		width: calc(100vw - 20px);
+    }
+	.frame {
+		height: calc(50vw - 50px);
+	}
+
+}