Skip to content

Instantly share code, notes, and snippets.

@landsurveyorsunited

landsurveyorsunited/dynamic-sheet-paper-pen.markdown

Created December 24, 2023 01:02
Show Gist options
  • Save landsurveyorsunited/b7fb5c32efc64fbb7b827e2c15e1bf7e to your computer and use it in GitHub Desktop.
Save landsurveyorsunited/b7fb5c32efc64fbb7b827e2c15e1bf7e to your computer and use it in GitHub Desktop.
Download ZIP
Dynamic sheet paper pen
Raw
dynamic-sheet-paper-pen.markdown

Dynamic sheet paper pen

Here user can write his content in paper and can change typography accrding to him

A Pen by JFarrow on CodePen.

License.

Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link href="https://fonts.googleapis.com/css?family=Dancing+Script:400,700|Kaushan+Script|Merienda:400,700|Niconne|Satisfy" rel="stylesheet">
<link rel="stylesheet" href="assets/css/style.css">
</head>
<body>
<div class="tools-wrap">
<ul>
<li class="font-family">
<div class="tool-input-wrap">
<span>Font Family</span>
<select name="" id="">
<option value="">Dancing Script</option>
<option value="">Merienda</option>
<option value="">Niconne</option>
<option value="">Satisfy</option>
<option value="">Kaushan Script</option>
</select>
</div>
</li>
<li class="font-size">
<div class="tool-input-wrap">
<span>Font size</span>
<select name="" id="">
<option value="">16</option>
<option value="">20</option>
<option value="">24</option>
<option value="">28</option>
</select>
</div>
</li>
<li class="color">
<div class="tool-input-wrap">
<span>Color</span>
<input id="colorpicker" type="color" name="favcolor" value="#ff0000" >
</div>
</li>
<li class="font-style">
<div class="tool-input-wrap">
<span>Text-style</span>
<select name="" id="">
<option value="">Normal</option>
<option value="">Italic</option>
</select>
</div>
</li>
<li class="font-weight">
<div class="tool-input-wrap">
<span>Font-weight</span>
<select name="" id="">
<option value="">300</option>
<option value="">400</option>
<option value="">500</option>
<option value="">600</option>
<option value="">700</option>
<option value="">800</option>
</select>
</div>
</li>
<!-- <li class="print-page">
<div class="tool-input-wrap">
<a href="print.html">PRINT</a>
</div>
</li> -->
</ul>
</div>
<div class="a4-wrapper">
<ul>
<li>
</li>
<li>
<div class="input-wrapper">
<input type="text">
</div>
</li>
<li>
<div class="input-wrapper">
<input type="text">
</div>
</li>
<li>
<div class="input-wrapper">
<input type="text">
</div>
</li>
<li>
<div class="input-wrapper">
<input type="text">
</div>
</li>
<li>
<div class="input-wrapper">
<input type="text">
</div>
</li>
<li>
<div class="input-wrapper">
<input type="text">
</div>
</li>
<li>
<div class="input-wrapper">
<input type="text">
</div>
</li>
<li>
<div class="input-wrapper">
<input type="text">
</div>
</li>
<li>
<div class="input-wrapper">
<input type="text">
</div>
</li>
<li>
<div class="input-wrapper">
<input type="text">
</div>
</li>
<li>
<div class="input-wrapper">
<input type="text">
</div>
</li>
<li>
<div class="input-wrapper">
<input type="text">
</div>
</li>
<li>
<div class="input-wrapper">
<input type="text">
</div>
</li>
<li>
<div class="input-wrapper">
<input type="text">
</div>
</li>
<li>
<div class="input-wrapper">
<input type="text">
</div>
</li>
<li>
<div class="input-wrapper">
<input type="text">
</div>
</li>
<li>
<div class="input-wrapper">
<input type="text">
</div>
</li>
<li>
<div class="input-wrapper">
<input type="text">
</div>
</li>
<li>
<div class="input-wrapper">
<input type="text">
</div>
</li>
<li>
<div class="input-wrapper">
<input type="text">
</div>
</li>
<li>
<div class="input-wrapper">
<input type="text">
</div>
</li>
<li>
<div class="input-wrapper">
<input type="text">
</div>
</li>
<li>
<div class="input-wrapper">
<input type="text">
</div>
</li>
<li>
<div class="input-wrapper">
<input type="text">
</div>
</li>
<li>
<div class="input-wrapper">
<input type="text">
</div>
</li>
<li>
<div class="input-wrapper">
<input type="text">
</div>
</li>
<li>
<div class="input-wrapper">
<input type="text">
</div>
</li>
<li>
<div class="input-wrapper">
<input type="text">
</div>
</li>
</ul>
</div>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="assets/js/script.js"></script>
</html>
Raw
script.js
jQuery(document).ready(function($) {
jQuery('.font-size select option').click(function(){ //font-size
var fs= jQuery(this).text();
jQuery('.input-wrapper input').css('font-size',fs+'px' );
});
jQuery('.font-style select option').click(function(){ //font-style
var fst= jQuery(this).text();
jQuery('.input-wrapper input').css('font-style',fst );
});
jQuery('.font-weight select option').click(function(){ //font-weight
var fw= jQuery(this).text();
jQuery('.input-wrapper input').css('font-weight',fw );
});
jQuery('.font-family select option').click(function(){ //font-family
var ff= jQuery(this).text();
jQuery('.input-wrapper input').css('font-family',ff );
});
jQuery('#colorpicker').on('change', function() { //font-color
var ccode= jQuery('#colorpicker').val();
jQuery('.input-wrapper input').css('color',ccode );
});
var ccode= jQuery('#colorpicker').val();
jQuery('.input-wrapper input').css('color',ccode );
});
Raw
style.css
*{
margin: 0;
padding: 0;
}
.a4-wrapper {
max-width: 830px;
margin: 50px auto;
box-shadow: 2px 3px 9px -2px #808080;
position: relative;
}
.a4-wrapper::before, .a4-wrapper::after {
content: "";
border: 1px solid #ec6a6a;
left: 120px;
position: absolute;
top: 0;
bottom: 0;
}
.a4-wrapper::after{
left: 125px;
}
.a4-wrapper ul {
margin: 0;
padding: 0;
list-style: none;
position: relative;
}
.a4-wrapper ul::before, .a4-wrapper ul::after {
position: absolute;
content: "";
height: 25px;
width: 25px;
border-radius: 50%;
background-color: #ffffff;
border: 1px solid #eaeaea;
left: 50px;
top: 25%;
box-shadow: 1px 1px 2px 1px #707070 inset;
}
.a4-wrapper ul::after{
top: 75%;
}
.a4-wrapper li:first-child {
padding-top: 50px;
}
.a4-wrapper li {
height: 40px;
border-bottom: 1px solid #8376f9;
position: relative;
}
.a4-wrapper .input-wrapper {
position: absolute;
top: 0;
bottom: 0;
height: 100%;
border: 0;
right: 10px;
left: 135px;
}
.a4-wrapper .input-wrapper input {
height: 40px;
border: 0;
width: 100%;
font-family: 'Dancing Script', cursive;
font-size: 25px;
color: #2d17bc;
caret-color: rgba(0,0,0,.1);
}
.a4-wrapper {
max-width: 830px;
margin: 100px auto;
box-shadow: 1px 4px 9px -2px #808080;
}
/****tools wrap****/
.tools-wrap {
background-color: #dddddd;
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 99;
padding: 20px 0;
}
.tools-wrap > ul {
display: flex;
list-style: none;
justify-content: space-around;
flex-wrap: wrap;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment