180 lines
9.3 KiB
PHP
180 lines
9.3 KiB
PHP
<style>
|
|
.modal-content {
|
|
color: black; /* 모달 텍스트 색상 변경 */
|
|
}
|
|
|
|
.text-left {
|
|
text-align: left;
|
|
}
|
|
</style>
|
|
<?/*= $this->renderSection('content') */?>
|
|
<style>
|
|
.word-card {
|
|
border: 1px solid #ddd;
|
|
border-radius: 5px;
|
|
padding: 15px;
|
|
margin-bottom: 10px;
|
|
}
|
|
.word-card-body {
|
|
font-size: 0.9rem;
|
|
}
|
|
.pastel-bg {
|
|
background-color: #f9f0ff; /* 연한 파스텔톤 배경색 */
|
|
}
|
|
|
|
/* Center modals vertically and horizontally */
|
|
.modal-dialog {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.modal-title{
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
.container {
|
|
width: 100%; /* 원하는 div 너비 설정 */
|
|
}
|
|
|
|
.content {
|
|
word-wrap: break-word; /* 텍스트가 div 영역을 넘어가면 줄바꿈 */
|
|
overflow-wrap: break-word; /* 최신 브라우저용 */
|
|
}
|
|
|
|
</style>
|
|
<!-- Call to Action-->
|
|
<section class="content-section bg-primary text-white">
|
|
<div class="container px-4 px-lg-5 text-center">
|
|
<!-- 부트스트랩 모달 HTML -->
|
|
<div class="modal fade" id="basicStartModal" tabindex="-1" aria-labelledby="basicStartModalLabel" aria-hidden="true">
|
|
<div class="modal-dialog">
|
|
<div class="modal-content">
|
|
<?php if (session('repetition_count') > session('repetition')):?>
|
|
<div class="alert alert-primary d-flex align-items-center justify-content-center custom-alert-height" role="alert">
|
|
<p class="h6 mb-0"><i class="bi bi-award"></i></p> <p class="display-12 mb-0"> 축하합니다. 학습목표를 달성하였습니다.<br>학습테스트를 진행해 주세요.</p>
|
|
<button type="button" class="btn btn-primary btn-sm stoplearning" data-type="test">Test GO!</button>
|
|
</div>
|
|
<?php endif; ?>
|
|
|
|
<div class="modal-header modal-header-work">
|
|
<div class="modal-title " id="basicStartModalLabel">학습목표횟수(<?=session('repetition')?>/<?=session('repetition_count')?>), 학습단어:(<?=$max?>/<?=$pid?>) </div>
|
|
<button id='favorite-btn' class="btn <?= $word['is_favorite'] ? 'text-custom-ruby' : 'text-custom-silver' ?> favorite-btn" data-pid="<?= $pid ?>">
|
|
<i class="bi bi-heart-fill h4"></i>
|
|
</button>
|
|
</div>
|
|
|
|
<div class="alert alert-primary" id="word_alert" role="alert" style="display: none;"></div>
|
|
|
|
<div class="modal-body">
|
|
<div class="container mt-1">
|
|
<h1><?=$word['word']?>
|
|
<button type="button" class="btn btn-outline-success me-auto btn-sm btn-icon" id="playAudioBtn" onclick="playAudio()">
|
|
<i class="bi bi-play-circle display-10"></i>
|
|
</button>
|
|
</h1>
|
|
<h4>
|
|
<?=$word['phonetic_symbol']?> <?=$word['phonetic_kor']?>
|
|
</h4>
|
|
</div>
|
|
<div class="btn-group btn-group-sm mt-2" role="group">
|
|
<button type="button" class="btn btnspeed <?=(session('screenlayout') == 'screen_speed_fast')?'btn-custom-ruby':'btn-outline-custom-silver'?>" data-pid="<?=$pid?>" data-val="screen_speed_fast">Fast Speed</button>
|
|
<button type="button" class="btn btnspeed <?=(session('screenlayout') == 'screen_speed_medium')?'btn-custom-ruby':'btn-outline-custom-silver'?>" data-pid="<?=$pid?>" data-val="screen_speed_medium">Medium Speed</button>
|
|
<button type="button" class="btn btnspeed <?=(session('screenlayout') == 'screen_speed_slow')?'btn-custom-ruby':'btn-outline-custom-silver'?>" data-pid="<?=$pid?>" data-val="screen_speed_slow">Slow Speed</button>
|
|
</div>
|
|
<div class="container mt-3">
|
|
<?php if (!empty($first_row)): ?>
|
|
<?php
|
|
$i = 1;
|
|
foreach ($first_row as $detail):
|
|
?>
|
|
<div class="word-card pastel-bg">
|
|
<div class="word-card-body">
|
|
<p><strong><?= $i++ ?>. </strong> <?= esc($detail['origin']) ?></p>
|
|
<p class="content">
|
|
<?php if (!empty($detail['word_class'])): ?>
|
|
<strong><?= get_word_class_badge($detail['word_class']) ?></strong>
|
|
<?php endif; ?>
|
|
<?= esc($detail['mean']) ?>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<?php
|
|
if(session('screenlayout') == 'screen_speed_fast') break;
|
|
endforeach;
|
|
?>
|
|
<?php else: ?>
|
|
<p>No word details found.</p>
|
|
<?php endif; ?>
|
|
|
|
|
|
|
|
<?php if ((session('screenlayout') != 'screen_speed_fast' && session('screenlayout') != 'screen_speed_medium')): ?>
|
|
<?php if (!empty($second_row)): ?>
|
|
<?php
|
|
$i = 1;
|
|
foreach ($second_row as $detail):
|
|
?>
|
|
<div class="word-card">
|
|
<div class="word-card-body">
|
|
<p><strong><?= $i++ ?>. </strong> <?= esc($detail['origin']) ?></p>
|
|
<p>
|
|
<?php if (!empty($detail['word_class'])): ?>
|
|
<strong><?= get_word_class_badge($detail['word_class']) ?></strong>
|
|
<?php endif; ?>
|
|
<?= esc($detail['mean']) ?>
|
|
</p>
|
|
|
|
</div>
|
|
</div>
|
|
<?php endforeach; ?>
|
|
<?php else: ?>
|
|
<p>No word details found.</p>
|
|
<?php endif; ?>
|
|
<?php endif; ?>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<?php if (!empty($detail['english_sentence']) || !empty($detail['korean_sentence'])): ?>
|
|
<div class="container mt-5 text-left">
|
|
<?php if (!empty($detail['english_sentence'])): ?>
|
|
<p><strong>예문 : </strong> <?= $detail['english_sentence'] ?></p>
|
|
<?php endif; ?>
|
|
<?php if (!empty($detail['korean_sentence'])): ?>
|
|
<p><strong>해석 : </strong> <?= $detail['korean_sentence'] ?></p>
|
|
<?php endif; ?>
|
|
</div>
|
|
<?php endif; ?>
|
|
</div>
|
|
|
|
<div class="container mb-3">
|
|
<?php if ($pid > $min): ?>
|
|
<a href="<?= base_url('/basicstart/' . ($pid-1)) ?>" class="btn btn-outline-dark me-auto btn-sm"><i class="bi bi-caret-left"></i> Previous</a>
|
|
<?php endif; ?>
|
|
<?php if ($max > $pid): ?>
|
|
<a href="<?= base_url('/basicstart/' . ($pid+1)) ?>" class="btn btn-outline-dark ms-auto btn-sm">Next <i class="bi bi-caret-right"></i></a>
|
|
<?php elseif ($max == $pid): ?>
|
|
<a href="<?= base_url('/basicstart/9999999') ?>" class="btn btn-outline-dark ms-auto btn-sm">Repeat Again <i class="bi bi-caret-right"></i></a>
|
|
<?php endif; ?>
|
|
</div>
|
|
`
|
|
|
|
<div class="modal-footer d-flex">
|
|
<button type="button" class="btn btn-outline-success me-auto" id="playAudioBtn" onclick="playAudio()">
|
|
<i class="bi bi-play-circle"></i> Listening Play
|
|
</button>
|
|
<div>
|
|
<button type="button" class="btn btn-warning btn-sm stoplearning" data-type="close">Stop learning</button>
|
|
</div>
|
|
</div>
|
|
<!-- 오디오 파일 -->
|
|
<audio id="audio" src="/mp3/<?=$word['mp3_file']?>"></audio>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|