You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
89 lines
2.5 KiB
89 lines
2.5 KiB
{% extends "bootstrap/base.html" %}
|
|
{% block title %}Technical Incompetence Link Shortener{% endblock %}
|
|
|
|
{% block styles %}
|
|
{{super()}}
|
|
<link rel="stylesheet" href="{{url_for('.static', filename='style.css')}}">
|
|
{% endblock %}
|
|
|
|
{% block navbar %}
|
|
<nav class="navbar navbar-expand-lg sticky-top navbar-dark bg-dark">
|
|
<div class="navbar-brand">Technical Incompetence Link Shortener</div>
|
|
<form class="form-inline ml-auto">
|
|
{# <div class="custom-control custom-switch">
|
|
<input type="checkbox" class="custom-control-input" id="darkSwitch" />
|
|
<label class="custom-control-label" for="darkSwitch">Dark Mode</label>
|
|
</div>
|
|
<div class="navbar-text" style="margin-right: 20px; ">{{ user['userName'] }}</div> #}
|
|
<a class="btn btn-primary" href="/logout" role="button">Logout</a>
|
|
</form>
|
|
</nav>
|
|
{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="container" style="margin-top: 15px">
|
|
<div id="success-alert" class="alert alert-success" role="alert" style="display: none;">
|
|
This is a success alert—check it out!
|
|
</div>
|
|
<div id="error-alert" class="alert alert-danger" role="alert" style="display: none;">
|
|
This is a danger alert—check it out!
|
|
</div>
|
|
<form>
|
|
<div class="row justify-content-center">
|
|
<div class="col-lg-6">
|
|
<label for="formGroupExampleInput4">URL</label>
|
|
<input id="link-form" type="text" class="form-control" placeholder="https://example.com">
|
|
<br>
|
|
<button type="button" class="btn btn-primary" onclick="shortenUrl();">Shorten Link</button>
|
|
<br>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
{% endblock %}
|
|
|
|
{% block scripts %}
|
|
{{ super() }}
|
|
<script>
|
|
function shortenUrl() {
|
|
url = $('#link-form').val();
|
|
|
|
if (url.trim().length === 0) {
|
|
showError('URL is required');
|
|
return false;
|
|
}
|
|
|
|
$.ajax({
|
|
url: '/shorten',
|
|
method: 'POST',
|
|
data: { "url": url },
|
|
success: function(data) {
|
|
if (data !== 'Error')
|
|
showSuccess(data);
|
|
else
|
|
showError('URL cannot be empty');
|
|
}
|
|
});
|
|
}
|
|
|
|
function showError(error) {
|
|
hideSuccess();
|
|
$('#error-alert').text(error);
|
|
$('#error-alert').show();
|
|
}
|
|
|
|
function showSuccess(message) {
|
|
hideError();
|
|
$('#success-alert').html(message);
|
|
$('#success-alert').show();
|
|
}
|
|
|
|
function hideError(error) {
|
|
$('#error-alert').hide();
|
|
}
|
|
|
|
function hideSuccess(error) {
|
|
$('#success-alert').hide();
|
|
}
|
|
</script>
|
|
{% endblock %}
|