astra
/
doggo
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: jazz up form ui

pull/16/head v0.3.5
Karan Sharma 2021-03-10 13:59:27 +05:30
parent 52f076d91b
commit cda2d04974
4 changed files with 168 additions and 53 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

164
cmd/doggo/api/assets/tailwind.css
View File

@ -517,6 +517,65 @@ video {
height: auto;
}
[type='text'],
[type='time'],
textarea,
select
{
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background-color: #fff;
border-color: #6b7280;
border-width: 1px;
border-radius: 0px;
padding-top: 0.5rem;
padding-right: 0.75rem;
padding-bottom: 0.5rem;
padding-left: 0.75rem;
font-size: 1rem;
line-height: 1.5rem;
}
[type='text']:focus, [type='time']:focus, textarea:focus, select:focus {
outline: 2px solid transparent;
outline-offset: 2px;
--tw-ring-inset: var(--tw-empty,/*!*/ /*!*/);
--tw-ring-offset-width: 0px;
--tw-ring-offset-color: #fff;
--tw-ring-color: #2563eb;
--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
border-color: #2563eb;
}
input::-moz-placeholder, textarea::-moz-placeholder {
color: #6b7280;
opacity: 1;
}
input:-ms-input-placeholder, textarea:-ms-input-placeholder {
color: #6b7280;
opacity: 1;
}
input::placeholder, textarea::placeholder {
color: #6b7280;
opacity: 1;
}
select {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
background-position: right 0.5rem center;
background-repeat: no-repeat;
background-size: 1.5em 1.5em;
padding-right: 2.5rem;
-webkit-print-color-adjust: exact;
color-adjust: exact;
}
.container {
width: 100%;
}
@ -582,9 +641,18 @@ video {
background-color: rgba(224, 231, 255, var(--tw-bg-opacity));
}
.bg-indigo-800 {
.bg-indigo-700 {
--tw-bg-opacity: 1;
background-color: rgba(55, 48, 163, var(--tw-bg-opacity));
background-color: rgba(67, 56, 202, var(--tw-bg-opacity));
}
.hover\:bg-indigo-500:hover {
--tw-bg-opacity: 1;
background-color: rgba(99, 102, 241, var(--tw-bg-opacity));
}
.border-transparent {
border-color: transparent;
}
.border-gray-200 {
@ -592,12 +660,22 @@ video {
border-color: rgba(229, 231, 235, var(--tw-border-opacity));
}
.border-gray-300 {
--tw-border-opacity: 1;
border-color: rgba(209, 213, 219, var(--tw-border-opacity));
}
.focus\:border-indigo-500:focus {
--tw-border-opacity: 1;
border-color: rgba(99, 102, 241, var(--tw-border-opacity));
}
.rounded {
border-radius: 0.25rem;
}
.rounded-xl {
border-radius: 0.75rem;
.rounded-lg {
border-radius: 0.5rem;
}
.rounded-full {
@ -648,6 +726,10 @@ video {
justify-content: center;
}
.flex-none {
flex: none;
}
.flex-grow {
flex-grow: 1;
}
@ -674,6 +756,11 @@ video {
line-height: 1.25rem;
}
.text-lg {
font-size: 1.125rem;
line-height: 1.75rem;
}
.text-xl {
font-size: 1.25rem;
line-height: 1.75rem;
@ -688,6 +775,10 @@ video {
line-height: 1.25rem;
}
.leading-6 {
line-height: 1.5rem;
}
.m-4 {
margin: 1rem;
}
@ -720,14 +811,6 @@ video {
margin-top: 0.5rem;
}
.mb-2 {
margin-bottom: 0.5rem;
}
.mb-3 {
margin-bottom: 0.75rem;
}
.mb-4 {
margin-bottom: 1rem;
}
@ -760,6 +843,11 @@ video {
min-width: 100%;
}
.focus\:outline-none:focus {
outline: 2px solid transparent;
outline-offset: 2px;
}
.overflow-hidden {
overflow: hidden;
}
@ -801,11 +889,6 @@ video {
padding-bottom: 1rem;
}
.px-4 {
padding-left: 1rem;
padding-right: 1rem;
}
.px-6 {
padding-left: 1.5rem;
padding-right: 1.5rem;
@ -816,19 +899,10 @@ video {
padding-right: 2rem;
}
.px-10 {
padding-left: 2.5rem;
padding-right: 2.5rem;
}
.pt-6 {
padding-top: 1.5rem;
}
.pr-8 {
padding-right: 2rem;
}
.pb-8 {
padding-bottom: 2rem;
}
@ -856,6 +930,30 @@ video {
--tw-ring-shadow: 0 0 #0000;
}
.focus\:ring-2:focus {
--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.focus\:ring-offset-white:focus {
--tw-ring-offset-color: #fff;
}
.focus\:ring-offset-2:focus {
--tw-ring-offset-width: 2px;
}
.focus\:ring-indigo-500:focus {
--tw-ring-opacity: 1;
--tw-ring-color: rgba(99, 102, 241, var(--tw-ring-opacity));
}
.focus\:ring-indigo-900:focus {
--tw-ring-opacity: 1;
--tw-ring-color: rgba(49, 46, 129, var(--tw-ring-opacity));
}
.text-left {
text-align: left;
}
@ -902,10 +1000,6 @@ video {
text-transform: uppercase;
}
.tracking-wide {
letter-spacing: 0.025em;
}
.tracking-wider {
letter-spacing: 0.05em;
}
@ -922,6 +1016,12 @@ video {
width: 100%;
}
.transition-colors {
transition-property: background-color, border-color, color, fill, stroke;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
}
@-webkit-keyframes spin {
to {
transform: rotate(360deg);
@ -1006,6 +1106,10 @@ video {
padding-left: 1.5rem;
padding-right: 1.5rem;
}
.sm\:w-auto {
width: auto;
}
}
@media (min-width: 768px) {

40
cmd/doggo/api/index.html
View File

@ -10,7 +10,6 @@
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap" rel="stylesheet">
<style>
body {
font-family: 'Poppins', sans-serif;
@ -35,23 +34,21 @@
<div class="bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4 flex flex-col my-2">
<div class="-mx-3 md:flex mb-6">
<div class="md:w-1/2 px-3 mb-6 md:mb-0">
<label class="block tracking-wide text-grey-darker text-xs font-bold mb-2">
<label>
Domain Name
</label>
<input name="q"
class="block w-full bg-grey-lighter text-grey-darker border border-red rounded py-3 px-4 mb-3"
type="text" placeholder="domain.tld" autofocus>
<input required autofocus name="q" type="text" placeholder="domain.tld"
class="w-full border-gray-300 rounded-lg shadown-sm focus:border-indigo-500 focus:ring-indigo-500">
<p id="empty-name-sec" class="hidden text-red-500 text-xs">Please enter a domain name to
query.
</p>
</div>
<div class="md:w-1/2 px-3">
<label class="block tracking-wide text-grey-darker text-xs font-bold mb-2" for="grid-state">
<label>
Query Type
</label>
<select
class="block w-full bg-white border border-grey-lighter text-grey-darker py-3 px-4 pr-8 rounded"
name="type">
<select name="type"
class="w-full border-gray-300 rounded-lg shadown-sm focus:border-indigo-500 focus:ring-indigo-500">
<option default>A</option>
<option>AAAA</option>
<option>CAA</option>
@ -68,12 +65,11 @@
</div>
<div class="-mx-3 md:flex">
<div class="md:w-1/2 px-3 mb-6 md:mb-0">
<label class="block tracking-wide text-grey-darker text-xs font-bold mb-2">
<label>
Nameserver
</label>
<select name="ns"
class="block w-full bg-white border border-grey-lighter text-grey-darker py-3 px-4 pr-8 rounded"
onchange="handleNSChange()">>
<select name="ns" onchange="handleNSChange()"
class="w-full border-gray-300 rounded-lg shadown-sm focus:border-indigo-500 focus:ring-indigo-500">
<option default value="cloudflare">Cloudflare</option>
<option value="cloudflare-doh">Cloudflare (DOH)</option>
<option value="google">Google</option>
@ -82,26 +78,30 @@
</select>
</div>
<div class="md:w-1/2 px-3">
<label class="block tracking-wide text-grey-darker text-xs font-bold mb-2" for="grid-zip">
<label for="grid-zip">
Address
</label>
<div id="custom_ns" class="hidden">
<input name="custom_ns" class="block w-full bg-white text-grey-darker border
border-grey-lighter rounded py-3 px-4" type="text" placeholder="Enter Nameserver address">
<input name="custom_ns" type="text" placeholder="Enter Nameserver address"
class="w-full border-gray-300 rounded-lg shadown-sm focus:border-indigo-500 focus:ring-indigo-500">
<p class="mt-2 text-grey-darker text-xs">To use different protocols like DOH, DOT etc. refer
to the
instructions <a class="font-semibold"
href="https://github.com/mr-karan/doggo#transport-options">here</a>.</p>
</div>
<div id="ns">
<input readonly name="ns"
class="block w-full bg-gray-50 text-grey-darker border border-grey-lighter rounded py-3 px-4"
type="text">
<input readonly name="ns" type="text"
class="bg-gray-50 w-full border-gray-300 rounded-lg shadown-sm focus:border-indigo-500 focus:ring-indigo-500">
</div>
</div>
</div>
<div class="mt-8 text-right">
<button class="py-2 px-10 text-white rounded-xl bg-indigo-800">Submit</button>
<button class="w-full sm:w-auto flex-none bg-indigo-900 hover:bg-indigo-700
text-white text-lg leading-6 font-semibold py-3 px-6 border border-transparent rounded
focus:ring-2 focus:ring-offset-2 focus:ring-offset-white focus:ring-indigo-900 focus:outline-none
transition-colors duration-400">
Submit
</button>
</div>
</div>
</form>

15
cmd/doggo/api/package-lock.json generated
View File

@ -10,6 +10,14 @@
"purgecss": "^3.1.3"
}
},
"@tailwindcss/forms": {
"version": "0.2.1",
"resolved": "https://registry.npmjs.org/@tailwindcss/forms/-/forms-0.2.1.tgz",
"integrity": "sha512-czfvEdY+J2Ogfd6RUSr/ZSUmDxTujr34M++YLnp2cCPC3oJ4kFvFMaRXA6cEXKw7F1hJuapdjXRjsXIEXGgORg==",
"requires": {
"mini-svg-data-uri": "^1.2.3"
}
},
"acorn": {
"version": "7.4.1",
"resolved": "https://registry.npmjs.org/acorn/-/acorn-7.4.1.tgz",
@ -47,7 +55,6 @@
"version": "10.2.4",
"resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.2.4.tgz",
"integrity": "sha512-DCCdUQiMD+P/as8m3XkeTUkUKuuRqLGcwD0nll7wevhqoJfMRpJlkFd1+MQh1pvupjiQuip42lc/VFvfUTMSKw==",
"dev": true,
"requires": {
"browserslist": "^4.16.1",
"caniuse-lite": "^1.0.30001181",
@ -326,6 +333,11 @@
"resolved": "https://registry.npmjs.org/lodash.toarray/-/lodash.toarray-4.4.0.tgz",
"integrity": "sha1-JMS/zWsvuji/0FlNsRedjptlZWE="
},
"mini-svg-data-uri": {
"version": "1.2.3",
"resolved": "https://registry.npmjs.org/mini-svg-data-uri/-/mini-svg-data-uri-1.2.3.tgz",
"integrity": "sha512-zd6KCAyXgmq6FV1mR10oKXYtvmA9vRoB6xPSTUJTbFApCtkefDnYueVR1gkof3KcdLZo1Y8mjF2DFmQMIxsHNQ=="
},
"minimatch": {
"version": "3.0.4",
"resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.4.tgz",
@ -576,7 +588,6 @@
"version": "2.0.3",
"resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-2.0.3.tgz",
"integrity": "sha512-s8NEqdLBiVbbdL0a5XwTb8jKmIonOuI4RMENEcKLR61jw6SdKvBss7NWZzwCaD+ZIjlgmesv8tmrjXEp7C0eAQ==",
"dev": true,
"requires": {
"@fullhuman/postcss-purgecss": "^3.1.3",
"bytes": "^3.0.0",

2
cmd/doggo/api/tailwind.config.js
View File

@ -10,5 +10,5 @@ module.exports = {
variants: {
extend: {},
},
plugins: [],
plugins: [require('@tailwindcss/forms')],
}