added hero page and home page template
This commit is contained in:
jostheta
parent
2ed6574915
commit
d987f27f3c
|
|
@ -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' => '',
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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');
|
||||
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -34,7 +34,7 @@ class Form_model extends CI_Model {
|
|||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
public function get_all_user_forms() {
|
||||
$user_id = $this->session->userdata('user_id');
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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 -->
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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; ?>
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
Binary file not shown.
|
After Width: | Height: | Size: 34 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.3 KiB |
Binary file not shown.
|
|
@ -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
|
||||
|
|
|
|||
Loading…
Reference in New Issue