chemorphis-studio.github.io/graphics.html at main · chemorphis-studio/chemorphis-studio.github.io · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dynamic Analytics | Chemorphis</title>

    <meta name="title" content="Chemorphis | Quantum-Accurate 3D Chemistry Visualisations">
    <meta name="description" content="Studio for advanced chemistry visualisations. We compute quantum reaction coordinates via DFT calculations to render publication-grade 3D mechanisms, interactive assets, and cover art.">
    <meta name="keywords" content="chemistry visualization, 3D reaction mechanism, computational chemistry animation, DFT reaction coordinate, educational chemistry graphics, interactive 3D molecule, orbital rendering">
    <meta name="author" content="Chemorphis Studio">
    <link rel="canonical" href="https://chemorphis-studio.github.io/index.html">

    <meta property="og:type" content="website">
    <meta property="og:url" content="https://chemorphis-studio.github.io/">
    <meta property="og:title" content="Chemorphis | Quantum-Accurate 3D Chemistry Visualisations">
    <meta property="og:description" content="Bespoke 3D organic mechanisms, interactive WebGL structures, and publication-grade analytics computed from first principles.">
    <meta property="og:image" content="https://chemorphis-studio.github.io/assets/images/og-preview.png">

    <script type="application/ld+json">
    {
      "@context": "https://schema.org",
      "@type": "ProfessionalService",
      "name": "Chemorphis",
      "url": "https://chemorphis-studio.github.io",
      "logo": "https://chemorphis-studio.github.io/assets/favicon.ico",
      "description": "Studio specializing in advanced computational chemistry visualisations, DFT reaction mechanism animations, and interactive educational models.",
      "email": "chemorphis@gmail.com",
      "sameAs": []
    }
    </script>

    <link rel="stylesheet" href="css/style.css">
    <link rel="icon" type="image/x-icon" href="assets/favicon.ico">
</head>
<body>

    <nav class="container">
        <div class="logo"><a href="index.html" style="text-decoration:none; color:var(--black);">Chemorphis</a></div>
        <div class="nav-links">
            <a href="engine.html">Flagship Engine</a>
            <a href="interactive.html">Interactive 3D</a>
            <a href="graphics.html" style="color: var(--blue);">Custom Graphics</a>
            <a href="render.html">Cinematic Renders</a>
            <a href="design.html">Design Options</a>
            <a href="why.html">Why Us?</a>
            <a href="contact.html" class="cta-btn">Contact Us</a>
        </div>
        <div class="nav-arrow" id="navArrow">▼</div>
    </nav>

    <main>
        <!-- Header with Curves -->
        <section class="page-header" style="position: relative; width: 100vw; overflow: hidden;">
            <!-- Abstract Curves -->
            <svg width="100%" height="100%" viewBox="0 0 1440 300" preserveAspectRatio="none" fill="none" xmlns="http://www.w3.org/2000/svg" style="position: absolute; left: 0; top: 0; opacity: 0.05; z-index: -1; pointer-events: none;">
                <path d="M0 50 C 360 200, 1080 -50, 1440 50" stroke="black" stroke-width="2"/>
                <path d="M0 80 C 360 230, 1080 -20, 1440 80" stroke="black" stroke-width="2"/>
                <path d="M0 110 C 360 260, 1080 10, 1440 110" stroke="black" stroke-width="2"/>
                <path d="M0 140 C 360 290, 1080 40, 1440 140" stroke="black" stroke-width="2"/>
            </svg>

            <div class="container">
                <span class="mono-label">// 04. ANALYTICS & PLOTS</span>
                <h1 style="font-size: 4rem; max-width: 1000px;">Publication-Grade, Dynamic Graphs.</h1>
                <p class="subheading" style="max-width: 800px;">Static textbook graphs hide the relationship between variables. Our dynamic visual engine makes them responsive, colour-matched to your branding, and relentlessly precise.</p>
            </div>
        </section>

        <!-- MathJax Script for LaTeX rendering -->
        <script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
        <script>
            window.MathJax = {
              tex: { inlineMath: [['$', '$'], ['\\(', '\\)']] }
            };
        </script>

        <!-- Video Theater Section -->
        <section class="theater-section container">
            <h2 class="red-heading" style="font-size: 2rem; margin-top: 20px; margin-bottom: 40px; text-align: center;">Real-Time, Animated Graphs</h2>
            <div class="video-theater" style="margin-bottom: 10px;"">
                <video autoplay muted loop playsinline preload="auto">
                    <source src="assets/videos/arrhenius.mp4" type="video/mp4">
                </video>
            </div>
        </section>

        <!-- Static Graphics Showcase -->
        <section class="graphics-grid container">
            <div class="graphics-text" style="margin-left: 10px; margin-bottom: 20px;">
                <h2 class="blue-heading" style="font-size: 2rem; margin-top: 20px;  margin-bottom: 20px;">Your imagination is the limit.</h2>
                <p style="font-size: 1.1rem; margin-bottom: 20px;">We offer highly-customised graphs, including but not limited to:</p>
                <ul class="bullet-list" style="margin-bottom: 60px;">
                    <li>Maxwell-Boltzmann distributions</li>
                    <li>Arrhenius plots and rate curves</li>
                    <li>Concentration-time graphs</li>
                    <li>pH titration curves</li>
                    <li>Absorbance spectra</li>
                </ul>
                <a href="contact.html" class="btn btn-blue" style="background: var(--red);">Request Custom Graph</a>
            </div>

            <div class="graphics-image-container">
                <img src="assets/images/solubility.png" alt="Solubility Curve" class="reactive-image">
            </div>
        </section>
    </main>

    <footer class="container footer-style">
        &copy; CHEMORPHIS STUDIO. ALL RIGHTS RESERVED. // THE PREMIER CHEMISTRY VISUALISATION TOOL
    </footer>

    <script>
        const nav = document.querySelector('nav');
        const arrow = document.getElementById('navArrow');
        const dropdown = document.querySelector('.dropdown');
        let lastScrollY = window.scrollY;

        window.addEventListener('scroll', () => {
            if (window.innerWidth <= 768) {
                if (window.scrollY > 80 && window.scrollY > lastScrollY) {
                    nav.classList.add('collapsed-state');
                }
                lastScrollY = window.scrollY;
            }
        });

        if (arrow) {
            arrow.addEventListener('click', () => {
                nav.classList.toggle('collapsed-state');
            });
        }

        if (dropdown) {
            dropdown.addEventListener('click', (e) => {
                if (window.innerWidth <= 1024) {
                    e.stopPropagation();
                    dropdown.classList.toggle('active');
                }
            });
        }
    </script>
</body>
</html>