cailean
/
beta-2024
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

created templates

graphics
Cailean Finn 12 months ago
parent
e71073d709
commit
96d354190f
7 changed files with 92 additions and 43 deletions
Split View
  1. 14
      app.py
  2. 32
      public/css/styles.css
  3. 8
      public/js/skybox.js
  4. 5
      templates/_nav.html
  5. 23
      templates/base.html
  6. 39
      templates/index.html
  7. 14
      templates/list.html

14
app.py
View File

@ -16,7 +16,19 @@ client = contentful.Client(SPACE_ID, ACCESS_TOKEN)
@app.route('/')
def index():
return render_template('index.html')
return render_template('index.html', title='Homepage')
@app.route('/events')
def events():
return render_template('list.html', title='Events')
@app.route('/exhibitions')
def exhibitions():
return render_template('list.html', title='Exhibitions')
@app.route('/conferences')
def conference():
return render_template('list.html', title='Conferences')
def get_all_content(type):
content_list = []

32
public/css/styles.css
View File

@ -11,6 +11,7 @@ body {
margin: 0;
padding: 0;
overflow-x: hidden;
overflow-y: hidden;
}
#scroll {
@ -41,12 +42,14 @@ hr {
width: 100%;
height: 2px;
z-index: -1000;
margin: 0;
}
#main-wrapper {
display: flex;
flex-direction: column;
min-height: 100vh;
height: 100vh;
overflow-y: hidden;
}
#nav-bar {
@ -66,13 +69,15 @@ hr {
}
#main-container {
margin-top: 25px;
padding-top: 25px;
display: flex;
flex-direction: column;
gap: 50px;
margin-bottom: 50px;
margin-left: 50px;
margin-right: 50px;
padding-bottom: 50px;
padding-left: 50px;
padding-right: 50px;
overflow-y: scroll;
box-sizing: border-box; /* Include padding in the height calculation */
}
#main-text {
@ -96,11 +101,11 @@ hr {
flex-direction: row;
gap: 20px;
width: fit-content;
/* background-color: #0075FF; */
background-image: url('/public/images/dither-txt.png');
background-color: #0075FF;
/* background-image: url('/public/images/dither-txt.png'); */
background-size: cover; /* or contain, depending on your preference */
background-position: center;
background-repeat: no-repeat;
/* background-position: center; */
background-repeat:repeat;
border-radius: 30px;
padding: 10px;
padding-left: 25px;
@ -159,6 +164,7 @@ hr {
flex-direction: column;
text-align: center;
gap: 5px;
height: 75px;
}
.nav-element {
@ -166,9 +172,9 @@ hr {
}
#main-container {
flex-direction: column-reverse;
margin-left: 10px;
margin-right: 10px;
/* flex-direction: column-reverse; */
padding-left: 10px;
padding-right: 10px;
}
#main-text {
font-size: 18px;
@ -179,6 +185,7 @@ hr {
margin-left: auto;
margin-right: auto;
mix-blend-mode:multiply;
order: 2;
}
@ -188,6 +195,7 @@ hr {
width: 100%;
padding-left: 0px;
align-items: normal;
order: 1;
}
.hyperlink {

8
public/js/skybox.js
View File

@ -1,16 +1,22 @@
const box = document.getElementById('scroll')
let x, y
// const hyperlinks = document.getElementsByClassName('hyperlink')
let x, y, z
function init(){
x = 0
y = 0
z = 0
AnimateSkybox()
}
function AnimateSkybox(){
x += 0.2
y = window.innerHeight / 2.2
z += 0.2
box.style.backgroundPosition = x + "px " + y + "px"
// for (let i = 0; i < hyperlinks.length; i++) {
// hyperlinks[i].style.backgroundPosition = x / 4 + "px " + z + "px";
// }
requestAnimationFrame(AnimateSkybox)
}

5
templates/_nav.html
View File

@ -0,0 +1,5 @@
<div id="nav-bar">
<a href="/"><div class="nav-element">BETA FESTIVAL (2024)</div></a>
<div class="nav-element">NOV 1 - 2 | DUBLIN</div>
</div>
<hr>

23
templates/base.html
View File

@ -0,0 +1,23 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Beta Festival 2024 | {% block title %}{% endblock %}</title>
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/styles.css') }}">
<script type="importmap">
{
"imports": {
"three": "https://cdn.jsdelivr.net/npm/three@v0.164.0/build/three.module.js",
"three/addons/": "https://cdn.jsdelivr.net/npm/three@v0.164.0/examples/jsm/",
"three/src/": "https://cdn.jsdelivr.net/npm/three@v0.164.0/src/",
"three/examples/": "https://cdn.jsdelivr.net/npm/three@v0.164.0/examples/"
}
}
</script>
</head>
<body id="scroll">
{% block content %}
{% endblock %}
</body>
</html>

39
templates/index.html
View File

@ -1,28 +1,10 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Beta Festival 2024</title>
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/styles.css') }}">
<script type="importmap">
{
"imports": {
"three": "https://cdn.jsdelivr.net/npm/three@v0.164.0/build/three.module.js",
"three/addons/": "https://cdn.jsdelivr.net/npm/three@v0.164.0/examples/jsm/",
"three/src/": "https://cdn.jsdelivr.net/npm/three@v0.164.0/src/",
"three/examples/": "https://cdn.jsdelivr.net/npm/three@v0.164.0/examples/"
}
}
</script>
</head>
<body id="scroll">
{% extends "base.html" %}
{% block title %}{{ title }}{% endblock %}
{% block content %}
<div id="main-wrapper">
<div id="nav-bar">
<a href="/"><div class="nav-element">BETA FESTIVAL (2024)</div></a>
<div class="nav-element">NOV 1 - 2 | DUBLIN</div>
</div>
<hr>
{% include '_nav.html' %}
<div id="main-container">
<div id="main-text">
<p>
@ -30,15 +12,15 @@
</p>
</div>
<div id="hyperlink-container">
<a href="/"><div class="hyperlink">
<a href="/exhibitions"><div class="hyperlink">
<div>↗</div>
<div>Exhibitions</div>
</div></a>
<a href="/"><div class="hyperlink">
<a href="/events"><div class="hyperlink">
<div>↗</div>
<div>Events</div>
</div></a>
<a href="/"><div class="hyperlink">
<a href="/conferences"><div class="hyperlink">
<div>↗</div>
<div>Conferences</div>
</div></a>
@ -48,5 +30,4 @@
<div id="container"></div>
<script type="module" src="{{ url_for('static', filename='js/main.js') }}"></script>
<script type="module" src="{{ url_for('static', filename='js/skybox.js') }}"></script>
</body>
</html>
{% endblock content %}

14
templates/list.html
View File

@ -0,0 +1,14 @@
{% extends "base.html" %}
{% block title %}{{ title }}{% endblock %}
{% block content %}
<div id="main-wrapper">
{% include '_nav.html' %}
<div id="main-container">
</div>
</div>
<div id="container"></div>
<script type="module" src="{{ url_for('static', filename='js/skybox.js') }}"></script>
{% endblock content %}
Write Preview
Loading…
Cancel
Save