add query html file

2025-01-15 21:07:09 +01:00 · 2025-01-15 21:07:09 +01:00 · 661b1dc78f
commit 661b1dc78f
parent 68ca4e8ec4
1 changed files with 105 additions and 0 deletions
--- a/query.html
+++ b/query.html
@ -0,0 +1,105 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <title>Is it prime?</title>
+
+        <link rel="stylesheet" href="common.css">
+
+        <style>
+            * {
+                background-color: #9b9b9b;
+            }
+
+            .queryInput {
+                border: 0;
+/*                border-bottom: 2px solid #333;*/
+                outline: 0;
+                font-size: 9rem;
+                background: transparent;
+/*                transition: border-color 0.2s;*/
+                color: #333;
+                width: 100%;
+
+/*                &::placeholder {
+                    color: transparent;
+                }
+*/
+/*                &:placeholder-shown ~ .queryLabel {
+//                    font-size: 9rem;
+//                    cursor: text;
+//                    top: 20px;
+*/                }
+            }
+
+/*            .queryLabel {
+//                top: 0;
+//                display: block;
+//                transition: 0.2s;
+//                font-size: 4.5rem;
+//                color: #333;
+*/            }
+
+            .queryInput:focus {
+                color: #333;
+
+/*                ~ .queryLabel {
+//                    top: 0;
+//                    display: block;
+//                    transition: 0.2s;
+//                    font-size: 4.5rem;
+//                    color: #ffffff;
+//                    font-weight:700;    
+                }
+*/                
+            }
+
+            /* reset input */
+            .queryInput{
+                &:required,&:invalid {
+                    box-shadow:none;
+                    color: #333;
+                }
+            }
+
+            #inputButton {
+                font-size: 9rem;
+                color: #333;
+                &:hover {
+                    color: #FFFFFF;
+                    cursor: pointer;
+                }
+            }
+
+            #inputBox {
+                border-bottom: 2px solid #333;
+                display: flex;
+                width: 69%;
+                margin-left: auto;
+                margin-right: auto;
+            }
+        </style>
+        <script>
+            function inputButtonClick() {
+                let inputField = document.getElementById("name");
+                let contents = inputField.value;
+                if (contents == "" || contents == null) {
+                    return;
+                }
+
+                document.location.href = window.location.protocol + "//" + "is." + contents + "." + window.location.hostname;
+            }
+        </script>
+
+    </head>
+    
+    <body id="wrapper">
+        <div id="content">
+            <h1 id="questionText">Is it prime?</h1>
+            <div id="inputBox">
+                <input type="input" class="queryInput" placeholder="Number" name="name" id='name' required />
+                <input type="button" value="→" id="inputButton" onclick="inputButtonClick();" />
+            </div>
+            
+        </div>
+    </body>
+</html>