php - 背景色が異なるアカウントの配列

Question

ページの上部に次のコードを持つ CakePHP Web アプリがあります。

<section class="content">

<style>.center {text-align: center;}</style>
  <!-- Small boxes (Stat box) -->

    <div class="row normaluserdash">
    <?php 
    $colors = array('', 'green','aqua','purple','orange');
    foreach( $user->accounts as $account ) {
    ?>

        <div class="normaluserdash col-xl-3 col-md-4 col-sm-6 col-12">

                            <!-- Card -->
                            <div class="card text-white bg-info">

                                <!-- Card Header -->
                                <h4 class="card-header text-white"><?=$account->title?></h4>
                                <!-- /card header -->

                                <!-- Card Body -->
                                <div class="card-body">

                                    <!-- Card Title-->
                                    <h2 class="card-title text-white center"><?=$this->Format->currency($account->balance)?></h2>
                                    <!-- Card Title-->

                                </div>
                                <!-- /card body -->

                                <!-- Card Footer -->

                                <!-- /card footer -->

                            </div>
                            <!-- /card -->

        </div>
    <?php } ?>

    </div>

上記のコードは 4 回繰り返されるため、上記のコードはユーザーの口座残高のうち 4 つの口座残高を表示します。現在、上記の 4 つのブロックすべての色は青です。それぞれに異なる色をエコーし​​、それを CSS クラスにフィードするものを作成したいと思います。次に、4 色すべてのカラーリングを含む CSS スタイルシートを作成できます。4ブロック全部違う色にしたいけど、リフレッシュ後はそのままにしてほしい。JS によるランダム生成は、誰かが提案するまで機能しません。

ご協力いただきありがとうございます。ご参考までに、ウェブサイトはhttps://bank.northwatchbank.comで、サインアップして表示できます。簡単に言えば、詐欺師をいじるための偽の銀行です。

編集修正:

    <?php 
    function getCalorBykey($key, $colors){
         $colors_count = count($colors);
        // get reminder
        $reminder =  ($key)%$colors_count;
        return $colors[$reminder];
    }

    $colors = array('info','warning','danger','success');
    foreach( $user->accounts as $key => $account ) {
    ?>

        <div class="normaluserdash col-xl-3 col-md-4 col-sm-6 col-12">

            <!-- Card -->
            <div class="card text-white bg-info card-<?= getCalorBykey($key, $colors) ?>">


                                <!-- Card Header -->
                                <h4 class="card-header text-white"><?=$account->title?></h4>
                                <!-- /card header -->

                                <!-- Card Body -->
                                <div class="card-body">

                                    <!-- Card Title-->
                                    <h2 class="card-title text-white center"><?=$this->Format->currency($account->balance)?></h2>
                                    <!-- Card Title-->

                                </div>
                                <!-- /card body -->

                                <!-- Card Footer -->

                                <!-- /card footer -->

                            </div>
                            <!-- /card -->

        </div>
    <?php } ?>

    </div>

助けてくれた Jasco に感謝します。私のテーマで動作させるためにコードを少し変更するだけで済みました。