Spaces:
Sleeping
Sleeping
| import gradio as gr | |
| import base64 | |
| # Base64 encoded Indian flag SVG with enhanced animation | |
| flag_svg = ''' | |
| <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 900 600" width="900" height="600"> | |
| <defs> | |
| <clipPath id="flag-clip"> | |
| <path d="M0,0 Q450,40 900,0 Q900,300 900,600 Q450,560 0,600" /> | |
| </clipPath> | |
| </defs> | |
| <!-- Sky background --> | |
| <rect width="900" height="600" fill="#87CEEB" /> | |
| <!-- Moving clouds --> | |
| <g> | |
| <path d="M-300,100 Q-150,50 0,100 T300,100" fill="#ffffff" opacity="0.7"> | |
| <animateTransform attributeName="transform" type="translate" from="0 0" to="1200 0" dur="60s" repeatCount="indefinite" /> | |
| </path> | |
| <path d="M-300,200 Q-150,150 0,200 T300,200" fill="#ffffff" opacity="0.5"> | |
| <animateTransform attributeName="transform" type="translate" from="0 0" to="1200 0" dur="45s" repeatCount="indefinite" /> | |
| </path> | |
| </g> | |
| <!-- Flagpole --> | |
| <rect x="50" y="50" width="20" height="500" fill="#8B4513" /> | |
| <circle cx="60" cy="50" r="15" fill="#FFD700" /> | |
| <!-- Animated flag --> | |
| <g transform="translate(70, 50)"> | |
| <g clip-path="url(#flag-clip)"> | |
| <rect width="830" height="200" fill="#FF9933"> | |
| <animate attributeName="y" values="0;10;0" dur="3s" repeatCount="indefinite" /> | |
| </rect> | |
| <rect y="200" width="830" height="200" fill="#FFFFFF"> | |
| <animate attributeName="y" values="200;210;200" dur="3s" repeatCount="indefinite" /> | |
| </rect> | |
| <rect y="400" width="830" height="200" fill="#138808"> | |
| <animate attributeName="y" values="400;410;400" dur="3s" repeatCount="indefinite" /> | |
| </rect> | |
| <g transform="translate(415,300) scale(3.5)"> | |
| <circle r="20" fill="#000080" /> | |
| <circle r="17.5" fill="#FFFFFF" /> | |
| <circle r="3.5" fill="#000080" /> | |
| <g id="d"> | |
| <g id="c"> | |
| <g id="b"> | |
| <g id="a"> | |
| <circle r="0.875" fill="#000080" transform="rotate(7.5) translate(17.5)" /> | |
| <path fill="#000080" d="M 0,17.5 0.6,7 C 0.6,7 0,2 0,2 0,2 -0.6,7 -0.6,7 L 0,17.5 z" /> | |
| </g> | |
| <use xlink:href="#a" transform="rotate(15)"/> | |
| </g> | |
| <use xlink:href="#b" transform="rotate(30)"/> | |
| </g> | |
| <use xlink:href="#c" transform="rotate(60)"/> | |
| </g> | |
| <use xlink:href="#d" transform="rotate(120)"/> | |
| <use xlink:href="#d" transform="rotate(-120)"/> | |
| </g> | |
| </g> | |
| </g> | |
| </svg> | |
| ''' | |
| encoded_flag = base64.b64encode(flag_svg.encode('utf-8')).decode('utf-8') | |
| html = f''' | |
| <html> | |
| <head> | |
| <style> | |
| body {{ | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| height: 100vh; | |
| margin: 0; | |
| background-color: #f0f0f0; | |
| overflow: hidden; | |
| }} | |
| .flag-container {{ | |
| width: 900px; | |
| height: 600px; | |
| perspective: 1000px; | |
| }} | |
| .flag {{ | |
| width: 100%; | |
| height: 100%; | |
| transform-style: preserve-3d; | |
| animation: wave 5s ease-in-out infinite; | |
| }} | |
| @keyframes wave {{ | |
| 0%, 100% {{ transform: rotateY(0deg) rotateX(0deg); }} | |
| 25% {{ transform: rotateY(5deg) rotateX(2deg); }} | |
| 50% {{ transform: rotateY(0deg) rotateX(0deg); }} | |
| 75% {{ transform: rotateY(-5deg) rotateX(-2deg); }} | |
| }} | |
| </style> | |
| </head> | |
| <body> | |
| <div class="flag-container"> | |
| <div class="flag"> | |
| <img src="data:image/svg+xml;base64,{encoded_flag}" alt="Animated Indian Flag"> | |
| </div> | |
| </div> | |
| </body> | |
| </html> | |
| ''' | |
| def show_flag(): | |
| return html | |
| iface = gr.Interface( | |
| fn=show_flag, | |
| inputs=[], | |
| outputs=gr.HTML(), | |
| title="Happy 78th Independence Day", | |
| #description=" Happy 78th Independence Day." | |
| ) | |
| if __name__ == "__main__": | |
| iface.launch() |