upload phone APP Sampler, SamplerFra,Swither,

rbdannenberg · Oct 6, 2023 · d18810e · d18810e
1 parent 852f8da
commit d18810e
Show file tree

Hide file tree

Showing 6 changed files with 183 additions and 0 deletions.
diff --git a/Sampler.css b/Sampler.css
@@ -0,0 +1,17 @@
+.button-style {
+    border-radius: 68px;
+    background: linear-gradient(145deg, #e6e6e6, #ffffff);
+
+
+    width: 200px;  
+    height: 200px;  
+    font-size: 60px;  
+    padding: 20px;  
+    color: rgb(255, 184, 31);
+    margin: 30px; 
+    border: 10px solid #170909;
+   }
+   .button-style:hover {
+    background: linear-gradient(145deg, #ffffff, hwb(35 36% 0%));
+
+  }
diff --git a/Sampler.jsx b/Sampler.jsx
@@ -0,0 +1,54 @@
+import React from "react";
+import { Button, ButtonToolbar, ButtonGroup } from "react-bootstrap";
+import "./Sampler.css"
+
+const Sampler = () => {
+  const containerStyle = {
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    minHeight: '100vh',
+    backgroundColor: 'rgb(252, 144, 3)',
+  };
+
+  const loopButtonStyle = {
+    position: 'absolute',  
+    top: '20px',
+    left: '40px',
+    padding: '40px',
+    backgroundColor: 'white',
+    border: '20px',
+    fontSize: '40px',
+    cursor: 'pointer',
+  };
+
+
+  return (
+    <div style={containerStyle}>
+      {/* Loop按钮 */}
+      <Button style={loopButtonStyle}>Loop</Button>
+
+      <ButtonToolbar>
+        <ButtonGroup>
+          <Button className="button-style">1</Button> 
+          <Button className="button-style">2</Button> 
+          <Button className="button-style">3</Button> 
+        </ButtonGroup>
+
+        <ButtonGroup>
+          <Button className="button-style">4</Button> 
+          <Button className="button-style">5</Button> 
+          <Button className="button-style">6</Button> 
+        </ButtonGroup>
+
+        <ButtonGroup>
+          <Button className="button-style">7</Button> 
+          <Button className="button-style">8</Button> 
+          <Button className="button-style">9</Button> 
+        </ButtonGroup>
+      </ButtonToolbar>
+    </div>
+  );
+};
+
+export default Sampler;
diff --git a/SamplerFra.css b/SamplerFra.css
@@ -0,0 +1,17 @@
+.button-style {
+    border-radius: 68px;
+    background: linear-gradient(145deg, #e6e6e6, #ffffff);
+
+
+    width: 200px;  
+    height: 200px;  
+    font-size: 60px;  
+    padding: 20px;  
+    color: rgb(255, 184, 31);
+    margin: 30px; 
+    border: 10px solid #170909;
+   }
+   .button-style:hover {
+    background: linear-gradient(145deg, #ffffff, hwb(35 36% 0%));
+
+  }
diff --git a/SamplerFra.jsx b/SamplerFra.jsx
@@ -0,0 +1,43 @@
+import React from "react";
+import { Button, ButtonToolbar, ButtonGroup } from "react-bootstrap";
+import "./SamplerFra.css"
+
+const SamplerFra = () => {
+  const containerStyle = {
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    minHeight: '100vh',
+    backgroundColor: 'rgb(252, 144, 3)',
+  };
+
+  const loopButtonStyle = {
+    position: 'absolute',  
+    top: '20px',
+    left: '40px',
+    padding: '40px',
+    backgroundColor: 'white',
+    border: '20px',
+    fontSize: '40px',
+    cursor: 'pointer',
+  };
+
+
+  return (
+    <div style={containerStyle}>
+      {/* Loop按钮 */}
+      <Button style={loopButtonStyle}>Frame</Button>
+
+      <ButtonToolbar>
+        <ButtonGroup>
+          <Button className="button-style">1</Button> 
+          <Button className="button-style">2</Button> 
+          <Button className="button-style">3</Button> 
+          <Button className="button-style">3</Button> 
+        </ButtonGroup>
+      </ButtonToolbar>
+    </div>
+  );
+};
+
+export default SamplerFra;
diff --git a/Switcher.css b/Switcher.css
@@ -0,0 +1,17 @@
+.button-style {
+    border-radius: 78px;
+    background: #b1e2ec;
+
+    width: 200px;  
+    height: 200px;  
+    font-size: 60px;  
+    padding: 20px;  
+    color: rgb(20, 134, 255);
+    margin: 50px; 
+    border: 10px solid #170909;
+   }
+   .button-style:hover {
+    background: linear-gradient(145deg, #ffffff, hwb(240 26% 2%));
+
+  }
+
diff --git a/Swither.jsx b/Swither.jsx
@@ -0,0 +1,35 @@
+import React from "react";
+import { Button, ButtonToolbar, ButtonGroup } from "react-bootstrap";
+import "./Switcher.css";  // Importing the CSS
+
+const Switcher = () => {
+  const containerStyle = {
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    minHeight: '100vh',
+    backgroundColor: 'rgb(3, 128, 252)',
+  };
+
+
+  return (
+    <div style={containerStyle}>
+      <ButtonToolbar>
+        <ButtonGroup>
+          <Button className="button-style">1</Button> 
+          <Button className="button-style">2</Button> 
+          <Button className="button-style">3</Button> 
+          <Button className="button-style">4</Button> 
+        </ButtonGroup>
+        <ButtonGroup>
+          <Button className="button-style">5</Button> 
+          <Button className="button-style">6</Button> 
+          <Button className="button-style">7</Button> 
+          <Button className="button-style">8</Button> 
+        </ButtonGroup>
+      </ButtonToolbar>
+    </div>
+  );
+};
+
+export default Switcher;