^^&&^^

Edit File: book.php

<?php

if( class_exists( 'CSF' ) ) {

CSF::createWidget( 'orun_widget_post_module_book', array(

'title'       => esc_html__( 'Oruno - Kaynak Önerisi Bileşeni', 'orun' ),

'class'       => 'orun-widget-fields',

'classname'   => 'orun-widget-post-module-1',

'description' => esc_html__( 'Kaynak önerisi bileşenidir.', 'orun' ),

'fields'      => array(

array(

'id' => 'imagefield',

'type' => 'media',

'title' => esc_html__('Görsel Seçin:', 'orun'),

'subtitle' => esc_html__('Bir görsel seçin veya yükleyin.', 'orun'),

array(

'id' => 'baslik',

'type' => 'text',

'title' => esc_html__('Başlık Giriniz:', 'orun'),

'subtitle' => esc_html__('Affiliate alanının başlığını giriniz.', 'orun'),

'default' => '3D Yayınları TYT Matematik Soru Bankası',

array(

'id' => 'aciklama',

'type' => 'textarea',

'title' => esc_html__('Başlık Giriniz:', 'orun'),

'subtitle' => esc_html__('Affiliate alanının başlığını giriniz.', 'orun'),

'default' => '3D Yayınları TYT Matematik Soru Bankası içerdiği ÖSYM uyumlu ve yeni nesil tarzda sorularıyla

konu çalışması sonrası kendinizi en iyi şekilde deneyebileceğiniz eşsiz bir kaynaktır. Özellikle kolay - orta seviye kaynağınızdan sonra

2.kaynak olarak çözmenizi tavsiye ediyoruz.',

array(

'type' => 'notice',

'style' => 'success',

'content' => 'İlk buton için ayarlar başlıyor',

array(

'id' => 'butontext',

'type' => 'text',

'title' => esc_html__('Buton yazısını giriniz: ', 'orun'),

'subtitle' => esc_html__('İçeriğini giriniz.', 'orun'),

'default' => 'Linke git',

array(

'id' => 'butonlink',

'type' => 'text',

'title' => esc_html__('Butonun linkini giriniz:', 'orun'),

'subtitle' => esc_html__('Linki giriniz.', 'orun'),

'default' => 'orunotema.com.tr',

array(

'id' => 'ilkbutonarkarenk',

'type' => 'color',

'title' => esc_html__('Buton Arkaplan Rengi:', 'orun'),

'subtitle' => esc_html__('Butonun arkaplan rengini seçiniz.', 'orun'),

'default' => '#4CAF50',

array(

'id' => 'ilkbutonrenk',

'type' => 'color',

'title' => esc_html__('Buton Yazı Rengi:', 'orun'),

'subtitle' => esc_html__('Butonun yazı rengini seçiniz.', 'orun'),

'default' => '#fff',

array(

'id' => 'icon1',

'type' => 'icon',

'title' => __('Icon', 'orun'),

array(

'type' => 'notice',

'style' => 'success',

'content' => '1.Dinamik Bar ayarları başlıyor',

array(

'id' => 'bar1text',

'type' => 'textarea',

'title' => esc_html__('Özellik giriniz:', 'orun'),

'subtitle' => esc_html__('Özellik alanı içeriğini giriniz.', 'orun'),

'default' => 'Zorluk seviyesi',

array(

'id' => 'bar1yuzde',

'type' => 'text',

'title' => esc_html__('1.barın yüzdesini giriniz:', 'orun'),

'subtitle' => esc_html__('Yüzde giriniz.', 'orun'),

'default' => '63',

array(

'type' => 'notice',

'style' => 'success',

'content' => '2.Dinamik Bar ayarları başlıyor',

array(

'id' => 'bar2text',

'type' => 'textarea',

'title' => esc_html__('Özellik giriniz:', 'orun'),

'subtitle' => esc_html__('Özellik alanı içeriğini giriniz.', 'orun'),

'default' => 'Başlangıç seviyesine uygunluk',

array(

'id' => 'bar2yuzde',

'type' => 'text',

'title' => esc_html__('2.barın yüzdesini giriniz:', 'orun'),

'subtitle' => esc_html__('Yüzde giriniz.', 'orun'),

'default' => '63',

array(

'type' => 'notice',

'style' => 'success',

'content' => '3.Dinamik Bar ayarları başlıyor',

array(

'id' => 'bar3text',

'type' => 'textarea',

'title' => esc_html__('Özellik giriniz:', 'orun'),

'subtitle' => esc_html__('Özellik alanı içeriğini giriniz.', 'orun'),

'default' => 'Soru çeşitliliği',

array(

'id' => 'bar3yuzde',

'type' => 'text',

'title' => esc_html__('2.barın yüzdesini giriniz:', 'orun'),

'subtitle' => esc_html__('Yüzde giriniz.', 'orun'),

'default' => '63',

array(

'type' => 'notice',

'style' => 'success',

'content' => '4.Dinamik Bar ayarları başlıyor',

array(

'id' => 'bar4text',

'type' => 'textarea',

'title' => esc_html__('Özellik giriniz:', 'orun'),

'subtitle' => esc_html__('Özellik alanı içeriğini giriniz.', 'orun'),

'default' => 'Tasarım/Grafik',

array(

'id' => 'bar4yuzde',

'type' => 'text',

'title' => esc_html__('4.barın yüzdesini giriniz:', 'orun'),

'subtitle' => esc_html__('Yüzde giriniz.', 'orun'),

'default' => '63',

array(

'id' => 'bar5text',

'type' => 'textarea',

'title' => esc_html__('Özellik giriniz:', 'orun'),

'subtitle' => esc_html__('Özellik alanı içeriğini giriniz.', 'orun'),

'default' => 'Eğitim/Program',

array(

'id' => 'bar5yuzde',

'type' => 'text',

'title' => esc_html__('5.barın yüzdesini giriniz:', 'orun'),

'subtitle' => esc_html__('Yüzde giriniz.', 'orun'),

'default' => '82',

)

) );

if( ! function_exists( 'orun_widget_post_module_book' ) ) {

function orun_widget_post_module_book( $args, $instance ) {

if ( ! empty( $instance['title'] ) ) {

echo $args['before_title'] . apply_filters( 'widget_title', $instance['title'] ) . $args['after_title'];

}

$i = $instance['bar1yuzde'];

$j = $instance['bar2yuzde'];

$k = $instance['bar3yuzde'];

$z = $instance['bar4yuzde'];

$a = $instance['bar5yuzde'];

<style>

@media(min-width:992px){

.kaynak {

display: flex;

padding:52px 13px;

border:1px solid #f2f2f2;

}

.column {

flex: 1;

padding: 20px;

}

.column img {

max-width: 100%;

height: auto;

}

.column:nth-child(2) {

flex: 3;

}

.buton1{

text-align: center;

}

.progress {

position: relative;

display: flex;

align-items: center;

width: 100%;

background-color: #EDEDFF;

border: 1px solid #ddd;

margin-top:18px;

}

.progress-bar {

height: 100%;

color: #fff;

font-weight: bold;

display: flex;

align-items: center;

transition: width 2s ease; /* Animasyon süresi ve geçiş efekti belirlendi */

}

.progress-bar-text {

margin-left: 10px;

position: absolute; /* Yazıyı sabit hale getirir */

left: 5px; /* İlerleme çubuğundan 5px sola kaydırır */

color: #fff;

position: absolute;

z-index: 999;

align-items: center;

text-shadow: 0 0 15px black;

}

.bar{

border:1px solid #f2f2f2;

box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);

border-radius:14px;

}

.btn-style {

background-color: #4CAF50;

color: white;

border: none;

padding: 8px 15px;

text-align: center;

text-decoration: none;

display: inline-block;

font-size: 14px;

border-radius: 8px;

box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);

transition: 0.3s;

cursor: pointer;

}

.btn-style:hover {

background-color: #45a049;

}

.btn-style a {

color: white;

text-decoration: none;

}

@media(max-width:552px){

.column {

width: 100%;

}

.buton1{

text-align: center;

margin-bottom:13px;

}

</style>

<img src=" <?php

if (!empty($instance['imagefield']['url'])) {

$image_url = esc_url($instance['imagefield']['url']);

echo $image_url;

}

?>" alt="Küçük Görsel">

</div>

<h3><?php

if (!empty($instance['baslik'])) {

echo wp_kses_post($instance['baslik']);

}

?></h3>

<p style="margin-top: 28px;"><?php

if (!empty($instance['aciklama'])) {

echo wp_kses_post($instance['aciklama']);

}

?></p>

<?php

if (!empty($instance['butontext'])) {

$buton_yazisi = esc_html($instance['butontext']);

$buton_linki = esc_url($instance['butonlink']);

$buton_rengi = esc_attr($instance['butonrengi']);

$buton_bg_rengi = esc_attr($instance['butonarkarenk']);

$iconu = esc_attr($instance['icon1']);

echo '<a style="color: ' . $buton_rengi . '; background-color: ' . $buton_bg_rengi . ';" href="' . $buton_linki . '" class="orun-pm-cat-button-x ">

<span>

' . $buton_yazisi . '

</span>

</a>';

}

</button>

</div>

<?php if (!empty($instance['bar1text'])) {

echo wp_kses_post($instance['bar1text']);

} ?>

</span>

</div>

<?php if (!empty($instance['bar2text'])) {

echo wp_kses_post($instance['bar2text']);

} ?></span>

</div>

<?php if (!empty($instance['bar3text'])) {

echo wp_kses_post($instance['bar3text']);

} ?>

</span>

</div>

<?php if (!empty($instance['bar4text'])) {

echo wp_kses_post($instance['bar4text']);

} ?>

</span>

</div>

<?php if (!empty($instance['bar5text'])) {

echo wp_kses_post($instance['bar5text']);

} ?>

</span>

</div>

document.addEventListener("DOMContentLoaded", function () {

var i = <?php echo $i; ?>;

var j = <?php echo $j; ?>;

var k = <?php echo $k; ?>;

var z = <?php echo $z; ?>;

var a = <?php echo $a; ?>;

var progressBar = document.getElementById("progress-bar");

var progressBar2 = document.getElementById("progress-bar2");

var progressBar3 = document.getElementById("progress-bar3");

var progressBar4 = document.getElementById("progress-bar4");

var progressBar5 = document.getElementById("progress-bar5");

progressBar.style.width = i + "%";

progressBar2.style.width = j + "%";

progressBar3.style.width = k + "%";

progressBar4.style.width = z + "%";

progressBar5.style.width = a + "%";

function setProgressBarColor(progressBar, value) {

if (value < 30) {

progressBar.style.backgroundColor = "red";

} else if (value >= 30 && value < 60) {

progressBar.style.backgroundColor = "rgb(250, 167, 50)";

} else {

progressBar.style.backgroundColor = "rgb(91, 183, 91)";

}

setProgressBarColor(progressBar, i);

setProgressBarColor(progressBar2, j);

setProgressBarColor(progressBar3, k);

setProgressBarColor(progressBar4, z);

setProgressBarColor(progressBar5, a);

});

</script>

<?php

}