- سیستم های مدیریت

<div id=”wp-iso-presentation” style=”direction: rtl; font-family: ‘Segoe UI’, Tahoma, Geneva, Verdana, sans-serif;”>
<!– استایل‌ها –>
<style>
#wp-iso-presentation * {
margin: 0;
padding: 0;
box-sizing: border-box;
}

#wp-iso-presentation {
background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
color: #fff;
overflow: hidden;
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
padding: 20px;
}

.wp-iso-container {
width: 100%;
max-width: 1200px;
height: 85vh;
position: relative;
perspective: 1200px;
}

.wp-iso-slide {
position: absolute;
width: 100%;
height: 100%;
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
border-radius: 20px;
box-shadow: 0 25px 50px rgba(0, 0, 0, 0.3);
padding: 40px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
opacity: 0;
transform: translateX(100%) rotateY(30deg);
transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.wp-iso-slide.active {
opacity: 1;
transform: translateX(0) rotateY(0);
}

.wp-iso-slide.prev {
transform: translateX(-100%) rotateY(-30deg);
}

.wp-iso-slide h1 {
font-size: 3.5rem;
margin-bottom: 20px;
background: linear-gradient(45deg, #fff, #a8edea);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
text-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.wp-iso-slide h2 {
font-size: 2.2rem;
margin-bottom: 15px;
color: #a8edea;
}

.wp-iso-slide h3 {
font-size: 1.6rem;
margin-bottom: 12px;
color: #fed330;
}

.wp-iso-slide p {
font-size: 1.3rem;
line-height: 1.7;
max-width: 800px;
margin-bottom: 30px;
opacity: 0.9;
}

.wp-iso-content {
display: flex;
flex-direction: column;
align-items: center;
gap: 30px;
}

.wp-iso-points {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 15px;
margin: 15px 0;
}

.wp-iso-point {
background: rgba(255, 255, 255, 0.15);
backdrop-filter: blur(5px);
border-radius: 15px;
padding: 15px;
width: 220px;
text-align: center;
border: 1px solid rgba(255, 255, 255, 0.2);
transition: all 0.3s ease;
}

.wp-iso-point:hover {
transform: translateY(-8px);
background: rgba(255, 255, 255, 0.2);
}

.wp-iso-point i {
font-size: 2.2rem;
margin-bottom: 12px;
color: #fed330;
}

.wp-iso-point h4 {
font-size: 1.2rem;
margin-bottom: 8px;
color: #a8edea;
}

.wp-iso-point p {
font-size: 0.95rem;
margin-bottom: 0;
}

.wp-iso-examples {
background: rgba(0, 0, 0, 0.2);
border-radius: 15px;
padding: 20px;
margin: 15px 0;
width: 100%;
max-width: 800px;
}

.wp-iso-examples h3 {
color: #fed330;
margin-bottom: 15px;
text-align: center;
}

.wp-iso-example {
display: flex;
align-items: center;
margin-bottom: 12px;
padding: 8px;
background: rgba(255, 255, 255, 0.1);
border-radius: 10px;
}

.wp-iso-example i {
font-size: 1.3rem;
margin-left: 12px;
color: #a8edea;
}

.wp-iso-example p {
font-size: 1.1rem;
margin-bottom: 0;
text-align: right;
}

.wp-iso-summary {
background: linear-gradient(45deg, rgba(254, 211, 48, 0.2), rgba(168, 237, 234, 0.2));
border-radius: 15px;
padding: 20px;
margin: 15px 0;
width: 100%;
max-width: 800px;
border: 1px solid rgba(255, 255, 255, 0.2);
}

.wp-iso-summary h3 {
color: #fed330;
margin-bottom: 12px;
text-align: center;
}

.wp-iso-summary p {
font-size: 1.2rem;
font-weight: bold;
margin-bottom: 0;
text-align: center;
}

.wp-iso-controls {
position: absolute;
bottom: 30px;
left: 50%;
transform: translateX(-50%);
display: flex;
gap: 20px;
z-index: 100;
}

.wp-iso-btn {
width: 50px;
height: 50px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.2);
backdrop-filter: blur(10px);
border: 2px solid rgba(255, 255, 255, 0.3);
color: #fff;
font-size: 1.3rem;
cursor: pointer;
transition: all 0.3s ease;
display: flex;
justify-content: center;
align-items: center;
}

.wp-iso-btn:hover {
background: rgba(255, 255, 255, 0.3);
transform: scale(1.1);
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

.wp-iso-progress {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 6px;
background: rgba(255, 255, 255, 0.1);
border-radius: 0 0 20px 20px;
overflow: hidden;
}

.wp-iso-bar {
height: 100%;
background: linear-gradient(90deg, #667eea, #764ba2);
width: 0;
transition: width 0.8s ease;
}

.wp-iso-indicator {
position: absolute;
top: 30px;
right: 30px;
font-size: 1rem;
opacity: 0.7;
}

.wp-iso-section {
position: absolute;
top: 30px;
left: 30px;
font-size: 1rem;
opacity: 0.7;
background: rgba(254, 211, 48, 0.2);
padding: 6px 12px;
border-radius: 20px;
border: 1px solid rgba(254, 211, 48, 0.3);
}

.wp-iso-logo {
position: absolute;
top: 15px;
left: 50%;
transform: translateX(-50%);
font-size: 1.5rem;
font-weight: bold;
color: #fed330;
text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

.wp-iso-factory {
position: absolute;
bottom: 100px;
left: 50%;
transform: translateX(-50%);
text-align: center;
font-size: 1rem;
opacity: 0.8;
}

@media (max-width: 768px) {
.wp-iso-slide { padding: 30px 15px; }
.wp-iso-slide h1 { font-size: 2.2rem; }
.wp-iso-slide h2 { font-size: 1.8rem; }
.wp-iso-slide h3 { font-size: 1.4rem; }
.wp-iso-slide p { font-size: 1.1rem; }
.wp-iso-points { flex-direction: column; align-items: center; }
.wp-iso-point { width: 90%; }
.wp-iso-controls { gap: 15px; }
.wp-iso-btn { width: 45px; height: 45px; font-size: 1.1rem; }
.wp-iso-section, .wp-iso-indicator { font-size: 0.9rem; padding: 4px 8px; }
}
</style>

<!– محتوای ارائه –>
<div class=”wp-iso-container”>
<!– اسلاید 1: عنوان دوره –>
<div class=”wp-iso-slide active”>
<div class=”wp-iso-logo”>ISO استانداردهای</div>
<div class=”wp-iso-section”>بخش ۱</div>
<div class=”wp-iso-indicator”>۱ / ۱۰</div>

<div class=”wp-iso-content”>
<h1>دوره آشنایی با استانداردهای ایزو</h1>
<h2>مخصوص پرسنل تولید کارخانه گام اراک</h2>
<p>آموزش مفاهیم پایه استانداردهای ایزو با زبان ساده و کارگاهی</p>

<div class=”wp-iso-points”>
<div class=”wp-iso-point”>
<i class=”fas fa-clock”></i>
<h4>مدت دوره</h4>
<p>۲ ساعت آموزشی</p>
</div>
<div class=”wp-iso-point”>
<i class=”fas fa-user-tie”></i>
<h4>مدرس</h4>
<p>امیر مالیان</p>
</div>
<div class=”wp-iso-point”>
<i class=”fas fa-signal”></i>
<h4>سطح</h4>
<p>مقدماتی و کاربردی</p>
</div>
</div>
</div>