added hero page and home page template

This commit is contained in:
jostheta 2024-07-19 17:13:09 +05:30
parent 2ed6574915
commit d987f27f3c
18 changed files with 439 additions and 58 deletions

View File

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

View File

@ -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;

View File

@ -20,20 +20,20 @@ class Forms extends CI_Controller
}
public function submit_form() {
$formData = $this->input->post('formData');
$decodedData = json_decode($formData, true);
public function submit_form() {
$formData = $this->input->post('formData');
$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);
echo json_encode(['status' => 'success', 'message' => 'Form data submitted successfully']);
}
$this->Form_model->save_form_data($decodedData);
echo json_encode(['status' => 'success', 'message' => 'Form data submitted successfully']);
}
public function my_forms() {
$this->load->model('Form_model');

View File

@ -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');
}
}

View File

@ -7,35 +7,35 @@ class Form_model extends CI_Model {
public function save_form_data($formData) {
$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'],
'description' => $formData['description'],
'user_id' => $user_id
]);
'title' => $formData['title'],
'description' => $formData['description'],
'user_id' => $user_id
]);
$formId = $this->db->insert_id();
foreach ($formData['questions'] as $question) {
$this->db->insert('questions', [
'form_id' => $formId,
'question_text' => $question['question'],
'question_type' => $question['type']
]);
$questionId = $this->db->insert_id();
if ($question['type'] !== 'paragraph') {
foreach ($question['options'] as $option) {
$this->db->insert('options', [
'question_id' => $questionId,
'option_text' => $option
]);
$this->db->insert('questions', [
'form_id' => $formId,
'question_text' => $question['question'],
'question_type' => $question['type']
]);
$questionId = $this->db->insert_id();
if ($question['type'] !== 'paragraph') {
foreach ($question['options'] as $option) {
$this->db->insert('options', [
'question_id' => $questionId,
'option_text' => $option
]);
}
}
}
}
}
}
public function get_all_user_forms() {
$user_id = $this->session->userdata('user_id');
$this->db->where('user_id', $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) {
if (is_array($answer)) {
foreach ($answer as $answer_text) {
foreach ($responses as $question_id => $answer) {
if (is_array($answer)) {
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();

View File

@ -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>

View File

@ -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 -->

View File

@ -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>

View File

@ -1,4 +1,114 @@
<div style="margin: 0 10%;">
<h2><?= $title ?></h2>
<p>Welcome to the Gforms Application</p>
</div>
<main class="max-w-8xl mx-40 py-6 sm:px-6 lg:px-8">
<!-- Overview Section -->
<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>

View File

@ -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>

View File

@ -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; ?>

121
assets/css/hero-styles.css Normal file
View File

@ -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;
}

View File

@ -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;
}

1
assets/css/tailwind.min.css vendored Normal file

File diff suppressed because one or more lines are too long

BIN
assets/images/analysis.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 34 KiB

BIN
assets/images/forms.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.3 KiB

BIN
assets/js/.script.js.swp Normal file

Binary file not shown.

View File

@ -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
@ -224,7 +231,7 @@ $(document).ready(function() {
$(document).ready(function() {
$('#response-form').on('submit', function(e) {
e.preventDefault();
$.ajax({
url: $(this).attr('action'),
type: $(this).attr('method'),