trent_larson
/
kickstarter-for-time
6
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

Project Edit + Commitment Form

master
Jose Olarte III 2 years ago
parent
cf4c6300a5
commit
c49a6c4eee
3 changed files with 169 additions and 1 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 91
      commitment-edit.html
  2. 77
      project-edit.html
  3. 2
      project-view.html

91
commitment-edit.html
View File

@ -0,0 +1,91 @@
<!doctype html>
<html class="text-slate-700">
<head>
<title>Make Committment - Kickstarter for Time</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Tailwind -->
<script src="https://cdn.tailwindcss.com?plugins=forms"></script>
<!-- Font Awesome -->
<script src="https://kit.fontawesome.com/2396c18fde.js" crossorigin="anonymous"></script>
<link href="css/main.css" rel="stylesheet">
</head>
<body>
<!-- QUICK NAV -->
<nav id="QuickNav" class="fixed bottom-0 left-0 right-0 bg-slate-200">
<ul class="flex text-2xl p-2 gap-2">
<!-- Home Feed -->
<li class="basis-1/4 rounded-md text-slate-500"><a href="" class="block text-center py-3 px-1"><i class="fa-solid fa-house-chimney fa-fw"></i></a></li>
<!-- Search -->
<li class="basis-1/4 rounded-md text-slate-500"><a href="search.html" class="block text-center py-3 px-1"><i class="fa-solid fa-magnifying-glass fa-fw"></i></a></li>
<!-- Projects -->
<li class="basis-1/4 rounded-md bg-slate-400 text-white"><a href="" class="block text-center py-3 px-1"><i class="fa-solid fa-folder-open fa-fw"></i></a></li>
<!-- Commitments -->
<li class="basis-1/4 rounded-md text-slate-500"><a href="" class="block text-center py-3 px-1"><i class="fa-solid fa-hand fa-fw"></i></a></li>
<!-- Contacts -->
<!-- li class="basis-1/5 rounded-md text-slate-500"><a href="" class="block text-center py-3 px-1"><i class="fa-solid fa-user-group fa-fw"></i></a></li -->
</ul>
</nav>
<!-- CONTENT -->
<section id="Content" class="p-6 pb-24">
<!-- Breadcrumb -->
<div id="ViewBreadcrumb" class="mb-8">
<h1 class="text-lg text-center font-light relative px-7">
<!-- Cancel -->
<a href="project-view.html" class="text-lg text-center px-2 py-1 absolute -left-2 -top-1"><i class="fa-solid fa-chevron-left fa-fw"></i></a>
Make Commitment
</h1>
</div>
<!-- Project Details -->
<form>
<select class="block w-full rounded border-slate-400 mb-4">
<option disabled>Choose a commitment type…</option>
<option selected>Time</option>
<option>Cryptocurrency</option>
<option>Money</option>
</select>
<!-- Time amount -->
<div class="mb-4 flex items-stretch">
<input type="number" placeholder="0.0" class="block w-full rounded-l border-slate-400" />
<span class="px-4 py-2 rounded-r bg-slate-200 border border-l-0 border-slate-400">hours</span>
</div>
<!-- Crypto amount -->
<!-- div class="mb-4 flex">
<select class="pl-4 pr-8 rounded-l bg-slate-200 border border-r-0 border-slate-400">
<option>BTC</option>
<option>ETH</option>
</select>
<input type="number" placeholder="0.0000" class="block w-full rounded-r border-slate-400" />
</div -->
<!-- Money amount -->
<!-- div class="mb-4 flex">
<select class="pl-4 pr-8 rounded-l bg-slate-200 border border-r-0 border-slate-400">
<option>US$</option>
<option>GB£</option>
</select>
<input type="number" placeholder="0.00" class="block w-full rounded-r border-slate-400" />
</div -->
<div class="mt-8">
<input type="submit" class="block w-full text-center text-lg font-bold uppercase bg-blue-600 text-white px-2 py-3 rounded-md mb-2" value="Commit" />
<button type="button" class="block w-full text-center text-md uppercase bg-slate-500 text-white px-1.5 py-2 rounded-md">Maybe Later</button>
</div>
</form>
</section>
</body>
</html>

77
project-edit.html
View File

@ -0,0 +1,77 @@
<!doctype html>
<html class="text-slate-700">
<head>
<title>[New/Edit] Project - Kickstarter for Time</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Tailwind -->
<script src="https://cdn.tailwindcss.com?plugins=forms"></script>
<!-- Font Awesome -->
<script src="https://kit.fontawesome.com/2396c18fde.js" crossorigin="anonymous"></script>
<link href="css/main.css" rel="stylesheet">
</head>
<body>
<!-- QUICK NAV -->
<nav id="QuickNav" class="fixed bottom-0 left-0 right-0 bg-slate-200">
<ul class="flex text-2xl p-2 gap-2">
<!-- Home Feed -->
<li class="basis-1/4 rounded-md text-slate-500"><a href="" class="block text-center py-3 px-1"><i class="fa-solid fa-house-chimney fa-fw"></i></a></li>
<!-- Search -->
<li class="basis-1/4 rounded-md text-slate-500"><a href="search.html" class="block text-center py-3 px-1"><i class="fa-solid fa-magnifying-glass fa-fw"></i></a></li>
<!-- Projects -->
<li class="basis-1/4 rounded-md bg-slate-400 text-white"><a href="" class="block text-center py-3 px-1"><i class="fa-solid fa-folder-open fa-fw"></i></a></li>
<!-- Commitments -->
<li class="basis-1/4 rounded-md text-slate-500"><a href="" class="block text-center py-3 px-1"><i class="fa-solid fa-hand fa-fw"></i></a></li>
<!-- Contacts -->
<!-- li class="basis-1/5 rounded-md text-slate-500"><a href="" class="block text-center py-3 px-1"><i class="fa-solid fa-user-group fa-fw"></i></a></li -->
</ul>
</nav>
<!-- CONTENT -->
<section id="Content" class="p-6 pb-24">
<!-- Breadcrumb -->
<div id="ViewBreadcrumb" class="mb-8">
<h1 class="text-lg text-center font-light relative px-7">
<!-- Cancel -->
<a href="project-view.html" class="text-lg text-center px-2 py-1 absolute -left-2 -top-1"><i class="fa-solid fa-chevron-left fa-fw"></i></a>
[New/Edit] Project
</h1>
</div>
<!-- Project Details -->
<form>
<!-- Image - Empty -->
<!-- div class="relative px-4 py-12 mb-4 rounded-md text-xl text-center font-light italic text-slate-500 bg-slate-100 border-dashed border border-slate-400">
Tap to upload an image&hellip;
</div -->
<!-- Image - Populated -->
<div class="relative mb-4 rounded-md overflow-hidden">
<div class="absolute top-3 right-3 flex gap-2">
<button class="text-md font-bold uppercase bg-blue-600 text-white px-3 py-2 rounded"><i class="fa-solid fa-pen fa-fw"></i></button>
<button class="text-md font-bold uppercase bg-red-600 text-white px-3 py-2 rounded"><i class="fa-solid fa-trash-can fa-fw"></i></button>
</div>
<img src="https://picsum.photos/800/400" class="w-full" />
</div>
<input type="text" placeholder="Project Name" class="block w-full rounded border-slate-400 mb-4" />
<textarea placeholder="Description" class="block w-full rounded border-slate-400 mb-4" rows="5"></textarea>
<div class="text-xs text-slate-500 italic -mt-3 mb-4">88/500 max. characters</div>
<div class="mt-8">
<input type="submit" class="block w-full text-center text-lg font-bold uppercase bg-blue-600 text-white px-2 py-3 rounded-md mb-2" value="Save Project" />
<button type="button" class="block w-full text-center text-md uppercase bg-slate-500 text-white px-1.5 py-2 rounded-md">Cancel</button>
</div>
</form>
</section>
</body>
</html>

2
project-view.html
View File

@ -64,7 +64,7 @@
</div> </div>
<!-- Commit --> <!-- Commit -->
<a href="" class="block text-center text-lg font-bold uppercase bg-blue-600 text-white px-2 py-3 rounded-md mb-8">Make Commitment</a> <a href="commitment-edit.html" class="block text-center text-lg font-bold uppercase bg-blue-600 text-white px-2 py-3 rounded-md mb-8">Make Commitment</a>
<!-- Commitments --> <!-- Commitments -->
<div class="bg-slate-100 px-4 py-3 rounded-md"> <div class="bg-slate-100 px-4 py-3 rounded-md">

Write Preview
Loading…
Cancel
Save