This commit is contained in:
nm1 2026-11-04 00:33:23 +05:30
commit 74ae93a96e
8 changed files with 94691 additions and 0 deletions

View file

@ -0,0 +1,295 @@
Login
```html
<!--<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<style id="webmakerstyle">
body{
background-color: steelblue;
color: white;
font-family: 'Muli', sans-serif;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
overflow: hidden;
margin: 0;
}
.container{
background-color: rgba(0,0,0,0.4);
padding : 20px 40px;
border-radius: 5px;
}
.container h1{
text-align: center;
margin-bottom: 30px;
}
.container a{
text-decoration: none;
color: lightblue;
}
.btn{
cursor: pointer;
display :inline-block;
width: 100%;
background: lightblue;
padding: 15px;
font-family: inherit;
font-size: 16px;
border: 0;
border-radius: 5px;
}
.btn:focus{
outline: 0;
}
.btn:active{
transform: scale(0.98);
}
.text{
margin-top: 30px;
}
.form-control{
position: relative;
margin : 20px 0 40px;
width : 300px;
}
.form-control input{
background-color : transparent;
border: 0;
border-bottom: 2px solid lightblue;
/* border-bottom-color : lightblue; */
display : block;
width : 100%;
padding: 15px 0;
font-size : 18px;
color: white;
}
.form-control input:focus,
.form-control input:valid{
outline: 0;
border-bottom-color : lightblue;
}
.form-control label{
position : absolute;
top: 15px;
left : 0;
pointer-events : none;
color: lightgray;
font-size: 18px;
transition: 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.form-control label {
display : inline-block;
font-size : 18px;
min-width : 5px;
transition : 0.3s cubic-bezier(0.68,-0.55,0.265,1.55);
}
.form-control input:focus ~ label ,
.form-control input:valid ~ label {
color: lightblue;
transform : translateY(-30px);
}
</style>
</head>
<body>
<div class="container">
<h1>Please Login</h1>
<form action="">
<div class="form-control">
<input type="text" required>
<label for="">Email</label>
</div>
<div class="form-control">
<input type="password" required>
<label for="">Password</label>
</div>
<button class="btn">Login</button>
<p class="text">Don't have an account? <a href="#">Register</a></p>
</form>
</div>
<script>
// const labels=document.querySelectorAll('.form-control label')
//
// labels.forEach(label=>{
// label.innerHTML=label.innerText.split('').map( (letter,idx)=> `span style="transition-delay:${idx*50}ms">${letter}</span> ` ).join('')
// })
// # sourceURL=userscript.js
</script>
</body>
</html>-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<style id="webmakerstyle">
body {
background-color: #f0f0f0; /* Light background for the body */
color: #333; /* Dark text color for readability */
font-family: 'Muli', sans-serif;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
overflow: hidden;
margin: 0;
}
.container {
background-color: #ffffff; /* White background for the container */
padding: 20px 40px;
border-radius: 5px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* Optional: add subtle shadow for depth */
}
.container h1 {
text-align: center;
margin-bottom: 30px;
}
.container a {
text-decoration: none;
color: #333; /* Dark color for links */
}
.container a:hover{
color : grey;
}
.btn {
cursor: pointer;
display: inline-block;
width: 100%;
background: #333; /* Dark background for button */
color: #fff; /* White text color for button */
padding: 15px;
font-family: inherit;
font-size: 16px;
border: 0;
border-radius: 5px;
}
.btn:hover{
background-color: #111;
}
.btn:focus {
outline: 0;
}
.btn:active {
transform: scale(0.98);
}
.text {
margin-top: 30px;
}
.form-control {
position: relative;
margin: 20px 0 40px;
width: 300px;
}
.form-control input {
background-color: transparent;
border: 0;
border-bottom: 2px solid #333; /* Black border for input fields */
display: block;
width: 100%;
padding: 15px 0;
font-size: 18px;
color: #333; /* Dark text color for input fields */
}
.form-control input:focus,
.form-control input:valid {
outline: 0;
border-bottom-color: #333; /* Black color for border on focus */
}
.form-control label {
position: absolute;
top: 15px;
left: 0;
pointer-events: none;
color: #666; /* Gray color for label text */
font-size: 18px;
transition: 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.form-control label span {
display: inline-block;
min-width: 5px;
transition: 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.form-control input:focus ~ label span,
.form-control input:valid ~ label span {
color: #333; /* Black color for label on focus */
transform: translateY(-30px);
}
</style>
</head>
<body>
<div class="container">
<h1>Please Login</h1>
<form action="">
<div class="form-control">
<input type="text" id="email" required>
<label for="email"><span>Email</span></label>
</div>
<div class="form-control">
<input type="password" id="password" required>
<label for="password"><span>Password</span></label>
</div>
<button class="btn">Login</button>
<p class="text">Don't have an account? <a href="#">Register</a></p>
</form>
</div>
<script>
// Uncomment and use the following script if needed for animation
// const labels = document.querySelectorAll('.form-control label');
// labels.forEach(label => {
// label.innerHTML = label.innerText.split('')
// .map((letter, idx) => `<span style="transition-delay:${idx * 50}ms">${letter}</span>`)
// .join('');
// });
</script>
</body>
</html>
```

View file

@ -0,0 +1,154 @@
Overlay
```html
<div className="Overlay">
<div className="OverlayBox">
<div className="message">
<h3>This will delete your question. Are you sure?</h3>
</div>
<div className="actionSection">
<div className="ok">
<button className="okbtn">Ok</button>
</div>
<div className="cancel">
<button className="cancelbtn">Cancel</button>
</div>
</div>
</div>
</div>
```
```scss
.Overlay {
// to overlay over all others
z-index: 10;
display: flex;
position: fixed;
// position: absolute;
top: 0;
// position: relative;
width: 100vw;
min-height: 100vh;
min-height: 100%;
// height: 100vh;
// min-height: fit-content;
// height: min(100vh, fit-content);
background-color: rgba($color: #000000, $alpha: 0.8);
.OverlayBox {
// when height is too so reducing its height to make it scrollable. has issues but best workaround
max-height: 100vh;
overflow-y: auto;
justify-content: center;
align-items: center;
background-color: white;
width: 300px;
aspect-ratio: 2/1;
// position: fixed;
// position: absolute;
position: relative;
// inset: 0;
margin: auto;
padding: 0.5rem;
border: 10px solid grey;
border-radius: 4px;
box-shadow: 0 4px 8px rgba($color: white, $alpha: 0.2);
.message {
color: $navColor;
}
.actionSection {
width: 100%;
display: flex;
// occupying rest of space so to push ok and cancel at end
r// both horizontally and vertically
flex: 1;
align-items: flex-end;
justify-content: flex-end;
.ok,
.cancel {
margin: 0.3rem;
button {
@include buttonDim;
padding: 0.4rem;
width: 4rem;
}
}
.ok button:hover {
background-color: $correct-ans-color;
}
.cancel button:hover {
background-color: $wrong-ans-color;
}
}
}
}
@include media-xs-400-height {
.Overlay {
.OverlayBox {
// max-width: 300px;
}
}
}
```
```jsx
import "./Overlay.scss";
function Overlay(props) {
const { isOverlayVisible, setIsOverlayVisible, message, children } = props;
console.log("children :", children);
const cancelEvent = () => {
setIsOverlayVisible(false);
};
const okEvent = () => {
setIsOverlayVisible(false);
};
// if no children elements then children will be empty object
return (
<div className="Overlay">
<div className="OverlayBox">
<div className="message">
<h3>{message}</h3>
</div>
{children ? children : <></>}
<div className="actionSection">
<div className="ok">
<button className="okbtn" onClick={okEvent}>
Ok
</button>
</div>
<div className="cancel">
<button className="cancelbtn" onClick={cancelEvent}>
Cancel
</button>
</div>
</div>
</div>
</div>
);
}
export default Overlay;
```

View file

@ -0,0 +1,240 @@
Questions with answers ui
```html
<div className="ShowQuizMain">
<div className="ShowQuizSection">
<div className="extraButtonsSection">
<div className="expandAll">
<button>Expand All</button>
</div>
<div className="collapseAll">
<button>Collapse All</button>
</div>
</div>
<div className="QuestionBox">
<div className="headerSection">
<div className="col1">
<h4 className="technologyText"> Technology : Java</h4>
</div>
<div className="col2">
<div className="update">
<button title="edit">
<i class="fas fa-edit"></i>
</button>
</div>
<div className="delete">
<button title="delete">
<i class="fas fa-trash"></i>
</button>
</div>
</div>
</div>
<div className="QuestionBox_Question">
<div className="QuestionBox_Question_Text">
1. What is Java? What is Java? What is Java? What is Java? What is
Java? What is Java? What is Java? What is Java? What is Java? What
is Java? What is Java? What is Java? What is Java?
</div>
<button className="toggleAnsBtn">
<i className="arrow up"></i>
</button>
</div>
<div className="QuestionBox_Options_Container">
<div className="QuestionBox_Options visible">
<div className="QuestionBox_Options_Option">
a. Java is object oriented language
</div>
<div className="QuestionBox_Options_Option correct">
b. Java is not an object oriented language
</div>
<div className="QuestionBox_Options_Option">
c. Java is annoying
</div>
</div>
</div>
</div>
</div>
</div>
```
```scss
@import "../config";
@import "./Arrows";
.ShowQuizMain {
padding-top: 20px;
width: 100%;
flex: 1;
display: flex;
justify-content: center;
background-color: $dimwhite;
min-height: 500px;
.ShowQuizSection {
width: 70%;
padding: 0 0.5rem;
min-width: 500px;
background-color: white;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); // Added subtle shadow
.extraButtonsSection {
width: 100%;
padding: 1rem;
display: flex;
justify-content: flex-end;
.expandAll,
.collapseAll {
margin: 0 1rem;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); // Added subtle shadow
button {
cursor: pointer;
padding: 0.5rem 1rem;
border: none;
border: 1px solid black;
border-radius: 3px;
background-color: transparent;
&:hover {
background-color: $dimwhite;
}
}
}
}
}
.ShowQuizSection .QuestionBox {
// overflow: hidden;
margin: 1rem auto;
// padding-top: 2rem;
width: 70%;
.headerSection {
display: flex;
border-top: 1px solid black;
background-color: whitesmoke;
.technologyText {
padding: 0.1rem;
margin: 0;
}
.update button,
.delete button {
background-color: rgba(0, 0, 0, 0.1);
border: none;
cursor: pointer;
padding: 0.3rem;
font-size: 1rem;
transition: all 0.1s ease-in-out;
}
.delete button:hover {
background-color: $delete-btn-hover;
}
.update button:hover {
background-color: $edit-btn-hover;
}
.update {
margin-right: 0.2rem;
}
.col1,
.col2 {
width: 50%;
display: flex;
align-items: center;
}
.col2 {
justify-content: flex-end;
}
}
&_Question {
position: relative;
// background-color: $navColor;
border: 1px solid $dimwhite;
background-color: white;
border-radius: 5px;
padding: 0.5rem 1rem;
padding-right: 2rem;
// color: white;
color: black;
line-height: 1.5rem;
.toggleAnsBtn {
position: absolute;
right: 10px;
bottom: 15px;
transform: scale(1.2);
padding: 0 4px;
// color: white;
color: black;
border: none;
// background-color: rgba($color: white, $alpha: 0.1);
background-color: rgba($color: black, $alpha: 0.1);
// background-color: transparent;
border-radius: 50%;
cursor: pointer;
}
}
&_Options_Container {
overflow: hidden;
}
&_Options {
// width: 99%;
margin: 0 auto;
// box-sizing: border-box;
transform: translateY(-100%);
transition: all 0.3s ease-in-out;
padding: 0.5rem 0rem;
// color: white;
color: black;
// background-color: $dimwhite;
background-color: $options-bg-color;
&_Option {
background-color: $wrong-ans-color;
padding: 0.75rem;
margin: 0.5rem;
border-radius: 5px;
&.correct {
background-color: $correct-ans-color;
}
}
&.visible {
transform: translateY(0%);
transition: all 0.3s ease-in-out;
}
}
}
}
// config.scss
$navColor: rgba(20, 20, 20, 0.9);
$dimwhite: rgb(220, 220, 220);
$wrong-ans-color: rgba(#ba0021, 0.3);
$correct-ans-color: rgba(green, 0.3);
$options-bg-color: rgba(
$color: grey,
$alpha: 0.2,
);
$delete-btn-hover: rgba(red, 0.3);
$edit-btn-hover: rgba(blue, 0.3);
```

View file

@ -0,0 +1,50 @@
Rotating arrow
```html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.arrow {
border: solid black;
border-width: 0 3px 3px 0;
display: inline-block;
padding: 3px;
}
.right {
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
}
.left {
transform: rotate(135deg);
-webkit-transform: rotate(135deg);
}
.up {
transform: rotate(-135deg);
-webkit-transform: rotate(-135deg);
}
.down {
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
}
</style>
</head>
<body>
<h2>CSS Arrows</h2>
<p>arrow: <i class="arrow"></i></p>
<p>Right arrow: <i class="arrow right"></i></p>
<p>Left arrow: <i class="arrow left"></i></p>
<p>Up arrow: <i class="arrow up"></i></p>
<p>Down arrow: <i class="arrow down"></i></p>
</body>
</html>
```

View file

@ -0,0 +1,94 @@
Sidepanel
```html
<div class="sidePanel">
<div class="userList">
<div class="userItem" onclick="toggleQuizzes('user1')">
User 1
</div>
<div class="userQuizzes" id="user1">
<ul>
<li>Quiz 1</li>
<li>Quiz 2</li>
<li>Quiz 3</li>
</ul>
</div>
<div class="userItem" onclick="toggleQuizzes('user2')">
User 2
</div>
<div class="userQuizzes" id="user2">
<ul>
<li>Quiz A</li>
<li>Quiz B</li>
</ul>
</div>
<div class="userItem" onclick="toggleQuizzes('user2')">
User 2
</div>
<div class="userQuizzes" id="user2">
<ul>
<li>Quiz A</li>
<li>Quiz B</li>
</ul>
</div>
</div>
</div>
```
&nbsp;
```css
body {
margin: 0;
font-family: Arial, sans-serif;
}
.sidePanel {
width: 200px;
height: 100vh;
background-color: #f4f4f4;
box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
overflow-y: auto;
position: absolute;
top: 0;
left: 0;
// transform: translateX(-100%);
}
.userList {
padding: 20px;
}
.userItem {
background-color: #ffffff;
border: 1px solid #ddd;
border-radius: 4px;
margin-bottom: 10px;
padding: 10px;
cursor: pointer;
transition: background-color 0.3s;
}
.userItem:hover {
background-color: #e0e0e0;
}
.userQuizzes {
display: none;
background-color: #ffffff;
border: 1px solid #ddd;
border-radius: 4px;
padding: 10px;
margin-bottom: 10px;
}
.userQuizzes ul {
list-style-type: none;
padding: 0;
margin: 0;
}
.userQuizzes li {
padding: 5px 0;
}
```

View file

@ -0,0 +1,90 @@
confirmation feature on button without js
```html
<form action="/register" method="POST">
<!-- Registration Fields -->
<label for="username">Username:</label>
<input type="text" id="username" name="username" required>
<label for="password">Password:</label>
<input type="password" id="password" name="password" required>
<!-- The CSS Hack Trigger -->
<div class="submit-wrapper">
<input type="checkbox" id="unlock-submit" class="toggle-gate">
<label for="unlock-submit" class="cover-button">Register</label>
<button type="submit" class="real-button">Confirm Registration</button>
</div>
</form>
<style>
.submit-wrapper {
position: relative;
display: inline-block;
}
/* Hide the actual checkbox */
.toggle-gate {
display: none;
}
/* The fake button that sits on top */
.cover-button {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #007bff;
color: white;
text-align: center;
line-height: 35px;
cursor: pointer;
z-index: 2;
}
/* The real submit button hidden underneath */
.real-button {
padding: 8px 16px;
background: #28a745;
color: white;
border: none;
cursor: pointer;
}
/* When the fake button is clicked, it checks the box and hides itself */
.toggle-gate:checked ~ .cover-button {
display: none;
}
</style>
```
tailwind
```html
<form action="/register" method="POST" class="max-w-md mx-auto p-6 bg-white rounded-lg shadow-md space-y-4">
<!-- Registration Fields -->
<div>
<label for="username" class="block text-sm font-medium text-gray-700 mb-1">Username</label>
<input type="text" id="username" name="username" required class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
</div>
<div>
<label for="password" class="block text-sm font-medium text-gray-700 mb-1">Password</label>
<input type="password" id="password" name="password" required class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
</div>
<!-- The CSS Hack Trigger Container -->
<div class="relative inline-block w-full pt-2">
<!-- Hidden Checkbox using Tailwind's peer utility -->
<input type="checkbox" id="unlock-submit" class="peer hidden">
<!-- First Click: The Fake Button Label -->
<label for="unlock-submit" class="absolute inset-x-0 bottom-0 top-2 flex items-center justify-center bg-blue-600 hover:bg-blue-700 text-white font-semibold py-2 px-4 rounded-md cursor-pointer z-10 transition-colors peer-checked:hidden">
Register
</label>
<!-- Second Click: The Real Submit Button -->
<button type="submit" class="w-full bg-green-600 hover:bg-green-700 text-white font-semibold py-2 px-4 rounded-md transition-colors">
Confirm Registration
</button>
</div>
</form>
```

View file

@ -0,0 +1,34 @@
custom dropdown with bootstrap
```html
<style>
.mh-250{
max-height: 250px;
}
</style>
<div class="btn-group w-100 border">
<button
type="button"
class="btn btn-secondary bg-transparent text-black fs-5 border-0 text-start"
>
--Select--
</button>
<button
style="max-width: 50px"
class="btn btn-secondary dropdown-toggle dropdown-toggle-split p-2 bg-transparent text-black fit-content fs-5 border-0"
type="button"
id="dropdownMenuButton1"
data-bs-toggle="dropdown"
aria-expanded="false"
></button>
<ul
class="dropdown-menu mh-250 overflow-auto w-100"
id="yearSelect"
aria-labelledby="dropdownMenuButton1"
>
<li><a class="dropdown-item" href="#">--Select-- </a></li>
</ul>
</div>
```

View file

@ -0,0 +1,8 @@
files
[editForm.html](../../../../_resources/editForm.html)
![6d57ac6198a3e6ab73f0434570274c94.png](../../../../_resources/6d57ac6198a3e6ab73f0434570274c94.png)
[editForm2.html](../../../../_resources/editForm2.html)
![df489f8d73a0478a32d881d677a3d05f.png](../../../../_resources/df489f8d73a0478a32d881d677a3d05f.png)
[tabsAtTtop.html](../../../../_resources/tabsAtTtop.html)
![839f43ee9063f6d8db32e3fbeeebe3e9.png](../../../../_resources/839f43ee9063f6d8db32e3fbeeebe3e9.png)