Skip to content

Commit

Permalink
feat: jazz up form ui
Browse files Browse the repository at this point in the history
  • Loading branch information
@mr-karan
mr-karan committed Mar 10, 2021
1 parent 52f076d commit cda2d04
Show file tree
Hide file tree
Showing 4 changed files with 168 additions and 53 deletions.
164 changes: 134 additions & 30 deletions cmd/doggo/api/assets/tailwind.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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%;
}
Expand Down Expand Up @@ -582,22 +641,41 @@ video {
background-color: rgba(224, 231, 255, var(--tw-bg-opacity));
}

.bg-indigo-800 {
.bg-indigo-700 {
--tw-bg-opacity: 1;
background-color: rgba(67, 56, 202, var(--tw-bg-opacity));
}

.hover\:bg-indigo-500:hover {
--tw-bg-opacity: 1;
background-color: rgba(55, 48, 163, var(--tw-bg-opacity));
background-color: rgba(99, 102, 241, var(--tw-bg-opacity));
}

.border-transparent {
border-color: transparent;
}

.border-gray-200 {
--tw-border-opacity: 1;
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 {
Expand Down Expand Up @@ -648,6 +726,10 @@ video {
justify-content: center;
}

.flex-none {
flex: none;
}

.flex-grow {
flex-grow: 1;
}
Expand All @@ -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;
Expand All @@ -688,6 +775,10 @@ video {
line-height: 1.25rem;
}

.leading-6 {
line-height: 1.5rem;
}

.m-4 {
margin: 1rem;
}
Expand Down Expand Up @@ -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;
}
Expand Down Expand Up @@ -760,6 +843,11 @@ video {
min-width: 100%;
}

.focus\:outline-none:focus {
outline: 2px solid transparent;
outline-offset: 2px;
}

.overflow-hidden {
overflow: hidden;
}
Expand Down Expand Up @@ -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;
Expand All @@ -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;
}
Expand Down Expand Up @@ -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;
}
Expand Down Expand Up @@ -902,10 +1000,6 @@ video {
text-transform: uppercase;
}

.tracking-wide {
letter-spacing: 0.025em;
}

.tracking-wider {
letter-spacing: 0.05em;
}
Expand All @@ -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);
Expand Down Expand Up @@ -1006,6 +1106,10 @@ video {
padding-left: 1.5rem;
padding-right: 1.5rem;
}

.sm\:w-auto {
width: auto;
}
}

@media (min-width: 768px) {
Expand Down
40 changes: 20 additions & 20 deletions cmd/doggo/api/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -35,23 +34,21 @@ <h1 class="text-5xl font-black text-center"><span class="text-indigo-700">Doggo<
<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>
Expand All @@ -68,12 +65,11 @@ <h1 class="text-5xl font-black text-center"><span class="text-indigo-700">Doggo<
</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>
Expand All @@ -82,26 +78,30 @@ <h1 class="text-5xl font-black text-center"><span class="text-indigo-700">Doggo<
</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>
Expand Down

0 comments on commit cda2d04

Please sign in to comment.