Skip to content

Fixed issue #2 #24

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
KajalGrover wants to merge 2 commits into
base: main
Choose a base branch
from
Open

Fixed issue #2 #24

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
cd21b30
Update index.html
KajalGrover Oct 15, 2025
92158d6
Update index.html #fixed issue number #2
KajalGrover Oct 15, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
232 changes: 121 additions & 111 deletions src/templates/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,128 +1,138 @@
<!DOCTYPE html>
<html>

<html lang="en">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!--Import Google Icon Font-->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Port Scanner</title>


<!-- Google Icons + Fonts -->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!--Import materialize.css-->
<link type="text/css" rel="stylesheet" href="static/css/materialize.min.css" media="screen,projection" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<link href="https://fonts.googleapis.com/css2?family=Montserrat&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="static\css\index.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>

<script src="static\js\index.js" type="text/javascript"></script>
<!-- Materialize CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<link rel="stylesheet" href="{{ url_for('static', filename='css/index.css') }}">

<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- Font Awesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>

<body>
<div id="navbar">
<ul class="sidenav sidenav-fixed">
<li>
<div class="user-view">
<div class="background" style="background-color: #3b6978;">
<!-- <img src="images/office.jpg"> -->
</div>
<a href="#user"><img class="circle" src=""></a>
<a href="#name"><span class="white-text name" style="padding-bottom: 5%;" class="navtitle">Port
Scanner<br></span></a>
</div>
</li>
<li><a href="#!">Scan Port</a></li>
<li><a href="#!">About</a></li>
<li><a href="#!">Contact</a></li>
<center>
<a href="https://github.com/vinitshahdeo/PortScanner">
<i class="fa fa-github" style=" font-size:48px; color:#3b6978">
</i>
</a>
</center>

</ul>

<script type="text/javascript" src="static/js/materialize.min.js"></script>
</div>
<div id="showpage">
<span id="showtitle">Port Scanner</span>
<div id="line"></div>
<div id="form">
<div class="row">
<form class="col s12" action="/input" method="POST">
<div class="row">
<div class="input-field col s12">
<input id="host" name="host" type="text" class="validate" placeholder="For eg: google.com">
<label for="host" style="color: black;font-size: 20px;">Host to Scan</label>
<span class="helper-text" data-error="wrong" data-success="right">Enter the website you want
to search open ports for</span>
</div>
</div>

<div class="row">
<div class="input-field col s6">
<input placeholder="For eg: 1" id="first_name" type="number" name="range_low" class="validate">
<label for="first_name" style="color: black;font-size: 20px;">Low</label>
<span class="helper-text" data-error="wrong" data-success="right">Enter the lower range
(inclusive)</span>

</div>
<div class="input-field col s6">
<input placeholder="For eg: 8888" id="last_name" type="number" name="range_high" class="validate">
<label for="last_name" style="color: black;font-size: 20px;">High</label>
<span class="helper-text" data-error="wrong" data-success="right">Enter the higher range
(exclusive)</span>

</div>
</div>
<div>
<!-- <a id="scan-port-button" class="lighten-3 btn-flat" onclick="scanPort()">Scan Now</a> -->
<input type="submit" value="Scan Now" id="scan-port-button" class="lighten-3 btn-flat">
</div>
</form>
<h5>Scanning remote host {{ host }} between range {{ range_low }} to {{ range_high }} :</h5>
<table class="highlight responsive-table">
<thead>
<tr>
<th>Port Number</th>
<th>Status</th>
</tr>
</thead>
<tbody>
{% for port in portnum %}
<tr>
<td>{{ port }}</td>
<td>Open</td>
</tr>
{% endfor %}
</tbody>
</table>
<h5>Scanning completed in {{ total }} time.</h5>
</div>
<body style="font-family: 'Montserrat', sans-serif; background: #f8f9fa;">

<!-- 🔹 Responsive Navbar -->
<nav class="nav-wrapper" style="background-color: #3b6978;">
<div class="container">
<a href="#" class="brand-logo">Port Scanner</a>

<!-- Mobile Toggle -->
<a href="#" data-target="mobile-menu" class="sidenav-trigger">
<i class="material-icons">menu</i>
</a>

<!-- Desktop Links -->
<ul class="right hide-on-med-and-down">
<li><a href="#!">Scan Port</a></li>
<li><a href="#!">About</a></li>
<li><a href="#!">Contact</a></li>
<li>
<a href="https://github.com/vinitshahdeo/PortScanner" target="_blank">
<i class="fa fa-github" style="font-size: 22px;"></i>
</a>
</li>
</ul>
</div>
</div>
<div id="history">
<span id="timer-head">History</span>
<div id="line2"></div>
<span id="timer-text">Last 10 scans</span>
</div>
</nav>

<!-- Mobile Menu -->
<ul class="sidenav" id="mobile-menu">
<li><a href="#!">Scan Port</a></li>
<li><a href="#!">About</a></li>
<li><a href="#!">Contact</a></li>
<li>
<a href="https://github.com/vinitshahdeo/PortScanner" target="_blank">
<i class="fa fa-github"></i> GitHub
</a>
</li>
</ul>

<div id="timer">
<span id="timer-head">Timer</span>
<div id="line2"></div>
<span id="timer-text">Time taken to fetch results</span>
<!-- 🔹 Main Content -->
<div class="container" style="margin-top: 40px;">
<h4 class="center-align" style="color: #3b6978; font-weight: 600;">Port Scanner Tool</h4>
<div class="divider"></div>

<div id="time-taken">
<label id="minutes">00</label>
<label id="colon">:</label>
<label id="seconds">00</label>
<div class="row" style="margin-top: 30px;">
<form class="col s12" action="/input" method="POST">
<div class="input-field col s12">
<input id="host" name="host" type="text" placeholder="For eg: google.com" required>
<label for="host" style="color: black;">Host to Scan</label>
<span class="helper-text">Enter the website you want to scan for open ports</span>
</div>

<div class="input-field col s6">
<input id="range_low" type="number" name="range_low" placeholder="For eg: 1" required>
<label for="range_low" style="color: black;">Low Range</label>
</div>

<div class="input-field col s6">
<input id="range_high" type="number" name="range_high" placeholder="For eg: 8888" required>
<label for="range_high" style="color: black;">High Range</label>
</div>

<div class="center-align">
<button type="submit" class="btn waves-effect waves-light" style="background-color: #3b6978;">
Scan Now
</button>
</div>
</form>
</div>

<!-- Results Section -->
{% if host %}
<h5>Scanning remote host <b>{{ host }}</b> between range <b>{{ range_low }}</b> to <b>{{ range_high }}</b>:</h5>
<table class="highlight responsive-table">
<thead>
<tr>
<th>Port Number</th>
<th>Status</th>
</tr>
</thead>
<tbody>
{% for port in portnum %}
<tr>
<td>{{ port }}</td>
<td>Open</td>
</tr>
{% endfor %}
</tbody>
</table>
<h6>Scanning completed in <b>{{ total }}</b> time.</h6>
{% endif %}
</div>

<!-- History + Timer (Optional original parts) -->
<div class="container" style="margin-top: 60px;">
<h5 style="color: #3b6978;">History</h5>
<div class="divider"></div>
<p>Last 10 scans will appear here.</p>

</body>
<h5 style="color: #3b6978; margin-top: 40px;">Timer</h5>
<div class="divider"></div>
<p>Time taken to fetch results</p>
<div id="time-taken" style="font-size: 22px; color: #3b6978;">
<span id="minutes">00</span>:<span id="seconds">00</span>
</div>
</div>

</html>
<!-- 🔹 Scripts -->
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script>
// Initialize Sidenav for Mobile
document.addEventListener('DOMContentLoaded', function () {
var elems = document.querySelectorAll('.sidenav');
M.Sidenav.init(elems);
});
</script>
</body>
</html>