/home/awneajlw/public_html/codestechvista.com/welcome.php
<?php
/**
* Welcome Page - Landing Page with Login/Signup Options
* This page displays the welcome popup with multi-tasking person illustration
* Background shows home page content (shop info and action buttons)
* Features: Green popup overlay, action buttons, responsive design
*/
// Disable all warnings and notices for clean background display
error_reporting(0);
// Start output buffering to prevent header warnings
if (ob_get_level() == 0) ob_start();
// Start session safely
if (session_status() == PHP_SESSION_NONE) {
@session_start();
}
// Include required files with error suppression
@include_once 'includes/auth.php';
@include_once 'config/database.php';
// Static shop data for background display (always works)
$shop_data = [
'shop_name' => 'OPTI SLIP STORE',
'address' => '95176 Gloria Ranch, Pollichworth',
'whatsapp' => '+923325122739',
'facebook' => 'optislip',
'instagram' => 'optislip',
'website' => 'optislip.com'
];
// Authentication check with full error suppression
if (function_exists('isLoggedIn') && @isLoggedIn()) {
@header('Location: home.php');
exit();
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Welcome - OPTI SLIP</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Inter', sans-serif;
background: #f5f5f5;
min-height: 100vh;
position: relative;
overflow-x: hidden;
overflow-y: auto;
}
/* Home page background elements */
.background-content {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 1;
z-index: 1;
text-align: center;
}
.top-nav {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px 30px;
background: #e5e7eb;
color: #374151;
flex-wrap: wrap;
gap: 15px;
}
.nav-links {
display: flex;
gap: 30px;
list-style: none;
}
.nav-links a {
color: #6b7280;
text-decoration: none;
font-weight: 500;
}
.nav-links a.active {
color: #10b981;
font-weight: 600;
}
.nav-icons {
display: flex;
gap: 15px;
align-items: center;
}
.nav-icon {
width: 40px;
height: 40px;
background: white;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: #6b7280;
cursor: pointer;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.search-bar {
display: flex;
align-items: center;
background: white;
border-radius: 25px;
padding: 10px 20px;
gap: 10px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.search-input {
background: transparent;
border: none;
color: #374151;
outline: none;
width: 200px;
}
.search-input::placeholder {
color: #9ca3af;
}
.main-content {
padding: 40px 20px;
display: flex;
flex-direction: column;
gap: 30px;
min-height: calc(100vh - 120px);
}
.content-section {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 30px;
}
.content-card {
background: white;
border: 2px solid #10b981;
border-radius: 15px;
padding: 20px;
color: #374151;
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}
.action-buttons {
display: flex;
gap: 15px;
margin-top: 20px;
padding: 10px 20px;
}
.action-btn {
background: #10b981;
color: white;
border: none;
border-radius: 8px;
cursor: pointer;
}
/* Welcome Popup */
.welcome-popup {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: radial-gradient(closest-side, #20B15A, #0E4B26);
border-radius: 20px;
padding: 40px;
box-shadow: 0 20px 40px rgba(0,0,0,0.3);
z-index: 1000;
max-width: 600px;
width: 90%;
text-align: center;
max-height: 90vh;
overflow-y: auto;
margin: 0 auto;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.welcome-title {
font-size: 48px;
font-weight: 700;
color: white;
margin-bottom: 20px;
}
.welcome-text {
color: white;
font-size: 16px;
line-height: 1.6;
margin-bottom: 30px;
opacity: 0.9;
}
.illustration-container {
position: relative;
margin: 30px 0;
display: flex;
justify-content: center;
}
.illustration-bg {
width: 200px;
height: 200px;
background: white;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
position: relative;
overflow: hidden;
}
.person {
width: 60px;
height: 60px;
background: #059669;
border-radius: 50%;
position: relative;
z-index: 2;
}
.person::before {
content: '';
position: absolute;
top: 10px;
left: 10px;
width: 40px;
height: 40px;
background: #10b981;
border-radius: 50%;
}
.person::after {
content: '';
position: absolute;
bottom: -8px;
left: 15px;
width: 30px;
height: 20px;
background: #059669;
border-radius: 0 0 15px 15px;
}
/* Multi-tasking items around person */
.task-item {
position: absolute;
width: 20px;
height: 20px;
background: #059669;
border-radius: 4px;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 10px;
}
.task-item.top-left {
top: 30px;
left: 30px;
}
.task-item.top-right {
top: 30px;
right: 30px;
}
.task-item.middle-left {
top: 50%;
left: 20px;
transform: translateY(-50%);
}
.task-item.middle-right {
top: 50%;
right: 20px;
transform: translateY(-50%);
}
.task-item.bottom-right {
bottom: 30px;
right: 30px;
}
.speech-bubble {
position: absolute;
width: 15px;
height: 15px;
background: white;
border-radius: 50%;
top: 10px;
right: 10px;
}
.speech-bubble::before {
content: '...';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 8px;
color: #059669;
}
.welcome-buttons {
display: flex;
gap: 20px;
justify-content: center;
margin-top: 30px;
}
.welcome-btn {
padding: 15px 66px;
border-radius: 10px;
font-size: 18px;
font-weight: 600;
text-decoration: none;
transition: all 0.3s ease;
min-width: 120px;
text-align: center;
}
.signin-btn {
background: white;
color: #059669;
border: none;
}
.signin-btn:hover {
background: #f0fdf4;
color: #059669;
}
.signup-btn {
background: transparent;
color: white;
border: 2px solid white;
}
.signup-btn:hover {
background: white;
color: #059669;
}
/* Overlay */
.overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.5);
z-index: 999;
}
@media (max-width: 1024px) {
.welcome-popup {
max-width: 500px !important;
padding: 35px 30px !important;
}
.welcome-title {
font-size: 42px !important;
}
.welcome-text {
font-size: 15px !important;
}
}
@media (max-width: 768px) {
.welcome-popup {
padding: 30px 20px !important;
margin: 0 !important;
max-width: 90% !important;
width: 90% !important;
max-height: 90vh !important;
border-radius: 20px !important;
left: 50% !important;
top: 50% !important;
transform: translate(-50%, -50%) !important;
position: fixed !important;
}
.welcome-title {
font-size: 36px !important;
margin-bottom: 15px !important;
}
.welcome-text {
font-size: 14px !important;
line-height: 1.5 !important;
margin-bottom: 25px !important;
padding: 0 10px !important;
}
.welcome-buttons {
gap: 15px !important;
flex-wrap: wrap !important;
}
.welcome-btn {
padding: 14px 25px !important;
font-size: 15px !important;
min-width: 140px !important;
}
}
.welcome-title {
font-size: 32px !important;
margin-bottom: 15px !important;
}
.welcome-text {
font-size: 14px !important;
margin-bottom: 25px !important;
}
.welcome-buttons {
flex-direction: column !important;
gap: 12px !important;
}
.welcome-btn {
padding: 12px 25px !important;
font-size: 14px !important;
min-width: 100px !important;
}
.illustration-bg {
width: 150px !important;
height: 150px !important;
}
.person {
width: 45px !important;
height: 45px !important;
}
.person::before {
width: 30px !important;
height: 30px !important;
top: 8px !important;
left: 8px !important;
}
.person::after {
width: 22px !important;
height: 15px !important;
left: 12px !important;
bottom: -6px !important;
}
.task-item {
width: 15px !important;
height: 15px !important;
font-size: 8px !important;
}
.task-item.top-left {
top: 20px !important;
left: 20px !important;
}
.task-item.top-right {
top: 20px !important;
right: 20px !important;
}
.task-item.middle-left {
left: 15px !important;
}
.task-item.middle-right {
right: 15px !important;
}
.task-item.bottom-right {
bottom: 20px !important;
right: 20px !important;
}
.speech-bubble {
width: 12px !important;
height: 12px !important;
top: 8px !important;
right: 8px !important;
}
/* Background content responsive */
.top-nav {
padding: 15px 20px !important;
flex-direction: column !important;
gap: 15px !important;
align-items: flex-start !important;
}
.nav-links {
display: none !important;
}
.search-bar {
width: 100% !important;
max-width: 300px !important;
}
.search-input {
width: 100% !important;
}
.nav-icons {
gap: 10px !important;
}
.nav-icon {
width: 35px !important;
height: 35px !important;
}
.main-content {
padding: 20px 15px !important;
gap: 20px !important;
}
.content-card {
padding: 20px 15px !important;
flex-direction: column !important;
text-align: center !important;
gap: 20px !important;
}
.logo-icon {
width: 60px !important;
height: 60px !important;
font-size: 24px !important;
}
.content-section {
grid-template-columns: 1fr !important;
}
.action-buttons {
grid-template-columns: repeat(2, 1fr) !important;
gap: 15px !important;
}
.action-btn {
padding: 15px !important;
font-size: 14px !important;
}
}
@media (max-width: 480px) {
.welcome-popup {
padding: 25px 15px !important;
margin: 0 !important;
max-width: 95% !important;
width: 95% !important;
max-height: 85vh !important;
border-radius: 18px !important;
left: 50% !important;
top: 50% !important;
transform: translate(-50%, -50%) !important;
position: fixed !important;
}
.welcome-title {
font-size: 28px !important;
margin-bottom: 12px !important;
line-height: 1.2 !important;
}
.welcome-text {
font-size: 13px !important;
line-height: 1.4 !important;
margin-bottom: 20px !important;
padding: 0 5px !important;
}
.welcome-buttons {
flex-direction: column !important;
gap: 12px !important;
width: 100% !important;
}
.welcome-btn {
width: 100% !important;
padding: 16px 20px !important;
font-size: 16px !important;
font-weight: 600 !important;
min-width: unset !important;
}
.signin-btn {
order: 1 !important;
}
.signup-btn {
order: 2 !important;
}
}
@media (max-width: 360px) {
.welcome-popup {
max-width: 98% !important;
width: 98% !important;
padding: 20px 12px !important;
border-radius: 15px !important;
margin: 0 !important;
max-height: 80vh !important;
left: 50% !important;
top: 50% !important;
transform: translate(-50%, -50%) !important;
position: fixed !important;
}
.welcome-title {
font-size: 24px !important;
margin-bottom: 10px !important;
}
.welcome-text {
font-size: 12px !important;
margin-bottom: 18px !important;
padding: 0 3px !important;
}
.welcome-btn {
padding: 14px 16px !important;
font-size: 15px !important;
}
}
.welcome-img {
width: 100% !important;
height: auto;
}
</style>
</head>
<body>
<!-- Background Home Page Content -->
<div class="background-content">
<!-- Top Navigation -->
<div class="top-nav">
<div style="display: flex; align-items: center; gap: 30px;">
<h3 style="color: #374151;">Welcome</h3>
<ul class="nav-links">
<li><a href="#" class="active">Home</a></li>
<li><a href="#">My Shop</a></li>
<li><a href="#">Promotion</a></li>
<li><a href="#">Notification</a></li>
</ul>
</div>
<div style="display: flex; align-items: center; gap: 20px;">
<div class="nav-icons">
<div class="nav-icon">
<i class="fas fa-shopping-cart"></i>
</div>
<div class="nav-icon">
<i class="fas fa-bell"></i>
</div>
</div>
<div class="search-bar">
<i class="fas fa-search"></i>
<input type="text" class="search-input" placeholder="Search Here....">
</div>
</div>
</div>
<!-- Main Content -->
<div class="main-content">
<!-- Shop Information Card -->
<div class="content-card" style="grid-column: 1 / -1; display: flex; align-items: center; gap: 30px; padding: 30px;">
<div class="shop-logo" style="width: 80px; height: 80px; background: white; border: 2px solid #169D53; border-radius: 50%; display: flex; align-items: center; justify-content: center; padding: 10px;">
<img src="assets/images/Optislipimage.png" alt="Shop Logo" style="width: 60px; height: 60px; object-fit: contain; filter: brightness(0) saturate(100%);" onerror="this.style.display='none'; this.parentElement.innerHTML='<i class=\'fas fa-glasses\' style=\'color: #169D53; font-size: 24px;\'></i>'">
</div>
<div style="flex: 1;">
<h2 style="color: #169D53; margin-bottom: 10px;">Name : <?php echo htmlspecialchars($shop_data['shop_name']); ?></h2>
<p style="margin-bottom: 20px;"><i class="fas fa-map-marker-alt" style="color: #169D53;"></i> Address: <?php echo htmlspecialchars($shop_data['address']); ?></p>
<div style="display: flex; gap: 20px; flex-wrap: wrap;">
<span><i class="fab fa-whatsapp" style="color: #25d366;"></i> <?php echo htmlspecialchars($shop_data['whatsapp']); ?></span>
<span><i class="fab fa-facebook" style="color: #1877f2;"></i> <?php echo htmlspecialchars($shop_data['facebook']); ?></span>
<span><i class="fab fa-instagram" style="color: #e4405f;"></i> <?php echo htmlspecialchars($shop_data['instagram']); ?></span>
<span><i class="fas fa-globe" style="color: #059669;"></i> <?php echo htmlspecialchars($shop_data['website']); ?></span>
</div>
</div>
</div>
<!-- Action Buttons -->
<div class="content-section">
<div class="action-buttons" style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; width: 100%;">
<button class="action-btn" style="padding: 20px; font-size: 16px; font-weight: 600; background: #169D53; color: white; border: none; border-radius: 12px; min-height: 60px; cursor: pointer; transition: all 0.3s ease; box-shadow: 0 4px 6px rgba(22, 157, 83, 0.1);">New Order</button>
<button class="action-btn" style="padding: 20px; font-size: 16px; font-weight: 600; background: #169D53; color: white; border: none; border-radius: 12px; min-height: 60px; cursor: pointer; transition: all 0.3s ease; box-shadow: 0 4px 6px rgba(22, 157, 83, 0.1);">Pending Order</button>
<button class="action-btn" style="padding: 20px; font-size: 16px; font-weight: 600; background: #169D53; color: white; border: none; border-radius: 12px; min-height: 60px; cursor: pointer; transition: all 0.3s ease; box-shadow: 0 4px 6px rgba(22, 157, 83, 0.1);">Complete Order</button>
<button class="action-btn" style="padding: 20px; font-size: 16px; font-weight: 600; background: #169D53; color: white; border: none; border-radius: 12px; min-height: 60px; cursor: pointer; transition: all 0.3s ease; box-shadow: 0 4px 6px rgba(22, 157, 83, 0.1);">Search Record</button>
<button class="action-btn" style="padding: 20px; font-size: 16px; font-weight: 600; background: #169D53; color: white; border: none; border-radius: 12px; min-height: 60px; cursor: pointer; transition: all 0.3s ease; box-shadow: 0 4px 6px rgba(22, 157, 83, 0.1);">Sale Record</button>
<button class="action-btn" style="padding: 20px; font-size: 16px; font-weight: 600; background: #169D53; color: white; border: none; border-radius: 12px; min-height: 60px; cursor: pointer; transition: all 0.3s ease; box-shadow: 0 4px 6px rgba(22, 157, 83, 0.1);">Add Record</button>
</div>
</div>
</div>
</div>
<!-- Overlay -->
<div class="overlay"></div>
<!-- Welcome Popup -->
<div class="welcome-popup">
<h1 class="welcome-title">Welcome</h1>
<p class="welcome-text">
Opti Slip Database System, your all-in-one platform for managing your optical business efficiently. This website is designed to help you easily manage customer information, generate professional digital slips, and maintain accurate customer records all in one secure place.
</p>
<img src="assets/images/Welcome Image.webp"
alt="Welcome Illustration"
class="welcome-img"
onerror="console.log('Welcome image failed to load from: assets/images/welcome.png'); this.src='https://via.placeholder.com/400x300/169D53/FFFFFF?text=OPTI+SLIP';"
onload="console.log('Welcome image loaded successfully');"
style="max-width: 100%; height: auto; display: block;">
<div class="welcome-buttons">
<a href="signin.php" class="welcome-btn signin-btn">SIGN IN</a>
<a href="register.php" class="welcome-btn signup-btn">SIGN UP</a>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
<?php
// Clean end
if (ob_get_level() > 0) @ob_end_flush();
?>