Scribd
Upload
2 views59 pages

Experimentes

The document contains HTML code for various web applications including a Student Registration Form, Department of Computer Science page, a Regular Calculator, and an Employee Registration form. Each section includes structured HTML elements, CSS for styling, and JavaScript for functionality such as form submission and calculator operations. The applications demonstrate different aspects of web development, such as form handling, responsive design, and interactive elements.

Uploaded by

skg34625
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
2 views59 pages

Experimentes

The document contains HTML code for various web applications including a Student Registration Form, Department of Computer Science page, a Regular Calculator, and an Employee Registration form. Each section includes structured HTML elements, CSS for styling, and JavaScript for functionality such as form submission and calculator operations. The applications demonstrate different aspects of web development, such as form handling, responsive design, and interactive elements.

Uploaded by

skg34625
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 59

Exp 1

Program :-
<!DOCTYPE html>
<html>
<head>
<title>Student Registration Form</title>
<link rel="stylesheet" href="style.css">
<script>
function handleFormSubmit(event) {
event.preventDefault(); // Prevent the form from submitting normally

// Hide the registration form


document.getElementById("registrationForm").style.display = "none";

// Show the second HTML content after form submission


document.getElementById("textFormatting").style.display = "block";
}
</script>
</head>
<body>
<link rel="stylesheet" href="style.css">

<center><h1>Student Registration Form</h1></center>

<form name="myform" id="registrationForm" onsubmit="handleFormSubmit(event)">


<table cellpadding="5" cellspacing="5" bgcolor="lightyellow" align="center">

<tr>
<td>First Name:</td>
<td><input type="text" name="fname"></td>
</tr>

<tr>
<td>Last Name:</td>
<td><input type="text" name="lname"></td>
</tr>

<tr>
<td>Father's Name:</td>
<td><input type="text" name="fathername"></td>
</tr>

<tr>
<td>Mother's Name:</td>
<td><input type="text" name="mname"></td>
</tr>

<tr>
<td>Date of Birth:</td>
<td><input type="date" name="dob"></td>
</tr>

<tr>
<td>Email:</td>
<td><input type="email" name="email"></td>
</tr>

<tr>
<td>Gender:</td>
<td>
<input type="radio" name="gender" value="male"> Male
<input type="radio" name="gender" value="female"> Female
</td>
</tr>

<tr>
<td>Choose Course:</td>
<td>
<select name="course">
<option value="">---Select---</option>
<option value="HTML">HTML</option>
<option value="PHP">PHP</option>
<option value="JAVA">JAVA</option>
<option value="ASP">ASP</option>
</select>
</td>
</tr>

<tr>
<td>Hobbies:</td>
<td>
<input type="checkbox" name="hobbies[]" value="singing"> Singing
<input type="checkbox" name="hobbies[]" value="dancing"> Dancing
<input type="checkbox" name="hobbies[]" value="reading"> Reading books
<input type="checkbox" name="hobbies[]" value="playing"> Playing Cricket
</td>
</tr>

<tr>
<td>Address:</td>
<td><textarea name="address"></textarea></td>
</tr>

<tr>
<td>Photo:</td>
<td><input type="file" name="photo"></td>
</tr>

<tr>
<td></td>
<td><input type="submit" name="submit" value="Submit"></td>
</tr>

</table>
</form>

<!-- The second HTML content shown after submission -->


<div id="textFormatting" style="display:none;">
<h1>Text Formatting in HTML</h1>

<p>This is a <strong>bold</strong> text using the <code>&lt;strong&gt;</code>


tag.</p>
<p>This is an <em>italic</em> text using the <code>&lt;em&gt;</code> tag.</p>
<p>This is a <u>underlined</u> text using the <code>&lt;u&gt;</code> tag.</p>
<p>This is a <mark>highlighted</mark> text using the <code>&lt;mark&gt;</code>
tag.</p>
<p>This is a <small>small</small> text using the <code>&lt;small&gt;</code>
tag.</p>
<p>This is a <del>deleted</del> text using the <code>&lt;del&gt;</code> tag.</p>
<p>This is a <ins>inserted</ins> text using the <code>&lt;ins&gt;</code> tag.</p>
<h2>Using Line Breaks and Paragraphs</h2>
<p>This is a paragraph.<br>This is a new line within the same paragraph using the
<code>&lt;br&gt;</code> tag.</p>

<h2>Using Blockquotes</h2>
<blockquote>
<p>This is a blockquote. It is used to indicate that the enclosed text is a quotation
from another source.</p>
</blockquote>

<h2>Using Lists</h2>
<h3>Unordered List:</h3>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>

<h3>Ordered List:</h3>
<ol>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ol>
</div>

<!-- Footer Section -->


<footer style="background-color: rgb(34, 168, 202); text-align: center; padding: 10px;
margin-top: 20px;">
<p>Contact us at: <a href="mailto:[email protected]">[email protected]</a></p>
<p>Created by Sayed Kamran</p>
</footer>

</body>
</html>
Output :-
Exp 2
Program :-
Program :-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Department of Computer Science</title>
<style>
/* Set the background color of the page */
body {
background-color: #c5af8d;
font-family: Arial, sans-serif;
margin: 20px;
}
/* Style for the header */
h1, h2, h3 {
color: #885e78;
}
/* Apply italics to the mission statement */
.mission {
font-style: italic;
}
/* Underline the vision statement */
.vision {
text-decoration: underline;
}
/* Different font for the list of programs */
.programs {
font-family: 'Courier New', Courier, monospace;
}
/* Different font for the contact information */
.contact {
font-family: 'Times New Roman', Times, serif;
}
/* Style for the back to top link */
.back-to-top {
display: block;
margin-top: 20px;
text-align: center;
}
</style>
</head>
<body>
<!-- Department Name -->
<h1 id="top">Department of Computer Science</h1>
<!-- Mission Statement -->
<h2>Mission</h2>
<p class="mission">To provide quality education and research opportunities in computer
science, fostering innovation and technological advancement.</p>
<!-- Vision Statement -->
<h2>Vision</h2>
<p class="vision">To be a leading department recognized globally for excellence in
computer science education and research.</p>
<!-- Programs Offered -->
<h2>Programs Offered</h2>
<ul class="programs">
<li>Bachelor of Technology in Computer Science</li>
<li>Master of Technology in Computer Science</li>
<li>Ph.D. in Computer Science</li>
</ul>
<!-- Faculty Information -->
<h2>Faculty</h2>
<ul>
<li>Prof. D.J Waghmare - Professor and Head of Department</li>
<li>Prof. G M Shaikh - Associate Professor</li>
<li>Prof. P B Khapale - Assistant Professor</li>
</ul>
<!-- Department Image with Link -->
<h2>Explore Our Campus</h2>
<p>Click on the image below to learn more about our campus facilities.</p>
<a href="https://www.stbcet.org.in" target="_blank">
<img src="Screenshot 2025-06-20 212931.png" alt="Department Building" width="600">
</a>
<!-- Contact Information -->
<h2>Contact Us</h2>
<p class="contact">
Department of Computer Science,<br>
Shri Tuljabhavani College of Engg.,<br>
Naldurg Road,<br>
Tuljapur, Maharashtra State, 413601<br>
Email: [email protected]<br>
Phone: (123) 456-7890
</p>
<!-- Back to Top Link -->
<a href="#top" class="back-to-top">Back to Top</a>
</body>
</html>
Output :-
Exp 3
Program :-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Regular Calculator</title>
<style>
body {
background-color: #f4f4f4;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
font-family: 'Segoe UI', sans-serif;
}

.calculator {
background-color: #222;
padding: 20px;
border-radius: 10px;
width: 300px;
}

#display {
width: 100%;
height: 60px;
font-size: 24px;
text-align: right;
padding: 10px;
border: none;
border-radius: 5px;
margin-bottom: 15px;
background-color: #eee;
box-sizing: border-box;
}

.buttons {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
}

button {
padding: 20px;
font-size: 18px;
border: none;
border-radius: 10px;
background-color: #444;
color: white;
cursor: pointer;
transition: 0.2s;
}

button:hover {
background-color: #666;
}

button.equal {
background-color: #2e8b57;
grid-column: span 1;
}

button.zero {
grid-column: span 2;
}
</style>
</head>
<body>
<div class="calculator">
<input type="text" id="display" readonly>
<div class="buttons">
<button onclick="clearDisplay()">AC</button>
<button onclick="deleteLast()">DEL</button>
<button onclick="appendValue('%')">%</button>
<button onclick="appendValue('/')">÷</button>

<button onclick="appendValue('7')">7</button>
<button onclick="appendValue('8')">8</button>
<button onclick="appendValue('9')">9</button>
<button onclick="appendValue('*')">×</button>

<button onclick="appendValue('4')">4</button>
<button onclick="appendValue('5')">5</button>
<button onclick="appendValue('6')">6</button>
<button onclick="appendValue('-')">−</button>

<button onclick="appendValue('1')">1</button>
<button onclick="appendValue('2')">2</button>
<button onclick="appendValue('3')">3</button>
<button onclick="appendValue('+')">+</button>

<button onclick="appendValue('0')" class="zero">0</button>


<button onclick="appendValue('.')">.</button>
<button onclick="calculate()" class="equal">=</button>
</div>
</div>

<script>
function appendValue(value) {
document.getElementById("display").value += value;
}

function clearDisplay() {
document.getElementById("display").value = "";
}

function deleteLast() {
let current = document.getElementById("display").value;
document.getElementById("display").value = current.slice(0, -1);
}

function calculate() {
try {
let result = eval(document.getElementById("display").value);
document.getElementById("display").value = result;
} catch {
alert("Invalid expression");
clearDisplay();
}
}
</script>
</body>
</html>
Output :-
Exp 4
Program :-
Main Program-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Employee Registration</title>
<style>
body {
font-family: 'Segoe UI', sans-serif;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
overflow: hidden;
background: linear-gradient(45deg, #6a11cb, #2575fc);
background-size: 400% 400%;
animation: gradientAnimation 10s ease infinite;
}

@keyframes gradientAnimation {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}

/* Floating particles animation */


.particle-effect {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url(vecteezy_background-of-falling-laser-lines_34892633.mp4);
background-size: cover;
opacity: 0.3;
pointer-events: none;
animation: particleAnimation 10s infinite;
}

@keyframes particleAnimation {
0% { transform: translateY(0); opacity: 0.3; }
50% { transform: translateY(50px); opacity: 0.6; }
100% { transform: translateY(0); opacity: 0.3; }
}

.form-container {
position: relative;
background-color: rgba(255, 255, 255, 0.8);
padding: 30px;
border-radius: 20px;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
width: 100%;
max-width: 400px;
backdrop-filter: blur(10px);
animation: slideIn 1s ease-out;
z-index: 2;
}

@keyframes slideIn {
from {
transform: translateY(-50%);
opacity: 0;
}
to {
transform: translateY(0);
opacity: 1;
}
}

h1 {
text-align: center;
color: #fff;
font-size: 36px;
margin-bottom: 10px;
text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.7);
}

h2 {
text-align: center;
color: #333;
font-size: 22px;
margin-bottom: 20px;
}

label {
display: block;
margin-bottom: 6px;
color: #666;
font-weight: bold;
font-size: 16px;
}

input, select, textarea {


width: 100%;
padding: 10px;
margin-bottom: 15px;
border: 1px solid #ddd;
border-radius: 10px;
font-size: 14px;
background-color: #f4f4f4;
transition: all 0.3s ease-in-out;
}

input:focus, select:focus, textarea:focus {


border: 1px solid #2575fc;
background-color: #fff;
box-shadow: 0 0 10px rgba(37, 117, 252, 0.5);
}

input[type="submit"] {
background-color: #2575fc;
color: white;
border: none;
cursor: pointer;
font-size: 14px;
padding: 10px;
border-radius: 10px;
transition: background-color 0.3s ease;
}

input[type="submit"]:hover {
background-color: #1a5ad9;
}

button {
width: 100%;
padding: 12px;
background-color: #2575fc;
color: white;
border: none;
border-radius: 10px;
font-size: 16px;
cursor: pointer;
text-align: center;
transition: transform 0.3s ease;
}

button:hover {
transform: scale(1.05);
background-color: #1a5ad9;
}

button a {
text-decoration: none;
color: white;
font-weight: bold;
}

button a:hover {
color: #fff;
text-decoration: underline;
}
</style>
<script>

function validateForm(event) {
event.preventDefault();

const name = document.getElementById("name").value.trim();


const email = document.getElementById("email").value.trim();
const mobile = document.getElementById("mobile").value.trim();
const salary = document.getElementById("salary").value.trim();

const emailPattern = /^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$/;


const mobilePattern = /^[0-9]{10}$/;

if (!name || !email || !mobile || !salary) {


alert("Please fill in all required fields.");
return;
}

if (!emailPattern.test(email)) {
alert("Invalid email.");
return;
}
if (!mobilePattern.test(mobile)) {
alert("Mobile number must be 10 digits.");
return;
}

if (isNaN(salary) || Number(salary) <= 0) {


alert("Salary must be a number.");
return;
}

// Save name to localStorage


localStorage.setItem("employeeName", name);

// Redirect to success.html
window.location.href = "success.html";
}
</script>
</head>
<body>
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}

body, html {
height: 100%;
overflow: hidden;
font-family: Arial, sans-serif;
}

/* Video background */
video.bg-video {
position: fixed;
right: 0;
bottom: 0;
min-width: 100%;
min-height: 100%;
object-fit: cover;
z-index: -1;
}

/* Foreground content */
.content {
position: relative;
z-index: 1;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
color: white;
text-shadow: 0 0 10px rgba(0,0,0,0.7);
}

.box {
background: rgba(0, 0, 0, 0.5);
padding: 40px;
border-radius: 12px;
}
</style>
</head>
<body>

<!-- Background Video -->


<video class="bg-video" autoplay muted loop>
<source src="vecteezy_animated-flying-through-the-stars-and-blue-nebula-in-
space_8078506.mp4" type="video/mp4">
Your browser does not support HTML5 video.
</video>
<div class="particle-effect"></div>
<div>
<h1>Employee Registration</h1>
<div class="form-container">
<h2>Register Employee</h2>
<form onsubmit="validateForm(event)">
<label for="name">Full Name:</label>
<input type="text" id="name" required />

<label for="email">Email:</label>
<input type="email" id="email" required />

<label for="mobile">Mobile:</label>
<input type="text" id="mobile" required />

<label for="salary">Salary:</label>
<input type="text" id="salary" required />

<button><a href="success.html">Submit</a></button>
</form>
</div>
</div>
</body>
</html>
Success Page Program-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Success</title>
<style>
body {
font-family: 'Segoe UI', sans-serif;
background: linear-gradient(to right, #00c6ff, #0072ff);
color: white;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}

.message-box {
background: rgba(0, 0, 0, 0.3);
padding: 40px;
border-radius: 10px;
text-align: center;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.4);
}
h1 {
font-size: 32px;
margin-bottom: 15px;
}

p{
font-size: 18px;
}

a{
margin-top: 20px;
display: inline-block;
color: #fff;
text-decoration: underline;
}
</style>
<script>
window.onload = function () {
const name = localStorage.getItem("employeeName");
document.getElementById("employeeName").textContent = name ? name : "Employee";
localStorage.removeItem("employeeName"); // clear after showing
}
</script>
</head>
<body>
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}

body, html {
height: 100%;
overflow: hidden;
font-family: Arial, sans-serif;
}

/* Video background */
video.bg-video {
position: fixed;
right: 0;
bottom: 0;
min-width: 100%;
min-height: 100%;
object-fit: cover;
z-index: -1;
}

/* Foreground content */
.content {
position: relative;
z-index: 1;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
color: white;
text-shadow: 0 0 10px rgba(0,0,0,0.7);
}
.box {
background: rgba(0, 0, 0, 0.5);
padding: 40px;
border-radius: 12px;
}
</style>
</head>
<body>

<!-- Background Video -->


<video class="bg-video" autoplay muted loop>
<source src="vecteezy_animated-flying-through-the-stars-and-blue-nebula-in-
space_8078506.mp4" type="video/mp4">
Your browser does not support HTML5 video.
</video>
<div class="message-box">
<h1>🎉 <span id="employeeName"></span>, you are successfully registered!</h1>
<p>Thank you for submitting your details.</p>
<a href="employee-form.html">Back to Form</a>
</div>
</body>
</html>
Output :-
Exp 5
Program :-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>String and Number Processor</title>
<style>
body {
font-family: 'Segoe UI', sans-serif;
background: linear-gradient(135deg, #f9f9f9, #e0eaff);
margin: 0;
padding: 30px;
display: flex;
flex-direction: column;
align-items: center;
}

h1 {
color: #333;
margin-bottom: 20px;
}

.card {
background: white;
box-shadow: 0 8px 16px rgba(0,0,0,0.1);
border-radius: 12px;
padding: 20px 30px;
width: 100%;
max-width: 400px;
margin: 10px;
transition: transform 0.3s ease;
}

.card:hover {
transform: translateY(-4px);
}

label {
font-weight: 600;
}

input {
width: 100%;
padding: 10px;
margin: 10px 0 15px;
border: 1px solid #ccc;
border-radius: 8px;
font-size: 16px;
}

button {
background-color: #4a90e2;
color: white;
padding: 10px 20px;
border: none;
border-radius: 8px;
cursor: pointer;
font-size: 16px;
}
button:hover {
background-color: #357ab8;
}

.output {
font-weight: bold;
margin-top: 10px;
color: #444;
}
</style>
</head>
<body>

<h1>String & Number Processor</h1>

<div class="card">
<label for="stringInput">Enter a String:</label>
<input type="text" id="stringInput" placeholder="Type something...">
<button onclick="showStringLength()">Get String Length</button>
<div class="output" id="stringOutput"></div>
</div>

<div class="card">
<label for="numberInput">Enter a Number:</label>
<input type="number" id="numberInput" placeholder="Type a number...">
<button onclick="reverseDigits()">Reverse Digits</button>
<div class="output" id="numberOutput"></div>
</div>
<script>
function showStringLength() {
const input = document.getElementById("stringInput").value;
const length = input.length;
document.getElementById("stringOutput").innerText = `Length: ${length}`;
}

function reverseDigits() {
const input = document.getElementById("numberInput").value;
if (input === "") {
document.getElementById("numberOutput").innerText = "Please enter a number.";
return;
}
const reversed = input.split('').reverse().join('');
document.getElementById("numberOutput").innerText = `Reversed: ${reversed}`;
}
</script>

</body>
</html>
Output :-
Exp 6
Program :-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Prime Finder</title>
<style>
body {
font-family: 'Segoe UI', sans-serif;
margin: 0;
padding: 0;
background: linear-gradient(to right top, #a1c4fd, #c2e9fb);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 100vh;
}

h1 {
color: #2c3e50;
margin-bottom: 20px;
}

.card {
background: rgba(255, 255, 255, 0.8);
backdrop-filter: blur(12px);
border-radius: 20px;
padding: 30px;
max-width: 450px;
width: 100%;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
transition: transform 0.3s ease;
}

.card:hover {
transform: scale(1.02);
}

label {
font-weight: 600;
color: #34495e;
}

input {
width: 100%;
padding: 12px;
margin: 10px 0 20px;
border: 1px solid #ccc;
border-radius: 8px;
font-size: 16px;
}

button {
background-color: #3498db;
color: white;
padding: 12px 20px;
border: none;
border-radius: 8px;
cursor: pointer;
font-size: 16px;
width: 100%;
}

button:hover {
background-color: #2980b9;
}

.output {
margin-top: 20px;
font-weight: 500;
color: #2d3436;
word-wrap: break-word;
}
</style>
</head>
<body>

<h1>Prime Number Finder</h1>

<div class="card">
<label for="start">Starting Number:</label>
<input type="number" id="start" placeholder="e.g., 10">

<label for="end">Ending Number:</label>


<input type="number" id="end" placeholder="e.g., 50">

<button onclick="findPrimes()">Find Prime Numbers</button>


<div class="output" id="result"></div>
</div>

<script>
function isPrime(n) {
if (n < 2) return false;
for (let i = 2; i <= Math.sqrt(n); i++) {
if (n % i === 0) return false;
}
return true;
}

function findPrimes() {
const start = parseInt(document.getElementById("start").value);
const end = parseInt(document.getElementById("end").value);
const result = document.getElementById("result");
let primes = [];

if (isNaN(start) || isNaN(end)) {
result.innerHTML = "❗ Please enter valid numbers.";
return;
}

if (start >= end) {


result.innerHTML = "❗ Starting number should be less than ending number.";
return;
}

for (let i = start; i <= end; i++) {


if (isPrime(i)) {
primes.push(i);
}
}

result.innerHTML = primes.length > 0


? `✅ Prime numbers between ${start} and ${end}:<br><br>${primes.join(', ')}`
: "❌ No prime numbers found in the given range.";
}
</script>

</body>
</html>
Output :-
Exp 7
Program :-
<!DOCTYPE html>
<html>
<head>
<title>Digital Clock - PHP Server Time</title>
<style>
body {
background-color: #1e1e1e;
color: #00ffcc;
font-family: 'Courier New', monospace;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}

.clock {
font-size: 110px;
background: #000;
padding: 30px 50px;
border-radius: 15px;
box-shadow: 0 0 20px #00ffcc;
}
</style>
</head>
<body>

<div class="clock" id="clock">


<?php
date_default_timezone_set("Asia/Kolkata");
echo date("H:i:s");
?>
</div>

<script>
// Start from current server time
let timeParts = document.getElementById("clock").innerText.split(":");
let hours = parseInt(timeParts[0]);
let minutes = parseInt(timeParts[1]);
let seconds = parseInt(timeParts[2]);

function updateClock() {
seconds++;
if (seconds >= 60) {
seconds = 0;
minutes++;
}
if (minutes >= 60) {
minutes = 0;
hours++;
}
if (hours >= 24) {
hours = 0;
}

let h = hours.toString().padStart(2, '0');


let m = minutes.toString().padStart(2, '0');
let s = seconds.toString().padStart(2, '0');
document.getElementById("clock").innerText = `${h}:${m}:${s}`;
}

setInterval(updateClock, 1000);
</script>
<script>
// Update the clock every second
setInterval(function() {
let now = new Date();
let hours = now.getHours().toString().padStart(2, '0');
let minutes = now.getMinutes().toString().padStart(2, '0');
let seconds = now.getSeconds().toString().padStart(2, '0');
document.getElementById("clock").innerHTML = hours + ":" + minutes + ":" +
seconds;
}, 1000);
</script>
<style>
html, body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
overflow: hidden;
font-family: Arial, sans-serif;
}

/* Background video full screen */


#bg-video {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: -1;
}

/* Optional dark overlay for text readability */


.overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.4);
z-index: 0;
}

/* Centered content using flexbox */


.content {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
text-align: center;
color: white;
padding: 20px;
}

h1 {
font-size: 3em;
margin: 0;
}

p{
font-size: 1.5em;
}
</style>
</head>
<body>

<!-- Background video -->


<video id="bg-video" autoplay loop muted playsinline>
<source src="vecteezy_abstract-hi-tech-hud-sci-fi-display-interface-frame-
digital_29763564 (1).mp4" type="video/mp4">
Your browser does not support HTML5 video.
</video>

</body>
</html>
Output :-
Exp 8
Program :-
<?php
session_start();

// Dummy user credentials


$valid_username = "Sayed Kamran";
$valid_password = "pass123";

// Handle sign in
if (isset($_POST['signin'])) {
$username = $_POST['username'];
$password = $_POST['password'];

if ($username === $valid_username && $password === $valid_password) {


$_SESSION['username'] = $username;
} else {
$message = "Invalid username or password.";
}
}

// Handle sign out


if (isset($_POST['signout'])) {
session_destroy();
header("Location: " . $_SERVER['PHP_SELF']);
exit;
}

// Handle profile picture upload with resizing


if (isset($_POST['upload'])) {
if (isset($_FILES['profile_pic']) && $_FILES['profile_pic']['error'] == 0) {
$target_dir = "uploads/";
$file_tmp = $_FILES["profile_pic"]["tmp_name"];
$file_name = $_SESSION['username'] . "_profile.jpg";
$target_file = $target_dir . $file_name;

$image_info = getimagesize($file_tmp);
if ($image_info !== false) {
$image_type = $image_info[2];
$width = 100;
$height = 130;

// Create image from uploaded type


switch ($image_type) {
case IMAGETYPE_JPEG:
$src_image = imagecreatefromjpeg($file_tmp);
break;
case IMAGETYPE_PNG:
$src_image = imagecreatefrompng($file_tmp);
break;
case IMAGETYPE_GIF:
$src_image = imagecreatefromgif($file_tmp);
break;
default:
$upload_message = "Unsupported image format.";
$src_image = false;
}

if ($src_image) {
$dst_image = imagecreatetruecolor($width, $height);
imagecopyresampled($dst_image, $src_image, 0, 0, 0, 0, $width, $height,
$image_info[0], $image_info[1]);
imagejpeg($dst_image, $target_file);
imagedestroy($src_image);
imagedestroy($dst_image);

$_SESSION['profile_pic'] = $target_file;
$upload_message = "Profile picture uploaded and resized!";
}
} else {
$upload_message = "Invalid image file.";
}
} else {
$upload_message = "Error uploading file.";
}
}
?>

<!DOCTYPE html>
<html>
<head>
<title>Stylish Dashboard</title>
<style>
body {
margin: 0;
font-family: 'Segoe UI', sans-serif;
background: linear-gradient(135deg, #e0eafc, #cfdef3);
}

.navbar {
background-color: #2C3E50;
padding: 15px 30px;
color: white;
display: flex;
justify-content: space-between;
align-items: center;
}

.navbar h1 {
margin: 0;
font-size: 24px;
}

.navbar input[type=submit] {
padding: 8px 16px;
border-radius: 5px;
border: none;
background: #E74C3C;
color: white;
cursor: pointer;
}

.main-content {
padding: 40px 20px;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 30px;
max-width: 1100px;
margin: auto;
}
.card {
background: white;
border-radius: 15px;
padding: 25px;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
transition: transform 0.2s;
}

.card:hover {
transform: translateY(-5px);
}

.card h2 {
color: #34495E;
margin-bottom: 10px;
}

.card p {
color: #666;
}

.profile-pic {
width: 100px;
height: 130px;
border-radius: 8px;
object-fit: cover;
margin-bottom: 10px;
border: 2px solid #3498DB;
}
.quick-links button {
background-color: #3498DB;
color: white;
border: none;
padding: 10px 15px;
margin: 5px;
border-radius: 8px;
cursor: pointer;
transition: background-color 0.3s;
}

.quick-links button:hover {
background-color: #2980B9;
}

.form-container {
background: white;
padding: 30px;
max-width: 400px;
margin: 80px auto;
border-radius: 15px;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}

input[type=text], input[type=password] {
width: 100%;
padding: 12px;
margin-top: 10px;
margin-bottom: 20px;
border: 1px solid #ccc;
border-radius: 8px;
}

input[type=submit] {
background-color: #3498DB;
color: white;
padding: 12px;
border: none;
border-radius: 8px;
width: 100%;
font-size: 16px;
cursor: pointer;
}

input[type=submit]:hover {
background-color: #2980B9;
}

.error {
color: red;
margin-bottom: 15px;
}

.upload-msg {
color: green;
margin-top: 10px;
}
</style>
</head>
<body>
<?php if (isset($_SESSION['username'])): ?>
<div class="navbar">
<h1>Welcome, <?= htmlspecialchars($_SESSION['username']) ?>!</h1>
<form method="post">
<input type="submit" name="signout" value="Sign Out">
</form>
</div>

<div class="main-content">
<div class="card">
<h2>🎉 Dashboard</h2>
<p>This is your personalized dashboard. Explore tools and features tailored for
you.</p>
</div>

<div class="card">
<h2>👤 Profile</h2>
<?php if (isset($_SESSION['profile_pic']) &&
file_exists($_SESSION['profile_pic'])): ?>
<img src="<?= $_SESSION['profile_pic'] ?>" class="profile-pic" alt="Profile
Picture">
<?php else: ?>
<img src="https://via.placeholder.com/100x130?text=No+Image" class="profile-
pic" alt="Default Profile">

<?php endif; ?>


<p><strong>Name:</strong> <?= htmlspecialchars($_SESSION['username']) ?></p>
<p><strong>Email:</strong> [email protected]</p>
<form method="post" enctype="multipart/form-data">
<input type="file" name="profile_pic" accept="image/*" required><br><br>
<input type="submit" name="upload" value="Upload Picture">
</form>
<?php if (!empty($upload_message)) echo "<p class='upload-
msg'>$upload_message</p>"; ?>
</div>

<div class="card">
<h2>📋 To-Do List</h2>
<ul>
<li>✔️Complete dashboard UI</li>
<li>🔧 Add settings page</li>
<li>📤 Upload profile picture</li>
</ul>
</div>

<div class="card quick-links">


<h2>🔗 Quick Actions</h2>
<button>Settings</button>
<button>Messages</button>
<button>Upload</button>
<button>Help</button>
</div>
</div>

<?php else: ?>


<div class="form-container">
<h2>Sign In</h2>
<?php if (!empty($message)) echo "<div class='error'>$message</div>"; ?>
<form method="post">
<label>Username</label>
<input type="text" name="username" required>
<label>Password</label>
<input type="password" name="password" required>
<input type="submit" name="signin" value="Sign In">
</form>
</div>
<?php endif; ?>

</body>
</html>
Output :-

You might also like