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(
|
$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' => '',
|
||||||
|
|
|
||||||
|
|
@ -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;
|
||||||
|
|
|
||||||
|
|
@ -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');
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -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>
|
||||||
|
|
|
||||||
|
|
@ -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 -->
|
||||||
|
|
|
||||||
|
|
@ -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>
|
<main class="max-w-8xl mx-40 py-6 sm:px-6 lg:px-8">
|
||||||
<p>Welcome to the Gforms Application</p>
|
<!-- 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>
|
||||||
|
<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 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>
|
||||||
|
|
|
||||||
|
|
@ -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;
|
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 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
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue