\u062d\u0627\u0633\u0628\u0629 \u0637\u0648\u0644 \u0634\u0628\u0647 \u0627\u0644\u0645\u0646\u062d\u0631\u0641 | \u0623\u062f\u0627\u0629 \u0642\u064a\u0627\u0633 \u0627\u062d\u062a\u0631\u0627\u0641\u064a\u0629<\/title>\n <style>\n \/* Reset and base styles *\/\n * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n }\n\n body {\n font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen-Sans, Ubuntu, Cantarell, \"Helvetica Neue\", sans-serif;\n line-height: 1.6;\n color: #333;\n \/* Removed width and margin to avoid conflict with page layout *\/\n }\n\n \/* Calculator container *\/\n .calculator-container {\n background: #fff;\n border-radius: 8px;\n box-shadow: 0 2px 10px rgba(0,0,0,0.1);\n max-width: 1200px; \/* Limit calculator width *\/\n margin: 20px auto; \/* Center the calculator container *\/\n padding: 20px; \/* Add internal padding *\/\n }\n\n \/* Section styles *\/\n .section {\n margin-bottom: 30px;\n }\n\n h2 {\n color: #000;\n font-size: 1.5em;\n margin-bottom: 15px;\n font-weight: 600;\n }\n\n \/* Parameter explanation *\/\n .parameters {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\n gap: 15px;\n margin-bottom: 20px;\n }\n\n .parameter-item {\n background: #f8f9fa;\n padding: 10px;\n border-radius: 4px;\n }\n\n \/* Diagram section *\/\n .diagram {\n text-align: center;\n margin: 20px 0;\n }\n\n .diagram img {\n max-width: 100%;\n height: auto;\n }\n\n \/* Calculator form *\/\n .calculator-form {\n display: grid;\n grid-template-columns: repeat(2, 1fr); \/* Display two parameters per row *\/\n gap: 15px;\n margin-bottom: 20px;\n }\n\n .input-group {\n display: flex;\n flex-direction: column;\n }\n\n .input-group label {\n margin-bottom: 5px;\n font-weight: 500;\n }\n\n .input-group input,\n .input-group select {\n padding: 8px;\n border: 1px solid #ddd;\n border-radius: 4px;\n font-size: 16px;\n }\n\n \/* Calculate button *\/\n .calculate-btn {\n background: #007bff;\n color: white;\n border: none;\n padding: 12px 24px;\n border-radius: 4px;\n cursor: pointer;\n font-size: 16px;\n font-weight: 500;\n transition: background 0.3s;\n width: 25%; \/* Set button width to 25% *\/\n margin: 10px auto; \/* Center the button *\/\n grid-column: 1 \/ -1; \/* Make the button span across all columns for centering *\/\n }\n\n .calculate-btn:hover {\n background: #0056b3;\n color: white; \/* Ensure text color is white on hover *\/\n }\n\n \/* Results section *\/\n .results {\n display: none;\n background: #e9ecef;\n padding: 20px;\n border-radius: 4px;\n margin-top: 20px;\n }\n\n .results.show {\n display: block;\n }\n\n .result-item {\n font-size: 1.2em;\n margin: 10px 0;\n font-weight: 500;\n }\n\n \/* Responsive adjustments *\/\n @media (max-width: 768px) {\n .calculator-form {\n grid-template-columns: 1fr;\n }\n\n .parameters {\n grid-template-columns: 1fr;\n }\n }\n <\/style>\n<\/head>\n<body>\n <div class=\"calculator-container\">\n \n <div class=\"section\">\n <h2>\u0634\u0631\u062d \u0627\u0644\u0645\u0639\u0644\u0645\u0627\u062a<\/h2>\n <div class=\"parameters\">\n <div class=\"parameter-item\">\n <strong>\u0637\u0648\u0644 \u0627\u0644\u0642\u0627\u0639\u062f\u0629 (\u0623):<\/strong> \u0637\u0648\u0644 \u0627\u0644\u062c\u0627\u0646\u0628 \u0627\u0644\u0633\u0641\u0644\u064a \u0645\u0646 \u0634\u0628\u0647 \u0627\u0644\u0645\u0646\u062d\u0631\u0641 (\u0627\u0644\u062c\u0627\u0646\u0628 \u0627\u0644\u0637\u0648\u064a\u0644).\n <\/div>\n <div class=\"parameter-item\">\n <strong>\u0637\u0648\u0644 \u0627\u0644\u062c\u0632\u0621 \u0627\u0644\u0639\u0644\u0648\u064a (\u0628):<\/strong> \u0637\u0648\u0644 \u0627\u0644\u062c\u0627\u0646\u0628 \u0627\u0644\u0639\u0644\u0648\u064a \u0645\u0646 \u0634\u0628\u0647 \u0627\u0644\u0645\u0646\u062d\u0631\u0641 (\u0627\u0644\u062c\u0627\u0646\u0628 \u0627\u0644\u0642\u0635\u064a\u0631).\n <\/div>\n <div class=\"parameter-item\">\n <strong>\u0627\u0644\u0627\u0631\u062a\u0641\u0627\u0639 (\u062d):<\/strong> \u0627\u0644\u0645\u0633\u0627\u0641\u0629 \u0627\u0644\u0639\u0645\u0648\u062f\u064a\u0629 \u0628\u064a\u0646 \u0627\u0644\u0642\u0627\u0639\u062f\u0629 \u0648\u0627\u0644\u0642\u0645\u0629 (\u0627\u0644\u0627\u0631\u062a\u0641\u0627\u0639).\n <\/div>\n <div class=\"parameter-item\">\n <strong>\u0643\u0645\u064a\u0629:<\/strong> \u0639\u062f\u062f \u0627\u0644\u0623\u0634\u0643\u0627\u0644 \u0634\u0628\u0647 \u0627\u0644\u0645\u0646\u062d\u0631\u0641\u0629 \u0627\u0644\u062a\u064a \u064a\u062c\u0628 \u062d\u0633\u0627\u0628\u0647\u0627.\n <\/div>\n <\/div>\n <\/div>\n\n \n \n\n \n <div class=\"section\">\n <h2>\u0627\u0644\u0622\u0644\u0629 \u0627\u0644\u062d\u0627\u0633\u0628\u0629<\/h2>\n <form id=\"calculatorForm\" class=\"calculator-form\" action=\"\">\n <div class=\"input-group\">\n <label for=\"longSide\">\u0627\u0644\u062c\u0627\u0646\u0628 \u0627\u0644\u0637\u0648\u064a\u0644 (\u0623):<\/label>\n <input type=\"number\" id=\"longSide\" step=\"0.01\" required>\n <\/div>\n <div class=\"input-group\">\n <label for=\"shortSide\">\u0627\u0644\u062c\u0627\u0646\u0628 \u0627\u0644\u0642\u0635\u064a\u0631 (\u0628):<\/label>\n <input type=\"number\" id=\"shortSide\" step=\"0.01\" required>\n <\/div>\n <div class=\"input-group\">\n <label for=\"height\">\u0627\u0644\u0627\u0631\u062a\u0641\u0627\u0639 (\u062d):<\/label>\n <input type=\"number\" id=\"height\" step=\"0.01\" required>\n <\/div>\n <div class=\"input-group\">\n <label for=\"quantity\">\u0643\u0645\u064a\u0629:<\/label>\n <input type=\"number\" id=\"quantity\" step=\"1\" value=\"1\" required>\n <\/div>\n <button type=\"submit\" class=\"calculate-btn\">\u0627\u062d\u0633\u0628<\/button>\n <input type=\"hidden\" name=\"trp-form-language\" value=\"ar\"\/><\/form>\n <\/div>\n\n \n <div class=\"section\">\n <div id=\"results\" class=\"results\">\n <h2>\u0627\u0644\u0646\u062a\u0627\u0626\u062c<\/h2>\n <div class=\"result-item\">\n <strong>\u0627\u0644\u0645\u062d\u064a\u0637 (\u0641\u0631\u062f\u064a):<\/strong> <span id=\"perimeter\">0<\/span> \u0648\u062d\u062f\u0627\u062a\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n <script>\n document.getElementById('calculatorForm').addEventListener('submit', function(e) {\n e.preventDefault();\n \n \/\/ Get input values\n const longSide = parseFloat(document.getElementById('longSide').value);\n const shortSide = parseFloat(document.getElementById('shortSide').value);\n const height = parseFloat(document.getElementById('height').value);\n const quantity = parseInt(document.getElementById('quantity').value); \/\/ Keep quantity input but don't use it for perimeter\n\n \/\/ Basic validation\n if (longSide <= 0 || shortSide <= 0 || height <= 0 || quantity <= 0) {\n alert(\"Please enter positive values for all fields.\");\n return;\n }\n\n if (shortSide >= longSide) {\n alert(\"Short Side must be less than Long Side for a valid trapezoid shape based on this diagram.\");\n return;\n }\n\n \/\/ Calculate Perimeter (Assuming Isosceles Trapezoid for Side Length calculation needed for Perimeter)\n const baseDiff = (longSide - shortSide) \/ 2;\n const sideLength = Math.sqrt(baseDiff * baseDiff + height * height); \/\/ Still need sideLength to calculate perimeter\n \n const perimeter = longSide + shortSide + (2 * sideLength);\n\n \/\/ Display result for Perimeter\n document.getElementById('perimeter').textContent = perimeter.toFixed(2);\n \n \/\/ Show results section\n document.getElementById('results').classList.add('show');\n });\n <\/script>\n<\/body>\n<\/html>","protected":false},"excerpt":{"rendered":"<p>\u062d\u0627\u0633\u0628\u0629 \u0645\u062d\u064a\u0637 \u0634\u0628\u0647 \u0627\u0644\u0645\u0646\u062d\u0631\u0641 \u0623\u062f\u0627\u0629 \u0641\u0639\u0651\u0627\u0644\u0629 \u0645\u0635\u0645\u0645\u0629 \u0644\u062a\u0628\u0633\u064a\u0637 \u0639\u0645\u0644\u064a\u0629 \u062d\u0633\u0627\u0628 \u0645\u062d\u064a\u0637 \u0634\u0628\u0647 \u0627\u0644\u0645\u0646\u062d\u0631\u0641. \u0645\u062b\u0627\u0644\u064a\u0629 \u0644\u0644\u0637\u0644\u0627\u0628 \u0648\u0627\u0644\u0645\u0639\u0644\u0645\u064a\u0646 \u0648\u0627\u0644\u0645\u0647\u0646\u062f\u0633\u064a\u0646 \u0627\u0644\u0645\u0639\u0645\u0627\u0631\u064a\u064a\u0646...<\/p>","protected":false},"author":2,"featured_media":16007,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"pmpro_default_level":"","_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[3435],"tags":[3707,3705,3706],"class_list":["post-16005","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-punching-force-calculator","tag-geometry","tag-perimeter-tool","tag-trapezoid-calculator","pmpro-has-access"],"acf":[],"jetpack_featured_media_url":"https:\/\/www.mechstream.com\/wp-content\/uploads\/2025\/06\/Trapezoid-Perimeter-Calculator.png","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.mechstream.com\/ar\/wp-json\/wp\/v2\/posts\/16005","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.mechstream.com\/ar\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.mechstream.com\/ar\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.mechstream.com\/ar\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.mechstream.com\/ar\/wp-json\/wp\/v2\/comments?post=16005"}],"version-history":[{"count":0,"href":"https:\/\/www.mechstream.com\/ar\/wp-json\/wp\/v2\/posts\/16005\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.mechstream.com\/ar\/wp-json\/wp\/v2\/media\/16007"}],"wp:attachment":[{"href":"https:\/\/www.mechstream.com\/ar\/wp-json\/wp\/v2\/media?parent=16005"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.mechstream.com\/ar\/wp-json\/wp\/v2\/categories?post=16005"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.mechstream.com\/ar\/wp-json\/wp\/v2\/tags?post=16005"}],"curies":[{"name":"\u0648\u0648\u0631\u062f\u0628\u0631\u064a\u0633","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\u062d\u0627\u0633\u0628\u0629 \u0645\u062d\u064a\u0637 \u0634\u0628\u0647 \u0627\u0644\u0645\u0646\u062d\u0631\u0641 \u0623\u062f\u0627\u0629 \u0641\u0639\u0651\u0627\u0644\u0629 \u0645\u0635\u0645\u0645\u0629 \u0644\u062a\u0628\u0633\u064a\u0637 \u0639\u0645\u0644\u064a\u0629 \u062d\u0633\u0627\u0628 \u0645\u062d\u064a\u0637 \u0634\u0628\u0647 \u0627\u0644\u0645\u0646\u062d\u0631\u0641. \u0645\u062b\u0627\u0644\u064a\u0629 \u0644\u0644\u0637\u0644\u0627\u0628 \u0648\u0627\u0644\u0645\u0639\u0644\u0645\u064a\u0646 \u0648\u0627\u0644\u0645\u0647\u0646\u062f\u0633\u064a\u0646 \u0627\u0644\u0645\u0639\u0645\u0627\u0631\u064a\u064a\u0646\u060c \u062d\u064a\u062b \u062a\u062d\u0633\u0628 \u0647\u0630\u0647 \u0627\u0644\u062d\u0627\u0633\u0628\u0629 \u0627\u0644\u0645\u0633\u0627\u0641\u0629 \u0627\u0644\u0643\u0644\u064a\u0629 \u0644\u0644\u0623\u0636\u0644\u0627\u0639 \u0628\u0633\u0631\u0639\u0629 \u0628\u0627\u0633\u062a\u062e\u062f\u0627\u0645 \u0623\u0637\u0648\u0627\u0644 \u0627\u0644\u0623\u0636\u0644\u0627\u0639 \u0641\u0642\u0637. \u0648\u0641\u0631 \u0627\u0644\u0648\u0642\u062a \u0648\u0627\u0644\u062c\u0647\u062f \u0645\u0639 \u0646\u062a\u0627\u0626\u062c \u062f\u0642\u064a\u0642\u0629 \u0648\u0641\u0648\u0631\u064a\u0629\u060c \u0645\u0645\u0627 \u064a\u062c\u0639\u0644\u0647\u0627 \u0645\u0648\u0631\u062f\u064b\u0627 \u0623\u0633\u0627\u0633\u064a\u064b\u0627 \u0644\u0644\u0645\u0624\u0633\u0633\u0627\u062a \u0627\u0644\u062a\u0639\u0644\u064a\u0645\u064a\u0629 \u0648\u0627\u0644\u0645\u0647\u0646\u064a\u0629. \u062a\u0636\u0645\u0646 \u0648\u0627\u062c\u0647\u062a\u0646\u0627 \u0633\u0647\u0644\u0629 \u0627\u0644\u0627\u0633\u062a\u062e\u062f\u0627\u0645 \u0633\u0647\u0648\u0644\u0629 \u0627\u0633\u062a\u062e\u062f\u0627\u0645 \u0627\u0644\u0623\u062f\u0627\u0629 \u0644\u0644\u0645\u0628\u062a\u062f\u0626\u064a\u0646 \u0648\u0627\u0644\u062e\u0628\u0631\u0627\u0621 \u0639\u0644\u0649 \u062d\u062f \u0633\u0648\u0627\u0621. \u062d\u0633\u0651\u0646 \u062d\u0633\u0627\u0628\u0627\u062a\u0643 \u0627\u0644\u0647\u0646\u062f\u0633\u064a\u0629 \u0648\u062d\u0633\u0651\u0646 \u0633\u064a\u0631 \u0639\u0645\u0644\u0643 \u0627\u0644\u064a\u0648\u0645 \u0645\u0639 \u062d\u0627\u0633\u0628\u0629 \u0645\u062d\u064a\u0637 \u0634\u0628\u0647 \u0627\u0644\u0645\u0646\u062d\u0631\u0641.<\/p>\n\n\n