Skip to content

Commit

Permalink
Updaded layout
Browse files Browse the repository at this point in the history
  • Loading branch information
@iLevyTate
iLevyTate committed Aug 3, 2023
1 parent 06de489 commit 59f88e8
Showing 1 changed file with 64 additions and 57 deletions.
121 changes: 64 additions & 57 deletions frontend/src/routes/create-goals/+page.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -52,16 +52,14 @@
</script>

<div class="page-fade-in">
<div class="divider" />

<div class="container shadow-lg rounded-xl mb-4 mx-auto px-4 pt-5 md:max-w-xl lg:max-w-3xl z-10">
<div class="mb-5">
<label class="block text-xl font-bold mb-2" for="goal">Goal</label>
<label class="block text-xl rounded-xl font-bold mb-2" for="goal">Goal</label>
<input
class="shadow appearance-none border rounded w-full py-2 px-3 leading-tight focus:outline-none focus:shadow-outline"
class="shadow appearance-none border rounded-xl w-full py-2 px-3 leading-tight focus:outline-none focus:shadow-outline"
id="goal"
type="text"
placeholder="What's your SMART Goal?"
placeholder="What's your SMART Goal? e.q. Exercise"
bind:value={goal.goal}
/>
<ErrorMessage
Expand All @@ -71,7 +69,7 @@
/>

<div class="mt-3 flex flex-col items-left">
<button id="generate" class="btn btn-primary">Generate</button>
<button id="generate" class="btn rounded-xl btn-primary">Generate</button>
{#if loadingGenerate}
<div class="mt-3 flex justify-center items-center">
<span class="loading loading-infinity loading-md" />
Expand All @@ -90,7 +88,7 @@
id="specific"
class="shadow appearance-none border rounded-xl w-full py-2 px-3 leading-tight focus:outline-none focus:shadow-outline flex-grow mb-2 md:mb-0"
type="text"
placeholder="AchievAIm's Specific suggestion"
placeholder="AchievAIm's Specific suggestion. e.g. 15 min daily exercise."
bind:value={goal.specific}
/>
<label
Expand All @@ -113,9 +111,10 @@
/>
</svg>
<button class="card compact dropdown-content z-[1] bg-base-100 rounded-box w-64">
<div class="card-body">
<h2 class="card-title">You needed more info?</h2>
<p>Here is a description!</p>
<div class="card-body text-left">
<p>Toggle left to unsave.</p>
<p>Generate Button above to give you another suggestion.</p>
<p>Toggle Right to Save.</p>
</div>
</button>
</button>
Expand All @@ -136,7 +135,7 @@
id="measurable"
class="shadow appearance-none border rounded-xl w-full py-2 px-3 leading-tight focus:outline-none focus:shadow-outline flex-grow mb-2 md:mb-0"
type="text"
placeholder="AchievAIm's Measurable suggestion"
placeholder="AchievAIm's Measurable suggestion. e.q. Track consecutive days."
bind:value={goal.measurable}
/>
<label
Expand All @@ -159,11 +158,12 @@
/>
</svg>
<button class="card compact dropdown-content z-[1] bg-base-100 rounded-box w-64">
<div class="card-body">
<h2 class="card-title">You needed more info?</h2>
<p>Here is a description!</p>
</div>
</button>
<div class="card-body text-left">
<p>Toggle left to unsave.</p>
<p>Generate Button above to give you another suggestion.</p>
<p>Toggle Right to Save.</p>
</div></button
>
</button>
</div>
</label>
Expand All @@ -182,7 +182,7 @@
id="attainable"
class="shadow appearance-none border rounded-xl w-full py-2 px-3 leading-tight focus:outline-none focus:shadow-outline flex-grow mb-2 md:mb-0"
type="text"
placeholder="AchievAIm's Attainable suggestion"
placeholder="AchievAIm's Attainable suggestion. e.g. Find enjoyable activities."
bind:value={goal.attainable}
/>
<label
Expand All @@ -205,9 +205,10 @@
/>
</svg>
<button class="card compact dropdown-content z-[1] bg-base-100 rounded-box w-64">
<div class="card-body">
<h2 class="card-title">You needed more info?</h2>
<p>Here is a description!</p>
<div class="card-body text-left">
<p>Toggle left to unsave.</p>
<p>Generate Button above to give you another suggestion.</p>
<p>Toggle Right to Save.</p>
</div>
</button>
</button>
Expand All @@ -228,7 +229,7 @@
id="relevant"
class="shadow appearance-none border rounded-xl w-full py-2 px-3 leading-tight focus:outline-none focus:shadow-outline flex-grow mb-2 md:mb-0"
type="text"
placeholder="AchievAIm's Relevant suggestion"
placeholder="AchievAIm's Relevant suggestion. e.g. Improve fitness."
bind:value={goal.relevant}
/>
<label
Expand All @@ -251,9 +252,10 @@
/>
</svg>
<button class="card compact dropdown-content z-[1] bg-base-100 rounded-box w-64">
<div class="card-body">
<h2 class="card-title">You needed more info?</h2>
<p>Here is a description!</p>
<div class="card-body text-left">
<p>Toggle left to unsave.</p>
<p>Generate Button above to give you another suggestion.</p>
<p>Toggle Right to Save.</p>
</div>
</button>
</button>
Expand All @@ -274,7 +276,7 @@
id="time-bound"
class="shadow appearance-none border rounded-xl w-full py-2 px-3 leading-tight focus:outline-none focus:shadow-outline flex-grow mb-2 md:mb-0"
type="text"
placeholder="AchievAIm's Time-Bound suggestion"
placeholder="AchievAIm's Time-Bound suggestion. e.g. 30 consecutive days."
bind:value={goal.time_bound}
/>
<label
Expand All @@ -297,9 +299,10 @@
/>
</svg>
<button class="card compact dropdown-content z-[1] bg-base-100 rounded-box w-64">
<div class="card-body">
<h2 class="card-title">You needed more info?</h2>
<p>Here is a description!</p>
<div class="card-body text-left">
<p>Toggle left to unsave.</p>
<p>Generate Button above to give you another suggestion.</p>
<p>Toggle Right to Save.</p>
</div>
</button>
</button>
Expand Down Expand Up @@ -327,30 +330,36 @@
bind:checked={selectAll}
on:click={toggleAll}
/>
</label>
<div class="dropdown dropdown-end">
<button tabindex="-1" class="btn btn-circle btn-ghost btn-xs text-info m-3">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
class="w-4 h-4 stroke-current"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
/>
</svg>
</button>
<div class="card compact dropdown-content z-[1] bg-base-100 rounded-box w-64">
<div class="card-body">
<h2 class="card-title">You needed more info?</h2>
<p>Here is a description!</p>
<label
class="cursor-pointer label flex items-center md:ml-2 mt-2 md:mt-0 w-full md:w-auto justify-end"
>
<div class="dropdown dropdown-end">
<button tabindex="0" class="btn btn-circle btn-ghost btn-xs text-info m-3">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
class="w-4 h-4 stroke-current"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
/>
</svg>
<button
class="card compact dropdown-content z-[1] bg-base-100 rounded-box w-64"
>
<div class="card-body text-left">
<p>These are the days of the week your goals repeat</p>
<p>Toggle right to select all</p>
</div>
</button></button
>
</div>
</div>
</div>
</label></label
>
</div>
</div>
<DaysOfWeekSelector daysOfWeek={goal.days_of_week} />
Expand Down Expand Up @@ -393,9 +402,8 @@
/>
</svg>
<button class="card compact dropdown-content z-[1] bg-base-100 rounded-box w-64">
<div class="card-body">
<h2 class="card-title">You needed more info?</h2>
<p>Here is a description!</p>
<div class="card-body text-left">
<p>Set the alert time for your SMART goals for selected days above.</p>
</div>
</button>
</button>
Expand Down Expand Up @@ -438,9 +446,8 @@
/>
</svg>
<button class="card compact dropdown-content z-[1] bg-base-100 rounded-box w-64">
<div class="card-body">
<h2 class="card-title">You needed more info?</h2>
<p>Here is a description!</p>
<div class="card-body text-left">
<p>Choose the Date for Completing Your SMART Goal.</p>
</div>
</button>
</button>
Expand Down

0 comments on commit 59f88e8

Please sign in to comment.