efim
/
Learning-HTMX
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: adding icons 

courtesy https://www.svgrepo.com/
This commit is contained in:
efim 2023-09-24 13:58:54 +00:00
parent ae2b3d1327
commit ff296f84eb
6 changed files with 137 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
16-countries-page-from-api/src/main/resources/public/icons/back-svgrepo-com.svg Normal file
View File

@ -0,0 +1,23 @@
<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
<svg fill="#000000" height="800px" width="800px" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 0 386.242 386.242" xml:space="preserve">
<g>
<path id="Arrow_Back" d="M374.212,182.3H39.432l100.152-99.767c4.704-4.704,4.704-12.319,0-17.011
c-4.704-4.704-12.319-4.704-17.011,0L3.474,184.61c-4.632,4.632-4.632,12.379,0,17.011l119.1,119.1
c4.704,4.704,12.319,4.704,17.011,0c4.704-4.704,4.704-12.319,0-17.011L39.432,206.36h334.779c6.641,0,12.03-5.39,12.03-12.03
S380.852,182.3,374.212,182.3z"/>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 790 B

15
16-countries-page-from-api/src/main/resources/public/icons/half-moon-shape-svgrepo-com.svg Normal file
View File

@ -0,0 +1,15 @@
<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg fill="#000000" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
width="800px" height="800px" viewBox="0 0 81.289 81.289"
xml:space="preserve">
<g>
<path d="M79.248,38.668c-1.246-0.464-2.669-0.088-3.518,0.95c-4.791,5.84-11.858,9.192-19.403,9.192
c-13.833,0-25.083-11.255-25.083-25.083c0-6.963,2.808-13.441,7.908-18.242c0.977-0.918,1.26-2.357,0.705-3.579
c-0.552-1.222-1.818-1.959-3.157-1.826C15.778,2.112,0,19.511,0,40.555c0,22.424,18.245,40.669,40.672,40.669
c22.16,0,40.002-17.363,40.616-39.528C81.324,40.355,80.508,39.136,79.248,38.668z M40.671,74.953
c-18.971,0-34.402-15.43-34.402-34.4c0-14.93,9.389-27.69,22.859-32.43c-2.714,4.689-4.156,10.022-4.156,15.605
c0,17.292,14.065,31.355,31.357,31.355c6.317,0,12.373-1.882,17.479-5.322C69.82,64.399,56.557,74.953,40.671,74.953z"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

4
16-countries-page-from-api/src/main/resources/public/icons/search-svgrepo-com.svg Normal file
View File

@ -0,0 +1,4 @@
<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
<svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M15.7955 15.8111L21 21M18 10.5C18 14.6421 14.6421 18 10.5 18C6.35786 18 3 14.6421 3 10.5C3 6.35786 6.35786 3 10.5 3C14.6421 3 18 6.35786 18 10.5Z" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 469 B

74
16-countries-page-from-api/src/main/resources/public/output.css
View File

@ -532,6 +532,21 @@ video {
margin-bottom: 1rem;
}
.mx-4 {
margin-left: 1rem;
margin-right: 1rem;
}
.mx-5 {
margin-left: 1.25rem;
margin-right: 1.25rem;
}
.mx-2 {
margin-left: 0.5rem;
margin-right: 0.5rem;
}
.mr-2 {
margin-right: 0.5rem;
}
@ -616,6 +631,10 @@ video {
height: 2.25rem;
}
.h-5 {
height: 1.25rem;
}
.w-16 {
width: 4rem;
}
@ -636,6 +655,38 @@ video {
width: 5rem;
}
.w-4 {
width: 1rem;
}
.w-6 {
width: 1.5rem;
}
.w-9 {
width: 2.25rem;
}
.w-10 {
width: 2.5rem;
}
.w-8 {
width: 2rem;
}
.w-36 {
width: 9rem;
}
.w-32 {
width: 8rem;
}
.w-28 {
width: 7rem;
}
.flex-grow {
flex-grow: 1;
}
@ -698,6 +749,29 @@ video {
row-gap: 2.5rem;
}
.gap-x-2 {
-moz-column-gap: 0.5rem;
column-gap: 0.5rem;
}
.gap-y-2 {
row-gap: 0.5rem;
}
.gap-y-6 {
row-gap: 1.5rem;
}
.gap-x-6 {
-moz-column-gap: 1.5rem;
column-gap: 1.5rem;
}
.gap-x-3 {
-moz-column-gap: 0.75rem;
column-gap: 0.75rem;
}
.space-y-1 > :not([hidden]) ~ :not([hidden]) {
--tw-space-y-reverse: 0;
margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse)));

12
16-countries-page-from-api/src/main/resources/templates/country.html
View File

@ -30,8 +30,16 @@
<nav class="h-32 px-8 py-10">
<a
href="/"
class="w-20 h-12 bg-white drop-shadow-[0_0_3px_rgba(0,0,0,0.5)] text-md rounded px-5 py-2"
>arr Back</a
>
<div
class="h-9 w-28 bg-white drop-shadow-[0_0_3px_rgba(0,0,0,0.5)] text-md rounded px-5 py-2 flex flex-row gap-x-3 place-content-center"
>
<img src="../public/icons/back-svgrepo-com.svg"
class="w-4 h-5"
alt="" />
<p> Back </p>
</div>
</a
>
</nav>

13
16-countries-page-from-api/src/main/resources/templates/index.html
View File

@ -24,7 +24,12 @@
class="bg-white h-20 flex flex-row justify-between items-center px-4 shadow-md"
>
<h1 class="font-bold">Where in the world?</h1>
<p>Dark Mode</p>
<div class="flex flex-row gap-x-2">
<img src="../public/icons/half-moon-shape-svgrepo-com.svg"
class="w-4"
alt="" />
<p>Dark Mode</p>
</div>
</header>
<nav class="flex flex-col px-6 my-4 justify-around h-48">
<form
@ -36,7 +41,11 @@
hx-push-url="true"
>
<div class="flex flex-row bg-white shadow-md h-14 rounded-lg">
<p class="w-16 grid place-content-center">IC</p>
<!-- <p class="w-16 grid place-content-center">IC</p> -->
<img src="../public/icons/search-svgrepo-com.svg"
th:src="@{~/public/icons/search-svgrepo-com.svg}"
class="w-6 mx-5"
alt="" />
<input
class="appearance-none flex-grow focus:outline-none mr-2"
type="text"