Transform to a Sinatra app

2 files changed, 98 insertions, 0 deletions

diff --git a/public/regform.js b/public/regform.js
new file mode 100644
index 0000000..00e5486
--- /dev/null
+++ b/public/regform.js
@@ -0,0 +1,59 @@
+$(function() {
+  var num_members = 0;
+  var num_songs = 0;
+
+  $('#add-member-button').click(function() {
+    num_members += 1;
+    $('#form-members').append(
+        '<div class="member-info">' +
+        '    <h4>Medlem nr. '+num_members+'<input type="button" name="delete" data-member="'+num_members+'" class="delete-member-button" value="X"></h4>' +
+        '    <div class="field text required">' +
+        '        <label>Navn:</label>' +
+        '        <input type="text" name="band[members]['+num_members+'][name]">' +
+        '    </div>' +
+        '    <div class="field text optional">' +
+        '        <label>Instrument:</label>' +
+        '        <input type="text" name="band[members]['+num_members+'][instrument]">' +
+        '    </div>' +
+        '    <div class="field class optional">' +
+        '        <label>Alder:</label>' +
+        '        <input type="text" name="band[members]['+num_members+'][age]" size="3" pattern="[0-9]{1,2}">' +
+        '    </div>' +
+        '</div>'
+    )
+  });
+
+  $('#add-song-button').click(function() {
+    num_songs += 1;
+    $('#form-songs').append(
+       '<div class="song-info" id="song-'+num_songs+'-info">' +
+       '    <h4>Låt nr '+num_songs+'<input type="button" id="delete-song-'+num_songs+'" class="delete-song" value="X"></h4>' +
+       '    <div class="field text required">' +
+       '        <label>Tittel:</label>' +
+       '        <input type="text" name="song['+num_songs+'][title]">' +
+       '    </div>' +
+       '    <div class="field text optional">' +
+       '        <label>Lengde:</label>' +
+       '        <input type="text" pattern="[0-9]{2}:[0-9]{2}" title="Spilletid i min:sek (mm:ss)" name="song['+num_songs+'][time]" size="6">'+
+       '    </div>' +
+       '    <div class="field text optional">' +
+       '        <label>ISRC-kode:</label>' +
+       '        <input type="text" title="Dersom låten har vært utgitt før har den en ISRC-kode. Om du vet den så oppgi den her." name="song['+num_songs+'][isrc]" size="11">'+
+       '    </div>' +
+       '    <div class="field textarea required">' +
+       '        <label>Utøvere:</label>'+
+       '        <textarea cols="40" rows="5" name="song['+num_songs+'][performers]" title="Fullt navn (ingen pseudonymer) på alle som er med på denne innspillingen."></textarea>' +
+       '    </div>' +
+       '    <div class="field textarea required">' +
+       '        <label>Opphavsmenn:</label>'+
+       '        <textarea cols="40" rows="5" name="song['+num_songs+'][composers]" title="Fullt navn (ingen pseudonymer) på alle som har vært med på å skrive denne låten."></textarea>' +
+       '    </div>' +
+       '    <div class="field textarea optional">' +
+       '        <label>Andre merknader:</label>'+
+       '        <textarea cols="40" rows="5" name="song['+num_songs+'][notes]" title="Evt andre ting vi burde vite."></textarea>' +
+       '    </div>' +
+       '</div>'
+    )
+  });
+
+});
\ No newline at end of file
diff --git a/public/styles.css b/public/styles.css
new file mode 100644
index 0000000..d0b13fc
--- /dev/null
+++ b/public/styles.css
@@ -0,0 +1,39 @@
+body {
+    background-color: whitesmoke;
+    color: darkslategray;
+}
+
+label {
+    width: 8em;
+    display: inline-block;
+    text-align: right;
+    vertical-align: top;
+}
+
+.required:after {
+    content: " *";
+    color: darkred;
+    vertical-align: top;
+}
+
+input[type=text] {
+    border: 0;
+}
+
+textarea {
+    border: 1px dashed slategray;
+    margin-top: 5px;
+    margin-bottom: 5px;
+}
+
+input[type=text], textarea {
+    border-bottom: 1px solid darkslateblue;
+    background-color: whitesmoke;
+    color: darkslateblue;
+
+    font-size: large;
+}
+
+.song-info, .member-info {
+    padding-left: 1em;
+}
\ No newline at end of file