logo and color styles added for the web

tedoaba · Oct 24, 2024 · e73a844 · e73a844
1 parent 1ca0585
commit e73a844
Show file tree

Hide file tree

Showing 10 changed files with 77 additions and 77 deletions.
diff --git a/Dockerfile b/Dockerfile
@@ -6,9 +6,6 @@ ENV PYTHONDONTWRITEBYTECODE 1
 ENV PYTHONUNBUFFERED 1
 ENV FLASK_APP=app
 
-# Set the working directory
-WORKDIR /app
-
 # Copy and install system dependencies
 RUN apt-get update && apt-get install -y \
     build-essential \
@@ -21,10 +18,14 @@ RUN curl -fsSL https://deb.nodesource.com/setup_18.x | bash - && \
     apt-get install -y nodejs && \
     apt-get clean && rm -rf /var/lib/apt/lists/*
 
+# Set the working directory
+WORKDIR /app
+
 # Copy project dependencies first to improve caching
 COPY requirements.txt .
-RUN pip install --upgrade pip && pip install -r requirements.txt
 
+RUN pip install --no-cache-dir --upgrade pip && \
+    pip install --no-cache-dir -r requirements.txt
 # Copy Node dependencies and install them
 COPY app/package.json .
 RUN npm install

diff --git a/app/static/assets/adey.jpg b/app/static/assets/adey.jpg
diff --git a/app/static/css/main.css b/app/static/css/main.css
@@ -706,6 +706,14 @@ video {
   height: 1.25rem;
 }
 
+.h-32 {
+  height: 8rem;
+}
+
+.h-8 {
+  height: 2rem;
+}
+
 .w-10 {
   width: 2.5rem;
 }
@@ -718,6 +726,14 @@ video {
   width: 100%;
 }
 
+.w-32 {
+  width: 8rem;
+}
+
+.w-8 {
+  width: 2rem;
+}
+
 .min-w-full {
   min-width: 100%;
 }
@@ -738,10 +754,6 @@ video {
   flex-basis: 25%;
 }
 
-.origin-\[0\] {
-  transform-origin: 0;
-}
-
 .-translate-y-6 {
   --tw-translate-y: -1.5rem;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
@@ -871,29 +883,34 @@ video {
   border-color: rgb(209 213 219 / var(--tw-border-opacity));
 }
 
-.border-gray-600 {
-  --tw-border-opacity: 1;
-  border-color: rgb(75 85 99 / var(--tw-border-opacity));
+.bg-blue-600 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(37 99 235 / var(--tw-bg-opacity));
 }
 
 .bg-blue-700 {
   --tw-bg-opacity: 1;
   background-color: rgb(29 78 216 / var(--tw-bg-opacity));
 }
 
-.bg-gray-50 {
+.bg-dg-dark-blue {
   --tw-bg-opacity: 1;
-  background-color: rgb(249 250 251 / var(--tw-bg-opacity));
+  background-color: rgb(17 45 50 / var(--tw-bg-opacity));
 }
 
-.bg-gray-800 {
+.bg-dg-light-blue {
   --tw-bg-opacity: 1;
-  background-color: rgb(31 41 55 / var(--tw-bg-opacity));
+  background-color: rgb(37 78 88 / var(--tw-bg-opacity));
 }
 
-.bg-gray-900 {
+.bg-dg-light-grey {
   --tw-bg-opacity: 1;
-  background-color: rgb(17 24 39 / var(--tw-bg-opacity));
+  background-color: rgb(110 102 88 / var(--tw-bg-opacity));
+}
+
+.bg-gray-50 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(249 250 251 / var(--tw-bg-opacity));
 }
 
 .bg-transparent {
@@ -905,6 +922,11 @@ video {
   background-color: rgb(255 255 255 / var(--tw-bg-opacity));
 }
 
+.bg-dg-dark-grey {
+  --tw-bg-opacity: 1;
+  background-color: rgb(79 74 65 / var(--tw-bg-opacity));
+}
+
 .p-10 {
   padding: 2.5rem;
 }
@@ -942,11 +964,6 @@ video {
   padding-right: 12rem;
 }
 
-.px-5 {
-  padding-left: 1.25rem;
-  padding-right: 1.25rem;
-}
-
 .py-2 {
   padding-top: 0.5rem;
   padding-bottom: 0.5rem;
@@ -1064,11 +1081,6 @@ video {
   color: rgb(17 24 39 / var(--tw-text-opacity));
 }
 
-.text-red-700 {
-  --tw-text-opacity: 1;
-  color: rgb(185 28 28 / var(--tw-text-opacity));
-}
-
 .text-white {
   --tw-text-opacity: 1;
   color: rgb(255 255 255 / var(--tw-text-opacity));
@@ -1106,9 +1118,9 @@ video {
   transition-duration: 300ms;
 }
 
-.hover\:bg-blue-800:hover {
+.hover\:bg-blue-700:hover {
   --tw-bg-opacity: 1;
-  background-color: rgb(30 64 175 / var(--tw-bg-opacity));
+  background-color: rgb(29 78 216 / var(--tw-bg-opacity));
 }
 
 .hover\:bg-gray-100:hover {
@@ -1180,10 +1192,6 @@ video {
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
 
-.peer:focus ~ .peer-focus\:start-0 {
-  inset-inline-start: 0px;
-}
-
 .peer:focus ~ .peer-focus\:-translate-y-6 {
   --tw-translate-y: -1.5rem;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
@@ -1195,10 +1203,6 @@ video {
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
 
-.peer:focus ~ .peer-focus\:font-medium {
-  font-weight: 500;
-}
-
 .peer:focus ~ .peer-focus\:text-blue-600 {
   --tw-text-opacity: 1;
   color: rgb(37 99 235 / var(--tw-text-opacity));
@@ -1210,10 +1214,6 @@ video {
     margin-right: auto;
   }
 
-  .sm\:w-auto {
-    width: auto;
-  }
-
   .sm\:px-16 {
     padding-left: 4rem;
     padding-right: 4rem;
@@ -1249,10 +1249,6 @@ video {
     width: auto;
   }
 
-  .md\:grid-cols-1 {
-    grid-template-columns: repeat(1, minmax(0, 1fr));
-  }
-
   .md\:grid-cols-2 {
     grid-template-columns: repeat(2, minmax(0, 1fr));
   }
@@ -1387,11 +1383,6 @@ video {
   --tw-space-x-reverse: 1;
 }
 
-.peer:focus ~ .rtl\:peer-focus\:translate-x-1\/4:where([dir="rtl"], [dir="rtl"] *) {
-  --tw-translate-x: 25%;
-  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-}
-
 .dark\:divide-gray-700:where(.dark, .dark *) > :not([hidden]) ~ :not([hidden]) {
   --tw-divide-opacity: 1;
   border-color: rgb(55 65 81 / var(--tw-divide-opacity));
@@ -1422,6 +1413,16 @@ video {
   background-color: rgb(37 99 235 / var(--tw-bg-opacity));
 }
 
+.dark\:bg-dg-dark-blue:where(.dark, .dark *) {
+  --tw-bg-opacity: 1;
+  background-color: rgb(17 45 50 / var(--tw-bg-opacity));
+}
+
+.dark\:bg-dg-light-blue:where(.dark, .dark *) {
+  --tw-bg-opacity: 1;
+  background-color: rgb(37 78 88 / var(--tw-bg-opacity));
+}
+
 .dark\:bg-gray-500:where(.dark, .dark *) {
   --tw-bg-opacity: 1;
   background-color: rgb(107 114 128 / var(--tw-bg-opacity));
@@ -1447,11 +1448,6 @@ video {
   color: rgb(156 163 175 / var(--tw-text-opacity));
 }
 
-.dark\:text-red-700:where(.dark, .dark *) {
-  --tw-text-opacity: 1;
-  color: rgb(185 28 28 / var(--tw-text-opacity));
-}
-
 .dark\:text-white:where(.dark, .dark *) {
   --tw-text-opacity: 1;
   color: rgb(255 255 255 / var(--tw-text-opacity));
@@ -1493,9 +1489,9 @@ video {
 }
 
 @media (min-width: 768px) {
-  .md\:dark\:bg-slate-700:where(.dark, .dark *) {
+  .md\:dark\:bg-dg-light-blue:where(.dark, .dark *) {
     --tw-bg-opacity: 1;
-    background-color: rgb(51 65 85 / var(--tw-bg-opacity));
+    background-color: rgb(37 78 88 / var(--tw-bg-opacity));
   }
 
   .md\:dark\:text-blue-500:where(.dark, .dark *) {

diff --git a/app/tailwind.config.js b/app/tailwind.config.js
@@ -17,6 +17,11 @@ module.exports = {
         merriweather: ['Merriweather', 'serif'],
       },
       colors: {
+        'dg-blue': '#88BDBC',
+        'dg-light-blue': '#254E58',
+        'dg-dark-blue': '#112D32',
+        'dg-dark-grey': '#4F4A41',
+        'dg-light-grey': '#6E6658',
         'tedo-dark-blue': '#080F5B',
         'tedo-blue': '#0D19A3',
         'tedo-light-green': '#15DB95',

diff --git a/app/templates/_footer.html b/app/templates/_footer.html
@@ -1,6 +1,6 @@
 
 
-<footer class="bg-white rounded-lg shadow dark:bg-slate-700 m-4 ">
+<footer class="bg-white rounded-lg shadow dark:bg-dg-light-blue m-4 ">
     <div class="w-full max-w-screen-xl mx-auto p-4 md:py-8 font-merriweather">
 
         <hr class="my-6 border-gray-200 sm:mx-auto dark:border-white lg:my-8" />

diff --git a/app/templates/_navigation.html b/app/templates/_navigation.html
@@ -1,8 +1,8 @@
 <header>
-    <nav class="bg-white font-merriweather dark:bg-slate-700 fixed w-full z-20 top-0 start-0 border-b border-gray-200 dark:border-white">
+    <nav class="font-merriweather bg-dg-light-blue fixed w-full z-20 top-0 start-0 border-b border-gray-200 dark:border-white">
         <div class="max-w-screen-xl flex flex-wrap items-center justify-between mx-auto p-4">
             <a href="/" class="flex items-center space-x-3 rtl:space-x-reverse">
-                <span class="self-center text-2xl font-semibold whitespace-nowrap dark:text-white">Fraud AI</span>
+                <img src="static/assets/adey.jpg" alt="Adey Innovations Inc log" class="w-10 h-10" />
             </a>
             <div class="flex md:order-2 space-x-3 md:space-x-0 rtl:space-x-reverse">
                 <button data-collapse-toggle="navbar-sticky" type="button" class="inline-flex items-center p-2 w-10 h-10 justify-center text-sm text-gray-500 rounded-lg md:hidden hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600" aria-controls="navbar-sticky" aria-expanded="false">
@@ -13,7 +13,7 @@
                 </button>
             </div>
             <div class="items-center justify-between hidden w-full md:flex md:w-auto md:order-1" id="navbar-sticky">
-                <ul class="flex flex-col p-4 md:p-0 mt-4 font-medium border border-gray-100 rounded-lg bg-gray-50 md:space-x-8 rtl:space-x-reverse md:flex-row md:mt-0 md:border-0 md:bg-white dark:bg-slate-700 md:dark:bg-slate-700 dark:border-slate-600">
+                <ul class="flex flex-col p-4 md:p-0 mt-4 font-medium border border-gray-100 rounded-lg bg-gray-50 md:space-x-8 rtl:space-x-reverse md:flex-row md:mt-0 md:border-0 md:bg-white dark:bg-slate-700 md:dark:bg-dg-light-blue dark:border-slate-600">
                 <li>
                     <a href="/" class="block py-2 px-3 text-white bg-blue-700 rounded md:bg-transparent md:text-blue-700 md:p-0 md:dark:text-blue-500" aria-current="page">Home</a>
                 </li>

diff --git a/app/templates/base.html b/app/templates/base.html
@@ -10,7 +10,7 @@
 
     <body>
         {% include("_navigation.html") %}
-        <main class="dark:bg-slate-700 font-merriweather">
+        <main class="dark:bg-dg-light-blue font-merriweather">
             {% block content %}<p>No messages.</p>{% endblock content %}
             {% include("_footer.html") %}
         </main>

diff --git a/app/templates/pages/home.html b/app/templates/pages/home.html
@@ -6,13 +6,13 @@
 
 <section class="pt-32 lg:px-20">
     <div class="flex flex-col justify-center">
-        <h1 class="mb-4 text-4xl font-extrabold font-montserrat leading-none tracking-tight text-gray-900 md:text-5xl lg:text-6xl xl:px-32 dark:text-white">Fraud Detection in Finance</h1>
+        <h1 class="mb-4 text-4xl font-extrabold font-montserrat leading-none tracking-tight text-gray-900 md:text-5xl lg:text-6xl xl:px-32 dark:text-white">Adey Innovations Inc</h1>
     </div>
 </section>
 <section class="py-8 lg:px-20">
     <div class="flex flex-col justify-center">
-        <h1 class="mb-4 text-xl font-extrabold font-montserrat leading-none tracking-tight md:text-2xl lg:text-4xl xl:px-48 text-white">Dataset Description</h1>
-        <p class="mb-6 text-lg font-normal text-white lg:text-xl sm:px-16 xl:px-48">A comprehensive resource designed for training and evaluating machine learning models in the context of financial fraud detection. It combines data from various sources, including transaction records, customer profiles, fraudulent patterns, transaction amounts, and merchant information, into a single dataset with the shape (1000, 14). This consolidated dataset facilitates the development of robust fraud detection models by providing rich, diverse features necessary for identifying and predicting fraudulent activities. It serves as an invaluable tool for researchers, data scientists, and analysts aiming to advance fraud detection methodologies. <a href="https://www.kaggle.com/datasets/goyaladi/fraud-detection-dataset" target="_blank" class="text-blue-400">Kaggle</a></p>
+        <h1 class="mb-4 text-xl font-extrabold font-montserrat leading-none tracking-tight md:text-2xl lg:text-4xl xl:px-48 text-white">Enhancing Financial Security with Advanced AI Fraud Detection</h1>
+        <p class="mb-6 text-lg font-normal text-white lg:text-xl sm:px-16 xl:px-48"> At <b>Adey Innovations Inc.,</b> we're redefining financial security with state-of-the-art fraud detection solutions for e-commerce and banking. Our platform leverages the power of advanced machine learning models, geolocation analysis, and transaction pattern recognition to accurately identify fraudulent activities and protect businesses from financial threats. Designed to handle the unique challenges of both online and bank credit transactions, our system offers real-time monitoring and reporting, empowering businesses to act swiftly and minimize risks. By integrating cutting-edge technology with seamless user experience, Adey Innovations Inc. is committed to building trust, preventing financial losses, and leading the future of secure financial technology for businesses and institutions worldwide.</p>
     </div>
 </section>
 

diff --git a/app/templates/transactions/create.html b/app/templates/transactions/create.html
@@ -7,12 +7,16 @@
         <div class="flex justify-center">
             <h1 class="mb-4 text-xl font-extrabold leading-none tracking-tight text-gray-900 md:text-2xl lg:text-3xl dark:text-white">Create New Transaction</h1>
         </div>
-        <form class="max-w-md mx-auto p-10 shadow-xl shadow-white bg-gray-900 rounded-xl" action="/create" method="post">
+        <form class="max-w-md mx-auto p-10 shadow-xl shadow-white bg-dg-dark-blue rounded-xl" action="/create" method="post">
             <div class="grid md:grid-cols-2 md:gap-6">
                 <div class="relative z-0 w-full mb-5 group">
                     <input type="text" name="user_id" id="user_id" class="block py-2.5 px-0 w-full text-sm text-white bg-transparent border-0 border-b-2 border-gray-300 appearance-none dark:border-gray-600 dark:focus:border-blue-500 focus:outline-none focus:ring-0 focus:border-blue-600 peer" placeholder=" " required />
                     <label for="user_id" class="absolute text-sm text-gray-500 dark:text-gray-400 duration-300 transform -translate-y-6 scale-75 top-3 -z-10 peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-6 peer-focus:text-blue-600 peer-focus:dark:text-blue-500">User ID</label>
                 </div>
+                <div class="relative z-0 w-full mb-5 group">
+                    <input type="text" name="ip_address" id="ip_address" class="block py-2.5 px-0 w-full text-sm text-white bg-transparent border-0 border-b-2 border-gray-300 appearance-none dark:border-gray-600 dark:focus:border-blue-500 focus:outline-none focus:ring-0 focus:border-blue-600 peer" placeholder=" " required />
+                    <label for="ip_address" class="absolute text-sm text-gray-500 dark:text-gray-400 duration-300 transform -translate-y-6 scale-75 top-3 -z-10 peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-6 peer-focus:text-blue-600 peer-focus:dark:text-blue-500">IP Address</label>
+                </div>
             </div>
             <div class="grid md:grid-cols-2 md:gap-6">
                 <div class="relative z-0 w-full mb-5 group">
@@ -44,12 +48,6 @@ <h1 class="mb-4 text-xl font-extrabold leading-none tracking-tight text-gray-900
                     <label for="purchase_value" class="absolute text-sm text-gray-500 dark:text-gray-400 duration-300 transform -translate-y-6 scale-75 top-3 -z-10 peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-6 peer-focus:text-blue-600 peer-focus:dark:text-blue-500">Purchase Value</label>
                 </div>
             </div>
-            <div class="grid md:grid-cols-2 md:gap-6">
-                <div class="relative z-0 w-full mb-5 group">
-                    <input type="text" name="ip_address" id="ip_address" class="block py-2.5 px-0 w-full text-sm text-white bg-transparent border-0 border-b-2 border-gray-300 appearance-none dark:border-gray-600 dark:focus:border-blue-500 focus:outline-none focus:ring-0 focus:border-blue-600 peer" placeholder=" " required />
-                    <label for="ip_address" class="absolute text-sm text-gray-500 dark:text-gray-400 duration-300 transform -translate-y-6 scale-75 top-3 -z-10 peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-6 peer-focus:text-blue-600 peer-focus:dark:text-blue-500">IP Address</label>
-                </div>
-            </div>
             <div class="grid md:grid-cols-2 md:gap-6">
                 <div class="relative z-0 w-full mb-5 group">
                     <input type="number" name="lower_bound_ip_address" id="lower_bound_ip_address" class="block py-2.5 px-0 w-full text-sm text-white bg-transparent border-0 border-b-2 border-gray-300 appearance-none dark:border-gray-600 dark:focus:border-blue-500 focus:outline-none focus:ring-0 focus:border-blue-600 peer" placeholder=" " required />
@@ -65,16 +63,16 @@ <h1 class="mb-4 text-xl font-extrabold leading-none tracking-tight text-gray-900
                     <input type="text" name="country" id="country" class="block py-2.5 px-0 w-full text-sm text-white bg-transparent border-0 border-b-2 border-gray-300 appearance-none dark:border-gray-600 dark:focus:border-blue-500 focus:outline-none focus:ring-0 focus:border-blue-600 peer" placeholder=" " required />
                     <label for="country" class="absolute text-sm text-gray-500 dark:text-gray-400 duration-300 transform -translate-y-6 scale-75 top-3 -z-10 peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-6 peer-focus:text-blue-600 peer-focus:dark:text-blue-500">Country</label>
                 </div>
-                <div class="relative z-0 w-full mb-5 group">
-                    <input type="datetime-local" name="signup_time" id="signup_time" class="block py-2.5 px-0 w-full text-sm text-white bg-transparent border-0 border-b-2 border-gray-300 appearance-none dark:border-gray-600 dark:focus:border-blue-500 focus:outline-none focus:ring-0 focus:border-blue-600 peer" placeholder=" " required />
-                    <label for="signup_time" class="absolute text-sm text-gray-500 dark:text-gray-400 duration-300 transform -translate-y-6 scale-75 top-3 -z-10 peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-6 peer-focus:text-blue-600 peer-focus:dark:text-blue-500">Signup Time</label>
-                </div>
             </div>
             <div class="grid md:grid-cols-2 md:gap-6">
                 <div class="relative z-0 w-full mb-5 group">
                     <input type="datetime-local" name="purchase_time" id="purchase_time" class="block py-2.5 px-0 w-full text-sm text-white bg-transparent border-0 border-b-2 border-gray-300 appearance-none dark:border-gray-600 dark:focus:border-blue-500 focus:outline-none focus:ring-0 focus:border-blue-600 peer" placeholder=" " required />
                     <label for="purchase_time" class="absolute text-sm text-gray-500 dark:text-gray-400 duration-300 transform -translate-y-6 scale-75 top-3 -z-10 peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-6 peer-focus:text-blue-600 peer-focus:dark:text-blue-500">Purchase Time</label>
                 </div>
+                <div class="relative z-0 w-full mb-5 group">
+                    <input type="datetime-local" name="signup_time" id="signup_time" class="block py-2.5 px-0 w-full text-sm text-white bg-transparent border-0 border-b-2 border-gray-300 appearance-none dark:border-gray-600 dark:focus:border-blue-500 focus:outline-none focus:ring-0 focus:border-blue-600 peer" placeholder=" " required />
+                    <label for="signup_time" class="absolute text-sm text-gray-500 dark:text-gray-400 duration-300 transform -translate-y-6 scale-75 top-3 -z-10 peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-6 peer-focus:text-blue-600 peer-focus:dark:text-blue-500">Signup Time</label>
+                </div>
             </div>
             <button type="submit" class="w-full py-2.5 px-4 text-sm font-medium text-center text-white bg-blue-600 rounded-lg hover:bg-blue-700 focus:outline-none focus:ring-4 focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">Submit</button>
         </form>