s2
This commit is contained in:
@@ -1,176 +1,126 @@
|
||||
<style>
|
||||
/* body {
|
||||
font-family: Arial, sans-serif;
|
||||
background-color: #f0f0f0;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
} */
|
||||
|
||||
.container-dyz {
|
||||
max-width: 600px;
|
||||
margin: 50px auto;
|
||||
padding: 20px;
|
||||
background-color: #3d3d3d;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
.table-container {
|
||||
max-width: 900px;
|
||||
margin: 50px auto;
|
||||
padding: 20px;
|
||||
background-color: #3d3d3d;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
label {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.textarea-text {
|
||||
width: 100%;
|
||||
height: 150px;
|
||||
margin-bottom: 10px;
|
||||
resize: vertical;
|
||||
padding: 10px;
|
||||
border-radius: 4px;
|
||||
border: 1px solid #ccc;
|
||||
font-size: 16px;
|
||||
background-color: #1d1d1d;
|
||||
}
|
||||
span {
|
||||
color: #007bff;
|
||||
font-weight: bold;
|
||||
}
|
||||
.content-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
.content-table th, .content-table td {
|
||||
border: 1px solid #dddddd;
|
||||
text-align: left;
|
||||
padding: 8px;
|
||||
}
|
||||
.content-table .table-head {
|
||||
background-color: #f2f2f2;
|
||||
}
|
||||
</style>
|
||||
<div class="container-dyz">
|
||||
<h1>Text Counter</h1>
|
||||
<section class="diZContainer diZmxAuto">
|
||||
<h1 class="diZBorderBottom">Text Counter</h1>
|
||||
<div class="diZMaxW600 diZmxAuto diZmyAuto diZFlexColumn toolsSection diZmt20">
|
||||
<label for="inputText">Enter your text:</label><br>
|
||||
<textarea class="textarea-text" id="inputText" placeholder="Type your text here..." oninput="countTextMetrics()"></textarea>
|
||||
<p>Total letters: <span id="letterCount">0</span></p>
|
||||
<p>Total words: <span id="wordCount">0</span></p>
|
||||
<p>Total sentences: <span id="sentenceCount">0</span></p>
|
||||
<p>Total paragraphs: <span id="paragraphCount">0</span></p>
|
||||
</div>
|
||||
<div class="table-container">
|
||||
<h2 style="text-align: center; font-size: 25px; font-weight: bold;">Content Limitations</h2>
|
||||
<table class="content-table">
|
||||
<tr>
|
||||
<th class="name">Name</th>
|
||||
<th class="min-max">Min/Max</th>
|
||||
<th class="limit">Limit</th>
|
||||
<th class="type">Type</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="name">Meta Title</td>
|
||||
<td class="min-max">Max</td>
|
||||
<td class="limit">55</td>
|
||||
<td class="type">Letter</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="name">Meta Description</td>
|
||||
<td class="min-max">Max</td>
|
||||
<td class="limit">160</td>
|
||||
<td class="type">Letter</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="name">Google Ideal Post Content</td>
|
||||
<td class="min-max">Min</td>
|
||||
<td class="limit">300</td>
|
||||
<td class="type">Word</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="name">Instagram Captions/Comments</td>
|
||||
<td class="min-max">Max</td>
|
||||
<td class="limit">2200</td>
|
||||
<td class="type">Letter</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="name">Twitter Post</td>
|
||||
<td class="min-max">Max</td>
|
||||
<td class="limit">280</td>
|
||||
<td class="type">Letter</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="name">Twitter Username</td>
|
||||
<td class="min-max">Max</td>
|
||||
<td class="limit">20</td>
|
||||
<td class="type">Letter</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="name">Facebook Wall Post (Truncation)</td>
|
||||
<td class="min-max">Max</td>
|
||||
<td class="limit">477</td>
|
||||
<td class="type">Letter</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="name">Facebook Wall Post (All)</td>
|
||||
<td class="min-max">Max</td>
|
||||
<td class="limit">63206</td>
|
||||
<td class="type">Letter</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="name">Facebook Comment</td>
|
||||
<td class="min-max">Max</td>
|
||||
<td class="limit">8000</td>
|
||||
<td class="type">Letter</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="name">Facebook Page Description</td>
|
||||
<td class="min-max">Max</td>
|
||||
<td class="limit">255</td>
|
||||
<td class="type">Letter</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="name">Facebook Username</td>
|
||||
<td class="min-max">Max</td>
|
||||
<td class="limit">50</td>
|
||||
<td class="type">Letter</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="name">Facebook Messenger Message</td>
|
||||
<td class="min-max">Max</td>
|
||||
<td class="limit">20000</td>
|
||||
<td class="type">Letter</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="name">YouTube Video Title</td>
|
||||
<td class="min-max">Max</td>
|
||||
<td class="limit">70</td>
|
||||
<td class="type">Letter</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="name">YouTube Video Description</td>
|
||||
<td class="min-max">Max</td>
|
||||
<td class="limit">5000</td>
|
||||
<td class="type">Letter</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="name">Snapchat Caption</td>
|
||||
<td class="min-max">Max</td>
|
||||
<td class="limit">250</td>
|
||||
<td class="type">Letter</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="name">Pinterest Pin Description</td>
|
||||
<td class="min-max">Max</td>
|
||||
<td class="limit">500</td>
|
||||
<td class="type">Letter</td>
|
||||
</tr>
|
||||
</table>
|
||||
<textarea class="" rows="10" id="inputText" placeholder="Type your text here..." oninput="countTextMetrics()" style="resize: vertical;"></textarea>
|
||||
<div>
|
||||
<p>Total letters: <span id="letterCount">0</span></p>
|
||||
<p>Total words: <span id="wordCount">0</span></p>
|
||||
<p>Total sentences: <span id="sentenceCount">0</span></p>
|
||||
<p>Total paragraphs: <span id="paragraphCount">0</span></p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="diZContainer diZmxAuto diZmb20">
|
||||
<div>
|
||||
<h2 class="diZBorderBottom">Content Limitations</h2>
|
||||
<table class="diZw70 diZmxAuto">
|
||||
<tr>
|
||||
<th class="diZTableBorder diZPadding5px">Name</th>
|
||||
<th class="diZTableBorder diZPadding5px">Min/Max</th>
|
||||
<th class="diZTableBorder diZPadding5px">Limit</th>
|
||||
<th class="diZTableBorder diZPadding5px">Type</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="diZTableBorder diZPadding5px">Meta Title</td>
|
||||
<td class="diZTableBorder diZPadding5px">Max</td>
|
||||
<td class="diZTableBorder diZPadding5px">55</td>
|
||||
<td class="diZTableBorder diZPadding5px">Letter</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="diZTableBorder diZPadding5px">Meta Description</td>
|
||||
<td class="diZTableBorder diZPadding5px">Max</td>
|
||||
<td class="diZTableBorder diZPadding5px">160</td>
|
||||
<td class="diZTableBorder diZPadding5px">Letter</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="diZTableBorder diZPadding5px">Google Ideal Post Content</td>
|
||||
<td class="diZTableBorder diZPadding5px">Min</td>
|
||||
<td class="diZTableBorder diZPadding5px">300</td>
|
||||
<td class="diZTableBorder diZPadding5px">Word</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="diZTableBorder diZPadding5px">Instagram Captions/Comments</td>
|
||||
<td class="diZTableBorder diZPadding5px">Max</td>
|
||||
<td class="diZTableBorder diZPadding5px">2200</td>
|
||||
<td class="diZTableBorder diZPadding5px">Letter</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="diZTableBorder diZPadding5px">Twitter Post</td>
|
||||
<td class="diZTableBorder diZPadding5px">Max</td>
|
||||
<td class="diZTableBorder diZPadding5px">280</td>
|
||||
<td class="diZTableBorder diZPadding5px">Letter</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="diZTableBorder diZPadding5px">Twitter Username</td>
|
||||
<td class="diZTableBorder diZPadding5px">Max</td>
|
||||
<td class="diZTableBorder diZPadding5px">20</td>
|
||||
<td class="diZTableBorder diZPadding5px">Letter</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="diZTableBorder diZPadding5px">Facebook Wall Post (Truncation)</td>
|
||||
<td class="diZTableBorder diZPadding5px">Max</td>
|
||||
<td class="diZTableBorder diZPadding5px">477</td>
|
||||
<td class="diZTableBorder diZPadding5px">Letter</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="diZTableBorder diZPadding5px">Facebook Wall Post (All)</td>
|
||||
<td class="diZTableBorder diZPadding5px">Max</td>
|
||||
<td class="diZTableBorder diZPadding5px">63206</td>
|
||||
<td class="diZTableBorder diZPadding5px">Letter</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="diZTableBorder diZPadding5px">Facebook Comment</td>
|
||||
<td class="diZTableBorder diZPadding5px">Max</td>
|
||||
<td class="diZTableBorder diZPadding5px">8000</td>
|
||||
<td class="diZTableBorder diZPadding5px">Letter</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="diZTableBorder diZPadding5px">Facebook Page Description</td>
|
||||
<td class="diZTableBorder diZPadding5px">Max</td>
|
||||
<td class="diZTableBorder diZPadding5px">255</td>
|
||||
<td class="diZTableBorder diZPadding5px">Letter</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="diZTableBorder diZPadding5px">Facebook Username</td>
|
||||
<td class="diZTableBorder diZPadding5px">Max</td>
|
||||
<td class="diZTableBorder diZPadding5px">50</td>
|
||||
<td class="diZTableBorder diZPadding5px">Letter</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="diZTableBorder diZPadding5px">Facebook Messenger Message</td>
|
||||
<td class="diZTableBorder diZPadding5px">Max</td>
|
||||
<td class="diZTableBorder diZPadding5px">20000</td>
|
||||
<td class="diZTableBorder diZPadding5px">Letter</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="diZTableBorder diZPadding5px">YouTube Video Title</td>
|
||||
<td class="diZTableBorder diZPadding5px">Max</td>
|
||||
<td class="diZTableBorder diZPadding5px">70</td>
|
||||
<td class="diZTableBorder diZPadding5px">Letter</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="diZTableBorder diZPadding5px">YouTube Video Description</td>
|
||||
<td class="diZTableBorder diZPadding5px">Max</td>
|
||||
<td class="diZTableBorder diZPadding5px">5000</td>
|
||||
<td class="diZTableBorder diZPadding5px">Letter</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="diZTableBorder diZPadding5px">Snapchat Caption</td>
|
||||
<td class="diZTableBorder diZPadding5px">Max</td>
|
||||
<td class="diZTableBorder diZPadding5px">250</td>
|
||||
<td class="diZTableBorder diZPadding5px">Letter</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="diZTableBorder diZPadding5px">Pinterest Pin Description</td>
|
||||
<td class="diZTableBorder diZPadding5px">Max</td>
|
||||
<td class="diZTableBorder diZPadding5px">500</td>
|
||||
<td class="diZTableBorder diZPadding5px">Letter</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<script>
|
||||
function countTextMetrics() {
|
||||
|
||||
Reference in New Issue
Block a user