-
Notifications
You must be signed in to change notification settings - Fork 0
/
char.html
165 lines (149 loc) · 6.36 KB
/
char.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>SPLIT</title>
<link rel='stylesheet' href='css/styles.css'>
<!-- Page SEO -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="description" content="Line-breaker at every 100th line (Default), At each line-break, Input is splitted Among textareas">
<meta name="keywords" content="Line-break,Ron,Help">
<meta name="author" content="Ashiqsaleem">
<!-- PAGE FONT Settings -->
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700" rel="stylesheet">
<link rel="stylesheet" href= "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<!-- Page Body -->
<body class="gradient" style="font-family: 'Source Sans Pro', sans-serif;">
<!-- Header Bar -->
<nav id="header" class="shadow fixed w-full z-30 bg-white">
<div class="w-full container mx-auto flex flex-wrap items-center justify-between mt-0 py-2">
<div class="pl-4 flex items-center">
<a class="toggleColour text-cpep no-underline hover:no-underline font-bold text-2xl lg:text-4xl" href="#"><i class="fa fa-cut icon"></i> SPLIT</a>
</div>
<!-- Responsive Hiddden Mobile Bread-crumb -->
<div class="block lg:hidden pr-4">
<button id="nav-toggle" class="flex items-center px-3 py-2 rounded text-white gradient appearance-none focus:outline-none">
<svg class="fill-current h-3 w-3" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<title>Menu</title>
<path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z"/>
</svg>
</button>
</div>
<!-- Main Menu Bar -->
<div class="w-full flex-grow lg:flex lg:items-center lg:w-auto hidden lg:block mt-2 lg:mt-0 bg-white lg:bg-transparent text-black p-4 lg:p-0 z-20" id="nav-content">
<ul class="list-reset lg:flex justify-end flex-1 items-center">
<li class="mr-3">
<a class="inline-block text-black no-underline py-2 px-4" href="index.html">Line</a>
</li>
<li class="mr-3">
<a class="inline-block py-2 px-4 text-cpep font-bold activ no-underline" href="#">Character</a>
</li>
</ul>
</div>
</div>
<hr class=" border-gray-100 opacity-25 my-0 py-0" />
</nav>
<!-- Page Contents -->
<section class="bg-white py-8">
<div class="container mx-auto px-2 pt-4 text-gray-800 my-14">
<div class="flex flex-col sm:flex-row justify-center ipad pt-12">
<div class="flex flex-col w-5/6 lg:w-1/3 mx-auto lg:mx-0 rounded-lg bg-white mt-4 sm:-mt-6 shadow-lg z-10">
<div class="bg-white rounded-lg overflow-hidden">
<div class="w-full p-8 text-3xl font-bold text-center">Splitter</div>
<div class="h-1 w-full gradient my-0 py-0 rounded-t form"></div>
<div id="form" class="form">
<div class="form-control">
<i class="fa fa-cut icon"></i>
<input type="number" id="cutter" value="100" required autocomplete="on" placeholder="Custom Limit">
</div>
<div class="form-control">
<textarea id="breakme" autocomplete="off" required placeholder="Enter Charcters To Split"></textarea>
</div>
<button id="done" class="btn gradient" onclick="split()">SPLIT</button>
</div>
</div>
</div>
<div>
<div class="w-5/6 p-10">
<h3 class="text-3xl text-gray-800 font-bold leading-none mb-3"><br>Character splitter</h3>
<p class="text-gray-600 mb-8"><br>
Limit at every 100th Character (Default)<br>when limit Reaches, Input is splitted Among textareas.<br><br>Note: Certain Charcters such as <br><b>Whitespace</b> and <b>line-break</b> <br>won't be omitted when splitting
</p>
</div>
</div>
</div>
</div>
</section>
<!-- Responsive Output Textarea -->
<div id="FR" class="cards">
</div>
<footer>
<div class="container mx-auto px-8 my-12">
<div class="w-full flex flex-col md:flex-row">
<div class="flex-1">
<a class="text-white no-underline hover:no-underline font-bold text-2xl lg:text-4xl" href="#">
SPLIT | v1.0
</a>
</div>
</div>
</div>
</footer>
<script>
// Voila !
//Behold The Splitter Engine. LOL!
var txt=document.getElementById("breakme");
var nt;
function split(){
var ctr=document.getElementById("cutter").value;
if(ctr > 0 && txt.value != "" && txt.value != " " ){
var ct=0;
document.getElementById("FR").innerHTML="";
while(true){
nt=parseInt(ct) + parseInt(ctr);
document.getElementById("FR").innerHTML+="<div class='card'><textarea>"+txt.value.substring(ct,nt)+"</textarea></div>";
ct=parseInt(ct) + parseInt(ctr);
if(nt >= txt.value.length){break;}
}
document.getElementById("done").textContent="DONE";
document.getElementById("done").style.background="#4CAF50";
setTimeout(function(){
document.getElementById("done").style.background="linear-gradient(90deg, #E91E63 0%, #3F51B5 100%)";
document.getElementById("done").textContent="SPLIT";
},1000);
}
}
</script>
<script>
//Script Section For Toggling Menu in Mobile View
var navMenuDiv = document.getElementById("nav-content");
var navMenu = document.getElementById("nav-toggle");
document.onclick = check;
function check(e){
var target = (e && e.target) || (event && event.srcElement);
//Nav Menu
if (!checkParent(target, navMenuDiv)) {
// click NOT on the menu
if (checkParent(target, navMenu)) {
// click on the link
if (navMenuDiv.classList.contains("hidden")) {
navMenuDiv.classList.remove("hidden");
} else {navMenuDiv.classList.add("hidden");}
} else {
// click both outside link and outside menu, hide menu
navMenuDiv.classList.add("hidden");
}
}
}
function checkParent(t, elm) {
while(t.parentNode) {
if( t == elm ) {return true;}
t = t.parentNode;
}
return false;
}
</script>
</body>
</html>