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( $db['default'] = array(
'dsn' => '', 'dsn' => '',
'hostname' => 'localhost', 'hostname' => 'localhost',
'username' => 'root', 'username' => 'jostheta',
'password' => '', 'password' => 'Pa$$w0rd',
'database' => 'gforms', 'database' => 'gforms',
'dbdriver' => 'mysqli', 'dbdriver' => 'mysqli',
'dbprefix' => '', 'dbprefix' => '',

View File

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

View File

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

View File

@ -34,7 +34,7 @@ class Form_model extends CI_Model {
} }
} }
} }
} }
public function get_all_user_forms() { public function get_all_user_forms() {
$user_id = $this->session->userdata('user_id'); $user_id = $this->session->userdata('user_id');

View File

@ -15,7 +15,7 @@
<?php if ($form->is_published == 0) : ?> <?php if ($form->is_published == 0) : ?>
<tr> <tr>
<td> <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') ?> <?= htmlspecialchars($form->title ? $form->title : $form->form_id, ENT_QUOTES, 'UTF-8') ?>
</a> </a>
</td> </td>

View File

@ -66,9 +66,9 @@
<button id="add-question"> <button id="add-question">
<img src="<?= base_url() ?>assets/images/add.png" width="20px" height="20px" alt="add button"> <img src="<?= base_url() ?>assets/images/add.png" width="20px" height="20px" alt="add button">
</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>
</div> </div>
<button class="update-form-button"id="update-form" data-form_id="<?= $form->form_id; ?>">Update</button>
</div> </div>
<!-- Option Template --> <!-- 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> <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>

View File

@ -4,6 +4,7 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Gforms</title> <title>Gforms</title>
<link rel="stylesheet" href="<?= base_url() ?>assets/css/bootstrap.min.css"> <link rel="stylesheet" href="<?= base_url() ?>assets/css/bootstrap.min.css">
<link rel= "stylesheet" href = "<?= base_url() ?>assets/css/style.css"> <link rel= "stylesheet" href = "<?= base_url() ?>assets/css/style.css">
</head> </head>
@ -11,12 +12,12 @@
<nav class = "navbar navbar-inverse" style="background-color:rgb(103, 58, 183); margin-bottom:0px;"> <nav class = "navbar navbar-inverse" style="background-color:rgb(103, 58, 183); margin-bottom:0px;">
<div class = "container"> <div class = "container">
<div id = "nav-header" class = "navbar-header"> <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>
<div id = "navbar"> <div id = "navbar">
<ul class = "nav navbar-nav"> <ul class = "nav navbar-nav">
<li><a href = "<?= base_url(); ?>home">Home</a></li>
<?php if($this->session->userdata('logged_in')) : ?> <?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_forms">My Forms</a></li>
<li><a href="<?= base_url(); ?>my_drafts">My Drafts</a></li> <li><a href="<?= base_url(); ?>my_drafts">My Drafts</a></li>
<li><a href="<?=base_url(); ?>responses">Responses</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; 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 to set the active question and scroll the sidebar
function setActiveQuestion(questionBox) { function setActiveQuestion(questionBox) {
// Remove active class from all question boxes // Remove active class from all question boxes
$('.question-box').removeClass('active'); $('.question-box').removeClass('active');
@ -106,9 +107,15 @@ $(document).ready(function() {
// Scroll sidebar to the active question // Scroll sidebar to the active question
var offset = questionBox.offset().top - $('.sidebar').offset().top; 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({ $('.sidebar').animate({
scrollTop: offset + $('.sidebar').scrollTop() scrollTop: offset + $('.sidebar').scrollTop()
}, 500); }, 500);
} }
// Add click event listener to all question boxes to set active question // Add click event listener to all question boxes to set active question