Skip to content
This repository has been archived by the owner on Nov 29, 2024. It is now read-only.

Commit

Permalink
refactor(clean): clean code
Browse files Browse the repository at this point in the history
  • Loading branch information
@tikrack
tikrack committed Sep 11, 2024
1 parent edcbf50 commit 664a6eb
Show file tree
Hide file tree
Showing 2 changed files with 134 additions and 65 deletions.
131 changes: 85 additions & 46 deletions salam-online.html
View file
Original file line number Diff line number Diff line change
@@ -1,50 +1,89 @@
<!DOCTYPE html>
<html dir="rtl" lang="fa-IR">
<head>
<meta charset="UTF-8">
<title>آزمایش آنلاین زبان برنامه نویسی سلام - برنامه نویسی برای همه</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style/style.css">
<link rel="manifest" href="manifest.json">
</head>
<body>
<!-- Header and Btn -->
<header class="header">
<div class="btn-wrapper">
<button class="setting">
<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <circle cx="12" cy="12" r="3" stroke="#ffffff" stroke-width="1.5"></circle> <path d="M3.66122 10.6392C4.13377 10.9361 4.43782 11.4419 4.43782 11.9999C4.43781 12.558 4.13376 13.0638 3.66122 13.3607C3.33966 13.5627 3.13248 13.7242 2.98508 13.9163C2.66217 14.3372 2.51966 14.869 2.5889 15.3949C2.64082 15.7893 2.87379 16.1928 3.33973 16.9999C3.80568 17.8069 4.03865 18.2104 4.35426 18.4526C4.77508 18.7755 5.30694 18.918 5.83284 18.8488C6.07287 18.8172 6.31628 18.7185 6.65196 18.5411C7.14544 18.2803 7.73558 18.2699 8.21895 18.549C8.70227 18.8281 8.98827 19.3443 9.00912 19.902C9.02332 20.2815 9.05958 20.5417 9.15224 20.7654C9.35523 21.2554 9.74458 21.6448 10.2346 21.8478C10.6022 22 11.0681 22 12 22C12.9319 22 13.3978 22 13.7654 21.8478C14.2554 21.6448 14.6448 21.2554 14.8478 20.7654C14.9404 20.5417 14.9767 20.2815 14.9909 19.9021C15.0117 19.3443 15.2977 18.8281 15.7811 18.549C16.2644 18.27 16.8545 18.2804 17.3479 18.5412C17.6837 18.7186 17.9271 18.8173 18.1671 18.8489C18.693 18.9182 19.2249 18.7756 19.6457 18.4527C19.9613 18.2106 20.1943 17.807 20.6603 17C20.8677 16.6407 21.029 16.3614 21.1486 16.1272M20.3387 13.3608C19.8662 13.0639 19.5622 12.5581 19.5621 12.0001C19.5621 11.442 19.8662 10.9361 20.3387 10.6392C20.6603 10.4372 20.8674 10.2757 21.0148 10.0836C21.3377 9.66278 21.4802 9.13092 21.411 8.60502C21.3591 8.2106 21.1261 7.80708 20.6601 7.00005C20.1942 6.19301 19.9612 5.7895 19.6456 5.54732C19.2248 5.22441 18.6929 5.0819 18.167 5.15113C17.927 5.18274 17.6836 5.2814 17.3479 5.45883C16.8544 5.71964 16.2643 5.73004 15.781 5.45096C15.2977 5.1719 15.0117 4.6557 14.9909 4.09803C14.9767 3.71852 14.9404 3.45835 14.8478 3.23463C14.6448 2.74458 14.2554 2.35523 13.7654 2.15224C13.3978 2 12.9319 2 12 2C11.0681 2 10.6022 2 10.2346 2.15224C9.74458 2.35523 9.35523 2.74458 9.15224 3.23463C9.05958 3.45833 9.02332 3.71848 9.00912 4.09794C8.98826 4.65566 8.70225 5.17191 8.21891 5.45096C7.73557 5.73002 7.14548 5.71959 6.65205 5.4588C6.31633 5.28136 6.0729 5.18269 5.83285 5.15108C5.30695 5.08185 4.77509 5.22436 4.35427 5.54727C4.03866 5.78945 3.80569 6.19297 3.33974 7C3.13231 7.35929 2.97105 7.63859 2.85138 7.87273" stroke="#ffffff" stroke-width="1.5" stroke-linecap="round"></path> </g></svg>
</button>
<button class="execute" disabled="">اجرا
<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round" stroke="#000000" stroke-width="0.048"></g><g id="SVGRepo_iconCarrier"> <path d="M3 12L3 18.9671C3 21.2763 5.53435 22.736 7.59662 21.6145L10.7996 19.8727M3 8L3 5.0329C3 2.72368 5.53435 1.26402 7.59661 2.38548L20.4086 9.35258C22.5305 10.5065 22.5305 13.4935 20.4086 14.6474L14.0026 18.131" stroke="#ffffff" stroke-width="2.4" stroke-linecap="round"></path> </g></svg>
</button>
<button class="save">ذخیره کد
<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <path d="M12.89 5.87891H5.11C3.4 5.87891 2 7.27891 2 8.98891V20.3489C2 21.7989 3.04 22.4189 4.31 21.7089L8.24 19.5189C8.66 19.2889 9.34 19.2889 9.75 19.5189L13.68 21.7089C14.96 22.4089 16 21.7989 16 20.3489V8.98891C16 7.27891 14.6 5.87891 12.89 5.87891Z" fill="#292D32"></path> <path d="M21.9998 5.11V16.47C21.9998 17.92 20.9598 18.53 19.6898 17.83L17.7598 16.75C17.5998 16.66 17.4998 16.49 17.4998 16.31V8.99C17.4998 6.45 15.4298 4.38 12.8898 4.38H8.81984C8.44984 4.38 8.18984 3.99 8.35984 3.67C8.87984 2.68 9.91984 2 11.1098 2H18.8898C20.5998 2 21.9998 3.4 21.9998 5.11Z" fill="#292D32"></path> </g></svg>
</button>
</div>
<!-- <a href="https://github.com/SalamLang/Salam-Desktop/raw/main/salam-windows.exe" download="salam-salam.exe" class="download">دانلود نرم افزار</a> -->
<div>
<span>تغییر حالت</span>
<label class="switch">
<input type="checkbox" id="toggleBtn">
<span class="slider"></span>
</label>
</div>
</header>

<!-- Output -->
<textarea class="code"></textarea>
<iframe class="iframe"></iframe>
<pre class="output"></pre>
<pre class="error"></pre>

<!-- Modal -->
<div class="overlay"></div>
<div class="setting_modal">
<h1>تنظیمات</h1>
<hr>
<head>
<meta charset="UTF-8">
<title>آزمایش آنلاین زبان برنامه نویسی سلام - برنامه نویسی برای همه</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style/style.css">
<link rel="manifest" href="manifest.json">
</head>

<body>
<!-- Header and Btn -->
<header class="header">
<div class="btn-wrapper">
<button class="setting">
<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="SVGRepo_bgCarrier" stroke-width="0"></g>
<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g>
<g id="SVGRepo_iconCarrier">
<circle cx="12" cy="12" r="3" stroke="#ffffff" stroke-width="1.5"></circle>
<path
d="M3.66122 10.6392C4.13377 10.9361 4.43782 11.4419 4.43782 11.9999C4.43781 12.558 4.13376 13.0638 3.66122 13.3607C3.33966 13.5627 3.13248 13.7242 2.98508 13.9163C2.66217 14.3372 2.51966 14.869 2.5889 15.3949C2.64082 15.7893 2.87379 16.1928 3.33973 16.9999C3.80568 17.8069 4.03865 18.2104 4.35426 18.4526C4.77508 18.7755 5.30694 18.918 5.83284 18.8488C6.07287 18.8172 6.31628 18.7185 6.65196 18.5411C7.14544 18.2803 7.73558 18.2699 8.21895 18.549C8.70227 18.8281 8.98827 19.3443 9.00912 19.902C9.02332 20.2815 9.05958 20.5417 9.15224 20.7654C9.35523 21.2554 9.74458 21.6448 10.2346 21.8478C10.6022 22 11.0681 22 12 22C12.9319 22 13.3978 22 13.7654 21.8478C14.2554 21.6448 14.6448 21.2554 14.8478 20.7654C14.9404 20.5417 14.9767 20.2815 14.9909 19.9021C15.0117 19.3443 15.2977 18.8281 15.7811 18.549C16.2644 18.27 16.8545 18.2804 17.3479 18.5412C17.6837 18.7186 17.9271 18.8173 18.1671 18.8489C18.693 18.9182 19.2249 18.7756 19.6457 18.4527C19.9613 18.2106 20.1943 17.807 20.6603 17C20.8677 16.6407 21.029 16.3614 21.1486 16.1272M20.3387 13.3608C19.8662 13.0639 19.5622 12.5581 19.5621 12.0001C19.5621 11.442 19.8662 10.9361 20.3387 10.6392C20.6603 10.4372 20.8674 10.2757 21.0148 10.0836C21.3377 9.66278 21.4802 9.13092 21.411 8.60502C21.3591 8.2106 21.1261 7.80708 20.6601 7.00005C20.1942 6.19301 19.9612 5.7895 19.6456 5.54732C19.2248 5.22441 18.6929 5.0819 18.167 5.15113C17.927 5.18274 17.6836 5.2814 17.3479 5.45883C16.8544 5.71964 16.2643 5.73004 15.781 5.45096C15.2977 5.1719 15.0117 4.6557 14.9909 4.09803C14.9767 3.71852 14.9404 3.45835 14.8478 3.23463C14.6448 2.74458 14.2554 2.35523 13.7654 2.15224C13.3978 2 12.9319 2 12 2C11.0681 2 10.6022 2 10.2346 2.15224C9.74458 2.35523 9.35523 2.74458 9.15224 3.23463C9.05958 3.45833 9.02332 3.71848 9.00912 4.09794C8.98826 4.65566 8.70225 5.17191 8.21891 5.45096C7.73557 5.73002 7.14548 5.71959 6.65205 5.4588C6.31633 5.28136 6.0729 5.18269 5.83285 5.15108C5.30695 5.08185 4.77509 5.22436 4.35427 5.54727C4.03866 5.78945 3.80569 6.19297 3.33974 7C3.13231 7.35929 2.97105 7.63859 2.85138 7.87273"
stroke="#ffffff" stroke-width="1.5" stroke-linecap="round"></path>
</g>
</svg>
</button>
<button class="execute" disabled="">اجرا
<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="SVGRepo_bgCarrier" stroke-width="0"></g>
<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round" stroke="#000000"
stroke-width="0.048"></g>
<g id="SVGRepo_iconCarrier">
<path
d="M3 12L3 18.9671C3 21.2763 5.53435 22.736 7.59662 21.6145L10.7996 19.8727M3 8L3 5.0329C3 2.72368 5.53435 1.26402 7.59661 2.38548L20.4086 9.35258C22.5305 10.5065 22.5305 13.4935 20.4086 14.6474L14.0026 18.131"
stroke="#ffffff" stroke-width="2.4" stroke-linecap="round"></path>
</g>
</svg>
</button>
<button class="save">ذخیره کد
<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="SVGRepo_bgCarrier" stroke-width="0"></g>
<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g>
<g id="SVGRepo_iconCarrier">
<path
d="M12.89 5.87891H5.11C3.4 5.87891 2 7.27891 2 8.98891V20.3489C2 21.7989 3.04 22.4189 4.31 21.7089L8.24 19.5189C8.66 19.2889 9.34 19.2889 9.75 19.5189L13.68 21.7089C14.96 22.4089 16 21.7989 16 20.3489V8.98891C16 7.27891 14.6 5.87891 12.89 5.87891Z"
fill="#292D32"></path>
<path
d="M21.9998 5.11V16.47C21.9998 17.92 20.9598 18.53 19.6898 17.83L17.7598 16.75C17.5998 16.66 17.4998 16.49 17.4998 16.31V8.99C17.4998 6.45 15.4298 4.38 12.8898 4.38H8.81984C8.44984 4.38 8.18984 3.99 8.35984 3.67C8.87984 2.68 9.91984 2 11.1098 2H18.8898C20.5998 2 21.9998 3.4 21.9998 5.11Z"
fill="#292D32"></path>
</g>
</svg>
</button>
</div>

<script src="script/sweetalert.js"></script>
<script src="script/script.js"></script>
</body>
</html>
<!-- <a href="https://github.com/SalamLang/Salam-Desktop/raw/main/salam-windows.exe" download="salam-salam.exe" class="download">دانلود نرم افزار</a> -->
<div>

</div>
</header>

<!-- Output -->
<textarea class="code"></textarea>
<iframe class="iframe"></iframe>
<pre class="output"></pre>
<pre class="error"></pre>

<!-- Modal -->
<div class="overlay"></div>
<div class="setting_modal">
<h1>تنظیمات</h1>
<hr>
<div class="setting-wrapper">
<span>تغییر حالت ادیتور: </span>
<!-- <label class="switch">
<input type="checkbox" id="toggleBtn">
<span class="slider"></span>
</label> -->
<div class="setting-ite-wrapper">
<div class="setting-item"></div>
<div class="setting-item"></div>
</div>
</div>
</div>

<script src="script/sweetalert.js"></script>
<script src="script/script.js"></script>
</body>

</html>
68 changes: 49 additions & 19 deletions style/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,11 @@ img {
max-width: 100%;
}

body, input, textarea, select, button {
body,
input,
textarea,
select,
button {
font-family: "estedad", sans-serif;
}

Expand All @@ -56,7 +60,7 @@ body {
flex-direction: column;
}

button:hover{
button:hover {
opacity: 0.8;
}

Expand Down Expand Up @@ -87,6 +91,7 @@ button:hover{
font-size: 16px;
cursor: pointer;
}

.execute:disabled {
opacity: 0.3;
}
Expand Down Expand Up @@ -123,7 +128,8 @@ button:hover{
opacity: 0;
transition: all 1000ms;
}
.download:hover{

.download:hover {
opacity: 1;
}

Expand All @@ -147,11 +153,13 @@ button:hover{
.save>svg,
.execute>svg {
width: 25px;
margin-right: 4px;
margin-right: 4px;
}
.execute>svg{

.execute>svg {
width: 20px;
}

.iframe {
width: 98%;
height: calc(100% - 99px);
Expand All @@ -168,14 +176,15 @@ button:hover{
box-shadow: 0 0 20px -10px #FF6100;
}

.btn-wrapper{
.btn-wrapper {
display: flex;
justify-content: center;
align-items: center;
gap: 10px;
}

.output, .error {
.output,
.error {
display: none;
}

Expand All @@ -191,7 +200,7 @@ button:hover{
margin-top: 10px;
}

header > div:nth-child(2) {
header>div:nth-child(2) {
display: flex;
justify-content: center;
align-items: center;
Expand Down Expand Up @@ -235,23 +244,23 @@ header > div:nth-child(2) {
border-radius: 50%;
}

input:checked + .slider {
input:checked+.slider {
background-color: #ff6200;
}

input:checked + .slider:before {
input:checked+.slider:before {
transform: translateX(26px);
}

div:where(.swal2-container) div:where(.swal2-popup){
div:where(.swal2-container) div:where(.swal2-popup) {
border-radius: 25px !important;
}

div:where(.swal2-icon){
div:where(.swal2-icon) {
margin: 1.5em auto .6em !important;
}

div:where(.swal2-container) button:where(.swal2-styled):where(.swal2-confirm){
div:where(.swal2-container) button:where(.swal2-styled):where(.swal2-confirm) {
background-color: #ff6200 !important;
border-radius: 10px !important;
width: 100px !important;
Expand All @@ -265,7 +274,7 @@ div:where(.swal2-container) button:where(.swal2-styled):where(.swal2-confirm){
overflow: hidden !important;
}

div:where(.swal2-container) button:where(.swal2-styled):where(.swal2-confirm)::after{
div:where(.swal2-container) button:where(.swal2-styled):where(.swal2-confirm)::after {
width: 100%;
height: 100%;
position: absolute;
Expand All @@ -278,7 +287,7 @@ div:where(.swal2-container) button:where(.swal2-styled):where(.swal2-confirm)::a
content: "باشه";
}

.overlay{
.overlay {
position: fixed;
top: 0;
right: 0;
Expand All @@ -288,8 +297,8 @@ div:where(.swal2-container) button:where(.swal2-styled):where(.swal2-confirm)::a
z-index: 9;
}

.setting_modal{
width: 400px;
.setting_modal {
width: 420px;
min-height: 100px;
padding: 15px;
border: 1px solid #FF6100;
Expand All @@ -302,11 +311,32 @@ div:where(.swal2-container) button:where(.swal2-styled):where(.swal2-confirm)::a
background-color: #fff9f5;
}

.setting_modal h1{
.setting_modal h1 {
margin: 0;
text-align: center;
color: #FF6100;
}
.setting_modal hr{

.setting_modal hr {
opacity: 1;
border: 0;
height: 1px;
background-color: #FF6100;
}

.setting-wrapper {
display: flex;
justify-content: start;
align-items: start;
gap: 10px;
flex-direction: column;
margin-top: 20px;
}

.setting-wrapper span {
font-size: 18px;
}

.setting-ite-wrapper{

}

0 comments on commit 664a6eb

Please sign in to comment.