From e378016b53b16099b24f2f798102bcd0b31fde7b Mon Sep 17 00:00:00 2001
From: Brody Wilton <brodywilton@192.168.1.227>
Date: Fri, 1 Mar 2024 23:28:12 +0000
Subject: [PATCH] Correct spacing and add new information to pricing page
---
myproject/myapp/templates/_base.html | 2 +-
myproject/myapp/templates/pricing.html | 114 ++++++++++++++++++++++++-
2 files changed, 114 insertions(+), 2 deletions(-)
diff --git a/myproject/myapp/templates/_base.html b/myproject/myapp/templates/_base.html
index ed8586a..d89d96a 100644
--- a/myproject/myapp/templates/_base.html
+++ b/myproject/myapp/templates/_base.html
@@ -88,7 +88,7 @@
</div>
</div>
</nav>
- <div class="container mx-auto mt-4">
+ <div class="container mx-auto mt-6">
{% block content %} {% endblock content %}
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flowbite/2.3.0/flowbite.min.js"></script>
diff --git a/myproject/myapp/templates/pricing.html b/myproject/myapp/templates/pricing.html
index cc7b60b..66b2954 100644
--- a/myproject/myapp/templates/pricing.html
+++ b/myproject/myapp/templates/pricing.html
@@ -1,3 +1,115 @@
{% extends "_base.html" %}{% block content %}
-<h1>Pricing page</h1>
+
+<div class="grid grid-cols-2 content-start">
+ <div class="w-full mx-auto max-w-sm p-4 bg-white border border-gray-200 rounded-lg shadow sm:p-8 dark:bg-gray-800 dark:border-gray-700">
+ <h5 class="mb-4 text-xl font-medium text-gray-500 dark:text-gray-400">Trial plan</h5>
+ <div class="flex items-baseline text-gray-900 dark:text-white">
+ <span class="text-5xl font-extrabold tracking-tight">Free</span>
+ </div>
+ <ul role="list" class="space-y-5 my-7">
+ <li class="flex items-center">
+ <svg class="flex-shrink-0 w-4 h-4 text-blue-700 dark:text-blue-500" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
+ <path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5Zm3.707 8.207-4 4a1 1 0 0 1-1.414 0l-2-2a1 1 0 0 1 1.414-1.414L9 10.586l3.293-3.293a1 1 0 0 1 1.414 1.414Z"/>
+ </svg>
+ <span class="text-base font-normal leading-tight text-gray-500 dark:text-gray-400 ms-3">1 team member</span>
+ </li>
+ <li class="flex">
+ <svg class="flex-shrink-0 w-4 h-4 text-blue-700 dark:text-blue-500" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
+ <path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5Zm3.707 8.207-4 4a1 1 0 0 1-1.414 0l-2-2a1 1 0 0 1 1.414-1.414L9 10.586l3.293-3.293a1 1 0 0 1 1.414 1.414Z"/>
+ </svg>
+ <span class="text-base font-normal leading-tight text-gray-500 dark:text-gray-400 ms-3">0GB Cloud storage</span>
+ </li>
+ <li class="flex decoration-gray-500">
+ <svg class="flex-shrink-0 w-4 h-4 text-blue-700 dark:text-gray-500" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
+ <path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5Zm3.707 8.207-4 4a1 1 0 0 1-1.414 0l-2-2a1 1 0 0 1 1.414-1.414L9 10.586l3.293-3.293a1 1 0 0 1 1.414 1.414Z"/>
+ </svg>
+ <span class="text-base font-normal leading-tight text-gray-500 ms-3">1 File upload</span>
+ <span class="ms-1 text-sm font-normal text-gray-500 dark:text-gray-400">/month</span>
+ </li>
+ <li class="flex line-through decoration-gray-500">
+ <svg class="flex-shrink-0 w-4 h-4 text-gray-400 dark:text-blue-500" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
+ <path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5Zm3.707 8.207-4 4a1 1 0 0 1-1.414 0l-2-2a1 1 0 0 1 1.414-1.414L9 10.586l3.293-3.293a1 1 0 0 1 1.414 1.414Z"/>
+ </svg>
+ <span class="text-base font-normal leading-tight text-gray-500 dark:text-gray-400 ms-3">Integration help</span>
+ </li>
+ <li class="flex line-through decoration-gray-500">
+ <svg class="flex-shrink-0 w-4 h-4 text-gray-400 dark:text-gray-500" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
+ <path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5Zm3.707 8.207-4 4a1 1 0 0 1-1.414 0l-2-2a1 1 0 0 1 1.414-1.414L9 10.586l3.293-3.293a1 1 0 0 1 1.414 1.414Z"/>
+ </svg>
+ <span class="text-base font-normal leading-tight text-gray-500 ms-3">API Access</span>
+ </li>
+ <li class="flex line-through decoration-gray-500">
+ <svg class="flex-shrink-0 w-4 h-4 text-gray-400 dark:text-gray-500" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
+ <path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5Zm3.707 8.207-4 4a1 1 0 0 1-1.414 0l-2-2a1 1 0 0 1 1.414-1.414L9 10.586l3.293-3.293a1 1 0 0 1 1.414 1.414Z"/>
+ </svg>
+ <span class="text-base font-normal leading-tight text-gray-500 ms-3">Complete documentation</span>
+ </li>
+ <li class="flex line-through decoration-gray-500">
+ <svg class="flex-shrink-0 w-4 h-4 text-gray-400 dark:text-gray-500" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
+ <path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5Zm3.707 8.207-4 4a1 1 0 0 1-1.414 0l-2-2a1 1 0 0 1 1.414-1.414L9 10.586l3.293-3.293a1 1 0 0 1 1.414 1.414Z"/>
+ </svg>
+ <span class="text-base font-normal leading-tight text-gray-500 ms-3">24×7 phone & email support</span>
+ </li>
+ </ul>
+ <button type="button" class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-200 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-900 font-medium rounded-lg text-sm px-5 py-2.5 inline-flex justify-center w-full text-center">Choose plan</button>
+ </div>
+
+ <div class="w-full mx-auto max-w-sm p-4 bg-white border border-gray-200 rounded-lg shadow sm:p-8 dark:bg-gray-800 dark:border-gray-700">
+ <h5 class="mb-4 text-xl font-medium text-gray-500 dark:text-gray-400">Standard plan</h5>
+ <div class="flex items-baseline text-gray-900 dark:text-white">
+ <span class="text-3xl font-semibold">£</span>
+ <span class="text-5xl font-extrabold tracking-tight">49</span>
+ <span class="ms-1 text-xl font-normal text-gray-500 dark:text-gray-400">/month</span>
+ </div>
+ <ul role="list" class="space-y-5 my-7">
+ <li class="flex items-center">
+ <svg class="flex-shrink-0 w-4 h-4 text-blue-700 dark:text-blue-500" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
+ <path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5Zm3.707 8.207-4 4a1 1 0 0 1-1.414 0l-2-2a1 1 0 0 1 1.414-1.414L9 10.586l3.293-3.293a1 1 0 0 1 1.414 1.414Z"/>
+ </svg>
+ <span class="text-base font-normal leading-tight text-gray-500 dark:text-gray-400 ms-3">2 team members</span>
+ </li>
+ <li class="flex">
+ <svg class="flex-shrink-0 w-4 h-4 text-blue-700 dark:text-blue-500" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
+ <path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5Zm3.707 8.207-4 4a1 1 0 0 1-1.414 0l-2-2a1 1 0 0 1 1.414-1.414L9 10.586l3.293-3.293a1 1 0 0 1 1.414 1.414Z"/>
+ </svg>
+ <span class="text-base font-normal leading-tight text-gray-500 dark:text-gray-400 ms-3">20GB Cloud storage</span>
+ </li>
+ <li class="flex decoration-gray-500">
+ <svg class="flex-shrink-0 w-4 h-4 text-blue-700 dark:text-gray-500" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
+ <path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5Zm3.707 8.207-4 4a1 1 0 0 1-1.414 0l-2-2a1 1 0 0 1 1.414-1.414L9 10.586l3.293-3.293a1 1 0 0 1 1.414 1.414Z"/>
+ </svg>
+ <span class="text-base font-normal leading-tight text-gray-500 ms-3">100 File Uploads</span>
+ <span class="ms-1 text-sm font-normal text-gray-500 dark:text-gray-400">/month</span>
+ </li>
+ <li class="flex">
+ <svg class="flex-shrink-0 w-4 h-4 text-blue-700 dark:text-blue-500" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
+ <path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5Zm3.707 8.207-4 4a1 1 0 0 1-1.414 0l-2-2a1 1 0 0 1 1.414-1.414L9 10.586l3.293-3.293a1 1 0 0 1 1.414 1.414Z"/>
+ </svg>
+ <span class="text-base font-normal leading-tight text-gray-500 dark:text-gray-400 ms-3">Integration help</span>
+ </li>
+ <li class="flex decoration-gray-500">
+ <svg class="flex-shrink-0 w-4 h-4 text-blue-700 dark:text-gray-500" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
+ <path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5Zm3.707 8.207-4 4a1 1 0 0 1-1.414 0l-2-2a1 1 0 0 1 1.414-1.414L9 10.586l3.293-3.293a1 1 0 0 1 1.414 1.414Z"/>
+ </svg>
+ <span class="text-base font-normal leading-tight text-gray-500 ms-3">API Access</span>
+ </li>
+ <li class="flex decoration-gray-500">
+ <svg class="flex-shrink-0 w-4 h-4 text-blue-700 dark:text-gray-500" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
+ <path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5Zm3.707 8.207-4 4a1 1 0 0 1-1.414 0l-2-2a1 1 0 0 1 1.414-1.414L9 10.586l3.293-3.293a1 1 0 0 1 1.414 1.414Z"/>
+ </svg>
+ <span class="text-base font-normal leading-tight text-gray-500 ms-3">Complete documentation</span>
+ </li>
+ <li class="flex decoration-gray-500">
+ <svg class="flex-shrink-0 w-4 h-4 text-blue-700 dark:text-gray-500" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
+ <path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5Zm3.707 8.207-4 4a1 1 0 0 1-1.414 0l-2-2a1 1 0 0 1 1.414-1.414L9 10.586l3.293-3.293a1 1 0 0 1 1.414 1.414Z"/>
+ </svg>
+ <span class="text-base font-normal leading-tight text-gray-500 ms-3">24×7 phone & email support</span>
+ </li>
+ </ul>
+ <button type="button" class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-200 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-900 font-medium rounded-lg text-sm px-5 py-2.5 inline-flex justify-center w-full text-center">Choose plan</button>
+ </div>
+
+</div>
+
+
{% endblock content %}
\ No newline at end of file
--
GitLab