diff --git a/static/saddle.css b/static/saddle.css index e6939e0..fef5cb9 100644 --- a/static/saddle.css +++ b/static/saddle.css @@ -58,3 +58,39 @@ section { 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12); } + +#fileSelection { + padding: 0.25em; +} + +#fileTabs { + display: flex; +} + +.tab { + cursor: pointer; + padding: 1em; + color: dimgray; +} + +.tab:hover { + color: black; +} + +.tabSelected { + background-color: gainsboro; + color: black; + border: 1px solid darkgray; + border-bottom: none; +} + +.tabWindow { + display: none; + padding: 1em; + background-color: gainsboro; + border: 1px solid darkgray; +} + +.tabWindowSelected { + display: block; +} diff --git a/static/saddle.js b/static/saddle.js new file mode 100644 index 0000000..62cdc4c --- /dev/null +++ b/static/saddle.js @@ -0,0 +1,10 @@ +function switchFileTab(span, window_id) { + let old_span = document.querySelector('.tabSelected'); + old_span.classList.remove('tabSelected'); + span.classList.add('tabSelected'); + + let old_window = document.querySelector('.tabWindowSelected'); + old_window.classList.remove('tabWindowSelected'); + let tab_window = document.querySelector('#' + window_id); + tab_window.classList.add('tabWindowSelected'); +} diff --git a/templates/index.html b/templates/index.html index e5578e4..d5e025f 100644 --- a/templates/index.html +++ b/templates/index.html @@ -3,6 +3,7 @@ Saddle + @@ -13,8 +14,22 @@
-
-
+
+
+ File + URL + Text +
+
+
+
+
+
+
+
+ Imagine actually using this feature. +
+