diff --git a/poc/components/faq.html b/poc/components/faq.html new file mode 100644 index 0000000..520e392 --- /dev/null +++ b/poc/components/faq.html @@ -0,0 +1,11 @@ +
+
+ + [[{{ config["name"] }}]] +
+ +
+

Frequently Asked Questions

+ [[{{ config["section_name"] }}]] +
+
diff --git a/poc/components/footer.html b/poc/components/footer.html new file mode 100644 index 0000000..707e211 --- /dev/null +++ b/poc/components/footer.html @@ -0,0 +1,203 @@ +{% include 'components/login.html' %} + + + + + + diff --git a/poc/components/globe.html b/poc/components/globe.html new file mode 100644 index 0000000..f0381a3 --- /dev/null +++ b/poc/components/globe.html @@ -0,0 +1,62 @@ +
+ +
+ + + + diff --git a/poc/components/header.html b/poc/components/header.html new file mode 100644 index 0000000..dbd4a31 --- /dev/null +++ b/poc/components/header.html @@ -0,0 +1,18 @@ + + + + + + Decentralized Internet + + + + + + + + + + + + diff --git a/poc/components/hero_image.html b/poc/components/hero_image.html new file mode 100644 index 0000000..8c0d78c --- /dev/null +++ b/poc/components/hero_image.html @@ -0,0 +1,133 @@ +
+ +
+

{{config["title"]}}

+

{{config["subtitle"]}}

+
+ + +
+ +
+
+ + + diff --git a/poc/components/hero_text.html b/poc/components/hero_text.html new file mode 100644 index 0000000..49e313f --- /dev/null +++ b/poc/components/hero_text.html @@ -0,0 +1,98 @@ +
+
+

+

[[{{ config["subtitle"] }}]]

+
+
+
+ + diff --git a/poc/components/identify_modal.html b/poc/components/identify_modal.html new file mode 100644 index 0000000..733f33b --- /dev/null +++ b/poc/components/identify_modal.html @@ -0,0 +1,217 @@ + + + + + diff --git a/poc/components/login.html b/poc/components/login.html new file mode 100644 index 0000000..7576385 --- /dev/null +++ b/poc/components/login.html @@ -0,0 +1,123 @@ + + + + diff --git a/poc/components/login_lightswitch.html b/poc/components/login_lightswitch.html new file mode 100644 index 0000000..d56daff --- /dev/null +++ b/poc/components/login_lightswitch.html @@ -0,0 +1,60 @@ +
+ + + +
+ + diff --git a/poc/components/nav.html b/poc/components/nav.html new file mode 100644 index 0000000..bc212dc --- /dev/null +++ b/poc/components/nav.html @@ -0,0 +1,25 @@ +
+ + +
+
diff --git a/poc/components/roadmap.html b/poc/components/roadmap.html new file mode 100644 index 0000000..c0821b1 --- /dev/null +++ b/poc/components/roadmap.html @@ -0,0 +1,149 @@ +
+

Our Journey

+
+
+
2023 Q4
+
+

Platform Launch

+

Initial release of our decentralized infrastructure and core services.

+
+
+
+
2024 Q1
+
+

Network Expansion

+

Global node deployment and enhanced network capabilities.

+
+
+
+
2024 Q2
+
+

Developer Tools

+

Release of comprehensive SDK and developer documentation.

+
+
+
+
2024 Q3
+
+

Enterprise Solutions

+

Launch of enterprise-grade features and support services.

+
+
+
+
+ + diff --git a/poc/components/signup.html b/poc/components/signup.html new file mode 100644 index 0000000..ad8145c --- /dev/null +++ b/poc/components/signup.html @@ -0,0 +1,313 @@ + + + + + + diff --git a/poc/content/navcontent.html b/poc/content/navcontent.html new file mode 100644 index 0000000..72923e7 --- /dev/null +++ b/poc/content/navcontent.html @@ -0,0 +1,26 @@ + +
  • + Home +
  • +
  • + Why +
    + Sustainable + Secure + Scalable +
    +
  • +
  • + Products +
    + Fungistor + Mycelium + Magic Cloud +
    +
  • +
  • + Info +
    + Roadmap +
    +
  • \ No newline at end of file diff --git a/poc/content/signup_interests.html b/poc/content/signup_interests.html new file mode 100644 index 0000000..c6812e4 --- /dev/null +++ b/poc/content/signup_interests.html @@ -0,0 +1,35 @@ + +
    + + + + + + + + +
    \ No newline at end of file diff --git a/poc/content/system/countries.html b/poc/content/system/countries.html new file mode 100644 index 0000000..b4be0d4 --- /dev/null +++ b/poc/content/system/countries.html @@ -0,0 +1,24 @@ + const countries = [ + "Afghanistan", "Albania", "Algeria", "Andorra", "Angola", "Antigua and Barbuda", "Argentina", "Armenia", "Australia", + "Austria", "Azerbaijan", "Bahamas", "Bahrain", "Bangladesh", "Barbados", "Belarus", "Belgium", "Belize", "Benin", + "Bhutan", "Bolivia", "Bosnia and Herzegovina", "Botswana", "Brazil", "Brunei", "Bulgaria", "Burkina Faso", "Burundi", + "Cambodia", "Cameroon", "Canada", "Cape Verde", "Central African Republic", "Chad", "Chile", "China", "Colombia", + "Comoros", "Congo", "Costa Rica", "Croatia", "Cuba", "Cyprus", "Czech Republic", "Denmark", "Djibouti", "Dominica", + "Dominican Republic", "East Timor", "Ecuador", "Egypt", "El Salvador", "Equatorial Guinea", "Eritrea", "Estonia", + "Ethiopia", "Fiji", "Finland", "France", "Gabon", "Gambia", "Georgia", "Germany", "Ghana", "Greece", "Grenada", + "Guatemala", "Guinea", "Guinea-Bissau", "Guyana", "Haiti", "Honduras", "Hungary", "Iceland", "India", "Indonesia", + "Iran", "Iraq", "Ireland", "Israel", "Italy", "Ivory Coast", "Jamaica", "Japan", "Jordan", "Kazakhstan", "Kenya", + "Kiribati", "North Korea", "South Korea", "Kuwait", "Kyrgyzstan", "Laos", "Latvia", "Lebanon", "Lesotho", "Liberia", + "Libya", "Liechtenstein", "Lithuania", "Luxembourg", "Macedonia", "Madagascar", "Malawi", "Malaysia", "Maldives", + "Mali", "Malta", "Marshall Islands", "Mauritania", "Mauritius", "Mexico", "Micronesia", "Moldova", "Monaco", + "Mongolia", "Montenegro", "Morocco", "Mozambique", "Myanmar", "Namibia", "Nauru", "Nepal", "Netherlands", + "New Zealand", "Nicaragua", "Niger", "Nigeria", "Norway", "Oman", "Pakistan", "Palau", "Panama", "Papua New Guinea", + "Paraguay", "Peru", "Philippines", "Poland", "Portugal", "Qatar", "Romania", "Russia", "Rwanda", "Saint Kitts and Nevis", + "Saint Lucia", "Saint Vincent and the Grenadines", "Samoa", "San Marino", "Sao Tome and Principe", "Saudi Arabia", + "Senegal", "Serbia", "Seychelles", "Sierra Leone", "Singapore", "Slovakia", "Slovenia", "Solomon Islands", "Somalia", + "South Africa", "South Sudan", "Spain", "Sri Lanka", "Sudan", "Suriname", "Swaziland", "Sweden", "Switzerland", + "Syria", "Taiwan", "Tajikistan", "Tanzania", "Thailand", "Togo", "Tonga", "Trinidad and Tobago", "Tunisia", "Turkey", + "Turkmenistan", "Tuvalu", "Uganda", "Ukraine", "United Arab Emirates", "United Kingdom", "United States", "Uruguay", + "Uzbekistan", "Vanuatu", "Vatican City", "Venezuela", "Vietnam", "Yemen", "Zambia", "Zimbabwe" + ]; + \ No newline at end of file diff --git a/poc/content/threefold/faq_tf.md b/poc/content/threefold/faq_tf.md new file mode 100644 index 0000000..8289fca --- /dev/null +++ b/poc/content/threefold/faq_tf.md @@ -0,0 +1,23 @@ +## About Our Platform + +### What We Offer + +ThreeFold provides a revolutionary Internet Infrastructure that enables: + +- Decentralized cloud, data & network capacity with reward opportunities for contributors +- Global deployment of web2, web3, AI, edge, and blockchain applications +- Enhanced application access through distributed infrastructure +- Creation of resilient, uncensorable peer-to-peer networks + +### Why ThreeFold? + +- **First platform in the world to seamlessly combine cloud, data & network capabilities** +- Global Access: Bridging the digital divide for 50% of the world lacking quality Internet infrastructure +- Economic Sovereignty: Enabling countries to build and control their own Internet infrastructure +- Sustainable Growth: Reducing environmental impact through efficient edge computing + +### Our Mission & Values + +- Planet First: Committed to sustainable and eco-friendly technology solutions +- People Empowerment: Democratizing Internet infrastructure access and ownership +- Digital Sovereignty: Ensuring data privacy and infrastructure independence diff --git a/poc/content/threefold/faq_tf_intro.html b/poc/content/threefold/faq_tf_intro.html new file mode 100644 index 0000000..e32490b --- /dev/null +++ b/poc/content/threefold/faq_tf_intro.html @@ -0,0 +1,92 @@ +
    + What is web4? +

    + No, ThreeFold is a complementary Internet and lives with and on top of + the current Internet. From out of ThreeFold you can still use the + current Internet and interact with it. +

    +
    + +
    + Why do we need a new Internet? +

    + The Internet used to be a peer to peer network, but has become fragile + and too centralized. There are so many problems with the current + Internet, such as authenticity, privacy, security, and sustainability + that we believe a fundamental new approach is needed. +

    +
    + +
    + This sounds too big, are you guys are faking it? +

    + We have been working on this for over 30 years and ThreeFold is the + result of that work. We have a working product and a growing community + of farmers, users, and partners. We are real and we are here to stay. +

    +
    + +
    + You have 2 tokens, TFT and INCA, why? +

    + Thanks to our community there are +60,000 virtual cpu's and +17,000 GB + of storage available on the network. + Checkout our stats on our dashboard. + TFT is our token which was used to build generation 1,2 and 3 of the + ThreeFold Grid of capacity. TFT is the reward for our loyal community. + There can never be more than 1 billion TFT. We are now building + generation 4 of the ThreeFold Grid of capacity and we need a new token + to build this new generation. There will never be more than 3 billion + INCA. Our partners will start selling new ThreeFold Nodes end Nov 2024 + with a new reward scheme and ready to grow to millions of nodes. +

    +
    + +
    + How can I participate? +

    + You can participate by becoming a farmer, a user, a partner or by developing a web4 app. +

    +

    +
    + +
    + What is Web4? +

    + Web4 is the next generation of the Internet, where users are in 100% in + control of their data. No centralized services are needed. Blockchain + was the first step to Web3, ThreeFold is the next step to Web4. + ThreeFold is ofcourse fully compatible with Web2 and Web3. In Web4 each + user has a personal Virtual Digital Assistent which is called a Hero. + This hero manages your digital life and on your behalf can interact with + all versions of the Web. + Checkout more info about our Hero. +

    +
    + +
    + How secure and private is my data? +

    + ThreeFold is designed to be secure and private by default. We use + end-to-end encryption to protect your data and ensure that only you have + access to your data. +

    +
    + +
    + Who should use the ThreeFold Grid. ? +

    + Individuals, businesses, and organizations who want to be sovereign and have full control over their data and applications. + Security is a very big problem today, Technology as used by ThreeFold has the potential to resolve this if used properly. + We already work with Governements, NGO's, and Individuals. We are building a channel of solution providers and integrators who want to build on top of ThreeFold. +

    +
    diff --git a/poc/content/threefold/faq_tf_section.html b/poc/content/threefold/faq_tf_section.html new file mode 100644 index 0000000..f124adf --- /dev/null +++ b/poc/content/threefold/faq_tf_section.html @@ -0,0 +1,94 @@ +
    + Is this a separate new Internet? +

    + No, ThreeFold is a complementary Internet and lives with and on top of + the current Internet. From out of ThreeFold you can still use the + current Internet and interact with it. +

    +
    + +
    + Why do we need a new Internet? +

    + The Internet used to be a peer to peer network, but has become fragile + and too centralized. There are so many problems with the current + Internet, such as authenticity, privacy, security, and sustainability + that we believe a fundamental new approach is needed. +

    +
    + +
    + This sounds too big, are you guys are faking it? +

    + We have been working on this for over 30 years and ThreeFold is the + result of that work. We have a working product and a growing community + of farmers, users, and partners. We are real and we are here to stay. +

    +
    + +
    + You have 2 tokens, TFT and INCA, why? +

    + Thanks to our community there are +60,000 virtual cpu's and +17,000 GB + of storage available on the network. + Checkout our stats on our dashboard. + TFT is our token which was used to build generation 1,2 and 3 of the + ThreeFold Grid of capacity. TFT is the reward for our loyal community. + There can never be more than 1 billion TFT. We are now building + generation 4 of the ThreeFold Grid of capacity and we need a new token + to build this new generation. There will never be more than 3 billion + INCA. Our partners will start selling new ThreeFold Nodes end Nov 2024 + with a new reward scheme and ready to grow to millions of nodes. +

    +
    + +
    + How can I participate? +

    + You can participate by becoming a farmer, a user, a partner or by developing a web4 app. +

    +

    +
    + +
    + What is Web4? +

    + Web4 is the next generation of the Internet, where users are in control of our data 100% and there is 0 centralization. + Blockchain was the first step to Web3, ThreeFold is the next step to Web4. + ThreeFold is ofcourse fully compatible with Web2 and Web3. + In Web4 each user has a personal Virtual Digital Assistent which is called a Hero. + This hero manages your digital life and on your behalf can interact with all versions of the Web. + Checkout more info about our Hero. +

    +
    + +
    + How secure and private is my data? +

    + ThreeFold is designed to be secure and private by default. We use + end-to-end encryption to protect your data and ensure that only you have + access to your data. +

    +
    + +
    + Do you offer custom plans for businesses? +

    + Yes, we have a network of Integrators who can help you design a custom + plan. +

    +
    + +
    + What payment methods do you accept? +

    We accept credit cards (v4) and our own tokens TFT and INCA.

    +
    diff --git a/poc/content/threefold/faq_tf_web4.html b/poc/content/threefold/faq_tf_web4.html new file mode 100644 index 0000000..32df542 --- /dev/null +++ b/poc/content/threefold/faq_tf_web4.html @@ -0,0 +1,43 @@ +
    + What is Web4? +

    + Web4 is the next generation of the Internet, where users are in 100% in + control of their data. No centralized services are needed. Blockchain + was the first step to Web3, ThreeFold is the next step to Web4. + ThreeFold is ofcourse fully compatible with Web2 and Web3. In Web4 each + user has a personal Virtual Digital Assistent which is called a Hero. + This hero manages your digital life and on your behalf can interact with + all versions of the Web. + Checkout more info about our Hero. +

    +
    + +
    + How secure and private is my data? +

    + ThreeFold is designed to be secure and private by default. We use + end-to-end encryption to protect your data and ensure that only you have + access to your data. +

    +
    + +
    + How secure and private is my data? +

    + ThreeFold is designed to be secure and private by default. We use + end-to-end encryption to protect your data and ensure that only you have + access to your data. +

    +
    + +
    + Who should care bout Web4. ? +

    + While blockchain is a very good first step, we believe its time to move + to the next level. Web4 is the next generation of the Internet, where + users are in 100% in control of their data. This hero manages your + digital life and on your behalf can interact with all versions of the + Web. Enterprises, Governments, Software Developers and Individuals + should care about Web4. +

    +
    diff --git a/poc/content/threefold/hero_test.md b/poc/content/threefold/hero_test.md new file mode 100644 index 0000000..6189dd2 --- /dev/null +++ b/poc/content/threefold/hero_test.md @@ -0,0 +1,4 @@ +**The need for a decentralized internet has never been more crucial in our increasingly connected world.** + + +Our current internet infrastructure is dominated by a handful of tech giants who control vast amounts of our personal data, creating significant privacy concerns and single points of failure. This centralization not only compromises our digital sovereignty but also makes the entire system vulnerable to censorship, surveillance, and cyber attacks. diff --git a/poc/index.html b/poc/index.html new file mode 100644 index 0000000..9d76aca --- /dev/null +++ b/poc/index.html @@ -0,0 +1,23 @@ +{% include 'components/header.html' %} + + + {% include 'components/nav.html' %} +
    + {% include 'components/globe.html' %} + + {% set config = { + "title": "THREEFOLD AUTONOMOUS INTERNET.", + "subtitle": "Building a decentralized internet, for a better world..", + "image": "static/cloud_dancing.png" } + %} + {% include 'components/hero_image.html' %} + + {% set config = { "name": "threefold/faq_tf", "section_name": "threefold/faq_tf_section" } %} + {% include 'components/faq.html' %} + +
    + {% include 'components/footer.html' %} + {% include 'components/login.html' %} + {% include 'components/signup.html' %} + + diff --git a/poc/login2222.html b/poc/login2222.html new file mode 100644 index 0000000..ab317d2 --- /dev/null +++ b/poc/login2222.html @@ -0,0 +1,283 @@ + + + + + + Login - ThreeFold + + + +
    +
    + +
    +
    + + + +
    +
    + + + +
    + + +
    + +
    +
    + + + + + + diff --git a/poc/logintest.html b/poc/logintest.html new file mode 100644 index 0000000..7156fc7 --- /dev/null +++ b/poc/logintest.html @@ -0,0 +1,299 @@ +{% include 'components/header.html' %} + + + {% include 'components/nav.html' %} +
    +
    +

    Identity Test Page

    + +
    +
    + Not identified +
    + +
    + + +
    + + + + +
    +
    +
    + + + + + + + diff --git a/poc/page1.html b/poc/page1.html new file mode 100644 index 0000000..33f6444 --- /dev/null +++ b/poc/page1.html @@ -0,0 +1,9 @@ +{% include 'components/header.html' %} + + {% include 'components/nav.html' %} +
    + {% include 'components/hero1.html' %} +
    + {% include 'components/footer.html' %} + + diff --git a/poc/page2.html b/poc/page2.html new file mode 100644 index 0000000..3978ceb --- /dev/null +++ b/poc/page2.html @@ -0,0 +1,10 @@ + +{% include 'components/header.html' %} + + {% include 'components/nav.html' %} +
    + {% include 'components/faq.html' %} +
    + {% include 'components/footer.html' %} + + diff --git a/poc/remember.txt b/poc/remember.txt new file mode 100644 index 0000000..f53f358 --- /dev/null +++ b/poc/remember.txt @@ -0,0 +1 @@ +{{/* */}} \ No newline at end of file diff --git a/poc/roadmap.html b/poc/roadmap.html new file mode 100644 index 0000000..f121f21 --- /dev/null +++ b/poc/roadmap.html @@ -0,0 +1,21 @@ +{% include 'components/header.html' %} + + + {% include 'components/nav.html' %} +
    + + {% set config = { + "title": "THREEFOLD INTERNET ROADMAP", + "subtitle": "Building a decentralized internet, for a better world", + "image": "static/questions.png" } + %} + {% include 'components/hero_image.html' %} + + {% set config_roadmap = { "name": "threefold/faq_tf", "section_name": "threefold/faq_tf_section" } %} + {% include 'components/roadmap.html' %} + +
    + {% include 'components/footer.html' %} + + + diff --git a/poc/server.py b/poc/server.py new file mode 100644 index 0000000..90ff5e2 --- /dev/null +++ b/poc/server.py @@ -0,0 +1,93 @@ +from fastapi import FastAPI, Request, HTTPException +from fastapi.responses import HTMLResponse, FileResponse +from fastapi.templating import Jinja2Templates +from fastapi.staticfiles import StaticFiles +from jinja2 import Environment, FileSystemLoader, select_autoescape, TemplateNotFound +import os +import markdown +import re + +sources_dir = "/Users/despiegk1/code/git.ourworld.tf/freeflowuniverse/heroweb/research/dancing_banner/" +static_dir = f"{sources_dir}/static" +content_dir = f"{sources_dir}/content" + +def get_content(name: str) -> str: + """Get content by name from either HTML or markdown files in content directory""" + # Remove any leading/trailing slashes + name = name.strip('/') + + # Check for file with .html extension + html_path = os.path.join(content_dir, f"{name}.html") + if os.path.exists(html_path): + with open(html_path, 'r') as f: + return f.read() + + # Check for file with .md extension + md_path = os.path.join(content_dir, f"{name}.md") + if os.path.exists(md_path): + with open(md_path, 'r') as f: + content = f.read() + return markdown.markdown(content) + + return f"[[{name} not found]]" + +def process_content(content: str) -> str: + """Process content and replace [[name]] with corresponding HTML content""" + def replace_content(match): + name = match.group(1) + return get_content(name) + + # Replace all [[name]] patterns + return re.sub(r'\[\[(.*?)\]\]', replace_content, content) + +app = FastAPI() + +if not os.path.exists(static_dir): + raise RuntimeError(f"The directory '{static_dir}' does not exist.") + +if not os.path.exists(sources_dir): + raise RuntimeError(f"The templates dir '{sources_dir}' does not exist.") + +# Mount the static files directory +app.mount("/static", StaticFiles(directory=static_dir), name="static") + +env = Environment( + loader=FileSystemLoader(sources_dir), + autoescape=select_autoescape(['html', 'xml']) +) + +# Initialize Jinja2 templates +templates = Jinja2Templates(directory=sources_dir) + +@app.get("/favicon.ico") +async def favicon(): + # First try to serve from static directory + favicon_path = os.path.join(static_dir, "favicon.ico") + if os.path.exists(favicon_path): + return FileResponse(favicon_path) + # If not found, return 404 + raise HTTPException(status_code=404, detail="Favicon not found") + +@app.get("/", response_class=HTMLResponse) +async def read_index(request: Request): + template = env.get_template("index.html") + content = template.render(request=request) + return process_content(content) + +@app.get("/{path:path}", response_class=HTMLResponse) +async def read_template(request: Request, path: str): + # Add .html extension if not present + if not path.endswith('.html'): + path = f"{path}.html" + + try: + # Try to load and render the template (this will work for both direct files and templates) + template = env.get_template(path) + content = template.render(request=request) + return process_content(content) + except TemplateNotFound: + raise HTTPException(status_code=404, detail=f"Template {path} not found") + +if __name__ == "__main__": + import uvicorn + uvicorn.run("server:app", host="127.0.0.1", port=8001, reload=True) diff --git a/poc/static/cloud_dancing.png b/poc/static/cloud_dancing.png new file mode 100644 index 0000000..54b0adb Binary files /dev/null and b/poc/static/cloud_dancing.png differ diff --git a/poc/static/cloud_dancing2.png b/poc/static/cloud_dancing2.png new file mode 100644 index 0000000..9cfb2da Binary files /dev/null and b/poc/static/cloud_dancing2.png differ diff --git a/poc/static/faq.css b/poc/static/faq.css new file mode 100644 index 0000000..91ce19a --- /dev/null +++ b/poc/static/faq.css @@ -0,0 +1,154 @@ +/* Import Google Fonts - if not already imported in ourworld.css */ +@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&family=Roboto:wght@300;400;500;700&display=swap'); + +/* Container styling */ +.faq-container { + display: flex; + gap: 2rem; + max-width: 1200px; + margin: 0 auto; + padding: 2rem; +} + +/* Markdown content styling */ +.markdown-content { + flex: 1; + padding-right: 2rem; + border-right: 1px solid #a4b6ba; +} + +/* Base styles for markdown content */ +.markdown-content { + font-family: 'Poppins', sans-serif; + font-weight: 200; +} + +/* Heading styles */ +.markdown-content h2, +.markdown-content h3 { + font-family: 'Poppins', sans-serif; +} + +/* Light theme colors */ +.light-theme .markdown-content h2, +.light-theme .markdown-content h3, +.light-theme .markdown-content p, +.light-theme .markdown-content ul, +.light-theme .markdown-content li { + color: #444444 !important; +} + +/* Dark theme colors */ +.markdown-content h2, +.markdown-content h3, +.markdown-content p, +.markdown-content ul, +.markdown-content li { + color: #cccccc !important; +} + +.markdown-content h2 { + font-size: 1.5rem; + font-weight: 200; + line-height: 1.2; + margin-bottom: 1rem; +} + +.markdown-content h3 { + font-size: 1.2rem; + font-weight: 200; + line-height: 1.3; + margin-bottom: 0.8rem; +} + +/* Regular text styles */ +.markdown-content p, +.markdown-content ul, +.markdown-content li { + font-family: 'Roboto', sans-serif; + font-weight: 200; +} + +/* Make list items and paragraphs consistent size */ +.markdown-content p, +.markdown-content li { + font-size: 1rem; + line-height: 1.3; + margin-bottom: 0.25rem; +} + +/* List specific styling */ +.markdown-content ul { + padding-left: 1.5rem; + margin-bottom: 1rem; +} + +.markdown-content li { + margin-bottom: 0.25rem; +} + +/* FAQ section styling */ +.faq-section { + flex: 1; +} + +details { + border-bottom: 1px solid #ddd; + padding: 1em 0; + margin: 0; +} + +summary { + font-family: 'Roboto', sans-serif; + font-size: 1rem; + font-weight: 500; + cursor: pointer; + list-style: none; + margin: 0; + padding: 0; + outline: none; +} + +summary::marker { + display: none; +} + +details[open] summary { + color: #000; +} + +details p { + font-family: 'Roboto', sans-serif; + margin: 0.5em 0 0 0; + color: #666; + font-size: 1rem; + line-height: 1.6; + font-weight: 200; +} + +summary:before { + content: "▶"; + display: inline-block; + transform: rotate(0deg); + transition: transform 0.3s ease; + margin-right: 0.5em; + color: #000; +} + +details[open] summary:before { + transform: rotate(90deg); +} + +/* Responsive design */ +@media (max-width: 768px) { + .faq-container { + flex-direction: column; + } + + .markdown-content { + border-right: none; + border-bottom: 1px solid #ddd; + padding-right: 0; + padding-bottom: 2rem; + } +} diff --git a/poc/static/favicon.svg b/poc/static/favicon.svg new file mode 100644 index 0000000..963a519 --- /dev/null +++ b/poc/static/favicon.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/poc/static/happy_kid.png b/poc/static/happy_kid.png new file mode 100644 index 0000000..ed5790d Binary files /dev/null and b/poc/static/happy_kid.png differ diff --git a/poc/static/login.css b/poc/static/login.css new file mode 100644 index 0000000..7b45903 --- /dev/null +++ b/poc/static/login.css @@ -0,0 +1,178 @@ +/* Modal Styles */ +.modal { + display: none; + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: #00000080; + z-index: 1001; + align-items: center; + justify-content: center; +} + +.modal-content { + background: var(--modal-background); + padding: 2rem; + border-radius: 8px; + box-shadow: 0 2px 10px #00000033; + position: relative; + width: 100%; + max-width: 460px; + color: var(--modal-text); +} + +.login-box { + position: relative; +} + +.login-header { + text-align: center; + margin-bottom: 2rem; +} + +.logo { + width: 48px; + height: 48px; + margin-bottom: 1rem; + color: var(--text-color); +} + +.login-header h2 { + margin: 0; + color: var(--modal-text); + font-size: 1.3rem; +} + +.login-header p { + margin: 0.5rem 0 0; + color: var(--hover-color); + font-size: 0.85rem; +} + +.form-group { + margin-bottom: 0.3rem; +} + +.form-group label { + display: block; + margin-bottom: 0.3rem; + color: var(--modal-text); + font-size: 0.8rem; +} + +.form-group input { + width: 100%; + padding: 0.25rem 0.5rem; + border: 1px solid var(--input-border); + border-radius: 4px; + background: var(--body-background); + color: var(--modal-text); + font-size: 0.9rem; + transition: all 0.3s; + height: 40px; +} + +.form-group input:focus { + outline: none; + border-color: #1a73e8; + box-shadow: 0 0 0 2px #1A73E833; +} + +.error-message { + color: #dc3545; + font-size: 0.75rem; + margin-top: 0.25rem; + display: block; + min-height: 1.25em; +} + +.form-footer { + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: 1.5rem; +} + +.remember-me { + display: flex; + align-items: center; + gap: 0.5rem; + color: var(--modal-text); + font-size: 0.8rem; +} + +.forgot-password { + color: #1a73e8; + text-decoration: none; + font-size: 0.8rem; +} + +.forgot-password:hover { + text-decoration: underline; +} + +.submit-button { + width: 100%; + padding: 0.75rem; + background: #1a73e8; + color: white; + border: none; + border-radius: 4px; + font-size: 0.9rem; + font-weight: 500; + cursor: pointer; + transition: all 0.3s; +} + +.submit-button:hover { + background: #1557b0; + transform: translateY(-1px); +} + +.signup-link { + text-align: center; + margin-top: 1.5rem; + color: var(--modal-text); + font-size: 0.8rem; +} + +.signup-link a { + color: #1a73e8; + text-decoration: none; + font-weight: 500; +} + +.signup-link a:hover { + text-decoration: underline; +} + +.close-button { + position: absolute; + top: -1rem; + right: -1rem; + width: 2rem; + height: 2rem; + border-radius: 50%; + border: none; + background: var(--modal-text); + color: var(--modal-background); + font-size: 1.5rem; + cursor: pointer; + display: flex; + align-items: center; + justify-content: center; + transition: all 0.3s; +} + +.close-button:hover { + transform: scale(1.1); +} + +@media (max-width: 768px) { + .modal-content { + margin: 1rem; + padding: 1.5rem; + } +} diff --git a/poc/static/login_test.css b/poc/static/login_test.css new file mode 100644 index 0000000..9698206 --- /dev/null +++ b/poc/static/login_test.css @@ -0,0 +1,367 @@ + + diff --git a/poc/static/menu.css b/poc/static/menu.css new file mode 100644 index 0000000..2027750 --- /dev/null +++ b/poc/static/menu.css @@ -0,0 +1,272 @@ +.tf_nav { + background: var(--body-background); + padding: 0.3rem; + position: sticky; + top: 0; + z-index: 1000; + box-shadow: 0 1px 4px #00000022; + color: var(--text-color); + font-family: 'Inter', system-ui, -apple-system, sans-serif; +} + +.tf_nav_container { + display: flex; + align-items: center; + justify-content: space-between; + max-width: 1200px; + margin: 0 auto; + padding: 0 1rem; + height: 32px; +} + +.tf_logo { + display: flex; + align-items: center; + gap: 0.5rem; + margin-right: 4rem; + height: 100%; + color: var(--text-color); + text-decoration: none; + font-size: 0.95rem; +} + +.tf_logo svg { + width: 20px; + height: 20px; +} + +.tf_menu { + display: flex; + align-items: center; + gap: 0.75rem; + list-style: none; + margin: 0; + padding: 0; + height: 100%; + margin-right: auto; +} + +.tf_menu_item { + position: relative; + height: 100%; + display: flex; + align-items: center; +} + +.tf_menu_link { + color: var(--text-color); + text-decoration: none; + padding: 0.3rem; + display: flex; + align-items: center; + height: 100%; + transition: color 0.2s; + font-size: 0.8rem; + font-weight: 450; +} + +.tf_menu_link:hover { + color: var(--hover-color); +} + +.tf_dropdown { + position: absolute; + top: 100%; + left: 0; + background: var(--body-background); + min-width: 150px; + border-radius: 4px; + box-shadow: 0 4px 12px #00000033; + opacity: 0; + visibility: hidden; + transform: translateY(-10px); + transition: all 0.3s; +} + +.tf_menu_item:hover .tf_dropdown { + opacity: 1; + visibility: visible; + transform: translateY(0); +} + +.tf_dropdown_item { + padding: 0.4rem 0.8rem; + color: var(--text-color); + text-decoration: none; + display: block; + transition: background-color 0.2s; + font-size: 0.6rem; +} + +.tf_dropdown_item:hover { + background-color: #80808019; +} + +.tf_right_controls { + display: flex; + align-items: center; + gap: 2rem; + margin-left: 2rem; +} + +.tf_theme_toggle { + background: none; + border: 1px solid var(--text-color); + border-radius: 50%; + cursor: pointer; + padding: 0.3rem; + color: var(--text-color); + display: flex; + align-items: center; + justify-content: center; + transition: all 0.2s; + width: 28px; + height: 28px; +} + +.tf_theme_toggle:hover { + background-color: #80808019; + transform: scale(1.05); +} + +.theme-icon { + width: 14px; + height: 14px; + transition: all 0.2s; +} + +.light-theme .theme-icon.light { + display: none; +} + +.light-theme .theme-icon.dark { + display: block; +} + +.theme-icon.light { + display: block; +} + +.theme-icon.dark { + display: none; +} + +.tf_login_btn { + background: transparent; + border: 1px solid var(--text-color); + color: var(--text-color); + padding: 0.25rem 1rem; + border-radius: 4px; + text-decoration: none; + transition: all 0.2s; + font-weight: 500; + font-size: 0.8125rem; + cursor: pointer; +} + +.tf_login_btn:hover { + background: var(--text-color); + color: var(--body-background); + transform: translateY(-1px); + box-shadow: 0 2px 4px #0000001A; +} + +.hamburger-menu { + display: none; + cursor: pointer; + border: none; + background: none; + padding: 0.5rem; + color: var(--text-color); +} + +.hamburger-menu svg { + width: 24px; + height: 24px; + color: var(--text-color); +} + +.mobile-overlay { + display: none; + position: fixed; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: rgba(0, 0, 0, 0.5); + z-index: 999; + opacity: 0; + transition: opacity 0.3s ease; +} + +.mobile-overlay.active { + display: block; + opacity: 1; +} + +@media (max-width: 768px) { + .tf_menu { + display: none; + position: fixed; + top: 48px; + left: 0; + right: 0; + background: var(--body-background); + flex-direction: column; + align-items: stretch; + padding: 1rem; + height: auto; + box-shadow: 0 4px 12px #00000033; + z-index: 1000; + max-height: calc(100vh - 48px); + overflow-y: auto; + transform: translateY(-100%); + transition: transform 0.3s ease; + } + + .tf_menu.active { + display: flex; + transform: translateY(0); + } + + .tf_menu_item { + height: auto; + flex-direction: column; + align-items: stretch; + } + + .tf_menu_link { + padding: 0.8rem; + font-size: 1rem; + } + + .tf_dropdown { + position: static; + opacity: 1; + visibility: visible; + transform: none; + box-shadow: none; + background: transparent; + margin: 0; + padding-left: 1rem; + } + + .tf_dropdown_item { + font-size: 0.9rem; + padding: 0.6rem 1rem; + } + + .tf_logo { + margin-right: 0; + } + + .hamburger-menu { + display: block; + order: -1; + } + + .tf_right_controls { + margin-left: auto; + gap: 1rem; + } +} diff --git a/poc/static/music.png b/poc/static/music.png new file mode 100644 index 0000000..91075fa Binary files /dev/null and b/poc/static/music.png differ diff --git a/poc/static/ourworld.css b/poc/static/ourworld.css new file mode 100644 index 0000000..af37814 --- /dev/null +++ b/poc/static/ourworld.css @@ -0,0 +1,187 @@ +/* Import Google Fonts */ +@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&family=Roboto:wght@300;400;500;700&display=swap'); + +:root { + /* Light theme variables */ + --body-background-light: #ffffff; + --body-text-light: #333333; + --text-color-light: #333; + --hover-color-light: #666; + --modal-background-light: #f5f5f5; + --modal-text-light: #333; + --input-border-light: #ddd; + --hero-background-light: #FFFFFFF2; + --hero-background2-light: #FFFFFFFB; + --hero-text-light: #333; + --hero-banner-background-light: #0000000D; + --hero-subtitle-background-light: #385bb5; + --hero-subtitle-text-light: white; + --input-border-light: var(--hero-background2-light); + + /* Dark theme variables */ + --body-background-dark: #1a1a1a; + --body-text-dark: #ffffff; + --text-color-dark: #fff; + --hover-color-dark: #aaa; + --modal-background-dark: #282c34; + --modal-text-dark: #fff; + --input-border-dark: #444; + --hero-background-dark: #282C34F2; + --hero-background2-dark: #2D3139FA; + --hero-text-dark: white; + --hero-banner-background-dark: #FFFFFF26; + --hero-subtitle-background-dark: #385bb5; + --hero-subtitle-text-dark: white; + --input-border-dark: var(--hero-background2-dark); + + /* Default to dark theme */ + --body-background: var(--body-background-dark); + --body-text: var(--body-text-dark); + --text-color: var(--text-color-dark); + --hover-color: var(--hover-color-dark); + --modal-background: var(--modal-background-dark); + --modal-text: var(--modal-text-dark); + --input-border: var(--input-border-dark); + --hero-background: var(--hero-background-dark); + --hero-background2: var(--hero-background2-dark); + --hero-text: var(--hero-text-dark); + --hero-banner-background: var(--hero-banner-background-dark); + --hero-subtitle-background: var(--hero-subtitle-background-dark); + --hero-subtitle-text: var(--hero-subtitle-text-dark); + --input-border: var(--input-border-dark); +} + +/* Light theme class */ +.light-theme { + --body-background: var(--body-background-light); + --body-text: var(--body-text-light); + --text-color: var(--text-color-light); + --hover-color: var(--hover-color-light); + --modal-background: var(--modal-background-light); + --modal-text: var(--modal-text-light); + --input-border: var(--input-border-light); + --hero-background: var(--hero-background-light); + --hero-background2: var(--hero-background2-light); + --hero-text: var(--hero-text-light); + --hero-banner-background: var(--hero-banner-background-light); + --hero-subtitle-background: var(--hero-subtitle-background-light); + --hero-subtitle-text: var(--hero-subtitle-text-light); + --input-border: var(--input-border-light); +} + +/* Heading styles - using Poppins */ +h1 { + font-family: 'Poppins', sans-serif; + font-size: 1.2rem; + margin-bottom: 1rem; + font-weight: 700; + letter-spacing: -0.03em; + line-height: 1.1; + text-transform: uppercase; +} + +h2 { + font-family: 'Poppins', sans-serif; + font-size: 1.1rem; + margin-bottom: 1rem; + font-weight: 600; + letter-spacing: -0.02em; + line-height: 1.2; +} + +h3 { + font-family: 'Poppins', sans-serif; + font-size: 1rem; + margin-bottom: 0.8rem; + font-weight: 600; + letter-spacing: -0.01em; + line-height: 1.3; +} + +h4 { + font-family: 'Poppins', sans-serif; + font-size: 1rem; + margin-bottom: 0.8rem; + font-weight: 500; + letter-spacing: -0.005em; + line-height: 1.4; +} + +p ul { + padding-left: 1.5em; + margin: 1.25em 0; +} + +p li { + line-height: 1.6; + margin-bottom: 0.75em; +} + +/* Paragraph styles - using Roboto */ +p { + font-family: 'Roboto', sans-serif; + font-size: 1rem; + line-height: 1.6; + margin-bottom: 1.5rem; + max-width: 720px; + font-weight: 400; +} + +/* Optional: styling for small or additional text */ +small { + font-family: 'Roboto', sans-serif; + font-size: 0.9rem; + font-weight: 400; + color: #666; +} + +/* Additional styles for links within text */ +a { + color: #007acc; + text-decoration: none; + font-weight: 500; + transition: color 0.2s ease; +} + +a:hover { + text-decoration: underline; +} + +/* Navigation styles - using Poppins */ +nav { + font-family: 'Poppins', sans-serif; +} + +nav a { + font-size: 1rem; + font-weight: 500; + letter-spacing: 0; + text-decoration: none; + color: var(--text-color); + transition: color 0.2s ease; + text-transform: uppercase; +} + +nav a:hover { + color: var(--hover-color); +} + +main { + background-color: var(--body-background); + transition: background-color 0.3s; +} + +body { + font-family: 'Roboto', sans-serif; + background-color: var(--body-background); + color: var(--body-text); + min-height: 100vh; + display: flex; + flex-direction: column; + margin: 0; + padding: 0.25rem 0; + overflow-x: hidden; + transition: background-color 0.3s, color 0.3s; + font-size: 1rem; + line-height: 1.6; +} diff --git a/poc/static/questions.png b/poc/static/questions.png new file mode 100644 index 0000000..9c8b468 Binary files /dev/null and b/poc/static/questions.png differ diff --git a/poc/static/questions_.png b/poc/static/questions_.png new file mode 100644 index 0000000..a206701 Binary files /dev/null and b/poc/static/questions_.png differ