charlotte/CamHack25
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Merge branch 'website_frontend' into website

Browse source
This commit is contained in:
Oliver Gaskell 2025-11-02 14:09:42 +00:00
commit aa13628749
No known key found for this signature in database
GPG key ID: F971A08925FCC0AD
17 changed files with 229 additions and 11 deletions
Download patch file Download diff file Expand all files Collapse all files

1
website/settings.py
View file

@ -116,6 +116,7 @@ USE_TZ = True
# https://docs.djangoproject.com/en/5.2/howto/static-files/ # https://docs.djangoproject.com/en/5.2/howto/static-files/
STATIC_URL = 'static/' STATIC_URL = 'static/'
STATICFILES_DIRS = [BASE_DIR / "static"]
# Default primary key field type # Default primary key field type
# https://docs.djangoproject.com/en/5.2/ref/settings/#default-auto-field # https://docs.djangoproject.com/en/5.2/ref/settings/#default-auto-field

73
websiteapp/static/css/styles.css Normal file
View file

@ -0,0 +1,73 @@
@font-face {
font-family: 'CynthoBold';
src:
url('/static/font/CynthoNextBold.otf') format('opentype');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'CynthoRegular';
src:
url('/static/font/CynthoNextRegular.otf') format('opentype');
font-weight: normal;
font-style: normal;
}
/* This sets the font color for all text */
body {
background-color:rgba(250, 184, 0);
color: #006cab;
font-size: 20px;
font-family: "CynthoRegular", sans-serif;;
margin: 0;
padding: 0;
text-align: center;
}
button {
background-color: rgba(0, 108, 171);
color: rgba(250, 184, 0);
font-size: 20px;
font-family: "CynthoRegular", sans-serif;
font-weight: bold;
padding: 25px 25px;
border: none; /* removes default border */
border-radius: 5px; /* rounded corners */
cursor: pointer; /* pointer on hover */
align-items: center; /* aligns vertically */
margin-top: 20px;
}
#map {
height: 550px;
width: 100%;
}
textarea {
width: 80%;
height: 300px;
padding: 12px;
box-sizing: border-box;
border: 4px solid rgba(0, 108, 171);
border-radius: 5px;
background-color: rgb(255, 199, 44);
font-size: 18px;
color: #006cab;
resize: none;
margin-top: 20px;
}
.btn-group {
display: flex; /* places buttons side-by-side */
justify-content: center; /* centers them horizontally */ /* aligns vertically */
gap: 15px;
margin-top: 10px;
}
img {
align-items: center;
width: 80%;
}

BIN
websiteapp/static/font/CynthoNextBold.otf Normal file
View file

Binary file not shown.

BIN
websiteapp/static/font/CynthoNextExtraBold.otf Normal file
View file

Binary file not shown.

BIN
websiteapp/static/font/CynthoNextExtraLight.otf Normal file
View file

Binary file not shown.

BIN
websiteapp/static/font/CynthoNextLight.otf Normal file
View file

Binary file not shown.

BIN
websiteapp/static/font/CynthoNextMedium.otf Normal file
View file

Binary file not shown.

BIN
websiteapp/static/font/CynthoNextRegular.otf Normal file
View file

Binary file not shown.

BIN
websiteapp/static/font/CynthoNextSemiBold.otf Normal file
View file

Binary file not shown.

BIN
websiteapp/static/font/CynthoNextThin.otf Normal file
View file

Binary file not shown.

BIN
websiteapp/static/img/drawing.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 147 KiB

23
websiteapp/templates/websiteapp/base.html
View file

@ -1,14 +1,33 @@
{% load static %}
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<title>Hello World</title>
<!-- Link your custom CSS -->
<link rel="stylesheet" href="{% static 'css/styles.css' %}">
<title>GREGGORDINATES</title>
<!-- Global CSS -->
<link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
</head> </head>
<body> <body>
<h1>Greggordinates</h1> <br>
<br>
<h1 style="color:#ffffff ; margin-top: 20px; margin-bottom: 10px;
letter-spacing: 1.5px;" >
GREGGordinates
</h1>
<p> "Everything is relative to greggs, and only that is absolute." </p>
{% block content %} {% block content %}
{% endblock %} {% endblock %}
<!-- Global JS -->
<script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
</body> </body>
</html> </html>

24
websiteapp/templates/websiteapp/decode.html
View file

@ -2,6 +2,28 @@
{% block content %} {% block content %}
<p> Landing Page </p> <br><br>
<h3>What's your cool GREGGordinates :3</h3>
<textarea id="greggordinates" name="greggordinates" rows="4" cols="50">
</textarea>
<br><br>
<div class="btn-group">
<a href="{% url 'landing_page' %}">
<button>
←
</button>
</a>
<a href="{% url 'encode_result' %}">
<button onclick="saveAndGo()">
Get lame location :/
</button>
</a>
</div>
{% endblock %} {% endblock %}

75
websiteapp/templates/websiteapp/encode.html
View file

@ -2,6 +2,79 @@
{% block content %} {% block content %}
<p> Landing Page </p> <p id="result"></p>
<br>
<div id="map" data-mode=""></div>
<input
type="hidden"
data-map-markers=""
value=""
name="map-geojson-data"
id="mapData"
/>
<p id="coords">Click on the map to choose your lame location</p>
<script>
document.addEventListener("DOMContentLoaded", function () {
// Initialize map
const map = L.map('map').setView([54.5, -3], 6);
// Add OpenStreetMap tiles
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 19,
attribution:
'&copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors'
}).addTo(map);
let marker;
// When the user clicks the map
map.on('click', function (e) {
const lat = e.latlng.lat.toFixed(6);
const lng = e.latlng.lng.toFixed(6);
// Remove existing marker (if any)
if (marker) map.removeLayer(marker);
// Add marker at clicked location
marker = L.marker([lat, lng]).addTo(map);
// Show coordinates
document.getElementById('coords').textContent = `Coordinates: ${lat}, ${lng}`;
// Save coordinates in hidden input as JSON
const geoData = JSON.stringify({ lat: lat, lng: lng });
document.getElementById('mapData').value = geoData;
console.log("Saved to hidden input:", geoData);
});
});
</script>
<div class="btn-group">
<a href="{% url 'landing_page' %}">
<button>
←
</button>
</a>
<a href="{% url 'encode_result' %}">
<button onclick="saveAndGo()">
GREGG IT!
</button>
</a>
</div>
<style>
</style>
<!-- pass coordinates to django and directs to result page -->
{% endblock %} {% endblock %}

2
websiteapp/templates/websiteapp/encode_result.html
View file

@ -2,6 +2,6 @@
{% block content %} {% block content %}
<p> Landing Page </p> <p> encode result </p>
{% endblock %} {% endblock %}

32
websiteapp/templates/websiteapp/landing_page.html
View file

@ -1,7 +1,37 @@
{% extends 'websiteapp/base.html' %} {% extends 'websiteapp/base.html' %}
{% load static %}
{% block content %} {% block content %}
<p> Landing Page </p> <img src="{% static 'img/drawing.png' %}" alt="Cute map drawing">
<div class="btn-group">
<a href="{% url 'encode' %}">
<button>Encode</button>
</a>
<a href="{% url 'decode' %}">
<button>Decode</button>
</a>
</div>
<style>
.btn-group {
display: flex; /* places buttons side-by-side */
justify-content: center; /* centers them horizontally */
align-items: center; /* aligns vertically */
gap: 30px;
margin-top: 0px;
}
.btn-group {
padding: 120px 120px;
}
.btn-group button {
padding: 40px 40px;
font-size:25px;
margin-top: 0px;
}
</style>
{% endblock %} {% endblock %}

10
websiteapp/urls.py
View file

@ -2,9 +2,9 @@ from django.urls import path
from . import views from . import views
urlpatterns = [ urlpatterns = [
path('', views.landing_page), path('', views.landing_page, name='landing_page'),
path('encode', views.encode_view), path('encode', views.encode_view, name='encode'),
path('encode/result', views.encode_result_view), path('encode/result', views.encode_result_view, name='encode_result'),
path('decode', views.decode_view), path('decode', views.decode_view, name='decode'),
path('decode/result', views.decode_result_view), path('decode/result', views.decode_result_view, name='decode_result'),
] ]