commit 2fb49c0849af22e7491b6eb0f5c825e0d656795d
parent 57a7d4af0d88dff2f173fd109fe1be48700ae133
Author: AsherMorgan <59518073+AsherMorgan@users.noreply.github.com>
Date: Tue, 7 Jul 2020 08:48:48 -0700
Add layout.html.
Diffstat:
4 files changed, 184 insertions(+), 179 deletions(-)
diff --git a/Songs2Slides/routes.py b/Songs2Slides/routes.py
@@ -19,7 +19,7 @@ def home():
# Settings page
@app.route("/settings/", methods=["GET"])
def settings():
- return render_template("settings.html")
+ return render_template("settings.html", title = "Settings")
diff --git a/Songs2Slides/templates/home.html b/Songs2Slides/templates/home.html
@@ -1,68 +1,59 @@
-<!DOCTYPE html>
-<html>
- <head>
- <title>Songs2Slides</title>
- <meta name="description" content="Quickly and easily create lyric powerpoints from a list of songs.">
- <meta name="viewport" content="width=device-width, user-scalable=no"/>
- <link rel="icon" type="image/png" href="{{ url_for('static', filename='favicon-32.png') }}">
- <link rel="stylesheet" href="{{ url_for('static', filename='global.css') }}"></link>
- <link rel="stylesheet" href="{{ url_for('static', filename='home.css') }}"></link>
- <script src="{{ url_for('static', filename='home.js') }}"></script>
- </head>
- <body onload="onLoad();">
- <div id="header">
- <h1>Songs2Slides</h1>
- </div>
-
- <div id="songsContainer" class="container">
- <h3>Choose your songs</h3>
-
- <template id="songTemplate">
- <div class="song">
- <input type="text" class="title" placeholder="Song Title"/>
- <input type="text" class="artist" placeholder="Song Artist"/>
- <a id="remove" class="songRemove">╳</a>
- </div>
- </template>
- <div id="songs"></div>
-
- <div>
- <span id="addSong" onclick="AddSong();">+</span>
+{% extends "layout.html" %}
+
+{% block header %}
+ <link rel="stylesheet" href="{{ url_for('static', filename='home.css') }}"></link>
+ <script src="{{ url_for('static', filename='home.js') }}"></script>
+{% endblock header %}
+
+{% block content %}
+ <div id="songsContainer" class="container">
+ <h3>Choose your songs</h3>
+
+ <template id="songTemplate">
+ <div class="song">
+ <input type="text" class="title" placeholder="Song Title"/>
+ <input type="text" class="artist" placeholder="Song Artist"/>
+ <a id="remove" class="songRemove">╳</a>
</div>
+ </template>
+ <div id="songs"></div>
- <div id="songsButtons">
- <a href="/settings/">Settings</a>
- <button id="reviewButton" onclick="ReviewLyrics();">Next</button>
- </div>
+ <div>
+ <span id="addSong" onclick="AddSong();">+</span>
</div>
- <form id="lyricsContainer" class="container" hidden action="/pptx" method="POST" enctype="multipart/form-data">
- <h3>Review your PowerPoint</h3>
+ <div id="songsButtons">
+ <a href="/settings/">Settings</a>
+ <button id="reviewButton" onclick="ReviewLyrics();">Next</button>
+ </div>
+ </div>
- <p>Review and edit the parsed lyrics below and then click the create PowerPoint button.</p>
- <p>One blank line represents the start of a new slide and three blank lines represent a blank slide.</p>
-
- <input type="text" id="pptxSettingsField" name="settings" hidden>
- <input type="text" id="lyricsField" name="lyrics" hidden>
+ <form id="lyricsContainer" class="container" hidden action="/pptx" method="POST" enctype="multipart/form-data">
+ <h3>Review your PowerPoint</h3>
- <textarea rows="15" id="rawLyrics"></textarea>
+ <p>Review and edit the parsed lyrics below and then click the create PowerPoint button.</p>
+ <p>One blank line represents the start of a new slide and three blank lines represent a blank slide.</p>
+
+ <input type="text" id="pptxSettingsField" name="settings" hidden>
+ <input type="text" id="lyricsField" name="lyrics" hidden>
- <div id="fileUpload">
- <label>Starting PowerPoint (optional): </label>
- <input type="file" name="pptxFile" accept="application/vnd.openxmlformats-officedocument.presentationml.presentation, application/vnd.ms-powerpoint">
- </div>
+ <textarea rows="15" id="rawLyrics"></textarea>
- <p id="errors"></p>
+ <div id="fileUpload">
+ <label>Starting PowerPoint (optional): </label>
+ <input type="file" name="pptxFile" accept="application/vnd.openxmlformats-officedocument.presentationml.presentation, application/vnd.ms-powerpoint">
+ </div>
- <div id="lyricsButtons">
- <a id="lyricsBack" href="javascript:Back()">Back</a>
- <button id="submitLyricsButton" onclick="SubmitLyrics()">Create Powerpoint</button>
- </div>
- </form>
+ <p id="errors"></p>
- <div id="thankyou" hidden>
- <p>Thankyou for using Songs2Slides</p>
- <p>Click <a href="javascript:Reset()">here</a> to create another PowerPoint.</p>
+ <div id="lyricsButtons">
+ <a id="lyricsBack" href="javascript:Back()">Back</a>
+ <button id="submitLyricsButton" onclick="SubmitLyrics()">Create Powerpoint</button>
</div>
- </body>
-</html>
-\ No newline at end of file
+ </form>
+
+ <div id="thankyou" hidden>
+ <p>Thankyou for using Songs2Slides</p>
+ <p>Click <a href="javascript:Reset()">here</a> to create another PowerPoint.</p>
+ </div>
+{% endblock content %}
diff --git a/Songs2Slides/templates/layout.html b/Songs2Slides/templates/layout.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ {% if title %}
+ <title>{{ title }}</title>
+ {% else %}
+ <title>SongsSlides</title>
+ {% endif %}
+
+ <meta name="description" content="Quickly and easily create lyric powerpoints from a list of songs.">
+ <meta name="viewport" content="width=device-width, user-scalable=no"/>
+ <link rel="icon" type="image/png" href="{{ url_for('static', filename='favicon-32.png') }}">
+ <link rel="stylesheet" href="{{ url_for('static', filename='global.css') }}"></link>
+
+ {% block header %}{% endblock %}
+ </head>
+ <body onload="onLoad();">
+ <div id="header">
+ <h1>Songs2Slides</h1>
+ </div>
+
+ {% block content %}{% endblock %}
+ </body>
+</html>
diff --git a/Songs2Slides/templates/settings.html b/Songs2Slides/templates/settings.html
@@ -1,126 +1,118 @@
-<!DOCTYPE html>
-<html>
- <head>
- <title>Songs2Slides</title>
- <meta name="description" content="Quickly and easily create lyric powerpoints from a list of songs.">
- <meta name="viewport" content="width=device-width, user-scalable=no"/>
- <link rel="stylesheet" href="{{ url_for('static', filename='global.css') }}"></link>
- <link rel="stylesheet" href="{{ url_for('static', filename='settings.css') }}"></link>
- <script src="{{ url_for('static', filename='settings.js') }}"></script>
- </head>
- <body onload="onLoad();">
- <div id="header">
- <h1>Songs2Slides</h1>
- </div>
+{% extends "layout.html" %}
+
+{% block header %}
+ <link rel="stylesheet" href="{{ url_for('static', filename='settings.css') }}"></link>
+ <script src="{{ url_for('static', filename='settings.js') }}"></script>
+{% endblock header %}
- <div id="settings" class="container">
- <h2>Settings</h2>
- <h4>Parsing</h4>
- <div>
- Add title slides:
- <input type="checkbox" id="title-slides" onchange="saveSettings();"/>
- </div>
- <div>
- Default lines per slide:
- <input type="number" min="1" step="1" id="lines-per-slide" onchange="saveSettings();"/>
- </div>
- <div>
- Remove content in parentheses:
- <input type="checkbox" id="remove-parentheses" onchange="saveSettings();"/>
- </div>
+{% block content %}
+ <div id="settings" class="container">
+ <h2>Settings</h2>
+ <h4>Parsing</h4>
+ <div>
+ Add title slides:
+ <input type="checkbox" id="title-slides" onchange="saveSettings();"/>
+ </div>
+ <div>
+ Default lines per slide:
+ <input type="number" min="1" step="1" id="lines-per-slide" onchange="saveSettings();"/>
+ </div>
+ <div>
+ Remove content in parentheses:
+ <input type="checkbox" id="remove-parentheses" onchange="saveSettings();"/>
+ </div>
- <h4>Slide settings</h4>
- <div>
- Width (Inches):
- <input type="number" min="0" step="any" id="slide-width" onchange="saveSettings();"/>
- </div>
- <div>
- Height (Inches):
- <input type="number" min="0" step="any" id="slide-height" onchange="saveSettings();"/>
- </div>
- <div>
- Background color:
- <input type="color" id="slide-color" onchange="saveSettings();"/>
- </div>
+ <h4>Slide settings</h4>
+ <div>
+ Width (Inches):
+ <input type="number" min="0" step="any" id="slide-width" onchange="saveSettings();"/>
+ </div>
+ <div>
+ Height (Inches):
+ <input type="number" min="0" step="any" id="slide-height" onchange="saveSettings();"/>
+ </div>
+ <div>
+ Background color:
+ <input type="color" id="slide-color" onchange="saveSettings();"/>
+ </div>
- <h4>Margin settings</h4>
- <div>
- Left (Inches):
- <input type="number" min="0" step="any" id="margin-left" onchange="saveSettings();"/>
- </div>
- <div>
- Right (Inches):
- <input type="number" min="0" step="any" id="margin-right" onchange="saveSettings();"/>
- </div>
- <div>
- Top (Inches):
- <input type="number" min="0" step="any" id="margin-top" onchange="saveSettings();"/>
- </div>
- <div>
- Bottom (Inches):
- <input type="number" min="0" step="any" id="margin-bottom" onchange="saveSettings();"/>
- </div>
+ <h4>Margin settings</h4>
+ <div>
+ Left (Inches):
+ <input type="number" min="0" step="any" id="margin-left" onchange="saveSettings();"/>
+ </div>
+ <div>
+ Right (Inches):
+ <input type="number" min="0" step="any" id="margin-right" onchange="saveSettings();"/>
+ </div>
+ <div>
+ Top (Inches):
+ <input type="number" min="0" step="any" id="margin-top" onchange="saveSettings();"/>
+ </div>
+ <div>
+ Bottom (Inches):
+ <input type="number" min="0" step="any" id="margin-bottom" onchange="saveSettings();"/>
+ </div>
- <h4>Font settings</h4>
- <div>
- Family:
- <input id="font-family" list="fonts" onchange="saveSettings();">
- <datalist id="fonts">
- <option>Arial</option>
- <option>Century</option>
- <option>Century Gothic</option>
- <option>Calibri</option>
- <option>Comic Sans MS</option>
- <option>Courier New</option>
- <option>Georgia</option>
- <option>Impact</option>
- <option>Rockwell</option>
- <option>Segoe UI</option>
- <option>Tahoma</option>
- <option>Times New Roman</option>
- <option>Trebuchet MS</option>
- <option>Verdana</option>
- </datalist>
- </div>
- <div>
- Size:
- <input type="number" min="0" step="1" id="font-size" onchange="saveSettings();"/>
- </div>
- <div>
- Bold:
- <input type="checkbox" id = "font-bold" onchange="saveSettings();"/>
- </div>
- <div>
- Italic:
- <input type="checkbox" id="font-italic" onchange="saveSettings();"/>
- </div>
- <div>
- Color:
- <input type="color" id="font-color" onchange="saveSettings();"/>
- </div>
+ <h4>Font settings</h4>
+ <div>
+ Family:
+ <input id="font-family" list="fonts" onchange="saveSettings();">
+ <datalist id="fonts">
+ <option>Arial</option>
+ <option>Century</option>
+ <option>Century Gothic</option>
+ <option>Calibri</option>
+ <option>Comic Sans MS</option>
+ <option>Courier New</option>
+ <option>Georgia</option>
+ <option>Impact</option>
+ <option>Rockwell</option>
+ <option>Segoe UI</option>
+ <option>Tahoma</option>
+ <option>Times New Roman</option>
+ <option>Trebuchet MS</option>
+ <option>Verdana</option>
+ </datalist>
+ </div>
+ <div>
+ Size:
+ <input type="number" min="0" step="1" id="font-size" onchange="saveSettings();"/>
+ </div>
+ <div>
+ Bold:
+ <input type="checkbox" id = "font-bold" onchange="saveSettings();"/>
+ </div>
+ <div>
+ Italic:
+ <input type="checkbox" id="font-italic" onchange="saveSettings();"/>
+ </div>
+ <div>
+ Color:
+ <input type="color" id="font-color" onchange="saveSettings();"/>
+ </div>
- <h4>Pharagraph settings</h4>
- <div>
- Vertical Alignment:
- <select id="vertical-alignment" onchange="saveSettings();">
- <option>Top</option>
- <option>Middle</option>
- <option>Bottom</option>
- </select>
- </div>
- <div>
- Line spacing:
- <input type="number" min="0" step="any" id="line-spacing" onchange="saveSettings();"/>
- </div>
- <div>
- Word wrap:
- <input type="checkbox" id="word-wrap" onchange="saveSettings();"/>
- </div>
+ <h4>Pharagraph settings</h4>
+ <div>
+ Vertical Alignment:
+ <select id="vertical-alignment" onchange="saveSettings();">
+ <option>Top</option>
+ <option>Middle</option>
+ <option>Bottom</option>
+ </select>
+ </div>
+ <div>
+ Line spacing:
+ <input type="number" min="0" step="any" id="line-spacing" onchange="saveSettings();"/>
+ </div>
+ <div>
+ Word wrap:
+ <input type="checkbox" id="word-wrap" onchange="saveSettings();"/>
+ </div>
- <div id="settingsFooter">
- <a href="../">Back</a>
- <button id="resetButton" onclick="resetSettings();">Reset</button>
- </div>
+ <div id="settingsFooter">
+ <a href="../">Back</a>
+ <button id="resetButton" onclick="resetSettings();">Reset</button>
</div>
- </body>
-</html>
-\ No newline at end of file
+ </div>
+{% endblock content %}
