pulumi-hugo-cn/themes/default/layouts/partials/home/console.html

<div id="carousel-console" class="text-left text-base relative bg-gray-100 text-gray-700">
    <div class="bg-gray-400 rounded-t border-r-2 border-gray-500">
        <div class="flex p-2">
            <div class="bg-red-600 rounded-full h-3 w-3"></div>
            <div class="bg-yellow-600 rounded-full h-3 w-3 mx-2"></div>
            <div class="bg-green-600 rounded-full h-3 w-3"></div>
        </div>
    </div>
    <div style="height: 400px;">
        <div class="bg-purple-600 py-4 px-6">
            <svg width="20" height="16" viewBox="0 0 20 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path
                    d="M10.1363 3.00616C7.53919 3.00616 5.42633 5.11762 5.42633 7.71299V15.1383C5.42633 15.6142 5.81243 16 6.28861 16C6.76479 16 7.15089 15.6142 7.15089 15.1383V7.71299C7.15089 6.06789 8.49009 4.72958 10.1363 4.72958C11.7825 4.72958 13.1217 6.06789 13.1217 7.71299C13.1217 9.3581 11.7825 10.6964 10.1363 10.6964C9.6601 10.6964 9.274 11.0822 9.274 11.5581C9.274 12.034 9.6601 12.4198 10.1363 12.4198C12.7334 12.4198 14.8462 10.3084 14.8462 7.71299C14.8462 5.11762 12.7334 3.00616 10.1363 3.00616Z"
                    fill="white"
                />
                <path
                    d="M9.88632 15.5619C9.55369 15.5619 9.2191 15.5407 8.89172 15.4989L8.86816 15.4958C8.49207 15.4433 8.22975 15.0961 8.28224 14.7204C8.33473 14.3449 8.68213 14.083 9.05688 14.1348C9.0603 14.1351 9.07214 14.1367 9.07384 14.137C9.3358 14.1704 9.61179 14.1878 9.88632 14.1878C11.3902 14.1878 12.8525 13.656 14.0041 12.6903C14.1217 12.5918 14.2688 12.5353 14.4222 12.5299C16.6137 12.454 18.3303 10.6774 18.3303 8.48535C18.3303 7.74331 18.1279 7.01798 17.7449 6.38768C17.6664 6.25849 17.6327 6.10699 17.649 5.9567C17.6643 5.81642 17.6721 5.67772 17.6721 5.54427C17.6721 3.47002 15.9836 1.78258 13.9081 1.78258C13.5621 1.78258 13.2166 1.83064 12.881 1.92555C12.7291 1.96837 12.5667 1.958 12.4217 1.89542C11.6187 1.54947 10.7657 1.37405 9.88632 1.37405C7.09148 1.37405 4.63891 3.15944 3.78322 5.81678C3.71193 6.03831 3.53335 6.2086 3.30862 6.26947C2.17011 6.57761 1.37496 7.61693 1.37496 8.79666C1.37496 10.0875 2.33685 11.2012 3.61233 11.3875C3.6393 11.3914 3.66591 11.395 3.69277 11.3981C4.06996 11.4419 4.34009 11.783 4.29615 12.1599C4.25232 12.5367 3.91115 12.8072 3.53384 12.7629C3.49356 12.7583 3.45327 12.753 3.41336 12.7471C1.46749 12.4631 0 10.7647 0 8.79666C0 7.12411 1.04855 5.63673 2.5916 5.05827C3.72426 2.01814 6.612 0 9.88632 0C10.8736 0 11.834 0.182247 12.7446 0.542228C13.1268 0.453422 13.5171 0.408531 13.9081 0.408531C16.7417 0.408531 19.0471 2.71236 19.0471 5.54427C19.0471 5.65283 19.0434 5.76335 19.0361 5.87497C19.4746 6.67178 19.7053 7.56936 19.7053 8.48535C19.7053 11.3421 17.5286 13.6721 14.7071 13.8899C13.3378 14.9698 11.6351 15.5619 9.88632 15.5619Z"
                    fill="#EE985D"
                />
            </svg>
        </div>
        <div class="relative w-full">
            <!-- Activity -->
            <div class="tab opacity-0 transition-all absolute inset-0">
                <div class="bg-white px-6 text-sm border-t border-b border-gray-200">
                    <ul class="p-0 inline-flex items-center list-none uppercase text-xs">
                        <li class="my-0 mr-2 px-2 py-3"><span>Stack</span></li>
                        <li class="my-0 mx-2 px-2 py-3 border-b-2 border-purple-500"><span>Activity</span></li>
                        <li class="my-0 mx-3 px-2 py-3"><span>Resources</span></li>
                    </ul>
                </div>
                <div class="py-4 px-4 text-xs">
                    <div class="bg-white p-4 rounded border-t-2 border-green-500 shadow">
                        <div class="flex items-center">
                            <div>
                                <div class="text-gray-800">Update #1</div>
                                <div>
                                    <span class="text-gray-500">
                                        <small>10 seconds ago</small>
                                        <i class="text-green-500 fas fa-check ml-2"></i>
                                    </span>
                                </div>
                            </div>
                            <div class="ml-auto">
                                <div class="bg-green-500 text-white p-1 rounded">
                                    <span>&nbsp;+2&nbsp;</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="bg-gray-900 rounded mt-4 text-xs px-4 py-2 font-mono">
                        <small>
                            <div class="text-purple-200 my-2">Changes:</div>
                            <div><pre class="overflow-x-hidden bg-transparent border-none p-0 m-0 text-blue-500">    Type                 Name                Status</pre></div>
                            <div>
                                <pre
                                    class="overflow-x-hidden bg-transparent border-none p-0 m-0 text-white"
                                ><span class="text-green-500">+</span>   pulumi:pulumi:Stack  aws-typescript-dev  <span class="text-green-400">created</span></pre>
                            </div>
                            <div>
                                <pre
                                    class="overflow-x-hidden bg-transparent border-none p-0 m-0 text-white"
                                ><span class="text-green-500">+</span>   <span class="text-gray-500"></span>aws:s3:Bucket        my-bucket           <span class="text-green-400">created</span></pre>
                            </div>
                            <div class="text-purple-200 mt-3">Resources:</div>
                            <div class="text-green-500 mb-4"><pre class="overflow-x-hidden bg-transparent border-none p-0 m-0 text-green-500">  + 2 created</pre></div>
                            <div class="text-purple-200 mb-3">Duration: <span class="text-white">8s</span></div>
                        </small>
                    </div>
                </div>
            </div>

            <!-- Resources -->
            <div class="tab opacity-0 transition-all absolute inset-0">
                <div class="bg-white px-6 text-sm border-t border-b border-gray-200">
                    <ul class="p-0 inline-flex items-center list-none uppercase text-xs">
                        <li class="my-0 mr-2 px-2 py-3"><span>Stack</span></li>
                        <li class="my-0 mx-2 px-2 py-3"><span>Activity</span></li>
                        <li class="my-0 mx-3 px-2 py-3 border-b-2 border-purple-500"><span>Resources</span></li>
                    </ul>
                </div>
                <div class="py-4 px-4 text-xs">
                    <div class="bg-white p-4 rounded shadow">
                        <div class="flex items-center font-mono border-b border-gray-200 pb-5 mb-5">
                            <div class="w-6"><i class="fas fa-cloud text-purple-600"></i></div>
                            <div class="w-1/2">
                                <span>pulumi:providers:aws</span>
                            </div>
                            <div class="w-1/2">default_0_18_27</div>
                        </div>
                        <div class="flex items-center font-mono">
                            <div class="w-6"><i class="fas fa-box text-purple-600"></i></div>
                            <div class="w-1/2">
                                <span>aws:s3:Bucket</span>
                            </div>
                            <div class="w-1/2">my-bucket</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>