Last active
September 14, 2024 00:14
-
-
Save hidao80/0eced516ed68113f8820fdd70587fe40 to your computer and use it in GitHub Desktop.
This is a page that allows you to easily perform searches.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <!-- | |
| Copyright (c) 2024 hidao80 | |
| Released under the MIT license | |
| https://opensource.org/licenses/mit-license.php | |
| --> | |
| <!-- | |
| Twitter Emoji (Twemoji) | |
| License | |
| Copyright 2019 Twitter, Inc and other contributors | |
| Graphics licensed under CC-BY 4.0: https://creativecommons.org/licenses/by/4.0/ | |
| https://github.com/twitter/twemoji/blob/master/LICENSE-GRAPHICS | |
| --> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <meta http-equiv="X-UA-Compatible" content="IE=edge"> | |
| <meta name="description" content="This is a page that allows you to easily perform searches."> | |
| <meta property="og:image" content="https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/72x72/1f50d.png"> | |
| <meta property="og:description" content="This is a page that allows you to easily perform searches."> | |
| <meta property="og:url" content="https://deldoodle.netlify.app/"> | |
| <meta property="og:title" content="Deldoodle"> | |
| <link rel="icon" href="https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/72x72/1f50d.png" type="image/png"> | |
| <title>Deldoodle</title> | |
| <style> | |
| :root { | |
| color-scheme: light dark; | |
| --light-color: #eee; | |
| --dark-color: #333; | |
| --light-bg: #eee; | |
| --dark-bg: #1a1a1a; | |
| --light-placeholder: #aaa; | |
| --dark-placeholder: #bbb; | |
| --light-border: #bbb; | |
| --dark-border: #aaa; | |
| } | |
| body { | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| height: 100vh; | |
| margin: 0; | |
| color: light-dark(var(--light-color) var(--dark-color)); | |
| background-color: light-dark(var(--light-bg) var(--dark-bg)); | |
| } | |
| input[type="search"] { | |
| padding: 10px; | |
| font-size: 16px; | |
| width: 300px; | |
| border-radius: 4px; | |
| } | |
| @media (prefers-color-scheme: light) { | |
| input[type="search"] { | |
| border: 1px solid var(--light-border); | |
| &::placeholder { | |
| color: var(--light-placeholder); | |
| } | |
| } | |
| } | |
| @media (prefers-color-scheme: dark) { | |
| input[type="search"] { | |
| border: 1px solid var(--dark-border); | |
| &::placeholder { | |
| color: var(--dark-placeholder); | |
| } | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <form action="https://www.google.com/search" method="get"> | |
| <input type="search" name="q" placeholder="Search keywords..." autofocus> | |
| </form> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment