diff --git a/examples/web_grid_animation/build.gradle.kts b/examples/web_grid_animation/build.gradle.kts new file mode 100644 index 0000000000..d5785e87e6 --- /dev/null +++ b/examples/web_grid_animation/build.gradle.kts @@ -0,0 +1,26 @@ +plugins { + kotlin("multiplatform") version "1.5.10" + id("org.jetbrains.compose") version "0.5.0-build235" +} + +repositories { + mavenCentral() + maven("https://maven.pkg.jetbrains.space/public/p/compose/dev") +} + +kotlin { + js(IR) { + browser() + binaries.executable() + } + + sourceSets { + val jsMain by getting { + dependencies { + implementation(npm("highlight.js", "10.7.2")) + implementation(compose.web.core) + implementation(compose.runtime) + } + } + } +} diff --git a/examples/web_grid_animation/gradle.properties b/examples/web_grid_animation/gradle.properties new file mode 100644 index 0000000000..29e08e8ca8 --- /dev/null +++ b/examples/web_grid_animation/gradle.properties @@ -0,0 +1 @@ +kotlin.code.style=official \ No newline at end of file diff --git a/examples/web_grid_animation/gradle/wrapper/gradle-wrapper.jar b/examples/web_grid_animation/gradle/wrapper/gradle-wrapper.jar new file mode 100644 index 0000000000..e708b1c023 Binary files /dev/null and b/examples/web_grid_animation/gradle/wrapper/gradle-wrapper.jar differ diff --git a/examples/web_grid_animation/gradle/wrapper/gradle-wrapper.properties b/examples/web_grid_animation/gradle/wrapper/gradle-wrapper.properties new file mode 100644 index 0000000000..29e4134576 --- /dev/null +++ b/examples/web_grid_animation/gradle/wrapper/gradle-wrapper.properties @@ -0,0 +1,5 @@ +distributionBase=GRADLE_USER_HOME +distributionPath=wrapper/dists +distributionUrl=https\://services.gradle.org/distributions/gradle-7.0.2-all.zip +zipStoreBase=GRADLE_USER_HOME +zipStorePath=wrapper/dists diff --git a/examples/web_grid_animation/gradlew b/examples/web_grid_animation/gradlew new file mode 100755 index 0000000000..4f906e0c81 --- /dev/null +++ b/examples/web_grid_animation/gradlew @@ -0,0 +1,185 @@ +#!/usr/bin/env sh + +# +# Copyright 2015 the original author or authors. +# +# Licensed under the Apache License, Version 2.0 (the "License"); +# you may not use this file except in compliance with the License. +# You may obtain a copy of the License at +# +# https://www.apache.org/licenses/LICENSE-2.0 +# +# Unless required by applicable law or agreed to in writing, software +# distributed under the License is distributed on an "AS IS" BASIS, +# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +# See the License for the specific language governing permissions and +# limitations under the License. +# + +############################################################################## +## +## Gradle start up script for UN*X +## +############################################################################## + +# Attempt to set APP_HOME +# Resolve links: $0 may be a link +PRG="$0" +# Need this for relative symlinks. +while [ -h "$PRG" ] ; do + ls=`ls -ld "$PRG"` + link=`expr "$ls" : '.*-> \(.*\)$'` + if expr "$link" : '/.*' > /dev/null; then + PRG="$link" + else + PRG=`dirname "$PRG"`"/$link" + fi +done +SAVED="`pwd`" +cd "`dirname \"$PRG\"`/" >/dev/null +APP_HOME="`pwd -P`" +cd "$SAVED" >/dev/null + +APP_NAME="Gradle" +APP_BASE_NAME=`basename "$0"` + +# Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script. +DEFAULT_JVM_OPTS='"-Xmx64m" "-Xms64m"' + +# Use the maximum available, or set MAX_FD != -1 to use that value. +MAX_FD="maximum" + +warn () { + echo "$*" +} + +die () { + echo + echo "$*" + echo + exit 1 +} + +# OS specific support (must be 'true' or 'false'). +cygwin=false +msys=false +darwin=false +nonstop=false +case "`uname`" in + CYGWIN* ) + cygwin=true + ;; + Darwin* ) + darwin=true + ;; + MINGW* ) + msys=true + ;; + NONSTOP* ) + nonstop=true + ;; +esac + +CLASSPATH=$APP_HOME/gradle/wrapper/gradle-wrapper.jar + + +# Determine the Java command to use to start the JVM. +if [ -n "$JAVA_HOME" ] ; then + if [ -x "$JAVA_HOME/jre/sh/java" ] ; then + # IBM's JDK on AIX uses strange locations for the executables + JAVACMD="$JAVA_HOME/jre/sh/java" + else + JAVACMD="$JAVA_HOME/bin/java" + fi + if [ ! -x "$JAVACMD" ] ; then + die "ERROR: JAVA_HOME is set to an invalid directory: $JAVA_HOME + +Please set the JAVA_HOME variable in your environment to match the +location of your Java installation." + fi +else + JAVACMD="java" + which java >/dev/null 2>&1 || die "ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH. + +Please set the JAVA_HOME variable in your environment to match the +location of your Java installation." +fi + +# Increase the maximum file descriptors if we can. +if [ "$cygwin" = "false" -a "$darwin" = "false" -a "$nonstop" = "false" ] ; then + MAX_FD_LIMIT=`ulimit -H -n` + if [ $? -eq 0 ] ; then + if [ "$MAX_FD" = "maximum" -o "$MAX_FD" = "max" ] ; then + MAX_FD="$MAX_FD_LIMIT" + fi + ulimit -n $MAX_FD + if [ $? -ne 0 ] ; then + warn "Could not set maximum file descriptor limit: $MAX_FD" + fi + else + warn "Could not query maximum file descriptor limit: $MAX_FD_LIMIT" + fi +fi + +# For Darwin, add options to specify how the application appears in the dock +if $darwin; then + GRADLE_OPTS="$GRADLE_OPTS \"-Xdock:name=$APP_NAME\" \"-Xdock:icon=$APP_HOME/media/gradle.icns\"" +fi + +# For Cygwin or MSYS, switch paths to Windows format before running java +if [ "$cygwin" = "true" -o "$msys" = "true" ] ; then + APP_HOME=`cygpath --path --mixed "$APP_HOME"` + CLASSPATH=`cygpath --path --mixed "$CLASSPATH"` + + JAVACMD=`cygpath --unix "$JAVACMD"` + + # We build the pattern for arguments to be converted via cygpath + ROOTDIRSRAW=`find -L / -maxdepth 1 -mindepth 1 -type d 2>/dev/null` + SEP="" + for dir in $ROOTDIRSRAW ; do + ROOTDIRS="$ROOTDIRS$SEP$dir" + SEP="|" + done + OURCYGPATTERN="(^($ROOTDIRS))" + # Add a user-defined pattern to the cygpath arguments + if [ "$GRADLE_CYGPATTERN" != "" ] ; then + OURCYGPATTERN="$OURCYGPATTERN|($GRADLE_CYGPATTERN)" + fi + # Now convert the arguments - kludge to limit ourselves to /bin/sh + i=0 + for arg in "$@" ; do + CHECK=`echo "$arg"|egrep -c "$OURCYGPATTERN" -` + CHECK2=`echo "$arg"|egrep -c "^-"` ### Determine if an option + + if [ $CHECK -ne 0 ] && [ $CHECK2 -eq 0 ] ; then ### Added a condition + eval `echo args$i`=`cygpath --path --ignore --mixed "$arg"` + else + eval `echo args$i`="\"$arg\"" + fi + i=`expr $i + 1` + done + case $i in + 0) set -- ;; + 1) set -- "$args0" ;; + 2) set -- "$args0" "$args1" ;; + 3) set -- "$args0" "$args1" "$args2" ;; + 4) set -- "$args0" "$args1" "$args2" "$args3" ;; + 5) set -- "$args0" "$args1" "$args2" "$args3" "$args4" ;; + 6) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" ;; + 7) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" "$args6" ;; + 8) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" "$args6" "$args7" ;; + 9) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" "$args6" "$args7" "$args8" ;; + esac +fi + +# Escape application args +save () { + for i do printf %s\\n "$i" | sed "s/'/'\\\\''/g;1s/^/'/;\$s/\$/' \\\\/" ; done + echo " " +} +APP_ARGS=`save "$@"` + +# Collect all arguments for the java command, following the shell quoting and substitution rules +eval set -- $DEFAULT_JVM_OPTS $JAVA_OPTS $GRADLE_OPTS "\"-Dorg.gradle.appname=$APP_BASE_NAME\"" -classpath "\"$CLASSPATH\"" org.gradle.wrapper.GradleWrapperMain "$APP_ARGS" + +exec "$JAVACMD" "$@" diff --git a/examples/web_grid_animation/gradlew.bat b/examples/web_grid_animation/gradlew.bat new file mode 100644 index 0000000000..107acd32c4 --- /dev/null +++ b/examples/web_grid_animation/gradlew.bat @@ -0,0 +1,89 @@ +@rem +@rem Copyright 2015 the original author or authors. +@rem +@rem Licensed under the Apache License, Version 2.0 (the "License"); +@rem you may not use this file except in compliance with the License. +@rem You may obtain a copy of the License at +@rem +@rem https://www.apache.org/licenses/LICENSE-2.0 +@rem +@rem Unless required by applicable law or agreed to in writing, software +@rem distributed under the License is distributed on an "AS IS" BASIS, +@rem WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +@rem See the License for the specific language governing permissions and +@rem limitations under the License. +@rem + +@if "%DEBUG%" == "" @echo off +@rem ########################################################################## +@rem +@rem Gradle startup script for Windows +@rem +@rem ########################################################################## + +@rem Set local scope for the variables with windows NT shell +if "%OS%"=="Windows_NT" setlocal + +set DIRNAME=%~dp0 +if "%DIRNAME%" == "" set DIRNAME=. +set APP_BASE_NAME=%~n0 +set APP_HOME=%DIRNAME% + +@rem Resolve any "." and ".." in APP_HOME to make it shorter. +for %%i in ("%APP_HOME%") do set APP_HOME=%%~fi + +@rem Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script. +set DEFAULT_JVM_OPTS="-Xmx64m" "-Xms64m" + +@rem Find java.exe +if defined JAVA_HOME goto findJavaFromJavaHome + +set JAVA_EXE=java.exe +%JAVA_EXE% -version >NUL 2>&1 +if "%ERRORLEVEL%" == "0" goto execute + +echo. +echo ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH. +echo. +echo Please set the JAVA_HOME variable in your environment to match the +echo location of your Java installation. + +goto fail + +:findJavaFromJavaHome +set JAVA_HOME=%JAVA_HOME:"=% +set JAVA_EXE=%JAVA_HOME%/bin/java.exe + +if exist "%JAVA_EXE%" goto execute + +echo. +echo ERROR: JAVA_HOME is set to an invalid directory: %JAVA_HOME% +echo. +echo Please set the JAVA_HOME variable in your environment to match the +echo location of your Java installation. + +goto fail + +:execute +@rem Setup the command line + +set CLASSPATH=%APP_HOME%\gradle\wrapper\gradle-wrapper.jar + + +@rem Execute Gradle +"%JAVA_EXE%" %DEFAULT_JVM_OPTS% %JAVA_OPTS% %GRADLE_OPTS% "-Dorg.gradle.appname=%APP_BASE_NAME%" -classpath "%CLASSPATH%" org.gradle.wrapper.GradleWrapperMain %* + +:end +@rem End local scope for the variables with windows NT shell +if "%ERRORLEVEL%"=="0" goto mainEnd + +:fail +rem Set variable GRADLE_EXIT_CONSOLE if you need the _script_ return code instead of +rem the _cmd.exe /c_ return code! +if not "" == "%GRADLE_EXIT_CONSOLE%" exit 1 +exit /b 1 + +:mainEnd +if "%OS%"=="Windows_NT" endlocal + +:omega diff --git a/examples/web_grid_animation/license/LICENSE.txt b/examples/web_grid_animation/license/LICENSE.txt new file mode 100644 index 0000000000..9c8f3ea087 --- /dev/null +++ b/examples/web_grid_animation/license/LICENSE.txt @@ -0,0 +1,201 @@ + Apache License + Version 2.0, January 2004 + http://www.apache.org/licenses/ + + TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION + + 1. Definitions. + + "License" shall mean the terms and conditions for use, reproduction, + and distribution as defined by Sections 1 through 9 of this document. + + "Licensor" shall mean the copyright owner or entity authorized by + the copyright owner that is granting the License. + + "Legal Entity" shall mean the union of the acting entity and all + other entities that control, are controlled by, or are under common + control with that entity. For the purposes of this definition, + "control" means (i) the power, direct or indirect, to cause the + direction or management of such entity, whether by contract or + otherwise, or (ii) ownership of fifty percent (50%) or more of the + outstanding shares, or (iii) beneficial ownership of such entity. + + "You" (or "Your") shall mean an individual or Legal Entity + exercising permissions granted by this License. + + "Source" form shall mean the preferred form for making modifications, + including but not limited to software source code, documentation + source, and configuration files. + + "Object" form shall mean any form resulting from mechanical + transformation or translation of a Source form, including but + not limited to compiled object code, generated documentation, + and conversions to other media types. + + "Work" shall mean the work of authorship, whether in Source or + Object form, made available under the License, as indicated by a + copyright notice that is included in or attached to the work + (an example is provided in the Appendix below). + + "Derivative Works" shall mean any work, whether in Source or Object + form, that is based on (or derived from) the Work and for which the + editorial revisions, annotations, elaborations, or other modifications + represent, as a whole, an original work of authorship. For the purposes + of this License, Derivative Works shall not include works that remain + separable from, or merely link (or bind by name) to the interfaces of, + the Work and Derivative Works thereof. + + "Contribution" shall mean any work of authorship, including + the original version of the Work and any modifications or additions + to that Work or Derivative Works thereof, that is intentionally + submitted to Licensor for inclusion in the Work by the copyright owner + or by an individual or Legal Entity authorized to submit on behalf of + the copyright owner. For the purposes of this definition, "submitted" + means any form of electronic, verbal, or written communication sent + to the Licensor or its representatives, including but not limited to + communication on electronic mailing lists, source code control systems, + and issue tracking systems that are managed by, or on behalf of, the + Licensor for the purpose of discussing and improving the Work, but + excluding communication that is conspicuously marked or otherwise + designated in writing by the copyright owner as "Not a Contribution." + + "Contributor" shall mean Licensor and any individual or Legal Entity + on behalf of whom a Contribution has been received by Licensor and + subsequently incorporated within the Work. + + 2. Grant of Copyright License. Subject to the terms and conditions of + this License, each Contributor hereby grants to You a perpetual, + worldwide, non-exclusive, no-charge, royalty-free, irrevocable + copyright license to reproduce, prepare Derivative Works of, + publicly display, publicly perform, sublicense, and distribute the + Work and such Derivative Works in Source or Object form. + + 3. Grant of Patent License. Subject to the terms and conditions of + this License, each Contributor hereby grants to You a perpetual, + worldwide, non-exclusive, no-charge, royalty-free, irrevocable + (except as stated in this section) patent license to make, have made, + use, offer to sell, sell, import, and otherwise transfer the Work, + where such license applies only to those patent claims licensable + by such Contributor that are necessarily infringed by their + Contribution(s) alone or by combination of their Contribution(s) + with the Work to which such Contribution(s) was submitted. If You + institute patent litigation against any entity (including a + cross-claim or counterclaim in a lawsuit) alleging that the Work + or a Contribution incorporated within the Work constitutes direct + or contributory patent infringement, then any patent licenses + granted to You under this License for that Work shall terminate + as of the date such litigation is filed. + + 4. Redistribution. You may reproduce and distribute copies of the + Work or Derivative Works thereof in any medium, with or without + modifications, and in Source or Object form, provided that You + meet the following conditions: + + (a) You must give any other recipients of the Work or + Derivative Works a copy of this License; and + + (b) You must cause any modified files to carry prominent notices + stating that You changed the files; and + + (c) You must retain, in the Source form of any Derivative Works + that You distribute, all copyright, patent, trademark, and + attribution notices from the Source form of the Work, + excluding those notices that do not pertain to any part of + the Derivative Works; and + + (d) If the Work includes a "NOTICE" text file as part of its + distribution, then any Derivative Works that You distribute must + include a readable copy of the attribution notices contained + within such NOTICE file, excluding those notices that do not + pertain to any part of the Derivative Works, in at least one + of the following places: within a NOTICE text file distributed + as part of the Derivative Works; within the Source form or + documentation, if provided along with the Derivative Works; or, + within a display generated by the Derivative Works, if and + wherever such third-party notices normally appear. The contents + of the NOTICE file are for informational purposes only and + do not modify the License. You may add Your own attribution + notices within Derivative Works that You distribute, alongside + or as an addendum to the NOTICE text from the Work, provided + that such additional attribution notices cannot be construed + as modifying the License. + + You may add Your own copyright statement to Your modifications and + may provide additional or different license terms and conditions + for use, reproduction, or distribution of Your modifications, or + for any such Derivative Works as a whole, provided Your use, + reproduction, and distribution of the Work otherwise complies with + the conditions stated in this License. + + 5. Submission of Contributions. Unless You explicitly state otherwise, + any Contribution intentionally submitted for inclusion in the Work + by You to the Licensor shall be under the terms and conditions of + this License, without any additional terms or conditions. + Notwithstanding the above, nothing herein shall supersede or modify + the terms of any separate license agreement you may have executed + with Licensor regarding such Contributions. + + 6. Trademarks. This License does not grant permission to use the trade + names, trademarks, service marks, or product names of the Licensor, + except as required for reasonable and customary use in describing the + origin of the Work and reproducing the content of the NOTICE file. + + 7. Disclaimer of Warranty. Unless required by applicable law or + agreed to in writing, Licensor provides the Work (and each + Contributor provides its Contributions) on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or + implied, including, without limitation, any warranties or conditions + of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A + PARTICULAR PURPOSE. You are solely responsible for determining the + appropriateness of using or redistributing the Work and assume any + risks associated with Your exercise of permissions under this License. + + 8. Limitation of Liability. In no event and under no legal theory, + whether in tort (including negligence), contract, or otherwise, + unless required by applicable law (such as deliberate and grossly + negligent acts) or agreed to in writing, shall any Contributor be + liable to You for damages, including any direct, indirect, special, + incidental, or consequential damages of any character arising as a + result of this License or out of the use or inability to use the + Work (including but not limited to damages for loss of goodwill, + work stoppage, computer failure or malfunction, or any and all + other commercial damages or losses), even if such Contributor + has been advised of the possibility of such damages. + + 9. Accepting Warranty or Additional Liability. While redistributing + the Work or Derivative Works thereof, You may choose to offer, + and charge a fee for, acceptance of support, warranty, indemnity, + or other liability obligations and/or rights consistent with this + License. However, in accepting such obligations, You may act only + on Your own behalf and on Your sole responsibility, not on behalf + of any other Contributor, and only if You agree to indemnify, + defend, and hold each Contributor harmless for any liability + incurred by, or claims asserted against, such Contributor by reason + of your accepting any such warranty or additional liability. + + END OF TERMS AND CONDITIONS + + APPENDIX: How to apply the Apache License to your work. + + To apply the Apache License to your work, attach the following + boilerplate notice, with the fields enclosed by brackets "{}" + replaced with your own identifying information. (Don't include + the brackets!) The text should be enclosed in the appropriate + comment syntax for the file format. We also recommend that a + file or class name and description of purpose be included on the + same "printed page" as the copyright notice for easier + identification within third-party archives. + + Copyright {yyyy} {name of copyright owner} + + Licensed under the Apache License, Version 2.0 (the "License"); + you may not use this file except in compliance with the License. + You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software + distributed under the License is distributed on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + See the License for the specific language governing permissions and + limitations under the License. \ No newline at end of file diff --git a/examples/web_grid_animation/license/third_party/README.md b/examples/web_grid_animation/license/third_party/README.md new file mode 100644 index 0000000000..84ee18f00f --- /dev/null +++ b/examples/web_grid_animation/license/third_party/README.md @@ -0,0 +1,5 @@ +Following third-party dependencies exist in web_landing: + +* highlight.js@10.7.2: + * BSD 3-Clause License: [highlight.js](highlightjs.txt) + * https://github.com/highlightjs/highlight.js/blob/main/LICENSE \ No newline at end of file diff --git a/examples/web_grid_animation/license/third_party/highlightjs.txt b/examples/web_grid_animation/license/third_party/highlightjs.txt new file mode 100644 index 0000000000..02fa51c520 --- /dev/null +++ b/examples/web_grid_animation/license/third_party/highlightjs.txt @@ -0,0 +1,29 @@ +BSD 3-Clause License + +Copyright (c) 2006, Ivan Sagalaev. +All rights reserved. + +Redistribution and use in source and binary forms, with or without +modification, are permitted provided that the following conditions are met: + +* Redistributions of source code must retain the above copyright notice, this + list of conditions and the following disclaimer. + +* Redistributions in binary form must reproduce the above copyright notice, + this list of conditions and the following disclaimer in the documentation + and/or other materials provided with the distribution. + +* Neither the name of the copyright holder nor the names of its + contributors may be used to endorse or promote products derived from + this software without specific prior written permission. + +THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" +AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE +IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE +DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE +FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL +DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR +SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER +CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, +OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE +OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. \ No newline at end of file diff --git a/examples/web_grid_animation/settings.gradle.kts b/examples/web_grid_animation/settings.gradle.kts new file mode 100644 index 0000000000..f840f5186a --- /dev/null +++ b/examples/web_grid_animation/settings.gradle.kts @@ -0,0 +1,10 @@ +pluginManagement { + repositories { + gradlePluginPortal() + mavenCentral() + maven { url = uri("https://maven.pkg.jetbrains.space/public/p/compose/dev") } + } + +} +rootProject.name = "compose-web-grid-animation" + diff --git a/examples/web_grid_animation/src/jsMain/kotlin/com/sample/Main.kt b/examples/web_grid_animation/src/jsMain/kotlin/com/sample/Main.kt new file mode 100644 index 0000000000..2b17dcd14f --- /dev/null +++ b/examples/web_grid_animation/src/jsMain/kotlin/com/sample/Main.kt @@ -0,0 +1,7 @@ +package com.sample + +import org.w3c.dom.HTMLElement + + +fun main() { +} diff --git a/examples/web_grid_animation/src/jsMain/resources/app.css b/examples/web_grid_animation/src/jsMain/resources/app.css new file mode 100644 index 0000000000..f2d2abbd92 --- /dev/null +++ b/examples/web_grid_animation/src/jsMain/resources/app.css @@ -0,0 +1,149 @@ +@import url('https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,700'); + +:root { + --columns: 3; +} + +body{ + color: #5A626F; + background-color: #E7FFF4; + font-family: 'Open Sans Condensed', sans-serif; +} + +ul{ + margin: 100px 0; + display: grid; + grid-template-columns: repeat(var(--columns),1fr); + background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 600 1040' xmlns='http://www.w3.org/2000/svg' fill-rule='evenodd' clip-rule='evenodd' stroke-linejoin='round' stroke-miterlimit='2'%3E%3Cpath d='M0 0l300 173.205v346.41L0 346.41V0z' fill='url(%23_Linear1)'/%3E%3Cpath d='M300 519.615L600 692.82v346.411L300 866.025v-346.41z' fill='url(%23_Linear2)'/%3E%3Cpath d='M600 0L300 173.205v346.41L600 346.41V0z' fill='url(%23_Linear3)'/%3E%3Cpath d='M300 519.615L0 692.82v346.411l300-173.206v-346.41z' fill='url(%23_Linear4)'/%3E%3Cdefs%3E%3ClinearGradient id='_Linear1' x1='0' y1='0' x2='1' y2='0' gradientUnits='userSpaceOnUse' gradientTransform='rotate(-30 646.41 173.205) scale(346.41)'%3E%3Cstop offset='0' stop-color='%23b7ccc3'/%3E%3Cstop offset='1' stop-color='%23cde2d9'/%3E%3C/linearGradient%3E%3ClinearGradient id='_Linear2' x1='0' y1='0' x2='1' y2='0' gradientUnits='userSpaceOnUse' gradientTransform='rotate(-30 1766.025 -126.796) scale(346.41)'%3E%3Cstop offset='0' stop-color='%23b7ccc3'/%3E%3Cstop offset='1' stop-color='%23cde2d9'/%3E%3C/linearGradient%3E%3ClinearGradient id='_Linear3' x1='0' y1='0' x2='1' y2='0' gradientUnits='userSpaceOnUse' gradientTransform='rotate(-150 346.41 92.82) scale(346.41)'%3E%3Cstop offset='0' stop-color='%23e8dad1'/%3E%3Cstop offset='1' stop-color='%23fff0e7'/%3E%3C/linearGradient%3E%3ClinearGradient id='_Linear4' x1='0' y1='0' x2='1' y2='0' gradientUnits='userSpaceOnUse' gradientTransform='rotate(-150 266.025 392.82) scale(346.41)'%3E%3Cstop offset='0' stop-color='%23e8dad1'/%3E%3Cstop offset='1' stop-color='%23fff0e7'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E"); + background-size: calc(200%/(var(--columns))); +} + +li{ + grid-column-end: span 2; + position: relative; + padding-bottom: 86.66%; +} + +li:nth-child(2n-1){ + grid-column-start:2; +} + +li:before{ + content: ""; + position: absolute; + right: 0; + width: 50%; + height: 100%; + background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/adidas.png); + background-position: 90% 27%; + opacity: 0.6; + transform: skewy(30deg); + background-size: 40%; + background-repeat: no-repeat; +} +.adidas:before{ + background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/adidas.png); +} +.tiger:before{ + background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/tiger.png); +} +div{ + position: absolute; + width: 50%; + font-size: calc(15vw/var(--columns)); + transform: skewy(-30deg); + margin-top: 14%; + padding: 3%; +} + +p{ + font-size: 2em; +} + +img{ + position: absolute; + left: 50%; + transform: translateX(-50%); + width: 62%; + bottom: -10%; + -webkit-filter: drop-shadow(0 50px 20px rgba(0, 0, 0, 0.20)); + filter: drop-shadow(0 50px 20px rgba(0, 0, 0, 0.20)); + transition-property: bottom, filter, -webkit-filter; + transition-duration: .3s; +} + +img:hover{ + bottom: 0; + -webkit-filter: drop-shadow(0 80px 40px rgba(0, 0, 0, 0.20)); + filter: drop-shadow(0 80px 30px rgba(0, 0, 0, 0.20)); + } + +@media (min-width:600px){ + :root { + --columns: 5; + } + li:nth-child(2n-1){ + grid-column-start:auto; + } + li:nth-child(4n-3){ + grid-column-start:2; + } +} +@media (min-width:900px){ + :root { + --columns: 7; + } + li:nth-child(4n-3){ + grid-column-start:auto; + } + li:nth-child(6n-5){ + grid-column-start:2; + } +} +@media (min-width:1200px){ + :root { + --columns: 9; + } + li:nth-child(6n-5){ + grid-column-start:auto; + } + li:nth-child(8n-7){ + grid-column-start:2; + } +} +@media (min-width:1500px){ + :root { + --columns: 11; + } + li:nth-child(8n-7){ + grid-column-start:auto; + } + li:nth-child(10n-9){ + grid-column-start:2; + } +} +@media (min-width:1800px){ + :root { + --columns: 13; + } + li:nth-child(10n-9){ + grid-column-start:auto; + } + li:nth-child(12n-11){ + grid-column-start:2; + } + +} +@media (min-width:2100px){ + :root { + --columns: 15; + } + li:nth-child(12n-11){ + grid-column-start:auto; + } + li:nth-child(14n-13){ + grid-column-start:2; + } + +} + diff --git a/examples/web_grid_animation/src/jsMain/resources/favicon-32x32.png b/examples/web_grid_animation/src/jsMain/resources/favicon-32x32.png new file mode 100644 index 0000000000..7aece0f532 Binary files /dev/null and b/examples/web_grid_animation/src/jsMain/resources/favicon-32x32.png differ diff --git a/examples/web_grid_animation/src/jsMain/resources/hljs.css b/examples/web_grid_animation/src/jsMain/resources/hljs.css new file mode 100644 index 0000000000..cfcf781a09 --- /dev/null +++ b/examples/web_grid_animation/src/jsMain/resources/hljs.css @@ -0,0 +1,58 @@ +/*! + * StackOverflow.com light style + * + * @stackoverflow/stacks v0.56.0 + * https://github.com/StackExchange/Stacks + */ +.hljs { + display: block; + overflow-x: auto; + padding: .5em; + color: #2f3337; + background: #f6f6f6 +} + +.hljs-comment { + color: #656e77 +} + +.hljs-attr, .hljs-doctag, .hljs-keyword, .hljs-meta, .hljs-meta-keyword, .hljs-section, .hljs-selector-class, .hljs-selector-pseudo, .hljs-selector-tag { + color: #015692; + font-weight: bold; +} + +.hljs-attribute { + color: #803378 +} + +.hljs-built_in, .hljs-literal, .hljs-name, .hljs-number, .hljs-quote, .hljs-selector-id, .hljs-template-tag, .hljs-title, .hljs-type { + color: #b75501 +} + +.hljs-title { + font-style: italic; +} + +.hljs-link, .hljs-meta-string, .hljs-regexp, .hljs-selector-attr, .hljs-string, .hljs-symbol, .hljs-template-variable, .hljs-variable { + color: #54790d +} + +.hljs-bullet, .hljs-code { + color: #535a60 +} + +.hljs-deletion { + color: #c02d2e +} + +.hljs-addition { + color: #2f6f44 +} + +.hljs-emphasis { + font-style: italic +} + +.hljs-strong { + font-weight: 700 +} \ No newline at end of file diff --git a/examples/web_grid_animation/src/jsMain/resources/i1.svg b/examples/web_grid_animation/src/jsMain/resources/i1.svg new file mode 100644 index 0000000000..1aa3f8bd18 --- /dev/null +++ b/examples/web_grid_animation/src/jsMain/resources/i1.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/examples/web_grid_animation/src/jsMain/resources/ic_fb.svg b/examples/web_grid_animation/src/jsMain/resources/ic_fb.svg new file mode 100644 index 0000000000..e327b1725a --- /dev/null +++ b/examples/web_grid_animation/src/jsMain/resources/ic_fb.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/examples/web_grid_animation/src/jsMain/resources/ic_feed.svg b/examples/web_grid_animation/src/jsMain/resources/ic_feed.svg new file mode 100644 index 0000000000..2ac9c9a90b --- /dev/null +++ b/examples/web_grid_animation/src/jsMain/resources/ic_feed.svg @@ -0,0 +1,5 @@ + + + + + \ No newline at end of file diff --git a/examples/web_grid_animation/src/jsMain/resources/ic_info.svg b/examples/web_grid_animation/src/jsMain/resources/ic_info.svg new file mode 100644 index 0000000000..3176c71c06 --- /dev/null +++ b/examples/web_grid_animation/src/jsMain/resources/ic_info.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/examples/web_grid_animation/src/jsMain/resources/ic_insta.svg b/examples/web_grid_animation/src/jsMain/resources/ic_insta.svg new file mode 100644 index 0000000000..73620b7721 --- /dev/null +++ b/examples/web_grid_animation/src/jsMain/resources/ic_insta.svg @@ -0,0 +1,5 @@ + + + + + \ No newline at end of file diff --git a/examples/web_grid_animation/src/jsMain/resources/ic_jb_blog.svg b/examples/web_grid_animation/src/jsMain/resources/ic_jb_blog.svg new file mode 100644 index 0000000000..ac0280083c --- /dev/null +++ b/examples/web_grid_animation/src/jsMain/resources/ic_jb_blog.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/examples/web_grid_animation/src/jsMain/resources/ic_lang.svg b/examples/web_grid_animation/src/jsMain/resources/ic_lang.svg new file mode 100644 index 0000000000..a572022813 --- /dev/null +++ b/examples/web_grid_animation/src/jsMain/resources/ic_lang.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/examples/web_grid_animation/src/jsMain/resources/ic_linkedin.svg b/examples/web_grid_animation/src/jsMain/resources/ic_linkedin.svg new file mode 100644 index 0000000000..d6c17d7293 --- /dev/null +++ b/examples/web_grid_animation/src/jsMain/resources/ic_linkedin.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/examples/web_grid_animation/src/jsMain/resources/ic_twitter.svg b/examples/web_grid_animation/src/jsMain/resources/ic_twitter.svg new file mode 100644 index 0000000000..e3ddf5ca76 --- /dev/null +++ b/examples/web_grid_animation/src/jsMain/resources/ic_twitter.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/examples/web_grid_animation/src/jsMain/resources/ic_youtube.svg b/examples/web_grid_animation/src/jsMain/resources/ic_youtube.svg new file mode 100644 index 0000000000..11211a06b2 --- /dev/null +++ b/examples/web_grid_animation/src/jsMain/resources/ic_youtube.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/examples/web_grid_animation/src/jsMain/resources/index.html b/examples/web_grid_animation/src/jsMain/resources/index.html new file mode 100644 index 0000000000..8eb83f0e52 --- /dev/null +++ b/examples/web_grid_animation/src/jsMain/resources/index.html @@ -0,0 +1,903 @@ + + + + + + + + + + + + + + + + + + + CodePen - Isometric eCommerce CSS Grid + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/web/gradle.properties b/web/gradle.properties index facbb97665..ea1814b945 100644 --- a/web/gradle.properties +++ b/web/gradle.properties @@ -1,4 +1,4 @@ COMPOSE_CORE_VERSION=0.5.0-build235 COMPOSE_WEB_VERSION=0.0.16-SNAPSHOT -COMPOSE_WEB_BUILD_WITH_EXAMPLES=false +COMPOSE_WEB_BUILD_WITH_EXAMPLES=true compose.web.tests.integration.withFirefox diff --git a/web/settings.gradle.kts b/web/settings.gradle.kts index 3d6017196e..8a31a9b15b 100644 --- a/web/settings.gradle.kts +++ b/web/settings.gradle.kts @@ -38,6 +38,7 @@ if (extra["COMPOSE_WEB_BUILD_WITH_EXAMPLES"]!!.toString().toBoolean() == true) { println("building with examples") module(":examples:falling_balls_with_web", "../examples/falling_balls_with_web") module(":examples:compose-web-lp", "../examples/web_landing") + module(":examples:compose-web-grid-animation", "../examples/web_grid_animation") module(":examples:web-compose-bird", "../examples/web-compose-bird") module(":examples:web-with-react", "../examples/web-with-react") module(":examples:web-getting-started", "../examples/web-getting-started")