initial
This commit is contained in:
commit
74ae93a96e
8 changed files with 94691 additions and 0 deletions
295
joplin notion extension/Web Development/CSS/Snippets/Login.md
Normal file
295
joplin notion extension/Web Development/CSS/Snippets/Login.md
Normal 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>
|
||||
|
||||
|
||||
```
|
||||
154
joplin notion extension/Web Development/CSS/Snippets/Overlay.md
Normal file
154
joplin notion extension/Web Development/CSS/Snippets/Overlay.md
Normal 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;
|
||||
|
||||
```
|
||||
|
|
@ -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);
|
||||
|
||||
```
|
||||
|
|
@ -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>
|
||||
|
||||
```
|
||||
|
|
@ -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>
|
||||
```
|
||||
|
||||
```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;
|
||||
}
|
||||
|
||||
```
|
||||
|
|
@ -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>
|
||||
|
||||
```
|
||||
|
|
@ -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>
|
||||
```
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
files
|
||||
|
||||
[editForm.html](../../../../_resources/editForm.html)
|
||||

|
||||
[editForm2.html](../../../../_resources/editForm2.html)
|
||||

|
||||
[tabsAtTtop.html](../../../../_resources/tabsAtTtop.html)
|
||||

|
||||
Loading…
Reference in a new issue