<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>/etc/hosts file manager</title> <!-- Dodajemy FontAwesome dla ikon --> <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" /> <style> body { font-family: Arial, sans-serif; background: #f1f1f1; margin: 0; padding: 0; } .container { max-width: 800px; margin: 40px auto; background: #fff; padding: 20px; border-radius: 8px; box-shadow: 0 0 10px #ccc; } h1 { text-align: center; margin-bottom: 1em; } .links { text-align: center; margin-top: 10px; } .links a { color: #007bff; text-decoration: none; margin: 0 10px; font-size: 1.1em; } .links a:hover { text-decoration: underline; } .links i { margin-right: 5px; } /* Style dla bloku Statistics */ .stats { margin: 20px 0; background: #e9ecef; padding: 10px; border-radius: 4px; } .stats h2 { margin-top: 0; } .stats ul { list-style: none; padding-left: 0; } .stats li { margin-bottom: 5px; } /* Style dla bloku Recent Deploy Logs */ .logs { margin-top: 20px; background: #fafafa; border-radius: 4px; border: 1px solid #ddd; padding: 10px; } .log-entry { border-bottom: 1px solid #ccc; padding: 5px 0; } .log-entry:last-child { border-bottom: none; } .user-info { text-align: center; } .log-entry { background: #f9f9f9; margin: 8px 0; padding: 8px 12px; border-left: 4px solid #007bff; border-radius: 4px; } .log-timestamp { font-weight: bold; margin-right: 10px; color: #555; } .log-details { display: inline; color: #333; margin: 0; } .stats-graphic { margin: 20px 0; text-align: center; } .bar-container { display: flex; height: 30px; background: #ddd; border-radius: 4px; overflow: hidden; margin: 10px auto; max-width: 100%; } .bar-success { background: #28a745; color: #fff; line-height: 30px; text-align: center; white-space: nowrap; overflow: hidden; } .bar-failed { background: #dc3545; color: #fff; line-height: 30px; text-align: center; white-space: nowrap; overflow: hidden; } .flash-messages { margin: 20px 0; } .flash-messages p { margin: 0 0 5px 0; padding: 10px; border-radius: 4px; } /* Dla kategorii success */ .flash-messages p.success { background-color: #d4edda; /* Jasnozielone tło */ color: #155724; /* Zielony tekst */ border: 1px solid #c3e6cb; } /* Dla kategorii danger */ .flash-messages p.danger { background-color: #f8d7da; /* Jasnoczerwone tło */ color: #721c24; /* Czerwony tekst */ border: 1px solid #f5c6cb; } /* Dla kategorii info */ .flash-messages p.info { background-color: #d1ecf1; /* Jasnoniebieskie tło */ color: #0c5460; /* Niebieski tekst */ border: 1px solid #bee5eb; } .links-nav ul { /* Usuwamy domyślne wcięcia i kuleczki */ list-style: none; margin: 0; padding: 0; /* Rozmieszczenie linków w elastyczny sposób */ display: flex; flex-wrap: wrap; /* Pozwoli zawijać się wierszom przy małym ekranie */ justify-content: center; gap: 10px; /* Odstęp między przyciskami */ } .links-nav li { margin: 0; padding: 0; } .links-nav li a { display: inline-block; color: #007bff; text-decoration: none; padding: 8px 12px; background: #f8f8f8; border-radius: 4px; border: 1px solid #ddd; transition: background 0.2s; } .links-nav li a:hover { background: #e2e6ea; text-decoration: none; } .deploy-container { margin: 20px auto; /* odstęp u góry i dołu */ text-align: center; /* środek strony */ } .deploy-now-btn { display: inline-block; width: 60%; /* szeroki przycisk - możesz dostosować */ max-width: 400px; /* by się za bardzo nie rozciągał na dużym ekranie */ padding: 15px; font-size: 1.2em; text-decoration: none; color: #fff; background: #007bff; border-radius: 6px; border: 1px solid #007bff; transition: background 0.2s; } .deploy-now-btn:hover { background: #0056b3; } .links-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; } .links-nav li { margin: 0; padding: 0; } .links-nav li a { display: inline-block; color: #007bff; text-decoration: none; padding: 8px 12px; background: #f8f8f8; border-radius: 4px; border: 1px solid #ddd; transition: background 0.2s; } .links-nav li a:hover { background: #e2e6ea; text-decoration: none; } </style> </head> <body> <div class="container"> <h1>/etc/hosts file manager</h1> {% with messages = get_flashed_messages(with_categories=true) %} {% if messages %} <div class="flash-messages"> {% for category, message in messages %} <p class="{{ category }}">{{ message }}</p> {% endfor %} </div> {% endif %} {% endwith %} <div class="user-info"> <p><h2>Welcome, <b>{{ user.username }}</b>!</h2></p> </div> <div class="deploy-container"> <a href="{{ url_for('deploy_now') }}" class="deploy-now-btn"> <i class="fas fa-rocket"></i> Deploy Now </a> </div> <div class="links-nav"> <ul> <li><a href="{{ url_for('manage_hosts') }}"><i class="fas fa-server"></i> Manage remote servers</a></li> <li><a href="{{ url_for('clear_all_hosts') }}"><i class="fas fa-trash-alt"></i> Clear /etc/hosts on remote</a></li> <!-- <li><a href="{{ url_for('list_hosts_files') }}"><i class="fas fa-list"></i> List /etc/hosts files</a></li> --> <li><a href="{{ url_for('edit_local_hosts') }}"><i class="fas fa-edit"></i> Edit /etc/hosts</a></li> <li><a href="{{ url_for('list_regex_hosts') }}"><i class="fas fa-network-wired"></i> Manage Regex/CIDR</a></li> <li><a href="{{ url_for('new_regex_host') }}"><i class="fas fa-plus-circle"></i> Add new CIDR entry</a></li> <li><a href="{{ url_for('backups') }}"><i class="fas fa-archive"></i> Backups</a></li> <li><a href="{{ url_for('settings') }}"><i class="fas fa-cog"></i> Settings</a></li> <li><a href="{{ url_for('change_password') }}"><i class="fas fa-key"></i> Change Password</a></li> <li><a href="{{ url_for('logout') }}"><i class="fas fa-sign-out-alt"></i> Logout</a></li> </ul> </div> <div class="stats"> <h2>Statistics</h2> <ul> <li>Number of managed server: <b>{{ stats.host_count }}</b></li> <li>Total deployments: <b>{{ stats.total_deployments }}</b></li> <li>Successful deployments: <b>{{ stats.successful_deployments }}</b></li> <li>Failed deployments: <b>{{ stats.failed_deployments }}</b></li> </ul> </div> <div class="stats-graphic"> <h2>Deployment Success Rate</h2> <div class="bar-container"> <div class="bar-success" style="width: {{ (stats.successful_deployments / stats.total_deployments * 100) if stats.total_deployments else 0 }}%;"> {{ stats.successful_deployments }} Successful </div> <div class="bar-failed" style="width: {{ (stats.failed_deployments / stats.total_deployments * 100) if stats.total_deployments else 0 }}%;"> {{ stats.failed_deployments }} Failed </div> </div> </div> <div class="logs"> <h2>Recent Deploy Logs</h2> {% if logs %} {% for log in logs %} <div class="log-entry"> <span class="log-timestamp">{{ log.timestamp.strftime('%Y-%m-%d %H:%M:%S') }}</span> <p class="log-details">{{ log.details }}</p> </div> {% endfor %} {% else %} <p>No deployment logs available yet.</p> {% endif %} </div> </div> </body> </html>