diff --git a/.editorconfig b/.editorconfig new file mode 100644 index 0000000..d57dffd --- /dev/null +++ b/.editorconfig @@ -0,0 +1,14 @@ +root = true + +[*] +end_of_line = lf +insert_final_newline = true +trim_trailing_whitespace = true + +[*.css] +indent_style = space +indent_size = 2 + +[*.js] +indent_style = space +indent_size = 2 diff --git a/css/index.css b/css/index.css new file mode 100644 index 0000000..eadd4e9 --- /dev/null +++ b/css/index.css @@ -0,0 +1,68 @@ +#main { + display: flex; + flex-flow: column; + + width: 100%; + + text-align: center; +} + +@media screen and (min-width: 360px) { + #main { + margin: auto; + width: 360px; + } +} + +#about img { + width: 100%; + height: auto; +} + +#search { + display: flex; + flex-direction: column; + align-items: center; +} + +#search > * { + margin: 0.25rem; +} + +.search-inputs { + width: 100%; + height: 2rem; + + display: flex; +} + +.search-inputs > * { + height: 100%; +} + +.search-inputs input[name="query"] { + width: 100%; + box-sizing: border-box; +} + +.search-radio-buttons { + display: flex; + flex-wrap: wrap; +} + +.search-radio-buttons > .category { + display: flex; +} + +.search-radio-buttons > .category:not(:last-child) { + margin-right: 1rem; +} + +.search-radio-buttons > .category > input[type="radio"] { + margin: 0; + margin-right: 0.25rem; +} + +#status { + font-size: smaller; +} diff --git a/css/theme.css b/css/theme.css new file mode 100644 index 0000000..a3ef962 --- /dev/null +++ b/css/theme.css @@ -0,0 +1,43 @@ +:root { + --primary-color: #bc5151; +} + +body { + background: url('https://www.tromsite.com/wp-content/uploads/2018/09/tromsite-bg-pattern-light-5.png'); + background-repeat: repeat; + background-attachment: fixed; + + font-family: sans-serif; +} + +a { + color: var(--primary-color); + text-decoration: none; +} + +a:hover { + text-decoration: underline; +} + +.search-inputs input[name="query"] { + border: 1px solid darkgrey; + border-radius: 0.5rem 0 0 0.5rem; +} + +.search-inputs input[type="submit"] { + background-color: var(--primary-color); + + color: white; + cursor: pointer; + + border: none; + border-radius: 0 0.5rem 0.5rem 0; +} + +.search-radio-buttons input[type="radio"] { + accent-color: var(--primary-color); +} + +#status { + color: gray; +} diff --git a/img/about.png b/img/about.png new file mode 100644 index 0000000..29e5278 Binary files /dev/null and b/img/about.png differ diff --git a/img/favicon.png b/img/favicon.png new file mode 100644 index 0000000..0a8d332 Binary files /dev/null and b/img/favicon.png differ diff --git a/index.html b/index.html index efaf8f0..1c22b1f 100644 --- a/index.html +++ b/index.html @@ -1,110 +1,54 @@ <!DOCTYPE html> <html lang="en"> <head> - <title></title> + <title>TROM Search</title> <meta charset="UTF-8"> <meta name="referrer" content="no-referrer"> <meta name="viewport" content="width=device-width, initial-scale=1"> + <meta name="theme-color" content="#bc5151"> + <link rel="shortcut icon" href="img/favicon.png"> <link rel="search" title="TROM Search" type="application/opensearchdescription+xml" href="opensearchdescription.xml"> - <style> - * { margin: 0; } - html, body { width: 100%; height: 100%; } -body { - background: url('https://www.tromsite.com/wp-content/uploads/2018/09/tromsite-bg-pattern-light-5.png') !important; background-repeat: repeat !important; background-attachment: fixed !important; - height: auto !important;} - - -#search:before { - content: url("https://www.tromsite.com/wp-content/uploads/2021/02/trom-logo-dark.png"); - transform: scale(.6); - display: block; - width: 100%; -margin: 0 auto;} - - #search-box { - position: fixed; - left: 50%; - top: 1rem; - transform: translateX(-50%); - } - - #info { - color: black; - text-align: center; - font-weight: bold; - } - - #info.error { color: #7b7b7b; margin-top: 20px;font-size: 13px;font-style: italic;} - - #search input[name="query"] { - width: 500px; - height: 40px; - background-color: white; - border: 2px solid darkgrey; - border-radius: 4px; - box-sizing: border-box; - } - - #search { - display: flex; - flex-direction: column; - align-items: center; - } - - #search-inputs { - display: flex; - align-items: center; - margin-bottom: 10px; - } - - #search input[type="submit"] { - height: 40px; - background-color: #bc5151; - color: white; - font-weight: bold; - border: none; - border-radius: 4px; - margin-left: 10px; - cursor: pointer; - padding: 0 10px; - box-sizing: border-box; - width: 20%; - } - - .search-radio-buttons { - display: flex; - justify-content: center; - width: 100%; - } - - #search label { - margin-left: 5px; - margin-right: 15px; - } - </style> - <script type="module" src="index.js"></script> + <link rel="stylesheet" type="text/css" href="css/index.css"> + <link rel="stylesheet" type="text/css" href="css/theme.css"> + <script type="module" src="js/index.js"></script> </head> <body> - <div id="search-box"> - <form id="search"> - <div id="search-inputs"> - <input name="query" type="text" placeholder="Query"> - <input type="submit" value="Search"> - </div> - <div class="search-radio-buttons"> - <input type="radio" id="search-category-all" name="category" value="all" checked> - <label for="search-category-all">All</label> - <input type="radio" id="search-category-images" name="category" value="images"> - <label for="search-category-images">Images</label> - <input type="radio" id="search-category-news" name="category" value="news"> - <label for="search-category-news">News</label> - <input type="radio" id="search-category-videos" name="category" value="videos"> - <label for="search-category-videos">Videos</label> - <input type="radio" id="search-category-files" name="category" value="files"> - <label for="search-category-videos">Files</label> - </div> - </form> - <p id="info"></p> + <div id="main"> + <div id="about"> + <img src="img/about.png"> + <p class="description">This is a <a href="https://www.trade-free.org">trade-free</a> tool, part of the <a href="https://trom.tf">trom.tf</a> suite of trade-free services.</p> + </div> + <main> + <form id="search"> + <div class="search-inputs"> + <input name="query" type="text" placeholder="Query"> + <input type="submit" value="Search"> + </div> + <div class="search-radio-buttons"> + <div class="category"> + <input type="radio" id="search-category-all" name="category" value="all" checked> + <label for="search-category-all">All</label> + </div> + <div class="category"> + <input type="radio" id="search-category-images" name="category" value="images"> + <label for="search-category-images">Images</label> + </div> + <div class="category"> + <input type="radio" id="search-category-news" name="category" value="news"> + <label for="search-category-news">News</label> + </div> + <div class="category"> + <input type="radio" id="search-category-videos" name="category" value="videos"> + <label for="search-category-videos">Videos</label> + </div> + <div class="category"> + <input type="radio" id="search-category-files" name="category" value="files"> + <label for="search-category-files">Files</label> + </div> + </div> + </form> + </main> + <p id="status"></p> </div> </body> </html> diff --git a/index.js b/js/index.js similarity index 92% rename from index.js rename to js/index.js index 156216c..828a0f7 100644 --- a/index.js +++ b/js/index.js @@ -2,12 +2,12 @@ const storageType = 'localStorage' let data = {} -const infoEl = document.getElementById('info') +const statusEl = document.getElementById('status') const formEl = document.getElementById('search') const errors = { missingQuery: new TypeError('Query is missing.'), - noFoundInstances: new TypeError('No instances were found.'), + noFoundInstances: new Error('No instances were found.'), } function buildSearchURL (opts = {}) { @@ -102,7 +102,7 @@ if (location.search.length > 0) { } } -infoEl.textContent = `${data.instances.length} instances` -if (data.instances.length > 0) { - infoEl.classList.add('error') +statusEl.textContent = `${data.instances.length} instances` +if (data.instances.length === 0) { + statusEl.classList.add('error') } diff --git a/opensearchdescription.xml b/opensearchdescription.xml index 23de862..a8082a5 100644 --- a/opensearchdescription.xml +++ b/opensearchdescription.xml @@ -2,6 +2,6 @@ <ShortName>TROM</ShortName> <Description>TROM Search</Description> <InputEncoding>UTF-8</InputEncoding> - <Url type="application/opensearchdescription+xml" rel="self" template="https://testsearch.trom.tf/opensearchdescription.xml"></Url> - <Url type="text/html" template="https://testsearch.trom.tf/?q={searchTerms}"></Url> -</OpenSearchDescription> \ No newline at end of file + <Url type="application/opensearchdescription+xml" rel="self" template="https://search.trom.tf/opensearchdescription.xml"></Url> + <Url type="text/html" template="https://search.trom.tf/?q={searchTerms}"></Url> +</OpenSearchDescription>