added hero page and home page template

application/config/database.php

@@ -76,8 +76,8 @@ $query_builder = TRUE;
 $db['default'] = array(
 	'dsn'	=> '',
 	'hostname' => 'localhost',
-	'username' => 'root',
+	'username' => 'jostheta',
-	'password' => '',
+	'password' => 'Pa$$w0rd',
 	'database' => 'gforms',
 	'dbdriver' => 'mysqli',
 	'dbprefix' => '',

application/config/routes.php

@@ -16,6 +16,7 @@ $route['responses/index/(:num)'] = 'Responses/index/$1';
 
 
 //Routes of the pages controller
+$route['hero'] = 'Pages/hero';
 $route['default_controller'] = 'Pages/view';
 $route['404_override'] = '';
 $route['translate_uri_dashes'] = FALSE;

application/controllers/Forms.php

@@ -20,19 +20,19 @@ class Forms extends CI_Controller
         }
 
 
-    public function submit_form() {
+        public function submit_form() {
-        $formData = $this->input->post('formData');
+            $formData = $this->input->post('formData');
-        $decodedData = json_decode($formData, true);
+            $decodedData = json_decode($formData, true);
         
         // Process the form data here
         // Example: Save the form data to the database
                 
         $this->load->model('Form_model');
         
-        $this->Form_model->save_form_data($decodedData);
+            $this->Form_model->save_form_data($decodedData);
         
-        echo json_encode(['status' => 'success', 'message' => 'Form data submitted successfully']);
+            echo json_encode(['status' => 'success', 'message' => 'Form data submitted successfully']);
-    }
+        }
         
     public function my_forms() {
 

application/controllers/Pages.php

@@ -12,10 +12,19 @@ class Pages extends CI_Controller {
         //storing the title of the page
         $data['title'] = ucfirst($page);
 
-        $this->load->view('templates/header');
+        $this->load->view('templates/header_home');
         $this->load->view('pages/'.$page, $data);
         $this->load->view('templates/footer');
     }
 
+    public function hero()
+    {
+        //storing the title of the page
+        
+        $this->load->view('pages/hero');
+        
+    }
+
+
 }
 

application/models/Form_model.php

@@ -8,33 +8,33 @@ class Form_model extends CI_Model {
 
         $user_id = $this->session->userdata('user_id');
     
-    // Save the form data to the database
+        // Save the form data to the database
         $this->db->insert('forms', [
-        'title' => $formData['title'],
+            'title' => $formData['title'],
-        'description' => $formData['description'],
+            'description' => $formData['description'],
-        'user_id' => $user_id
+            'user_id' => $user_id
-         ]);
+        ]);
 
         $formId = $this->db->insert_id();
     
         foreach ($formData['questions'] as $question) {
-        $this->db->insert('questions', [
+            $this->db->insert('questions', [
-            'form_id' => $formId,
+                'form_id' => $formId,
-            'question_text' => $question['question'],
+                'question_text' => $question['question'],
-            'question_type' => $question['type']
+                'question_type' => $question['type']
-        ]);
+            ]);
-        $questionId = $this->db->insert_id();
+            $questionId = $this->db->insert_id();
     
-        if ($question['type'] !== 'paragraph') {
+            if ($question['type'] !== 'paragraph') {
-            foreach ($question['options'] as $option) {
+                foreach ($question['options'] as $option) {
-                $this->db->insert('options', [
+                    $this->db->insert('options', [
-                    'question_id' => $questionId,
+                        'question_id' => $questionId,
-                    'option_text' => $option
+                        'option_text' => $option
-                ]);
+                    ]);
+                }
             }
         }
-        }
+    }
-}
     
     public function get_all_user_forms() {
     $user_id = $this->session->userdata('user_id');
@@ -143,27 +143,27 @@ class Form_model extends CI_Model {
         $response_id = $this->db->insert_id();
         
         // Insert each answer
-        foreach ($responses as $question_id => $answer) {
+            foreach ($responses as $question_id => $answer) {
-            if (is_array($answer)) {
+                if (is_array($answer)) {
-                foreach ($answer as $answer_text) {
+                    foreach ($answer as $answer_text) {
+                        $answer_data = [
+                            'response_id' => $response_id,
+                            'question_id' => $question_id,
+                            'answer_text' => $answer_text,
+                            'created_at' => date('Y-m-d H:i:s'),
+                        ];
+                        $this->db->insert('response_answers', $answer_data);
+                    }
+                } else {
                     $answer_data = [
                         'response_id' => $response_id,
                         'question_id' => $question_id,
-                        'answer_text' => $answer_text,
+                        'answer_text' => $answer,
                         'created_at' => date('Y-m-d H:i:s'),
                     ];
                     $this->db->insert('response_answers', $answer_data);
                 }
-            } else {
-                $answer_data = [
-                    'response_id' => $response_id,
-                    'question_id' => $question_id,
-                    'answer_text' => $answer,
-                    'created_at' => date('Y-m-d H:i:s'),
-                ];
-                $this->db->insert('response_answers', $answer_data);
             }
-        }
         
         $this->db->trans_complete();
         

application/views/forms/mydrafts.php

@@ -15,7 +15,7 @@
                     <?php if ($form->is_published == 0) : ?>
                         <tr>
                             <td>
-                                <a href="<?= base_url() ?>forms/preview/<?=$form->form_id?>">
+                                <a href="<?= base_url() ?>forms/view_form/<?=$form->form_id?>">
                                 <?= htmlspecialchars($form->title ? $form->title : $form->form_id, ENT_QUOTES, 'UTF-8') ?>
                                 </a>
                             </td>

application/views/forms/view_form.php

@@ -66,9 +66,9 @@
             <button id="add-question">
                 <img src="<?= base_url() ?>assets/images/add.png" width="20px" height="20px" alt="add button">
             </button>
-            <button id="update-form" data-form_id="<?= $form->form_id; ?>" style="color: #fff; background-color: #1a73e8; font-weight: 500; padding: 10px; border: none;">Update</button>
         </div>
     </div>
+    <button class="update-form-button"id="update-form" data-form_id="<?= $form->form_id; ?>">Update</button>
 </div>
 
 <!-- Option Template -->

application/views/pages/hero.php

@@ -0,0 +1,61 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Hero Page</title>
+  <link rel="stylesheet" href="<?= base_url() ?>assets/css/hero-styles.css"> <!-- Link to your new CSS file -->
+</head>
+<body >
+
+  <!-- Your Navbar code -->
+  <nav class="navbar-custom">
+    <div class="container">
+      <div class="navbar-header">
+        <a class="navbar-brand" href="<?= base_url(); ?>hero">Gforms</a>
+      </div>
+      <div class="navbar-links">
+        <ul class="nav-left">
+          <?php if($this->session->userdata('logged_in')) : ?>
+            <li><a href="<?= base_url(); ?>home">Home</a></li>
+            <li><a href="<?= base_url(); ?>my_forms">My Forms</a></li>
+            <li><a href="<?= base_url(); ?>my_drafts">My Drafts</a></li>
+            <li><a href="<?= base_url(); ?>responses">Responses</a></li>
+          <?php endif; ?>
+        </ul>
+        <ul class="nav-right">
+          <?php if(!$this->session->userdata('logged_in')) : ?>
+            <li><a href="<?php echo base_url(); ?>users/login">Login</a></li>
+            <li><a href="<?php echo base_url(); ?>users/register">Register</a></li>
+          <?php endif; ?>
+          <?php if($this->session->userdata('logged_in')) : ?>
+            <li><a href="<?php echo base_url(); ?>create">Create Form</a></li>
+            <li><a href="<?php echo base_url(); ?>users/logout">Logout</a></li>
+          <?php endif; ?>
+        </ul>
+      </div>
+    </div>
+  </nav>
+
+
+  <header>
+    <section class="hero">
+      <h1 class="hero-message">
+        <div>Simple yet Functional</div>
+        <div>Google Forms</div>
+      </h1>
+      <p class="under-hero">Start creating your forms with Google Forms clone,create,edit and publish your forms today!</p>
+      <div class="button-list">
+        <button class="primary">Login</button>
+        <button>Register</button>
+      </div>
+    </section>
+    <picture class="promo-art">
+      <img src="<?= base_url() ?>assets/images/analysis.png" height="800" width="800" alt="pie charts">
+    </picture>
+  </header>
+
+  <!-- Your other content -->
+
+</body>
+</html>

application/views/pages/home.php

@@ -1,4 +1,114 @@
-<div style="margin: 0 10%;">
+
-    <h2><?= $title ?></h2>
+    <main class="max-w-8xl mx-40 py-6 sm:px-6 lg:px-8">
-    <p>Welcome to the Gforms Application</p>
+    <!-- Overview Section -->
-</div>
+    <section class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-6">
+      <div class="bg-white p-6 rounded-lg shadow-lg">
+        <div class="text-gray-500">Total Forms Created</div>
+        <div class="text-2xl font-bold">50</div>
+      </div>
+      <div class="bg-white p-6 rounded-lg shadow-lg">
+        <div class="text-gray-500">Total Forms Published</div>
+        <div class="text-2xl font-bold">35</div>
+      </div>
+      <div class="bg-white p-6 rounded-lg shadow-lg">
+        <div class="text-gray-500">Total Responses Received</div>
+        <div class="text-2xl font-bold">1500</div>
+      </div>
+    </section>
+
+    <!-- Forms Summary Section -->
+    <section class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
+      <!-- Top 5 Most Active Forms -->
+      <div class="bg-white p-6 rounded-lg shadow-lg">
+        <div class="text-lg font-bold mb-4">Top 5 Most Active Forms</div>
+        <table class="min-w-full bg-white">
+          <thead>
+            <tr>
+              <th class="py-2">Form Title</th>
+              <th class="py-2">Responses</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr>
+              <td class="py-2">Form A</td>
+              <td class="py-2">500</td>
+            </tr>
+            <tr class="bg-gray-100">
+              <td class="py-2">Form B</td>
+              <td class="py-2">400</td>
+            </tr>
+            <tr>
+              <td class="py-2">Form C</td>
+              <td class="py-2">300</td>
+            </tr>
+            <tr class="bg-gray-100">
+              <td class="py-2">Form D</td>
+              <td class="py-2">200</td>
+            </tr>
+            <tr>
+              <td class="py-2">Form E</td>
+              <td class="py-2">100</td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+
+      <!-- Recent Forms -->
+      <div class="bg-white p-6 rounded-lg shadow-lg">
+        <div class="text-lg font-bold mb-4">Recent Forms</div>
+        <table class="min-w-full bg-white">
+          <thead>
+            <tr>
+              <th class="py-2">Form Title</th>
+              <th class="py-2">Date Created</th>
+              <th class="py-2">Status</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr>
+              <td class="py-2">Form X</td>
+              <td class="py-2">2024-07-10</td>
+              <td class="py-2">Draft</td>
+            </tr>
+            <tr class="bg-gray-100">
+              <td class="py-2">Form Y</td>
+              <td class="py-2">2024-07-09</td>
+              <td class="py-2">Published</td>
+            </tr>
+            <tr>
+              <td class="py-2">Form Z</td>
+              <td class="py-2">2024-07-08</td>
+              <td class="py-2">Published</td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </section>
+
+    <!-- Responses Summary Section -->
+    <section class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
+      <!-- Response Trends -->
+      <div class="bg-white p-6 rounded-lg shadow-lg">
+        <div class="text-lg font-bold mb-4">Response Trends</div>
+        <div class="h-40 bg-gray-200 rounded-lg"></div> <!-- Placeholder for Line Chart -->
+      </div>
+
+      <!-- Average Responses per Form -->
+      <div class="bg-white p-6 rounded-lg shadow-lg">
+        <div class="text-lg font-bold mb-4">Average Responses per Form</div>
+        <div class="text-2xl font-bold">30</div>
+      </div>
+    </section>
+
+    <!-- User Engagement Section -->
+    <section class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
+      <div class="bg-white p-6 rounded-lg shadow-lg">
+        <div class="text-gray-500">Active Users</div>
+        <div class="text-2xl font-bold">100</div>
+      </div>
+      <div class="bg-white p-6 rounded-lg shadow-lg">
+        <div class="text-gray-500">New Users</div>
+        <div class="text-2xl font-bold">20</div>
+      </div>
+    </section>
+  </main>

application/views/templates/header.php

@@ -4,6 +4,7 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Gforms</title>
+   
     <link rel="stylesheet" href="<?= base_url() ?>assets/css/bootstrap.min.css">
     <link rel= "stylesheet" href = "<?= base_url() ?>assets/css/style.css">
 </head>
@@ -11,12 +12,12 @@
     <nav class = "navbar navbar-inverse" style="background-color:rgb(103, 58, 183); margin-bottom:0px;">
         <div class = "container">
             <div id = "nav-header" class = "navbar-header">
-                <a  class = "navbar-brand" href="<?= base_url(); ?>">Gforms</a>
+                <a  class = "navbar-brand" href="<?= base_url(); ?>hero">Gforms</a>
             </div>
             <div id = "navbar">
                 <ul class = "nav navbar-nav">
-                    <li><a href = "<?= base_url(); ?>home">Home</a></li>
                 <?php if($this->session->userdata('logged_in')) : ?>
+                    <li><a href = "<?= base_url(); ?>home">Home</a></li>
                     <li><a href="<?= base_url(); ?>my_forms">My Forms</a></li>
                     <li><a href="<?= base_url(); ?>my_drafts">My Drafts</a></li>
                     <li><a href="<?=base_url(); ?>responses">Responses</a></li>

application/views/templates/header_home.php

@@ -0,0 +1,57 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Gforms</title>
+   
+    <link rel="stylesheet" href="<?= base_url() ?>assets/css/bootstrap.min.css">
+    <link rel="stylesheet" href="<?= base_url()?>assets/css/tailwind.min.css">
+    <link rel= "stylesheet" href = "<?= base_url() ?>assets/css/style.css">
+</head>
+<body style="background-color:white;"><!--#f0ebf8-->
+    <nav class = "navbar navbar-inverse" style="background-color:rgb(103, 58, 183); margin-bottom:0px;">
+        <div class = "container">
+            <div id = "nav-header" class = "navbar-header">
+                <a  class = "navbar-brand" href="<?= base_url(); ?>hero">Gforms</a>
+            </div>
+            <div id = "navbar">
+                <ul class = "nav navbar-nav">
+                    <li><a href = "<?= base_url(); ?>home">Home</a></li>
+                <?php if($this->session->userdata('logged_in')) : ?>
+                    <li><a href="<?= base_url(); ?>my_forms">My Forms</a></li>
+                    <li><a href="<?= base_url(); ?>my_drafts">My Drafts</a></li>
+                    <li><a href="<?=base_url(); ?>responses">Responses</a></li>
+                <?php endif; ?>
+                </ul>
+                <ul class = "nav navbar-nav navbar-right">
+                <?php if(!$this->session->userdata('logged_in')) : ?>
+                    <li><a href="<?php echo base_url(); ?>users/login">Login</a></li>
+                    <li><a href="<?php echo base_url(); ?>users/register">Register</a></li>
+                <?php endif; ?>
+                <?php if($this->session->userdata('logged_in')) : ?>
+                    <li><a href="<?php echo base_url(); ?>create">Create Form</a></li>
+                    <li><a href="<?php echo base_url(); ?>users/logout">Logout</a></li>
+                <?php endif; ?>
+                </ul>
+            </div>
+        </div>
+    </nav>
+
+  <div class = "layout"  >  
+
+    <?php if($this->session->flashdata('user_registered')): ?>
+            <?php echo '<p class="alert alert-success">'.$this->session->flashdata('user_registered').'</p>'; ?>
+    <?php endif; ?>
+
+    <?php if($this->session->flashdata('login_failed')): ?>
+            <?php echo '<p class="alert alert-danger">'.$this->session->flashdata('login_failed').'</p>'; ?>
+    <?php endif; ?>
+    
+    <?php if($this->session->flashdata('user_loggedin')): ?>
+            <?php echo '<p class="alert alert-success">'.$this->session->flashdata('user_loggedin').'</p>'; ?>
+    <?php endif; ?>
+    
+    <?php if($this->session->flashdata('user_loggedout')): ?>
+            <?php echo '<p class="alert alert-danger">'.$this->session->flashdata('user_loggedout').'</p>'; ?>
+    <?php endif; ?>

assets/css/hero-styles.css

@@ -0,0 +1,121 @@
+@import "https://unpkg.com/open-props"; 
+@import "https://unpkg.com/open-props/normalize.min.css"; 
+
+body {
+  display: flex;
+  flex-direction: column;
+  font-family: 'Open Sans', sans-serif; /* Ensure a clean, modern font is used */
+}
+
+.navbar-custom {
+  background-color: rgb(103, 58, 183);
+  padding: var(--size-3);
+}
+
+.navbar-custom .container {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.navbar-header .navbar-brand {
+  color: white;
+  font-size: 1.5rem;
+  text-decoration: none;
+}
+
+.navbar-links {
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
+}
+
+.nav-left, .nav-right {
+  list-style: none;
+  display: flex;
+  gap: var(--size-4);
+}
+
+.nav-left li a, .nav-right li a {
+  color: white;
+  text-decoration: none;
+  font-size: 1rem;
+}
+
+.nav-right li a {
+  margin-left: var(--size-4);
+}
+
+.nav-left li a:hover, .nav-right li a:hover {
+  text-decoration: underline;
+}
+
+header {
+  display: grid;
+  align-items: center;
+  grid-template-columns: 1fr 1fr;
+  background: var(--grape-0);
+  padding: var(--size-10);
+}
+
+.hero {
+  padding: var(--size-10);
+  display: grid;
+  gap: var(--size-5);
+}
+
+.hero-message {
+  display: grid;
+  grid-template-columns: max-content;
+  color: var(--gray-9);
+  line-height: var(--font-lineheight-0);
+  font-size: 3rem; /* Increase the font size */
+}
+
+.hero-message > div:last-child {
+  color: var(--indigo-7);
+}
+
+.under-hero {
+  color: var(--gray-7);
+  font-size: 1.5rem; /* Increase the font size */
+  margin-block-end: var(--size-3);
+}
+
+.button-list {
+  display: flex;
+  gap: var(--size-3);
+}
+
+button {
+  background: white;
+  color: var(--indigo-8);
+  font-size: 1.2rem; /* Increase the font size */
+  padding-inline: var(--size-8);
+  padding-block: var(--size-3);
+  border-radius: var(--radius-2);
+  box-shadow: var(--shadow-2);
+  cursor: pointer;
+}
+
+button.primary {
+  background: var(--indigo-8);
+  text-shadow: 0 1px 0 var(--indigo-9);
+  color: white;
+}
+
+button.primary:hover {
+  background: var(--indigo-7);
+}
+
+.promo-art {
+  align-self: stretch;
+  display: flex;
+  justify-content: center;
+}
+
+.promo-art > img {
+  block-size: 100%;
+  object-fit: cover;
+  max-width: 800px;
+}

assets/css/style.css

@@ -321,6 +321,19 @@ tr:nth-child(even) {
   border-left: 6px solid #1a73e8;
 }
 
+.update-form-button{
+  color: #fff; 
+  background-color: #7349bd; 
+  font-family:'Roboto';
+  font-weight: 500;
+  padding: 10px;
+  border: none;
+  width: 96px;
+  border-radius: 5px;
+  text-align: center;
+  margin-left:365px;
+  margin-top: 10px;
+}
 
 
 

assets/js/script.js

@@ -98,6 +98,7 @@ $(document).ready(function() {
 
     // Function to set the active question and scroll the sidebar
     function setActiveQuestion(questionBox) {
+        
         // Remove active class from all question boxes
         $('.question-box').removeClass('active');
 
@@ -106,9 +107,15 @@ $(document).ready(function() {
 
         // Scroll sidebar to the active question
         var offset = questionBox.offset().top - $('.sidebar').offset().top;
+        console.log(questionBox.offset().top,'question');
+        console.log($('.sidebar').offset().top,'sidebar');
+        console.log(offset,'offset');
+        console.log(offset + $('.sidebar').scrollTop(),'offset plus sidebar');
+        
         $('.sidebar').animate({
             scrollTop: offset + $('.sidebar').scrollTop()
         }, 500);
+
     }
 
     // Add click event listener to all question boxes to set active question