Merge pull request #3 from gm3/main

Add overworld website
M3-org · Nov 10, 2023 · dc83243 · dc83243
2 parents 5ada706 + 0c579a2
commit dc83243
Show file tree

Hide file tree

Showing 24 changed files with 356 additions and 0 deletions.
diff --git a/overworld/images/1.png b/overworld/images/1.png
diff --git a/overworld/images/10.png b/overworld/images/10.png
diff --git a/overworld/images/2.png b/overworld/images/2.png
diff --git a/overworld/images/3.png b/overworld/images/3.png
diff --git a/overworld/images/4.png b/overworld/images/4.png
diff --git a/overworld/images/5.png b/overworld/images/5.png
diff --git a/overworld/images/6.png b/overworld/images/6.png
diff --git a/overworld/images/7.png b/overworld/images/7.png
diff --git a/overworld/images/8.png b/overworld/images/8.png
diff --git a/overworld/images/9.png b/overworld/images/9.png
diff --git a/overworld/images/IA.png b/overworld/images/IA.png
diff --git a/overworld/images/body.png b/overworld/images/body.png
diff --git a/overworld/images/cloud.png b/overworld/images/cloud.png
diff --git a/overworld/images/cryptovoxel.png b/overworld/images/cryptovoxel.png
diff --git a/overworld/images/discord.png b/overworld/images/discord.png
diff --git a/overworld/images/git.png b/overworld/images/git.png
diff --git a/overworld/images/gnosis.png b/overworld/images/gnosis.png
diff --git a/overworld/images/hyperfy.png b/overworld/images/hyperfy.png
diff --git a/overworld/images/safe.png b/overworld/images/safe.png
diff --git a/overworld/images/studio.png b/overworld/images/studio.png
diff --git a/overworld/images/truck.png b/overworld/images/truck.png
diff --git a/overworld/images/x.png b/overworld/images/x.png
diff --git a/overworld/index.html b/overworld/index.html
@@ -0,0 +1,106 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Metaverse Overworld</title>
+    <link rel="stylesheet" href="styles.css">
+</head>
+
+<body>
+
+
+    <div class="map-container">
+
+
+        <a href="safe (multisig bank)" target="_blank" class="gnosis-safe"><img src="images/gnosis.png"><span class="tooltip">Gnosis Safe Info</span></a>
+
+        <a href="https://sketchfab.com/3d-models/metafactory-truck-101bd0d014fd45ab90e7552aae89375d" target="_blank" class="metafactory-truck"><img src="images/truck.png"><span class="tooltip">Metafactory Truck</span></a>
+
+        <a href="https://discord.gg/m3-org" target="_blank" class="discord"><img src="images/discord.png"><span class="tooltip">Discord Channel</span></a>
+
+        <a href="https://sketchfab.com/3d-models/metafactory-truck-101bd0d014fd45ab90e7552aae89375d" target="_blank" class="opensea"><img src="images/truck.png"><span class="tooltip">OpenSea Marketplace</span></a> 
+
+        <a href="https://sketchfab.com/3d-models/metafactory-truck-101bd0d014fd45ab90e7552aae89375d" target="_blank"  class="snapshot"><img src="images/truck.png"><span class="tooltip">Snapshot Voting</span></a> 
+
+        <a href="https://sketchfab.com/3d-models/m3-mart-833699c4a15b4d1ab3e3d79068972431" target="_blank" class="m3-mart"><img src="images/truck.png"><span class="tooltip">M3 Mart</span></a>
+
+        <a href="https://sketchfab.com/3d-models/3d-skill-role-badges-and-pins-e3329ed59b874aad98586657a5f11630" target="_blank" class="badges-and-pins"><img src="images/git.png"><span class="tooltip">GitHub Badges and Pins</span></a>
+
+        <a href="https://x.com/m3org" target="_blank" class="twitter"><img src="images/x.png"><span class="tooltip">Twitter / X</span></a> 
+
+        <a href="https://sketchfab.com/m3org" target="_blank" class="sketchfab"><img src="images/truck.png"><span class="tooltip">Sketchfab</span></a>
+
+        <a href="https://hyperfy.io/studio" target="_blank" class="hyperfy-hq"><img src="images/hyperfy.png"><span class="tooltip">Hyperfy HQ</span></a>
+
+        <a href="https://sketchfab.com/3d-models/omi-diner-b8972d0fc33047c3b475e78b3f5a9183" target="_blank" class="omi-diner"><img src="images/truck.png"><span class="tooltip">OMI Diner</span></a>
+
+        <a href="https://sketchfab.com/3d-models/internet-archive-building-2d76cc9e714f42bb9d090af73074296a" target="_blank" class="internet-archive"><img src="images/IA.png"><span class="tooltip">Internet Archive Building</span></a>
+
+        <a href="https://sketchfab.com/3d-models/metafactory-castle-f08c9c88d9974c80ba88c034c25b7738" target="_blank" class="voxels-makers-district"><img src="images/cryptovoxel.png"><span class="tooltip">Voxels Makers District</span></a>
+
+        <a href="https://sketchfab.com/3d-models/m3tv-soundstage-6206325ff5c643c9b1dd2ce5aadbec19" target="_blank" class="m3tv-soundstage"><img src="images/studio.png"><span class="tooltip">M3TV Soundstage</span></a>
+
+        <div class="cloud-container">
+            <img src="images/cloud.png" class="cloud" alt="Cloud">
+            <!-- Repeat the above line for multiple clouds if needed -->
+        </div>
+
+    </div>
+
+
+
+    <!-- HUD with badges -->
+    <div class="hud">
+        <img src="images/1.png" target="_blank" alt="Badge 1" class="badge" data-tooltip="This is Badge 1">
+        <img src="images/2.png" target="_blank"  alt="Badge 2" class="badge" data-tooltip="This is Badge 2">
+        <img src="images/3.png" target="_blank" alt="Badge 3" class="badge" data-tooltip="This is Badge 3">
+        <img src="images/4.png" target="_blank" alt="Badge 4" class="badge" data-tooltip="This is Badge 4">
+        <img src="images/5.png" target="_blank" alt="Badge 5" class="badge" data-tooltip="This is Badge 5">
+        <img src="images/6.png" target="_blank" alt="Badge 6" class="badge" data-tooltip="This is Badge 6">
+        <img src="images/7.png" target="_blank" alt="Badge 7" class="badge" data-tooltip="This is Badge 7">
+        <a href="https://discord.gg/m3-org" target="_blank"><img src="images/8.png" alt="Badge 8" class="badge" data-tooltip="This is Badge 8"></a>
+        <a href="https://zora.co/collect/eth:0xb67ff46dfde55ad2fe05881433e5687fd1000312" target="_blank"><img src="images/9.png" alt="Badge 9" class="badge" data-tooltip="This is Badge 9"></a>
+        <a href="https://github.com/M3-org/charter" target="_blank"><img src="images/10.png" alt="Badge 10" class="badge" data-tooltip="This is Badge 10"></a>
+        <!-- Add more badges as needed -->
+    </div>
+        <div class="about">
+            <p>
+                M3Org is a pioneering platform in the Open Metaverse, dedicated to creating an interoperable, open-source universe of 3D worlds where individuality thrives through customizable avatars. Our vibrant community collaborates on Discord, fostering a co-working environment that encourages diverse aspirations while jointly building and shaping our digital realm. M3Org is more than just a space; it's a collective journey towards an imaginative and inclusive future, powered by the creativity and unity of its members.
+            </p>
+        </div>
+    <div class="links">
+
+
+        <a href="https://github.com/m3-org" target="_blank" class="ping">M3 GitHub</a>
+        <a href="https://discord.gg/m3-org" target="_blank" class="ping">M3 Discord</a>
+        <a href="https://hackmd.io/@xr/book" target="_blank" class="ping">M3 Research</a>
+        <a href="https://twitter.com/m3org" target="_blank" class="ping">M3 Twitter</a>
+        <a href="https://github.com/m3-org/avatar-interop#Calendar" target="_blank" class="ping">M3 Calendar</a>
+        <a href="https://hackmd.io/@xr/vprod" target="_blank" class="ping">Virtual Production</a>
+        <a href="https://juicebox.money/@openvoxels" target="_blank" class="ping">OpenVoxels</a>
+        <a href="https://hyperfy.io/m3" target="_blank" class="ping">M3 HQ</a>
+        <a href="https://tv.m3org.com/" target="_blank" class="ping">M3TV</a>
+        <a href="https://gm3.github.io/boomboxheads-v2/" target="_blank" class="ping">Boomboxheads V2</a>
+        <a href="https://m3org.com/mart/" target="_blank" class="ping">M3 Merch</a>
+        <a href="https://hyperfy.io/" target="_blank" class="ping">Hyperfy</a>
+        <a href="https://3ov.xyz/" target="_blank" class="ping">Three Object Viewer</a>
+        <a href="https://emotionull.art/" target="_blank" class="ping">Phettaverse</a>
+        <a href="https://github.com/jbaicoianu/janusweb" target="_blank" class="ping">JanusWeb</a>
+        <a href="https://github.com/webaverse" target="_blank" class="ping">Webaverse</a>
+        <a href="https://cryptoavatars.io/" target="_blank" class="ping">Cryptoavatars</a>
+        <a href="https://m3org.com/mfshop" target="_blank" class="ping">MetaFactory</a>
+        <a href="https://www.unavi.xyz/" target="_blank" class="ping">UNAVI</a>
+        <a href="https://www.zesty.market/" target="_blank" class="ping">Zesty Market</a>
+        <a href="https://anarchyarcade.com/" target="_blank" class="ping">Anarchy Arcade</a>
+        <a href="https://framevr.io/omi" target="_blank" class="ping">OMI group</a>
+        <a href="https://hyperfy.io/msf" target="_blank" class="ping">Metaverse Standards Forum</a>
+        <a href="https://twitter.com/neon_buidl" target="_blank" class="ping">Neon Buidl</a>
+        <a href="https://uncannyalley.io" target="_blank"  class="ping">Uncanny Alley</a>
+      </div>
+
+
+
+
+</body>
+</html>
diff --git a/overworld/styles.css b/overworld/styles.css
@@ -0,0 +1,250 @@
+body {
+     background-color: hsl(75, 86%, 48%);
+     margin: 0px;
+     width: 100%;
+}
+
+.about{
+     margin: 0px;
+     padding: 100px;
+}
+
+
+.map-container {
+    background: url('images/body.png') no-repeat center center;
+    background-size: contain;
+    background-color: #aee311;
+    position: relative;
+    width: 100%; /* Full width of the viewport */
+    height: 0; /* Set height to 0 */
+    padding-bottom: 56.25%; /* For a 16:9 aspect ratio */
+    margin: 0px;
+}
+
+.map-container a {
+    position: absolute;
+    transform: translate(-50%, -50%);
+    background-size: contain;
+    background-repeat: no-repeat;
+    /* Use px instead of vw for consistent scaling */
+
+}
+
+.map-container img {
+
+    width: 20vh; 
+    height: 20vh;
+}
+
+
+/* Positioning pins using percentages relative to the .map-container */
+.map-container .gnosis-safe { top: 13%; left: 30%; 
+     }
+.map-container .mcdonalds-shop { top: 30%; left: 40%; 
+     }
+.map-container .discord { top: 50%; left: 90%; 
+     } /* Adjusted to percentage */
+.map-container .opensea { top: 70%; left: 75%; 
+     } /* Adjusted to percentage */
+.map-container .m3-mart { top: 75%; left: 70%; 
+     } /* Adjusted to percentage */
+.map-container .badges-and-pins { top: 65%; left: 20%; 
+     } /* Adjusted to percentage */
+.map-container .twitter { top: 48%; left: 14%; 
+     } /* Adjusted to percentage */
+.map-container .sketchfab { top: 75%; left: 50%; 
+     } /* Adjusted to percentage */
+.map-container .omi-diner { top: 15%; left: 70%; 
+     } /* Adjusted to percentage */
+.map-container .internet-archive { top: 30%; left: 60%; 
+     } /* Adjusted to percentage */
+.map-container .voxels-makers-district { top: 37%; left: 21%; 
+     } /* Adjusted to percentage */
+.map-container .m3tv-soundstage { top: 50%; left: 50%; 
+     } /* Adjusted to percentage */
+.map-container .snapshot { top: 17%; left: 40%; 
+     } /* Adjusted to percentage */
+.map-container .metafactory-truck { top: 21%; left: 21%; 
+     } /* Adjusted to percentage */
+.map-container .hyperfy-hq { top: 68%; left: 38%; 
+     } /* Adjusted to percentage */
+
+
+
+.map-container a .tooltip {
+    visibility: hidden;
+    width: 120px;
+    background-color: black;
+    font-size: 2vh;
+    color: white;
+    text-align: center;
+    border-radius: 6px;
+    padding: 5px 0;
+    position: absolute;
+    z-index: 1;
+    top: 50%; 
+    right: 0%;
+}
+
+.map-container a:hover .tooltip {
+    visibility: visible;
+}
+
+
+
+.map-container a .tooltip::after {
+    content: "";
+    position: absolute;
+    bottom: 100%;  /* At the top of the tooltip */
+    left: 50%;
+    margin-left: -5px;
+    border-width: 5px;
+    border-style: solid;
+    border-color: transparent transparent black transparent;
+}
+
+.map-container a img {
+     width: 20vh; 
+     height: 20vh;
+     transition: filter 0.3s ease; /* Smooth transition for the glow effect */
+     filter: drop-shadow(0 0 0 transparent); /* Initial state with no glow */
+ }
+
+ /* Hover effect */
+ .map-container a:hover img {
+     filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.6)); /* Creates a glowing effect */
+ }
+
+
+         /* HUD styles */
+         .hud {
+          position: fixed;
+          bottom: 1vw; /* Distance from the bottom */
+          left: 50%;
+          transform: translateX(-50%);
+          display: flex;
+          align-items: center;
+          gap: 1em; /* Space between badges */
+      }
+
+      .badge {
+          width: 3vw; /* Adjust size as needed */
+          filter: grayscale(1); /* Desaturate the badge */
+          opacity: 0.8; /* Make it slightly transparent */
+          position: relative; /* To position the tooltip */
+          z-index: 1000;  /* ensure it's above other elements */
+      }
+
+      .badge:hover {
+          filter: grayscale(0); /* Fully colored on hover */
+          opacity: 1; /* Fully opaque on hover */
+      }
+
+      .badge::before {
+          content: attr(data-tooltip); /* Use data attribute for tooltip text */
+          position: absolute;
+          bottom: 100%; /* Place it above the badge */
+          left: 50%;
+          transform: translateX(-50%) translateY(10px);  /* combining the two transforms */
+          background-color: rgba(0, 255, 0, 0.9); /* Green background with slight transparency */
+          padding: 0.2em 0.5em;
+          border-radius: 5px;
+          font-size: 0.8em;
+          white-space: nowrap; /* Prevent the text from wrapping */
+
+      }
+
+      .badge:hover::before {
+          opacity: 1;
+
+      }
+
+      .ascii-art {
+          text-align: center;
+        }
+
+        footer {
+          text-align: center;
+          color: pink;
+          padding: 10px 0;
+        }
+
+        .links {
+          display: flex;
+          justify-content: center; /* Center items horizontally */
+          flex-wrap: wrap;
+          gap: 5px; /* Add space between the items */
+          padding-bottom: 100px; /* Adjusted padding for better spacing */
+          list-style: none; /* Remove default list styling if it's a list */
+        }
+
+        .links a {
+          display: block;
+          width: 30%; /* Adjust width for better spacing */
+          text-align: center;
+          padding: 2px; /* Increased padding for a better touch area */
+          color: rgb(0, 0, 0); /* Default color */
+          border: 2px solid transparent; /* For a subtle hover effect */
+          border-radius: 5px; /* Rounded corners */
+          text-decoration: none; /* Remove underline from links */
+          transition: all 0.3s ease; /* Smooth transition for hover effects */
+        }
+
+        .links a:hover {
+          background-color: rgba(14, 104, 14, 0.151); /* Slight background on hover */
+          border-color: #ddd; /* Subtle border color change on hover */
+        }
+
+        .links a.cyan {
+          background-color: #e0f7fa; /* Light cyan background */
+        }
+
+        .links a.pink {
+          background-color: #fce4ec; /* Light pink background */
+        }
+
+
+        .iframe-placeholder {
+          width: 100%;
+          height: 640px;
+          background-color: #00000f;
+          position: relative;
+          top: 100%;
+        }
+
+        .cloud-container {
+          position: relative;
+          width: 100%;
+          height: 100vh; /* Adjust as needed */
+          overflow: hidden; /* Keeps clouds within the bounds of the container */
+          pointer-events: none; /* Disables click events on the cloud */
+
+      }
+
+      .cloud {
+          position: absolute;
+          width: 150px; /* Adjust based on your image size */
+          animation: floatClouds 100s linear infinite;
+          pointer-events: none; /* Disables click events on the cloud */
+
+          /* Use multiple cloud elements with different delays for a more dynamic effect */
+      }
+
+
+
+      @keyframes floatClouds {
+          0% {
+              transform: translateX(0) translateY(0);
+              opacity: 0;
+          }
+          10% {
+              opacity: 1;
+          }
+          90% {
+              opacity: 1;
+          }
+          100% {
+              transform: translateX(100vw) translateY(100vh); /* Moves to the bottom right */
+              opacity: 0;
+          }
+      }