Add new files and update existing files

README.md

@@ -33,14 +33,18 @@ Follow these steps to get LinkShrtnr up and running:
    cd linkshrinker
    ```
 2. Set up your environment variables:
-  ```bash
-  cp .env.example .env
-  ```
-  Fill in the necessary information in the .env file.
+
+```bash
+cp .env.example .env
+```
+
+Fill in the necessary information in the .env file.
 3.Run the application
-  ```bash
-  cargo run
-  ``` 
+
+```bash
+cargo run
+```
+
 4. Navigate to http://localhost:3000 to view the application.
 
 ## Features 🌟
@@ -61,6 +65,4 @@ Follow these steps to get LinkShrtnr up and running:
 
 Contributions are welcome! Feel free to open issues, submit pull requests, or share your ideas.
 
-
 Enjoy shrinking your links with LinkShrtnr! 🚀
-

assets/custom.css

@@ -21,3 +21,12 @@
     transform: translateY(0);
   }
 }
+.htmx-indicator {
+  display: none;
+}
+.htmx-request .htmx-indicator {
+  display: inline;
+}
+.htmx-request.htmx-indicator {
+  display: inline;
+}

assets/main.css

@@ -544,6 +544,22 @@ video {
   --tw-backdrop-sepia:  ;
 }
 
+.sticky {
+  position: sticky;
+}
+
+.top-0 {
+  top: 0px;
+}
+
+.z-10 {
+  z-index: 10;
+}
+
+.m-20 {
+  margin: 5rem;
+}
+
 .mb-4 {
   margin-bottom: 1rem;
 }
@@ -552,6 +568,10 @@ video {
   margin-top: 1rem;
 }
 
+.mt-8 {
+  margin-top: 2rem;
+}
+
 .block {
   display: block;
 }
@@ -564,30 +584,34 @@ video {
   height: 4rem;
 }
 
-.min-h-screen {
-  min-height: 100vh;
+.h-64 {
+  height: 16rem;
 }
 
-.w-full {
-  width: 100%;
+.min-h-screen {
+  min-height: 100vh;
 }
 
-.w-56 {
-  width: 14rem;
+.w-1\/2 {
+  width: 50%;
 }
 
-.w-96 {
-  width: 24rem;
+.w-11\/12 {
+  width: 91.666667%;
 }
 
-.w-1\/2 {
-  width: 50%;
+.w-full {
+  width: 100%;
 }
 
 .max-w-4xl {
   max-width: 56rem;
 }
 
+.max-w-7xl {
+  max-width: 80rem;
+}
+
 .flex-1 {
   flex: 1 1 0%;
 }
@@ -612,8 +636,8 @@ video {
   justify-content: space-between;
 }
 
-.gap-20 {
-  gap: 5rem;
+.gap-3 {
+  gap: 0.75rem;
 }
 
 .gap-6 {
@@ -624,21 +648,22 @@ video {
   gap: 1.25rem;
 }
 
-.gap-3 {
-  gap: 0.75rem;
-}
-
 .rounded {
   border-radius: 0.25rem;
 }
 
+.rounded-full {
+  border-radius: 9999px;
+}
+
 .rounded-b {
   border-bottom-right-radius: 0.25rem;
   border-bottom-left-radius: 0.25rem;
 }
 
-.rounded-tr {
-  border-top-right-radius: 0.25rem;
+.rounded-t-lg {
+  border-top-left-radius: 0.5rem;
+  border-top-right-radius: 0.5rem;
 }
 
 .border {
@@ -650,22 +675,42 @@ video {
   border-right-width: 1px;
 }
 
-.border-t {
-  border-top-width: 1px;
-}
-
 .border-b {
   border-bottom-width: 1px;
 }
 
+.border-t {
+  border-top-width: 1px;
+}
+
 .border-\[\#d3d3d3\] {
   --tw-border-opacity: 1;
   border-color: rgb(211 211 211 / var(--tw-border-opacity));
 }
 
-.bg-\[\#FFDC61\] {
+.bg-\[\#f5f6f7\] {
+  --tw-bg-opacity: 1;
+  background-color: rgb(245 246 247 / var(--tw-bg-opacity));
+}
+
+.bg-black {
+  --tw-bg-opacity: 1;
+  background-color: rgb(0 0 0 / var(--tw-bg-opacity));
+}
+
+.bg-white {
+  --tw-bg-opacity: 1;
+  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
+}
+
+.bg-slate-900 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(15 23 42 / var(--tw-bg-opacity));
+}
+
+.bg-\[rgb\(234\2c 198\2c 67\)\] {
   --tw-bg-opacity: 1;
-  background-color: rgb(255 220 97 / var(--tw-bg-opacity));
+  background-color: rgb(234 198 67 / var(--tw-bg-opacity));
 }
 
 .fill-black {
@@ -676,14 +721,14 @@ video {
   padding: 0.75rem;
 }
 
-.p-8 {
-  padding: 2rem;
-}
-
 .p-5 {
   padding: 1.25rem;
 }
 
+.p-8 {
+  padding: 2rem;
+}
+
 .px-3 {
   padding-left: 0.75rem;
   padding-right: 0.75rem;
@@ -694,6 +739,11 @@ video {
   padding-bottom: 0.75rem;
 }
 
+.px-8 {
+  padding-left: 2rem;
+  padding-right: 2rem;
+}
+
 .text-center {
   text-align: center;
 }
@@ -703,6 +753,11 @@ video {
   line-height: 2rem;
 }
 
+.text-3xl {
+  font-size: 1.875rem;
+  line-height: 2.25rem;
+}
+
 .text-6xl {
   font-size: 3.75rem;
   line-height: 1;
@@ -713,6 +768,11 @@ video {
   line-height: 1.25rem;
 }
 
+.text-xl {
+  font-size: 1.25rem;
+  line-height: 1.75rem;
+}
+
 .text-xs {
   font-size: 0.75rem;
   line-height: 1rem;
@@ -726,8 +786,13 @@ video {
   font-weight: 300;
 }
 
-.font-black {
-  font-weight: 900;
+.font-medium {
+  font-weight: 500;
+}
+
+.text-\[\#2a2e30\] {
+  --tw-text-opacity: 1;
+  color: rgb(42 46 48 / var(--tw-text-opacity));
 }
 
 .text-\[rgb\(234\2c 198\2c 67\)\] {

migrations/0002_Create_LinkClicks_Table.sql

@@ -0,0 +1,13 @@
+CREATE TABLE LinkClicks (
+    ID SERIAL PRIMARY KEY,
+    LinkID INTEGER REFERENCES "Links"(id) ON DELETE CASCADE,
+    ClickTimestamp TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
+    IPAddress VARCHAR(255),
+    UserAgent TEXT,
+    Referrer TEXT,
+    DeviceInfo TEXT,
+    GeographicLocation VARCHAR(255),
+    UserID INTEGER REFERENCES "User"(id) ON DELETE SET NULL,
+    ClickCount INTEGER
+);
+;

src/routes/link_routes.rs

@@ -5,14 +5,12 @@ use rand::Rng;
 use serde::Deserialize;
 use sqlx::{Error, PgPool};
 use tracing::info;
+
 #[derive(sqlx::FromRow, Debug, Deserialize)] // Add this line
 struct LinkRequest {
     original_url: String,
     path: String,
 }
-struct LinkResponse {
-    link: String,
-}
 
 pub fn get_routes() -> Router {
     Router::new().route("/", post(add_link))

src/routes/web_routes.rs

@@ -21,13 +21,13 @@ async fn get_another_page() -> impl IntoResponse {
 struct AnotherPageTemplate;
 
 async fn get_index() -> impl IntoResponse {
-    let template = HelloTemplate {};
+    let template = IndexTemplate{};
     HtmlTemplate(template)
 }
 
 #[derive(Template)]
 #[template(path = "pages/index.html")]
-struct HelloTemplate;
+struct IndexTemplate;
 struct HtmlTemplate<T>(T);
 
 impl<T> IntoResponse for HtmlTemplate<T>

tailwind.config.js

@@ -1,12 +1,12 @@
-const { fontFamily } = require('tailwindcss/defaultTheme');
+const { fontFamily } = require("tailwindcss/defaultTheme");
 /** @type {import('tailwindcss').Config} */
 module.exports = {
-    content: ['./templates/**/*.html'],
-    theme: {
-        extend: {
-            fontFamily: {
-                sans: ['Inter var', ...fontFamily.sans],
-            },
-        },
+  content: ["./templates/**/*.html"],
+  theme: {
+    extend: {
+      fontFamily: {
+        sans: ["Inter var", ...fontFamily.sans],
+      },
     },
+  },
 };

templates/components/companies.html

@@ -0,0 +1,5 @@
+<div class="flex flex-col items-center justify-center bg-white h-64 w-full">
+  <h2 class="text-3xl font-bold text-center">
+    Trusted by the world's best brands
+  </h2>
+</div>

templates/components/footer.html

@@ -0,0 +1,15 @@
+<footer
+  class="flex text-black bg-white justify-center w-full p-8 text-xs text-center border-t"
+>
+  <p>
+    Made by
+    <a
+      href="https://twitter.com/ikurotime"
+      target="_blank"
+      class="font-bold hover:underline"
+      rel="noreferrer"
+    >
+      kuro
+    </a>
+  </p>
+</footer>

templates/components/landing_cta.html

@@ -0,0 +1,4 @@
+<div class="flex flex-col justify-center items-center w-full h-64 bg-slate-900">
+    <h2 class="text-3xl text-white font-bold">Start sending better links today.</h2>
+    <a href="/register" class="bg-[rgb(234,198,67)] text-black font-bold py-3 px-8 rounded-full mt-8">Get Started</a>
+</div>

templates/components/login_buttons.html

@@ -0,0 +1,5 @@
+<div class="flex gap-5">
+    <a href="/login" class="text-black font-medium py-3 px-8 rounded-full">Login</a>
+    <a href="/register" class="bg-[rgb(234,198,67)] text-black font-bold py-3 px-8 rounded-full">Get Started</a>
+
+</div>