Spaces:
Sleeping
Sleeping
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1"> | |
| <title>Image Watermarking - ACO</title> | |
| <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet"> | |
| <style> | |
| :root { | |
| --primary-color: #000000; | |
| --secondary-color: #f5a623; | |
| --background-color: #f7f9fc; | |
| --text-color: #333333; | |
| --border-color: #e0e0e0; | |
| --header-height: 80px; | |
| --footer-height: 60px; | |
| } | |
| /* Header Styles */ | |
| .header { | |
| background: #fff; | |
| box-shadow: 0 2px 4px rgba(0,0,0,0.1); | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| height: var(--header-height); | |
| display: flex; | |
| align-items: center; | |
| padding: 0 40px; | |
| z-index: 1000; | |
| } | |
| .header-logo { | |
| height: 40px; | |
| margin-right: 40px; | |
| } | |
| .header-logo img { | |
| height: 100%; | |
| width: auto; | |
| } | |
| .nav-links { | |
| display: flex; | |
| gap: 30px; | |
| } | |
| .nav-links a { | |
| color: var(--primary-color); | |
| text-decoration: none; | |
| font-weight: 500; | |
| font-size: 16px; | |
| transition: color 0.3s ease; | |
| } | |
| .nav-links a:hover { | |
| color: var(--secondary-color); | |
| } | |
| /* Footer Styles */ | |
| .footer { | |
| background: #000; | |
| position: fixed; | |
| bottom: 0; | |
| left: 0; | |
| right: 0; | |
| height: var(--footer-height); | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| padding: 0 40px; | |
| } | |
| .footer-content { | |
| display: flex; | |
| align-items: center; | |
| gap: 40px; | |
| } | |
| .footer-logo { | |
| height: 30px; | |
| } | |
| .footer-logo img { | |
| height: 100%; | |
| width: auto; | |
| filter: invert(1); | |
| } | |
| .footer-links { | |
| display: flex; | |
| gap: 20px; | |
| } | |
| .footer-links a { | |
| color: #fff; | |
| text-decoration: none; | |
| font-size: 14px; | |
| } | |
| .copyright { | |
| color: #fff; | |
| font-size: 14px; | |
| } | |
| /* Adjust main content for fixed header/footer */ | |
| .main-content { | |
| margin-top: calc(var(--header-height) + 20px); | |
| margin-bottom: calc(var(--footer-height) + 20px); | |
| padding: 20px; | |
| } | |
| /* Your existing styles would go here */ | |
| </style> | |
| <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='styles.css') }}"> | |
| </head> | |
| <body> | |
| <header class="header"> | |
| <div class="header-logo"> | |
| <img src="{{ url_for('static', filename='images/aco-logo.png') }}" alt="ACO Logo"> | |
| </div> | |
| <nav class="nav-links"> | |
| <a href="/">Home</a> | |
| <a href="#">About</a> | |
| <a href="#">Contact</a> | |
| <a href="#">Help</a> | |
| </nav> | |
| </header> | |
| <div class="main-content"> | |
| <div class="container"> | |
| <h1>Image Watermarking</h1> | |
| {% include 'form_content.html' %} | |
| </div> | |
| </div> | |
| <footer class="footer"> | |
| <div class="footer-content"> | |
| <div class="footer-logo"> | |
| <img src="{{ url_for('static', filename='images/aco-logo.png') }}" alt="ACO Logo"> | |
| </div> | |
| <div class="footer-links"> | |
| <a href="#">Terms of Service</a> | |
| <a href="#">Privacy Policy</a> | |
| <a href="#">Contact</a> | |
| </div> | |
| </div> | |
| <div class="copyright"> | |
| © 2024 ACO. All rights reserved. | |
| </div> | |
| </footer> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.21.1/axios.min.js"></script> | |
| <script src="{{ url_for('static', filename='script.js') }}"></script> | |
| </body> | |
| </html> |