From 55b081edf7ad82da05d1f20899f767afa075986c Mon Sep 17 00:00:00 2001 From: Dion Moult Date: Thu, 4 Feb 2021 11:54:34 +1100 Subject: [PATCH] Implement BIMTester web app mockup --- src/ifcbimtester/webapp/images/de.svg | 5 + src/ifcbimtester/webapp/images/fr.svg | 7 + src/ifcbimtester/webapp/images/gb.svg | 7 + src/ifcbimtester/webapp/images/it.svg | 7 + src/ifcbimtester/webapp/images/nl.svg | 5 + src/ifcbimtester/webapp/index.html | 212 +++++++++++++ src/ifcbimtester/webapp/info.svg | 68 +++++ src/ifcbimtester/webapp/main.css | 239 +++++++++++++++ src/ifcbimtester/webapp/main.js | 15 + src/ifcbimtester/webapp/normalize.css | 349 +++++++++++++++++++++ src/ifcbimtester/webapp/skeleton.css | 418 ++++++++++++++++++++++++++ 11 files changed, 1332 insertions(+) create mode 100644 src/ifcbimtester/webapp/images/de.svg create mode 100644 src/ifcbimtester/webapp/images/fr.svg create mode 100644 src/ifcbimtester/webapp/images/gb.svg create mode 100644 src/ifcbimtester/webapp/images/it.svg create mode 100644 src/ifcbimtester/webapp/images/nl.svg create mode 100644 src/ifcbimtester/webapp/index.html create mode 100644 src/ifcbimtester/webapp/info.svg create mode 100644 src/ifcbimtester/webapp/main.css create mode 100644 src/ifcbimtester/webapp/main.js create mode 100644 src/ifcbimtester/webapp/normalize.css create mode 100644 src/ifcbimtester/webapp/skeleton.css diff --git a/src/ifcbimtester/webapp/images/de.svg b/src/ifcbimtester/webapp/images/de.svg new file mode 100644 index 0000000000..366b95523a --- /dev/null +++ b/src/ifcbimtester/webapp/images/de.svg @@ -0,0 +1,5 @@ + + + + + \ No newline at end of file diff --git a/src/ifcbimtester/webapp/images/fr.svg b/src/ifcbimtester/webapp/images/fr.svg new file mode 100644 index 0000000000..cb474391bf --- /dev/null +++ b/src/ifcbimtester/webapp/images/fr.svg @@ -0,0 +1,7 @@ + + + + + + + \ No newline at end of file diff --git a/src/ifcbimtester/webapp/images/gb.svg b/src/ifcbimtester/webapp/images/gb.svg new file mode 100644 index 0000000000..6ef47d36ae --- /dev/null +++ b/src/ifcbimtester/webapp/images/gb.svg @@ -0,0 +1,7 @@ + + + + + + + \ No newline at end of file diff --git a/src/ifcbimtester/webapp/images/it.svg b/src/ifcbimtester/webapp/images/it.svg new file mode 100644 index 0000000000..b5cdf1e8cf --- /dev/null +++ b/src/ifcbimtester/webapp/images/it.svg @@ -0,0 +1,7 @@ + + + + + + + \ No newline at end of file diff --git a/src/ifcbimtester/webapp/images/nl.svg b/src/ifcbimtester/webapp/images/nl.svg new file mode 100644 index 0000000000..c06ea1a65a --- /dev/null +++ b/src/ifcbimtester/webapp/images/nl.svg @@ -0,0 +1,5 @@ + + + + + \ No newline at end of file diff --git a/src/ifcbimtester/webapp/index.html b/src/ifcbimtester/webapp/index.html new file mode 100644 index 0000000000..f18702b698 --- /dev/null +++ b/src/ifcbimtester/webapp/index.html @@ -0,0 +1,212 @@ + + + + + + BIMTester Requirements Generator + + + + + + + + + + + + + + + + + + +

+ BIMTester Requirements Generator + + Because your BIM actually sucks but you don't know it yet. + +

+ +
+
+
+ + + + + +
+ +

+ In order to ensure quality of the digital built environment
+ As a responsible digital citizen
+ We expect compliant OpenBIM deliverables
+

+

+ Scenario: Receiving a file +

+
    +
  1. +
    + The data must use the "{schema}" schema + + Example: The data must use the "IFC4" schema + +

    + BIM data may be structured using a particular version of IFC, known as the "schema" version. + Newer versions add lots of capabilities like extra parameters, new data relationships, and + improved data classification. The version you choose will affect what data can be stored, + and which programs have support for reading and writing that version. At the moment, you are + likely to specify either "IFC2X3" or "IFC4". +

    +
    +
    + + +
    +
    +
    +
    2. +
+

+ Scenario: Exempt files +

+
    +
  1. +
    + The IFC file "{file}" is exempt from being provided + + Example: The IFC file "PROJECT.ifc" is exempt from being provided + +

    + Sometimes, projects may create BIM data that is purely temporary, or as a workaround that is + needed as part of their workflow, but not required from a contractual perspective. In this + case, it is advisable for the requirements to explicitly exclude these BIM files so that the + client knows what is included in the scope of requirements. Simply specify the name of the + file that you know is not required as a deliverable. +

    +
    +
    + + +
    +
    +
    +
    2. +
  2. +
    + + No further requirements are specified because "{reason}" + + + Example: No further requirements are specified because "it will be superseded in a future project phase" + +

    + The recipient may not necessarily wish to specify more BIM requirements to audit. Scenarios + when this is the case may be when the recipient does not have processes in place to use the + BIM data or does not know how to use the BIM data, or when the BIM data is temporary or + irrelevant for any reason. In this scenario, it may be useful to specify the reason why no + further audits will take place. This is the contractual equivalent to "this page is + intentionally left blank". +

    +
    +
    + + +
    +
    +
    +
    3. +
+

+ Scenario: Project metadata is organised and correct +

+
    +
  1. The project must have an identifier of "{guid}"
    2. +
  2. The project name, code, or short identifier must be "{name}"
    3. +
  3. The project must have a longer form name of "{long_name}"
    4. +
  4. The project must be described as "{description}"
    5. +
  5. The project must be categorised under "{object_type}"
    6. +
  6. The project must contain information about the "{phase}" phase
    7. +
+

+ Scenario: Project geometry is stored +

+
    +
  1. The project must contain 3D geometry representing the shape of objects
    2. +
+
+ +
+ + + + + diff --git a/src/ifcbimtester/webapp/info.svg b/src/ifcbimtester/webapp/info.svg new file mode 100644 index 0000000000..0a74d6a55e --- /dev/null +++ b/src/ifcbimtester/webapp/info.svg @@ -0,0 +1,68 @@ + + + + + + + + image/svg+xml + + + + + + + + + + + + diff --git a/src/ifcbimtester/webapp/main.css b/src/ifcbimtester/webapp/main.css new file mode 100644 index 0000000000..ab3b20f56c --- /dev/null +++ b/src/ifcbimtester/webapp/main.css @@ -0,0 +1,239 @@ +@import url('https://fonts.googleapis.com/css2?family=Lato:wght@300;400&display=swap'); + +* { + scrollbar-width: thin; + scrollbar-color: rgba(.5,.5,.5,.5) rgba(0,0,0,0); +} + +/* Works on Chrome/Edge/Safari */ +*::-webkit-scrollbar { + width: 5px; +} +*::-webkit-scrollbar-track { + background: rgba(0,0,0,0); +} +*::-webkit-scrollbar-thumb { + background-color: rgba(.5,.5,.5,.5); + border-radius: 20px; +} + +.container { + max-width: 1200px; +} + +body { + background-color: #e1dcd8; + color: #3d3242; + font-family: 'Lato', sans-serif; +} + +header { + background-color: #8daad3; + background-repeat: no-repeat; + background-size: cover; + background-position: center center; + margin-bottom: 40px; +} + +footer { + background-color: #c0c0c0; + padding-left: 20px; + line-height: 60px; +} + +a { + color: #b85934; +} + +a:hover { + color: #e18a42; +} + +footer p { + margin: 0px; +} + +h1 { + font-size: 1.5em; + margin: 20px; +} + +h1, h2, h3, h4 { + letter-spacing: normal; +} + +section { + padding: 20px; + background-color: #3d3242; + color: #eee; +} + +section select { + width: 100%; + color: #ccc; +} + +section h2 { + font-size: 1.2em; + line-height: 50px; + margin: 0px; + font-weight: bold; + border-bottom: 1px solid #756180; +} + +section ol { + list-style-type: None; +} + +section ol li { + line-height: 40px; + margin: 0px; + background-position: center right; + background-repeat: no-repeat; + border-left: 5px solid #3e7c52; + padding-left: 20px; +} + +section ol li.excluded { + border-left: 5px solid #b15a69; + color: #999; +} + +section ol li p { + line-height: normal; +} + +section ol li:hover { + background-color: #756180; + cursor: pointer; + background-image: url('info.svg'); + background-size: 40px; + background-position: right center; +} + +section ol li:hover code { + background-color: #3d3242; +} + +section ol li code { + background-color: #756180; + border: 2px solid #999; + cursor: auto; +} + +section ol li code:focus { + background-color: #b85934; + border: 2px solid #e18a42; +} + +section ol li code:hover { + border: 2px solid #e18a42; +} + +section p { + background-color: #756180; + border-radius: 10px; + padding: 20px; +} + +aside { + margin-left: 0px !important; + padding: 20px; +} + +aside h4 { + font-size: 1.2em; + font-weight: bold; +} + +input[type="email"], input[type="number"], input[type="search"], input[type="text"], input[type="tel"], input[type="url"], input[type="password"], textarea, select { + border: 2px solid #756180; + border-radius: 10px; + background-color: transparent; +} + +input[type="email"]:focus, input[type="number"]:focus, input[type="search"]:focus, input[type="text"]:focus, input[type="tel"]:focus, input[type="url"]:focus, input[type="password"]:focus, textarea:focus, select:focus { + border: 2px solid #e18a42; +} + +.tcenter { + text-align: center; +} + +.tleft { + text-align: left; +} + +.tright { + text-align: right; +} + +.fleft { + float: left; +} + +.nomargin { + margin: 0px; +} + +img.flag { + width: 30px; + padding: 2px; + margin-right: 10px; + margin-bottom: 20px; + margin-top: 10px; +} + +img.active-flag { + border: 2px solid #756180; + padding: 0px; +} + + +.onoffswitch { + position: relative; width: 110px; + -webkit-user-select:none; -moz-user-select:none; -ms-user-select: none; +} +.onoffswitch-checkbox { + position: absolute; + opacity: 0; + pointer-events: none; +} +.onoffswitch-label { + display: block; overflow: hidden; cursor: pointer; + border: 0px solid #999999; border-radius: 17px; +} +.onoffswitch-inner { + display: block; width: 200%; margin-left: -100%; + transition: margin 0.3s ease-in 0s; +} +.onoffswitch-inner:before, .onoffswitch-inner:after { + display: block; float: left; width: 50%; height: 25px; padding: 0; line-height: 25px; + font-size: 11px; color: white; font-family: Trebuchet, Arial, sans-serif; font-weight: bold; + box-sizing: border-box; +} +.onoffswitch-inner:before { + content: "REQUIRED"; + padding-left: 10px; + background-color: #3E7C52; color: #FFFFFF; +} +.onoffswitch-inner:after { + content: "EXCLUDED"; + padding-right: 10px; + background-color: #B15A69; color: #EEEEEE; + text-align: right; +} +.onoffswitch-switch { + display: block; width: 24px; margin: 0.5px; + background: #FFFFFF; + position: absolute; top: 0; bottom: 0; + right: 86px; + border: 0px solid #999999; border-radius: 17px; + transition: all 0.3s ease-in 0s; +} +.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner { + margin-left: 0; +} +.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch { + right: 0px; +} diff --git a/src/ifcbimtester/webapp/main.js b/src/ifcbimtester/webapp/main.js new file mode 100644 index 0000000000..42770ba1bc --- /dev/null +++ b/src/ifcbimtester/webapp/main.js @@ -0,0 +1,15 @@ +/* Hacky mockup */ +let elements = document.getElementsByTagName('input'); +for (let i=0; i .label-body { + display: inline-block; + margin-left: .5rem; + font-weight: normal; } + + +/* Lists +–––––––––––––––––––––––––––––––––––––––––––––––––– */ +ul { + list-style: circle inside; } +ol { + list-style: decimal inside; } +ol, ul { + padding-left: 0; + margin-top: 0; } +ul ul, +ul ol, +ol ol, +ol ul { + margin: 1.5rem 0 1.5rem 3rem; + font-size: 90%; } +li { + margin-bottom: 1rem; } + + +/* Code +–––––––––––––––––––––––––––––––––––––––––––––––––– */ +code { + padding: .2rem .5rem; + margin: 0 .2rem; + font-size: 90%; + white-space: nowrap; + background: #F1F1F1; + border: 1px solid #E1E1E1; + border-radius: 4px; } +pre > code { + display: block; + padding: 1rem 1.5rem; + white-space: pre; } + + +/* Tables +–––––––––––––––––––––––––––––––––––––––––––––––––– */ +th, +td { + padding: 12px 15px; + text-align: left; + border-bottom: 1px solid #E1E1E1; } +th:first-child, +td:first-child { + padding-left: 0; } +th:last-child, +td:last-child { + padding-right: 0; } + + +/* Spacing +–––––––––––––––––––––––––––––––––––––––––––––––––– */ +button, +.button { + margin-bottom: 1rem; } +input, +textarea, +select, +fieldset { + margin-bottom: 1.5rem; } +pre, +blockquote, +dl, +figure, +table, +p, +ul, +ol, +form { + margin-bottom: 2.5rem; } + + +/* Utilities +–––––––––––––––––––––––––––––––––––––––––––––––––– */ +.u-full-width { + width: 100%; + box-sizing: border-box; } +.u-max-full-width { + max-width: 100%; + box-sizing: border-box; } +.u-pull-right { + float: right; } +.u-pull-left { + float: left; } + + +/* Misc +–––––––––––––––––––––––––––––––––––––––––––––––––– */ +hr { + margin-top: 3rem; + margin-bottom: 3.5rem; + border-width: 0; + border-top: 1px solid #E1E1E1; } + + +/* Clearing +–––––––––––––––––––––––––––––––––––––––––––––––––– */ + +/* Self Clearing Goodness */ +.container:after, +.row:after, +.u-cf { + content: ""; + display: table; + clear: both; } + + +/* Media Queries +–––––––––––––––––––––––––––––––––––––––––––––––––– */ +/* +Note: The best way to structure the use of media queries is to create the queries +near the relevant code. For example, if you wanted to change the styles for buttons +on small devices, paste the mobile query code up in the buttons section and style it +there. +*/ + + +/* Larger than mobile */ +@media (min-width: 400px) {} + +/* Larger than phablet (also point when grid becomes active) */ +@media (min-width: 550px) {} + +/* Larger than tablet */ +@media (min-width: 750px) {} + +/* Larger than desktop */ +@media (min-width: 1000px) {} + +/* Larger than Desktop HD */ +@media (min-width: 1200px) {}